@charset "UTF-8"; /*** Global ***/ html { font-size: 15px; } body { font-size: 1em; line-height: 1.3; } .inline__block { display: inline-block; } /* stylelint-disable rule */ /* stylelint-enable rule */ .product_list { position: relative; overflow: hidden; margin-right: auto; margin-left: auto; width: 100%; max-width: 1280px; font-size: 0; } .product_list .product { display: inline-block; position: relative; overflow: hidden; box-sizing: border-box; width: 20%; height: 350px; vertical-align: top; } .product_list .product .product-img { position: absolute; top: 0; left: 50%; margin-left: -128px; width: 256px; height: 350px; } .product_list .product .product-img .img { width: 256px; height: 350px; } .product_list .product .content-link { display: block; position: absolute; z-index: 9999; top: 0; left: 0; margin-top: 0; width: 100%; height: 100%; color: #fff; font-size: 1.1875rem; } .product_list .product .content-link .link-text { display: inline-block; } .product_list .product .product-mask { position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); } .product_list .product .product-content { position: absolute; z-index: 9; top: 50%; width: 100%; text-align: center; transform: translateY(-50%); } .product_list .product .product-content .content-title { position: relative; padding: 0 30px; color: #fff; font-size: 1.75rem; letter-spacing: 0.1px; line-height: 1.2; text-shadow: 0 0 9px #000; } .product_list .product .product-content .content-hidden { position: relative; overflow: hidden; height: 100%; } .product_list .product .product-content .content-hidden .content-info { display: block; position: relative; margin-top: 19px; margin-right: auto; margin-left: auto; width: 90%; color: #fff; font-size: 1.25rem; line-height: 1.6; } .product_list .product .product-frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .product_list .product .product-frame > div { position: absolute; } .product_list .product .product-frame .frame-top { top: 0; left: 0; height: 2px; background: linear-gradient(to right, #f6f61c, #3ffb5e); } .product_list .product .product-frame .frame-right { top: 0; right: 0; width: 2px; background: linear-gradient(to bottom, #3ffb5e, #3627fe); } .product_list .product .product-frame .frame-bottom { right: 0; bottom: 0; height: 2px; background: linear-gradient(to left, #3627fe, #f40e2b); } .product_list .product .product-frame .frame-left { bottom: 0; left: 0; width: 2px; background: linear-gradient(to top, #f40e2b, #f6f61c); } .product_list .product .product-mask { top: 0; left: 0; opacity: 0; transition: opacity 400ms; } .product_list .product .product-content .content-hidden { opacity: 0; max-height: 0; } .product_list .product .product-frame .frame-top { width: 0%; transition: width 400ms 400ms; } .product_list .product .product-frame .frame-right { height: 0%; transition: height 400ms; } .product_list .product .product-frame .frame-bottom { width: 0%; transition: width 400ms 400ms; } .product_list .product .product-frame .frame-left { height: 0%; transition: height 400ms; } @keyframes hideToShow { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } .product_list .product.hover .product-mask { z-index: 9; opacity: 1; } .product_list .product.hover .product-content .content-title { transition: transform 0ms 200ms; animation: hideToShow 1s; } .product_list .product.hover .product-content .content-hidden { opacity: 1; max-height: 1000px; transition: opacity 500ms linear 500ms, max-height 500ms linear 450ms; } @media (min-width: 1280px) { .product_list .product:hover .product-frame { z-index: 12; } .product_list .product:hover .product-frame .frame-top { width: 100%; transition: width 400ms 400ms; } .product_list .product:hover .product-frame .frame-right { height: 100%; transition: height 400ms 800ms; } .product_list .product:hover .product-frame .frame-bottom { width: 100%; transition: width 400ms 400ms; } .product_list .product:hover .product-frame .frame-left { height: 100%; transition: height 400ms 800ms; } .product_list .product:hover .product-mask { z-index: 9; opacity: 1; } .product_list .product:hover .product-content .content-title { transition: transform 0ms 200ms; animation: hideToShow 1s; } .product_list .product:hover .product-content .content-hidden { opacity: 1; max-height: 1000px; transition: opacity 500ms linear 500ms, max-height 500ms linear 450ms; } } @media all and (max-width: 1279.5px) and (min-width: 731px) { .product_list { text-align: center; } .product_list .product .product-content .content-title { margin-bottom: -10px; padding: 0 55px; font-size: 1.875rem; } .product_list .product { display: inline-block; padding: 1px; box-sizing: border-box; width: 365px; height: 250px; } .product_list .product .product-content .content-hidden .content-info { line-height: 1.3; margin-top: 26px; } .product_list .product .product-img { top: 50%; left: 50%; margin-left: unset; transform: translate(-50%, -50%); } } @media all and (max-width: 730.5px) { .product_list { text-align: center; } .product_list .product { display: inline-block; padding: 1px; box-sizing: border-box; width: 100%; height: 300px; } .product_list .product .content-title { margin-bottom: -10px; } .product_list .product .product-content .content-hidden .content-info { line-height: 1.3; margin-top: 26px; } .product_list .product .product-img { top: 50%; left: 50%; margin-left: unset; width: 320px; height: 300px; transform: translate(-50%, -50%); } .product_list .product .product-img .img { width: 320px; height: 300px; } } .chart-content .content-row .row-item .item-info .info-name { color: #b3b3b3; } .chart-content .content-row .row-item .item-info.colorful .info-name { display: inline-block; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(92deg, #ede27c 31%, #e87d7e 57%, #d93377 75%); } .chart-content .content-row .row-item .item-container { position: absolute; top: 0; left: 0; } .chart-content .content-row .row-item .item-container .container-data { position: absolute; width: 100px; font-size: 0; text-align: left; } .chart-content .content-row .row-item .item-container .container-data .data-value, .chart-content .content-row .row-item .item-container .container-data .data-unit { display: inline-block; vertical-align: bottom; color: #b3b3b3; } .chart-content .content-row .row-item .item-container .container-data .data-value { font-size: 1.625rem; } .chart-content .content-row .row-item .item-container .container-data .data-unit { position: relative; top: -4px; padding-left: 2px; font-size: 1rem; } .chart-content .content-row .row-item .item-container.colorful .container-data { text-align: right; } .chart-content .content-row .row-item .item-container.colorful .container-data .data-value, .chart-content .content-row .row-item .item-container.colorful .container-data .data-unit { color: #fdea88; } .chart-content .content-row.content-row-y .row-item { position: absolute; width: 130px; text-align: left; } .chart-content .content-row.content-row-y .row-item .item-info .info-name { font-size: 1.5rem; } .chart-content .content-row.content-row-x .row-item { position: absolute; left: 50%; width: 130px; text-align: center; } .chart-content .content-row.content-row-x .row-item .item-info .info-name { font-size: 1rem; } .chart-content .content-row.content-value .row-item { position: absolute; width: 130px; text-align: center; } .chart-content .content-row.content-value .row-item .item-info .info-name { color: #fff; font-size: 1rem; } .chart-disclaimer .disclaimer-text { display: inline-block; position: relative; color: #6d6d6d; font-size: 1rem; line-height: 1.4; } @media all and (min-width: 731px) and (max-width: 1279.5px) { .chart-content .content-row .row-item .item-container .container-data .data-value { font-size: 1.5625rem; } .chart-content .content-row .row-item .item-container .container-data .data-unit { top: -4px; padding-left: 2px; font-size: 0.875rem; } .chart-content .content-row.content-row-y .row-item .item-info .info-name { font-size: 1.375rem; } .chart-content .content-row.content-row-x .row-item .item-info .info-name { font-size: 0.9375rem; } .chart-disclaimer .disclaimer-text { font-size: 0.9375rem; } } @media all and (max-width: 730.5px) { .chart-content .content-row .row-item .item-container .container-data .data-value { font-size: 1rem; } .chart-content .content-row .row-item .item-container .container-data .data-unit { top: 0; padding-left: 1px; font-size: 0.875rem; } .chart-content .content-row.content-row-y .row-item .item-info .info-name { font-size: 1.0625rem; } .chart-content .content-row.content-row-x .row-item .item-info .info-name { font-size: 0.75rem; } .chart-disclaimer { margin-right: auto; margin-left: auto; max-width: 65%; } .chart-disclaimer .disclaimer-text { font-size: 0.75rem; } } /*! Lity - v2.4.1 - 2020-04-26 * http://sorgalla.com/lity/ * Copyright (c) 2015-2020 Jan Sorgalla; Licensed MIT */ .lity { position: fixed; z-index: 9990; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; white-space: nowrap; outline: none !important; background: #0b0b0b; background: rgba(0, 0, 0, 0.9); -webkit-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.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: none !important; } .lity-wrap::before { display: inline-block; margin-right: -0.25em; height: 100%; content: ''; vertical-align: middle; } .lity-loader { position: absolute; z-index: 9991; top: 50%; opacity: 0; margin-top: -0.8em; width: 100%; color: #fff; font-size: 14px; font-family: Arial, Helvetica, sans-serif; text-align: center; -webkit-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.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: none !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 0.3s ease; -o-transition: -o-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease, -o-transform 0.3s ease; } .lity-loading .lity-content, .lity-closed .lity-content { -webkit-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.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, 0.6); box-shadow: 0 0 8px rgba(0, 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; outline: none; border: 0; background: none; -webkit-appearance: none; font-style: normal; line-height: 35px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); -webkit-box-shadow: none; box-shadow: none; } .lity-close::-moz-focus-inner { padding: 0; border: 0; } .lity-close:hover, .lity-close:focus, .lity-close:active, .lity-close:visited { padding: 0; color: #fff; font-size: 35px; font-family: Arial, Baskerville, monospace; text-align: center; text-decoration: none; outline: none; border: 0; background: none; font-style: normal; line-height: 35px; text-shadow: 0 1px 2px rgba(0, 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-iframe .lity-container, .lity-youtube .lity-container, .lity-vimeo .lity-container, .lity-facebookvideo .lity-container, .lity-googlemaps .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, 0.6); box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); } .lity-hide { display: none; } .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 { position: absolute !important; overflow: hidden; padding: 0 !important; width: 1px !important; height: 1px !important; border: 0 !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } sup { position: relative; vertical-align: baseline; top: -0.44em; font-size: 0.6em; line-height: 0; } sup.sign-deg { top: -0.5em; font-size: 0.6em; } sup.sign-star { top: -0.83em; font-size: 0.5em; } sup.sign-tm { top: 0; font-size: 1em; } sup.footnote-num { top: -0.5em; font-size: 0.6em; } sup.sign-xe { top: -0.7em; font-size: 1em; } sup a { color: inherit; } sup a:hover { color: inherit; } .wd__content .content__info sup.sign-cr { top: 0; font-size: 1.1em; } .wd__content .content__info sup.sign-tm { top: 0; font-size: 1em; } .wd__content .content__info sup.sign-star { top: -0.17em; font-size: 1em; } .wd__content .content__info sup.sign-deg { top: -0.1em; padding: 0 0.02em; font-size: 1em; } .wd__content .content__info sup.footnote-num { top: -0.97em; font-size: 0.5em; } .wd__content.main-content .content__slogan sup.sign-tm { top: 0; } .wd__content.main-content .content__slogan .sign-cr { top: -0.5em; font-size: 0.6em; } .wd__feature__list .wd__feature .wd__feature__data sup.sign-cr { top: -0.55em; font-size: 0.6em; } .wd__feature__list .wd__feature .wd__feature__data sup.sign-xe { top: -0.5em; font-size: 0.7em; } .wd__feature__list .wd__feature .wd__feature__data sup.footnote-num { top: -0.85em; font-size: 0.45em; } .wd__feature__list .wd__feature .wd__feature__describe sup.sign-tm { top: 0; font-size: 1em; } .wd__feature__list .wd__feature .wd__feature__describe sup.sign-deg { top: -0.1em; font-size: 1em; } .wd__feature__list .wd__feature .wd__feature__describe sup.footnote-num { top: -0.86em; font-size: 0.5em; } .wd__feature__list .wd__feature .wd__feature__describe span sup.sign-deg { padding: 0 0.02em; } .ksp__layout sup.sign-cr { top: -0.55em; font-size: 0.6em; } .ksp__layout sup.sign-tm { top: -0.07em; font-size: 0.9em; } .kv__table sup.sign-cr { top: 0; font-size: 1.1em; } .slick-tab-content .slick-info sup.sign-cr { top: 0; font-size: 1.1em; } .footnote-item sup.sign-deg { top: -0.2em; font-size: 0.9em; } .footnote-item sup.sign-tm { top: -0.09em; font-size: 0.9em; } .footnote-item sup.sign-cr { top: 0.03em; font-size: 1.1em; } .ie #CMD sup { top: -0.1em; font-size: 1em; line-height: 0px; } .ie #CMD sup.sign-deg { top: -0.6em; font-size: 45px; } .ie #CMD sup.sign-star { top: -0.83em; font-size: 0.5em; } .ie #CMD sup.sign-cr { top: -0.2em; font-size: 1em; } .ie #CMD sup.sign-fnum { top: -0.5em; font-size: 0.7em; } .ie #CMD sup.footnote-num { top: -1.7em; font-size: 0.33em; } .ie #CMD .wd__content .content__title sup.sign-tm { top: -0.5em; font-size: 0.7em; } .ie #CMD .wd__content .content__info sup.sign-cr { top: 0; font-size: 1.3em; } .ie #CMD .wd__content .content__info sup.sign-tm { top: -0.1em; font-size: 1.2em; } .ie #CMD .wd__content .content__info sup.sign-star { top: -0.17em; font-size: 1em; } .ie #CMD .wd__content .content__info sup.sign-deg { top: -0.1em; padding: 0 0.02em; font-size: 1em; } .ie #CMD .wd__content .content__info sup.footnote-num { top: -0.97em; font-size: 0.5em; } .ie #CMD .wd__feature__list .wd__feature .wd__feature__describe sup.sign-cr { top: 0; font-size: 1.3em; } .ie #CMD .wd__feature__list .wd__feature .wd__feature__describe sup.sign-tm { top: 0; font-size: 1.3em; } .ie #CMD .wd__feature__list .wd__feature .wd__feature__describe sup.sign-deg { top: -0.1em; font-size: 1em; } .ie #CMD .wd__feature__list .wd__feature .wd__feature__describe sup.footnote-num { top: -0.86em; font-size: 0.5em; } .ie #CMD .wd__feature__list .wd__feature .wd__feature__describe span sup.sign-deg { padding: 0 0.02em; } @media all and (min-width: 1280px) { .wd__content .content__slogan sup.sign-star { top: -0.5em; font-size: 0.6em; } .wd__content .content__slogan sup.footnote-num { top: -1.4em; } .wd__content .content__title sup.sign-star { top: -0.8em; } .wd__content .content__title sup.sign-tm { top: -0.3em; font-size: 0.7em; } .wd__content .content__title sup.footnote-num { top: -0.5em; font-size: 0.6em; } .wd__content .content__info sup.sign-star { top: -0.1em; } .wd__content .content__info sup.footnote-num { top: -0.9em; } .wd__feature__list .wd__feature .wd__feature__data sup.sign-star { top: -0.75em; font-size: 0.5em; } .wd__feature__list .wd__feature .wd__feature__data sup.footnote-num { top: -1.75em; font-size: 0.3em; } .wd__feature__list .wd__feature .wd__feature__data span sup.sign-tm { top: -0.2em; font-size: 0.8em; } .wd__feature__list .wd__feature .wd__feature__data span sup.sign-cr { top: -0.2em; font-size: 0.8em; } .wd__feature__list .wd__feature .wd__feature__data span sup.sign-star { top: -0.4em; font-size: 0.7em; } .wd__feature__list .wd__feature .wd__feature__data span sup.sign-deg { top: -0.1em; font-size: 0.9em; } .wd__feature__list .wd__feature .wd__feature__data span sup.footnote-num { top: -1.2em; font-size: 0.43em; } .wd__feature__list .wd__feature .wd__feature__describe sup.sign-star { top: -0.03em; font-size: 1.25em; } .wd__feature__list .wd__feature .wd__feature__describe sup.footnote-num { top: -0.7em; font-size: 0.6em; } .section__kv .wd__content .content__title sup.sign-star { top: -0.65em; font-size: 0.55em; } .section__kv .wd__content .content__title sup.footnote-num { top: -1.6em; } .section__kv .wd__content .content__info sup.sign-star { top: -0.2em; font-size: 0.9em; } .section__kv .wd__content .content__info sup.sign-deg { padding: 0; } .section__kv .wd__content .content__info sup.footnote-num { top: -1em; } } @media all and (min-width: 731px) and (max-width: 1279.5px) { sup { top: -0.5em; } sup.sign-deg { top: -0.25em; font-size: 0.8em; } sup.sign-cr { top: 0; } sup.sign-star { top: -0.85em; } sup.sign-xe { top: -0.7em; } .wd__content .content__slogan sup.sign-tm { top: -0.4em; } .wd__content .content__slogan sup.sign-cr { top: -0.27em; font-size: 0.7em; } .wd__content .content__slogan sup.sign-star { top: -0.37em; font-size: 0.75em; } .wd__content .content__slogan sup.footnote-num { top: -0.5em; font-size: 0.6em; } .wd__content .content__title sup.sign-tm { top: 0; font-size: 1.1em; } .wd__content .content__title sup.sign-star { top: -0.77em; } .wd__content .content__title sup.sign-cr { top: 0; font-size: 1.1em; } .wd__content .content__title sup.footnote-num { top: -0.5em; font-size: 0.6em; } .wd__content .content__info sup.sign-star { top: -0.08em; font-size: 1.1em; } .wd__content .content__info sup.footnote-num { top: -0.5em; font-size: 0.6em; } .wd__feature__list .wd__feature .wd__feature__data sup.sign-deg { top: -0.55em; font-size: 0.618em; } .wd__feature__list .wd__feature .wd__feature__data sup.sign-tm { top: 0; } .wd__feature__list .wd__feature .wd__feature__data sup.sign-star { top: -0.6em; font-size: 0.55em; } .wd__feature__list .wd__feature .wd__feature__data span sup.sign-tm { top: -0.15em; font-size: 0.8em; } .wd__feature__list .wd__feature .wd__feature__data span sup.sign-cr { top: -0.2em; font-size: 0.8em; } .wd__feature__list .wd__feature .wd__feature__data span sup.sign-star { top: -0.34em; font-size: 0.7em; } .wd__feature__list .wd__feature .wd__feature__data span sup.footnote-num { top: -1.1em; font-size: 0.43em; } .wd__feature__list .wd__feature .wd__feature__describe sup.sign-cr { top: 0; } .wd__feature__list .wd__feature .wd__feature__describe sup.sign-star { top: 0; font-size: 1.35em; } .wd__feature__list .wd__feature .wd__feature__describe sup.footnote-num { top: -0.47em; font-size: 0.8em; } .section__kv .wd__content .content__title sup.sign-tm { top: -0.45em; } .section__kv .wd__content .content__title sup.sign-star { top: -0.48em; font-size: 0.65em; } .section__kv .wd__content .content__title sup.footnote-num { top: -1.57em; } .section__kv .wd__content .content__info sup.sign-star { top: -0.2em; font-size: 0.9em; } .section__kv .wd__content .content__info sup.footnote-num { top: -1.25em; font-size: 0.4em; } .ksp__layout .wd__feature__list .wd__feature .wd__feature__data sup.sign-cr { top: -0.55em; font-size: 0.6em; } .ksp__layout .wd__feature__list .wd__feature .wd__feature__data sup.sign-tm { top: -0.07em; font-size: 0.9em; } .kv__table sup.sign-cr { top: 0; font-size: 1.1em; } .slick-tab-content .slick-info sup.sign-cr { top: 0; font-size: 1.1em; } .footnote-item sup.sign-cr { top: 0.1em; } } @media all and (max-width: 730.5px) { sup.sign-deg { top: -0.25em; font-size: 0.8em; } .wd__content .content__slogan sup.sign-tm { top: -0.33em; } .wd__content .content__slogan sup.sign-cr { top: -0.31em; } .wd__content .content__slogan sup.sign-star { top: -0.1em; font-size: 1.1em; } .wd__content .content__slogan sup.footnote-num { top: -0.85em; font-size: 0.5em; } .wd__content .content__title sup.sign-cr { top: -0.06em; font-size: 0.9em; } .wd__content .content__title sup.sign-tm { top: -0.2em; font-size: 0.8em; } .wd__content .content__title sup.sign-star { top: -0.42em; font-size: 0.7em; } .wd__content .content__title sup.footnote-num { top: -0.5em; font-size: 0.6em; } .wd__content .content__info sup.sign-cr { top: 0; font-size: 1em; } .wd__content .content__info sup.sign-tm { top: 0; font-size: 1em; } .wd__content .content__info sup.sign-star { top: 0; font-size: 1.25em; } .wd__content .content__info sup.footnote-num { top: -0.7em; font-size: 0.6em; } .wd__feature__list .wd__feature .wd__feature__data sup.sign-deg { top: -0.45em; font-size: 0.618em; } .wd__feature__list .wd__feature .wd__feature__data sup.sign-tm { top: 0; font-size: 1em; } .wd__feature__list .wd__feature .wd__feature__data sup.sign-star { top: -0.4em; font-size: 0.7em; } .wd__feature__list .wd__feature .wd__feature__data sup.footnote-num { top: -1.3em; font-size: 0.4em; } .wd__feature__list .wd__feature .wd__feature__data span sup.sign-cr { top: 0; font-size: 1em; } .wd__feature__list .wd__feature .wd__feature__data span sup.sign-tm { top: -0.23em; } .wd__feature__list .wd__feature .wd__feature__data span sup.sign-star { top: -0.22em; font-size: 0.88em; } .wd__feature__list .wd__feature .wd__feature__data span sup.footnote-num { top: -1.2em; } .wd__feature__list .wd__feature .wd__feature__describe sup.sign-star { top: 0.08em; font-size: 1.6em; } .wd__feature__list .wd__feature .wd__feature__describe sup.footnote-num { top: -0.5em; font-size: 0.8em; } .section__kv .wd__content .content__title sup.sign-cr { top: -0.1em; } .section__kv .wd__content .content__title sup.sign-star { top: -0.43em; } .section__kv .wd__content .content__title sup.footnote-num { top: -1.26em; } .section__kv .wd__content .content__info sup.sign-tm { top: 0; font-size: 1em; } .section__kv .wd__content .content__info sup.sign-cr { top: 0; font-size: 1.2em; } .section__kv .wd__content .content__info sup.sign-star { top: -0.06em; font-size: 1.2em; } .section__kv .wd__content .content__info sup.footnote-num { top: -0.65em; font-size: 0.65em; } .ksp__layout .wd__feature__list .wd__feature .wd__feature__data sup.sign-cr { top: -0.55em; font-size: 0.6em; } .ksp__layout .wd__feature__list .wd__feature .wd__feature__data sup.sign-tm { top: -0.07em; font-size: 0.9em; } .ksp__layout .wd__feature__list .wd__feature .wd__feature__describe sup.sign-cr { top: -0.55em; font-size: 0.6em; } .kv__table sup.sign-cr { top: 0; font-size: 1.1em; } .slick-tab-content .slick-info sup.sign-cr { top: 0; font-size: 1.1em; } .section__versatility .wd__content .content__slogan sup.sign-cr { top: -0.44em; } .footnote-item sup.sign-cr { top: 0.03em; font-size: 1.1em; } } [class*='text__tt'] sup { position: relative; top: -0.3em; font-size: 0.6em; background-color: rgba(0, 0, 0, 0); } [class*='text__tt'] sup.sign-deg { top: 0; } [class*='text__tt'] sup.sign-tm { top: 0; font-size: 1em; } [class*='text__tt'] sup.sign-star { top: -0.83em; font-size: 0.5em; } .screen-reader-only { position: absolute; overflow: hidden; width: 1px; white-space: nowrap; clip: rect(0 0 0 0); } /* .wd__section .slick-prev, .wd__section .slick-next, */ .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; } #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 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, #overviewContentInsertWrapper nav:focus-visible { outline: 2px solid #248dff; } .js-focus-visible #CMD :focus:not(.focus-visible) { outline: none; } body { background-attachment: scroll !important; -moz-osx-font-smoothing: grayscale; } #CMD { -webkit-transition-duration: 700ms; -khtml-transition-duration: 700ms; -moz-transition-duration: 700ms; -ms-transition-duration: 700ms; -o-transition-duration: 700ms; transition-duration: 700ms; -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(0.25, 0.46, 0.33, 0.98); -khtml-transition-timing-function: cubic-bezier(0.25, 0.46, 0.33, 0.98); -moz-transition-timing-function: cubic-bezier(0.25, 0.46, 0.33, 0.98); -ms-transition-timing-function: cubic-bezier(0.25, 0.46, 0.33, 0.98); -o-transition-timing-function: cubic-bezier(0.25, 0.46, 0.33, 0.98); transition-timing-function: cubic-bezier(0.25, 0.46, 0.33, 0.98); position: relative; opacity: 1 !important; margin-bottom: 0; font-size: 0; text-align: center; transition: none !important; line-height: 1.3; -webkit-tap-highlight-color: transparent; } #CMD * { box-sizing: border-box; } @media all and (max-width: 320px) { #CMD { margin-bottom: 0; } } .fix_ie_png { filter: progid:dximagetransform.microsoft.gradient(startColorstr=#0fff, endColorstr=#0fff); } @media all and (min-width: 1280px) { .clear__background__src { background-image: none !important; } } section { position: relative; margin-right: auto; margin-left: auto; max-width: 2560px; } @media all and (min-width: 731px) and (max-width: 1279.5px) { section { margin-right: auto; margin-left: auto; width: 100%; max-width: 1279.5px; } } @media all and (min-width: 0) and (max-width: 730.5px) { section { margin-right: auto; margin-left: auto; width: 100%; max-width: 730.5px; } } .progressive-image { background-image: none !important; mask: none !important; -webkit-mask-image: none !important; } @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; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; transition: opacity 800ms linear; } .grace-show.show { -webkit-opacity: 1; -khtml-opacity: 1; -moz-opacity: 1; -ms-opacity: 1; -o-opacity: 1; opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; transform: translate3d(0, 0, 0); will-change: opacity; } .grace-show.animated { transform: none; will-change: null; transition: none; } } .in.moving__element { will-change: transform, opacity; } .wd__animation__easeout { -webkit-transition-duration: 500ms, 500ms; -khtml-transition-duration: 500ms, 500ms; -moz-transition-duration: 500ms, 500ms; -ms-transition-duration: 500ms, 500ms; -o-transition-duration: 500ms, 500ms; transition-duration: 500ms, 500ms; -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, 0.58, 1); -khtml-transition-timing-function: cubic-bezier(0, 0, 0.58, 1); -moz-transition-timing-function: cubic-bezier(0, 0, 0.58, 1); -ms-transition-timing-function: cubic-bezier(0, 0, 0.58, 1); -o-transition-timing-function: cubic-bezier(0, 0, 0.58, 1); transition-timing-function: cubic-bezier(0, 0, 0.58, 1); -moz-transition-duration: 500ms; -moz-transition-property: all; } @keyframes ripple { 0% { opacity: 0; } 10% { opacity: 0; } 50% { opacity: 1; } 90% { opacity: 0; } 100% { opacity: 0; } } @keyframes swing { 20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } } @keyframes ballRotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } .text__animation > h1, .text__animation > h2, .text__animation > h3, .text__animation > h4, .text__animation > span, .text__animation > div, .text__animation > figure, .text__animation > img, .text__animation > a { opacity: 0; transform: translateZ(0) translateY(30px); transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .wd__content.text__animation > h1, .wd__content.text__animation > h2, .wd__content.text__animation > h3, .wd__content.text__animation > h4, .wd__content.text__animation > span, .wd__content.text__animation > div, .wd__content.text__animation > figure, .wd__content.text__animation > img, .wd__content.text__animation > a { opacity: 0; transform: translateZ(0) translateY(30px); transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .wd__content.text__animation.text-showed .content__slogan, .wd__content.text__animation.text-showed .content__title, .wd__content.text__animation.text-showed .content__info, .wd__content.text__animation.text-showed .content__comment, .wd__content.text__animation.text-showed .content__link, .wd__content.text__animation.text-showed .wd__feature__list { will-change: null; transform: none; } .inner-modal .wd__content.text__animation .content__slogan, .inner-modal .wd__content.text__animation .content__title, .inner-modal .wd__content.text__animation .content__info, .inner-modal .wd__content.text__animation .content__comment, .inner-modal .wd__content.text__animation .content__link, .inner-modal .wd__content.text__animation .wd__feature__list { opacity: 0; transform: translateZ(0) translateY(30px); transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .inner-modal .wd__content.text__animation.text-showed .content__slogan, .inner-modal .wd__content.text__animation.text-showed .content__title, .inner-modal .wd__content.text__animation.text-showed .content__info, .inner-modal .wd__content.text__animation.text-showed .content__comment, .inner-modal .wd__content.text__animation.text-showed .content__link, .inner-modal .wd__content.text__animation.text-showed .wd__feature__list { will-change: null; transform: none; } .outer-view { opacity: 1; transition: opacity 300ms linear; } .outer-view.is-hide { opacity: 0; } .wd__section .slick-dots { margin-right: auto; margin-left: auto; } #CMD .outer-view { margin-top: 56px \9 !important; } #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-5, #main-zone-3, #main-zone-4, #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; } } .odin ol li, .odin ul li { margin: 0; } .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: 45px; margin-left: 0; } .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; } @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__describe__top, .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 { 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 .section_content.text-white .modal-button { background-color: rgba(0, 0, 0, 0.6); color: white; border-color: white; } #CMD .wd__section .section_content.text-white .modal-button:hover { background-color: rgba(0, 0, 0, 0.6); color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.6); } #CMD .wd__section .section_content.text-white .wd__content .content__comment, #CMD .wd__section .section_content.text-white .wd__content .content__info, #CMD .wd__section .section_content.text-white .wd__content .content__title { color: #fff; } #CMD .wd__section .section_content.text-white .wd__feature__list .wd__feature .wd__feature__data, #CMD .wd__section .section_content.text-white .wd__feature__list .wd__feature .wd__feature__data *, #CMD .wd__section .section_content.text-white .wd__feature__list .wd__feature .wd__feature__describe, #CMD .wd__section .section_content.text-white .wd__feature__list .wd__feature .wd__feature__describe *, #CMD .wd__section .section_content.text-white .wd__feature__list .wd__feature .wd__feature__describe__top, #CMD .wd__section .section_content.text-white .wd__feature__list .wd__feature .wd__feature__describe__top * { color: #fff; } #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-start-cap, .modal-button-container.bg-gray .modal-button .modal-button-scaler, .modal-button-container.bg-gray .modal-button .modal-button-end-cap { background: #6f6f6f; } .modal-button-container.bg-white .modal-button.old__browser .modal-button-start-cap, .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 { 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/large/1x/icon/icon_modalbtn_gray.png) !important; } .modal-button-container.bg-white .modal-button .modal-button-copy { color: #333; } .modal-button-container.bg-white .modal-button .modal-button-start-cap, .modal-button-container.bg-white .modal-button .modal-button-scaler, .modal-button-container.bg-white .modal-button .modal-button-end-cap { background: #fff; } .modal-button-container.bg-white .modal-button .pluscircle-icon svg path { fill: #333; } .product_list { position: relative; overflow: hidden; margin-right: auto; margin-left: auto; width: 100%; max-width: 1280px; font-size: 0; } .product_list .product { display: inline-block; position: relative; overflow: hidden; box-sizing: border-box; width: 20%; height: 350px; vertical-align: top; } .product_list .product .product-img { position: absolute; top: 0; left: 50%; margin-left: -128px; width: 256px; height: 350px; } .product_list .product .product-img .img { width: 256px; height: 350px; } .product_list .product .content-link { display: block; position: absolute; z-index: 9999; top: 0; left: 0; margin-top: 0; width: 100%; height: 100%; color: #fff; font-size: 1.1875rem; } .product_list .product .content-link .link-text { display: inline-block; } .product_list .product .product-mask { position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); } .product_list .product .product-content { position: absolute; z-index: 9; top: 50%; width: 100%; text-align: center; transform: translateY(-50%); } .product_list .product .product-content .content-title { position: relative; padding: 0 30px; color: #fff; font-size: 1.75rem; letter-spacing: 0.1px; line-height: 1.2; text-shadow: 0 0 9px #000; } .product_list .product .product-content .content-hidden { position: relative; overflow: hidden; height: 100%; } .product_list .product .product-content .content-hidden .content-info { display: block; position: relative; margin-top: 19px; margin-right: auto; margin-left: auto; width: 90%; color: #fff; font-size: 1.25rem; line-height: 1.6; } .product_list .product .product-frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .product_list .product .product-frame > div { position: absolute; } .product_list .product .product-frame .frame-top { top: 0; left: 0; height: 2px; background: linear-gradient(to right, #f6f61c, #3ffb5e); } .product_list .product .product-frame .frame-right { top: 0; right: 0; width: 2px; background: linear-gradient(to bottom, #3ffb5e, #3627fe); } .product_list .product .product-frame .frame-bottom { right: 0; bottom: 0; height: 2px; background: linear-gradient(to left, #3627fe, #f40e2b); } .product_list .product .product-frame .frame-left { bottom: 0; left: 0; width: 2px; background: linear-gradient(to top, #f40e2b, #f6f61c); } .product_list .product .product-mask { top: 0; left: 0; opacity: 0; transition: opacity 400ms; } .product_list .product .product-content .content-hidden { opacity: 0; max-height: 0; } .product_list .product .product-frame .frame-top { width: 0%; transition: width 400ms 400ms; } .product_list .product .product-frame .frame-right { height: 0%; transition: height 400ms; } .product_list .product .product-frame .frame-bottom { width: 0%; transition: width 400ms 400ms; } .product_list .product .product-frame .frame-left { height: 0%; transition: height 400ms; } @keyframes hideToShow { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } .product_list .product.hover .product-mask { z-index: 9; opacity: 1; } .product_list .product.hover .product-content .content-title { transition: transform 0ms 200ms; animation: hideToShow 1s; } .product_list .product.hover .product-content .content-hidden { opacity: 1; max-height: 1000px; transition: opacity 500ms linear 500ms, max-height 500ms linear 450ms; } @media (min-width: 1280px) { .product_list .product:hover .product-frame { z-index: 12; } .product_list .product:hover .product-frame .frame-top { width: 100%; transition: width 400ms 400ms; } .product_list .product:hover .product-frame .frame-right { height: 100%; transition: height 400ms 800ms; } .product_list .product:hover .product-frame .frame-bottom { width: 100%; transition: width 400ms 400ms; } .product_list .product:hover .product-frame .frame-left { height: 100%; transition: height 400ms 800ms; } .product_list .product:hover .product-mask { z-index: 9; opacity: 1; } .product_list .product:hover .product-content .content-title { transition: transform 0ms 200ms; animation: hideToShow 1s; } .product_list .product:hover .product-content .content-hidden { opacity: 1; max-height: 1000px; transition: opacity 500ms linear 500ms, max-height 500ms linear 450ms; } } @media all and (max-width: 1279.5px) and (min-width: 731px) { .product_list { text-align: center; } .product_list .product .product-content .content-title { margin-bottom: -10px; padding: 0 55px; font-size: 1.875rem; } .product_list .product { display: inline-block; padding: 1px; box-sizing: border-box; width: 365px; height: 250px; } .product_list .product .product-content .content-hidden .content-info { line-height: 1.3; margin-top: 26px; } .product_list .product .product-img { top: 50%; left: 50%; margin-left: unset; transform: translate(-50%, -50%); } } @media all and (max-width: 730.5px) { .product_list { text-align: center; } .product_list .product { display: inline-block; padding: 1px; box-sizing: border-box; width: 100%; height: 300px; } .product_list .product .content-title { margin-bottom: -10px; } .product_list .product .product-content .content-hidden .content-info { line-height: 1.3; margin-top: 26px; } .product_list .product .product-img { top: 50%; left: 50%; margin-left: unset; width: 320px; height: 300px; transform: translate(-50%, -50%); } .product_list .product .product-img .img { width: 320px; height: 300px; } } .chart-content .content-row .row-item .item-info .info-name { color: #b3b3b3; } .chart-content .content-row .row-item .item-info.colorful .info-name { display: inline-block; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(92deg, #ede27c 31%, #e87d7e 57%, #d93377 75%); } .chart-content .content-row .row-item .item-container { position: absolute; top: 0; left: 0; } .chart-content .content-row .row-item .item-container .container-data { position: absolute; width: 100px; font-size: 0; text-align: left; } .chart-content .content-row .row-item .item-container .container-data .data-value, .chart-content .content-row .row-item .item-container .container-data .data-unit { display: inline-block; vertical-align: bottom; color: #b3b3b3; } .chart-content .content-row .row-item .item-container .container-data .data-value { font-size: 1.625rem; } .chart-content .content-row .row-item .item-container .container-data .data-unit { position: relative; top: -4px; padding-left: 2px; font-size: 1rem; } .chart-content .content-row .row-item .item-container.colorful .container-data { text-align: right; } .chart-content .content-row .row-item .item-container.colorful .container-data .data-value, .chart-content .content-row .row-item .item-container.colorful .container-data .data-unit { color: #fdea88; } .chart-content .content-row.content-row-y .row-item { position: absolute; width: 130px; text-align: left; } .chart-content .content-row.content-row-y .row-item .item-info .info-name { font-size: 1.5rem; } .chart-content .content-row.content-row-x .row-item { position: absolute; left: 50%; width: 130px; text-align: center; } .chart-content .content-row.content-row-x .row-item .item-info .info-name { font-size: 1rem; } .chart-content .content-row.content-value .row-item { position: absolute; width: 130px; text-align: center; } .chart-content .content-row.content-value .row-item .item-info .info-name { color: #fff; font-size: 1rem; } .chart-disclaimer .disclaimer-text { display: inline-block; position: relative; color: #6d6d6d; font-size: 1rem; line-height: 1.4; } @media all and (min-width: 731px) and (max-width: 1279.5px) { .chart-content .content-row .row-item .item-container .container-data .data-value { font-size: 1.5625rem; } .chart-content .content-row .row-item .item-container .container-data .data-unit { top: -4px; padding-left: 2px; font-size: 0.875rem; } .chart-content .content-row.content-row-y .row-item .item-info .info-name { font-size: 1.375rem; } .chart-content .content-row.content-row-x .row-item .item-info .info-name { font-size: 0.9375rem; } .chart-disclaimer .disclaimer-text { font-size: 0.9375rem; } } @media all and (max-width: 730.5px) { .chart-content .content-row .row-item .item-container .container-data .data-value { font-size: 1rem; } .chart-content .content-row .row-item .item-container .container-data .data-unit { top: 0; padding-left: 1px; font-size: 0.875rem; } .chart-content .content-row.content-row-y .row-item .item-info .info-name { font-size: 1.0625rem; } .chart-content .content-row.content-row-x .row-item .item-info .info-name { font-size: 0.75rem; } .chart-disclaimer { margin-right: auto; margin-left: auto; max-width: 65%; } .chart-disclaimer .disclaimer-text { font-size: 0.75rem; } } .beer-slider { display: inline-block; position: relative; overflow: hidden; } .beer-slider *, .beer-slider::before, .beer-slider::after, .beer-slider *::before, .beer-slider *::after { 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 0.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(-30px); pointer-events: none; } .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-reveal, .beer-ready .beer-handle { opacity: 1; } .wd__section { /* Slider */ /* Icons */ /* Arrows */ /* Dots */ /* Slider */ } .wd__section .wd__content { color: #242424; } .wd__section .wd__content .content__slogan { position: relative; color: #a89d5b; font-size: 1.875rem; } @media all and (min-width: 731px) and (max-width: 1279.5px) { .wd__section .wd__content .content__slogan { font-size: 1.5rem; } } @media all and (max-width: 730.5px) { .wd__section .wd__content .content__slogan { font-size: 1.25rem; } } .wd__section .wd__content .content__title { position: relative; margin-top: 19px; font-size: 2.96875rem; line-height: 1.2; } @media all and (min-width: 731px) and (max-width: 1279.5px) { .wd__section .wd__content .content__title { margin-top: 21px; } } @media all and (max-width: 730.5px) { .wd__section .wd__content .content__title { margin-top: 14px; font-size: 2.3125rem; } } .wd__section .wd__content .content__title span { display: inline-block; } .wd__section .wd__content .content__info { position: relative; margin-top: 25px; font-size: 1.125rem; line-height: 1.5; } @media all and (min-width: 731px) and (max-width: 1279.5px) { .wd__section .wd__content .content__info { margin-top: 44px; } } @media all and (max-width: 730.5px) { .wd__section .wd__content .content__info { margin-top: 67px; font-size: 1.0625rem; letter-spacing: 0.1px; line-height: 1.45; } } .wd__section .wd__content .content__comment { margin-top: 16px; color: #717171; font-size: 1.125rem; line-height: 1.4; } @media all and (max-width: 730.5px) { .wd__section .wd__content .content__comment { margin-top: 12px; font-size: 0.8125rem; letter-spacing: 0.2px; } } .wd__section .wd__content .content__link { display: block; margin-top: 15px; font-size: 1.25rem; line-height: 27px; } @media all and (min-width: 731px) and (max-width: 1279.5px) { .wd__section .wd__content .content__link { margin-top: 16px; } } @media all and (max-width: 730.5px) { .wd__section .wd__content .content__link { margin-top: 10px; font-size: 1.125rem; line-height: 24px; } } .wd__section .wd__content .content__link span { display: inline; border-bottom: 1px solid transparent; color: #0188c8; } .wd__section .wd__content .content__link *, .wd__section .wd__content .content__link:active span, .wd__section .wd__content .content__link:link span, .wd__section .wd__content .content__link:visited span { border-bottom: 1px solid transparent; } .wd__section .wd__content .content__link:hover span { border-bottom: 1px solid #0188c8; } .wd__section .wd__link__arrow::after { content: '>'; padding-left: 7px; color: #0188c8; } @media all and (min-width: 731px) and (max-width: 1279.5px) { .wd__section .wd__link__arrow::after { padding-left: 3px; } } @media all and (max-width: 730.5px) { .wd__section .wd__link__arrow::after { padding-left: 4px; } } .wd__section .wd__feature__list { position: relative; margin-top: 71px; } @media all and (min-width: 731px) and (max-width: 1279.5px) { .wd__section .wd__feature__list { margin-top: 50px; } } @media all and (max-width: 730.5px) { .wd__section .wd__feature__list { margin-top: 34px; } } .wd__section .wd__feature__list .wd__feature { display: inline-block; position: relative; margin: 0 25px 50px; box-sizing: border-box; color: #242424; vertical-align: bottom; } @media all and (min-width: 731px) and (max-width: 1279.5px) { .wd__section .wd__feature__list .wd__feature { margin: 0 33px 48px; } } @media all and (max-width: 730.5px) { .wd__section .wd__feature__list .wd__feature { margin: 0 17px 40px; } } .wd__section .wd__feature__list .wd__feature .wd__feature__describe__top { position: relative; margin-bottom: 6px; } @media all and (max-width: 730.5px) { .wd__section .wd__feature__list .wd__feature .wd__feature__describe__top { margin-bottom: 6px; } } .wd__section .wd__feature__list .wd__feature .wd__feature__data { color: #242424; font-size: 4.0625rem; line-height: 1; } @media all and (max-width: 730.5px) { .wd__section .wd__feature__list .wd__feature .wd__feature__data { margin-bottom: 2px; font-size: 2.9375rem; } } .wd__section .wd__feature__list .wd__feature .wd__feature__data span { font-size: 1.75rem; } @media all and (min-width: 731px) and (max-width: 1279.5px) { .wd__section .wd__feature__list .wd__feature .wd__feature__data span { font-size: 1.875rem; } } @media all and (max-width: 730.5px) { .wd__section .wd__feature__list .wd__feature .wd__feature__data span { font-size: 1.5625rem; } } .wd__section .wd__feature__list .wd__feature .wd__feature__describe { position: relative; margin-top: 0; } @media all and (max-width: 730.5px) { .wd__section .wd__feature__list .wd__feature .wd__feature__describe { margin-top: 1px; } } .wd__section .wd__feature__list .wd__feature .wd__feature__describe span, .wd__section .wd__feature__list .wd__feature .wd__feature__describe__top, .wd__section .wd__feature__list .wd__feature .wd__feature__describe__top span .wd__feature__describe { font-size: 1.0625rem; } @media all and (min-width: 731px) and (max-width: 1279.5px) { .wd__section .wd__feature__list .wd__feature .wd__feature__describe span, .wd__section .wd__feature__list .wd__feature .wd__feature__describe__top, .wd__section .wd__feature__list .wd__feature .wd__feature__describe__top span .wd__feature__describe { font-size: 1rem; line-height: 1.2; } } @media all and (max-width: 730.5px) { .wd__section .wd__feature__list .wd__feature .wd__feature__describe span, .wd__section .wd__feature__list .wd__feature .wd__feature__describe__top, .wd__section .wd__feature__list .wd__feature .wd__feature__describe__top span .wd__feature__describe { display: block; font-size: 0.8125rem; line-height: 1.4 !important; } } .wd__section .wd__feature__list .wd__feature .wd__feature__data span.space-left-l { padding-left: 7px; } .wd__section .wd__feature__list .wd__feature .wd__feature__data span.space-left-m { padding-left: 5px; } .wd__section .wd__feature__list .wd__feature .wd__feature__data span.space-left-s { padding-left: 3px; } .wd__section .wd__feature__list .wd__feature .wd__feature__data span.space-right-l { padding-right: 7px; } .wd__section .wd__feature__list .wd__feature .wd__feature__data span.space-right-m { padding-right: 5px; } .wd__section .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__section .wd__feature__list .wd__feature .wd__feature__data span.space-left-l { padding-left: 7px; } .wd__section .wd__feature__list .wd__feature .wd__feature__data span.space-left-m { padding-left: 5px; } .wd__section .wd__feature__list .wd__feature .wd__feature__data span.space-left-s { padding-left: 3px; } .wd__section .wd__feature__list .wd__feature .wd__feature__data span.space-right-l { padding-right: 7px; } .wd__section .wd__feature__list .wd__feature .wd__feature__data span.space-right-m { padding-right: 5px; } .wd__section .wd__feature__list .wd__feature .wd__feature__data span.space-right-s { padding-right: 3px; } } @media all and (max-width: 730.5px) { .wd__section .wd__feature__list .wd__feature .wd__feature__data span.space-left-l { padding-left: 3px; } .wd__section .wd__feature__list .wd__feature .wd__feature__data span.space-left-m { padding-left: 2px; } .wd__section .wd__feature__list .wd__feature .wd__feature__data span.space-left-s { padding-left: 1px; } .wd__section .wd__feature__list .wd__feature .wd__feature__data span.space-right-l { padding-right: 3px; } .wd__section .wd__feature__list .wd__feature .wd__feature__data span.space-right-m { padding-right: 2px; } .wd__section .wd__feature__list .wd__feature .wd__feature__data span.space-right-s { padding-right: 1px; } } .wd__section .wd__feature__list .wd__feature .wd__feature__data.text__long-en { position: relative; bottom: -4px; font-size: 3.375rem; line-height: 66px; } .wd__section .wd__feature__list .wd__feature .wd__feature__data.text__long-en * { line-height: 1; } .wd__section .wd__feature__list .wd__feature .wd__feature__data.text__long-tw { margin-top: 8px; font-size: 2.875rem; line-height: 58px; } @media all and (min-width: 731px) and (max-width: 1279.5px) { .wd__section .wd__feature__list .wd__feature .wd__feature__data.text__long-en { font-size: 3.375rem; line-height: 65px; } .wd__section .wd__feature__list .wd__feature .wd__feature__data.text__long-tw { margin-top: 10px; font-size: 2.875rem; line-height: 56px; } } @media all and (max-width: 730.5px) { .wd__section .wd__feature__list .wd__feature .wd__feature__data.text__long-en { margin-bottom: -1px; padding-top: 0; font-size: 2.3625rem; line-height: 49px; } .wd__section .wd__feature__list .wd__feature .wd__feature__data.text__long-tw { padding-top: 5px; font-size: 2rem; line-height: 36px; } } .wd__section .wd__feature__list .wd__feature .wd__feature__data.plus { position: relative; margin-right: 32px; } .wd__section .wd__feature__list .wd__feature .wd__feature__data.plus span { position: absolute; top: 4px; right: -33px; font-size: 3.1875rem; } @font-face { .wd__section { font-family: "slick"; src: url("/font/slick.eot"); src: url("/font/slick.eot?#iefix") format("embedded-opentype"), url("/font/slick.woff") format("woff"), url("/font/slick.ttf") format("truetype"), url("/font/slick.svg#slick") format("svg"); font-weight: normal; font-style: normal; } } .wd__section .slick-prev, .wd__section .slick-next { position: absolute; display: block; height: 20px; width: 20px; line-height: 0px; font-size: 0px; cursor: pointer; color: transparent; top: 50%; margin-top: -10px; padding: 0; border: none; outline: none; } .wd__section .slick-prev:hover, .wd__section .slick-prev:focus, .wd__section .slick-next:hover, .wd__section .slick-next:focus { outline: none; color: transparent; } .wd__section .slick-prev:hover:before, .wd__section .slick-prev:focus:before, .wd__section .slick-next:hover:before, .wd__section .slick-next:focus:before { opacity: 1; } .wd__section .slick-prev.slick-disabled:before, .wd__section .slick-next.slick-disabled:before { opacity: 0.25; } .wd__section .slick-prev { left: -25px; } [dir="rtl"] .wd__section .slick-prev { left: auto; right: -25px; } .wd__section .slick-next { right: -25px; } [dir="rtl"] .wd__section .slick-next { left: -25px; right: auto; } .wd__section .slick-slider { margin-bottom: 30px; } .wd__section .slick-dots { position: absolute; bottom: -45px; list-style: none; display: block; text-align: center; padding: 0; width: 100%; } .wd__section .slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 5px; padding: 0; cursor: pointer; } .wd__section .slick-dots li button { border: 0; background: transparent; display: block; height: 20px; width: 20px; outline: none; line-height: 0px; font-size: 0px; color: transparent; padding: 5px; cursor: pointer; } .wd__section .slick-dots li button:hover, .wd__section .slick-dots li button:focus { outline: none; } .wd__section .slick-dots li button:hover:before, .wd__section .slick-dots li button:focus:before { opacity: 1; } .wd__section .slick-dots li button:before { position: absolute; top: 0; left: 0; content: "•"; width: 20px; height: 20px; font-family: "slick"; font-size: 6px; line-height: 20px; text-align: center; color: black; opacity: 0.25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .wd__section .slick-dots li.slick-active button:before { color: black; opacity: 0.75; } .wd__section .slick-slider { position: relative; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .wd__section .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; } .wd__section .slick-list:focus { outline: none; } .wd__section .slick-list.dragging { cursor: pointer; cursor: hand; } .wd__section .slick-slider .slick-track, .wd__section .slick-slider .slick-list { -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); } .wd__section .slick-track { position: relative; left: 0; top: 0; display: block; } .wd__section .slick-track:before, .wd__section .slick-track:after { content: ""; display: table; } .wd__section .slick-track:after { clear: both; } .slick-loading .wd__section .slick-track { visibility: hidden; } .wd__section .slick-slide { float: left; height: 100%; min-height: 1px; display: none; } [dir="rtl"] .wd__section .slick-slide { float: right; } .wd__section .slick-slide img { display: block; } .wd__section .slick-slide.slick-loading img { display: none; } .wd__section .slick-slide.dragging img { pointer-events: none; } .slick-initialized .wd__section .slick-slide { display: block; } .slick-loading .wd__section .slick-slide { visibility: hidden; } .slick-vertical .wd__section .slick-slide { display: block; height: auto; border: 1px solid transparent; } .wd__section .slick-arrow.slick-hidden { display: none; } .wd__section .slick__nav { margin-bottom: 40px; color: #636360; text-align: center; font-size: 1.5em; line-height: 1.6; } .wd__section .slick__nav a { color: #636360; } .wd__section .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; } .wd__section .slick-next { right: 25px; } .wd__section .slick-prev { left: 25px; } .wd__section .slick__prev, .wd__section .slick__next { z-index: 9999; content: ''; } .wd__section .slick__prev:before, .wd__section .slick__next:before { content: ''; display: none; } .wd__section [dir='rtl'] .slick__prev:before { content: ''; display: none; } .wd__section [dir='rtl'] .slick__next:before { content: ''; display: none; } .wd__section .wd__slick .container { margin: auto; padding-left: 20px; padding-right: 20px; max-width: 900px; } .wd__section .wd__slick .container.e1 .slick__info { margin-top: 15em; } .wd__section .wd__slick .container .slick__half { width: 45%; } .wd__section .wd__slick .container .slick__left { float: left; } .wd__section .wd__slick .container .slick__right { float: right; } .wd__section .wd__slick .container .slick__img, .wd__section .wd__slick .container .slick__info { width: 100%; } .wd__section .sprite__arrow__right { z-index: 1000; background-position: -214px -5px; width: 49px; height: 96px; } .wd__section .sprite__arrow__left { z-index: 1000; background-position: -80px -5px; width: 49px; height: 96px; } .wd__section .sprite-arrow_r { width: 65px; height: 130px; } .wd__section .sprite-arrow_l { width: 65px; height: 130px; } .wd__section .slick-prev, .wd__section .slick-next { z-index: 1; background-color: transparent; margin-top: -19px; width: 50px; height: 118px; background-color: rgba(0, 0, 0, 0.3); background-color: gray\9; border-radius: 0 10px 10px 0; } .wd__section .slick-prev:before, .wd__section .slick-next:before { position: absolute; display: block; z-index: 1000; top: 57px; top: 0\9; font-size: 34px; color: white; } .wd__section .slick-prev { left: 0px; border-radius: 0 10px 10px 0; } .wd__section .slick-prev:before { content: '<'; right: 18px; } .wd__section .slick-next { right: 0; border-radius: 10px 0 0 10px; } .wd__section .slick-next:before { content: '>'; left: 18px; } @media all and (min-width: 731px) and (max-width: 1279.5px) { .wd__section .slick-prev, .wd__section .slick-next { margin-top: -19px; width: 35px; height: 88px; } .wd__section .slick-prev:before, .wd__section .slick-next:before { position: absolute; display: block; z-index: 1000; top: 43px; font-size: 26px; color: white; } .wd__section .slick-prev:before { right: 10px; } .wd__section .slick-next:before { left: 10px; } } @media all and (max-width: 730.5px) { .wd__section .slick-prev, .wd__section .slick-next { display: none !important; } } .wd__section #CMD .section__comment { margin-top: 25px; margin-bottom: -75px; padding-top: 0; } .wd__section .footnotes { margin: 0 auto; padding-right: 16px; padding-left: 16px; box-sizing: border-box; width: 100%; max-width: 1221px; } .wd__section .footnotes:first-child { margin-top: 25px; } .wd__section .footnotes .footnote { font-size: 1.125rem; line-height: 1.4; } .wd__section .footnotes .footnote .footnote-item { list-style-type: decimal; margin-bottom: 10px; } .wd__section .footnotes .footnote .footnote-item, .wd__section .footnotes .footnote .footnote-item * { color: #999; font-size: 0.8125rem; text-align: left; line-height: 1.5; } .wd__section .footnotes.footnote-item-star .footnote .footnote-item { position: relative; list-style-type: none; color: #999; } .wd__section .footnotes.footnote-item-star .footnote .footnote-item::before { display: block; position: absolute; top: 9px; left: -14px; content: '*'; line-height: 0; color: #999; } @media all and (min-width: 731px) and (max-width: 1279.5px) { .wd__section #CMD .section__comment { margin-top: -58px; margin-bottom: -52px; padding-top: 0; } .wd__section .footnotes { padding: 0 28px 0 40px; width: 100%; max-width: 1280px; } .wd__section .footnotes .footnote .footnote-item { margin-bottom: 10px; } .wd__section .footnotes .footnote .footnote-item, .wd__section .footnotes .footnote .footnote-item * { font-size: 0.8125rem; line-height: 1.5; } .wd__section .footnotes.footnote-item-star .footnote .footnote-item::before { top: 9px; left: -14px; } } @media all and (max-width: 730.5px) { .wd__section #CMD .section__comment { display: inline-block; margin-top: -38px; margin-bottom: -36px; padding-top: 0; } .wd__section .footnotes { padding: 0 28px 0 22px; box-sizing: border-box; width: 100%; max-width: 730px; } .wd__section .footnotes .footnote { margin-left: 14px; font-size: 0.83125rem; line-height: 1.4; } .wd__section .footnotes .footnote .footnote-item { margin-bottom: 12px; } .wd__section .footnotes .footnote .footnote-item, .wd__section .footnotes .footnote .footnote-item * { font-size: 0.83125rem; } .wd__section .footnotes.footnote-item-star .footnote .footnote-item::before { top: 10px; left: -11px; } } @keyframes hoverAnimation { 0% { transform: scale(1, 1) translateY(0); } 35% { transform: scale(1, 0.2) translateY(130px); } 85% { transform: scale(1, 1) translateY(0); } } .wd__section .vr__screen { display: block; position: relative; left: 50%; margin-top: 110px; margin-bottom: -30px; margin-left: -38px; width: 76px; height: 48px; } .wd__section .vr__screen #vr__screen__icon { fill: #fff; width: 76px; height: 48px; } .wd__section .vr__screen #vr__screen__icon .vr__border { transform: scale(1, 1); animation: none; } @media all and (min-width: 731px) and (max-width: 1279.5px) { .wd__section .vr__screen { margin-top: 74px; margin-bottom: -29px; } } @media all and (max-width: 730.5px) { .wd__section .vr__screen { margin-top: 56px; margin-bottom: -22px; margin-left: -35px; width: 70px; height: 44px; } .wd__section .vr__screen #vr__screen__icon { width: 70px; height: 44px; } } @media all and (max-width: 1279.5px) { .wd__section .vr__screen #vr__screen__icon .vr__border { transform: scale(1, 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'; } } section { position: relative; width: 100%; } .section__content { margin-left: auto; margin-right: auto; width: 100%; height: 100%; } section.no-pad { padding: 0; } section.no-pad-bot { padding-bottom: 0; } section.no-pad-top { padding-top: 0; } #CMD .row { position: relative; margin-left: auto; margin-right: auto; } #CMD .row:after { content: ""; display: table; clear: both; } #CMD .row .col { float: left; box-sizing: border-box; padding: 0; margin: 0; } #CMD .row .col[class*="push-"], #CMD .row .col[class*="pull-"] { position: relative; } #CMD .row .col.l1 { width: 8.33333%; margin-left: auto; left: auto; right: auto; } #CMD .row .col.l2 { width: 16.66667%; margin-left: auto; left: auto; right: auto; } #CMD .row .col.l3 { width: 25%; margin-left: auto; left: auto; right: auto; } #CMD .row .col.l4 { width: 33.33333%; margin-left: auto; left: auto; right: auto; } #CMD .row .col.l5 { width: 41.66667%; margin-left: auto; left: auto; right: auto; } #CMD .row .col.l6 { width: 50%; margin-left: auto; left: auto; right: auto; } #CMD .row .col.l7 { width: 58.33333%; margin-left: auto; left: auto; right: auto; } #CMD .row .col.l8 { width: 66.66667%; margin-left: auto; left: auto; right: auto; } #CMD .row .col.l9 { width: 75%; margin-left: auto; left: auto; right: auto; } #CMD .row .col.l10 { width: 83.33333%; margin-left: auto; left: auto; right: auto; } #CMD .row .col.l11 { width: 91.66667%; margin-left: auto; left: auto; right: auto; } #CMD .row .col.l12 { width: 100%; margin-left: auto; left: auto; right: auto; } #CMD .row .col.offset-l1 { margin-left: 8.33333%; } #CMD .row .col.pull-l1 { right: 8.33333%; } #CMD .row .col.push-l1 { left: 8.33333%; } #CMD .row .col.offset-l2 { margin-left: 16.66667%; } #CMD .row .col.pull-l2 { right: 16.66667%; } #CMD .row .col.push-l2 { left: 16.66667%; } #CMD .row .col.offset-l3 { margin-left: 25%; } #CMD .row .col.pull-l3 { right: 25%; } #CMD .row .col.push-l3 { left: 25%; } #CMD .row .col.offset-l4 { margin-left: 33.33333%; } #CMD .row .col.pull-l4 { right: 33.33333%; } #CMD .row .col.push-l4 { left: 33.33333%; } #CMD .row .col.offset-l5 { margin-left: 41.66667%; } #CMD .row .col.pull-l5 { right: 41.66667%; } #CMD .row .col.push-l5 { left: 41.66667%; } #CMD .row .col.offset-l6 { margin-left: 50%; } #CMD .row .col.pull-l6 { right: 50%; } #CMD .row .col.push-l6 { left: 50%; } #CMD .row .col.offset-l7 { margin-left: 58.33333%; } #CMD .row .col.pull-l7 { right: 58.33333%; } #CMD .row .col.push-l7 { left: 58.33333%; } #CMD .row .col.offset-l8 { margin-left: 66.66667%; } #CMD .row .col.pull-l8 { right: 66.66667%; } #CMD .row .col.push-l8 { left: 66.66667%; } #CMD .row .col.offset-l9 { margin-left: 75%; } #CMD .row .col.pull-l9 { right: 75%; } #CMD .row .col.push-l9 { left: 75%; } #CMD .row .col.offset-l10 { margin-left: 83.33333%; } #CMD .row .col.pull-l10 { right: 83.33333%; } #CMD .row .col.push-l10 { left: 83.33333%; } #CMD .row .col.offset-l11 { margin-left: 91.66667%; } #CMD .row .col.pull-l11 { right: 91.66667%; } #CMD .row .col.push-l11 { left: 91.66667%; } #CMD .row .col.offset-l12 { margin-left: 100%; } #CMD .row .col.pull-l12 { right: 100%; } #CMD .row .col.push-l12 { left: 100%; } @media only screen and (min-width: 731px) and (max-width: 1279.5px) { #CMD .row .col.m1 { width: 8.33333%; margin-left: auto; left: auto; right: auto; } #CMD .row .col.m2 { width: 16.66667%; margin-left: auto; left: auto; right: auto; } #CMD .row .col.m3 { width: 25%; margin-left: auto; left: auto; right: auto; } #CMD .row .col.m4 { width: 33.33333%; margin-left: auto; left: auto; right: auto; } #CMD .row .col.m5 { width: 41.66667%; margin-left: auto; left: auto; right: auto; } #CMD .row .col.m6 { width: 50%; margin-left: auto; left: auto; right: auto; } #CMD .row .col.m7 { width: 58.33333%; margin-left: auto; left: auto; right: auto; } #CMD .row .col.m8 { width: 66.66667%; margin-left: auto; left: auto; right: auto; } #CMD .row .col.m9 { width: 75%; margin-left: auto; left: auto; right: auto; } #CMD .row .col.m10 { width: 83.33333%; margin-left: auto; left: auto; right: auto; } #CMD .row .col.m11 { width: 91.66667%; margin-left: auto; left: auto; right: auto; } #CMD .row .col.m12 { width: 100%; margin-left: auto; left: auto; right: auto; } #CMD .row .col.offset-m1 { margin-left: 8.33333%; } #CMD .row .col.pull-m1 { right: 8.33333%; } #CMD .row .col.push-m1 { left: 8.33333%; } #CMD .row .col.offset-m2 { margin-left: 16.66667%; } #CMD .row .col.pull-m2 { right: 16.66667%; } #CMD .row .col.push-m2 { left: 16.66667%; } #CMD .row .col.offset-m3 { margin-left: 25%; } #CMD .row .col.pull-m3 { right: 25%; } #CMD .row .col.push-m3 { left: 25%; } #CMD .row .col.offset-m4 { margin-left: 33.33333%; } #CMD .row .col.pull-m4 { right: 33.33333%; } #CMD .row .col.push-m4 { left: 33.33333%; } #CMD .row .col.offset-m5 { margin-left: 41.66667%; } #CMD .row .col.pull-m5 { right: 41.66667%; } #CMD .row .col.push-m5 { left: 41.66667%; } #CMD .row .col.offset-m6 { margin-left: 50%; } #CMD .row .col.pull-m6 { right: 50%; } #CMD .row .col.push-m6 { left: 50%; } #CMD .row .col.offset-m7 { margin-left: 58.33333%; } #CMD .row .col.pull-m7 { right: 58.33333%; } #CMD .row .col.push-m7 { left: 58.33333%; } #CMD .row .col.offset-m8 { margin-left: 66.66667%; } #CMD .row .col.pull-m8 { right: 66.66667%; } #CMD .row .col.push-m8 { left: 66.66667%; } #CMD .row .col.offset-m9 { margin-left: 75%; } #CMD .row .col.pull-m9 { right: 75%; } #CMD .row .col.push-m9 { left: 75%; } #CMD .row .col.offset-m10 { margin-left: 83.33333%; } #CMD .row .col.pull-m10 { right: 83.33333%; } #CMD .row .col.push-m10 { left: 83.33333%; } #CMD .row .col.offset-m11 { margin-left: 91.66667%; } #CMD .row .col.pull-m11 { right: 91.66667%; } #CMD .row .col.push-m11 { left: 91.66667%; } #CMD .row .col.offset-m12 { margin-left: 100%; } #CMD .row .col.pull-m12 { right: 100%; } #CMD .row .col.push-m12 { left: 100%; } } @media only screen and (max-width: 730.5px) { #CMD .row .col.s1 { width: 8.33333%; margin-left: auto; left: auto; right: auto; } #CMD .row .col.s2 { width: 16.66667%; margin-left: auto; left: auto; right: auto; } #CMD .row .col.s3 { width: 25%; margin-left: auto; left: auto; right: auto; } #CMD .row .col.s4 { width: 33.33333%; margin-left: auto; left: auto; right: auto; } #CMD .row .col.s5 { width: 41.66667%; margin-left: auto; left: auto; right: auto; } #CMD .row .col.s6 { width: 50%; margin-left: auto; left: auto; right: auto; } #CMD .row .col.s7 { width: 58.33333%; margin-left: auto; left: auto; right: auto; } #CMD .row .col.s8 { width: 66.66667%; margin-left: auto; left: auto; right: auto; } #CMD .row .col.s9 { width: 75%; margin-left: auto; left: auto; right: auto; } #CMD .row .col.s10 { width: 83.33333%; margin-left: auto; left: auto; right: auto; } #CMD .row .col.s11 { width: 91.66667%; margin-left: auto; left: auto; right: auto; } #CMD .row .col.s12 { width: 100%; margin-left: auto; left: auto; right: auto; } #CMD .row .col.offset-s1 { margin-left: 8.33333%; } #CMD .row .col.pull-s1 { right: 8.33333%; } #CMD .row .col.push-s1 { left: 8.33333%; } #CMD .row .col.offset-s2 { margin-left: 16.66667%; } #CMD .row .col.pull-s2 { right: 16.66667%; } #CMD .row .col.push-s2 { left: 16.66667%; } #CMD .row .col.offset-s3 { margin-left: 25%; } #CMD .row .col.pull-s3 { right: 25%; } #CMD .row .col.push-s3 { left: 25%; } #CMD .row .col.offset-s4 { margin-left: 33.33333%; } #CMD .row .col.pull-s4 { right: 33.33333%; } #CMD .row .col.push-s4 { left: 33.33333%; } #CMD .row .col.offset-s5 { margin-left: 41.66667%; } #CMD .row .col.pull-s5 { right: 41.66667%; } #CMD .row .col.push-s5 { left: 41.66667%; } #CMD .row .col.offset-s6 { margin-left: 50%; } #CMD .row .col.pull-s6 { right: 50%; } #CMD .row .col.push-s6 { left: 50%; } #CMD .row .col.offset-s7 { margin-left: 58.33333%; } #CMD .row .col.pull-s7 { right: 58.33333%; } #CMD .row .col.push-s7 { left: 58.33333%; } #CMD .row .col.offset-s8 { margin-left: 66.66667%; } #CMD .row .col.pull-s8 { right: 66.66667%; } #CMD .row .col.push-s8 { left: 66.66667%; } #CMD .row .col.offset-s9 { margin-left: 75%; } #CMD .row .col.pull-s9 { right: 75%; } #CMD .row .col.push-s9 { left: 75%; } #CMD .row .col.offset-s10 { margin-left: 83.33333%; } #CMD .row .col.pull-s10 { right: 83.33333%; } #CMD .row .col.push-s10 { left: 83.33333%; } #CMD .row .col.offset-s11 { margin-left: 91.66667%; } #CMD .row .col.pull-s11 { right: 91.66667%; } #CMD .row .col.push-s11 { left: 91.66667%; } #CMD .row .col.offset-s12 { margin-left: 100%; } #CMD .row .col.pull-s12 { right: 100%; } #CMD .row .col.push-s12 { left: 100%; } } .section__kv .wd__content { position: relative; margin-top: 35px; margin-left: auto; margin-right: auto; } .section__kv .wd__content .content__slogan { margin-top: 0; margin-left: 0; color: #000; font-size: 63px; text-transform: none; } .section__kv .wd__content .content__title { margin-top: 26px; font-size: 65px; } .section__kv .wd__content .content__info { margin-top: 40px; width: 100%; font-size: 26px; } @media all and (min-width: 731px) and (max-width: 1279.5px) { .section__kv .wd__content .content__slogan { margin-top: -2px; font-size: 48px; } .section__kv .wd__content .content__info { margin-top: 15px; width: 88%; max-width: 793px; font-size: 26px; line-height: 1.55; } } @media all and (max-width: 730.5px) { .section__kv .wd__content { margin-top: 55px; } .section__kv .wd__content .content__slogan { display: block; left: -4px; margin-top: 7px; margin-left: auto; margin-right: auto; width: 90%; text-align: center; font-size: 32px; } .section__kv .wd__content .content__info { text-align: center; margin-top: 16px; margin-left: auto; margin-right: auto; width: 84%; max-width: 460px; font-size: 22px; line-height: 1.4; } } .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 600ms ease-out; } .inner__nav .nav__heading.clicked { -webkit-opacity: 0; -khtml-opacity: 0; -moz-opacity: 0; -ms-opacity: 0; -o-opacity: 0; opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .inner__nav .nav__switch__btn { position: absolute; cursor: pointer; bottom: -62px; left: 50%; margin-left: -20px; width: 40px; height: 40px; transition: all 600ms ease-out, top 1000ms ease-out; } .inner__nav .nav__switch__btn .icon__switch { background-image: url("../images/large/1x/icon/inner/icon_open.png") ; position: absolute; top: 0; left: 0; width: 40px; height: 40px; background-position: center; background-repeat: no-repeat; background-size: cover; transition: all 500ms ease-out; } @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__nav .nav__switch__btn .icon__switch { background-image: url("../images/large/2x/icon/inner/icon_open.png"); } } .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; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(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; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background: #000; transition: opacity 500ms ease-out; } .inner__page.darknight .inner__mask { -webkit-opacity: 0.6; -khtml-opacity: 0.6; -moz-opacity: 0.6; -ms-opacity: 0.6; -o-opacity: 0.6; opacity: 0.6; filter: alpha(opacity=60); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; z-index: 1000000; transition: opacity 500ms ease-out; } .inner__page .section__content { z-index: 0; max-width: 2560px; background-color: #fff; } .inner__page .section__content.theme-gray { margin-bottom: 4px; padding-bottom: 0; max-width: 1366px; background-color: #e7e7e7; } .inner__page .section__content.theme-gray .wd__content { padding-top: 39px; } .inner__page .icon { position: relative; margin-right: auto; margin-bottom: 11px; margin-left: auto; width: 120px; height: 120px; background-position: center; background-repeat: no-repeat; background-size: cover; } .inner__page .icon.icon-allSmiles { background-image: url("../images/large/1x/inner/icon/icon_all_smiles.png") ; } @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-allSmiles { background-image: url("../images/large/2x/inner/icon/icon_all_smiles.png"); } } .inner__page .icon.icon-auto { background-image: url("../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("../images/large/2x/inner/icon/icon_auto.png"); } } .inner__page .icon.icon-beautification { background-image: url("../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("../images/large/2x/inner/icon/icon_beautification.png"); } } .inner__page .icon.icon-depthOfField { background-image: url("../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("../images/large/2x/inner/icon/icon_depth_of_field.png"); } } .inner__page .icon.icon-effect { background-image: url("../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("../images/large/2x/inner/icon/icon_effect.png"); } } .inner__page .icon.icon-gif { background-image: url("../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("../images/large/2x/inner/icon/icon_gif.png"); } } .inner__page .icon.icon-hdrPro { background-image: url("../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("../images/large/2x/inner/icon/icon_hdr_pro.png"); } } .inner__page .icon.icon-kids { background-image: url("../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("../images/large/2x/inner/icon/icon_kids.png"); } } .inner__page .icon.icon-lowlight { background-image: url("../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("../images/large/2x/inner/icon/icon_lowlight.png"); } } .inner__page .icon.icon-miniature { background-image: url("../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("../images/large/2x/inner/icon/icon_miniature.png"); } } .inner__page .icon.icon-night { background-image: url("../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("../images/large/2x/inner/icon/icon_night.png"); } } .inner__page .icon.icon-qrCode { background-image: url("../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("../images/large/2x/inner/icon/icon_qr_code.png"); } } .inner__page .icon.icon-selfiePanorama { background-image: url("../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("../images/large/2x/inner/icon/icon_selfie_panorama.png"); } } .inner__page .icon.icon-selfie { background-image: url("../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("../images/large/2x/inner/icon/icon_selfie.png"); } } .inner__page .icon.icon-slowMotion { background-image: url("../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("../images/large/2x/inner/icon/icon_slow_motion.png"); } } .inner__page .icon.icon-smartRemove { background-image: url("../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("../images/large/2x/inner/icon/icon_smart_remove.png"); } } .inner__page .icon.icon-superResolution { background-image: url("../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("../images/large/2x/inner/icon/icon_super_resolution.png"); } } .inner__page .icon.icon-manual { background-image: url("../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("../images/large/2x/inner/icon/icon_manual.png"); } } .inner__page .icon.icon-timeLapse { background-image: url("../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("../images/large/2x/inner/icon/icon_time_lapse.png"); } } .inner__page .icon.icon-timeRewind { background-image: url("../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("../images/large/2x/inner/icon/icon_time_rewind.png"); } } .inner__page .icon.icon-youtube { background-image: url("../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("../images/large/2x/inner/icon/icon_youtube.png"); } } .inner__page .icon.icon-panaroma { background-image: url("../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("../images/large/2x/inner/icon/icon_panaroma.png"); } } .inner__page .icon.icon-pro { background-image: url("../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("../images/large/2x/inner/icon/icon_pro.png"); } } .inner__page .icon.icon-portrait { background-image: url("../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("../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: 0.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 400ms; } .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(0deg); transition: transform 800ms 50ms, background-image 300ms 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(0deg); } .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/large/1x/icon/inner/icon_open_black.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) { .wd__innerbtn.theme-black .inner__btn .toggleSlide { background-image: url("../images/large/2x/icon/inner/icon_open_black.png"); } } .wd__innerbtn.theme-black .inner__btn.active .toggleSlide { background-image: url("../images/large/1x/icon/inner/icon_close_black.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) { .wd__innerbtn.theme-black .inner__btn.active .toggleSlide { background-image: url("../images/large/2x/icon/inner/icon_close_black.png"); } } .wd__innerbtn.theme-white .inner__btn span { color: #fff; } .wd__innerbtn.theme-white .inner__btn .toggleSlide { background-image: url("../images/large/1x/icon/inner/icon_open_white.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) { .wd__innerbtn.theme-white .inner__btn .toggleSlide { background-image: url("../images/large/2x/icon/inner/icon_open_white.png"); } } .wd__innerbtn.theme-white .inner__btn.active .toggleSlide { background-image: url("../images/large/1x/icon/inner/icon_close_white.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) { .wd__innerbtn.theme-white .inner__btn.active .toggleSlide { background-image: url("../images/large/2x/icon/inner/icon_close_white.png"); } } .inner__page { display: block; overflow: hidden; z-index: 1; margin-right: auto; margin-left: auto; max-width: 2560px; } .inner__page .section__content { max-width: 1366px; } .inner__page .section__content .wd__content .content__title { color: #333 !important; font-size: 24px; font-weight: 200 !important; } .inner__page .section__content .wd__content .content__title * { font-weight: 200 !important; } .inner__page .section__content .wd__content .content__info { color: #333 !important; } .inner__page .row { opacity: 0; transition: opacity 400ms; } .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(0deg); transition: transform 800ms 50ms, background-image 300ms 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(0deg); } .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(0deg); transition: transform 800ms 50ms, background-image 300ms 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(0deg); } .inner__page .section__content .wd__content { max-width: 414px !important; } } .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, 0.4); } .cmd-sidenav .container-collapse { display: none; } .cmd-sidenav .container-collapse .img__main { margin: 0; width: auto; height: auto; } .cmd-sidenav .sidenav-container .item-container::marker { font-size: 0; } @media all and (min-width: 1280px) { .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-triangle, .cmd-sidenav .sidenav-container .container-items .item .item-label .label-name { display: inline-block; position: relative; vertical-align: top; } .cmd-sidenav .sidenav-container .container-items .item .item-label .label-triangle { top: 0; left: 0; width: 40px; height: 100%; border-radius: 54px 0 0 54px; background: red; } .cmd-sidenav .sidenav-container .container-items .item .item-label .label-name { padding: 0 23px; height: 100%; color: #fff; font-size: 1.25rem; background: red; } .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 200ms 150ms linear; } .cmd-sidenav .sidenav-container .container-items .item .item-dot::after { transition: transform 300ms linear; } .cmd-sidenav .sidenav-container .container-items .item .item-label { transform: translate3d(100%, 0, 0); transition: transform 300ms 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 300ms 75ms linear; } .cmd-sidenav .sidenav-container .container-items .item.enter .item-label .label-name { color: red; } .cmd-sidenav .sidenav-container .container-items .item .item-dot.enter::after { background: red; 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) { .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, 0.8); } .cmd-sidenav .container-collapse .collapse-close::before { background: #424242; } .cmd-sidenav .container-collapse .collapse-open, .cmd-sidenav .container-collapse .collapse-close { position: absolute; top: 50%; right: 13px; width: 22px; height: 22px; transform: translate3d(0, -50%, 0); transition: opacity 300ms; } .cmd-sidenav .container-collapse .collapse-open::before, .cmd-sidenav .container-collapse .collapse-close::before { position: absolute; content: ''; top: 50%; left: 50%; width: 48px; height: 48px; transform: translate(-50%, -50%); } .cmd-sidenav .container-collapse .collapse-open img, .cmd-sidenav .container-collapse .collapse-close 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/small/2x/icon/common/open.svg") ; } } @media all and (min-width: 731px) and (max-width: 1279.5px) and (-webkit-min-device-pixel-ratio: 1.5), all and (min-width: 731px) and (max-width: 1279.5px) and (min-resolution: 144dpi) { .cmd-sidenav .container-collapse .collapse-open .img { background-image: url("../images/small/2x/icon/common/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/small/2x/icon/common/close.svg") ; } } @media all and (min-width: 731px) and (max-width: 1279.5px) and (-webkit-min-device-pixel-ratio: 1.5), all and (min-width: 731px) and (max-width: 1279.5px) and (min-resolution: 144dpi) { .cmd-sidenav .container-collapse .collapse-close .img { background-image: url("../images/small/2x/icon/common/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 400ms; } .cmd-sidenav .container-items .item { display: block; position: relative; opacity: 0; transition: opacity; } .cmd-sidenav .container-items .item .item-label { padding: 10px 14px; font-size: 1.1875rem; text-align: center; } .cmd-sidenav .container-items .item .item-label .label-name { color: #fff; font-size: 1.1875rem; line-height: 1.2; } .cmd-sidenav.show { padding-bottom: 17px; background-color: #333; } .cmd-sidenav.show .container-items { max-height: 2000px; transition: all 400ms; } .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 300ms 400ms; } .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; } .cmd-sidenav { right: 20px; left: unset; opacity: 0; transition: opacity 300ms; } .cmd-sidenav.mobile-show { left: unset; opacity: 1; } .cmd-sidenav .item-dot.enter { z-index: -1; background: #e42657; } } @media all and (max-width: 730.5px) { .cmd-sidenav { position: fixed; top: 123px; right: 20px; width: calc(100% - 40px); 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, 0.8); } .cmd-sidenav .container-collapse .collapse-close::before { background: #424242; } .cmd-sidenav .container-collapse .collapse-open, .cmd-sidenav .container-collapse .collapse-close { position: absolute; top: 50%; right: 13px; width: 22px; height: 22px; transform: translate3d(0, -50%, 0); transition: opacity 300ms; } .cmd-sidenav .container-collapse .collapse-open::before, .cmd-sidenav .container-collapse .collapse-close::before { position: absolute; content: ''; top: 50%; left: 50%; width: 48px; height: 48px; transform: translate(-50%, -50%); } .cmd-sidenav .container-collapse .collapse-open img, .cmd-sidenav .container-collapse .collapse-close 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/small/2x/icon/common/open.svg") ; } } @media all and (max-width: 730.5px) and (-webkit-min-device-pixel-ratio: 1.5), all and (max-width: 730.5px) and (min-resolution: 144dpi) { .cmd-sidenav .container-collapse .collapse-open .img { background-image: url("../images/small/2x/icon/common/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/small/2x/icon/common/close.svg") ; } } @media all and (max-width: 730.5px) and (-webkit-min-device-pixel-ratio: 1.5), all and (max-width: 730.5px) and (min-resolution: 144dpi) { .cmd-sidenav .container-collapse .collapse-close .img { background-image: url("../images/small/2x/icon/common/close.svg"); } } @media all and (max-width: 730.5px) { .cmd-sidenav .container-items { overflow: hidden; height: 100%; max-height: 0; transition: all 400ms; } .cmd-sidenav .container-items .item { display: block; position: relative; opacity: 0; transition: opacity; } .cmd-sidenav .container-items .item .item-label { padding: 10px 14px; font-size: 1.1875rem; text-align: center; } .cmd-sidenav .container-items .item .item-label .label-name { color: #fff; font-size: 1.1875rem; line-height: 1.2; } .cmd-sidenav.show { padding-bottom: 17px; background-color: #333; } .cmd-sidenav.show .container-items { max-height: 2000px; transition: all 400ms; } .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 300ms 400ms; } .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; } .cmd-sidenav { left: 100%; opacity: 0; transition: opacity 300ms; } .cmd-sidenav.mobile-show { left: unset; opacity: 1; } .cmd-sidenav .item-dot.enter { z-index: -1; background: #e42657; } } .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: #00c6ff; 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.33333%; } .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.66667%; } .wd__section .slick-tab-content .slick-title .title-nav-count-7 .slick-nav-btn { width: 14.28571%; } .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.11111%; } .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; cursor: pointer; padding: 6px 0; color: #fff; font-size: 1.25rem; text-align: center; border: 0; background-color: rgba(255, 255, 255, 0); transition: opacity 400ms; text-transform: uppercase; vertical-align: bottom; line-height: 1.2; border-bottom: 3px solid transparent; } .wd__section .slick-tab-content .slick-title .title-nav .slick-nav-btn .sign-fnum { top: -0.7em; } .wd__section .slick-tab-content .slick-title .title-nav .slick-nav-btn:focus, .wd__section .slick-tab-content .slick-title .title-nav .slick-nav-btn.active { color: #00c6ff; border-bottom: 3px solid #00c6ff; box-shadow: 0 1px #00c6ff; } .wd__section .slick-tab-content .slick-info-container { position: relative; overflow: hidden; transition: height 500ms ease 0ms; } .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 1000ms ease 0ms; } .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%; color: #fff; font-size: 1.25rem; line-height: 1.5; } .wd__section .slick-tab-content .slick-info .slick-info-text .info__comment { display: inline-block; margin-top: 8px; font-size: 1.125rem; line-height: 1.4; } .wd__section .slick-tab-content .slick-info + .slick-image { margin-top: 50px; } .wd__section .slick-tab-content .slick-image { position: relative; z-index: -1; left: 50%; margin: 0; transform: translateX(-50%); } .wd__section .slick-tab-content .slick-image .img-slick { position: absolute; top: 0; left: 0; width: 1128px; height: 628px; border-radius: 10px; background-size: contain; } .wd__section .vidInterface { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 460px; height: 170px; } .wd__section .vidInterface video { filter: brightness(90%); } .wd__section .vidInterface .playBtn { background-image: url("../images/large/1x/icon/playBtn.png") ; display: block; margin: 0 auto; width: 90px; height: 90px; background-size: cover; transform: rotate(0); transition: transform 400ms ease; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .wd__section .vidInterface .playBtn { background-image: url("../images/large/2x/icon/playBtn.png"); } } .wd__section .vidInterface .playBtn:hover { transform: rotate(120deg); } .wd__section .vidInterface span { display: block; margin-top: 20px; color: #fff; font-size: 1.75rem; line-height: 2.0625rem; } @media all and (min-width: 1280px) { .wd__section .slick-tab-content .slick-title .title-nav { display: flex; align-content: stretch; flex-direction: row; align-items: stretch; } .wd__section .slick-tab-content .slick-title .title-nav .slick-nav-btn { display: block; flex-shrink: 1; flex-grow: 1; flex-wrap: nowrap; } .wd__section .slick-tab-content .slick-title .title-nav .slick-nav-btn .nav__title-text { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; } } @media all and (min-width: 731px) and (max-width: 1279.5px) { .wd__section .slick-tab-content .scroll_container { overflow-x: scroll; overflow-y: hidden; width: 100%; scroll-behavior: smooth; } .wd__section .slick-tab-content .scroll_container::-webkit-scrollbar { display: none; } .wd__section .slick-tab-content .scroll_container .scrollPos { position: absolute; top: 0; left: 0; width: 1px; height: 100px; background-color: red; } .wd__section .slick-tab-content { margin-top: 62px; max-width: 100%; } .wd__section .slick-tab-content .slick-title .title-nav .slick-nav-btn { padding: 8px 25px; font-size: 1.25rem; line-height: 1.2; } .wd__section .slick-tab-content .slick-info-item { padding-top: 33px; } .wd__section .slick-tab-content .slick-info { margin-top: 0; padding-top: 0; width: 548px; } .wd__section .slick-tab-content .slick-image { margin: 10px 0; } .wd__section .slick-tab-content .slick-image .img-slick { margin-right: auto; margin-left: auto; width: 731px; height: 407px; border-radius: 5px; } .wd__section .slick-tab-content .slick-info + .slick-image { margin-top: 33px; } } @media all and (max-width: 730.5px) { .wd__section .slick-tab-content .scroll_container { overflow-x: scroll; overflow-y: hidden; width: 100%; scroll-behavior: smooth; } .wd__section .slick-tab-content .scroll_container::-webkit-scrollbar { display: none; } .wd__section .slick-tab-content .scroll_container .scrollPos { position: absolute; top: 0; left: 0; width: 1px; height: 100px; background-color: red; } .wd__section .slick-tab-content { margin: 45px auto 0; width: 100%; max-width: 720px; } .wd__section .slick-tab-content .slick-title { position: relative; text-align: center; } .wd__section .slick-tab-content .slick-title .title-nav .slick-nav-btn { padding: 5px 23px; font-size: 1rem; line-height: 1.2; border-bottom: 2px solid transparent; } .wd__section .slick-tab-content .slick-title .title-nav .slick-nav-btn:focus, .wd__section .slick-tab-content .slick-title .title-nav .slick-nav-btn.active { border-bottom: 2px solid #00c6ff; } .wd__section .slick-tab-content .slick-title .title-nav .sign-fnum { top: -0.6em; } .wd__section .slick-tab-content .slick-info-item { padding-top: 30px; } .wd__section .slick-tab-content .slick-info { margin: 0 auto; padding-top: 0; width: 89.2%; max-width: 370px; } .wd__section .slick-tab-content .slick-info .slick-info-text { font-family: "Myriad W01_n2", "Myriad W01", "Segoe UI", sans-serif !important; font-weight: 200 !important; font-style: normal !important; font-size: 1.125rem; 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: 0.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%); } } @media all and (max-width: 730.5px) and (max-width: 414px) { .wd__section .slick-tab-content .slick-image .img-slick { border-radius: 0; } } @media all and (max-width: 730.5px) { .wd__section .slick-tab-content .slick-info + .slick-image { margin-top: 30px; } } html #CMD .section__salesVideo * { box-sizing: border-box; } html #CMD .section__salesVideo .sales__item { position: relative; } html #CMD .section__salesVideo .sales__item_preview { position: relative; width: 100%; height: 100%; } html #CMD .section__salesVideo .sales__containter { display: flex; margin: 0 auto; margin-top: 126px; width: 1156px; flex-wrap: wrap; } html #CMD .section__salesVideo .sales__containter .slick_page { display: flex; width: 100%; flex-wrap: wrap; } html #CMD .section__salesVideo .sales__containter.desktop.type_1 .sales__item { padding: 0; width: 100%; } html #CMD .section__salesVideo .sales__containter.desktop.type_2 .sales__item, html #CMD .section__salesVideo .sales__containter.desktop.type_4 .sales__item { width: 50%; } html #CMD .section__salesVideo .sales__containter.desktop.type_3 .sales__item, html #CMD .section__salesVideo .sales__containter.desktop.type_6 .sales__item { width: 33.33%; } html #CMD .section__salesVideo .sales__containter.desktop.type_5 .sales__item { width: 33.33%; } html #CMD .section__salesVideo .sales__containter.desktop.type_5 .sales__item_1, html #CMD .section__salesVideo .sales__containter.desktop.type_5 .sales__item_2 { width: 50%; } html #CMD .section__salesVideo .sales__containter.tablet .sales__item { width: 100%; } html #CMD .section__salesVideo .sales__containter.tablet.type_2 .sales__item, html #CMD .section__salesVideo .sales__containter.tablet.type_4 .sales__item, html #CMD .section__salesVideo .sales__containter.tablet.type_5 .sales__item, html #CMD .section__salesVideo .sales__containter.tablet.type_3 .sales__item, html #CMD .section__salesVideo .sales__containter.tablet.type_6 .sales__item { width: 50%; } html #CMD .section__salesVideo .sales_button { position: relative; cursor: pointer; margin: 0 auto; padding: 20px 30px; text-align: center; outline: none; border-color: transparent; background-color: transparent; box-shadow: none; } html #CMD .section__salesVideo .sales_button span { position: relative; color: #00c6ff; font-size: 17px; } html #CMD .section__salesVideo .sales_button span::before { display: block; position: absolute; bottom: -5px; left: 0; width: 0; height: 1.5px; background: #00c6ff; transition: width 0.3s; content: ''; } html #CMD .section__salesVideo .sales_button:hover span { color: #00c6ff; } html #CMD .section__salesVideo .sales_button:hover span::before { width: 100%; } html #CMD .section__salesVideo .sales_button:hover .seeall_arrow-svg { stroke: #00c6ff; } html #CMD .section__salesVideo .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); } html #CMD .section__salesVideo .sales_button > .seeall_arrow .seeall_arrow-svg { position: absolute; left: 0; width: 10px; height: 10px; stroke: #00c6ff; stroke-width: 3px; } html #CMD .section__salesVideo .video_btn { position: absolute; z-index: 9; top: 0; left: 0; width: 100%; height: 100%; } html #CMD .section__salesVideo .youtube_btn { background-image: url("../images/sectionModules/salesVideo/play.svg") ; 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-repeat: no-repeat; } @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) { html #CMD .section__salesVideo .youtube_btn { background-image: url("../images/sectionModules/salesVideo/play.svg"); } } html #CMD .section__salesVideo .video_info { position: absolute; bottom: 0; left: 0; opacity: 1; padding: 13px 20px; width: 100%; color: #fff; font-size: 0.9375rem; background-color: rgba(0, 0, 0, 0.6); transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1); line-height: 1.5; min-height: auto; } html #CMD .section__salesVideo .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; } html #CMD .grid__layout { display: flex; align-items: stretch; margin-right: auto; margin-left: auto; align-content: stretch; flex-direction: row; flex-wrap: wrap; min-height: 286px; } html #CMD .grid-item { flex-shrink: 1; flex-grow: 1; } html #CMD .grid-item-ie { display: flex; position: relative; overflow: hidden; z-index: 0; margin: 0; box-sizing: border-box; border: 1px solid #8dc1ce; border-radius: 20px; background: linear-gradient(to top, #f4f7f9 0%, #fff 100%); background-color: #ccc; flex-direction: column; } @media all and (min-width: 1280px) { html #CMD .grid__layout { max-width: 1080px; } html #CMD .large-span-1 { flex-basis: 8.33333%; } html #CMD .large-span-2 { flex-basis: 16.66667%; } html #CMD .large-span-3 { flex-basis: 25%; } html #CMD .large-span-4 { flex-basis: 33.33333%; } html #CMD .large-span-5 { flex-basis: 41.66667%; } html #CMD .large-span-6 { flex-basis: 50%; } html #CMD .large-span-7 { flex-basis: 58.33333%; } html #CMD .large-span-8 { flex-basis: 66.66667%; } html #CMD .large-span-9 { flex-basis: 75%; } html #CMD .large-span-10 { flex-basis: 83.33333%; } html #CMD .large-span-11 { flex-basis: 91.66667%; } html #CMD .large-span-12 { flex-basis: 100%; } } @media all and (min-width: 731px) and (max-width: 1279.5px) { html #CMD .medium-span-1 { flex-basis: 8.33333%; } html #CMD .medium-span-2 { flex-basis: 16.66667%; } html #CMD .medium-span-3 { flex-basis: 25%; } html #CMD .medium-span-4 { flex-basis: 33.33333%; } html #CMD .medium-span-5 { flex-basis: 41.66667%; } html #CMD .medium-span-6 { flex-basis: 50%; } html #CMD .medium-span-7 { flex-basis: 58.33333%; } html #CMD .medium-span-8 { flex-basis: 66.66667%; } html #CMD .medium-span-9 { flex-basis: 75%; } html #CMD .medium-span-10 { flex-basis: 83.33333%; } html #CMD .medium-span-11 { flex-basis: 91.66667%; } html #CMD .medium-span-12 { flex-basis: 100%; } } @media all and (max-width: 730.5px) { html #CMD .small-span-1 { flex-basis: 8.33333%; } html #CMD .small-span-2 { flex-basis: 16.66667%; } html #CMD .small-span-3 { flex-basis: 25%; } html #CMD .small-span-4 { flex-basis: 33.33333%; } html #CMD .small-span-5 { flex-basis: 41.66667%; } html #CMD .small-span-6 { flex-basis: 50%; } html #CMD .small-span-7 { flex-basis: 58.33333%; } html #CMD .small-span-8 { flex-basis: 66.66667%; } html #CMD .small-span-9 { flex-basis: 75%; } html #CMD .small-span-10 { flex-basis: 83.33333%; } html #CMD .small-span-11 { flex-basis: 91.66667%; } html #CMD .small-span-12 { flex-basis: 100%; } } html #CMD .wd__section .ksp__layout { padding-right: 16px; padding-left: 16px; box-sizing: border-box; max-width: 1268px; min-width: 1024px; } html #CMD .wd__section .ksp__layout .item_image { position: relative; box-sizing: border-box; } html #CMD .wd__section .ksp__layout .item_image .img__block { display: block; } html #CMD .wd__section .ksp__layout .grid-item-ie { height: 100%; } html #CMD .wd__section .ksp__layout .grid-item-wdContent { display: flex; align-content: flex-end; flex-direction: row; min-height: 304px; } html #CMD .wd__section .ksp__layout .grid-item-wdContent .item_block { display: flex; width: 100%; } html #CMD .wd__section .ksp__layout .grid-item-wdContent .item_content { position: relative; box-sizing: border-box; height: 100%; } html #CMD .wd__section .ksp__layout .wd__content { display: flex; position: relative; justify-content: center; margin: 0; height: 100%; flex-direction: column; } html #CMD .wd__section .ksp__layout .wd__content .content__title { margin: 0; color: #000; font-size: 3rem; line-height: 1.2; } html #CMD .wd__section .ksp__layout .wd__content .content__info { margin-top: 10px; color: #000; line-height: 1.4; font-size: 1.625rem; } html #CMD .wd__section .ksp__layout .wd__content span.space-left-m { padding-left: 5px; } html #CMD .wd__section .ksp__layout .wd__content span.space-right-m { padding-right: 5px; } html #CMD .wd__section .ksp__layout .grid-item-wdFeature .grid-item-ie { padding: 37px 24px; } html #CMD .wd__section .ksp__layout .wd__feature__list { display: flex; justify-content: center; margin: 0; margin-top: 0; height: 100%; flex-direction: column; } html #CMD .wd__section .ksp__layout .wd__feature__list .wd__feature { margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; } html #CMD .wd__section .ksp__layout .wd__feature__list .wd__feature .wd__feature__describe { margin-top: 11px; } html #CMD .wd__section .ksp__layout .wd__feature__list .wd__feature .wd__feature__describe__top { margin-bottom: 16px; } html #CMD .wd__section .ksp__layout .wd__feature__list .wd__feature .wd__feature__describe, html #CMD .wd__section .ksp__layout .wd__feature__list .wd__feature .wd__feature__describe span, html #CMD .wd__section .ksp__layout .wd__feature__list .wd__feature .wd__feature__describe__top, html #CMD .wd__section .ksp__layout .wd__feature__list .wd__feature .wd__feature__describe__top span { line-height: 1.4; font-size: 1.625rem; } html #CMD .wd__section .ksp__layout .wd__feature__list .wd__feature .wd__feature__data { font-size: 3rem; line-height: 1.2; } html #CMD .wd__section .ksp__layout .grid-item-wdFeatureTopIcon .grid-item-ie { padding: 37px 20px; } html #CMD .wd__section .ksp__layout .wd__feature__list.top-icon { display: flex; justify-content: flex-start; padding-top: 0; padding-bottom: 0; } html #CMD .wd__section .ksp__layout .wd__feature__list.top-icon .wd__feature .wd__feature__describe__top .img__icon { width: 100%; height: 116px; background-size: contain; } html #CMD .wd__section .ksp__layout .wd__feature__list.top-icon .wd__feature .wd__feature__data { font-size: 2.125rem; } @media all and (min-width: 1280px) { html #CMD .wd__section .ksp__layout .grid-item-wdContent .grid-item-ie { width: 100%; } html #CMD .wd__section .ksp__layout .grid-item-wdContent .item_block { justify-content: center; padding: 33px 45px; box-sizing: border-box; } html #CMD .wd__section .ksp__layout .grid-item-wdContent .item_block.text-right { flex-flow: row-reverse; } html #CMD .wd__section .ksp__layout .grid-item-wdContent .item_block.text-right .img__block { right: 0; left: auto; } html #CMD .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; } html #CMD .wd__section .ksp__layout .grid-item-wdContent .item_block.text-center .item_content { width: 100%; height: auto; } html #CMD .wd__section .ksp__layout .grid-item-wdContent .item_block.text-center .item_content .content__title, html #CMD .wd__section .ksp__layout .grid-item-wdContent .item_block.text-center .item_content .content__info { text-align: center; } html #CMD .wd__section .ksp__layout .grid-item-wdContent .item_block.text-center .item_image { width: 100%; height: 103px; } html #CMD .wd__section .ksp__layout .grid-item-wdContent .item_block.text-center .item_image .img__block { left: 50%; margin-top: 100px; transform: translateX(-50%); } html #CMD .wd__section .ksp__layout .grid-item-wdContent .item_block.text-leftCenter { height: 100%; } html #CMD .wd__section .ksp__layout .grid-item-wdContent .item_content { width: 57.7%; } html #CMD .wd__section .ksp__layout .grid-item-wdContent .item_image { width: 42%; } html #CMD .wd__section .ksp__layout .grid-item-wdContent .img__block { position: absolute; top: -50px; left: 0; } html #CMD .wd__section .ksp__layout .grid-item-wdContent.large-span-12 .item_block { margin-right: auto; margin-left: auto; padding: 50px 45px; box-sizing: border-box; max-width: 1226px; } } @media all and (min-width: 731px) and (max-width: 1279.5px) { html #CMD .wd__section .ksp__layout { padding-right: 16px; padding-left: 16px; box-sizing: border-box; width: 100%; max-width: 1023px; min-width: 1px; } html #CMD .wd__section .ksp__layout .grid-item-wdContent .grid-item-ie { width: 100%; } html #CMD .wd__section .ksp__layout .grid-item-wdContent .item_block { justify-content: center; padding: 0; } html #CMD .wd__section .ksp__layout .grid-item-wdContent .item_block.text-right { flex-flow: row-reverse; } html #CMD .wd__section .ksp__layout .grid-item-wdContent .item_block.text-right .item_content { padding: 29px 40px 35px 0; } html #CMD .wd__section .ksp__layout .grid-item-wdContent .item_block.text-right .img__block { right: 0; left: auto; } html #CMD .wd__section .ksp__layout .grid-item-wdContent .item_block.text-center { flex-direction: column; height: 100%; } html #CMD .wd__section .ksp__layout .grid-item-wdContent .item_block.text-center .item_content { padding: 40px 24px; width: 100%; } html #CMD .wd__section .ksp__layout .grid-item-wdContent .item_block.text-center .item_content .content__title, html #CMD .wd__section .ksp__layout .grid-item-wdContent .item_block.text-center .item_content .content__info { text-align: center; } html #CMD .wd__section .ksp__layout .grid-item-wdContent .item_block.text-center .item_image { width: 100%; height: 100%; } html #CMD .wd__section .ksp__layout .grid-item-wdContent .item_block.text-center .item_image .img__block { left: 50%; transform: translateX(-50%); } html #CMD .wd__section .ksp__layout .grid-item-wdContent .item_content { padding: 29px 0 35px 40px; width: 54%; } html #CMD .wd__section .ksp__layout .grid-item-wdContent .wd__content { left: 0; padding-bottom: 5px; width: 99%; } html #CMD .wd__section .ksp__layout .grid-item-wdContent .wd__content .content__title { width: 100%; font-size: 3rem; line-height: 1.2; } html #CMD .wd__section .ksp__layout .grid-item-wdContent .wd__content .content__info { margin-top: 25px; width: 100%; font-size: 1.625rem; } html #CMD .wd__section .ksp__layout .grid-item-wdContent .item_image { width: 46%; } html #CMD .wd__section .ksp__layout .grid-item-wdContent .item_image .img__block { position: absolute; top: 50%; transform: translateY(-50%); } html #CMD .wd__section .ksp__layout .grid-item.grid-item-wdFeature { min-height: 175px; } html #CMD .wd__section .ksp__layout .grid-item.grid-item-wdFeature .grid-item-ie { padding: 37px 24px; } html #CMD .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%; } html #CMD .wd__section .ksp__layout .grid-item-wdFeature .wd__feature__list .wd__feature .wd__feature__describe__top { margin-bottom: 12px; } html #CMD .wd__section .ksp__layout .grid-item-wdFeature .wd__feature__list .wd__feature .wd__feature__describe, html #CMD .wd__section .ksp__layout .grid-item-wdFeature .wd__feature__list .wd__feature .wd__feature__describe span, html #CMD .wd__section .ksp__layout .grid-item-wdFeature .wd__feature__list .wd__feature .wd__feature__describe__top, html #CMD .wd__section .ksp__layout .grid-item-wdFeature .wd__feature__list .wd__feature .wd__feature__describe__top span { font-size: 1.625rem; } html #CMD .wd__section .ksp__layout .grid-item-wdFeature .wd__feature__list .wd__feature .wd__feature__data { font-size: 3rem; line-height: 1.2; } html #CMD .wd__section .ksp__layout .grid-item-wdFeatureTopIcon .grid-item-ie { padding: 37px 20px; } html #CMD .wd__section .ksp__layout .grid-item-wdFeatureTopIcon .wd__feature__list.top-icon { margin-top: 6px; margin-right: auto; margin-left: auto; width: 86%; } html #CMD .wd__section .ksp__layout .grid-item-wdFeatureTopIcon .wd__feature__list.top-icon .wd__feature .wd__feature__describe__top { margin-bottom: 17px; } html #CMD .wd__section .ksp__layout .grid-item-wdFeatureTopIcon .wd__feature__list.top-icon .wd__feature .wd__feature__describe__top .img__icon { width: 100%; height: 100px; } html #CMD .wd__section .ksp__layout .grid-item-wdFeatureTopIcon .wd__feature__list.top-icon .wd__feature .wd__feature__data { font-size: 2.125rem; } html #CMD .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) { html #CMD .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; } html #CMD .wd__section .ksp__layout .grid-item { min-width: 320px; justify-content: center; } html #CMD .wd__section .ksp__layout .grid-item-wdContent { flex-direction: column; } html #CMD .wd__section .ksp__layout .grid-item-wdContent .item_block { flex-direction: column; } html #CMD .wd__section .ksp__layout .grid-item-wdContent .item_block.text-right { flex-direction: column; } html #CMD .wd__section .ksp__layout .grid-item-wdContent .item_content { padding: 27px 24px; height: auto; } html #CMD .wd__section .ksp__layout .grid-item-wdContent .wd__content { left: 0; padding-bottom: 5px; width: 100%; } html #CMD .wd__section .ksp__layout .grid-item-wdContent .wd__content .content__title { width: 100%; font-size: 2.3625rem; line-height: 1.2; } html #CMD .wd__section .ksp__layout .grid-item-wdContent .wd__content .content__info { margin-top: 8px; width: 100%; font-size: 1.25rem; } html #CMD .wd__section .ksp__layout .grid-item-wdContent .item_image { margin-top: -5px; width: 100%; } html #CMD .wd__section .ksp__layout .grid-item-wdContent .item_image .img__block { position: relative; } html #CMD .wd__section .ksp__layout .grid-item.grid-item-wdFeature .grid-item-ie { padding: 32px 24px; min-height: 1px; } html #CMD .wd__section .ksp__layout .grid-item-wdFeature .wd__feature__list .wd__feature .wd__feature__describe__top { margin-bottom: 4px; } html #CMD .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%; } html #CMD .wd__section .ksp__layout .grid-item-wdFeature .wd__feature__list .wd__feature .wd__feature__describe, html #CMD .wd__section .ksp__layout .grid-item-wdFeature .wd__feature__list .wd__feature .wd__feature__describe span, html #CMD .wd__section .ksp__layout .grid-item-wdFeature .wd__feature__list .wd__feature .wd__feature__describe__top, html #CMD .wd__section .ksp__layout .grid-item-wdFeature .wd__feature__list .wd__feature .wd__feature__describe__top span { font-size: 1.25rem; } html #CMD .wd__section .ksp__layout .grid-item-wdFeature .wd__feature__list .wd__feature .wd__feature__data { font-size: 2.3625rem; line-height: 1.2; letter-spacing: 1.4px; } html #CMD .wd__section .ksp__layout .grid-item-wdFeatureTopIcon .grid-item-ie { padding: 32px 24px; } html #CMD .wd__section .ksp__layout .grid-item-wdFeatureTopIcon .wd__feature__list.top-icon { margin-top: 6px; margin-right: auto; margin-left: auto; width: 86%; } html #CMD .wd__section .ksp__layout .grid-item-wdFeatureTopIcon .wd__feature__list.top-icon .wd__feature .wd__feature__describe, html #CMD .wd__section .ksp__layout .grid-item-wdFeatureTopIcon .wd__feature__list.top-icon .wd__feature .wd__feature__describe span, html #CMD .wd__section .ksp__layout .grid-item-wdFeatureTopIcon .wd__feature__list.top-icon .wd__feature .wd__feature__describe__top, html #CMD .wd__section .ksp__layout .grid-item-wdFeatureTopIcon .wd__feature__list.top-icon .wd__feature .wd__feature__describe__top span { font-size: 1.25rem; } html #CMD .wd__section .ksp__layout .grid-item-wdFeatureTopIcon .wd__feature__list.top-icon .wd__feature .wd__feature__describe__top { margin-bottom: 13px; } html #CMD .wd__section .ksp__layout .grid-item-wdFeatureTopIcon .wd__feature__list.top-icon .wd__feature .wd__feature__describe__top .img__icon { width: 100%; height: 72px; } html #CMD .wd__section .ksp__layout .grid-item-wdFeatureTopIcon .wd__feature__list.top-icon .wd__feature .wd__feature__data { font-size: 1.5625rem; } html #CMD .wd__section .ksp__layout .grid-item-wdFeatureTopIcon .wd__feature__list.top-icon .wd__feature .wd__feature__describe { margin-top: 11px; } } html #CMD .stopScrollbar { overflow: hidden; } html #CMD #af-header.popHide, html #CMD #overview-top-nav.popHide, html #CMD .section__comment.popHide, html #CMD #asus-api-footer.popHide, html #CMD #main-zone #product-footer-zone.popHide { display: none !important; } html #CMD .modal-button-container { z-index: 2147483647; } @media (max-width: 720px) { html #CMD .modal-button-container { transform: scale(0.8); } } html #CMD .modal-button-container.inner { position: fixed; bottom: 30px; left: 50%; transform: translate3d(-50%, 0, 0); } html #CMD .modal-button-container.text-white .modal-button { color: #fff; } html #CMD .modal-button-container.text-dark .modal-button { color: #000; } html #CMD .modal-button-container.outer { position: relative; text-align: center; } html #CMD .modal-button-container.outer .modal-button-target { top: 50px; } @media (max-width: 720px) { html #CMD .modal-button-container.outer .modal-button-target { top: 42px; } } html #CMD .modal-button-container .modal-button-text, html #CMD .modal-button-container .modal-inner-text { display: block; position: relative; font-size: 20px; pointer-events: none; } @media (min-width: 731px) and (max-width: 1279.5px) { html #CMD .modal-button-container .modal-button-text, html #CMD .modal-button-container .modal-inner-text { font-size: 20px; } } @media (max-width: 730.5px) { html #CMD .modal-button-container .modal-button-text, html #CMD .modal-button-container .modal-inner-text { font-size: 18px; } } html #CMD .modal-button-container .modal-button { display: inline-block; position: relative; z-index: 1; cursor: pointer; cursor: pointer; margin: 10px 0; padding: 8px 30px; font-weight: 200; text-align: center; border: 0; border-style: solid; border-width: 3px; border-radius: 34px; background-color: #000; transition: background-color 400ms ease-out, border-color 400ms ease-out, color 400ms ease-out; -webkit-tap-highlight-color: transparent; -ms-touch-action: manipulation; touch-action: manipulation; pointer-events: all; min-width: 50px; line-height: 46px; } html #CMD .outer-view { z-index: 0; transform-origin: 50vw 50vh; } html #CMD .outer-view.animate-scale { transform: translateZ(0) translateY(200px) scale(0.96); transition: transform 650ms ease-out; } html #CMD .outer-view .modal-button-container.ready .modal-button { transform: translate(0, 0) !important; } html #CMD .inner-view { display: block; position: fixed; overflow: hidden; z-index: 1000000000; top: 0; left: 50%; margin-left: -50vw; width: 100vw; text-align: center; background-color: white; transform: translateY(110vh); transition: transform 750ms linear; } html #CMD .inner-view.killFixed { position: relative !important; } html #CMD .inner-view .inner-view-container { height: 100%; } html #CMD .inner-view .inner-modal { display: block; position: relative; visibility: visible; opacity: 0; padding-bottom: 50px; width: 100%; transition: opacity 250ms; min-height: 100vh; min-height: var(--safarivh); } html #CMD .inner-view .inner-modal.showed { opacity: 1; } html #CMD .inner-view .modal-button-container { opacity: 1; transform: translate3d(0, 0, 0); -webkit-overflow-scrolling: touch; } html #CMD .inner-view .modal-button-container { position: fixed; bottom: -80px; left: 0%; opacity: 0; width: 100%; transform: translate3d(0%, 0, 0) translateZ(0); transition: transform 400ms ease, opacity 300ms linear; } html #CMD .inner-view.show-inner { transform: none !important; } html #CMD .inner-view.show-inner .modal-active { display: block; visibility: visible; } html #CMD .inner-view.show-inner .modal-button-container { opacity: 1; transform: translate3d(0%, -130px, 0) translateZ(0); transition: transform 300ms ease; transition-delay: 1200ms; } @media (max-width: 720px) { html #CMD .inner-view.show-inner .modal-button-container { transform: translate3d(0%, -110px, 0) translateZ(0) scale(0.8); } } @media (min-width: 731px) and (max-width: 1279.5px) { html #CMD .modal-button-container.inner { bottom: 20px; } } @media (max-width: 730.5px) { html #CMD .modal-button-container .modal-button { text-align: center; } html #CMD .modal-button-container.inner { bottom: 9px; } } html #CMD .section__myasus .myasus_container .myasus { display: flex; margin: 0 auto; border-radius: 10px; background-color: #212226; flex-direction: column; } html #CMD .section__myasus .myasus_container .myasus .wd__content .content__slogan::after { display: none; } @media all and (min-width: 1280px) { html #CMD .section__myasus .myasus_container { margin-top: 76px; } html #CMD .section__myasus .myasus_container .myasus { margin-top: 24px; padding-bottom: 32px; width: 1210px; } html #CMD .section__myasus .myasus_container .myasus_content { padding: 88px 49px 9px 55px; } html #CMD .section__myasus .myasus_container .myasus .wd__content { max-width: 960px; } html #CMD .section__myasus .myasus_container .myasus .wd__content .content__slogan { margin-bottom: 0 !important; font-size: 2.1875rem !important; } html #CMD .section__myasus .myasus_container .myasus .wd__content .content__title { font-size: 1.875rem !important; } html #CMD .section__myasus .myasus_container .myasus .wd__feature__list { margin-top: 31px; margin-bottom: -49px; width: 100%; } html #CMD .section__myasus .myasus_container .myasus .wd__feature__list .wd__feature { display: inline-block; margin-right: 22px; vertical-align: top; } html #CMD .section__myasus .myasus_container .myasus .wd__feature__list .wd__feature:last-child { margin-right: 0; } html #CMD .section__myasus .myasus_container .myasus .wd__feature__list .feature-1 { width: 146px; } html #CMD .section__myasus .myasus_container .myasus .wd__feature__list .feature-2 { margin-right: 30px; width: 146px; } html #CMD .section__myasus .myasus_container .myasus .wd__feature__list .feature-3 { margin-right: 32px; width: 140px; } html #CMD .section__myasus .myasus_container .myasus .wd__feature__list .feature-4 { margin-right: 20px; width: 140px; } html #CMD .section__myasus .myasus_container .myasus .wd__feature__list .feature-5 { width: 110px; } html #CMD .section__myasus .myasus_container .myasus .wd__feature__list .feature-6 { width: 146px; } html #CMD .section__myasus .myasus_container .myasus .wd__feature__list-1 { justify-content: flex-start; } html #CMD .section__myasus .myasus_container .img__icon { display: block; width: 110px; height: 90px; background-size: contain; } #CMD .myasus_container .img__icon1 { background-image: url("../images/large/1x/myasus/icon1.png"); } } @media all and (min-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5), all and (min-width: 1280px) and (min-resolution: 144dpi) { #CMD .myasus_container .img__icon1 { background-image: url("../images/large/2x/myasus/icon1.webp"); } } @media all and (min-width: 1280px) and (min-device-pixel-ratio: 1.5), all and (min-width: 1280px) and (min-resolution: 144dpi) { .image-old #CMD .myasus_container .img__icon1 { background-image: url("../images/large/2x/myasus/icon1.png"); } } @media all and (min-width: 1280px) { #CMD .myasus_container .img__icon2 { background-image: url("../images/large/1x/myasus/icon2.png"); } } @media all and (min-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5), all and (min-width: 1280px) and (min-resolution: 144dpi) { #CMD .myasus_container .img__icon2 { background-image: url("../images/large/2x/myasus/icon2.webp"); } } @media all and (min-width: 1280px) and (min-device-pixel-ratio: 1.5), all and (min-width: 1280px) and (min-resolution: 144dpi) { .image-old #CMD .myasus_container .img__icon2 { background-image: url("../images/large/2x/myasus/icon2.png"); } } @media all and (min-width: 1280px) { #CMD .myasus_container .img__icon3 { background-image: url("../images/large/1x/myasus/icon3.png"); } } @media all and (min-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5), all and (min-width: 1280px) and (min-resolution: 144dpi) { #CMD .myasus_container .img__icon3 { background-image: url("../images/large/2x/myasus/icon3.webp"); } } @media all and (min-width: 1280px) and (min-device-pixel-ratio: 1.5), all and (min-width: 1280px) and (min-resolution: 144dpi) { .image-old #CMD .myasus_container .img__icon3 { background-image: url("../images/large/2x/myasus/icon3.png"); } } @media all and (min-width: 1280px) { #CMD .myasus_container .img__icon4 { background-image: url("../images/large/1x/myasus/icon4.png"); } } @media all and (min-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5), all and (min-width: 1280px) and (min-resolution: 144dpi) { #CMD .myasus_container .img__icon4 { background-image: url("../images/large/2x/myasus/icon4.webp"); } } @media all and (min-width: 1280px) and (min-device-pixel-ratio: 1.5), all and (min-width: 1280px) and (min-resolution: 144dpi) { .image-old #CMD .myasus_container .img__icon4 { background-image: url("../images/large/2x/myasus/icon4.png"); } } @media all and (min-width: 1280px) { #CMD .myasus_container .img__icon5 { background-image: url("../images/large/1x/myasus/icon5.png"); } } @media all and (min-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5), all and (min-width: 1280px) and (min-resolution: 144dpi) { #CMD .myasus_container .img__icon5 { background-image: url("../images/large/2x/myasus/icon5.webp"); } } @media all and (min-width: 1280px) and (min-device-pixel-ratio: 1.5), all and (min-width: 1280px) and (min-resolution: 144dpi) { .image-old #CMD .myasus_container .img__icon5 { background-image: url("../images/large/2x/myasus/icon5.png"); } } @media all and (min-width: 1280px) { #CMD .myasus_container .img__icon6 { background-image: url("../images/large/1x/myasus/icon6.png"); } } @media all and (min-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5), all and (min-width: 1280px) and (min-resolution: 144dpi) { #CMD .myasus_container .img__icon6 { background-image: url("../images/large/2x/myasus/icon6.webp"); } } @media all and (min-width: 1280px) and (min-device-pixel-ratio: 1.5), all and (min-width: 1280px) and (min-resolution: 144dpi) { .image-old #CMD .myasus_container .img__icon6 { background-image: url("../images/large/2x/myasus/icon6.png"); } } @media all and (min-width: 1280px) { #CMD .myasus_container .img__icon7 { background-image: url("../images/large/1x/myasus/icon7.png"); } } @media all and (min-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5), all and (min-width: 1280px) and (min-resolution: 144dpi) { #CMD .myasus_container .img__icon7 { background-image: url("../images/large/2x/myasus/icon7.webp"); } } @media all and (min-width: 1280px) and (min-device-pixel-ratio: 1.5), all and (min-width: 1280px) and (min-resolution: 144dpi) { .image-old #CMD .myasus_container .img__icon7 { background-image: url("../images/large/2x/myasus/icon7.png"); } } @media all and (min-width: 1280px) { #CMD .myasus_container .img__icon8 { background-image: url("../images/large/1x/myasus/icon8.png"); } } @media all and (min-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5), all and (min-width: 1280px) and (min-resolution: 144dpi) { #CMD .myasus_container .img__icon8 { background-image: url("../images/large/2x/myasus/icon8.webp"); } } @media all and (min-width: 1280px) and (min-device-pixel-ratio: 1.5), all and (min-width: 1280px) and (min-resolution: 144dpi) { .image-old #CMD .myasus_container .img__icon8 { background-image: url("../images/large/2x/myasus/icon8.png"); } } @media all and (min-width: 1280px) { #CMD .myasus_container .img__icon9 { background-image: url("../images/large/1x/myasus/icon9.png"); } } @media all and (min-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5), all and (min-width: 1280px) and (min-resolution: 144dpi) { #CMD .myasus_container .img__icon9 { background-image: url("../images/large/2x/myasus/icon9.webp"); } } @media all and (min-width: 1280px) and (min-device-pixel-ratio: 1.5), all and (min-width: 1280px) and (min-resolution: 144dpi) { .image-old #CMD .myasus_container .img__icon9 { background-image: url("../images/large/2x/myasus/icon9.png"); } } @media all and (min-width: 1280px) { #CMD .myasus_container .img__icon10 { background-image: url("../images/large/1x/myasus/icon10.png"); } } @media all and (min-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5), all and (min-width: 1280px) and (min-resolution: 144dpi) { #CMD .myasus_container .img__icon10 { background-image: url("../images/large/2x/myasus/icon10.webp"); } } @media all and (min-width: 1280px) and (min-device-pixel-ratio: 1.5), all and (min-width: 1280px) and (min-resolution: 144dpi) { .image-old #CMD .myasus_container .img__icon10 { background-image: url("../images/large/2x/myasus/icon10.png"); } } @media all and (min-width: 1280px) { #CMD .myasus_container .img__icon11 { background-image: url("../images/large/1x/myasus/icon11.png"); } } @media all and (min-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5), all and (min-width: 1280px) and (min-resolution: 144dpi) { #CMD .myasus_container .img__icon11 { background-image: url("../images/large/2x/myasus/icon11.webp"); } } @media all and (min-width: 1280px) and (min-device-pixel-ratio: 1.5), all and (min-width: 1280px) and (min-resolution: 144dpi) { .image-old #CMD .myasus_container .img__icon11 { background-image: url("../images/large/2x/myasus/icon11.png"); } } @media all and (min-width: 1280px) { html #CMD .section__myasus .myasus_container .feature-7 .img__icon { width: 160px; } html #CMD .section__myasus .myasus_container .feature-8 .img__icon { width: 160px; } html #CMD .section__myasus .myasus_container .myasus.myasus-1 { padding-bottom: 26px; } html #CMD .section__myasus .myasus_container .myasus.myasus-2 { padding-bottom: 53px; } html #CMD .section__myasus .myasus_container .myasus.myasus-2 .image__container { margin-top: 34px; } html #CMD .myasus.myasus-0 .img__main { left: 50%; margin-left: -550px; width: 1100px; height: 500px; } #CMD .myasus_container .myasus.myasus-0 .img__main { background-image: url("../images/large/1x/myasus/article0_main.jpg"); } } @media all and (min-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5), all and (min-width: 1280px) and (min-resolution: 144dpi) { #CMD .myasus_container .myasus.myasus-0 .img__main { background-image: url("../images/large/2x/myasus/article0_main.webp"); } } @media all and (min-width: 1280px) and (min-device-pixel-ratio: 1.5), all and (min-width: 1280px) and (min-resolution: 144dpi) { .image-old #CMD .myasus_container .myasus.myasus-0 .img__main { background-image: url("../images/large/2x/myasus/article0_main.jpg"); } } @media all and (min-width: 1280px) { html #CMD .myasus.myasus-1 .img__main { left: 50%; margin-left: -550px; width: 1100px; height: 500px; } #CMD .myasus_container .myasus.myasus-1 .img__main { background-image: url("../images/large/1x/myasus/article1_main.jpg"); } } @media all and (min-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5), all and (min-width: 1280px) and (min-resolution: 144dpi) { #CMD .myasus_container .myasus.myasus-1 .img__main { background-image: url("../images/large/2x/myasus/article1_main.webp"); } } @media all and (min-width: 1280px) and (min-device-pixel-ratio: 1.5), all and (min-width: 1280px) and (min-resolution: 144dpi) { .image-old #CMD .myasus_container .myasus.myasus-1 .img__main { background-image: url("../images/large/2x/myasus/article1_main.jpg"); } } @media all and (min-width: 1280px) { html #CMD .myasus.myasus-2 .img__main { left: 50%; margin-left: -550px; width: 1100px; height: 500px; } #CMD .myasus_container .myasus.myasus-2 .img__main { background-image: url("../images/large/1x/myasus/article2_main.jpg"); } } @media all and (min-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5), all and (min-width: 1280px) and (min-resolution: 144dpi) { #CMD .myasus_container .myasus.myasus-2 .img__main { background-image: url("../images/large/2x/myasus/article2_main.webp"); } } @media all and (min-width: 1280px) and (min-device-pixel-ratio: 1.5), all and (min-width: 1280px) and (min-resolution: 144dpi) { .image-old #CMD .myasus_container .myasus.myasus-2 .img__main { background-image: url("../images/large/2x/myasus/article2_main.jpg"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) { html #CMD .section__myasus .myasus_container { margin: 0 auto; padding: 0 15px; width: 100%; max-width: 731px; } html #CMD .section__myasus .myasus_container .myasus { margin: 24px 8px 0; padding-bottom: 60px; flex-direction: column; } html #CMD .section__myasus .myasus_container .myasus_content { padding: 60px 40px 30px; width: 100%; } html #CMD .section__myasus .myasus_container .myasus:first-child { margin-top: 58px; } html #CMD .section__myasus .myasus_container .myasus .wd__content .content__slogan { margin-bottom: 0 !important; font-size: 2.1875rem !important; } html #CMD .section__myasus .myasus_container .myasus .wd__content .content__title { margin-top: 25px !important; font-size: 1.875rem !important; } html #CMD .section__myasus .myasus_container .myasus .wd__content .content__info { max-width: 720px; font-size: 1.25rem !important; } html #CMD .section__myasus .myasus_container .myasus .wd__content .content__link { margin-top: 16px; } html #CMD .section__myasus .myasus_container .myasus .wd__feature__list { display: flex; justify-content: center; margin-top: 40px; margin-bottom: -22px; flex-wrap: wrap; } html #CMD .section__myasus .myasus_container .myasus .wd__feature__list .wd__feature { margin-right: 0 !important; margin-bottom: 30px; margin-left: 0 !important; padding: 0 10px; width: 170px; } html #CMD .section__myasus .myasus_container .myasus .wd__feature__list .wd__feature .wd__feature__data { font-size: 29px; } html #CMD .section__myasus .myasus_container .myasus .wd__feature__list .wd__feature .wd__feature__describe span { display: block; text-align: center; } html #CMD .section__myasus .myasus_container .myasus .myasus_image .img__main { margin: 0 auto; } html #CMD .section__myasus .myasus_container .img__icon { display: block; margin: 0 auto; width: 150px; height: 90px; } #CMD .myasus_container .img__icon1 { background-image: url("../images/medium/1x/myasus/icon1.png"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) and (-webkit-min-device-pixel-ratio: 1.5), all and (min-width: 731px) and (max-width: 1279.5px) and (min-resolution: 144dpi) { #CMD .myasus_container .img__icon1 { background-image: url("../images/medium/2x/myasus/icon1.webp"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) and (min-device-pixel-ratio: 1.5), all and (min-width: 731px) and (max-width: 1279.5px) and (min-resolution: 144dpi) { .image-old #CMD .myasus_container .img__icon1 { background-image: url("../images/medium/2x/myasus/icon1.png"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) { #CMD .myasus_container .img__icon2 { background-image: url("../images/medium/1x/myasus/icon2.png"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) and (-webkit-min-device-pixel-ratio: 1.5), all and (min-width: 731px) and (max-width: 1279.5px) and (min-resolution: 144dpi) { #CMD .myasus_container .img__icon2 { background-image: url("../images/medium/2x/myasus/icon2.webp"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) and (min-device-pixel-ratio: 1.5), all and (min-width: 731px) and (max-width: 1279.5px) and (min-resolution: 144dpi) { .image-old #CMD .myasus_container .img__icon2 { background-image: url("../images/medium/2x/myasus/icon2.png"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) { #CMD .myasus_container .img__icon3 { background-image: url("../images/medium/1x/myasus/icon3.png"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) and (-webkit-min-device-pixel-ratio: 1.5), all and (min-width: 731px) and (max-width: 1279.5px) and (min-resolution: 144dpi) { #CMD .myasus_container .img__icon3 { background-image: url("../images/medium/2x/myasus/icon3.webp"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) and (min-device-pixel-ratio: 1.5), all and (min-width: 731px) and (max-width: 1279.5px) and (min-resolution: 144dpi) { .image-old #CMD .myasus_container .img__icon3 { background-image: url("../images/medium/2x/myasus/icon3.png"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) { #CMD .myasus_container .img__icon4 { background-image: url("../images/medium/1x/myasus/icon4.png"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) and (-webkit-min-device-pixel-ratio: 1.5), all and (min-width: 731px) and (max-width: 1279.5px) and (min-resolution: 144dpi) { #CMD .myasus_container .img__icon4 { background-image: url("../images/medium/2x/myasus/icon4.webp"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) and (min-device-pixel-ratio: 1.5), all and (min-width: 731px) and (max-width: 1279.5px) and (min-resolution: 144dpi) { .image-old #CMD .myasus_container .img__icon4 { background-image: url("../images/medium/2x/myasus/icon4.png"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) { #CMD .myasus_container .img__icon5 { background-image: url("../images/medium/1x/myasus/icon5.png"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) and (-webkit-min-device-pixel-ratio: 1.5), all and (min-width: 731px) and (max-width: 1279.5px) and (min-resolution: 144dpi) { #CMD .myasus_container .img__icon5 { background-image: url("../images/medium/2x/myasus/icon5.webp"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) and (min-device-pixel-ratio: 1.5), all and (min-width: 731px) and (max-width: 1279.5px) and (min-resolution: 144dpi) { .image-old #CMD .myasus_container .img__icon5 { background-image: url("../images/medium/2x/myasus/icon5.png"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) { #CMD .myasus_container .img__icon6 { background-image: url("../images/medium/1x/myasus/icon6.png"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) and (-webkit-min-device-pixel-ratio: 1.5), all and (min-width: 731px) and (max-width: 1279.5px) and (min-resolution: 144dpi) { #CMD .myasus_container .img__icon6 { background-image: url("../images/medium/2x/myasus/icon6.webp"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) and (min-device-pixel-ratio: 1.5), all and (min-width: 731px) and (max-width: 1279.5px) and (min-resolution: 144dpi) { .image-old #CMD .myasus_container .img__icon6 { background-image: url("../images/medium/2x/myasus/icon6.png"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) { #CMD .myasus_container .img__icon7 { background-image: url("../images/medium/1x/myasus/icon7.png"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) and (-webkit-min-device-pixel-ratio: 1.5), all and (min-width: 731px) and (max-width: 1279.5px) and (min-resolution: 144dpi) { #CMD .myasus_container .img__icon7 { background-image: url("../images/medium/2x/myasus/icon7.webp"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) and (min-device-pixel-ratio: 1.5), all and (min-width: 731px) and (max-width: 1279.5px) and (min-resolution: 144dpi) { .image-old #CMD .myasus_container .img__icon7 { background-image: url("../images/medium/2x/myasus/icon7.png"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) { #CMD .myasus_container .img__icon8 { background-image: url("../images/medium/1x/myasus/icon8.png"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) and (-webkit-min-device-pixel-ratio: 1.5), all and (min-width: 731px) and (max-width: 1279.5px) and (min-resolution: 144dpi) { #CMD .myasus_container .img__icon8 { background-image: url("../images/medium/2x/myasus/icon8.webp"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) and (min-device-pixel-ratio: 1.5), all and (min-width: 731px) and (max-width: 1279.5px) and (min-resolution: 144dpi) { .image-old #CMD .myasus_container .img__icon8 { background-image: url("../images/medium/2x/myasus/icon8.png"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) { #CMD .myasus_container .img__icon9 { background-image: url("../images/medium/1x/myasus/icon9.png"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) and (-webkit-min-device-pixel-ratio: 1.5), all and (min-width: 731px) and (max-width: 1279.5px) and (min-resolution: 144dpi) { #CMD .myasus_container .img__icon9 { background-image: url("../images/medium/2x/myasus/icon9.webp"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) and (min-device-pixel-ratio: 1.5), all and (min-width: 731px) and (max-width: 1279.5px) and (min-resolution: 144dpi) { .image-old #CMD .myasus_container .img__icon9 { background-image: url("../images/medium/2x/myasus/icon9.png"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) { #CMD .myasus_container .img__icon10 { background-image: url("../images/medium/1x/myasus/icon10.png"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) and (-webkit-min-device-pixel-ratio: 1.5), all and (min-width: 731px) and (max-width: 1279.5px) and (min-resolution: 144dpi) { #CMD .myasus_container .img__icon10 { background-image: url("../images/medium/2x/myasus/icon10.webp"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) and (min-device-pixel-ratio: 1.5), all and (min-width: 731px) and (max-width: 1279.5px) and (min-resolution: 144dpi) { .image-old #CMD .myasus_container .img__icon10 { background-image: url("../images/medium/2x/myasus/icon10.png"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) { #CMD .myasus_container .img__icon11 { background-image: url("../images/medium/1x/myasus/icon11.png"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) and (-webkit-min-device-pixel-ratio: 1.5), all and (min-width: 731px) and (max-width: 1279.5px) and (min-resolution: 144dpi) { #CMD .myasus_container .img__icon11 { background-image: url("../images/medium/2x/myasus/icon11.webp"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) and (min-device-pixel-ratio: 1.5), all and (min-width: 731px) and (max-width: 1279.5px) and (min-resolution: 144dpi) { .image-old #CMD .myasus_container .img__icon11 { background-image: url("../images/medium/2x/myasus/icon11.png"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) { html #CMD .myasus.myasus-0 .img__main { width: 95%; height: 400px; background-size: contain !important; } #CMD .myasus_container .myasus.myasus-0 .img__main { background-image: url("../images/medium/1x/myasus/article0_main.jpg"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) and (-webkit-min-device-pixel-ratio: 1.5), all and (min-width: 731px) and (max-width: 1279.5px) and (min-resolution: 144dpi) { #CMD .myasus_container .myasus.myasus-0 .img__main { background-image: url("../images/medium/2x/myasus/article0_main.webp"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) and (min-device-pixel-ratio: 1.5), all and (min-width: 731px) and (max-width: 1279.5px) and (min-resolution: 144dpi) { .image-old #CMD .myasus_container .myasus.myasus-0 .img__main { background-image: url("../images/medium/2x/myasus/article0_main.jpg"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) { html #CMD .myasus.myasus-1 .img__main { width: 95%; height: 300px; background-size: contain !important; } #CMD .myasus_container .myasus.myasus-1 .img__main { background-image: url("../images/medium/1x/myasus/article1_main.jpg"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) and (-webkit-min-device-pixel-ratio: 1.5), all and (min-width: 731px) and (max-width: 1279.5px) and (min-resolution: 144dpi) { #CMD .myasus_container .myasus.myasus-1 .img__main { background-image: url("../images/medium/2x/myasus/article1_main.webp"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) and (min-device-pixel-ratio: 1.5), all and (min-width: 731px) and (max-width: 1279.5px) and (min-resolution: 144dpi) { .image-old #CMD .myasus_container .myasus.myasus-1 .img__main { background-image: url("../images/medium/2x/myasus/article1_main.jpg"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) { html #CMD .myasus.myasus-2 .img__main { width: 95%; height: 430px; background-size: contain !important; } #CMD .myasus_container .myasus.myasus-2 .img__main { background-image: url("../images/medium/1x/myasus/article2_main.jpg"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) and (-webkit-min-device-pixel-ratio: 1.5), all and (min-width: 731px) and (max-width: 1279.5px) and (min-resolution: 144dpi) { #CMD .myasus_container .myasus.myasus-2 .img__main { background-image: url("../images/medium/2x/myasus/article2_main.webp"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) and (min-device-pixel-ratio: 1.5), all and (min-width: 731px) and (max-width: 1279.5px) and (min-resolution: 144dpi) { .image-old #CMD .myasus_container .myasus.myasus-2 .img__main { background-image: url("../images/medium/2x/myasus/article2_main.jpg"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) { html #CMD .myasus_container .myasus.myasus-1 { padding-bottom: 40px; } html #CMD .myasus_container .myasus.myasus-1 .myasus_content { padding-bottom: 14px; } html #CMD .myasus_container .myasus.myasus-2 { padding-bottom: 60px; } html #CMD .myasus_container .myasus.myasus-2 .wd__content { width: 100%; } html #CMD .myasus_container .myasus.myasus-2 .image__container { margin-top: 3px; } } @media all and (max-width: 730.5px) { html #CMD .section__myasus .myasus_container { margin: 0 auto; padding: 0 40px; width: 100%; max-width: 414px; } html #CMD .section__myasus .myasus_container .myasus { margin-top: 24px; flex-direction: column; padding-bottom: 42px; } html #CMD .section__myasus .myasus_container .myasus_content { padding: 40px 0 72px; width: 100%; } html #CMD .section__myasus .myasus_container .myasus:first-child { margin-top: 50px; } html #CMD .section__myasus .myasus_container .myasus .wd__content .content__slogan { display: block; margin-bottom: 0 !important; font-size: 1.75rem !important; text-align: center; } html #CMD .section__myasus .myasus_container .myasus .wd__content .content__title { margin-top: 17px !important; font-size: 1.25rem !important; } html #CMD .section__myasus .myasus_container .myasus .wd__content .content__info { margin-top: 14px; max-width: 720px; font-size: 1.125rem !important; } html #CMD .section__myasus .myasus_container .myasus .wd__content .content__link { margin-top: 10px !important; } html #CMD .section__myasus .myasus_container .myasus .img__icon { width: 100px; background-size: auto 100%; } html #CMD .section__myasus .myasus_container .myasus .wd__feature__list { margin-top: 30px !important; margin-bottom: -49px; } html #CMD .section__myasus .myasus_container .myasus .wd__feature__list .wd__feature { display: inline-block; margin: 0 10px 20px !important; max-width: 110px; } html #CMD .section__myasus .myasus_container .myasus .wd__feature__list .feature-7 { margin-right: 0 !important; margin-left: 0 !important; max-width: 160px !important; } html #CMD .section__myasus .myasus_container .myasus .wd__feature__list .feature-7 .img__icon { width: 160px; } html #CMD .section__myasus .myasus_container .img__icon { display: block; margin: 0 auto; width: 160px; height: 90px; } #CMD .myasus_container .img__icon1 { background-image: url("../images/small/1x/myasus/icon1.png"); } } @media all and (max-width: 730.5px) and (-webkit-min-device-pixel-ratio: 1.5), all and (max-width: 730.5px) and (min-resolution: 144dpi) { #CMD .myasus_container .img__icon1 { background-image: url("../images/small/2x/myasus/icon1.webp"); } } @media all and (max-width: 730.5px) and (min-device-pixel-ratio: 1.5), all and (max-width: 730.5px) and (min-resolution: 144dpi) { .image-old #CMD .myasus_container .img__icon1 { background-image: url("../images/small/2x/myasus/icon1.png"); } } @media all and (max-width: 730.5px) { #CMD .myasus_container .img__icon2 { background-image: url("../images/small/1x/myasus/icon2.png"); } } @media all and (max-width: 730.5px) and (-webkit-min-device-pixel-ratio: 1.5), all and (max-width: 730.5px) and (min-resolution: 144dpi) { #CMD .myasus_container .img__icon2 { background-image: url("../images/small/2x/myasus/icon2.webp"); } } @media all and (max-width: 730.5px) and (min-device-pixel-ratio: 1.5), all and (max-width: 730.5px) and (min-resolution: 144dpi) { .image-old #CMD .myasus_container .img__icon2 { background-image: url("../images/small/2x/myasus/icon2.png"); } } @media all and (max-width: 730.5px) { #CMD .myasus_container .img__icon3 { background-image: url("../images/small/1x/myasus/icon3.png"); } } @media all and (max-width: 730.5px) and (-webkit-min-device-pixel-ratio: 1.5), all and (max-width: 730.5px) and (min-resolution: 144dpi) { #CMD .myasus_container .img__icon3 { background-image: url("../images/small/2x/myasus/icon3.webp"); } } @media all and (max-width: 730.5px) and (min-device-pixel-ratio: 1.5), all and (max-width: 730.5px) and (min-resolution: 144dpi) { .image-old #CMD .myasus_container .img__icon3 { background-image: url("../images/small/2x/myasus/icon3.png"); } } @media all and (max-width: 730.5px) { #CMD .myasus_container .img__icon4 { background-image: url("../images/small/1x/myasus/icon4.png"); } } @media all and (max-width: 730.5px) and (-webkit-min-device-pixel-ratio: 1.5), all and (max-width: 730.5px) and (min-resolution: 144dpi) { #CMD .myasus_container .img__icon4 { background-image: url("../images/small/2x/myasus/icon4.webp"); } } @media all and (max-width: 730.5px) and (min-device-pixel-ratio: 1.5), all and (max-width: 730.5px) and (min-resolution: 144dpi) { .image-old #CMD .myasus_container .img__icon4 { background-image: url("../images/small/2x/myasus/icon4.png"); } } @media all and (max-width: 730.5px) { #CMD .myasus_container .img__icon5 { background-image: url("../images/small/1x/myasus/icon5.png"); } } @media all and (max-width: 730.5px) and (-webkit-min-device-pixel-ratio: 1.5), all and (max-width: 730.5px) and (min-resolution: 144dpi) { #CMD .myasus_container .img__icon5 { background-image: url("../images/small/2x/myasus/icon5.webp"); } } @media all and (max-width: 730.5px) and (min-device-pixel-ratio: 1.5), all and (max-width: 730.5px) and (min-resolution: 144dpi) { .image-old #CMD .myasus_container .img__icon5 { background-image: url("../images/small/2x/myasus/icon5.png"); } } @media all and (max-width: 730.5px) { #CMD .myasus_container .img__icon6 { background-image: url("../images/small/1x/myasus/icon6.png"); } } @media all and (max-width: 730.5px) and (-webkit-min-device-pixel-ratio: 1.5), all and (max-width: 730.5px) and (min-resolution: 144dpi) { #CMD .myasus_container .img__icon6 { background-image: url("../images/small/2x/myasus/icon6.webp"); } } @media all and (max-width: 730.5px) and (min-device-pixel-ratio: 1.5), all and (max-width: 730.5px) and (min-resolution: 144dpi) { .image-old #CMD .myasus_container .img__icon6 { background-image: url("../images/small/2x/myasus/icon6.png"); } } @media all and (max-width: 730.5px) { #CMD .myasus_container .img__icon7 { background-image: url("../images/small/1x/myasus/icon7.png"); } } @media all and (max-width: 730.5px) and (-webkit-min-device-pixel-ratio: 1.5), all and (max-width: 730.5px) and (min-resolution: 144dpi) { #CMD .myasus_container .img__icon7 { background-image: url("../images/small/2x/myasus/icon7.webp"); } } @media all and (max-width: 730.5px) and (min-device-pixel-ratio: 1.5), all and (max-width: 730.5px) and (min-resolution: 144dpi) { .image-old #CMD .myasus_container .img__icon7 { background-image: url("../images/small/2x/myasus/icon7.png"); } } @media all and (max-width: 730.5px) { #CMD .myasus_container .img__icon8 { background-image: url("../images/small/1x/myasus/icon8.png"); } } @media all and (max-width: 730.5px) and (-webkit-min-device-pixel-ratio: 1.5), all and (max-width: 730.5px) and (min-resolution: 144dpi) { #CMD .myasus_container .img__icon8 { background-image: url("../images/small/2x/myasus/icon8.webp"); } } @media all and (max-width: 730.5px) and (min-device-pixel-ratio: 1.5), all and (max-width: 730.5px) and (min-resolution: 144dpi) { .image-old #CMD .myasus_container .img__icon8 { background-image: url("../images/small/2x/myasus/icon8.png"); } } @media all and (max-width: 730.5px) { #CMD .myasus_container .img__icon9 { background-image: url("../images/small/1x/myasus/icon9.png"); } } @media all and (max-width: 730.5px) and (-webkit-min-device-pixel-ratio: 1.5), all and (max-width: 730.5px) and (min-resolution: 144dpi) { #CMD .myasus_container .img__icon9 { background-image: url("../images/small/2x/myasus/icon9.webp"); } } @media all and (max-width: 730.5px) and (min-device-pixel-ratio: 1.5), all and (max-width: 730.5px) and (min-resolution: 144dpi) { .image-old #CMD .myasus_container .img__icon9 { background-image: url("../images/small/2x/myasus/icon9.png"); } } @media all and (max-width: 730.5px) { #CMD .myasus_container .img__icon10 { background-image: url("../images/small/1x/myasus/icon10.png"); } } @media all and (max-width: 730.5px) and (-webkit-min-device-pixel-ratio: 1.5), all and (max-width: 730.5px) and (min-resolution: 144dpi) { #CMD .myasus_container .img__icon10 { background-image: url("../images/small/2x/myasus/icon10.webp"); } } @media all and (max-width: 730.5px) and (min-device-pixel-ratio: 1.5), all and (max-width: 730.5px) and (min-resolution: 144dpi) { .image-old #CMD .myasus_container .img__icon10 { background-image: url("../images/small/2x/myasus/icon10.png"); } } @media all and (max-width: 730.5px) { #CMD .myasus_container .img__icon11 { background-image: url("../images/small/1x/myasus/icon11.png"); } } @media all and (max-width: 730.5px) and (-webkit-min-device-pixel-ratio: 1.5), all and (max-width: 730.5px) and (min-resolution: 144dpi) { #CMD .myasus_container .img__icon11 { background-image: url("../images/small/2x/myasus/icon11.webp"); } } @media all and (max-width: 730.5px) and (min-device-pixel-ratio: 1.5), all and (max-width: 730.5px) and (min-resolution: 144dpi) { .image-old #CMD .myasus_container .img__icon11 { background-image: url("../images/small/2x/myasus/icon11.png"); } } @media all and (max-width: 730.5px) { html #CMD .myasus.myasus-0 .img__main { margin: 0 auto; width: 76%; max-width: 414px; height: 160px; background-size: contain !important; } #CMD .myasus_container .myasus.myasus-0 .img__main { background-image: url("../images/small/1x/myasus/article0_main.jpg"); } } @media all and (max-width: 730.5px) and (-webkit-min-device-pixel-ratio: 1.5), all and (max-width: 730.5px) and (min-resolution: 144dpi) { #CMD .myasus_container .myasus.myasus-0 .img__main { background-image: url("../images/small/2x/myasus/article0_main.webp"); } } @media all and (max-width: 730.5px) and (min-device-pixel-ratio: 1.5), all and (max-width: 730.5px) and (min-resolution: 144dpi) { .image-old #CMD .myasus_container .myasus.myasus-0 .img__main { background-image: url("../images/small/2x/myasus/article0_main.jpg"); } } @media all and (max-width: 730.5px) { html #CMD .myasus.myasus-1 .img__main { margin: 0 auto; width: 90%; max-width: 414px; height: 110px; background-size: contain !important; } #CMD .myasus_container .myasus.myasus-1 .img__main { background-image: url("../images/small/1x/myasus/article1_main.jpg"); } } @media all and (max-width: 730.5px) and (-webkit-min-device-pixel-ratio: 1.5), all and (max-width: 730.5px) and (min-resolution: 144dpi) { #CMD .myasus_container .myasus.myasus-1 .img__main { background-image: url("../images/small/2x/myasus/article1_main.webp"); } } @media all and (max-width: 730.5px) and (min-device-pixel-ratio: 1.5), all and (max-width: 730.5px) and (min-resolution: 144dpi) { .image-old #CMD .myasus_container .myasus.myasus-1 .img__main { background-image: url("../images/small/2x/myasus/article1_main.jpg"); } } @media all and (max-width: 730.5px) { html #CMD .myasus.myasus-2 .img__main { margin: 0 auto; width: 95%; max-width: 373px; height: 160px; background-size: contain !important; } #CMD .myasus_container .myasus.myasus-2 .img__main { background-image: url("../images/small/1x/myasus/article2_main.jpg"); } } @media all and (max-width: 730.5px) and (-webkit-min-device-pixel-ratio: 1.5), all and (max-width: 730.5px) and (min-resolution: 144dpi) { #CMD .myasus_container .myasus.myasus-2 .img__main { background-image: url("../images/small/2x/myasus/article2_main.webp"); } } @media all and (max-width: 730.5px) and (min-device-pixel-ratio: 1.5), all and (max-width: 730.5px) and (min-resolution: 144dpi) { .image-old #CMD .myasus_container .myasus.myasus-2 .img__main { background-image: url("../images/small/2x/myasus/article2_main.jpg"); } } @media all and (max-width: 730.5px) { html #CMD .myasus_container .myasus.myasus-2 { padding-bottom: 41px; } html #CMD .myasus_container .myasus.myasus-2 .image__container { margin-top: 0; } } html #CMD .audio__chart { position: relative; } html #CMD .audio__chart.audio__chart_0 .top .topLeft { position: absolute; top: 70px; left: 12.5%; width: 40%; color: #bababa; font-size: 20px; text-align: center; } html #CMD .audio__chart.audio__chart_0 .top .topRight { position: absolute; top: 70px; right: 12%; width: 40%; color: #00f2fe; font-size: 20px; text-align: center; } html #CMD .audio__chart.audio__chart_0 .left { position: absolute; top: 0; left: 70px; width: 100px; height: 100%; color: #bababa; font-size: 16px; text-align: left; } html #CMD .audio__chart.audio__chart_0 .left .y1 { position: absolute; top: 28%; } html #CMD .audio__chart.audio__chart_0 .left .y2 { position: absolute; top: 50%; } html #CMD .audio__chart.audio__chart_0 .left .y3 { position: absolute; top: 73%; } html #CMD .audio__chart.audio__chart_0 .num { position: absolute; top: 50%; right: 74px; color: #00f2fe; font-size: 43px; font-weight: bold; transform: rotate(270deg); } html #CMD .audio__chart.audio__chart_1 .title { position: absolute; top: 30px; width: 100%; color: #fff; font-size: 20px; text-align: center; } html #CMD .audio__chart.audio__chart_1 .y { position: absolute; top: 128px; left: 115px; color: #bababa; font-size: 16px; transform: rotate(270deg); } html #CMD .audio__chart.audio__chart_1 .x { position: absolute; right: 154px; bottom: 60px; color: #bababa; font-size: 16px; } html #CMD .audio__chart.audio__chart_1 .nav { position: absolute; bottom: 30px; left: 0; width: 100%; } html #CMD .audio__chart.audio__chart_1 .nav .nav-item { position: relative; margin: 0 10px; padding-left: 50px; color: #bababa; font-size: 16px; } html #CMD .audio__chart.audio__chart_1 .nav .nav-item::after { position: absolute; bottom: calc(50% - 2px); left: 0; width: 40px; border-bottom: 2px solid #fff; content: ''; } html #CMD .audio__chart.audio__chart_1 .nav .nav-item--0::after { border-color: #00728a; } html #CMD .audio__chart.audio__chart_1 .nav .nav-item--1::after { border-color: #00f2fe; } html #CMD .audio__chart.audio__chart_2 .title { position: absolute; top: 30px; width: 100%; color: #fff; font-size: 20px; text-align: center; } html #CMD .audio__chart.audio__chart_2 .y { position: absolute; top: 143px; left: 124px; color: #bababa; font-size: 16px; transform: rotate(270deg); } html #CMD .audio__chart.audio__chart_2 .x { position: absolute; right: 172px; bottom: 90px; color: #bababa; font-size: 16px; } html #CMD .audio__chart.audio__chart_2 .red { position: absolute; top: 113px; left: 346px; color: #ff0072; font-size: 16px; } html #CMD .audio__chart.audio__chart_2 .nav { position: absolute; bottom: 44px; left: 0; width: 100%; } html #CMD .audio__chart.audio__chart_2 .nav .nav-item { position: relative; margin: 0 10px; padding-left: 50px; color: #bababa; font-size: 16px; } html #CMD .audio__chart.audio__chart_2 .nav .nav-item::after { position: absolute; bottom: calc(50% - 2px); left: 0; width: 40px; content: ''; } html #CMD .audio__chart.audio__chart_2 .nav .nav-item--0::after { border-bottom: 2px solid #00728a; } html #CMD .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, #ff0072 40%, rgba(255, 255, 255, 0) 0%); } html #CMD .audio__chart.audio__chart_2 .nav .nav-item--2::after { border-bottom: 2px solid #00f2fe; } html #CMD .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%); } @media all and (min-width: 731px) and (max-width: 1279.5px) { html #CMD .audio__chart { margin: 0 auto; box-sizing: border-box; width: 668px; } html #CMD .audio__chart .slick-image { margin-top: 33px; } html #CMD .audio__chart.audio__chart_0 { height: 395px; } html #CMD .audio__chart.audio__chart_0 .slick-image, html #CMD .audio__chart.audio__chart_0 .img-slick { width: 645px; height: 395px; background-size: 99%; } html #CMD .audio__chart.audio__chart_0 .top .topLeft { top: 40px; left: 11.5%; width: 37%; } html #CMD .audio__chart.audio__chart_0 .top .topRight { top: 40px; right: 10%; width: 40%; } html #CMD .audio__chart.audio__chart_0 .left { left: 52%; margin-left: -320px; width: 70px; } html #CMD .audio__chart.audio__chart_0 .left .y1 { top: 25%; } html #CMD .audio__chart.audio__chart_0 .left .y2 { top: 48%; } html #CMD .audio__chart.audio__chart_0 .left .y3 { top: 71%; } html #CMD .audio__chart.audio__chart_0 .num { top: 46%; right: -7px; margin-left: 267px; } html #CMD .audio__chart.audio__chart_1 { height: 498px; } html #CMD .audio__chart.audio__chart_1 .slick-image, html #CMD .audio__chart.audio__chart_1 .img-slick { width: 645px; height: 498px; } html #CMD .audio__chart.audio__chart_1 .title { top: 44px; } html #CMD .audio__chart.audio__chart_1 .y { top: 134px; left: -3px; } html #CMD .audio__chart.audio__chart_1 .x { right: 33px; bottom: 72px; } html #CMD .audio__chart.audio__chart_1 .nav { bottom: 38px; } html #CMD .audio__chart.audio__chart_1 .nav .nav-item { margin: 0 22px; padding-left: 35px; } html #CMD .audio__chart.audio__chart_1 .nav .nav-item::after { width: 25px; } html #CMD .audio__chart.audio__chart_2 { height: 500px; } html #CMD .audio__chart.audio__chart_2 .slick-image, html #CMD .audio__chart.audio__chart_2 .img-slick { width: 645px; height: 500px; } html #CMD .audio__chart.audio__chart_2 .title { top: 35px; } html #CMD .audio__chart.audio__chart_2 .y { top: 140px; left: -8px; } html #CMD .audio__chart.audio__chart_2 .x { right: 35px; bottom: 87px; } html #CMD .audio__chart.audio__chart_2 .red { top: 95px; left: 170px; max-width: 100px; } html #CMD .audio__chart.audio__chart_2 .nav { display: flex; bottom: 30px; left: 55px; width: 645px; } html #CMD .audio__chart.audio__chart_2 .nav .nav-item { display: block; margin: 0 7px; padding-left: 31px; width: 20%; text-align: left; } html #CMD .audio__chart.audio__chart_2 .nav .nav-item::after { top: 10px; bottom: inherit; left: -4px; width: 25px; } html #CMD .audio__chart.audio__chart_2.audio__chart_2 .nav .nav-item--1::after { background-size: 9px 2px; background-image: linear-gradient(to right, #ff0072 57%, rgba(255, 255, 255, 0) 0%); } html #CMD .audio__chart.audio__chart_2.audio__chart_2 .nav .nav-item--3::after { left: 2px; width: 24px; } } @media all and (max-width: 730.5px) { html #CMD .audio__chart { left: 50%; margin-left: -160px; width: 320px; } html #CMD .audio__chart .slick-image { margin-top: 30px; } html #CMD .audio__chart.audio__chart_0 .top .topLeft { top: 53px; left: 17%; width: 110px; font-size: 12px; } html #CMD .audio__chart.audio__chart_0 .top .topRight { top: 53px; right: 16%; width: 110px; font-size: 12px; } html #CMD .audio__chart.audio__chart_0 .left { top: -8px; left: 10px; width: 52px; font-size: 12px; } html #CMD .audio__chart.audio__chart_0 .left .y1 { top: 35%; } html #CMD .audio__chart.audio__chart_0 .left .y3 { top: 66%; } html #CMD .audio__chart.audio__chart_0 .num { right: 0; font-size: 25px; } html #CMD .audio__chart.audio__chart_1 .title { left: 50%; margin-left: -160px; max-width: 320px; font-size: 16px; } html #CMD .audio__chart.audio__chart_1 .y { top: 233px; left: -5px; font-size: 12px; } html #CMD .audio__chart.audio__chart_1 .x { right: 14px; bottom: 88px; font-size: 12px; } html #CMD .audio__chart.audio__chart_1 .nav { display: flex; bottom: 50px; left: 50%; justify-content: center; margin-left: -125px; width: 250px; flex-wrap: wrap; } html #CMD .audio__chart.audio__chart_1 .nav .nav-item { display: block; margin: 0; padding-left: 50px; width: 48%; font-size: 12px; text-align: left; } html #CMD .audio__chart.audio__chart_1 .nav .nav-item::after { top: 7px; bottom: inherit; left: 10px; width: 25px; } html #CMD .audio__chart.audio__chart_2 .title { left: 50%; margin-left: -160px; padding: 0 20px; max-width: 320px; font-size: 16px; } html #CMD .audio__chart.audio__chart_2 .y { top: 146px; left: -20px; font-size: 12px; } html #CMD .audio__chart.audio__chart_2 .x { right: 14px; bottom: 114px; font-size: 12px; } html #CMD .audio__chart.audio__chart_2 .red { left: 82px; width: 70px; font-size: 12px; } html #CMD .audio__chart.audio__chart_2 .nav { display: flex; bottom: 30px; left: 50%; justify-content: center; margin-left: -160px; width: 320px; flex-wrap: wrap; } html #CMD .audio__chart.audio__chart_2 .nav .nav-item { display: block; margin: 0 0 10px; padding-left: 50px; width: 47%; font-size: 12px; text-align: left; } html #CMD .audio__chart.audio__chart_2 .nav .nav-item::after { bottom: calc(50% - 1px); left: 10px; width: 25px; } html #CMD .audio__chart.audio__chart_2.audio__chart_2 .nav .nav-item--1::after { background-size: 9px 2px; background-image: linear-gradient(to right, #ff0072 57%, rgba(255, 255, 255, 0) 0%); } html #CMD .audio__chart.audio__chart_2.audio__chart_2 .nav .nav-item--3::after { left: 12px; width: 23px; background-image: linear-gradient(to right, #bababa 30%, rgba(255, 255, 255, 0) 0%); } } html #CMD .kv__badge { display: block; position: relative; margin-top: 64px; margin-right: auto; margin-left: auto; width: 94%; max-width: 950px; } html #CMD .kv__badge .badge__container { position: relative; text-align: center; } html #CMD .kv__badge .badge__container img { display: inline-block; position: relative; margin: 0 25px; background-size: contain; vertical-align: middle; } html #CMD .kv__badge .badge__container img.icon__badge-creator { width: 98px; height: 130px; } #CMD .kv__badge .icon__badge-creator { background-image: url("../images/icon/common/kv_badge_creator.jpg"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .kv__badge .icon__badge-creator { background-image: url("../images/icon/common/kv_badge_creator.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .kv__badge .icon__badge-creator { background-image: url("../images/icon/common/kv_badge_creator.jpg"); } } html #CMD .kv__badge .badge__container img.icon__badge-oled { width: 98px; height: 130px; } #CMD .kv__badge .icon__badge-oled { background-image: url("../images/icon/common/kv_badge_oled.jpg"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .kv__badge .icon__badge-oled { background-image: url("../images/icon/common/kv_badge_oled.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .kv__badge .icon__badge-oled { background-image: url("../images/icon/common/kv_badge_oled.jpg"); } } html #CMD .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/icon/common/kv_badge_nvidia.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .kv__badge .icon__badge-nvidia { background-image: url("../images/icon/common/kv_badge_nvidia.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .kv__badge .icon__badge-nvidia { background-image: url("../images/icon/common/kv_badge_nvidia.png"); } } html #CMD .kv__badge .badge__container img.icon__badge-timebest2022 { width: 92px; height: 130px; } #CMD .kv__badge .icon__badge-timebest2022 { background-image: url("../images/icon/common/kv_badge_timebest2022.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .kv__badge .icon__badge-timebest2022 { background-image: url("../images/icon/common/kv_badge_timebest2022.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .kv__badge .icon__badge-timebest2022 { background-image: url("../images/icon/common/kv_badge_timebest2022.png"); } } html #CMD .kv__badge .badge__content { position: relative; margin-top: 24px; text-align: center; } html #CMD .kv__badge .badge__content .content-text { display: block; position: relative; margin-bottom: 5px; color: #999; font-size: 0.875rem; text-align: center; line-height: 1.2; } html #CMD .kv__badge .badge__content .content-text:last-child { margin-bottom: 0; } @media all and (min-width: 731px) and (max-width: 1279.5px) { html #CMD .kv__badge { margin-top: 52px; width: 100%; max-width: 720px; } html #CMD .kv__badge .badge__container img { margin: 0 25px; } html #CMD .kv__badge .badge__container img.icon__badge-creator { width: 98px; height: 130px; } html #CMD .kv__badge .badge__container img.icon__badge-oled { width: 98px; height: 130px; } html #CMD .kv__badge .badge__container img.icon__badge-nvidia { left: -7px; margin-right: 5px; width: 192px; height: 90px; } html #CMD .kv__badge .badge__container img.icon__badge-timebest2022 { width: 92px; height: 130px; } html #CMD .kv__badge .badge__content { margin-top: 25px; } html #CMD .kv__badge .badge__content .content-text { font-size: 0.875rem; line-height: 1.2; } } @media all and (max-width: 730.5px) { html #CMD .kv__badge { margin-top: 52px; width: 90%; max-width: 430px; } html #CMD .kv__badge .badge__container img { margin: 0 21px 38px; } html #CMD .kv__badge .badge__container img.icon__badge-creator { width: 80px; height: 106px; } html #CMD .kv__badge .badge__container img.icon__badge-oled { width: 80px; height: 106px; } html #CMD .kv__badge .badge__container img.icon__badge-nvidia { left: -4px; margin-right: 3px; width: 150px; height: 70px; } html #CMD .kv__badge .badge__container img.icon__badge-timebest2022 { width: 75px; height: 106px; } html #CMD .kv__badge .badge__content { margin-top: -3px; } html #CMD .kv__badge .badge__content .content-text { margin-bottom: 8px; font-size: 0.875rem; line-height: 1.2; } } html #CMD .wd__section.section__oled { background: #000; } html #CMD .wd__section.section__oled .wd__content .content__title { color: #fff; } html #CMD .wd__section.section__oled .wd__content .content__info { color: #fff; } html #CMD .wd__section.section__oled .wd__feature__list .wd__feature { vertical-align: top; } html #CMD .wd__section.section__oled .modal-button-container .modal-button { background-color: rgba(255, 255, 255, 0); color: white; border-color: white; } html #CMD .wd__section.section__oled .modal-button-container .modal-button:hover { background-color: rgba(255, 255, 255, 0); color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.6); } html #CMD .wd__section.section__oled .oled_video_control { cursor: pointer; margin-bottom: 36px; width: 36px; height: 36px; border-width: 0; background-color: transparent; } html #CMD .wd__section.section__oled .oled_video_control.pause { background-image: url("../images/icon/icon_pause.svg") ; } @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) { html #CMD .wd__section.section__oled .oled_video_control.pause { background-image: url("../images/icon/icon_pause.svg"); } } html #CMD .wd__section.section__oled .oled_video_control.resume { background-image: url("../images/icon/icon_play.svg") ; } @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) { html #CMD .wd__section.section__oled .oled_video_control.resume { background-image: url("../images/icon/icon_play.svg"); } } html #CMD .wd__section.section__oled .beer-handle { transform: translateX(-31px); } html #CMD .wd__section.section__oled .beer-handle::after { transform: translateX(1px); } html #CMD .wd__section.section__oled .beer-handle::before { width: 2px; } html #CMD .section__oled_menu { overflow: hidden; z-index: 10; margin-top: -50px; padding-top: 130px; padding-bottom: 87px; } html #CMD .section__oled_menu .wd__content { max-width: 1000px; } html #CMD .section__oled_menu .product_list { padding-top: 56px; background-color: #000; } #CMD .section__oled_menu .product_list .s2-1 .img { background-image: url("../images/large/1x/oled/s2_1.jpg"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__oled_menu .product_list .s2-1 .img { background-image: url("../images/large/2x/oled/s2_1.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__oled_menu .product_list .s2-1 .img { background-image: url("../images/large/2x/oled/s2_1.jpg"); } } #CMD .section__oled_menu .product_list .s2-2 .img { background-image: url("../images/large/1x/oled/s2_2.jpg"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__oled_menu .product_list .s2-2 .img { background-image: url("../images/large/2x/oled/s2_2.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__oled_menu .product_list .s2-2 .img { background-image: url("../images/large/2x/oled/s2_2.jpg"); } } #CMD .section__oled_menu .product_list .s2-3 .img { background-image: url("../images/large/1x/oled/s2_3.jpg"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__oled_menu .product_list .s2-3 .img { background-image: url("../images/large/2x/oled/s2_3.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__oled_menu .product_list .s2-3 .img { background-image: url("../images/large/2x/oled/s2_3.jpg"); } } #CMD .section__oled_menu .product_list .s2-4 .img { background-image: url("../images/large/1x/oled/s2_4.jpg"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__oled_menu .product_list .s2-4 .img { background-image: url("../images/large/2x/oled/s2_4.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__oled_menu .product_list .s2-4 .img { background-image: url("../images/large/2x/oled/s2_4.jpg"); } } #CMD .section__oled_menu .product_list .s2-5 .img { background-image: url("../images/large/1x/oled/s2_5.jpg"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__oled_menu .product_list .s2-5 .img { background-image: url("../images/large/2x/oled/s2_5.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__oled_menu .product_list .s2-5 .img { background-image: url("../images/large/2x/oled/s2_5.jpg"); } } html #CMD .kv__table { position: relative; left: 50%; margin-top: 102px; margin-left: -21px; transform: translateX(-50%); } html #CMD .kv__table .table-nav { display: none; } html #CMD .kv__table .table-container { position: relative; font-size: 0; } html #CMD .kv__table .table-container .table-item { display: inline-block; position: relative; padding: 38px 30px 25px; box-sizing: initial; font-size: 0; vertical-align: top; } html #CMD .kv__table .table-container .table-item .item-title { position: relative; overflow: hidden; margin-bottom: 16px; padding-bottom: 34px; box-sizing: initial; height: 1.2em; text-align: left; text-overflow: ellipsis; white-space: nowrap; } html #CMD .kv__table .table-container .table-item .item-title::after { position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; content: ''; } html #CMD .kv__table .table-container .table-item .item-rows { position: relative; margin-top: -14px; } html #CMD .kv__table .table-container .table-item .item-rows .row-item { position: relative; font-size: 1.25rem; text-align: left; } html #CMD .kv__table .table-container .table-item .item-rows .row-item .item-text { position: absolute; top: 50%; padding: 16px 0; transform: translateY(-50%); } html #CMD .kv__table .table-container .table-item .item-rows .row-item::after { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #666; content: ''; } html #CMD .kv__table .table-container .table-item .item-rows .row-item:last-child::after { display: none; } html #CMD .kv__table .table-container .table-item .item-rows .row-item span { display: block; position: relative; margin: 3px 0; } html #CMD .kv__table .table-container .table-item.item-name { min-width: 264px; } html #CMD .kv__table .table-container .table-item.item-name .item-title { max-width: 350px; color: #666; font-size: 1.875rem; } html #CMD .kv__table .table-container .table-item.item-name .item-title::after { background-color: #666; } html #CMD .kv__table .table-container .table-item.item-name .item-rows .row-item { color: #aaa; text-transform: uppercase; } html #CMD .kv__table .table-container .table-item.item-main { z-index: 2; min-width: 440px; } html #CMD .kv__table .table-container .table-item.item-main::before { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; border-radius: 5px; background-color: #2c2c31; content: ''; box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3); } html #CMD .kv__table .table-container .table-item.item-main .item-title { max-width: 600px; font-size: 1.875rem; background: linear-gradient(to right, #f29759, #ffeb7c, #80c47d, #56beb8, #319fc5, #668cc8, #8e66a9, #b971ac, #d96b9a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } html #CMD .kv__table .table-container .table-item.item-main .item-title::after { background: linear-gradient(to right, #f29759, #ffeb7c, #80c47d, #56beb8, #319fc5, #668cc8, #8e66a9, #b971ac, #d96b9a); } html #CMD .kv__table .table-container .table-item.item-main .item-rows .row-item { color: #fff; } html #CMD .kv__table .table-container .table-item.item-sub { z-index: 1; min-width: 296px; } html #CMD .kv__table .table-container .table-item.item-sub::before { position: absolute; bottom: 2%; left: -2%; width: 104%; height: 96%; border-radius: 5px; background-color: #212126; content: ''; } html #CMD .kv__table .table-container .table-item.item-sub .item-title { padding-top: 6px; padding-bottom: 36px; max-width: 400px; color: #fff; font-size: 1.5rem; } html #CMD .kv__table .table-container .table-item.item-sub .item-title::after { background-color: #fff; } html #CMD .kv__table .table-container .table-item.item-sub .item-rows .row-item { color: #aaa; } .ie #CMD .section__oled_menu .kv__table .table-container .table-item.item-main .item-title { -webkit-text-fill-color: initial !important; background-image: none !important; color: #ffe50e !important; } .ie #CMD .section__oled_menu .kv__table .table-container .table-item.item-main .item-title::after { background: #ffe50e !important; } html #CMD .section__oled_color { overflow: hidden; margin-top: -1px; padding-top: 130px; padding-bottom: 77px; } html #CMD .section__oled_color .wd__content { max-width: 940px; } html #CMD .section__oled_color .bottom-content .content__info { margin-top: 87px; } html #CMD .section__oled_color .img__icon4 { margin: 0 auto; margin-bottom: 8px; width: 60px; height: 83px; } #CMD .section__oled_color .img__icon4 { background-image: url("../images/large/1x/oled/icon/s3/icon_pantone.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__oled_color .img__icon4 { background-image: url("../images/large/2x/oled/icon/s3/icon_pantone.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__oled_color .img__icon4 { background-image: url("../images/large/2x/oled/icon/s3/icon_pantone.png"); } } html #CMD .section__oled_color .compare__animation { position: relative; margin-top: 35px; } html #CMD .section__oled_color .compare__animation .beer-slider { display: block; position: relative; overflow: hidden; left: 50%; margin: 0; margin-left: -640px; box-sizing: border-box; width: 1280px; height: 606px; font-size: 0; border: 1px solid #484848; } html #CMD .section__oled_color .compare__animation .beer-slider .img { position: absolute; width: 1280px; height: 606px; } #CMD .section__oled_color .img__before { background-image: url("../images/large/1x/oled/animation/s3/before.jpg"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__oled_color .img__before { background-image: url("../images/large/2x/oled/animation/s3/before.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__oled_color .img__before { background-image: url("../images/large/2x/oled/animation/s3/before.jpg"); } } #CMD .section__oled_color .img__after { background-image: url("../images/large/1x/oled/animation/s3/after.jpg"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__oled_color .img__after { background-image: url("../images/large/2x/oled/animation/s3/after.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__oled_color .img__after { background-image: url("../images/large/2x/oled/animation/s3/after.jpg"); } } html #CMD .section__oled_color .compare__animation .beer-slider .compare__text > span { display: inline-block; position: absolute; z-index: 100; opacity: 1; color: #fff; font-size: 1.25rem; transition: opacity 500ms; } html #CMD .section__oled_color .compare__animation .beer-slider .compare__text > span.disappear { opacity: 0; } html #CMD .section__oled_color .compare__animation .beer-slider .compare__text > span.textLeft1 { top: 22px; left: 27px; font-size: 2.25rem; } html #CMD .section__oled_color .compare__animation .beer-slider .compare__text > span.textLeft2 { top: 70px; left: 27px; } html #CMD .section__oled_color .compare__animation .beer-slider .compare__text > span.textRight1 { top: 22px; right: 27px; font-size: 2.25rem; } html #CMD .section__oled_color .compare__animation .beer-slider .compare__text > span.textRight2 { top: 70px; right: 27px; } html #CMD .section__oled_color .chart-container { position: relative; left: 50%; margin-top: 87px; margin-left: -348px; width: 700px; } html #CMD .section__oled_color .chart-container .img__main-1 { position: absolute; top: 0; left: 0; width: 700px; height: 240px; } #CMD .section__oled_color .img__main-1 { background-image: url("../images/large/1x/oled/inner/s7/01-bg.jpg"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__oled_color .img__main-1 { background-image: url("../images/large/2x/oled/inner/s7/01-bg.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__oled_color .img__main-1 { background-image: url("../images/large/2x/oled/inner/s7/01-bg.jpg"); } } html #CMD .section__oled_color .chart-container .chart-content { position: relative; height: 348px; } html #CMD .section__oled_color .chart-container .chart-content .content-row-x .row-item { top: 248px; } html #CMD .section__oled_color .chart-container .chart-content .content-row-x .row-item.item-0 { width: 90px; text-align: left; } html #CMD .section__oled_color .chart-container .chart-content .content-row-x .row-item.item-0 { margin-left: -317px; } html #CMD .section__oled_color .chart-container .chart-content .content-row-x .row-item.item-1 { margin-left: -235px; } html #CMD .section__oled_color .chart-container .chart-content .content-row-x .row-item.item-2 { margin-left: -90px; } html #CMD .section__oled_color .chart-container .chart-content .content-row-x .row-item.item-3 { margin-left: 58px; } html #CMD .section__oled_color .chart-container .chart-content .content-row-x .row-item.item-4 { margin-left: 203px; } html #CMD .section__oled_color .chart-container .chart-content .content-row-y .row-item { left: 32px; } html #CMD .section__oled_color .chart-container .chart-content .content-row-y .row-item.item-0 { top: 1px; } html #CMD .section__oled_color .chart-container .chart-content .content-row-y .row-item.item-1 { top: 98px; } html #CMD .section__oled_color .chart-container .chart-content .content-value .row-item:not(.item-0) > .item-info > .info-name { color: transparent; } html #CMD .section__oled_color .chart-container .chart-content .content-value .item-0 { top: 29px; left: 114px; } html #CMD .section__oled_color .chart-container .chart-content .content-value .item-1 { top: 40px; left: 246px; } html #CMD .section__oled_color .chart-container .chart-content .content-value .item-2 { top: 93px; left: 380px; } html #CMD .section__oled_color .chart-container .chart-content .content-value .item-3 { top: 200px; left: 520px; } html #CMD .section__oled_color .chart-disclaimer { margin-top: -40px; } html #CMD .section__oled_color .chart-brightness { position: relative; margin: 66px auto 0; padding-top: 40px; width: 1204px; } html #CMD .section__oled_color .chart-brightness .img__brightness { position: relative; width: 1204px; height: 364px; } #CMD .section__oled_color .chart-brightness .img__brightness { background-image: url("../images/large/1x/oled/icon/s7/chart.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__oled_color .chart-brightness .img__brightness { background-image: url("../images/large/2x/oled/icon/s7/chart.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__oled_color .chart-brightness .img__brightness { background-image: url("../images/large/2x/oled/icon/s7/chart.png"); } } html #CMD .section__oled_color .chart-brightness .chart-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } html #CMD .section__oled_color .chart-brightness .chart-content .chart-name { position: absolute; bottom: 344px; left: 50%; margin-left: 5px; padding: 0 28px; color: #b5b6b6; font-size: 1.25rem; background: #000; transform: translateX(-50%); } html #CMD .section__oled_color .chart-brightness .chart-content .arrow { position: absolute; bottom: 372px; color: #b5b6b6; font-size: 1.25rem; } html #CMD .section__oled_color .chart-brightness .chart-content .arrow.arrow-left { left: 18px; } html #CMD .section__oled_color .chart-brightness .chart-content .arrow.arrow-right { right: 6px; } html #CMD .section__oled_color .chart-content .content-row.content-row-x .row-item .item-info .info-name { font-size: 1.125rem; } html #CMD .section__oled_color .chart-content .content-row.content-value .row-item .item-info .info-name { font-size: 1.125rem; } html #CMD .section__oled_eyeCare { overflow: hidden; margin-top: -1px; padding-top: 130px; padding-bottom: 95px; } html #CMD .section__oled_eyeCare .wd__content { max-width: 900px; } html #CMD .section__oled_eyeCare .wd__content .content__info { width: 95%; } html #CMD .section__oled_eyeCare .wd__feature__list .wd__feature { vertical-align: bottom !important; } html #CMD .section__oled_eyeCare .wd__feature__list .wd__feature.feature-2 .wd__feature__describe, html #CMD .section__oled_eyeCare .wd__feature__list .wd__feature.feature-3 .wd__feature__describe { display: none; } html #CMD .section__oled_eyeCare .img__icon2 { top: 5px; margin-bottom: 4px; width: 171px; height: 90px; } #CMD .section__oled_eyeCare .img__icon2 { background-image: url("../images/large/1x/oled/icon/s5/icon_tuv.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__oled_eyeCare .img__icon2 { background-image: url("../images/large/2x/oled/icon/s5/icon_tuv.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__oled_eyeCare .img__icon2 { background-image: url("../images/large/2x/oled/icon/s5/icon_tuv.png"); } } html #CMD .section__oled_eyeCare .img__icon3 { top: 5px; margin-bottom: 4px; width: 154px; height: 90px; } #CMD .section__oled_eyeCare .img__icon3 { background-image: url("../images/large/1x/oled/icon/s5/icon_sgs.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__oled_eyeCare .img__icon3 { background-image: url("../images/large/2x/oled/icon/s5/icon_sgs.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__oled_eyeCare .img__icon3 { background-image: url("../images/large/2x/oled/icon/s5/icon_sgs.png"); } } html #CMD .section__oled_eyeCare .img__oled_eyeCare { position: relative; left: 50%; margin-left: -481px; width: 962px; height: 442px; } #CMD .section__oled_eyeCare .img__oled_eyeCare { background-image: url("../images/large/1x/oled/s5.jpg"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__oled_eyeCare .img__oled_eyeCare { background-image: url("../images/large/2x/oled/s5.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__oled_eyeCare .img__oled_eyeCare { background-image: url("../images/large/2x/oled/s5.jpg"); } } html #CMD .section__oled_eyeCare .img__oled_eyeCare .img__lcd { position: absolute; opacity: 1; width: 962px; height: 442px; } #CMD .section__oled_eyeCare .img__lcd { background-image: url("../images/large/1x/oled/animation/s5/img_lcd.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__oled_eyeCare .img__lcd { background-image: url("../images/large/2x/oled/animation/s5/img_lcd.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__oled_eyeCare .img__lcd { background-image: url("../images/large/2x/oled/animation/s5/img_lcd.png"); } } html #CMD .section__oled_eyeCare .img__oled_eyeCare .img__oled { position: absolute; opacity: 0; width: 962px; height: 442px; } #CMD .section__oled_eyeCare .img__oled { background-image: url("../images/large/1x/oled/animation/s5/img_oled.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__oled_eyeCare .img__oled { background-image: url("../images/large/2x/oled/animation/s5/img_oled.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__oled_eyeCare .img__oled { background-image: url("../images/large/2x/oled/animation/s5/img_oled.png"); } } html #CMD .section__oled_eyeCare .img__oled_eyeCare .img__bulelight { position: absolute; left: 50%; opacity: 0; margin-top: -6px; margin-left: -262px; width: 82px; height: 382px; background: linear-gradient(0deg, #2078b6 0%, rgba(32, 120, 182, 0) 100%); } html #CMD .section__oled_eyeCare .img__oled_eyeCare .img__line { position: absolute; top: -9px; opacity: 0; width: 962px; height: 442px; } #CMD .section__oled_eyeCare .img__line { background-image: url("../images/large/1x/oled/animation/s5/img_line.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__oled_eyeCare .img__line { background-image: url("../images/large/2x/oled/animation/s5/img_line.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__oled_eyeCare .img__line { background-image: url("../images/large/2x/oled/animation/s5/img_line.png"); } } html #CMD .section__oled_eyeCare .img__oled_eyeCare .img__arrow { position: absolute; top: 113px; left: 265px; opacity: 0; width: 60px; height: 60px; transform: translateX(-50px); } #CMD .section__oled_eyeCare .img__arrow { background-image: url("../images/large/1x/oled/animation/s5/img_arrow.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__oled_eyeCare .img__arrow { background-image: url("../images/large/2x/oled/animation/s5/img_arrow.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__oled_eyeCare .img__arrow { background-image: url("../images/large/2x/oled/animation/s5/img_arrow.png"); } } html #CMD .section__oled_eyeCare .img__oled_eyeCare span.chart_text { display: inline-block; position: absolute; z-index: 100; opacity: 0; color: #b3b3b3; } html #CMD .section__oled_eyeCare .img__oled_eyeCare span.chart_text.text1 { top: 25px; left: 197px; line-height: 1.2; width: 124px; color: #2487d8; font-size: 1.0625rem; text-align: center; } html #CMD .section__oled_eyeCare .img__oled_eyeCare span.chart_text.text2 { top: 260px; left: 54px; width: 110px; font-size: 1rem; text-align: right; transform: translateX(50px); } html #CMD .section__oled_eyeCare .img__oled_eyeCare span.chart_text.text3 { top: 305px; left: 54px; width: 110px; font-size: 1rem; text-align: right; transform: translateX(50px); } html #CMD .section__oled_eyeCare .img__oled_eyeCare span.chart_text.text4 { top: 92px; left: 341px; width: 235px; font-size: 1.5625rem; line-height: 1.2; text-align: left; transform: translateX(-50px); } html #CMD .section__oled_eyeCare .img__oled_eyeCare.active .img__lcd { opacity: 0; transition: opacity 500ms 1500ms linear; } html #CMD .section__oled_eyeCare .img__oled_eyeCare.active .img__oled { opacity: 1; transition: opacity 1200ms 1000ms linear; } html #CMD .section__oled_eyeCare .img__oled_eyeCare.active .img__bulelight { opacity: 1; transition: height 2000ms 0ms ease; animation: lightBreath 1500ms 1000ms linear forwards infinite; } html #CMD .section__oled_eyeCare .img__oled_eyeCare.active .img__line { opacity: 1; transition: opacity 1000ms 1500ms ease; } html #CMD .section__oled_eyeCare .img__oled_eyeCare.active .img__arrow { opacity: 1; transform: translateX(0); transition: opacity 1000ms 1800ms ease, transform 1000ms 1800ms ease; } html #CMD .section__oled_eyeCare .img__oled_eyeCare.active span { opacity: 1; } html #CMD .section__oled_eyeCare .img__oled_eyeCare.active span.text2 { transform: translateX(0); transition: opacity 1000ms 2200ms ease, transform 1000ms 2200ms ease; } html #CMD .section__oled_eyeCare .img__oled_eyeCare.active span.text3 { transform: translateX(0); transition: opacity 1000ms 2200ms ease, transform 1000ms 2200ms ease; } html #CMD .section__oled_eyeCare .img__oled_eyeCare.active span.text4 { transform: translateX(0); transition: opacity 1000ms 1800ms ease, transform 1000ms 1800ms ease; } @keyframes lightBreath { 0% { opacity: 1; } 25% { opacity: 0.75; } 50% { opacity: 0.5; } 75% { opacity: 0.75; } 100% { opacity: 1; } } html #CMD .section__oled_eyeCare .modal-button-container { margin-top: 32px; } html #CMD .section__oled_childEyeCare { overflow: hidden; z-index: 1; margin-top: -1px; padding-top: 130px; padding-bottom: 87px; } html #CMD .section__oled_childEyeCare .wd__content { left: 50%; margin-left: -504px; width: 460px; } html #CMD .section__oled_childEyeCare .wd__content .content__info { min-height: 420px; } html #CMD .section__oled_childEyeCare .img__oled_childEyeCare { position: relative; left: 50%; margin-top: -749px; margin-left: -108px; width: 836px; height: 804px; } #CMD .section__oled_childEyeCare .img__oled_childEyeCare { background-image: url("../images/large/1x/oled/s6.jpg"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__oled_childEyeCare .img__oled_childEyeCare { background-image: url("../images/large/2x/oled/s6.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__oled_childEyeCare .img__oled_childEyeCare { background-image: url("../images/large/2x/oled/s6.jpg"); } } html #CMD .section__oled_childEyeCare .img__chart { position: relative; left: 50%; margin-top: 18px; margin-left: -473px; padding-top: 60px; box-sizing: border-box; width: 974px; height: 400px; } html #CMD .section__oled_childEyeCare .img__chart .img__chart_bg { width: 100%; height: 100%; background-size: auto 340px; } #CMD .section__oled_childEyeCare .img__chart_bg { background-image: url("../images/large/1x/oled/inner/s6/01-bg.jpg"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__oled_childEyeCare .img__chart_bg { background-image: url("../images/large/2x/oled/inner/s6/01-bg.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__oled_childEyeCare .img__chart_bg { background-image: url("../images/large/2x/oled/inner/s6/01-bg.jpg"); } } html #CMD .section__oled_childEyeCare .img__chart .chart-content { position: absolute; top: 90px; left: 50%; margin-left: -300px; width: 600px; height: 100%; } html #CMD .section__oled_childEyeCare .img__chart .chart-content .chart-name { position: absolute; left: 50%; width: 180px; color: #b3b3b3; font-size: 1rem; line-height: 1.2; } html #CMD .section__oled_childEyeCare .img__chart .chart-content .chart-name.name-x { top: -60px; margin-left: -355px; width: 130px; text-align: left; } html #CMD .section__oled_childEyeCare .img__chart .chart-content .chart-name.name-y { top: 340px; margin-left: 150px; text-align: right; } html #CMD .section__oled_childEyeCare .img__chart .chart-content .chart-hl { position: absolute; bottom: 364px; left: 50%; margin-left: -158px; width: 70px; color: #2487d8; font-size: 1rem; text-align: center; } html #CMD .section__oled_childEyeCare .img__chart .line-content { position: absolute; width: 100%; height: 100%; } html #CMD .section__oled_childEyeCare .img__chart .line-content .line { position: absolute; right: -31px; width: 150px; font-size: 1.5rem; text-align: right; } html #CMD .section__oled_childEyeCare .img__chart .line-content .line.line-0 { bottom: 365px; color: #e0c79d; } html #CMD .section__oled_childEyeCare .img__chart .line-content .line.line-1 { top: 64px; color: #977a4f; } html #CMD .section__oled_childEyeCare .contnet-from { position: relative; margin-top: 6px; margin-right: auto; margin-left: auto; width: 600px; text-align: center; } html #CMD .section__oled_childEyeCare .contnet-from .from-text { position: relative; color: #6d6d6d; font-size: 1rem; line-height: 1.2; } html #CMD .section__oled_childEyeCare .contnet-link { display: inline-block; position: relative; cursor: pointer; margin-top: 4px; margin-right: auto; margin-left: auto; max-width: 370px; text-align: center; transition: opacity 250ms; line-height: 1.2; } html #CMD .section__oled_childEyeCare .contnet-link .link-text { position: relative; color: #6d6d6d; font-size: 0.75rem; line-height: 1.2; } html #CMD .section__oled_childEyeCare .contnet-link:hover { opacity: 0.7; } html #CMD .section__oled_3Dcolor-2 { overflow: hidden; margin-top: -1px; padding-top: 130px; padding-bottom: 87px; } html #CMD .section__oled_3Dcolor-2 .wd__content.bottom-content .content__title { font-size: 2.5rem; text-align: center; } html #CMD .section__oled_3Dcolor-2 .wd__feature__list .img__icon { background-size: contain; } html #CMD .section__oled_3Dcolor-2 .wd__feature__list .feature-7 .wd__feature__describe__top { display: none; } html #CMD .section__oled_3Dcolor-2 .wd__feature__list .feature-7 .img__icon7 { margin-top: -11px; height: 120px; } #CMD .section__oled_3Dcolor-2 .img__icon7 { background-image: url("../images/large/1x/icon/s5/icon_oled.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__oled_3Dcolor-2 .img__icon7 { background-image: url("../images/large/2x/icon/s5/icon_oled.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__oled_3Dcolor-2 .img__icon7 { background-image: url("../images/large/2x/icon/s5/icon_oled.png"); } } html #CMD .section__oled_3Dcolor-2 .compare__animation { position: relative; margin-top: 13px; } html #CMD .section__oled_3Dcolor-2 .compare__animation .beer-slider { display: block; position: relative; overflow: hidden; left: 50%; margin: 0; margin-left: -640px; box-sizing: border-box; width: 1280px; height: 606px; font-size: 0; border: 1px solid #484848; } html #CMD .section__oled_3Dcolor-2 .compare__animation .beer-slider .img { position: absolute; width: 1280px; height: 606px; } #CMD .section__oled_3Dcolor-2 .img__before { background-image: url("../images/large/1x/oled/animation/s7/before.jpg"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__oled_3Dcolor-2 .img__before { background-image: url("../images/large/2x/oled/animation/s7/before.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__oled_3Dcolor-2 .img__before { background-image: url("../images/large/2x/oled/animation/s7/before.jpg"); } } #CMD .section__oled_3Dcolor-2 .img__after { background-image: url("../images/large/1x/oled/animation/s7/after.jpg"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__oled_3Dcolor-2 .img__after { background-image: url("../images/large/2x/oled/animation/s7/after.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__oled_3Dcolor-2 .img__after { background-image: url("../images/large/2x/oled/animation/s7/after.jpg"); } } html #CMD .section__oled_3Dcolor-2 .compare__animation .beer-slider .compare__text > span { display: inline-block; position: absolute; z-index: 100; opacity: 1; color: #fff; font-size: 1.25rem; transition: opacity 500ms; } html #CMD .section__oled_3Dcolor-2 .compare__animation .beer-slider .compare__text > span.disappear { opacity: 0; } html #CMD .section__oled_3Dcolor-2 .compare__animation .beer-slider .compare__text > span.textLeft1 { top: 22px; left: 27px; font-size: 2.25rem; } html #CMD .section__oled_3Dcolor-2 .compare__animation .beer-slider .compare__text > span.textLeft2 { top: 68px; left: 27px; } html #CMD .section__oled_3Dcolor-2 .compare__animation .beer-slider .compare__text > span.textRight1 { top: 22px; right: 27px; font-size: 2.25rem; } html #CMD .section__oled_3Dcolor-2 .compare__animation .beer-slider .compare__text > span.textRight2 { top: 68px; right: 27px; } html #CMD .section__oled_3Dcolor-2 .chart-container { position: relative; left: 50%; margin-top: 77px; margin-left: -348px; width: 700px; } html #CMD .section__oled_3Dcolor-2 .chart-container .img__main { position: absolute; top: 0; left: 0; width: 700px; height: 240px; } #CMD .section__oled_3Dcolor-2 .img__main { background-image: url("../images/large/1x/oled/inner/s7/02-bg.jpg"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__oled_3Dcolor-2 .img__main { background-image: url("../images/large/2x/oled/inner/s7/02-bg.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__oled_3Dcolor-2 .img__main { background-image: url("../images/large/2x/oled/inner/s7/02-bg.jpg"); } } html #CMD .section__oled_3Dcolor-2 .chart-container .chart-content { position: relative; height: 365px; } html #CMD .section__oled_3Dcolor-2 .chart-container .chart-content .content-row-x .row-item { top: 243px; } html #CMD .section__oled_3Dcolor-2 .chart-container .chart-content .content-row-x .row-item.item-0 { margin-left: -340px; } html #CMD .section__oled_3Dcolor-2 .chart-container .chart-content .content-row-x .row-item.item-1 { margin-left: -213px; } html #CMD .section__oled_3Dcolor-2 .chart-container .chart-content .content-row-x .row-item.item-2 { margin-left: -66px; } html #CMD .section__oled_3Dcolor-2 .chart-container .chart-content .content-row-x .row-item.item-3 { margin-left: 81px; } html #CMD .section__oled_3Dcolor-2 .chart-container .chart-content .content-row-x .row-item.item-4 { margin-left: 228px; } html #CMD .section__oled_3Dcolor-2 .chart-container .chart-content .content-row-y .row-item { left: 33px; } html #CMD .section__oled_3Dcolor-2 .chart-container .chart-content .content-row-y .row-item.item-0 { top: -6px; } html #CMD .section__oled_3Dcolor-2 .chart-container .chart-content .content-row-y .row-item.item-1 { top: 165px; } html #CMD .section__oled_3Dcolor-2 .chart-container .chart-content .content-row-y .row-item.item-0 .item-container .data-0 { top: -2px; left: 136px; } html #CMD .section__oled_3Dcolor-2 .chart-container .chart-content .content-row-y .row-item.item-1 .item-container .data-0 { top: -32px; left: 101px; text-align: right; } html #CMD .section__oled_3Dcolor-2 .chart-container .chart-content .content-row-y .row-item.item-1 .item-container .data-1 { top: -50px; left: 239px; text-align: right; } html #CMD .section__oled_3Dcolor-2 .chart-container .chart-content .content-row-y .row-item.item-1 .item-container .data-2 { top: -140px; left: 411px; text-align: center; } html #CMD .section__oled_3Dcolor-2 .chart-container .chart-content .content-row-y .row-item.item-1 .item-container .data-3 { top: -140px; left: 558px; text-align: center; } html #CMD .section__oled_3Dcolor-2 .chart-disclaimer { margin-top: -40px; } html #CMD .section__oled_contrast { overflow: hidden; margin-top: -1px; padding-top: 130px; padding-bottom: 77px; } html #CMD .section__oled_contrast .wd__content { max-width: 949px; } html #CMD .section__oled_contrast .wd__content .content__info { width: 95%; } html #CMD .section__oled_contrast .feature-4 { width: 85%; } html #CMD .section__oled_contrast .img__icon4 { left: 50%; margin-top: 7px; margin-left: -58px; width: 116px; height: 172px; } #CMD .section__oled_contrast .img__icon4 { background-image: url("../images/large/1x/oled/icon/s8/icon_vesa.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__oled_contrast .img__icon4 { background-image: url("../images/large/2x/oled/icon/s8/icon_vesa.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__oled_contrast .img__icon4 { background-image: url("../images/large/2x/oled/icon/s8/icon_vesa.png"); } } html #CMD .section__oled_contrast .compare__animation { position: relative; margin-top: 11px; } html #CMD .section__oled_contrast .compare__animation .beer-slider { display: block; position: relative; overflow: hidden; left: 50%; margin: 0; margin-left: -640px; box-sizing: border-box; width: 1280px; height: 606px; font-size: 0; border: 1px solid #484848; } html #CMD .section__oled_contrast .compare__animation .beer-slider .img { position: absolute; width: 1280px; height: 606px; } #CMD .section__oled_contrast .img__before { background-image: url("../images/large/1x/oled/animation/s8/before.jpg"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__oled_contrast .img__before { background-image: url("../images/large/2x/oled/animation/s8/before.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__oled_contrast .img__before { background-image: url("../images/large/2x/oled/animation/s8/before.jpg"); } } #CMD .section__oled_contrast .img__after { background-image: url("../images/large/1x/oled/animation/s8/after.jpg"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__oled_contrast .img__after { background-image: url("../images/large/2x/oled/animation/s8/after.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__oled_contrast .img__after { background-image: url("../images/large/2x/oled/animation/s8/after.jpg"); } } html #CMD .section__oled_contrast .compare__animation .beer-slider .compare__text > span { display: inline-block; position: absolute; z-index: 100; opacity: 1; color: #fff; font-size: 1.25rem; transition: opacity 500ms; } html #CMD .section__oled_contrast .compare__animation .beer-slider .compare__text > span.disappear { opacity: 0; } html #CMD .section__oled_contrast .compare__animation .beer-slider .compare__text > span.textLeft1 { top: 22px; left: 28px; font-size: 2.25rem; } html #CMD .section__oled_contrast .compare__animation .beer-slider .compare__text > span.textRight1 { top: 23px; right: 30px; font-size: 2.25rem; } html #CMD .section__oled_contrast .modal-button-container { margin-top: 64px; } html #CMD .section__oled_responseTime { overflow: hidden; margin-top: 0; padding-top: 130px; padding-bottom: 135px; } html #CMD .section__oled_responseTime .wd__content { max-width: 840px; } html #CMD .section__oled_responseTime .wd__content .content__slogan { max-width: 730px; } html #CMD .section__oled_responseTime .wd__content .content__info { width: 95%; } html #CMD .section__oled_responseTime .compare_content { margin-top: 35px; } html #CMD .section__oled_responseTime .compare_content .img__compare__left, html #CMD .section__oled_responseTime .compare_content .img__compare__right { display: inline-block; position: relative; margin: 0 3px; width: 620px; height: 348px; background-size: cover; } html #CMD .section__oled_responseTime .compare_content .img__compare__left .img.compare__left, html #CMD .section__oled_responseTime .compare_content .img__compare__left .img.compare__right, html #CMD .section__oled_responseTime .compare_content .img__compare__right .img.compare__left, html #CMD .section__oled_responseTime .compare_content .img__compare__right .img.compare__right { display: inline-block; position: absolute; z-index: 1; top: 0; left: 0; width: 620px; height: 348px; background-size: cover; } html #CMD .section__oled_responseTime .compare_content .img__compare__left video, html #CMD .section__oled_responseTime .compare_content .img__compare__right video { position: relative; width: 620px; height: 348px; } html #CMD .section__oled_responseTime .compare_content .img__compare__left .text-describe, html #CMD .section__oled_responseTime .compare_content .img__compare__right .text-describe { position: absolute; z-index: 100; bottom: 24px; left: 50%; margin-left: -220px; width: 440px; color: #fff; font-size: 2rem; } html #CMD .section__oled_responseTime .modal-button-container { margin-top: 64px; } html #CMD .section__oled_responseTime .chart-container { display: inline-block; position: relative; margin-top: -35px; } html #CMD .section__oled_responseTime .chart-container .chart-img .img__chart-bg { position: relative; left: 50%; margin-left: -500px; width: 1000px; height: 416px; font-size: 0; } #CMD .section__oled_responseTime .img__chart-bg { background-image: url("../images/large/1x/oled/s9_chart.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__oled_responseTime .img__chart-bg { background-image: url("../images/large/2x/oled/s9_chart.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__oled_responseTime .img__chart-bg { background-image: url("../images/large/2x/oled/s9_chart.png"); } } html #CMD .section__oled_responseTime .chart-container .chart-text span { position: absolute; left: 50%; } html #CMD .section__oled_responseTime .chart-container .chart-text .text-1, html #CMD .section__oled_responseTime .chart-container .chart-text .text-2 { bottom: 340px; width: 300px; color: #b3b3b3; font-size: 16px; } html #CMD .section__oled_responseTime .chart-container .chart-text .text-1 { margin-left: -281px; text-align: left; } html #CMD .section__oled_responseTime .chart-container .chart-text .text-2 { margin-left: 27px; text-align: right; } html #CMD .section__oled_responseTime .chart-container .chart-text .text-3 { bottom: 272px; margin-left: -112px; width: 320px; color: #25aae5; font-size: 25px; text-align: center; } html #CMD .section__oled_responseTime .chart-container .chart-text .text-3 .text-small { display: inline-block; position: relative; left: 0; color: #25aae5; font-size: 16px; } html #CMD .section__oled_responseTime .compare_content .img__compare__left::after, html #CMD .section__oled_responseTime .compare_content .img__compare__right::after { display: block; position: absolute; z-index: 10; bottom: 0; left: 0; content: ''; width: 100%; height: 180px; background: linear-gradient(to top, #000, transparent 80%); } html #CMD .inner-view { background: #000; } html #CMD .inner-view .inner-view-container { position: relative; margin-right: auto; margin-left: auto; } html #CMD .inner-view .inner-view-container .inner-modal { padding-bottom: 0; } html #CMD .inner-view .inner-view-container .section__oled .wd__content { padding-left: 0; margin-left: auto; margin-right: auto; } html #CMD .inner-view .inner-view-container .section__oled .wd__content .content__title { color: #fff; font-size: 2.125rem; } html #CMD .inner-view .inner-view-container .section__oled .wd__content .content__info { color: #fff; margin-top: 16px; } html #CMD .inner-view .inner-view-container .section__oled .wd__content .content__link { linkColor: #25aae5; } html #CMD .inner-view .inner-view-container .section__oled .wd__content .content__link { color: #25aae5; } html #CMD .inner-view .inner-view-container .section__oled .wd__content .content__link *, html #CMD .inner-view .inner-view-container .section__oled .wd__content .content__link span { color: #25aae5; } html #CMD .inner-view .inner-view-container .section__oled .wd__content .content__link::after { color: #25aae5; } html #CMD .inner-view .inner-view-container .section__oled .wd__content .content__link:link { color: #25aae5; } html #CMD .inner-view .inner-view-container .section__oled .wd__content .content__link:hover span { border-bottom: 1px solid #25aae5; } html #CMD .inner-view .inner-view-container .section__oled .wd__content .content__slogan::before, html #CMD .inner-view .inner-view-container .section__oled .wd__content .content__slogan::after, html #CMD .inner-view .inner-view-container .section__oled .wd__content .content__title::before, html #CMD .inner-view .inner-view-container .section__oled .wd__content .content__title::after { display: none; } html #CMD .inner-view .section__btn__home::before { background: none; } html #CMD .inner-view #active__modal-eyeCare, html #CMD .inner-view #active__modal-childEyeCare, html #CMD .inner-view #active__modal-3Dcolor, html #CMD .inner-view #active__modal-contrast, html #CMD .inner-view #active__modal-responseTime { background: #1c1c1c; } html #CMD .inner-view #active__modal-eyeCare .modal-button, html #CMD .inner-view #active__modal-childEyeCare .modal-button, html #CMD .inner-view #active__modal-3Dcolor .modal-button, html #CMD .inner-view #active__modal-contrast .modal-button, html #CMD .inner-view #active__modal-responseTime .modal-button { background-color: rgba(0, 0, 0, 0.6); color: white; border-color: white; } html #CMD .inner-view #active__modal-eyeCare .modal-button:hover, html #CMD .inner-view #active__modal-childEyeCare .modal-button:hover, html #CMD .inner-view #active__modal-3Dcolor .modal-button:hover, html #CMD .inner-view #active__modal-contrast .modal-button:hover, html #CMD .inner-view #active__modal-responseTime .modal-button:hover { background-color: rgba(0, 0, 0, 0.6); color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.6); } html #CMD .inner-view #active__modal-eyeCare .inner-modal, html #CMD .inner-view #active__modal-eyeCare section, html #CMD .inner-view #active__modal-childEyeCare .inner-modal, html #CMD .inner-view #active__modal-childEyeCare section, html #CMD .inner-view #active__modal-3Dcolor .inner-modal, html #CMD .inner-view #active__modal-3Dcolor section, html #CMD .inner-view #active__modal-contrast .inner-modal, html #CMD .inner-view #active__modal-contrast section, html #CMD .inner-view #active__modal-responseTime .inner-modal, html #CMD .inner-view #active__modal-responseTime section { background: #1c1c1c; } html #CMD .inner-view #active__modal-eyeCare .wd__section .wd__content .content__title, html #CMD .inner-view #active__modal-childEyeCare .wd__section .wd__content .content__title, html #CMD .inner-view #active__modal-3Dcolor .wd__section .wd__content .content__title, html #CMD .inner-view #active__modal-contrast .wd__section .wd__content .content__title, html #CMD .inner-view #active__modal-responseTime .wd__section .wd__content .content__title { color: #fff; } html #CMD .inner-view #active__modal-eyeCare .wd__section .wd__content .content__info, html #CMD .inner-view #active__modal-childEyeCare .wd__section .wd__content .content__info, html #CMD .inner-view #active__modal-3Dcolor .wd__section .wd__content .content__info, html #CMD .inner-view #active__modal-contrast .wd__section .wd__content .content__info, html #CMD .inner-view #active__modal-responseTime .wd__section .wd__content .content__info { color: #fff; } html #CMD .inner-view #active__modal-eyeCare .wd__section .wd__content .content__link, html #CMD .inner-view #active__modal-childEyeCare .wd__section .wd__content .content__link, html #CMD .inner-view #active__modal-3Dcolor .wd__section .wd__content .content__link, html #CMD .inner-view #active__modal-contrast .wd__section .wd__content .content__link, html #CMD .inner-view #active__modal-responseTime .wd__section .wd__content .content__link { Color: #fff; } html #CMD .inner-view #active__modal-eyeCare .wd__section .wd__content .content__comment, html #CMD .inner-view #active__modal-childEyeCare .wd__section .wd__content .content__comment, html #CMD .inner-view #active__modal-3Dcolor .wd__section .wd__content .content__comment, html #CMD .inner-view #active__modal-contrast .wd__section .wd__content .content__comment, html #CMD .inner-view #active__modal-responseTime .wd__section .wd__content .content__comment { color: #fff; } html #CMD .inner-view #active__modal-eyeCare .wd__section .wd__feature__list .wd__feature .wd__feature__describe, html #CMD .inner-view #active__modal-eyeCare .wd__section .wd__feature__list .wd__feature .wd__feature__describe__top, html #CMD .inner-view #active__modal-childEyeCare .wd__section .wd__feature__list .wd__feature .wd__feature__describe, html #CMD .inner-view #active__modal-childEyeCare .wd__section .wd__feature__list .wd__feature .wd__feature__describe__top, html #CMD .inner-view #active__modal-3Dcolor .wd__section .wd__feature__list .wd__feature .wd__feature__describe, html #CMD .inner-view #active__modal-3Dcolor .wd__section .wd__feature__list .wd__feature .wd__feature__describe__top, html #CMD .inner-view #active__modal-contrast .wd__section .wd__feature__list .wd__feature .wd__feature__describe, html #CMD .inner-view #active__modal-contrast .wd__section .wd__feature__list .wd__feature .wd__feature__describe__top, html #CMD .inner-view #active__modal-responseTime .wd__section .wd__feature__list .wd__feature .wd__feature__describe, html #CMD .inner-view #active__modal-responseTime .wd__section .wd__feature__list .wd__feature .wd__feature__describe__top { color: #fff; } html #CMD .section__oled_harmful { padding-top: 125px; padding-bottom: 0; } html #CMD .section__oled_harmful .wd__content { position: relative; margin-left: auto; margin-right: auto; width: 90%; max-width: 760px; } html #CMD .section__oled_harmful .img__main_containter { position: relative; left: 50%; margin-top: -110px; margin-left: -500px; width: 1000px; height: 556px; } html #CMD .section__oled_harmful .img__main_containter .img__main { width: 100%; height: 100%; } #CMD .section__oled_harmful .img__main { background-image: url("../images/large/1x/oled/inner/s5/01-bg.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__oled_harmful .img__main { background-image: url("../images/large/2x/oled/inner/s5/01-bg.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__oled_harmful .img__main { background-image: url("../images/large/2x/oled/inner/s5/01-bg.png"); } } html #CMD .section__oled_harmful .img__main_containter .bar { position: absolute; top: 455px; left: 50%; width: 100px; text-align: center; } html #CMD .section__oled_harmful .img__main_containter .bar .bar-name { color: #b3b3b3; font-size: 0.9375rem; } html #CMD .section__oled_harmful .img__main_containter .bar .bar-info { position: absolute; top: -186px; width: 100%; font-size: 0; } html #CMD .section__oled_harmful .img__main_containter .bar .bar-info .bar-value, html #CMD .section__oled_harmful .img__main_containter .bar .bar-info .bar-unit { display: inline-block; vertical-align: bottom; } html #CMD .section__oled_harmful .img__main_containter .bar .bar-info .bar-value { font-size: 1.875rem; } html #CMD .section__oled_harmful .img__main_containter .bar .bar-info .bar-unit { position: relative; top: -4px; padding-left: 2px; font-size: 0.875rem; } html #CMD .section__oled_harmful .img__main_containter .bar.bar-3 .bar-name { color: #2da8fe; } html #CMD .section__oled_harmful .img__main_containter .bar.bar-3 .bar-info { color: #2eb1ff; } html #CMD .section__oled_harmful .img__main_containter .bar.bar-0 { margin-left: -216px; } html #CMD .section__oled_harmful .img__main_containter .bar.bar-1 { margin-left: -106px; } html #CMD .section__oled_harmful .img__main_containter .bar.bar-2 { margin-left: 4px; } html #CMD .section__oled_harmful .img__main_containter .bar.bar-3 { margin-left: 115px; } html #CMD .section__oled_harmful .chart-content { display: block; position: relative; margin-top: -37px; } html #CMD .section__oled_harmful .chart-content .content-title { position: relative; left: 50%; margin-left: -300px; width: 600px; color: #fff; font-size: 1rem; } html #CMD .section__oled_harmful .chart-content .contnet-from { position: relative; margin-top: 6px; margin-right: auto; margin-left: auto; width: 600px; text-align: center; } html #CMD .section__oled_harmful .chart-content .contnet-from .from-text { position: relative; color: #6d6d6d; font-size: 1rem; line-height: 1.2; } html #CMD .section__oled_harmful .chart-content .contnet-link { display: inline-block; position: relative; cursor: pointer; margin-top: 0; margin-right: auto; margin-left: auto; text-align: center; transition: opacity 250ms; } html #CMD .section__oled_harmful .chart-content .contnet-link .link-text { position: relative; color: #6d6d6d; font-size: 0.75rem; line-height: 1; } html #CMD .section__oled_harmful .chart-content .contnet-link:hover { opacity: 0.7; } html #CMD .section__oled_blue_light { padding-top: 125px; padding-bottom: 220px; } html #CMD .section__oled_blue_light .wd__content { position: relative; margin-left: auto; margin-right: auto; width: 90%; max-width: 720px; } html #CMD .section__oled_blue_light .img__main_containter { position: relative; left: 50%; margin-top: -70px; margin-left: -500px; width: 1000px; height: 556px; } html #CMD .section__oled_blue_light .img__main_containter .img__main { width: 100%; height: 100%; } #CMD .section__oled_blue_light .img__main { background-image: url("../images/large/1x/oled/inner/s5/02-bg.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__oled_blue_light .img__main { background-image: url("../images/large/2x/oled/inner/s5/02-bg.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__oled_blue_light .img__main { background-image: url("../images/large/2x/oled/inner/s5/02-bg.png"); } } html #CMD .section__oled_blue_light .img__main_containter .wave { position: absolute; top: 452px; left: 50%; width: 180px; text-align: center; } html #CMD .section__oled_blue_light .img__main_containter .wave .wave-title { color: #b3b3b3; font-size: 0.9375rem; } html #CMD .section__oled_blue_light .img__main_containter .wave .wave-info { position: absolute; top: -325px; width: 100%; font-size: 0; } html #CMD .section__oled_blue_light .img__main_containter .wave .wave-info .wave-value, html #CMD .section__oled_blue_light .img__main_containter .wave .wave-info .wave-unit { display: inline-block; vertical-align: bottom; } html #CMD .section__oled_blue_light .img__main_containter .wave .wave-info .wave-value { font-size: 1.875rem; } html #CMD .section__oled_blue_light .img__main_containter .wave .wave-info .wave-unit { position: relative; top: -4px; padding-left: 2px; font-size: 0.875rem; } html #CMD .section__oled_blue_light .img__main_containter .wave.wave-2 .wave-title { color: #2da8fe; } html #CMD .section__oled_blue_light .img__main_containter .wave.wave-2 .wave-info { color: #2eb1ff; } html #CMD .section__oled_blue_light .img__main_containter .wave.wave-0 { margin-left: -299px; } html #CMD .section__oled_blue_light .img__main_containter .wave.wave-1 { margin-left: -90px; } html #CMD .section__oled_blue_light .img__main_containter .wave.wave-2 { margin-left: 116px; } html #CMD .section__oled_blue_light .chart-content { display: block; position: relative; margin-top: -40px; } html #CMD .section__oled_blue_light .chart-content .content-name { position: relative; left: 50%; margin-left: -300px; width: 600px; color: #fff; } html #CMD .section__oled_blue_light .chart-content .content-name .name-bar, html #CMD .section__oled_blue_light .chart-content .content-name .name-text { display: inline-block; vertical-align: middle; } html #CMD .section__oled_blue_light .chart-content .content-name .name-bar { position: relative; top: 0; width: 26px; height: 3px; background-color: #fff; } html #CMD .section__oled_blue_light .chart-content .content-name .name-text { margin-left: 7px; font-size: 1rem; } html #CMD .section__oled_blue_light .chart-content .contnet-from { position: relative; margin-top: 6px; margin-right: auto; margin-left: auto; width: 600px; text-align: center; } html #CMD .section__oled_blue_light .chart-content .contnet-from .from-text { position: relative; color: #6d6d6d; font-size: 1rem; line-height: 1.2; } html #CMD .section__oled_blue_light .chart-content .contnet-link { display: inline-block; position: relative; cursor: pointer; margin-top: 0; margin-right: auto; margin-left: auto; text-align: center; transition: opacity 0.2s; } html #CMD .section__oled_blue_light .chart-content .contnet-link .link-text { position: relative; color: #6d6d6d; font-size: 0.75rem; line-height: 1; } html #CMD .section__oled_blue_light .chart-content .contnet-link:hover { opacity: 0.7; } html #CMD .section__oled_hdr { padding-top: 125px; padding-bottom: 0; } html #CMD .section__oled_hdr .wd__content { position: relative; margin-left: auto; margin-right: auto; width: 90%; max-width: 814px; } html #CMD .section__oled_hdr .img__main_containter { position: relative; left: 50%; margin-top: 2px; margin-left: -500px; width: 1000px; height: 376px; } html #CMD .section__oled_hdr .img__main_containter .img__main { width: 100%; height: 100%; } #CMD .section__oled_hdr .img__main { background-image: url("../images/large/1x/oled/inner/s8/01-bg.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__oled_hdr .img__main { background-image: url("../images/large/2x/oled/inner/s8/01-bg.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__oled_hdr .img__main { background-image: url("../images/large/2x/oled/inner/s8/01-bg.png"); } } html #CMD .section__oled_hdr .img__main_containter .chart-content { position: absolute; top: 0; width: 100%; height: 100%; } html #CMD .section__oled_hdr .img__main_containter .chart-content .axis-hint { position: absolute; width: 144px; color: #b3b3b3; font-size: 0.875rem; line-height: 1.2; } html #CMD .section__oled_hdr .img__main_containter .chart-content .item-content { display: inline-block; position: absolute; width: 160px; font-size: 1.5625rem; text-align: left; line-height: 1.2; } html #CMD .section__oled_hdr .img__main_containter .chart-content .axis-y .y-hint { top: 66px; left: 105px; text-align: right; } html #CMD .section__oled_hdr .img__main_containter .chart-content .axis-y .y-item .item-content { left: 110px; } html #CMD .section__oled_hdr .img__main_containter .chart-content .axis-y .y-item .item-content.item-0 { top: 113px; color: #fff; } html #CMD .section__oled_hdr .img__main_containter .chart-content .axis-y .y-item .item-content.item-0 .content-value { left: 196px; color: #333; } html #CMD .section__oled_hdr .img__main_containter .chart-content .axis-y .y-item .item-content.item-1 { top: 172px; color: #fff; } html #CMD .section__oled_hdr .img__main_containter .chart-content .axis-y .y-item .item-content.item-1 .content-value { left: 196px; color: #fff; } html #CMD .section__oled_hdr .img__main_containter .chart-content .axis-y .y-item .item-content.item-2 { top: 229px; color: #b3b3b3; } html #CMD .section__oled_hdr .img__main_containter .chart-content .axis-y .y-item .item-content.item-2 .content-value { left: 392px; color: #fff; } html #CMD .section__oled_hdr .img__main_containter .chart-content .axis-y .y-item .item-content .content-value { position: absolute; top: 50%; width: 250px; font-size: 1.4375rem; text-align: left; transform: translateY(-50%); } html #CMD .section__oled_hdr .img__main_containter .chart-content .axis-y .y-item .item-content.item-1 .content-name { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(150deg, #ffeeba 8%, #7f5a2a 75%); } html #CMD .section__oled_hdr .img__main_containter .chart-content .axis-x .x-hint { top: 276px; right: 114px; text-align: right; } html #CMD .section__oled_hdr .text-sub { vertical-align: sub; font-size: 0.6em; } .ie #CMD .img__main .chart-content .axis-y .y-item .item-content.item-1 .content-name { -webkit-text-fill-color: initial !important; background-image: none !important; background-image: none !important; color: #815b29 !important; } html #CMD .section__oled_pixels { padding-top: 40px; padding-bottom: 169px; } html #CMD .section__oled_pixels .wd__content { position: relative; margin-left: auto; margin-right: auto; width: 90%; max-width: 874px; } html #CMD .section__oled_pixels .compare_content { margin: 79px auto 0; width: 100%; } html #CMD .section__oled_pixels .compare_content .img__compare__left, html #CMD .section__oled_pixels .compare_content .img__compare__right { display: inline-block; position: relative; margin: 0 3px; width: 634px; height: 357px; background-size: cover; } html #CMD .section__oled_pixels .compare_content .img__compare__left .img.compare__left, html #CMD .section__oled_pixels .compare_content .img__compare__left .img.compare__right, html #CMD .section__oled_pixels .compare_content .img__compare__right .img.compare__left, html #CMD .section__oled_pixels .compare_content .img__compare__right .img.compare__right { display: inline-block; position: absolute; z-index: 1; top: 0; left: 0; width: 676px; height: 357px; background-size: cover; } html #CMD .section__oled_pixels .compare_content .img__compare__left video, html #CMD .section__oled_pixels .compare_content .img__compare__right video { position: relative; width: 634px; height: 357px; } html #CMD .section__oled_pixels .compare_content .img__compare__left .text-describe, html #CMD .section__oled_pixels .compare_content .img__compare__right .text-describe { margin-bottom: 24px; width: 100%; color: #fff; font-size: 1.25rem; text-align: center; transform: translateY(-36px); } html #CMD .section__oled_lcd { margin-bottom: -31px; padding-top: 100px; padding-bottom: 220px; } html #CMD .section__oled_lcd .wd__content { position: relative; margin-left: auto; margin-right: auto; width: 90%; max-width: 904px; } html #CMD .section__oled_lcd .compare_content { margin: 79px auto 0; width: 100%; } html #CMD .section__oled_lcd .compare_content .img__compare__left, html #CMD .section__oled_lcd .compare_content .img__compare__right { display: inline-block; position: relative; margin: 0 3px; width: 620px; height: 348px; background-size: cover; } html #CMD .section__oled_lcd .compare_content .img__compare__left::after, html #CMD .section__oled_lcd .compare_content .img__compare__right::after { display: block; position: absolute; z-index: 10; bottom: -1px; left: 0; content: ''; width: 100%; height: 180px; background: linear-gradient(to top, #000, transparent 80%); } html #CMD .section__oled_lcd .compare_content .img__compare__left .img.compare__left, html #CMD .section__oled_lcd .compare_content .img__compare__left .img.compare__right, html #CMD .section__oled_lcd .compare_content .img__compare__right .img.compare__left, html #CMD .section__oled_lcd .compare_content .img__compare__right .img.compare__right { display: inline-block; position: absolute; z-index: 1; top: 0; left: 0; width: 620px; height: 348px; background-size: cover; } html #CMD .section__oled_lcd .compare_content .img__compare__left video, html #CMD .section__oled_lcd .compare_content .img__compare__right video { position: relative; width: 620px; height: 348px; } html #CMD .section__oled_lcd .compare_content .img__compare__left .text-describe, html #CMD .section__oled_lcd .compare_content .img__compare__right .text-describe { position: absolute; z-index: 100; bottom: 24px; left: 50%; width: 500px; color: #fff; font-size: 1.6875rem; } html #CMD .section__oled_lcd .compare_content .img__compare__left .text-describe.text__compare__left, html #CMD .section__oled_lcd .compare_content .img__compare__right .text-describe.text__compare__left { margin-left: -250px; } html #CMD .section__oled_lcd .compare_content .img__compare__left .text-describe.text__compare__right, html #CMD .section__oled_lcd .compare_content .img__compare__right .text-describe.text__compare__right { margin-left: -250px; } html #CMD .section__noise { padding-top: 95px; padding-bottom: 110px; } html #CMD .section__noise { color: #fff; } html #CMD .section__noise .wd__content .content__info { width: 100%; } html #CMD .section__noise .sub__content { margin-top: 80px; margin-right: auto; margin-left: auto; max-width: 780px; } html #CMD .section__noise .sub__content .content__title { font-size: 2rem; font-weight: 300; } html #CMD .section__noise .sub__content .content__info { margin-top: 9px; font-size: 1.25rem; } html #CMD .section__noise .sub__content .content__title, html #CMD .section__noise .sub__content .content__info { opacity: 0; transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1) 1s, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 1s; } html #CMD .section__noise .nav__noise { display: flex; justify-content: center; opacity: 0; margin-top: 36px; transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1) 1.2s, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 1.2s; } html #CMD .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 #fff; border-radius: 20px; } html #CMD .section__noise .nav__noise .nav__item .nav__content { display: flex; align-items: center; } html #CMD .section__noise .nav__noise .nav__item .nav__content .img__icon { display: inline-block; margin-right: 10px; width: 45px; height: 45px; background-size: contain; } #CMD .section__noise .nav__content .img__icon { background-image: url("../images/aiNoise/1x/play.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__noise .nav__content .img__icon { background-image: url("../images/aiNoise/2x/play.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__noise .nav__content .img__icon { background-image: url("../images/aiNoise/2x/play.png"); } } html #CMD .section__noise .nav__noise .nav__item .nav__content .nav__text { display: inline-block; width: 160px; letter-spacing: 0.02em; } html #CMD .section__noise .nav__noise .nav__item .nav__content .nav__text .content__title { font-size: 23px; font-weight: 300; } html #CMD .section__noise .nav__noise .nav__item .nav__content .nav__text .content__info { font-size: 20px; } html #CMD .section__noise .nav__noise .nav__item.js-selected { border: solid 3px #7f09a0; } #CMD .section__noise .js-selected .nav__content .img__icon { background-image: url("../images/aiNoise/1x/pause.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__noise .js-selected .nav__content .img__icon { background-image: url("../images/aiNoise/2x/pause.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__noise .js-selected .nav__content .img__icon { background-image: url("../images/aiNoise/2x/pause.png"); } } html #CMD .section__noise .noise__switcher { display: flex; overflow: hidden; align-items: center; justify-content: center; visibility: hidden; opacity: 0; margin-top: 60px; max-height: 0; text-align: center; transition: all 500ms linear, opacity 400ms; flex-direction: column; } html #CMD .section__noise .noise__switcher span { display: inline-block; margin-right: 10px; font-size: 25px; font-weight: 300; letter-spacing: 0.02em; } html #CMD .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/aiNoise/1x/btn-off.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__noise .noise__switcher .img__switcher { background-image: url("../images/aiNoise/2x/btn-off.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__noise .noise__switcher .img__switcher { background-image: url("../images/aiNoise/2x/btn-off.png"); } } #CMD .section__noise .noise__switcher .img__switcher.js-active { background-image: url("../images/aiNoise/1x/btn-on.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__noise .noise__switcher .img__switcher.js-active { background-image: url("../images/aiNoise/2x/btn-on.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__noise .noise__switcher .img__switcher.js-active { background-image: url("../images/aiNoise/2x/btn-on.png"); } } html #CMD .section__noise .noise__switcher.js-showed { visibility: visible; opacity: 1; max-height: 700px; transition: all 500ms linear, opacity 400ms 500ms; } html #CMD .section__noise .noise__switcher .noise_desc { width: 100%; max-width: 800px; font-size: 1rem; text-align: center; line-height: 1.5; } html #CMD .section__noise .img__noise { margin-top: 19px; height: 400px; } html #CMD .section__noise .img__noise .img__voice { position: absolute; z-index: 50; top: 50%; left: 50%; margin-top: -162px; margin-left: -162px; width: 324px; height: 324px; } #CMD .section__noise .img__noise .img__voice { background-image: url("../images/aiNoise/1x/voiceBg.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__noise .img__noise .img__voice { background-image: url("../images/aiNoise/2x/voiceBg.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__noise .img__noise .img__voice { background-image: url("../images/aiNoise/2x/voiceBg.png"); } } html #CMD .section__noise .img__noise #noise__left { position: absolute; z-index: 40; top: 0; left: 50%; margin-left: -880px; } html #CMD .section__noise .img__noise #noise__right { position: absolute; z-index: 40; top: 0; left: 50%; margin-left: 80px; } html #CMD .section__noise .modal-button-container { position: relative; z-index: 99; margin-top: 21px; } html #CMD .section__noise .nav__noise .nav__item { width: 234px; } html #CMD .section__noise .nav__noise .nav__item .nav__content { width: 100%; } html #CMD .section__noise .nav__noise .nav__item .nav__content .nav__text { width: 100%; } html #CMD .section__noise .nav__noise .nav__item .nav__content .img__icon { margin-right: 12px; margin-left: 0; } html #CMD .wd__section { position: relative; } html #CMD .wd__section .sectionnNavPosition { transform: none !important; transition: all 0ms; } html #CMD .wd__section .row .col[class*='push-'], html #CMD .wd__section .row .col[class*='pull-'] { position: relative; } html #CMD .wd__section .always__on__top { position: relative; z-index: 888; } html #CMD .wd__section .no__wrap { display: inline-block; white-space: nowrap; } html #CMD .wd__section .slick-dots li { margin-right: 10px; margin-left: 10px; } html #CMD .wd__section .slick-dots li button::before { color: #1c1b19; font-size: 2.5625rem; } html #CMD .wd__section .slick-dots li button:hover::before { color: #1c1b19; } html #CMD .wd__section .large_use, html #CMD .wd__section .medium_use, html #CMD .wd__section .small_use { display: none; } html #CMD .wd__section .large_use { display: block \9; } html #CMD .wd__section .large_unuse { display: none \9; } html #CMD .wd__section .hide { opacity: 0; height: 0; } html #CMD .wd__section .img { display: block; position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; } html #CMD .wd__section .wd__content { position: relative; margin: 0 auto; } html #CMD .wd__section .wd__content .content__slogan { color: #00c6ff; display: inline-block; } html #CMD .wd__section .wd__content .content__title { color: #fff; } html #CMD .wd__section .wd__content .content__info { color: #fff; font-size: 1.25rem; } html #CMD .wd__section .wd__content .content__link { linkColor: #00c6ff; } html #CMD .wd__section .wd__content .content__link { color: #00c6ff; } html #CMD .wd__section .wd__content .content__link *, html #CMD .wd__section .wd__content .content__link span { color: #00c6ff; } html #CMD .wd__section .wd__content .content__link::after { color: #00c6ff; } html #CMD .wd__section .wd__content .content__link:link { color: #00c6ff; } html #CMD .wd__section .wd__content .content__link:hover span { border-bottom: 1px solid #00c6ff; } html #CMD .wd__section .wd__content .content__slogan::after { display: block; margin-top: 5px; width: 269px; height: 3px; border-radius: 10px; background-image: linear-gradient(90deg, #fff 0%, #00c6ff 10%, #007aff 100%); content: ''; } html #CMD .wd__section .wd__feature__list .wd__feature { color: #fff; } html #CMD .wd__section .wd__feature__list .wd__feature .wd__feature__data { color: #00c6ff; } html #CMD .wd__section .wd__feature__list .wd__feature__data span[class*='space-'] { font-size: 1.875rem; } html #CMD .wd__section .ani_enter_detect { position: absolute; z-index: 99; left: 50%; width: 10px; height: 10px; } html #CMD .wd__section .modal-button-container .modal-button { background-color: rgba(0, 0, 0, 0); color: white; border-color: white; } html #CMD .wd__section .modal-button-container .modal-button:hover { background-color: rgba(0, 0, 0, 0); color: rgba(0, 0, 0, 0.6); border-color: rgba(0, 0, 0, 0.6); } html #CMD .wd__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; } html #CMD .wd__section .oled_video_control { cursor: pointer; margin-bottom: 36px; width: 36px; height: 36px; border-width: 0; background-color: transparent; } html #CMD .wd__section .oled_video_control.pause { background-image: url("../images/icon/icon_pause.svg") ; } @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) { html #CMD .wd__section .oled_video_control.pause { background-image: url("../images/icon/icon_pause.svg"); } } html #CMD .wd__section .oled_video_control.resume { background-image: url("../images/icon/icon_play.svg") ; } @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) { html #CMD .wd__section .oled_video_control.resume { background-image: url("../images/icon/icon_play.svg"); } } html #CMD .wd__section .wd__content .content__title sup.footnote-num { -webkit-text-fill-color: initial !important; background-image: none !important; background-color: rgba(0, 0, 0, 0); } html #CMD .wd__section .figure__img img { width: 100%; height: 100%; } html #CMD .section__kv { overflow: hidden; } html #CMD .section__kv .kv__logo { color: #fff; text-align: center; } html #CMD .section__kv .wd__content .content__title { padding-left: 0; color: #fff; } html #CMD .section__kv .wd__content .content__title::after { display: none; } html #CMD .section__kv .image__container { position: relative; margin-top: -66px; height: 1950px; } html #CMD .section__kv .img__bg_dark { left: 50%; margin-left: -1280px; width: 2560px; height: 2500px; position: absolute; z-index: 1; top: 0; background-size: contain; } html #CMD .section__kv .img__screen_light { left: 50%; margin-left: -1280px; width: 2560px; height: 2500px; position: absolute; z-index: 2; top: 0; margin-top: 0; background-size: contain; } html #CMD .section__kv .img__bg_light { left: 50%; margin-left: -1280px; width: 2560px; height: 2500px; position: absolute; z-index: 3; top: 50%; margin-top: -1250px; background-size: contain; } html #CMD .section__kv .img__bg_light_mask { position: absolute; z-index: 4; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate3d(-50%, -50%, 0); } html #CMD .section__kv .img__evo { left: 50%; margin-left: -55px; width: 110px; height: 150px; position: absolute; z-index: 11; top: 50%; background-size: contain; filter: drop-shadow(-5px 0 10px rgba(255, 255, 255, 0.6)); } #CMD .section__kv .img__evo { background-image: url("../images/large/1x/icon/intelEvoi7_left.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__kv .img__evo { background-image: url("../images/large/2x/icon/intelEvoi7_left.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__kv .img__evo { background-image: url("../images/large/2x/icon/intelEvoi7_left.png"); } } html #CMD .section__kv .img__screen_light { opacity: 0; transition: opacity 500ms 300ms ease-in; } html #CMD .section__kv .img__bg_light_mask { will-change: all; opacity: 0; transition: width 1500ms 700ms cubic-bezier(0.43, 0.1, 0.97, 0.65), height 1500ms 700ms cubic-bezier(0.43, 0.1, 0.97, 0.65), opacity 1500ms 400ms ease-in; -webkit-mask-image: radial-gradient(ellipse 67% 30% at 50% 50%, black 40%, transparent 70%); mask-image: radial-gradient(ellipse 67% 30% at 50% 50%, black 40%, transparent 70%); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } html #CMD .section__kv .img__evo { opacity: 0; transition: opacity 600ms 300ms cubic-bezier(0.65, 0.05, 0.36, 1); } html #CMD .section__kv .image__container.active .img__screen_light { opacity: 1; } html #CMD .section__kv .image__container.active .img__bg_light_mask { opacity: 1; width: 600%; height: 600%; } html #CMD .section__kv .image__container.active .img__evo { opacity: 1; } html #CMD .section__kv.lcp .img__bg_dark { background-image: none !important; } html #CMD .section__ksp { padding-top: 30px; padding-bottom: 10px; background: #000; } html #CMD .section__ksp .ksp__layout { max-width: 1244px; } html #CMD .section__ksp .ksp__layout .grid-item { margin-bottom: 16px; padding: 0; box-sizing: border-box; } html #CMD .section__ksp .ksp__layout .grid-item-ie { margin: 0 8px; border: 1px solid transparent; background: linear-gradient(to top, #20252b 0%, #13171e 100%) padding-box, linear-gradient(to top, #68c2ee 0%, #a069f0 100%) border-box; } html #CMD .section__ksp .ksp__layout .grid-item-wdContent .grid-item-ie, html #CMD .section__ksp .ksp__layout .grid-item-wdFeatureTopIcon .grid-item-ie { border: 1px solid linear-gradient(to top, #68c2ee 0%, #a069f0 100%); } html #CMD .section__ksp .ksp__layout .grid-item-wdContent .grid-item-ie::before, html #CMD .section__ksp .ksp__layout .grid-item-wdFeatureTopIcon .grid-item-ie::before { display: block; position: absolute; z-index: 10; top: 0; left: 0; box-sizing: border-box; width: 100%; height: 100%; border: 1px solid; border-radius: 20px; border-image-source: linear-gradient(to right, #9c20aa, #fb3570); content: ''; } html #CMD .section__ksp .ksp__layout .grid-item-wdContent .grid-item-ie::after, html #CMD .section__ksp .ksp__layout .grid-item-wdFeatureTopIcon .grid-item-ie::after { display: block; position: absolute; overflow: hidden; z-index: -1; top: -1px; left: -1px; box-sizing: border-box; width: calc(100% + 4px); height: calc(100% + 4px); border-radius: 20px; background: url("../images/large/2x/ksp/img_bg.jpg"); background-position: center; background-size: 100% 100%; content: ''; } html #CMD .section__ksp .ksp__layout .wd__content .content__title { color: #00c6ff; } html #CMD .section__ksp .ksp__layout .wd__content .content__title span { display: inline-block; } html #CMD .section__ksp .ksp__layout .wd__content .content__info { color: #fff; } html #CMD .section__ksp .ksp__layout .wd__feature__list .wd__feature .wd__feature__data { display: inline-block; color: #00c6ff; } html #CMD .section__ksp .ksp__layout .wd__feature__list .wd__feature .wd__feature__describe, html #CMD .section__ksp .ksp__layout .wd__feature__list .wd__feature .wd__feature__describe *, html #CMD .section__ksp .ksp__layout .wd__feature__list .wd__feature .wd__feature__describe__top, html #CMD .section__ksp .ksp__layout .wd__feature__list .wd__feature .wd__feature__describe__top * { color: #fff; } html #CMD .section__ksp .grid-item-0.grid-item-wdContent .item_block { height: 100%; } html #CMD .section__ksp .grid-item-0.grid-item-wdContent .img__block { position: absolute; top: 50%; left: -43px; margin-top: 37px; width: 403px; height: 342px; transform: translateY(-50%); } #CMD .section__ksp .grid-item-0 .img__block { background-image: url("../images/large/1x/ksp/img_display.jpg"); } #CMD .section__ksp .grid-item-0 .img__block { mask: url("../images/large/1x/ksp/img_display_mask.png"); mask-position: center; mask-size: contain; -webkit-mask-image: url("../images/large/1x/ksp/img_display_mask.png"); -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__ksp .grid-item-0 .img__block { background-image: url("../images/large/2x/ksp/img_display.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__ksp .grid-item-0 .img__block { background-image: url("../images/large/2x/ksp/img_display.jpg"); } } html #CMD .section__ksp .grid-item-1.grid-item-wdFeature .wd__feature .wd__feature__describe { display: none; } html #CMD .section__ksp .grid-item-5.grid-item-wdFeatureTopIcon .wd__feature__list .wd__feature__describe { margin-top: 0; } html #CMD .section__ksp .grid-item-5.grid-item-wdFeatureTopIcon .wd__feature__list .wd__feature__describe__top { margin-bottom: 7px; } html #CMD .section__ksp .grid-item-5.grid-item-wdFeatureTopIcon .img__icon0 { margin-top: 0; } #CMD .section__ksp .grid-item-5 .img__icon0 { background-image: url("../images/large/1x/ksp/icon_5.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__ksp .grid-item-5 .img__icon0 { background-image: url("../images/large/2x/ksp/icon_5.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__ksp .grid-item-5 .img__icon0 { background-image: url("../images/large/2x/ksp/icon_5.png"); } } html #CMD .section__ksp .grid-item-6.grid-item-wdFeatureTopIcon .wd__feature__list .wd__feature__describe { margin-top: 0; } html #CMD .section__ksp .grid-item-6.grid-item-wdFeatureTopIcon .wd__feature__list .wd__feature__describe__top { margin-bottom: 7px; } html #CMD .section__ksp .grid-item-6.grid-item-wdFeatureTopIcon .img__icon0 { margin-top: 0; } #CMD .section__ksp .grid-item-6 .img__icon0 { background-image: url("../images/large/1x/ksp/icon_6.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__ksp .grid-item-6 .img__icon0 { background-image: url("../images/large/2x/ksp/icon_6.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__ksp .grid-item-6 .img__icon0 { background-image: url("../images/large/2x/ksp/icon_6.png"); } } html #CMD .section__ksp .grid-item-7.grid-item-wdContent { min-height: 258px; } html #CMD .section__ksp .grid-item-7.grid-item-wdContent .item_block { height: 100%; } html #CMD .section__ksp .grid-item-7.grid-item-wdContent .item_content { width: 76%; } html #CMD .section__ksp .grid-item-7.grid-item-wdContent .item_image { width: 22%; } html #CMD .section__ksp .grid-item-7.grid-item-wdContent .img__block { position: absolute; top: 50% !important; right: -60px; left: unset; margin-top: -7px; width: 240px; height: 320px; transform: translate(0, -50%); } #CMD .section__ksp .grid-item-7 .img__block { background-image: url("../images/large/1x/ksp/img_asuspen.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__ksp .grid-item-7 .img__block { background-image: url("../images/large/2x/ksp/img_asuspen.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__ksp .grid-item-7 .img__block { background-image: url("../images/large/2x/ksp/img_asuspen.png"); } } html #CMD .section__ksp .grid-item-8.grid-item-wdContent { min-height: 258px; } html #CMD .section__ksp .grid-item-8.grid-item-wdContent .item_block { height: 100%; } html #CMD .section__ksp .grid-item-8.grid-item-wdContent .item_content { width: 76%; } html #CMD .section__ksp .grid-item-8.grid-item-wdContent .item_image { width: 22%; } html #CMD .section__ksp .grid-item-8.grid-item-wdContent .img__block { position: absolute; top: 50% !important; right: -60px; left: unset; margin-top: -7px; width: 240px; height: 320px; transform: translate(0, -50%); } #CMD .section__ksp .grid-item-8 .img__block { background-image: url("../images/large/1x/ksp/img_asuspen.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__ksp .grid-item-8 .img__block { background-image: url("../images/large/2x/ksp/img_asuspen.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__ksp .grid-item-8 .img__block { background-image: url("../images/large/2x/ksp/img_asuspen.png"); } } html #CMD .section__ksp .grid-item-14.grid-item-wdFeatureTopIcon .wd__feature__list .wd__feature__describe { margin-top: 0; } html #CMD .section__ksp .grid-item-14.grid-item-wdFeatureTopIcon .wd__feature__list .wd__feature__describe__top { margin-bottom: 7px; } html #CMD .section__ksp .grid-item-14.grid-item-wdFeatureTopIcon .img__icon0 { margin-top: 0; } #CMD .section__ksp .grid-item-14 .img__icon0 { background-image: url("../images/large/1x/ksp/icon_dolby_atmos.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__ksp .grid-item-14 .img__icon0 { background-image: url("../images/large/2x/ksp/icon_dolby_atmos.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__ksp .grid-item-14 .img__icon0 { background-image: url("../images/large/2x/ksp/icon_dolby_atmos.png"); } } html #CMD .section__ksp .grid-item-15.grid-item-wdFeatureTopIcon .wd__feature__list .wd__feature__describe { margin-top: 0; } html #CMD .section__ksp .grid-item-15.grid-item-wdFeatureTopIcon .wd__feature__list .wd__feature__describe__top { margin-bottom: 7px; } html #CMD .section__ksp .grid-item-15.grid-item-wdFeatureTopIcon .img__icon0 { margin-top: 0; } #CMD .section__ksp .grid-item-15 .img__icon0 { background-image: url("../images/large/1x/ksp/icon_wifi.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__ksp .grid-item-15 .img__icon0 { background-image: url("../images/large/2x/ksp/icon_wifi.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__ksp .grid-item-15 .img__icon0 { background-image: url("../images/large/2x/ksp/icon_wifi.png"); } } html #CMD .section__ksp .grid-item-16.grid-item-wdFeatureTopIcon .wd__feature__list .wd__feature__describe { margin-top: 0; } html #CMD .section__ksp .grid-item-16.grid-item-wdFeatureTopIcon .wd__feature__list .wd__feature__describe__top { margin-bottom: 7px; } html #CMD .section__ksp .grid-item-16.grid-item-wdFeatureTopIcon .img__icon0 { margin-top: 0; } #CMD .section__ksp .grid-item-16 .img__icon0 { background-image: url("../images/large/1x/ksp/icon_dolby_vision.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__ksp .grid-item-16 .img__icon0 { background-image: url("../images/large/2x/ksp/icon_dolby_vision.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__ksp .grid-item-16 .img__icon0 { background-image: url("../images/large/2x/ksp/icon_dolby_vision.png"); } } html #CMD .section__ksp .grid-item-20.grid-item-wdContent { min-height: 325px; } html #CMD .section__ksp .grid-item-20.grid-item-wdContent .item_block { height: 100%; } html #CMD .section__ksp .grid-item-20.grid-item-wdContent .item_content { width: 36%; } html #CMD .section__ksp .grid-item-20.grid-item-wdContent .item_image { width: 61%; } html #CMD .section__ksp .grid-item-20.grid-item-wdContent .img__block { position: absolute; top: 50% !important; right: 7px; left: unset; margin-top: 3px; width: 421px; height: 234px; transform: translate(0, -50%); } #CMD .section__ksp .grid-item-20 .img__block { background-image: url("../images/large/1x/ksp/img_hinge.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__ksp .grid-item-20 .img__block { background-image: url("../images/large/2x/ksp/img_hinge.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__ksp .grid-item-20 .img__block { background-image: url("../images/large/2x/ksp/img_hinge.png"); } } html #CMD .section__ksp .grid-item.grid-item-wdContent .wd__content .content__title sup { color: #0ba0aa; } html #CMD .section__ksp .grid-item.grid-item-wdFeatureTopIcon .wd__feature__list .wd__feature .wd__feature__data sup.footnote-num, html #CMD .section__ksp .grid-item.grid-item-wdFeatureTopIcon .wd__feature__list .wd__feature .wd__feature__data sup.footnote-num * { -webkit-text-fill-color: initial !important; background-image: none !important; background-color: rgba(0, 0, 0, 0); } html #CMD .section__ksp .grid-item.grid-item-wdFeatureTopIcon .wd__feature__list .wd__feature .wd__feature__data sup { color: #0ba0aa; } html #CMD .section__video .video_control { position: absolute; z-index: 5; bottom: 60px; left: 5%; } html #CMD .section__video .video_control button { margin-bottom: 0 !important; } html #CMD .section__video .video_control .video_control_btn { cursor: pointer; margin-bottom: 36px; width: 36px; height: 36px; border-width: 0; background-color: transparent; } html #CMD .section__video .video_control .video_control_btn.pause { background-image: url("../images/icon/icon_pause.svg") ; } @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) { html #CMD .section__video .video_control .video_control_btn.pause { background-image: url("../images/icon/icon_pause.svg"); } } html #CMD .section__video .video_control .video_control_btn.resume { background-image: url("../images/icon/icon_play.svg") ; } @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) { html #CMD .section__video .video_control .video_control_btn.resume { background-image: url("../images/icon/icon_play.svg"); } } html #CMD .section__video .youtube_btn { display: inline-block; position: absolute; bottom: 50px; left: 50%; padding: 16px 50px 16px 20px; color: #fff; font-size: 1.25rem; border-radius: 28px; background-color: #161616; transform: translateX(-50%); min-width: 124px; } html #CMD .section__video .youtube_btn::after { background-image: url("../images/icon/video_play.svg") ; position: absolute; top: calc(50% - 11.5px); right: 20px; width: 23px; height: 23px; background-repeat: no-repeat; background-size: contain; content: ''; } @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) { html #CMD .section__video .youtube_btn::after { background-image: url("../images/icon/video_play.svg"); } } html #CMD .section__largeScreen { display: inline-block; } html #CMD .section__largeScreen .wd__feature__list.list-2 .wd__feature { vertical-align: top; } html #CMD .section__largeScreen .wd__feature__list.list-2 .feature-3, html #CMD .section__largeScreen .wd__feature__list.list-2 .feature-5 { width: 72px; } html #CMD .section__largeScreen .wd__feature__list.list-2 .img__icon { height: 120px; background-size: contain; } #CMD .section__largeScreen .img__icon1 { background-image: url("../images/large/1x/icon/s5/icon_oled.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__largeScreen .img__icon1 { background-image: url("../images/large/2x/icon/s5/icon_oled.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__largeScreen .img__icon1 { background-image: url("../images/large/2x/icon/s5/icon_oled.png"); } } #CMD .section__largeScreen .img__icon2 { background-image: url("../images/large/1x/icon/s5/icon_dolby_vision.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__largeScreen .img__icon2 { background-image: url("../images/large/2x/icon/s5/icon_dolby_vision.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__largeScreen .img__icon2 { background-image: url("../images/large/2x/icon/s5/icon_dolby_vision.png"); } } #CMD .section__largeScreen .img__icon3 { background-image: url("../images/large/1x/icon/s5/icon_pantone.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__largeScreen .img__icon3 { background-image: url("../images/large/2x/icon/s5/icon_pantone.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__largeScreen .img__icon3 { background-image: url("../images/large/2x/icon/s5/icon_pantone.png"); } } #CMD .section__largeScreen .img__icon4 { background-image: url("../images/large/1x/icon/s5/icon_tuv.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__largeScreen .img__icon4 { background-image: url("../images/large/2x/icon/s5/icon_tuv.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__largeScreen .img__icon4 { background-image: url("../images/large/2x/icon/s5/icon_tuv.png"); } } #CMD .section__largeScreen .img__icon5 { background-image: url("../images/large/1x/icon/s5/icon_hdr.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__largeScreen .img__icon5 { background-image: url("../images/large/2x/icon/s5/icon_hdr.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__largeScreen .img__icon5 { background-image: url("../images/large/2x/icon/s5/icon_hdr.png"); } } html #CMD .section__largeScreen .image__container { position: relative; margin-top: -168px; height: 900px; } html #CMD .section__largeScreen .img__main, html #CMD .section__largeScreen .img__screen { display: block; position: relative; left: 50%; } html #CMD .section__largeScreen .img__main { position: absolute; left: 50%; margin-left: -700px; width: 1400px; height: 900px; } html #CMD .section__largeScreen .img__screen { position: absolute; z-index: 3; top: 0; opacity: 1; margin-top: 0; margin-left: -700px; width: 1400px; height: 900px; transition: none; } html #CMD .section__largeScreen .image__container.active .img__screen { opacity: 0; transition: opacity 1000ms linear; } html #CMD .section__mobility { display: inline-block; } html #CMD .section__mobility .image__container { display: flex; left: 50%; margin-left: -640px; width: 1280px; flex-direction: row; } html #CMD .section__mobility .image__container .img__main, html #CMD .section__mobility .image__container .img__main2 { border-radius: 10px; } html #CMD .section__versatility { display: inline-block; } html #CMD .section__versatility .wd__feature__list { display: flex; flex-wrap: wrap; margin-top: 57px; margin-left: -6px; width: 900px; } html #CMD .section__versatility .wd__feature__list .wd__feature { display: flex; align-items: center; margin-right: 0; margin-bottom: 20px; width: 33.33333%; } html #CMD .section__versatility .wd__feature__list .wd__feature .wd__feature__describe { margin-top: 5px; margin-left: 13px; } html #CMD .section__versatility .wd__feature__list .wd__feature .wd__feature__describe, html #CMD .section__versatility .wd__feature__list .wd__feature .wd__feature__describe span, html #CMD .section__versatility .wd__feature__list .wd__feature .wd__feature__describe sup, html #CMD .section__versatility .wd__feature__list .wd__feature .wd__feature__describe a, html #CMD .section__versatility .wd__feature__list .wd__feature .wd__feature__describe div { color: #fff; } html #CMD .section__versatility .wd__feature__list .wd__feature .wd__feature__describe span { display: block; font-size: 1.25rem; } html #CMD .section__versatility .wd__feature__list .wd__feature .wd__feature__describe .text-info { font-size: 1rem; } html #CMD .section__versatility .wd__feature__list .img__icon { height: 75px; background-size: contain; } #CMD .section__versatility .img__icon1 { background-image: url("../images/large/1x/icon/s4/mode01.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__versatility .img__icon1 { background-image: url("../images/large/2x/icon/s4/mode01.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__versatility .img__icon1 { background-image: url("../images/large/2x/icon/s4/mode01.png"); } } #CMD .section__versatility .img__icon2 { background-image: url("../images/large/1x/icon/s4/mode02.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__versatility .img__icon2 { background-image: url("../images/large/2x/icon/s4/mode02.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__versatility .img__icon2 { background-image: url("../images/large/2x/icon/s4/mode02.png"); } } #CMD .section__versatility .img__icon3 { background-image: url("../images/large/1x/icon/s4/mode03.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__versatility .img__icon3 { background-image: url("../images/large/2x/icon/s4/mode03.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__versatility .img__icon3 { background-image: url("../images/large/2x/icon/s4/mode03.png"); } } #CMD .section__versatility .img__icon4 { background-image: url("../images/large/1x/icon/s4/mode04.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__versatility .img__icon4 { background-image: url("../images/large/2x/icon/s4/mode04.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__versatility .img__icon4 { background-image: url("../images/large/2x/icon/s4/mode04.png"); } } #CMD .section__versatility .img__icon5 { background-image: url("../images/large/1x/icon/s4/mode05.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__versatility .img__icon5 { background-image: url("../images/large/2x/icon/s4/mode05.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__versatility .img__icon5 { background-image: url("../images/large/2x/icon/s4/mode05.png"); } } #CMD .section__versatility .img__icon6 { background-image: url("../images/large/1x/icon/s4/mode06.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__versatility .img__icon6 { background-image: url("../images/large/2x/icon/s4/mode06.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__versatility .img__icon6 { background-image: url("../images/large/2x/icon/s4/mode06.png"); } } html #CMD .section__versatility .gridItem { width: 100%; } html #CMD .section__versatility .gridItem .item_container { display: flex; justify-content: center; width: 100%; } html #CMD .section__versatility .gridItem .item_container .content__slogan { color: #fff; } html #CMD .section__versatility .gridItem .item_container .content__slogan::after { display: none; } html #CMD .section__versatility .gridItem .item_container .content__title { color: #8a8a8a; } html #CMD .section__versatility .detect-point { position: absolute; z-index: 9999; top: 0; left: 50%; } html #CMD .section__versatility .img { border-radius: 10px; } html #CMD .section__versatility .img__main-1, html #CMD .section__versatility .img__main-2, html #CMD .section__versatility .img__main-3, html #CMD .section__versatility .img__main-4, html #CMD .section__versatility .img__main-5, html #CMD .section__versatility .img__main-6 { display: block; position: relative; } html #CMD .section__display .img__icon { height: 120px; } html #CMD .section__display .wd__feature__list.list-2 .wd__feature { vertical-align: top; } html #CMD .section__display .wd__feature__list.list-2 .feature-3, html #CMD .section__display .wd__feature__list.list-2 .feature-4 { width: 72px; } html #CMD .section__display .wd__feature__list.list-2 .img__icon { background-size: contain; } #CMD .section__display .img__icon1 { background-image: url("../images/large/1x/icon/s5/icon_oled.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__display .img__icon1 { background-image: url("../images/large/2x/icon/s5/icon_oled.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__display .img__icon1 { background-image: url("../images/large/2x/icon/s5/icon_oled.png"); } } #CMD .section__display .img__icon2 { background-image: url("../images/large/1x/icon/s5/icon_dolby_vision.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__display .img__icon2 { background-image: url("../images/large/2x/icon/s5/icon_dolby_vision.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__display .img__icon2 { background-image: url("../images/large/2x/icon/s5/icon_dolby_vision.png"); } } #CMD .section__display .img__icon3 { background-image: url("../images/large/1x/icon/s5/icon_pantone.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__display .img__icon3 { background-image: url("../images/large/2x/icon/s5/icon_pantone.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__display .img__icon3 { background-image: url("../images/large/2x/icon/s5/icon_pantone.png"); } } #CMD .section__display .img__icon4 { background-image: url("../images/large/1x/icon/s5/icon_hdr.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__display .img__icon4 { background-image: url("../images/large/2x/icon/s5/icon_hdr.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__display .img__icon4 { background-image: url("../images/large/2x/icon/s5/icon_hdr.png"); } } #CMD .section__display .img__icon5 { background-image: url("../images/large/1x/icon/s5/icon_tuv.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__display .img__icon5 { background-image: url("../images/large/2x/icon/s5/icon_tuv.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__display .img__icon5 { background-image: url("../images/large/2x/icon/s5/icon_tuv.png"); } } html #CMD .section__display { display: inline-block; } html #CMD .section__display .image__container { position: relative; margin-top: -152px; height: 1250px; } html #CMD .section__display .img__main, html #CMD .section__display .img__main_ani { display: block; left: 50%; } html #CMD .section__display .img__main { position: absolute; z-index: 1; margin-left: -700px; width: 1400px; height: 1250px; } html #CMD .section__display .img__main_ani { position: absolute; z-index: 3; top: 0; opacity: 1; margin-top: 0; margin-left: -700px; width: 1400px; height: 1250px; transition: none; } html #CMD .section__display .image__container.active .img__main_ani { opacity: 0; transition: opacity 1000ms linear; } html #CMD .section__audio { display: inline-block; background-color: #000; } html #CMD .section__audio .img__icon { height: 72px; } html #CMD .section__audio .wd__feature__list .img__icon { background-size: contain; } html #CMD .section__audio .wd__feature__list .feature-2 .wd__feature__describe, html #CMD .section__audio .wd__feature__list .feature-3 .wd__feature__describe, html #CMD .section__audio .wd__feature__list .feature-4 .wd__feature__describe { margin-top: 8px; } html #CMD .section__audio .wd__feature__list .img__icon2 { width: 255px; } #CMD .section__audio .img__icon2 { background-image: url("../images/large/1x/icon/s6/icon_harman.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__audio .img__icon2 { background-image: url("../images/large/2x/icon/s6/icon_harman.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__audio .img__icon2 { background-image: url("../images/large/2x/icon/s6/icon_harman.png"); } } html #CMD .section__audio .wd__feature__list .img__icon3 { width: 150px; } #CMD .section__audio .img__icon3 { background-image: url("../images/large/1x/icon/s6/icon_dolby_atmos.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__audio .img__icon3 { background-image: url("../images/large/2x/icon/s6/icon_dolby_atmos.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__audio .img__icon3 { background-image: url("../images/large/2x/icon/s6/icon_dolby_atmos.png"); } } html #CMD .section__audio .wd__feature__list .img__icon4 { width: 83px; } #CMD .section__audio .img__icon4 { background-image: url("../images/large/1x/icon/s6/icon_smart_amp.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__audio .img__icon4 { background-image: url("../images/large/2x/icon/s6/icon_smart_amp.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__audio .img__icon4 { background-image: url("../images/large/2x/icon/s6/icon_smart_amp.png"); } } html #CMD .section__audio .img__main, html #CMD .section__audio .img__main_ani { display: block; left: 50%; } html #CMD .section__audio .image__container { position: relative; margin-top: -58px; height: 900px; } html #CMD .section__audio .img__main { position: absolute; z-index: 1; opacity: 0; margin-left: -700px; width: 1400px; height: 900px; } html #CMD .section__audio .img__main_ani { position: absolute; z-index: 3; top: 0; opacity: 0; margin-top: 0; margin-left: -700px; width: 1400px; height: 900px; transition: opacity 120ms ease; } html #CMD .section__audio .img__main_screen { position: absolute; z-index: 1000; top: 124px; left: 50%; opacity: 0; margin-left: -396px; width: 796px; height: 768px; transition: opacity 120ms ease; } html #CMD .section__audio .image__container.aniInit .image__animation { position: absolute; z-index: 13; top: 0; width: 100%; height: 100%; } html #CMD .section__audio .image__container.aniInit .ripple_ani { position: absolute; z-index: 5; left: 50%; margin-left: -700px; width: 1400px; height: 900px; } html #CMD .section__audio .image__container.aniInit .ripple_ani .ripple_item { position: absolute; z-index: 5; top: 0; left: 0; opacity: 0; width: 1400px; height: 900px; } html #CMD .section__audio .image__container.aniInit.js-animate-active .img__main_ani.js-showed, html #CMD .section__audio .image__container.aniInit.js-animate-active .img__main_screen.js-showed { opacity: 1; } html #CMD .section__audio .image__container.aniInit.js-animate-active .ripple_ani.js-start-animate .ripple_1 { animation-name: ripple; animation-duration: 1200ms; animation-iteration-count: infinite; animation-direction: normal; animation-timing-function: ease-out; animation-delay: 0ms; opacity: 0; } html #CMD .section__audio .image__container.aniInit.js-animate-active .ripple_ani.js-start-animate .ripple_1 { -webkit-animation-name: ripple; -khtml-animation-name: ripple; -moz-animation-name: ripple; -ms-animation-name: ripple; -o-animation-name: ripple; animation-name: ripple; -webkit-animation-duration: 1200ms; -khtml-animation-duration: 1200ms; -moz-animation-duration: 1200ms; -ms-animation-duration: 1200ms; -o-animation-duration: 1200ms; animation-duration: 1200ms; -webkit-animation-iteration-count: 2; -khtml-animation-iteration-count: 2; -moz-animation-iteration-count: 2; -ms-animation-iteration-count: 2; -o-animation-iteration-count: 2; animation-iteration-count: 2; -webkit-animation-direction: normal; -khtml-animation-direction: normal; -moz-animation-direction: normal; -ms-animation-direction: normal; -o-animation-direction: normal; animation-direction: normal; -webkit-animation-timing-function: ease-out; -khtml-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-delay: 0ms; -khtml-animation-delay: 0ms; -moz-animation-delay: 0ms; -ms-animation-delay: 0ms; -o-animation-delay: 0ms; animation-delay: 0ms; } html #CMD .section__audio .image__container.aniInit.js-animate-active .ripple_ani.js-start-animate .ripple_2 { animation-name: ripple; animation-duration: 1200ms; animation-iteration-count: infinite; animation-direction: normal; animation-timing-function: ease-out; animation-delay: 150ms; opacity: 0; } html #CMD .section__audio .image__container.aniInit.js-animate-active .ripple_ani.js-start-animate .ripple_2 { -webkit-animation-name: ripple; -khtml-animation-name: ripple; -moz-animation-name: ripple; -ms-animation-name: ripple; -o-animation-name: ripple; animation-name: ripple; -webkit-animation-duration: 1200ms; -khtml-animation-duration: 1200ms; -moz-animation-duration: 1200ms; -ms-animation-duration: 1200ms; -o-animation-duration: 1200ms; animation-duration: 1200ms; -webkit-animation-iteration-count: 2; -khtml-animation-iteration-count: 2; -moz-animation-iteration-count: 2; -ms-animation-iteration-count: 2; -o-animation-iteration-count: 2; animation-iteration-count: 2; -webkit-animation-direction: normal; -khtml-animation-direction: normal; -moz-animation-direction: normal; -ms-animation-direction: normal; -o-animation-direction: normal; animation-direction: normal; -webkit-animation-timing-function: ease-out; -khtml-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-delay: 150ms; -khtml-animation-delay: 150ms; -moz-animation-delay: 150ms; -ms-animation-delay: 150ms; -o-animation-delay: 150ms; animation-delay: 150ms; } html #CMD .section__audio .image__container.aniInit.js-animate-active .ripple_ani.js-start-animate .ripple_3 { animation-name: ripple; animation-duration: 1200ms; animation-iteration-count: infinite; animation-direction: normal; animation-timing-function: ease-out; animation-delay: 300ms; opacity: 0; } html #CMD .section__audio .image__container.aniInit.js-animate-active .ripple_ani.js-start-animate .ripple_3 { -webkit-animation-name: ripple; -khtml-animation-name: ripple; -moz-animation-name: ripple; -ms-animation-name: ripple; -o-animation-name: ripple; animation-name: ripple; -webkit-animation-duration: 1200ms; -khtml-animation-duration: 1200ms; -moz-animation-duration: 1200ms; -ms-animation-duration: 1200ms; -o-animation-duration: 1200ms; animation-duration: 1200ms; -webkit-animation-iteration-count: 2; -khtml-animation-iteration-count: 2; -moz-animation-iteration-count: 2; -ms-animation-iteration-count: 2; -o-animation-iteration-count: 2; animation-iteration-count: 2; -webkit-animation-direction: normal; -khtml-animation-direction: normal; -moz-animation-direction: normal; -ms-animation-direction: normal; -o-animation-direction: normal; animation-direction: normal; -webkit-animation-timing-function: ease-out; -khtml-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-delay: 300ms; -khtml-animation-delay: 300ms; -moz-animation-delay: 300ms; -ms-animation-delay: 300ms; -o-animation-delay: 300ms; animation-delay: 300ms; } html #CMD .section__audio .image__container.aniInit.js-animate-active .ripple_ani.js-start-animate .ripple_4 { animation-name: ripple; animation-duration: 1200ms; animation-iteration-count: infinite; animation-direction: normal; animation-timing-function: ease-out; animation-delay: 450ms; opacity: 0; } html #CMD .section__audio .image__container.aniInit.js-animate-active .ripple_ani.js-start-animate .ripple_4 { -webkit-animation-name: ripple; -khtml-animation-name: ripple; -moz-animation-name: ripple; -ms-animation-name: ripple; -o-animation-name: ripple; animation-name: ripple; -webkit-animation-duration: 1200ms; -khtml-animation-duration: 1200ms; -moz-animation-duration: 1200ms; -ms-animation-duration: 1200ms; -o-animation-duration: 1200ms; animation-duration: 1200ms; -webkit-animation-iteration-count: 2; -khtml-animation-iteration-count: 2; -moz-animation-iteration-count: 2; -ms-animation-iteration-count: 2; -o-animation-iteration-count: 2; animation-iteration-count: 2; -webkit-animation-direction: normal; -khtml-animation-direction: normal; -moz-animation-direction: normal; -ms-animation-direction: normal; -o-animation-direction: normal; animation-direction: normal; -webkit-animation-timing-function: ease-out; -khtml-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-delay: 450ms; -khtml-animation-delay: 450ms; -moz-animation-delay: 450ms; -ms-animation-delay: 450ms; -o-animation-delay: 450ms; animation-delay: 450ms; } html #CMD .section__audio .image__container.aniInit.js-animate-active .ripple_ani.js-start-animate .ripple_5 { animation-name: ripple; animation-duration: 1200ms; animation-iteration-count: infinite; animation-direction: normal; animation-timing-function: ease-out; animation-delay: 600ms; opacity: 0; } html #CMD .section__audio .image__container.aniInit.js-animate-active .ripple_ani.js-start-animate .ripple_5 { -webkit-animation-name: ripple; -khtml-animation-name: ripple; -moz-animation-name: ripple; -ms-animation-name: ripple; -o-animation-name: ripple; animation-name: ripple; -webkit-animation-duration: 1200ms; -khtml-animation-duration: 1200ms; -moz-animation-duration: 1200ms; -ms-animation-duration: 1200ms; -o-animation-duration: 1200ms; animation-duration: 1200ms; -webkit-animation-iteration-count: 2; -khtml-animation-iteration-count: 2; -moz-animation-iteration-count: 2; -ms-animation-iteration-count: 2; -o-animation-iteration-count: 2; animation-iteration-count: 2; -webkit-animation-direction: normal; -khtml-animation-direction: normal; -moz-animation-direction: normal; -ms-animation-direction: normal; -o-animation-direction: normal; animation-direction: normal; -webkit-animation-timing-function: ease-out; -khtml-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-delay: 600ms; -khtml-animation-delay: 600ms; -moz-animation-delay: 600ms; -ms-animation-delay: 600ms; -o-animation-delay: 600ms; animation-delay: 600ms; } html #CMD .section__audio .image__container.aniInit.js-animate-active .ripple_ani.js-start-animate .ripple_6 { animation-name: ripple; animation-duration: 1200ms; animation-iteration-count: infinite; animation-direction: normal; animation-timing-function: ease-out; animation-delay: 750ms; opacity: 0; } html #CMD .section__audio .image__container.aniInit.js-animate-active .ripple_ani.js-start-animate .ripple_6 { -webkit-animation-name: ripple; -khtml-animation-name: ripple; -moz-animation-name: ripple; -ms-animation-name: ripple; -o-animation-name: ripple; animation-name: ripple; -webkit-animation-duration: 1200ms; -khtml-animation-duration: 1200ms; -moz-animation-duration: 1200ms; -ms-animation-duration: 1200ms; -o-animation-duration: 1200ms; animation-duration: 1200ms; -webkit-animation-iteration-count: 2; -khtml-animation-iteration-count: 2; -moz-animation-iteration-count: 2; -ms-animation-iteration-count: 2; -o-animation-iteration-count: 2; animation-iteration-count: 2; -webkit-animation-direction: normal; -khtml-animation-direction: normal; -moz-animation-direction: normal; -ms-animation-direction: normal; -o-animation-direction: normal; animation-direction: normal; -webkit-animation-timing-function: ease-out; -khtml-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-delay: 750ms; -khtml-animation-delay: 750ms; -moz-animation-delay: 750ms; -ms-animation-delay: 750ms; -o-animation-delay: 750ms; animation-delay: 750ms; } html #CMD .section__audio .image__container.aniInit.js-animate-active .ripple_ani.js-start-animate .ripple_7 { opacity: 1; transition: opacity 0ms ease 2470ms; } @media all and (min-width: 1280px) { html #CMD #section__oled2 { margin-top: 0; padding-top: 136px; } html #CMD #section__oled3 { padding-top: 104px; } html #CMD #section__oled5 { padding-top: 102px; } html #CMD #section__oled5 .modal-button-container { margin-top: 62px; } html #CMD #section__oled6 .wd__content { margin-left: -504px; } html #CMD #section__oled7_2 { padding-top: 102px; } html #CMD #section__oled7_2 .compare__animation { margin-top: 92px; } html #CMD #section__oled8 { padding-top: 102px; } html #CMD #section__oled8 .compare__animation { margin-top: 21px; } html #CMD #section__oled8 .modal-button-container { margin-top: 99px; } html #CMD #section__oled9 { padding-top: 106px; padding-bottom: 0; } html #CMD #section__oled9 .compare_content { margin-top: -6px; } } @media all and (min-width: 731px) and (max-width: 1279.5px) { html #CMD #section__oled2 { margin-top: 0; padding-top: 85px; } html #CMD #section__oled3 { padding-top: 120px; } html #CMD #section__oled3 .compare__animation { margin-bottom: 50px; } html #CMD #section__oled5 { padding-top: 109px; } html #CMD #section__oled6 { padding-top: 123px; } html #CMD #section__oled7_2 { padding-top: 108px; } html #CMD #section__oled8 { padding-top: 113px; } html #CMD #section__oled9 { padding-top: 120px; padding-bottom: 112px; } html #CMD #section__oled9 .compare_content { margin-top: -19px; } } @media all and (max-width: 730.5px) { html #CMD #section__oled2 { padding-top: 42px; } html #CMD #section__oled3 { padding-top: 93px; } html #CMD #section__oled6 { padding-top: 68px; } html #CMD #section__oled7_2 { padding-top: 86px; } html #CMD #section__oled8 { padding-top: 86px; } html #CMD #section__oled9 { padding-bottom: 0; } } html #CMD .section__audio .wd__content.clip_content { position: relative; z-index: 9; } html #CMD .section__audio .wd__content.clip_content .content__slogan { display: none; } html #CMD .section__audio .slick-tab-content { margin: 105px auto 0; } html #CMD .section__audio .slick-tab-content .slick-image { overflow: hidden; margin-top: 50px; box-sizing: initial; border-radius: 10px; background-color: #333738; } html #CMD .section__noise .nav__noise .nav__item { opacity: 1; transition: opacity ease-in 300ms; } html #CMD .section__noise .nav__noise .nav__item.js-selected { opacity: 1; } html #CMD .section__performance { display: inline-block; } html #CMD .section__performance .img__main { display: block; position: relative; left: 50%; } html #CMD .section__performance .wd__feature__list .feature-1 { margin-right: 0; margin-left: 0; width: 100%; } html #CMD .section__performance .wd__feature__list .feature-1 .wd__feature__describe__top, html #CMD .section__performance .wd__feature__list .feature-1 .wd__feature__describe { display: none; } html #CMD .section__performance .img { display: block; position: relative; left: 50%; } html #CMD .section__performance .image__container { position: relative; left: 0; margin-top: -10px; height: 700px; } html #CMD .section__performance .image__container .detect-point { position: absolute; z-index: 9999; top: 250px; left: 50%; width: 1px; height: 300px; } html #CMD .section__performance .image__container .img__bg { position: absolute; z-index: 3; top: 0; opacity: 0; margin-top: 0; margin-left: -600px; width: 1200px; height: 700px; background-color: #000; background-size: contain; transition: opacity 600ms ease; } html #CMD .section__performance .image__container .img__screen { position: absolute; z-index: 100; top: 27px; opacity: 0; margin-left: -235px; width: 772px; height: 597px; background-size: contain; transform: translateX(50%); transition: opacity 400ms ease; } html #CMD .section__performance .image__container .img__keyboard { position: absolute; z-index: 100; top: 565px; opacity: 0; margin-left: -586px; width: 718px; height: 110px; background-size: contain; transform: translateX(-50%); transition: opacity 400ms ease; } html #CMD .section__performance .image__container.active .img__bg { opacity: 1; transition-delay: 2000ms; } html #CMD .section__performance .image__container.active .img__screen, html #CMD .section__performance .image__container.active .img__keyboard { opacity: 1; transform: translateX(0); transition: opacity 400ms ease, transform 1500ms 500ms ease; } html #CMD .section__camera .imgText-container { display: flex; position: absolute; bottom: 94px; width: 100%; } html #CMD .section__camera .imgText-container .imgText { width: 50%; color: #fff; font-size: 1.25rem; } html #CMD .section__connectivity .imgText-container { position: absolute; top: 0; width: 100%; } html #CMD .section__connectivity .imgText-container .imgText { position: absolute; width: 150px; color: #fff; font-size: 1.25rem; text-align: left; } html #CMD .section__connectivity .slick-image-1 .text1 { top: 104px; left: 126px; } html #CMD .section__connectivity .slick-image-1 .text2 { top: 104px; right: 110px; text-align: right; } html #CMD .section__connectivity .slick-image-1 .text3 { top: 498px; left: 385px; text-align: right; } html #CMD .section__connectivity .slick-image-1 .text4 { top: 498px; left: 613px; } html #CMD .section__connectivity .slick-image-1 .text5 { top: 498px; right: 119px; text-align: right; } html #CMD .section__connectivity .slick-image-4 .text1 { top: 78px; left: 128px; width: 190px; } html #CMD .section__connectivity .slick-image-4 .text2 { top: 116px; right: 136px; text-align: center; } html #CMD .section__connectivity .slick-image-4 .text3 { top: 524px; left: 149px; text-align: center; } html #CMD .section__connectivity .slick-image-4 .text4 { top: 524px; left: 489px; text-align: center; } html #CMD .section__connectivity .slick-image-4 .text5 { top: 468px; right: 132px; width: 160px; text-align: center; } html #CMD .section__software2 { display: inline-block; } html #CMD .section__software2 .img__main { display: block; position: relative; left: 50%; } html #CMD .section__software2 .wd__feature__list .feature-1 .wd__feature__describe__top { display: none; } html #CMD .section__hinge { display: inline-block; } html #CMD .section__hinge .wd__feature__list .feature-1 .wd__feature__describe__top { display: none; } html #CMD .section__hinge .image__container { position: relative; margin-top: -349px; height: 1000px; } html #CMD .section__hinge .img__main, html #CMD .section__hinge .img__main_ani { display: block; left: 50%; } html #CMD .section__hinge .img__main { position: absolute; margin-left: -700px; width: 1400px; height: 1000px; } html #CMD .section__hinge .img__main_ani { position: absolute; z-index: 3; top: 0; opacity: 1; margin-top: 0; margin-left: -700px; width: 1400px; height: 1000px; transition: none; } html #CMD .section__hinge .image__container.active { transform: scale(1.2); transition: transform 1800ms cubic-bezier(0.62, 0.43, 0, 0.84); } html #CMD .section__hinge .image__container.active .img__main_ani { opacity: 0; transition: opacity 1200ms 600ms linear; } html #CMD .section__military .img__icon { height: 90px; } html #CMD .section__military .wd__feature__list .img__icon { height: 90px; background-size: contain; } html #CMD .section__military .wd__feature__list .wd__feature__describe { margin-top: 5px; } html #CMD .section__military .wd__feature__list .wd__feature__describe, html #CMD .section__military .wd__feature__list .wd__feature__describe span, html #CMD .section__military .wd__feature__list .wd__feature__describe sup, html #CMD .section__military .wd__feature__list .wd__feature__describe a, html #CMD .section__military .wd__feature__list .wd__feature__describe div { color: #fff; } html #CMD .section__military .wd__feature__list .wd__feature__describe span { display: block; } #CMD .section__military .img__icon1 { background-image: url("../images/large/1x/icon/s15/icon_1.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__military .img__icon1 { background-image: url("../images/large/2x/icon/s15/icon_1.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__military .img__icon1 { background-image: url("../images/large/2x/icon/s15/icon_1.png"); } } #CMD .section__military .img__icon2 { background-image: url("../images/large/2x/icon/s15/icon_2.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__military .img__icon2 { background-image: url("../images/large/2x/icon/s15/icon_2.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__military .img__icon2 { background-image: url("../images/large/2x/icon/s15/icon_2.png"); } } #CMD .section__military .img__icon3 { background-image: url("../images/large/1x/icon/s15/icon_3.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__military .img__icon3 { background-image: url("../images/large/2x/icon/s15/icon_3.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__military .img__icon3 { background-image: url("../images/large/2x/icon/s15/icon_3.png"); } } #CMD .section__military .img__icon4 { background-image: url("../images/large/1x/icon/s15/icon_4.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__military .img__icon4 { background-image: url("../images/large/2x/icon/s15/icon_4.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__military .img__icon4 { background-image: url("../images/large/2x/icon/s15/icon_4.png"); } } #CMD .section__military .img__icon5 { background-image: url("../images/large/1x/icon/s15/icon_5.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__military .img__icon5 { background-image: url("../images/large/2x/icon/s15/icon_5.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__military .img__icon5 { background-image: url("../images/large/2x/icon/s15/icon_5.png"); } } #CMD .section__military .img__icon6 { background-image: url("../images/large/1x/icon/s15/icon_6.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__military .img__icon6 { background-image: url("../images/large/2x/icon/s15/icon_6.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__military .img__icon6 { background-image: url("../images/large/2x/icon/s15/icon_6.png"); } } html #CMD .section__military { display: inline-block; } html #CMD .section__military .img__containter { position: relative; left: 50%; margin: 0 auto; } html #CMD .section__military .img__main_810 { position: absolute; z-index: 2; background-size: contain; } #CMD .section__military .img__main_810 { background-image: url("../images/large/1x/icon/s15/810H.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__military .img__main_810 { background-image: url("../images/large/2x/icon/s15/810H.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__military .img__main_810 { background-image: url("../images/large/2x/icon/s15/810H.png"); } } html #CMD .section__military .img__main { display: block; position: relative; } html #CMD .section__design { display: inline-block; } html #CMD .section__design .img__main { left: 50%; } html #CMD .section__design .gridItem { width: 100%; } html #CMD .section__design .gridItem .item_container { display: flex; justify-content: center; width: 100%; } html #CMD .section__design .gridItem .item_container .col_text { width: 310px; } html #CMD .section__design .img { border-radius: 10px; } html #CMD .section__design .img__main-1, html #CMD .section__design .img__main-2, html #CMD .section__design .img__main-3, html #CMD .section__design .img__main-4, html #CMD .section__design .img__main-5, html #CMD .section__design .img__main-6 { display: block; position: relative; } html #CMD .section__comment { margin-top: 0; padding-top: 0; padding-bottom: 0; } html #CMD #pdc.odin { z-index: 1; background-color: #000; } html #CMD .pdc-space-start { display: flex; } html #CMD .pdc-space-end { display: flex; } html #CMD .product_gallery, html #CMD .product_awards, html #CMD .product_videos, html #CMD .product_medias { background-color: transparent; } html #CMD .product_awards .splide__pagination::after, html #CMD .product_medias .splide__pagination::after, html #CMD .product_videos .splide__pagination::after { background-color: #00c6ff; } html #CMD .splide__pagination li .splide__pagination__page.is-active::after { background-color: #00c6ff; } html #CMD .product_awards .awards-container .awards-seeall { color: #00c6ff; } html #CMD .product_awards .awards-container .awards-seeall { color: #00c6ff; } html #CMD .product_videos .videos-container .videos-seeall { color: #00c6ff; } html #CMD .product_videos .videos-container .videos-seeall { color: #00c6ff; } html #CMD .product_medias .medias-container .medias-seeall { color: #00c6ff; } html #CMD .product_medias .medias-container .medias-seeall { color: #00c6ff; } html #CMD .arrow_link::after { display: none; } html #CMD .seeall_arrow-svg { stroke: #00c6ff; } html #CMD .product_medias .medias-container .medias-carousel { background-color: transparent; } html #CMD .product_medias .medias-container .medias-carousel .splide__track { background-color: #212026; } html #CMD .product_awards .awards-container .awards-carousel { background-color: transparent; } html #CMD .product_awards .awards-container .awards-carousel .splide__track { background-color: #212026; } html #CMD .product_videos .videos-container .videos-carousel, html #CMD .product_videos .videos-container .videos-carousel .splide__track { background-color: transparent; } html #CMD .product_videos .videos-container .videos-carousel .videos-item .item-content { background-color: #212026; } html #CMD #pdc.odin .product_awards .splide__pagination::after, html #CMD #pdc.odin .product_medias .splide__pagination::after, html #CMD #pdc.odin .product_videos .splide__pagination::after { background: #00c6ff; } html #CMD #pdc.odin .arrow_link::before { background: #00c6ff; } html #CMD #pdc.odin .product_awards.theme-white .awards-container .awards-seeall, html #CMD #pdc.odin .product_awards .awards-container .awards-seeall, html #CMD #pdc.odin .product_videos.theme-white .videos-container .videos-seeall, html #CMD #pdc.odin .product_videos .awards-container .awards-seeall, html #CMD #pdc.odin .product_medias.theme-white .medias-container .medias-seeall, html #CMD #pdc.odin .product_medias .awards-container .awards-seeall { color: #00c6ff; } html #CMD #pdc.odin .product_awards.total-pagination-1 .splide__pagination li .splide__pagination__page.is-active::after, html #CMD #pdc.odin .product_awards.total-pagination-2 .splide__pagination li .splide__pagination__page.is-active::after, html #CMD #pdc.odin .product_awards.total-pagination-3 .splide__pagination li .splide__pagination__page.is-active::after, html #CMD #pdc.odin .product_awards.total-pagination-4 .splide__pagination li .splide__pagination__page.is-active::after, html #CMD #pdc.odin .product_medias.total-pagination-1 .splide__pagination li .splide__pagination__page.is-active::after, html #CMD #pdc.odin .product_medias.total-pagination-2 .splide__pagination li .splide__pagination__page.is-active::after, html #CMD #pdc.odin .product_medias.total-pagination-3 .splide__pagination li .splide__pagination__page.is-active::after, html #CMD #pdc.odin .product_medias.total-pagination-4 .splide__pagination li .splide__pagination__page.is-active::after, html #CMD #pdc.odin .product_videos.total-pagination-1 .splide__pagination li .splide__pagination__page.is-active::after, html #CMD #pdc.odin .product_videos.total-pagination-2 .splide__pagination li .splide__pagination__page.is-active::after, html #CMD #pdc.odin .product_videos.total-pagination-3 .splide__pagination li .splide__pagination__page.is-active::after, html #CMD #pdc.odin .product_videos.total-pagination-4 .splide__pagination li .splide__pagination__page.is-active::after { background-color: #00c6ff; } html #CMD #pdc.odin .seeall_arrow-svg { stroke: #00c6ff; } html #CMD .section__pdc1 { z-index: 3; } @media all and (min-width: 1280px) { html #CMD .section__pdc1 .pdc-space-start { margin-top: 0; padding-top: 0; } html #CMD .section__pdc1 .pdc-space-end { padding-bottom: 0; } html #CMD .section__pdc2 .pdc-space-start { margin-top: 0; padding-top: 110px; } html #CMD .section__pdc2 .pdc-space-end { margin-bottom: 0; padding-bottom: 0; } } @media all and (max-width: 1279.5px) and (min-width: 731px) { html #CMD .section__pdc1 .pdc-space-start { margin-top: 65px; } html #CMD .section__pdc1 .pdc-space-end { margin-bottom: -50px; } html #CMD .section__pdc2 .pdc-space-start { margin-top: 0; padding-top: 80px; } html #CMD .section__pdc2 .pdc-space-end { margin-bottom: 0; padding-bottom: 0; } } @media all and (max-width: 730.5px) { html #CMD .section__pdc1 .pdc-space-start { padding-top: 35px; } html #CMD .section__pdc1 .pdc-space-end { margin-bottom: -18px; } html #CMD .section__pdc2 .pdc-space-start { margin-top: 0; padding-top: 70px; } html #CMD .section__pdc2 .pdc-space-end { margin-bottom: 0; padding-bottom: 14px; } } html #CMD .inner-view { background: rgba(0, 0, 0, 0); } html #CMD .inner-view .inner-view-container { position: relative; margin-right: auto; margin-left: auto; } html #CMD .inner-view .inner-view-container .modal-button { background-color: rgba(255, 255, 255, 0.6); color: black; border-color: black; } html #CMD .inner-view .inner-view-container .modal-button:hover { background-color: rgba(255, 255, 255, 0.6); color: rgba(0, 0, 0, 0.6); border-color: rgba(0, 0, 0, 0.6); } html #CMD .inner-view .inner-view-container .inner-modal { padding-bottom: 0; } html #CMD .inner-view .inner-view-container .inner-modal.modal-dolby, html #CMD .inner-view .inner-view-container .inner-modal.modal-inner4__1 { background-color: #f8f7f5; } html #CMD .inner-view .inner-view-container .inner-modal.modal-inner17 { background-color: #fff; } html #CMD .inner-view .inner-view-container .wd__section .wd__content { padding-left: 0; } html #CMD .inner-view .inner-view-container .wd__section .wd__content .content__slogan { color: #1c1b19; position: relative; top: 12px; left: 0; } html #CMD .inner-view .inner-view-container .wd__section .wd__content .content__title { color: #1c1b19; font-size: 34px; } html #CMD .inner-view .inner-view-container .wd__section .wd__content .content__info { color: #1c1b19; margin-top: 16px; } html #CMD .inner-view .inner-view-container .wd__section .wd__content .content__link { linkColor: #25aae5; } html #CMD .inner-view .inner-view-container .wd__section .wd__content .content__link { color: #25aae5; } html #CMD .inner-view .inner-view-container .wd__section .wd__content .content__link *, html #CMD .inner-view .inner-view-container .wd__section .wd__content .content__link span { color: #25aae5; } html #CMD .inner-view .inner-view-container .wd__section .wd__content .content__link::after { color: #25aae5; } html #CMD .inner-view .inner-view-container .wd__section .wd__content .content__link:link { color: #25aae5; } html #CMD .inner-view .inner-view-container .wd__section .wd__content .content__link:hover span { border-bottom: 1px solid #25aae5; } html #CMD .inner-view .inner-view-container .wd__section .wd__content .content__slogan::before, html #CMD .inner-view .inner-view-container .wd__section .wd__content .content__slogan::after, html #CMD .inner-view .inner-view-container .wd__section .wd__content .content__title::before, html #CMD .inner-view .inner-view-container .wd__section .wd__content .content__title::after { display: none; } html #CMD .inner-view .section__btn__home::before { background: none; } html #CMD .inner-view .icon { background-image: url("../images/large/1x/inner/icon_def.png") ; margin-top: -10px; margin-bottom: 10px; width: 62px; height: 62px; background-size: contain; } @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) { html #CMD .inner-view .icon { background-image: url("../images/large/2x/inner/icon_def.png"); } } html #CMD .inner-view #active__modal-performance, html #CMD .inner-view #active__modal-ultra__sharp, html #CMD .inner-view #active__modal-nano__edge, html #CMD .inner-view #active__modal-design, html #CMD .inner-view #active__modal-connectivity { background: #fff; } html #CMD .inner-view #active__modal-performance .inner-modal, html #CMD .inner-view #active__modal-performance section, html #CMD .inner-view #active__modal-ultra__sharp .inner-modal, html #CMD .inner-view #active__modal-ultra__sharp section, html #CMD .inner-view #active__modal-nano__edge .inner-modal, html #CMD .inner-view #active__modal-nano__edge section, html #CMD .inner-view #active__modal-design .inner-modal, html #CMD .inner-view #active__modal-design section, html #CMD .inner-view #active__modal-connectivity .inner-modal, html #CMD .inner-view #active__modal-connectivity section { background: #fff; } html #CMD .inner-view #active__modal-performance .wd__section .wd__content .content__title, html #CMD .inner-view #active__modal-ultra__sharp .wd__section .wd__content .content__title, html #CMD .inner-view #active__modal-nano__edge .wd__section .wd__content .content__title, html #CMD .inner-view #active__modal-design .wd__section .wd__content .content__title, html #CMD .inner-view #active__modal-connectivity .wd__section .wd__content .content__title { color: #1c1b19; } html #CMD .inner-view #active__modal-performance .wd__section .wd__content .content__info, html #CMD .inner-view #active__modal-ultra__sharp .wd__section .wd__content .content__info, html #CMD .inner-view #active__modal-nano__edge .wd__section .wd__content .content__info, html #CMD .inner-view #active__modal-design .wd__section .wd__content .content__info, html #CMD .inner-view #active__modal-connectivity .wd__section .wd__content .content__info { color: #1c1b19; } html #CMD .inner-view #active__modal-performance .wd__section .wd__content .content__link, html #CMD .inner-view #active__modal-ultra__sharp .wd__section .wd__content .content__link, html #CMD .inner-view #active__modal-nano__edge .wd__section .wd__content .content__link, html #CMD .inner-view #active__modal-design .wd__section .wd__content .content__link, html #CMD .inner-view #active__modal-connectivity .wd__section .wd__content .content__link { Color: #1c1b19; } html #CMD .inner-view #active__modal-performance .wd__section .wd__content .content__comment, html #CMD .inner-view #active__modal-ultra__sharp .wd__section .wd__content .content__comment, html #CMD .inner-view #active__modal-nano__edge .wd__section .wd__content .content__comment, html #CMD .inner-view #active__modal-design .wd__section .wd__content .content__comment, html #CMD .inner-view #active__modal-connectivity .wd__section .wd__content .content__comment { color: #1c1b19; } html #CMD .inner-view #active__modal-performance .wd__section .wd__feature__list .wd__feature .wd__feature__describe, html #CMD .inner-view #active__modal-performance .wd__section .wd__feature__list .wd__feature .wd__feature__describe__top, html #CMD .inner-view #active__modal-ultra__sharp .wd__section .wd__feature__list .wd__feature .wd__feature__describe, html #CMD .inner-view #active__modal-ultra__sharp .wd__section .wd__feature__list .wd__feature .wd__feature__describe__top, html #CMD .inner-view #active__modal-nano__edge .wd__section .wd__feature__list .wd__feature .wd__feature__describe, html #CMD .inner-view #active__modal-nano__edge .wd__section .wd__feature__list .wd__feature .wd__feature__describe__top, html #CMD .inner-view #active__modal-design .wd__section .wd__feature__list .wd__feature .wd__feature__describe, html #CMD .inner-view #active__modal-design .wd__section .wd__feature__list .wd__feature .wd__feature__describe__top, html #CMD .inner-view #active__modal-connectivity .wd__section .wd__feature__list .wd__feature .wd__feature__describe, html #CMD .inner-view #active__modal-connectivity .wd__section .wd__feature__list .wd__feature .wd__feature__describe__top { color: #1c1b19; } html #CMD .inner-view #active__modal-modalSectionNoise { background: #2a2a2a; } html #CMD .inner-view #active__modal-modalSectionNoise .inner-modal, html #CMD .inner-view #active__modal-modalSectionNoise section { background: #2a2a2a; } html #CMD .inner-view .section__oled .wd__content .content__title span { -webkit-text-fill-color: unset; background-image: none; color: #fff; } html #CMD .inner-view #active__modal-inner4__1 .modal-button, html #CMD .inner-view #active__modal-dolby .modal-button { background-color: rgba(255, 255, 255, 0.6); color: black; border-color: black; } html #CMD .inner-view #active__modal-inner4__1 .modal-button:hover, html #CMD .inner-view #active__modal-dolby .modal-button:hover { background-color: rgba(255, 255, 255, 0.6); color: rgba(0, 0, 0, 0.6); border-color: rgba(0, 0, 0, 0.6); } html #CMD .inner-view #active__modal-modalSectionNoise .modal-button { background-color: rgba(0, 0, 0, 0.6); color: white; border-color: white; } html #CMD .inner-view #active__modal-modalSectionNoise .modal-button:hover { background-color: rgba(0, 0, 0, 0.6); color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.6); } html #CMD .wd__section .modal-button-container .modal-button { border-width: 2px; } html #CMD .wd__section .modal-button-container .modal-button .modal-inner-text { letter-spacing: 0.02em; } @keyframes maxWaveLevel { 0% { transform: translateX(-5%); } 30% { transform: translateX(-5%); } 40% { transform: translateX(-15%); } 60% { transform: translateX(-2%); } 80% { transform: translateX(-12%); } 100% { transform: translateX(-5%); } } @keyframes weakWaveLevel { 0% { transform: translateX(-45%); } 30% { transform: translateX(-45%); } 40% { transform: translateX(-55%); } 60% { transform: translateX(-42%); } 80% { transform: translateX(-52%); } 100% { transform: translateX(-45%); } } @keyframes ripple2 { 0% { opacity: 0; } 10% { opacity: 0; } 50% { opacity: 1; } 90% { opacity: 0; } 100% { opacity: 0; } } html #CMD .section__inner__noise { padding-top: 95px; padding-bottom: 190px; background: #2a2a2a; } html #CMD .section__inner__noise .wd__content { width: 100% !important; } html #CMD .section__inner__noise .wd__content .content__title { color: #fff !important; } html #CMD .section__inner__noise .wd__content .content__info { color: #fff !important; } html #CMD .section__inner__noise .noise__switcher { display: flex; align-items: center; justify-content: center; margin-top: 80px; text-align: center; transition: opacity 350ms ease; flex-wrap: wrap; } html #CMD .section__inner__noise .noise__switcher .control { display: block; position: relative; box-sizing: border-box; width: 100%; } html #CMD .section__inner__noise .noise__switcher span { display: inline-block; margin-right: 10px; color: #fff; font-size: 25px; font-weight: 300; } html #CMD .section__inner__noise .noise__switcher .img__switcher { display: inline-block; cursor: pointer; margin: 0; width: 90px; height: 42px; border-width: 0; background-color: transparent; } #CMD .section__inner__noise .noise__switcher .img__switcher { background-image: url("../images/large/1x/animation/noise/btn-off.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__inner__noise .noise__switcher .img__switcher { background-image: url("../images/large/2x/animation/noise/btn-off.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__inner__noise .noise__switcher .img__switcher { background-image: url("../images/large/2x/animation/noise/btn-off.png"); } } #CMD .section__inner__noise .noise__switcher .img__switcher.js-active { background-image: url("../images/large/1x/animation/noise/btn-on.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__inner__noise .noise__switcher .img__switcher.js-active { background-image: url("../images/large/2x/animation/noise/btn-on.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__inner__noise .noise__switcher .img__switcher.js-active { background-image: url("../images/large/2x/animation/noise/btn-on.png"); } } html #CMD .section__inner__noise .inner__noise { position: relative; left: 50%; margin-top: -200px; margin-right: auto; margin-bottom: -60px; margin-left: -1280px; width: 2560px; height: 700px; } html #CMD .section__inner__noise .inner__noise .img__main { width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; } #CMD .section__inner__noise .img__main { background-image: url("../images/large/1x/animation/innerNoise/bg.jpg"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__inner__noise .img__main { background-image: url("../images/large/2x/animation/innerNoise/bg.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__inner__noise .img__main { background-image: url("../images/large/2x/animation/innerNoise/bg.jpg"); } } html #CMD .section__inner__noise .inner__noise svg { position: absolute; left: 50%; opacity: 0; width: 60px; height: 60px; transform: rotate(17deg); } html #CMD .section__inner__noise .inner__noise svg#people__1 { top: 160px; margin-left: -360px; fill: #e6f27b; } html #CMD .section__inner__noise .inner__noise svg#people__2 { top: 143px; margin-left: 288px; transform: rotate(-17deg) scale(-1, 1); fill: #e6f27b; } html #CMD .section__inner__noise .inner__noise svg#people__3 { top: 222px; margin-left: -539px; fill: #0f0; } html #CMD .section__inner__noise .inner__noise svg#people__4 { top: 180px; margin-left: 468px; transform: rotate(-17deg) scale(-1, 1); fill: #0f0; } html #CMD .section__inner__noise .inner__noise svg.js-active { animation-name: ripple2; animation-duration: 650ms; animation-iteration-count: infinite; animation-timing-function: ease-out; animation-delay: 40ms; } html #CMD .section__inner__noise .inner__noise .screen__animation { position: absolute; top: 287px; left: 50%; margin-left: -183px; width: 346px; height: 228px; } html #CMD .section__inner__noise .inner__noise .screen__animation .voice__level { position: absolute; } html #CMD .section__inner__noise .inner__noise .screen__animation .voice__level .img__interface { position: absolute; z-index: 90; top: 0; left: 0; width: 130px; height: 50px; } #CMD .section__inner__noise .screen__animation .img__interface { background-image: url("../images/large/1x/animation/innerNoise/interface.png"); } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { #CMD .section__inner__noise .screen__animation .img__interface { background-image: url("../images/large/2x/animation/innerNoise/interface.webp"); } } @media only screen and (minpixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .image-old #CMD .section__inner__noise .screen__animation .img__interface { background-image: url("../images/large/2x/animation/innerNoise/interface.png"); } } html #CMD .section__inner__noise .inner__noise .screen__animation .voice__level .default__color { position: absolute; overflow: hidden; z-index: 80; top: 2px; left: 5px; width: 120px; height: 46px; background-color: #545454; } html #CMD .section__inner__noise .inner__noise .screen__animation .voice__level .default__color .energy__bar { position: absolute; z-index: 84; top: 0; left: 0; width: 120px; height: 46px; background-color: #0f0; transform: translateX(-100%); animation: none; } html #CMD .section__inner__noise .inner__noise .screen__animation .voice__level.voice__1 { top: 40px; left: 14px; } html #CMD .section__inner__noise .inner__noise .screen__animation .voice__level.voice__2 { top: 40px; left: 337px; transform: scale(-1, 1); } html #CMD .section__inner__noise .inner__noise .screen__animation .voice__level.voice__3 { top: 140px; left: 14px; } html #CMD .section__inner__noise .inner__noise .screen__animation .voice__level.voice__4 { top: 140px; left: 337px; transform: scale(-1, 1); } html #CMD .section__inner__noise .inner__noise .screen__animation .voice__level.max__level .default__color .energy__bar { animation: maxWaveLevel 800ms linear 100ms infinite forwards; } html #CMD .section__inner__noise .inner__noise .screen__animation .voice__level.weak__level .default__color .energy__bar { background-color: #e6f27b; animation: weakWaveLevel 800ms linear 100ms infinite forwards; } html #CMD .section__inner__noise .btn__noise { cursor: pointer; margin: 20px 10px; width: 36px; height: 36px; border-width: 0; background-color: transparent; } html #CMD .section__inner__noise .btn__noise.pause { background-image: url("../images/icon/icon_pause.svg") ; } @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) { html #CMD .section__inner__noise .btn__noise.pause { background-image: url("../images/icon/icon_pause.svg"); } } html #CMD .section__inner__noise .btn__noise.play { background-image: url("../images/icon/icon_play.svg") ; } @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) { html #CMD .section__inner__noise .btn__noise.play { background-image: url("../images/icon/icon_play.svg"); } } html #CMD .section__adobeBanner .banner__container .wd__content { position: relative; z-index: 9; } html #CMD .section__adobeBanner .banner__container .wd__content .content__title { margin-top: 0; color: #000; } html #CMD .section__adobeBanner .banner__container .wd__content .content__info { color: #000; } html #CMD .section__adobeBanner .banner__container .wd__content .content__link, html #CMD .section__adobeBanner .banner__container .wd__content .content__link * { color: #000; } html #CMD .section__adobeBanner .banner__container .wd__content .content__link::after { color: #000; } html #CMD .section__adobeBanner .banner__container .wd__content .content__link:hover span { border-bottom: 1px solid #000; } html #CMD .section__adobeBanner { background-color: #fff; } html #CMD .section__adobeBanner .banner__container .banner__item { position: relative; background-color: #fef8e0; } html #CMD .section__adobeBanner .banner__container .img__main { z-index: 1; background-size: contain; } @media all and (min-width: 1280px) { html #CMD .section__kv { margin-top: 0; padding-top: 65px; padding-bottom: 93px; } html #CMD .section__kv .wd__content { width: 90%; max-width: 1250px; } html #CMD .section__kv .wd__content.top-content { margin-top: 0; } html #CMD .section__kv .wd__content.top-content .content__title { left: 0; margin-top: 0; padding-left: 0; font-size: 3rem; } html #CMD .section__kv .wd__content.bottom-content { margin-top: 55px; } html #CMD .section__kv .wd__content.bottom-content .content__title { padding-left: 0; font-size: 2.3125rem; } html #CMD .section__kv .wd__content.bottom-content .content__info { margin-top: 18px; max-width: 990px; font-size: 1.5rem; } html #CMD .section__kv .vr__screen { margin-top: -520px; margin-bottom: 0; } html #CMD .section__kv .kv__logo { font-size: 3.875rem; } html #CMD .section__kv .img__bg_dark { top: -275px; } html #CMD .section__kv .img__screen_light { top: -275px; } #CMD .section__kv .img__bg_dark { background-image: url("../images/large/1x/animation/s1/bg_dark.jpg"); } } @media all and (min-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5), all and (min-width: 1280px) and (min-resolution: 144dpi) { #CMD .section__kv .img__bg_dark { background-image: url("../images/large/2x/animation/s1/bg_dark.webp"); } } @media all and (min-width: 1280px) and (min-device-pixel-ratio: 1.5), all and (min-width: 1280px) and (min-resolution: 144dpi) { .image-old #CMD .section__kv .img__bg_dark { background-image: url("../images/large/2x/animation/s1/bg_dark.jpg"); } } @media all and (min-width: 1280px) { #CMD .section__kv .img__screen_light { background-image: url("../images/large/1x/animation/s1/bg_light.jpg"); } #CMD .section__kv .img__screen_light { mask: url("../images/large/1x/animation/s1/bg_light_mask.png"); mask-position: center; mask-size: contain; -webkit-mask-image: url("../images/large/1x/animation/s1/bg_light_mask.png"); -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; } } @media all and (min-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5), all and (min-width: 1280px) and (min-resolution: 144dpi) { #CMD .section__kv .img__screen_light { background-image: url("../images/large/2x/animation/s1/bg_light.webp"); } } @media all and (min-width: 1280px) and (min-device-pixel-ratio: 1.5), all and (min-width: 1280px) and (min-resolution: 144dpi) { .image-old #CMD .section__kv .img__screen_light { background-image: url("../images/large/2x/animation/s1/bg_light.jpg"); } } @media all and (min-width: 1280px) { #CMD .section__kv .img__bg_light { background-image: url("../images/large/1x/animation/s1/bg_light.jpg"); } } @media all and (min-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5), all and (min-width: 1280px) and (min-resolution: 144dpi) { #CMD .section__kv .img__bg_light { background-image: url("../images/large/2x/animation/s1/bg_light.webp"); } } @media all and (min-width: 1280px) and (min-device-pixel-ratio: 1.5), all and (min-width: 1280px) and (min-resolution: 144dpi) { .image-old #CMD .section__kv .img__bg_light { background-image: url("../images/large/2x/animation/s1/bg_light.jpg"); } } @media all and (min-width: 1280px) { html #CMD .section__kv .img__evo { margin-top: -627px; margin-left: -608px; height: 140px; } } @media all and (min-width: 731px) and (max-width: 1279.5px) { html #CMD .section__kv { padding-top: 64px; padding-bottom: 65px; } html #CMD .section__kv .wd__content { width: 90%; max-width: 1250px; } html #CMD .section__kv .wd__content.top-content { margin-top: 4px; } html #CMD .section__kv .wd__content.top-content .content__title { margin-top: 0; padding-left: 0; font-size: 2.3125rem; } html #CMD .section__kv .wd__content.bottom-content { width: 98%; max-width: 780px; } html #CMD .section__kv .wd__content.bottom-content .content__title { padding-left: 0; font-size: 2.3125rem; } html #CMD .section__kv .wd__content.bottom-content .content__info { margin-top: 22px; width: 95%; max-width: 840px; font-size: 1.5rem; } html #CMD .section__kv .bottom__content { margin-top: -460px; } html #CMD .section__kv .vr__screen { margin-top: 0; margin-bottom: 0; } html #CMD .section__kv .kv__logo { font-size: 2.875rem; } html #CMD .section__kv .image__container { margin-top: -200px; height: 1500px; } html #CMD .section__kv .img__bg_dark { left: 50%; margin-left: -730px; width: 1536px; height: 1500px; } #CMD .section__kv .img__bg_dark { background-image: url("../images/medium/1x/animation/s1/bg_dark.jpg"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) and (-webkit-min-device-pixel-ratio: 1.5), all and (min-width: 731px) and (max-width: 1279.5px) and (min-resolution: 144dpi) { #CMD .section__kv .img__bg_dark { background-image: url("../images/medium/2x/animation/s1/bg_dark.webp"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) and (min-device-pixel-ratio: 1.5), all and (min-width: 731px) and (max-width: 1279.5px) and (min-resolution: 144dpi) { .image-old #CMD .section__kv .img__bg_dark { background-image: url("../images/medium/2x/animation/s1/bg_dark.jpg"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) { html #CMD .section__kv .img__screen_light { left: 50%; margin-left: -730px; width: 1536px; height: 1500px; } #CMD .section__kv .img__screen_light { background-image: url("../images/medium/1x/animation/s1/bg_light.jpg"); } #CMD .section__kv .img__screen_light { mask: url("../images/medium/1x/animation/s1/bg_light_mask.png"); mask-position: center; mask-size: contain; -webkit-mask-image: url("../images/medium/1x/animation/s1/bg_light_mask.png"); -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; } } @media all and (min-width: 731px) and (max-width: 1279.5px) and (-webkit-min-device-pixel-ratio: 1.5), all and (min-width: 731px) and (max-width: 1279.5px) and (min-resolution: 144dpi) { #CMD .section__kv .img__screen_light { background-image: url("../images/medium/2x/animation/s1/bg_light.webp"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) and (min-device-pixel-ratio: 1.5), all and (min-width: 731px) and (max-width: 1279.5px) and (min-resolution: 144dpi) { .image-old #CMD .section__kv .img__screen_light { background-image: url("../images/medium/2x/animation/s1/bg_light.jpg"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) { html #CMD .section__kv .img__bg_light { top: 50%; left: 50%; margin-top: -750px; margin-left: -730px; width: 1536px; height: 1500px; } #CMD .section__kv .img__bg_light { background-image: url("../images/medium/1x/animation/s1/bg_light.jpg"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) and (-webkit-min-device-pixel-ratio: 1.5), all and (min-width: 731px) and (max-width: 1279.5px) and (min-resolution: 144dpi) { #CMD .section__kv .img__bg_light { background-image: url("../images/medium/2x/animation/s1/bg_light.webp"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) and (min-device-pixel-ratio: 1.5), all and (min-width: 731px) and (max-width: 1279.5px) and (min-resolution: 144dpi) { .image-old #CMD .section__kv .img__bg_light { background-image: url("../images/medium/2x/animation/s1/bg_light.jpg"); } } @media all and (min-width: 731px) and (max-width: 1279.5px) { html #CMD .section__kv .img__evo { margin-top: -416px; margin-left: -358px; height: 106px; filter: drop-shadow(-4px 0 5px rgba(255, 255, 255, 0.4)); } } @media all and (max-width: 730.5px) { html #CMD .section__kv { padding-top: 41px; padding-bottom: 40px; } html #CMD .section__kv .wd__content { width: 90%; max-width: 1250px; } html #CMD .section__kv .wd__content.top-content { margin-top: 0; } html #CMD .section__kv .wd__content.top-content .content__title { left: 0; margin-top: 4px; padding-left: 0; width: 100%; font-size: 1.5625rem; text-align: center; } html #CMD .section__kv .wd__content.bottom-content { margin-top: 31px; } html #CMD .section__kv .wd__content.bottom-content .content__title { padding-left: 0; font-size: 1.6875rem; } html #CMD .section__kv .wd__content.bottom-content .content__info { margin-top: 18px; max-width: 1010px; font-size: 1.25rem; } html #CMD .section__kv .bottom__content { margin-top: -231px; } html #CMD .section__kv .vr__screen { margin-top: 15px; margin-bottom: 0; } html #CMD .section__kv .kv__logo { font-size: 1.875rem; line-height: 1; } html #CMD .section__kv .image__container { margin-top: -97px; height: 750px; } html #CMD .section__kv .img__bg_dark { left: 50%; margin-left: -384px; width: 768px; height: 750px; } #CMD .section__kv .img__bg_dark { background-image: url("../images/small/1x/animation/s1/bg_dark.jpg"); } } @media all and (max-width: 730.5px) and (-webkit-min-device-pixel-ratio: 1.5), all and (max-width: 730.5px) and (min-resolution: 144dpi) { #CMD .section__kv .img__bg_dark { background-image: url("../images/small/2x/animation/s1/bg_dark.webp"); } } @media all and (max-width: 730.5px) and (min-device-pixel-ratio: 1.5), all and (max-width: 730.5px) and (min-resolution: 144dpi) { .image-old #CMD .section__kv .img__bg_dark { background-image: url("../images/small/2x/animation/s1/bg_dark.jpg"); } } @media all and (max-width: 730.5px) { html #CMD .section__kv .img__screen_light { left: 50%; margin-left: -384px; width: 768px; height: 750px; } #CMD .section__kv .img__screen_light { background-image: url("../images/small/1x/animation/s1/bg_light.jpg"); } #CMD .section__kv .img__screen_light { mask: url("../images/small/1x/animation/s1/bg_light_mask.png"); mask-position: center; mask-size: contain; -webkit-mask-image: url("../images/small/1x/animation/s1/bg_light_mask.png"); -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; } } @media all and (max-width: 730.5px) and (-webkit-min-device-pixel-ratio: 1.5), all and (max-width: 730.5px) and (min-resolution: 144dpi) { #CMD .section__kv .img__screen_light { background-image: url("../images/small/2x/animation/s1/bg_light.webp"); } } @media all and (max-width: 730.5px) and (min-device-pixel-ratio: 1.5), all and (max-width: 730.5px) and (min-resolution: 144dpi) { .image-old #CMD .section__kv .img__screen_light { background-image: url("../images/small/2x/animation/s1/bg_light.jpg"); } } @media all and (max-width: 730.5px) { html #CMD .section__kv .img__bg_light { left: 50%; margin-left: -384px; width: 768px; height: 750px; margin-top: -375px; } #CMD .section__kv .img__bg_light { background-image: url("../images/small/1x/animation/s1/bg_light.jpg"); } } @media all and (max-width: 730.5px) and (-webkit-min-device-pixel-ratio: 1.5), all and (max-width: 730.5px) and (min-resolution: 144dpi) { #CMD .section__kv .img__bg_light { background-image: url("../images/small/2x/animation/s1/bg_light.webp"); } } @media all and (max-width: 730.5px) and (min-device-pixel-ratio: 1.5), all and (max-width: 730.5px) and (min-resolution: 144dpi) { .image-old #CMD .section__kv .img__bg_light { background-image: url("../images/small/2x/animation/s1/bg_light.jpg"); } } @media all and (max-width: 730.5px) { html #CMD .section__kv .img__evo { margin-top: 60px; margin-left: -185px; height: 74px; filter: drop-shadow(-4px 0 5px rgba(255, 255, 255, 0.4)); } html #CMD .section__kv .screen_mask .img__screen_mask { transform: translateY(-320px); } html #CMD .section__kv .img__brush { transform: translate3d(0, 70px, 0) rotate(8deg) scale(0.8); } html #CMD .section__kv .image__container.active .screen_mask .img__screen_mask { opacity: 1; transform: translate3d(0, 450px, 0); } html #CMD .section__kv .image__container.active .img__brush { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); } html #CMD .section__kv .wd__content .content__title sup.sign-cr { top: -0.1em; } html #CMD .section__kv .wd__content .content__title sup.sign-star { top: -0.43em; } html #CMD .section__kv .wd__content .content__title sup.footnote-num { top: -1.26em; } html #CMD .section__kv .wd__content .content__info sup { vertical-align: baseline; } html #CMD .section__kv .wd__content .content__info sup.sign-tm { top: 0; font-size: 1em; } html #CMD .section__kv .wd__content .content__info sup.sign-cr { top: 0; font-size: 1.2em; } html #CMD .section__kv .wd__content .content__info sup.sign-star { top: -0.06em; font-size: 1.2em; } html #CMD .section__kv .wd__content .content__info sup.footnote-num { top: -0.65em; font-size: 0.65em; } } .video-bottom, .media-bottom { position: relative; } .cmd__guideline { position: absolute; z-index: 1000000000000; left: 0; opacity: 0; width: 100vw; transition: opacity 400ms ease-out; pointer-events: none !important; } .cmd__guideline * { pointer-events: none !important; } .cmd__guideline.active { opacity: 1; pointer-events: none; } .cmd__guideline.guideline-slogan { bottom: 64px; height: 242px; background: rgba(219, 77, 109, 0.3); } .cmd__guideline.guideline-title { top: -43px; height: 54px; background: rgba(251, 150, 110, 0.3); } .cmd__guideline.guideline-info { top: -31px; height: 36px; background: rgba(0, 137, 108, 0.3); } .cmd__guideline.guideline-hl { top: -73px; height: 83px; background: rgba(193, 50, 142, 0.3); } .cmd__guideline.guideline-hldesb { top: -9px; width: 100%; height: 13px; background: rgba(88, 178, 220, 0.3); } .cmd__guideline.guideline-hlb { bottom: -60px; height: 65px; background: rgba(144, 180, 75, 0.3); } .cmd__guideline.guideline-pdprice-top { bottom: 129px; height: 72px; background: rgba(46, 92, 110, 0.3); } .cmd__guideline.guideline-pdprice-bottom { bottom: -72px; height: 72px; background: rgba(46, 92, 110, 0.3); } .cmd__guideline.guideline-pdguide { bottom: 30px; width: 100%; height: 37px; background: rgba(88, 178, 220, 0.3); } .cmd__guideline.guideline-pdvideos { top: -91px; height: 214px; background: rgba(144, 180, 75, 0.3); } .cmd__guideline.guideline-pdvideos-bottom { top: 0; height: 214px; background: rgba(144, 180, 75, 0.3); } .cmd__guideline.guideline-pdmedias-bottom { top: -14px; height: 214px; background: rgba(144, 180, 75, 0.3); } .guideline-floatspace { position: fixed; top: 50%; bottom: 64px; height: 205px; background: rgba(219, 77, 109, 0.3); } .guideline-floatspace::after { display: block; position: absolute; bottom: 0; width: 100%; height: 110px; color: white; background: rgba(251, 150, 110, 0.3); content: 'image interval'; } .guideline-floatspace::before { display: block; position: absolute; width: 100%; height: inherit; color: white; content: 'section interval'; } .guideline__controller { position: fixed; overflow: hidden; z-index: 99999999999; top: 0; margin-left: 0; padding: 10px 15px 15px 10px; width: 30px; height: 30px; text-align: center; background: rgba(112, 124, 116, 0.8); border-top-left-radius: 0%; border-top-right-radius: 0%; border-bottom-left-radius: 0%; border-bottom-right-radius: 10px; } .guideline__controller .guideline__logo { position: absolute; top: 13px; left: 5px; width: 40px; height: 40px; color: #eee; font-size: 22px; } @keyframes showAnimation { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } .guideline__controller.visible { margin-left: 0; width: auto; height: auto; } .guideline__controller.visible .control { display: block; } .guideline__controller.visible .guideline__logo::before { display: block; position: absolute; z-index: -1; top: -1px; left: 5px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 0, 0, 0.3); animation: showAnimation 3000ms ease-in-out infinite; content: ''; } .guideline__controller .guideline__logo { position: absolute; top: 13px; left: 5px; width: 40px; height: 40px; color: #eee; font-size: 22px; } .guideline__controller .control { display: none; position: relative; cursor: pointer; margin: 10px 10px 10px 30px; padding-left: 30px; color: #fffffc; font-size: 20px; text-align: left; } .guideline__controller .control.main__item { margin-top: 22px; } .guideline__controller .control.sub__item { margin-left: 50px; } .guideline__controller .control input { position: absolute; z-index: -1; opacity: 0; } .guideline__controller .control .control__indicator { position: absolute; top: 2px; left: 0; width: 20px; height: 20px; background: #e6e6e6; } .guideline__controller .control .control__indicator::after { display: block; position: absolute; top: 4px; left: 8px; opacity: 0; width: 3px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); content: ''; } .guideline__controller .control input:checked ~ .control__indicator { background: #2aa1c0; } .guideline__controller .control input:checked ~ .control__indicator::after { opacity: 1; } @media all and (min-width: 731px) and (max-width: 1279.5px) { .cmd__guideline.guideline-slogan { top: -154px; height: 166px; } .cmd__guideline.guideline-title { top: -31px; height: 50px; } .cmd__guideline.guideline-info { top: -37px; height: 50px; } .cmd__guideline.guideline-hl { top: -59px; height: 69px; } .cmd__guideline.guideline-pdprice-top { bottom: 129px; height: 53px; } .cmd__guideline.guideline-pdprice-bottom { bottom: -53px; height: 53px; } .cmd__guideline.guideline-pdguide { bottom: 30px; height: 37px; } .cmd__guideline.guideline-pdvideos { top: -13px; height: 165px; } .cmd__guideline.guideline-pdvideos-bottom { top: 0; height: 165px; } .cmd__guideline.guideline-pdmedias-bottom { top: -8px; height: 165px; } .guideline-floatspace { height: 167px; } .guideline-floatspace::after { height: 95px; } } @media all and (min-width: 960px) and (max-width: 1300px) { .cmd__guideline.guideline-pdmedias-bottom { top: -34px; } } @media all and (max-width: 730.5px) { .cmd__guideline.guideline-slogan { top: -96px; height: 100px; } .cmd__guideline.guideline-title { top: -23px; height: 29px; } .cmd__guideline.guideline-info { top: -24px; height: 27px; } .cmd__guideline.guideline-hl { top: -41px; height: 48px; } .cmd__guideline.guideline-pdprice-top { bottom: 116px; height: 32px; } .cmd__guideline.guideline-pdprice-bottom { bottom: -32px; height: 32px; } .cmd__guideline.guideline-pdguide { bottom: 21px; height: 28px; } .cmd__guideline.guideline-pdvideos { top: -9px; height: 91px; } .cmd__guideline.guideline-pdvideos-bottom { top: 0; height: 91px; } .cmd__guideline.guideline-pdmedias-bottom { top: -76px; height: 91px; } .guideline-floatspace { height: 102px; } .guideline-floatspace::after { height: 52px; } } @media all and (min-width: 600px) and (max-width: 720px) { .cmd__guideline.guideline-pdmedias-bottom { top: -29px; } }