@charset "UTF-8";
@font-face {
  font-family: 'Roboto';
  src: url("../fonts/Roboto-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'Roboto';
  src: url("../fonts/Roboto-Light.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'TT-Norms-Pro-Medium';
  src: url("../fonts/TT-Norms-Pro-Medium.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'TT-Norms-Pro-Normal';
  src: url("../fonts/TT-Norms-Pro-Normal.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap; }

@-webkit-keyframes bottomFadeIn {
  from {
    -webkit-transform: translate(0, 10%);
            transform: translate(0, 10%);
    opacity: 0; }
  to {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 1; } }

@keyframes bottomFadeIn {
  from {
    -webkit-transform: translate(0, 10%);
            transform: translate(0, 10%);
    opacity: 0; }
  to {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 1; } }

@-webkit-keyframes fadeIn {
  from {
    visibility: hidden;
    opacity: 0; }
  to {
    visibility: visible;
    opacity: 1; } }

@keyframes fadeIn {
  from {
    visibility: hidden;
    opacity: 0; }
  to {
    visibility: visible;
    opacity: 1; } }

html, body {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0;
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 200;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.4;
  background-color: #000;
  -webkit-overflow-scrolling: touch; }

@media only screen and (min-width: 768px) {
  .word-wrap {
    display: block; } }

.word-wrap-m {
  display: block; }
  @media only screen and (min-width: 768px) {
    .word-wrap-m {
      display: inline-block; } }

@media only screen and (min-width: 1500px) {
  .container {
    width: 1380px; } }

@media only screen and (min-width: 1500px) {
  .container-fluid {
    max-width: 1920px; } }

.dropdown-content.aci-show {
  display: block; }

.noscript {
  padding: 20px;
  color: #fff;
  margin: 0;
  position: fixed;
  bottom: 0px;
  display: block;
  width: 100%;
  z-index: 9999;
  text-align: center;
  background-color: #d39d67; }

sup {
  font-size: 60%; }

.meta {
  position: fixed;
  left: -1000%; }

video {
  width: 100%; }

@media only screen and (max-width: 768px) {
  iframe {
    width: 100%; } }

#hd .desktop {
  display: none; }
  @media only screen and (min-width: 992px) {
    #hd .desktop {
      display: block; } }

#hd .mobile {
  display: none; }
  @media only screen and (max-width: 768px) {
    #hd .mobile {
      display: block; } }

#scrollUp {
  float: left;
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9996;
  width: 45px;
  height: 45px;
  border-radius: 26px;
  cursor: pointer;
  z-index: 999;
  opacity: 0;
  border: 2px solid #fff;
  transition: all .25s ease;
  display: none; }
  @media only screen and (min-width: 1200px) {
    #scrollUp {
      display: block; } }

#scrollUp.hd-show {
  opacity: 1; }

#scrollUp svg {
  display: block;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 5px;
  left: 0;
  fill: #fff;
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg); }

#scrollUp:hover svg {
  fill: #fff; }

#scrollUp:active, #scrollUp:hover {
  background-color: #212121; }

.compare_new img {
  margin: 0 auto; }

.compare_new h2 {
  font-size: 2rem; }
  @media only screen and (min-width: 768px) {
    .compare_new h2 {
      font-size: 3rem; } }

.compare_new .sub-title {
  font-size: 1.2rem;
  font-weight: bold; }

.compare_new .product-spec {
  width: 100%;
  margin: 2rem auto;
  padding: 5px; }
  @media only screen and (min-width: 1500px) {
    .compare_new .product-spec {
      width: 85%; } }
  @media only screen and (min-width: 992px) {
    .compare_new .product-spec table {
      width: auto;
      margin-left: auto;
      margin-right: auto; } }
  @media only screen and (min-width: 1200px) {
    .compare_new .product-spec table {
      max-width: 1300px; } }
  @media only screen and (min-width: 1500px) {
    .compare_new .product-spec table {
      max-width: 1400px; } }
  .compare_new .product-spec thead h3 {
    margin: 0;
    padding: 5px 0;
    font-size: 1.2rem;
    font-weight: 600; }
    @media only screen and (max-width: 768px) {
      .compare_new .product-spec thead h3 {
        font-size: 1.1rem; } }
  .compare_new .product-spec thead tr:last-child th {
    padding: 15px 5px; }
  .compare_new .product-spec thead tr:last-child th:nth-child(1) {
    background-color: transparent;
    width: 5%; }
  .compare_new .product-spec thead tr:last-child th:last-child h3 {
    border-right: none; }
  .compare_new .product-spec thead th {
    text-align: center;
    border-bottom: none;
    border-top: none; }
    .compare_new .product-spec thead th span {
      font-weight: normal; }
  .compare_new .product-spec .details {
    text-align: center;
    margin: 0 auto;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    font-family: "TT-Norms-Pro-Normal", sans-serif, sans-serif;
    letter-spacing: 2px;
    font-size: 1.2rem; }
    .compare_new .product-spec .details i {
      color: #d39d67;
      border-radius: 50%;
      padding: 4px 2px 3px 4px;
      font-size: 0.875rem; }
      @media only screen and (min-width: 1200px) {
        .compare_new .product-spec .details i {
          font-size: 1rem;
          padding: 5px 4px; } }
  .compare_new .product-spec .more-info {
    display: none; }
  .compare_new .product-spec .wtb-dropdown {
    margin: 0;
    display: block; }
  .compare_new .product-spec .dropdown-content {
    bottom: inherit;
    top: 55px; }
    .compare_new .product-spec .dropdown-content::before {
      top: -11px;
      border-top: none;
      border-bottom: 11px solid #fff; }
    .compare_new .product-spec .dropdown-content.aci-show {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-flow: row wrap;
              flex-flow: row wrap; }
    .compare_new .product-spec .dropdown-content > a {
      width: 50%;
      border-bottom: none; }
      @media only screen and (max-width: 480px) {
        .compare_new .product-spec .dropdown-content > a {
          width: 100%; } }
      .compare_new .product-spec .dropdown-content > a div {
        background-position: center;
        background-size: contain;
        height: 36px; }
  .compare_new .product-spec .btn-learn {
    padding: 10px 10px;
    font-size: 1rem;
    margin: 0; }
    @media only screen and (min-width: 1500px) {
      .compare_new .product-spec .btn-learn {
        padding: 15px 20px;
        font-size: 1.5rem; } }
  .compare_new .product-spec tbody td {
    font-size: 1rem;
    color: #fff;
    border: none;
    white-space: normal;
    vertical-align: middle; }
    @media only screen and (max-width: 768px) {
      .compare_new .product-spec tbody td {
        white-space: normal !important; } }
    @media only screen and (min-width: 1500px) {
      .compare_new .product-spec tbody td {
        font-size: 1rem; } }
  .compare_new .product-spec tbody tr {
    background-color: #111; }
  .compare_new .product-spec tbody tr th {
    font-size: 1rem;
    text-align: left;
    font-weight: 600;
    border: none;
    vertical-align: middle;
    text-transform: uppercase; }
    @media only screen and (min-width: 1500px) {
      .compare_new .product-spec tbody tr th {
        font-size: 1rem; } }
  .compare_new .product-spec tbody tr th, .compare_new .product-spec tbody tr td {
    border-bottom: 20px solid #000; }

.owl-dots {
  margin-top: 20px; }

.owl-nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 20px);
  margin-top: 0 !important;
  z-index: -1; }
  @media only screen and (max-width: 768px) {
    .owl-nav {
      position: absolute;
      top: 70px;
      height: 0;
      z-index: 1; } }
  .owl-nav .owl-next, .owl-nav .owl-prev {
    position: absolute;
    top: calc(50% - 43px);
    margin: auto !important;
    width: 60px;
    height: 60px; }
    @media only screen and (max-width: 480px) {
      .owl-nav .owl-next, .owl-nav .owl-prev {
        top: 200px;
        width: 30px;
        height: 30px; } }
    .owl-nav .owl-next:hover, .owl-nav .owl-prev:hover {
      background-color: rgba(225, 225, 225, 0.1) !important; }
    .owl-nav .owl-next:focus, .owl-nav .owl-prev:focus {
      outline-color: transparent;
      outline: none; }
  .owl-nav .owl-next {
    right: -60px; }
    @media only screen and (max-width: 768px) {
      .owl-nav .owl-next {
        right: 0; } }
  .owl-nav .owl-prev {
    left: -60px; }
    @media only screen and (max-width: 768px) {
      .owl-nav .owl-prev {
        left: 0; } }
  .owl-nav span {
    font-size: 8rem;
    line-height: 44px;
    display: block;
    height: 60px;
    width: 60px; }
    @media only screen and (max-width: 768px) {
      .owl-nav span {
        font-size: 4rem;
        line-height: 22px;
        height: 30px;
        width: 30px; } }

.footnotes {
  margin: 0 auto;
  padding-right: 16px;
  padding-left: 16px;
  box-sizing: border-box;
  width: 100%;
  max-width: 1221px; }
  .footnotes ul.footnote {
    font-size: 0.875rem;
    line-height: 1.4;
    margin: 0;
    padding: 0; }
    .footnotes ul.footnote li {
      position: relative;
      color: #999;
      list-style-type: decimal;
      margin-bottom: 10px; }
  .footnotes.footnote-item-star ul.footnote li {
    position: relative;
    list-style-type: none;
    color: #999; }
    .footnotes.footnote-item-star ul.footnote li:before {
      display: block;
      position: absolute;
      top: 9px;
      left: -14px;
      content: '*';
      line-height: 0;
      color: #999; }

a {
  color: #d39d67;
  text-decoration: underline;
  transition: color 0.25s ease-in-out; }
  a:hover {
    color: #d39d67;
    text-decoration: none; }

.btn {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-family: "TT-Norms-Pro-Normal", sans-serif;
  font-size: 1.5rem;
  letter-spacing: 1px;
  padding: 6px 20px;
  line-height: 1;
  margin-top: 1rem;
  margin-bottom: 1rem;
  position: relative; }
  .btn:focus {
    color: #fff;
    outline-color: transparent; }

.card-button, .card-button-coming {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 15px 50px;
  font-size: 1.5rem;
  border-radius: 2px;
  outline: 0;
  background-color: #d39d67;
  color: #fff;
  font-weight: 700;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  text-decoration: none; }
  .card-button:hover, .card-button-coming:hover {
    color: #fff;
    background-color: #cd9053;
    text-decoration: none; }
  .card-button:focus, .card-button:active, .card-button-coming:focus, .card-button-coming:active {
    color: #fff;
    background-color: #cd9053;
    outline-color: transparent;
    outline: transparent;
    text-decoration: none; }

.btn-subscribe {
  background-color: #d39d67;
  padding: 20px;
  width: 100%; }
  .btn-subscribe:hover {
    color: #fff;
    background-color: #cd9053; }

.btn-learn {
  position: relative;
  padding: 10px 30px; }
  .btn-learn:hover {
    color: #fff; }
    .btn-learn:hover span {
      left: 10px;
      transition: all 0.5s; }
  .btn-learn span {
    color: #d39d67;
    position: relative;
    top: -3px;
    left: 0;
    transition: all 0.5s; }

.btn-cta {
  padding: 7px 20px;
  font-size: 1rem;
  font-family: "TT-Norms-Pro-Normal", sans-serif;
  font-weight: bold;
  border-radius: 4px;
  text-decoration: none;
  color: #7d5124;
  background: linear-gradient(0deg, #d39d67 30%, #d9aa7b 70%); }
  .btn-cta:hover {
    text-decoration: none; }
  .btn-cta:focus, .btn-cta:active {
    outline-color: transparent;
    outline: transparent;
    text-decoration: none; }

.btn-rog {
  position: relative;
  display: block;
  width: 70%;
  margin: 0 auto;
  padding: 10px 20px;
  font-size: 1rem;
  border: 1px solid #cd9053;
  border-radius: 2px;
  outline: 0;
  background-color: #212121;
  color: #fff;
  font-weight: 700;
  transition: background-color 0.25s ease-in-out;
  text-transform: uppercase;
  -webkit-transform: skewX(-15deg);
          transform: skewX(-15deg);
  transition: all 0.5s; }
  .btn-rog:hover {
    color: #fff;
    background-color: #000;
    border: 1px solid #cd9053; }
  .btn-rog:focus, .btn-rog:active {
    color: #fff;
    border: 1px solid #cd9053;
    background-color: #000;
    outline-color: transparent; }
  .btn-rog span {
    display: block;
    -webkit-transform: skewX(15deg);
            transform: skewX(15deg); }

.btn-rog:after {
  content: 'BUY NOW';
  width: 100%;
  -webkit-transform: skewX(15deg);
  transform: skewX(15deg);
  display: inline-block; }

.btn-arrow {
  background: #fcb038;
  background: linear-gradient(180deg, #fcb038 0%, #f9901d 70%);
  border: 1px solid #ef9f30;
  border-bottom: 2px solid #ba6d1d;
  max-width: 140px;
  width: 100%;
  display: inline-block;
  border-radius: 4px;
  padding: 7px 20px 7px 10px; }
  .btn-arrow span {
    display: block;
    position: relative;
    color: #512c00;
    font-family: "TT-Norms-Pro-Medium", sans-serif;
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: bold; }
    .btn-arrow span:after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      top: 5px;
      right: 0px;
      border-top: 5px solid transparent;
      border-left: 5px solid #512c00;
      border-bottom: 5px solid transparent; }

.btn-arrow[disabled] {
  padding: 7px 10px; }
  .btn-arrow[disabled] span {
    opacity: 0.5; }
    .btn-arrow[disabled] span:after {
      border: none; }

.txt-gradient-r {
  display: inline-block;
  padding-bottom: 5px;
  color: #d39d67;
  background: #d39d67;
  background: linear-gradient(90deg, #d39d67 30%, #d9aa7b 70%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent; }

.txt-gradient-blue {
  padding-bottom: 5px;
  color: #007cde;
  background: #007cde;
  background: linear-gradient(135deg, #01e9bd 40%, #007cde 70%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent; }

/* For IE */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE10+ CSS here */
  .txt-gradient-r {
    background: none; }
  .dropdown-content {
    width: 240px; } }

.text-bold {
  font-weight: 700; }

.text-highlight {
  color: #fff; }

.img-center {
  margin: auto; }

.border-horizontal-gradient {
  background: #5b5b5b;
  background: linear-gradient(to right, #000 0%, #5b5b5b 50%, #000 100%); }

.divider {
  width: 100%;
  height: .0625rem;
  display: inline-block; }
  .divider.solid {
    background: #111;
    line-height: 0; }

header {
  width: 100%;
  height: auto;
  position: relative;
  padding: 0;
  position: fixed;
  z-index: 9999;
  left: 0;
  right: 0;
  margin: 0 auto; }
  header .navbar-brand {
    padding: 10px 10px; }
    @media only screen and (min-width: 768px) {
      header .navbar-brand {
        padding: 6px 10px; } }
    @media only screen and (max-width: 480px) {
      header .navbar-brand {
        height: 58px; } }
  header .navbar-inverse .navbar-toggle .icon-bar {
    background-color: #d39d67; }
  header .navbar-inverse {
    background-color: #151515;
    border-color: #000; }
  header .navbar-inverse .navbar-toggle:focus, header .navbar-inverse .navbar-toggle:hover {
    background-color: transparent; }
  header .navbar-inverse .navbar-nav > .active > a,
  header .navbar-inverse .navbar-nav > .active > a:focus,
  header .navbar-inverse .navbar-nav > .active > a:hover {
    color: #d39d67;
    background-color: transparent; }
    @media only screen and (min-width: 768px) {
      header .navbar-inverse .navbar-nav > .active > a,
      header .navbar-inverse .navbar-nav > .active > a:focus,
      header .navbar-inverse .navbar-nav > .active > a:hover {
        border-bottom: 5px solid #d39d67; } }
  header .navbar-inverse .navbar-nav > .open > a,
  header .navbar-inverse .navbar-nav > .open > a:focus,
  header .navbar-inverse .navbar-nav > .open > a:hover {
    background-color: #151515; }
  header .navbar-nav .open .dropdown-menu {
    background-color: #000; }
    @media only screen and (min-width: 768px) {
      header .navbar-nav .open .dropdown-menu {
        right: auto;
        left: 0; } }
  header .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
    text-align: left;
    font-size: 1.1rem;
    line-height: 40px;
    padding-left: 43px; }
    @media only screen and (min-width: 768px) {
      header .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
        line-height: 30px;
        padding-left: 20px; } }
  header .dropdown-menu {
    background-color: #151515;
    padding: 0; }
  header .dropdown-menu > li > a {
    color: #fff;
    padding: 5px 20px; }
  header .dropdown-menu > li > a:focus, header .dropdown-menu > li > a:hover {
    color: #fff;
    background-color: #d39d67; }
  header .dropdown-menu > .active > a, header .dropdown-menu > .active > a:focus, header .dropdown-menu > .active > a:hover {
    background-color: #d39d67; }
  header .caret {
    background-image: url("../images/icons/icon-dropdown.png");
    background-repeat: no-repeat;
    background-position: bottom;
    border: none;
    width: 17px;
    height: 10px; }
  @media only screen and (max-width: 480px) {
    header .navbar-nav > li > a {
      padding: 30px 1rem;
      text-align: left;
      font-size: 1.5rem; } }
  @media only screen and (min-width: 768px) {
    header .navbar-nav > li > a {
      padding: 15px 7px;
      text-align: center;
      font-size: 0.8rem; } }
  @media only screen and (min-width: 992px) {
    header .navbar-nav > li > a {
      padding: 25px 10px; } }
  @media only screen and (min-width: 1200px) {
    header .navbar-nav > li > a {
      padding: 25px 15px;
      font-size: 1rem; } }
  @media only screen and (min-width: 1500px) {
    header .navbar-nav > li > a {
      padding: 25px;
      font-size: 1.1rem; } }
  header .navbar {
    z-index: 99;
    border-radius: 0; }
    @media only screen and (max-width: 480px) {
      header .navbar {
        min-height: 60px; } }
    header .navbar a {
      text-decoration: none; }
    @media only screen and (min-width: 768px) {
      header .navbar .container {
        width: 100%; } }
    @media only screen and (min-width: 1200px) {
      header .navbar .container {
        width: 100%; } }
    @media only screen and (min-width: 1500px) {
      header .navbar .container {
        width: 90%; } }
    header .navbar .logo-primary {
      margin-top: 5px;
      height: 30px;
      padding-top: 0;
      transition: all 0.3s ease-out; }
      @media only screen and (min-width: 768px) {
        header .navbar .logo-primary {
          height: 30px;
          margin-top: 5px; } }
      @media only screen and (min-width: 992px) {
        header .navbar .logo-primary {
          height: 30px;
          margin-top: 15px; } }
      @media only screen and (min-width: 1200px) {
        header .navbar .logo-primary {
          margin-top: 15px; } }
    header .navbar .logo-secondary {
      height: 58px;
      margin-top: -10px; }
      @media only screen and (min-width: 768px) {
        header .navbar .logo-secondary {
          height: 58px;
          margin-top: -6px; } }
      @media only screen and (min-width: 992px) {
        header .navbar .logo-secondary {
          height: 75px; } }
    header .navbar .navbar-toggle {
      border-radius: 0;
      border: none; }
      @media only screen and (max-width: 480px) {
        header .navbar .navbar-toggle {
          margin-right: 0; } }
      header .navbar .navbar-toggle .icon-bar {
        transition: all .1s; }
        header .navbar .navbar-toggle .icon-bar:nth-child(2) {
          -webkit-transform: rotate(-45deg);
                  transform: rotate(-45deg);
          position: relative;
          top: 6px; }
        header .navbar .navbar-toggle .icon-bar:nth-child(3) {
          display: none; }
        header .navbar .navbar-toggle .icon-bar:last-child {
          -webkit-transform: rotate(45deg);
                  transform: rotate(45deg); }
      header .navbar .navbar-toggle.collapsed .icon-bar:nth-child(2) {
        -webkit-transform: inherit;
                transform: inherit;
        position: relative;
        top: 0px; }
      header .navbar .navbar-toggle.collapsed .icon-bar:nth-child(3) {
        display: block; }
      header .navbar .navbar-toggle.collapsed .icon-bar:last-child {
        -webkit-transform: inherit;
                transform: inherit; }

.site-title .title {
  font-size: 2rem;
  font-weight: 200; }
  @media only screen and (min-width: 768px) {
    .site-title .title {
      font-size: 3rem; } }

.site-title .sub-title {
  font-weight: 300; }

.module {
  width: 100%;
  height: auto;
  padding: 0;
  display: block;
  overflow: hidden; }
  .module .windows-mda {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    padding-top: 15px;
    padding-bottom: 15px;
    text-decoration: none; }
    @media only screen and (min-width: 768px) {
      .module .windows-mda {
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
        padding-top: 15px; } }
    .module .windows-mda span {
      color: #fff;
      margin-top: 15px;
      font-family: "Roboto", sans-serif; }
      @media only screen and (min-width: 768px) {
        .module .windows-mda span {
          margin-left: 20px;
          margin-top: inherit; } }
  .module h1 {
    font-family: "TT-Norms-Pro-Normal", sans-serif; }
  .module h2 {
    font-size: 1.8rem;
    line-height: 2rem;
    margin-top: 0;
    font-family: "TT-Norms-Pro-Normal", sans-serif;
    letter-spacing: 0;
    color: #d39d67; }
    @media only screen and (min-width: 768px) {
      .module h2 {
        font-size: 2.5rem;
        line-height: 1; } }
    @media only screen and (min-width: 1500px) {
      .module h2 {
        font-size: 3rem;
        line-height: 1; } }
  .module p {
    line-height: 1.5rem;
    font-size: 1rem;
    margin: 0 0 1rem; }
    @media only screen and (min-width: 1200px) {
      .module p {
        font-size: 1.1rem;
        line-height: 1.8rem;
        margin: 0 auto 1rem; } }
    @media only screen and (min-width: 1500px) {
      .module p {
        font-size: 1.2rem;
        line-height: 2rem; } }
  .module p.small {
    font-size: 80%;
    line-height: 1.2rem; }
  .module .content {
    padding: 0 3%; }

/* video wrapper */
.video-wrapper {
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  position: fixed;
  z-index: 99999;
  background-color: rgba(0, 0, 0, 0.95);
  display: none; }
  .video-wrapper iframe {
    width: 100%;
    height: 100%; }
  .video-wrapper .text {
    font-size: 2rem;
    font-weight: 600;
    color: #fff;
    margin-top: calc(45vh - 44px); }

.video-wrapper .btn-close {
  width: 50px;
  height: 50px;
  right: 40px;
  top: 20px;
  position: absolute;
  z-index: 99999;
  background: url("../images/close-light.png") 50% no-repeat;
  transition: all .2s;
  background-size: 100%;
  cursor: pointer; }
  .video-wrapper .btn-close:hover {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg); }
  @media only screen and (max-width: 768px) {
    .video-wrapper .btn-close {
      right: 10px;
      top: 10px; } }

.video-wrapper .video-player {
  width: 100%;
  max-width: 950px;
  margin: auto;
  height: 100%;
  max-height: 500px;
  position: relative;
  z-index: 9999; }
  @media only screen and (max-width: 768px) {
    .video-wrapper .video-player {
      padding: 65px 4%; } }
  .video-wrapper .video-player .img-popup {
    height: 100%;
    max-height: 800px; }
    @media only screen and (max-width: 768px) {
      .video-wrapper .video-player .img-popup {
        width: 100%;
        height: auto; } }

.module.animation, .module .tagline, .module .content {
  opacity: 0; }

.module.animation.in-viewport {
  -webkit-animation: bottomFadeIn 1s forwards .3s;
          animation: bottomFadeIn 1s forwards .3s; }

.module.animation.in-viewport .tagline {
  -webkit-animation: bottomFadeIn 1s forwards 1s;
          animation: bottomFadeIn 1s forwards 1s; }

.module.animation.in-viewport .content {
  -webkit-animation: bottomFadeIn 1s forwards .6s;
          animation: bottomFadeIn 1s forwards .6s; }

#find-display {
  padding: 2rem 0; }

.find-display {
  text-align: center;
  margin: 2rem 0 3rem; }
  .find-display .item-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-top: 2rem; }
    .find-display .item-list .item {
      text-align: center;
      width: 48%;
      margin: 1rem 0; }
      @media only screen and (min-width: 1200px) {
        .find-display .item-list .item {
          width: 31%; } }
      .find-display .item-list .item a {
        display: block;
        overflow: hidden;
        position: relative; }
        @media only screen and (min-width: 768px) {
          .find-display .item-list .item a {
            height: 200px; } }
        @media only screen and (min-width: 1500px) {
          .find-display .item-list .item a {
            height: 250px; } }
        .find-display .item-list .item a img {
          transition: all .5s; }
          @media only screen and (min-width: 992px) {
            .find-display .item-list .item a img {
              opacity: 0.6; } }
          @media only screen and (min-width: 1200px) {
            .find-display .item-list .item a img {
              opacity: 0.3; } }
        .find-display .item-list .item a:hover img {
          -webkit-transform: scale(1.1);
                  transform: scale(1.1);
          transition: all .5s;
          opacity: 0.6; }
        .find-display .item-list .item a.active img {
          -webkit-filter: grayscale(100%);
                  filter: grayscale(100%); }
          @media only screen and (min-width: 992px) {
            .find-display .item-list .item a.active img {
              opacity: 0.3; } }
        .find-display .item-list .item a.active:hover img {
          -webkit-transform: scale(1);
                  transform: scale(1); }
        .find-display .item-list .item a.active .display-title {
          opacity: .5; }
        .find-display .item-list .item a .display-title {
          position: absolute;
          bottom: 0;
          width: 100%;
          padding: 10px 20px;
          height: 64px;
          background-color: #485058;
          color: #fff;
          text-transform: uppercase;
          font-size: 0.7rem;
          letter-spacing: 2px;
          font-family: "TT-Norms-Pro-Normal", sans-serif;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center; }
          @media only screen and (min-width: 768px) {
            .find-display .item-list .item a .display-title {
              height: 84px;
              font-size: 1.1rem;
              bottom: 30%;
              background-color: transparent; } }
          @media only screen and (min-width: 1500px) {
            .find-display .item-list .item a .display-title {
              font-size: 1.3rem;
              bottom: 35%; } }

.cmdPageContainer .section__adobeBanner {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0 !important; }
  @media only screen and (min-width: 768px) {
    .cmdPageContainer .section__adobeBanner {
      overflow: hidden; } }

.section__adobeBanner .banner__container {
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  max-width: 2560px; }

.section__adobeBanner .banner__container .banner__item {
  position: relative;
  min-height: 486px; }
  @media only screen and (min-width: 768px) {
    .section__adobeBanner .banner__container .banner__item {
      min-height: 486px; } }
  @media only screen and (min-width: 1200px) {
    .section__adobeBanner .banner__container .banner__item {
      min-height: 664px;
      left: 50%;
      margin-left: -1280px;
      width: 2560px; } }

.section__adobeBanner .banner__container .wd__content {
  position: relative;
  z-index: 9;
  top: 0;
  left: 0;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  width: 89.2%;
  padding-top: 55px;
  padding-bottom: 60px; }
  @media only screen and (min-width: 768px) {
    .section__adobeBanner .banner__container .wd__content {
      top: 0;
      padding-top: 89px;
      padding-bottom: 60px;
      left: 0;
      margin-left: auto;
      margin-right: auto;
      padding-left: 0;
      width: 86%; } }
  @media only screen and (min-width: 1200px) {
    .section__adobeBanner .banner__container .wd__content {
      top: 0;
      left: 50%;
      margin-left: -560px;
      padding-top: 178px;
      padding-bottom: 60px;
      width: 450px;
      text-align: left; } }

.section__adobeBanner .banner__container .wd__content .content__title {
  margin-top: 0;
  font-weight: bold;
  color: #000;
  font-size: 36px;
  font-family: "TT-Norms-Pro-Normal", sans-serif; }
  @media only screen and (min-width: 768px) {
    .section__adobeBanner .banner__container .wd__content .content__title {
      font-size: 45px; } }

.section__adobeBanner .banner__container .wd__content .content__info {
  margin-top: 24px; }

.section__adobeBanner .banner__container .img__main {
  z-index: 1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-right: auto;
  position: relative;
  background-image: url("../images/adobe_banner_creativecloud.webp");
  left: 50%;
  margin-top: -329px;
  margin-left: -365px;
  width: 730px;
  height: 644px; }
  @media only screen and (min-width: 768px) {
    .section__adobeBanner .banner__container .img__main {
      background-image: url("../images/adobe_banner_creativecloud@medium.jpg");
      left: 50%;
      margin-top: -353px;
      margin-left: -650px;
      width: 1300px;
      height: 894px; } }
  @media only screen and (min-width: 1200px) {
    .section__adobeBanner .banner__container .img__main {
      background-image: url("../images/adobe_banner_creativecloud.jpg");
      position: absolute;
      top: 0;
      left: 0;
      margin-top: 0;
      margin-left: 0;
      width: 2560px;
      height: 664px;
      background-position: bottom; } }

.section__adobeBanner .banner__container .wd__content .content__link,
.section__adobeBanner .banner__container .wd__content .content__link * {
  color: #000;
  font-weight: bold; }
  .section__adobeBanner .banner__container .wd__content .content__link:hover span,
  .section__adobeBanner .banner__container .wd__content .content__link *:hover span {
    border-bottom: 1px solid #000; }

.section__adobeBanner .banner__container .wd__content .content__link::after {
  color: #000;
  content: '>';
  padding-left: 7px; }

section.video {
  text-align: center;
  margin: 3rem 0; }
  section.video h1 {
    font-family: 'geforce-light', sans-serif; }
  section.video h2 {
    color: #d39d67;
    font-size: 1.2rem;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 1px;
    margin: 30px auto 0;
    line-height: 1.5rem; }
  section.video .card {
    margin-top: 30px;
    margin-bottom: 10px; }
    section.video .card p {
      margin-bottom: 20px; }
  section.video .card-button {
    margin-top: 20px;
    color: #000;
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase; }
  section.video .youtube {
    position: relative;
    cursor: pointer;
    margin: 0 auto; }
    section.video .youtube:hover {
      opacity: 0.9; }
      section.video .youtube:hover .play-button {
        opacity: 1; }
    section.video .youtube iframe {
      width: 100%;
      height: 187px; }
      @media only screen and (min-width: 480px) {
        section.video .youtube iframe {
          width: 438px;
          height: 245px; } }
      @media only screen and (min-width: 768px) {
        section.video .youtube iframe {
          width: 330px;
          height: 184px; } }
      @media only screen and (min-width: 992px) {
        section.video .youtube iframe {
          width: 438px;
          height: 245px; } }
      @media only screen and (min-width: 1200px) {
        section.video .youtube iframe {
          width: 720px;
          height: 384px; } }
  section.video .tagline {
    color: #d39d67;
    font-size: 1.7rem;
    font-weight: 600;
    text-align: left;
    line-height: 1.2;
    margin-top: 20px;
    padding: 0 10px; }

.btn-video {
  cursor: pointer; }
  .btn-video:hover {
    opacity: 0.7; }

.play-button {
  position: absolute;
  background-image: url("../images/play_button.png");
  background-repeat: no-repeat;
  background-size: contain;
  height: 100px;
  width: 100px;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 0; }
  @media only screen and (max-width: 480px) {
    .play-button {
      height: 80px;
      width: 80px;
      background-size: contain; } }
  .play-button span {
    font-family: "TT-Norms-Pro-Normal", sans-serif;
    font-size: 3rem;
    color: #fff;
    left: 7.5rem;
    position: relative;
    line-height: 1; }
    @media only screen and (max-width: 480px) {
      .play-button span {
        font-size: 2rem;
        left: 4.5rem; } }

#cookie-policy-info, #cookie-policy-info .close,
body.show-cookie-policy-info {
  transition: all .2s ease-in-out; }

body.show-cookie-policy-info {
  position: relative;
  top: initial !important; }

#cookie-policy-info {
  transition: all .2s ease-in-out;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-size: 14px;
  line-height: 1.4em;
  z-index: 9999;
  font-family: "Segoe UI", "Arial";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }
  @media only screen and (max-width: 768px) {
    #cookie-policy-info {
      top: inherit;
      bottom: 0; } }

#cookie-policy-info a {
  color: #006ce1;
  text-decoration: none; }

#cookie-policy-info .btn-asus {
  cursor: pointer; }

#cookie-policy-info a:hover {
  color: #0074d7; }

#cookie-policy-info p {
  margin-bottom: 0px !important;
  font-size: 16px;
  line-height: 25.5px;
  font-family: "Segoe UI", "Arial";
  font-weight: 400; }

#cookie-policy-info p + p {
  margin-top: 10px !important; }

#cookie-policy-info .cookie-policy-wrap {
  width: 100%;
  max-width: 712px;
  overflow: hidden;
  height: auto;
  background-color: #fff;
  color: #000;
  font-size: 14px;
  border-radius: 4px;
  padding: 32px !important;
  line-height: 1.4em;
  font-family: "Segoe UI", "微軟正黑體", "Microsoft JhengHei", "Arial", "新細明體";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

#cookie-policy-info .cookie-text-wrap {
  position: relative;
  width: 100%;
  margin: auto; }

#cookie-policy-info .cookie-btn-box {
  position: relative;
  margin-top: 20px; }

#cookie-policy-info .btn-ok,
#cookie-policy-info .btn-setting {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 40px;
  line-height: 18px;
  padding: 6px 16px !important;
  color: #006ce1;
  border-radius: 4px;
  background: #ffffff;
  font-size: 17px;
  transition: 0.2s;
  box-sizing: border-box;
  cursor: pointer;
  border: 1px solid #006ce1; }

#cookie-policy-info .btn-ok {
  background: #006ce1;
  color: white; }

#cookie-policy-info .btn-setting:hover {
  background: #006ce1;
  color: white; }

#cookie-policy-info .btn-ok:hover {
  background: #006ce1;
  border: 1px solid #006ce1;
  color: white; }

#cookie-policy-info .btn-ok {
  margin-left: 10px; }

.show-cookie-policy-info #cookie-policy-info {
  min-height: 90px;
  overflow: hidden; }

/* lightboxbox */
html.fixed, html.fixed body {
  overflow: hidden; }

.cookie-policy-lightbox-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99999;
  display: none; }

.cookie-policy-lightbox-wrapper {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 99999;
  margin: auto !important;
  width: 900px;
  height: 550px;
  background: #ffffff;
  color: #000;
  font-family: "Segoe UI", Arial, sans-serif;
  font-weight: normal; }

.cookie-policy-lightbox-menu {
  position: relative;
  float: left;
  width: 240px;
  height: 447px;
  background: #eeeeee; }

.cookie-policy-lightbox-logo {
  display: block;
  width: 107px;
  height: 23px;
  margin: 30px 0 30px 30px !important;
  padding: 0;
  background: url(../../assets/images/logos/asus-logo-dark.svg) 0 0 no-repeat; }

.cookie-policy-lightbox-list {
  position: relative;
  width: 240px; }

.cookie-policy-lightbox-list ul {
  list-style: none;
  padding: 0; }

.cookie-policy-lightbox-list li {
  position: relative;
  padding: 20px 0 20px 30px !important;
  font-size: 15px;
  width: 240px;
  min-height: 50px;
  cursor: pointer;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  color: #313131; }

.cookie-policy-lightbox-list li.active {
  color: #006ce1;
  background: #ffffff; }

.cookie-policy-lightbox-content {
  position: relative;
  float: left;
  width: calc(100% - 240px);
  height: 447px;
  overflow-y: auto;
  background: #ffffff; }

.cookie-policy-lightbox-section {
  position: relative;
  padding: 30px 40px !important;
  box-sizing: border-box;
  -webkit-box-sizing: border-box; }

.cookie-policy-lightbox-section.isHidden {
  display: none; }

.cookie-policy-lightbox-active {
  position: relative;
  height: 28px;
  width: 100%;
  display: table;
  margin-bottom: 10px !important;
  font-size: 16px;
  text-align: right;
  font-weight: bold; }

.cookie-policy-lightbox-active .cookie-policy-lightbox-label {
  display: table-cell;
  vertical-align: middle;
  font-weight: bold; }

.cookie-policy-lightbox-active .check_box {
  display: table-cell;
  vertical-align: middle; }

.cookie-policy-lightbox-active .switch-btn {
  position: relative;
  width: 56px;
  height: 28px;
  vertical-align: middle;
  display: table-cell;
  padding-left: 8px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box; }

.cookie-policy-lightbox-active .switch-btn .switch-check {
  width: 100%;
  height: 100%;
  background: none; }

.cookie-policy-lightbox-active .switch-btn input {
  position: absolute;
  width: 100%;
  left: 0;
  height: 100%;
  width: 100%;
  display: block;
  opacity: 0;
  z-index: 99;
  margin: 0px; }

.cookie-policy-lightbox-active .switch-btn input [type=checkbox] {
  position: absolute;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  -webkit-opacity: 0;
  opacity: 0;
  margin: 0px;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
  filter: alpha(opacity=0);
  cursor: pointer; }

.cookie-policy-lightbox-active .switch-btn .check_box {
  border-radius: 20px;
  background-color: #ddd;
  height: 28px;
  display: block;
  position: relative;
  margin-bottom: 0px; }

.cookie-policy-lightbox-active .switch-btn .check_box .switch-check {
  position: absolute;
  left: -2px;
  right: 0;
  top: 0;
  bottom: 0;
  transition-duration: .2s;
  padding-bottom: 0;
  z-index: 1;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0px 1px 4px #949494;
  border: 1px solid white;
  top: 1px; }

.cookie-policy-lightbox-active .switch-btn .check_box .switch-check .icon-switch-check {
  display: none;
  margin: 6px !important;
  width: 13px;
  height: 13px;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAWCAYAAADafVyIAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAaBJREFUeNqslU0oRFEUx998KAsLhQ0bKxt2LBTKxsrHihQboUlRImUx2cxCDWVhISMLSxY2mmRHVtggxcKQWBKhCOPjd+u8Oo15ZsbcW7/OPac753/uuffd8QVWb518RrK79FcsuHYXwwxALOhYHiTvwoTEHfJbTl6CWVChTb/lDcyD27NnGPZbrL4d06NCk5zPtd9S8mLMogrtuL6tHcxCucxfzSFT/bcVAapvwQyqUJjk566Tr0ARLCl/Xw7asSUwDZUyf4d+qv+0JdAEI8qPkPw0ddF/BQphGXziH0M03UIjUA9z0JCDQASqZG5a0kf1SS+BOIzBLkxlsas6GFd+lORHXotNshc1N5VtQZnH+gJYgYD4Z/Ib5y+BVkiomLnXh9CYZn0YqmX+JbfmLZPAiWx7XcUr5HOfUAdZIwL6YdvLdFhuvx+hE0bhQ2IBeQI2pGWmNe7/RyJFLKOArsq05krF2uASalUspM4uJwEzDiRZPOVJcId5Jbezvc9eV/IeOsybLvfcHTcSc/IVMMM8tzPQDBfwAL3wlIvAjwADAKloXaRIOAF5AAAAAElFTkSuQmCC") no-repeat;
  background-size: 100%; }

.cookie-policy-lightbox-active .switch-btn.on .check_box {
  background-color: #00a8ff;
  /* For Safari 5.1 to 6.0 */
  /* For Opera 11.1 to 12.0 */
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(to left, #33d3fe, #33a8e2);
  /* Standard syntax */ }

.cookie-policy-lightbox-active .switch-btn.on .check_box .switch-check {
  border: 1px solid #00a8ff;
  -webkit-transform: translateX(23px);
          transform: translateX(23px); }

.cookie-policy-lightbox-active .switch-btn.on .check_box .switch-check .icon-switch-check {
  display: block; }

.cookie-policy-lightbox-title {
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  color: #000000; }

.cookie-policy-lightbox-subtitle {
  font-size: 16px;
  margin-top: 8px !important;
  line-height: 1.38;
  color: #000000; }

.cookie-policy-lightbox-text {
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #000 !important;
  margin-top: 30px !important;
  margin-bottom: 0 !important;
  text-align: left !important; }

.cookie-policy-lightbox-text a {
  color: #0094f2; }

.cookie-policy-lightbox-bottom {
  position: relative;
  clear: both;
  width: 100%;
  height: 102px;
  background: #ffffff;
  padding: 30px 40px !important;
  text-align: right;
  border-top: 1px solid #dcdcdc;
  box-sizing: border-box;
  -webkit-box-sizing: border-box; }

.cookie-policy-lightbox-bottom .btn-allow-all,
.cookie-policy-lightbox-bottom .btn-save {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0;
  width: 130px;
  height: 42px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 5px;
  background: #0094f2;
  color: #ffffff;
  cursor: pointer;
  transition: 0.2s all ease-in-out;
  vertical-align: bottom;
  text-align: center;
  box-sizing: border-box;
  -webkit-box-sizing: border-box; }

.cookie-policy-lightbox-bottom .btn-save {
  margin-left: 10px !important; }

.cookie-policy-lightbox-bottom .btn-allow-all:hover,
.cookie-policy-lightbox-bottom .btn-save:hover {
  background: #0074d7; }

@media only screen and (max-width: 1366px) {
  #cookie-policy-info .cookie-policy-wrap {
    width: 94%; } }

@media only screen and (max-width: 960px) {
  #cookie-policy-info {
    position: fixed;
    bottom: 0;
    padding: 0; }
  #cookie-policy-info p {
    font-size: 12px;
    line-height: 18px; }
  #cookie-policy-info .cookie-policy-wrap {
    width: calc(100% - 20px);
    margin: 30px auto !important;
    overflow: initial;
    padding: 24px 16px !important; }
  #cookie-policy-info .cookie-text-wrap {
    width: 100%;
    float: none; }
  #cookie-policy-info .cookie-btn-box {
    width: 100%;
    float: none;
    margin: 20px 0 0 !important;
    text-align: center; }
  #cookie-policy-info .btn-ok,
  #cookie-policy-info .btn-setting {
    width: 100%; }
  /*lightbox*/
  .cookie-policy-lightbox-wrapper {
    height: auto;
    width: 100%; }
  .cookie-policy-lightbox-header {
    overflow-y: auto;
    box-sizing: border;
    position: relative;
    padding-bottom: 80px !important;
    height: calc(100vh - 74px);
    -webkit-box-sizing: border; }
  .cookie-policy-lightbox-content {
    overflow: hidden; }
  .cookie-policy-lightbox-menu {
    padding-top: 0.1px;
    float: none;
    width: 100%;
    height: auto; }
  .cookie-policy-lightbox-logo {
    margin: 20px 0 20px 20px !important; }
  .cookie-policy-lightbox-list {
    width: 100%; }
  .cookie-policy-lightbox-list li {
    width: 100%;
    padding: 10px 0 10px 20px !important;
    font-size: 14px;
    border-top: 1px solid #dcdcdc;
    min-height: auto; }
  .cookie-policy-lightbox-list li:last-child {
    border-bottom: 1px solid #dcdcdc; }
  .cookie-policy-lightbox-content {
    float: none;
    width: 100%;
    height: auto; }
  .cookie-policy-lightbox-section {
    padding: 28px 20px !important; }
  .cookie-policy-lightbox-section[data-content='3'] .cookie-policy-lightbox-active {
    margin-bottom: 20px !important; }
  .cookie-policy-lightbox-bottom {
    position: fixed;
    bottom: 0;
    text-align: center;
    padding: 15px 20px !important;
    height: auto; }
  .cookie-policy-lightbox-bottom .btn-allow-all, .cookie-policy-lightbox-bottom .btn-save {
    width: calc(50% - 5px);
    max-width: 155px; }
  #cookie-policy-info .btn-setting {
    margin-bottom: 10px !important; }
  #cookie-policy-info .btn-ok {
    margin-left: 0; } }

.item-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start; }

.card > a {
  display: block;
  position: relative; }

.card > a > img {
  opacity: 1;
  transition: all 0.5s; }

.card > a:hover > img {
  opacity: 0.7;
  transition: all 0.5s; }

.card {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 60px;
  padding: 0 10px;
  position: relative;
  text-align: center; }
  @media only screen and (min-width: 360px) {
    .card {
      width: 50%; } }
  @media only screen and (min-width: 992px) {
    .card {
      width: 25%;
      margin: auto;
      margin-bottom: 3rem; } }
  .card .card-title {
    height: auto;
    color: #fff;
    overflow: hidden;
    font-size: 1.5rem; }
    @media only screen and (min-width: 360px) {
      .card .card-title {
        font-size: 1rem;
        height: 2rem; } }
    @media only screen and (min-width: 480px) {
      .card .card-title {
        font-size: 1.3rem; } }
  .card .card-sub-title {
    height: 1.25rem;
    margin-bottom: 1.5rem;
    overflow: hidden; }
  .card ul.card-wtbs {
    min-height: 3rem;
    display: block;
    padding: 0;
    list-style: none;
    text-align: center; }
    .card ul.card-wtbs li {
      padding: .2rem 0; }
      .card ul.card-wtbs li a {
        color: #76b900; }
        .card ul.card-wtbs li a:hover {
          color: #76b900; }
  .card .card-button, .card .card-button-coming {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 auto;
    padding: 10px 20px;
    font-size: 1rem;
    border-radius: 2px;
    outline: 0;
    background-color: #d39d67;
    color: #fff;
    font-weight: 700;
    transition: background-color 0.25s ease-in-out;
    text-transform: uppercase;
    transition: all 0.5s; }
    @media only screen and (min-width: 480px) {
      .card .card-button, .card .card-button-coming {
        width: 60%; } }
    .card .card-button:hover, .card .card-button-coming:hover {
      color: #fff;
      background-color: #000; }
    .card .card-button:focus, .card .card-button:active, .card .card-button-coming:focus, .card .card-button-coming:active {
      color: #fff;
      background-color: #000;
      outline-color: transparent; }
    .card .card-button span, .card .card-button-coming span {
      display: block; }
  .card .card-button:after, .card .card-button-coming:after {
    width: 100%;
    -webkit-transform: skewX(15deg);
    transform: skewX(15deg);
    display: inline-block; }
  .card .discount {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    width: 88px;
    height: 88px;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
    z-index: 1; }
    @media only screen and (min-width: 360px) {
      .card .discount {
        width: 60px;
        height: 60px; } }
    @media only screen and (min-width: 480px) {
      .card .discount {
        width: 88px;
        height: 88px; } }
  .card span.glyphicon-certificate {
    color: #fe6b00;
    font-size: 5.5rem; }
    @media only screen and (min-width: 360px) {
      .card span.glyphicon-certificate {
        font-size: 4rem; } }
    @media only screen and (min-width: 480px) {
      .card span.glyphicon-certificate {
        font-size: 5.5rem; } }
  .card span.txt-disc {
    position: absolute;
    width: 50%;
    top: 30%;
    left: 0;
    right: 0;
    font-size: 1rem;
    line-height: 1;
    margin: auto; }
    @media only screen and (min-width: 360px) {
      .card span.txt-disc {
        font-size: 0.8rem; } }
    @media only screen and (min-width: 480px) {
      .card span.txt-disc {
        font-size: 1rem; } }
    .card span.txt-disc b {
      display: block;
      font-size: 1.4rem;
      letter-spacing: -0.05rem; }
      @media only screen and (min-width: 360px) {
        .card span.txt-disc b {
          font-size: 1.1rem; } }
      @media only screen and (min-width: 480px) {
        .card span.txt-disc b {
          font-size: 1.4rem; } }
  .card .specs {
    margin: 10px auto;
    min-height: 15rem;
    width: auto; }
    @media only screen and (min-width: 480px) {
      .card .specs {
        min-height: 10rem;
        width: 250px; } }
  .card .specs ul {
    list-style: disc;
    text-align: left;
    padding-left: 15%; }
  .card .specs ul li {
    font-size: .875rem;
    line-height: 1.1rem;
    margin-bottom: 5px;
    word-wrap: break-word; }
  .card i {
    display: block;
    color: #fff;
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    margin: 0 auto;
    font-size: 0.8rem; }
    @media only screen and (min-width: 480px) {
      .card i {
        font-size: 0.875rem; } }

.wtb-dropdown {
  position: relative; }

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 160px;
  max-width: 90%;
  box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.2);
  z-index: 99;
  bottom: 70px;
  left: 0;
  right: 0;
  margin: 0 auto;
  border-radius: 4px; }
  @media only screen and (min-width: 480px) {
    .dropdown-content {
      max-width: 260px; } }
  .dropdown-content:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    bottom: -11px;
    left: 0;
    right: 0;
    margin: 0 auto;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 11px solid #fff; }

.dropdown-content a {
  color: #d39d67;
  padding: 7px 10px;
  text-decoration: none;
  display: block;
  font-weight: 400;
  font-size: 0.875rem;
  border-bottom: 1px solid #eee;
  text-align: left;
  position: relative; }
  @media only screen and (min-width: 768px) {
    .dropdown-content a {
      padding: 5px 10px; } }
  .dropdown-content a:hover {
    background-color: #f8f8f8;
    color: #d39d67;
    box-shadow: inset 3px 0 0 #d39d67, inset -3px 0 0 #d39d67; }
  .dropdown-content a div {
    margin: 0 auto;
    width: auto;
    height: 40px;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 120px; }
  .dropdown-content a:first-child:hover {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px; }
  .dropdown-content a:last-child {
    border-bottom: 0; }
    .dropdown-content a:last-child:hover {
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px; }
  .dropdown-content a .promo {
    position: absolute;
    top: 5px;
    left: 5px;
    background-color: #fe6b00;
    color: #fff;
    display: inline;
    height: auto;
    padding: 1px 3px;
    font-size: 0.8rem;
    text-transform: uppercase; }

.show {
  display: block; }

.logo_london {
  background: url("../images/logos/logo-london-drugs.png"); }

.logo_memoryEx {
  background: url("../images/logos/logo-MX.png"); }

.logo_canadaCom {
  background: url("../images/logos/logo-canadaCom.png"); }

.logo_tiger {
  background: url("../images/logos/logo_tiger-direct.png"); }

.logo_asus {
  background: url("../images/logos/logo-asus.png"); }

.logo_adorama {
  background: url("../images/logos/logo-adorama.png"); }

.logo_abt {
  background: url("../images/logos/logo-abt.png"); }

.logo_frys {
  background: url("../images/logos/logo-frys.png"); }

.logo_newegg {
  background: url("../images/logos/logo_newegg.png"); }

.logo_amazon {
  background: url("../images/logos/logo-amazon.png"); }

.logo_B_H {
  background: url("../images/logos/logo-B_H.png"); }

.logo_bestbuy {
  background: url("../images/logos/logo-bestbuy.png"); }

.logo_cukusa {
  background: url("../images/logos/logo-cukusa.png"); }

.logo_EXcaliberpc {
  background: url("../images/logos/logo-EXcaliberpc.png"); }

.logo_gentechpc {
  background: url("../images/logos/logo-gentechpc.png"); }

.logo_hid {
  background: url("../images/logos/logo-hid.png"); }

.logo_iBUY {
  background: url("../images/logos/logo-iBUY.png"); }

.logo_microsoft {
  background: url("../images/logos/logo-ms-store.png"); }

.logo_microcenter {
  background: url("../images/logos/logo-microcenter.png"); }

.logo_mikes_computer {
  background: url("../images/logos/logo-mike-computer.png"); }

.logo_MobileAdvance {
  background: url("../images/logos/logo-MobileAdvance.png"); }

.logo_PROSTAR {
  background: url("../images/logos/logo-PROSTAR.png"); }

.logo_XoticPC {
  background: url("../images/logos/logo-XoticPC.png"); }

.logo_costco {
  background: url("../images/logos/logo-Costco.png"); }

.logo_cdw {
  background: url("../images/logos/logo-cdw.png"); }

.logo_insight {
  background: url("../images/logos/logo-insight.png"); }

.logo_walmart {
  background: url("../images/logos/logo-walmart.png"); }

.logo_office-depot {
  background: url("../images/logos/logo-OfficeDepot.png"); }

.logo_staples {
  background: url("../images/logos/logo-staples.png"); }

.logo_electronicEx {
  background: url("../images/logos/logo-electronic-express.png"); }

/* JS Tab ROG Elite Rewards Activities */
section.legal {
  background-color: #242424;
  background-repeat: no-repeat;
  background-position: bottom;
  padding: 3rem 0; }
  section.legal a {
    color: #8b8b8b;
    text-decoration: none;
    vertical-align: top; }
    section.legal a:hover {
      color: #d39d67;
      text-decoration: none; }
  @media only screen and (max-width: 768px) {
    section.legal .container {
      padding: 0 6%; } }
  @media only screen and (min-width: 992px) {
    section.legal {
      background-position: top; } }
  section.legal .terms {
    font-size: 1rem;
    text-align: center;
    padding-top: 1rem; }
    section.legal .terms a {
      padding: 0 10px; }
  section.legal p {
    color: #8b8b8b;
    font-size: .8rem;
    text-align: left;
    text-align-last: left;
    width: 100%;
    max-width: 100%;
    line-height: 1rem; }
    @media only screen and (min-width: 992px) {
      section.legal p {
        text-align: center;
        text-align-last: center; } }
  section.legal p.note {
    font-size: 0.875rem;
    text-align: left;
    text-align-last: left; }
  section.legal .social {
    margin-top: 10px;
    text-align: center; }
    section.legal .social a.btn-social {
      display: inline-block;
      width: 42px;
      height: 42px;
      margin: 0 auto;
      border: 1px solid #8b8b8b;
      padding: 10px;
      border-radius: 50%;
      text-align: center;
      padding-top: 11px;
      margin: 0 10px; }
      @media only screen and (min-width: 768px) {
        section.legal .social a.btn-social {
          margin: 0 15px; } }
      section.legal .social a.btn-social:hover {
        border: 1px solid #d39d67; }
      section.legal .social a.btn-social:hover svg .st0 {
        fill: #d39d67; }
      section.legal .social a.btn-social svg {
        height: 18px; }
        section.legal .social a.btn-social svg .st0 {
          fill: #8b8b8b; }
  section.legal .newsletter {
    margin-top: 25px;
    text-align: center; }
    section.legal .newsletter a {
      text-decoration: none;
      vertical-align: top;
      color: #8b8b8b; }
      section.legal .newsletter a .glyphicon {
        font-size: 1.2rem;
        line-height: 1.5rem;
        top: 4px; }
      section.legal .newsletter a:hover {
        color: #d39d67;
        text-decoration: none; }
  section.legal .windows {
    text-align: center;
    font-size: 1.5rem;
    font-family: "Roboto", sans-serif; }
    @media only screen and (max-width: 768px) {
      section.legal .windows {
        font-size: 1.2rem; } }
    section.legal .windows img {
      margin: 0 auto;
      max-width: 250px; }
    section.legal .windows .note {
      margin: 3rem 0; }
      @media only screen and (max-width: 768px) {
        section.legal .windows .note {
          margin: 2rem 0; } }

#home {
  overflow-x: hidden;
  max-width: 1920px; }
  #home p {
    max-width: 900px; }
  #home h2 {
    color: #fff; }
  #home .owl-theme .owl-dots .owl-dot.active span, #home .owl-theme .owl-dots .owl-dot:hover span {
    background: #185bf3; }
  #home .btn {
    text-transform: none;
    border: none; }
  #home .btn-learn, #home .card-button {
    color: #fff;
    font-size: 1.2rem;
    font-family: "TT-Norms-Pro-Normal", sans-serif;
    background: linear-gradient(60deg, #185bf3, #8b34f8);
    text-decoration: none;
    padding: 15px;
    width: 100%;
    max-width: 280px;
    display: block;
    margin: 2rem auto 0;
    border-radius: 6px;
    font-weight: normal; }
  #home .header-style-1 {
    position: relative;
    margin-bottom: 4rem; }
    #home .header-style-1:before {
      content: "";
      display: block;
      width: 250px;
      height: 3px;
      background: linear-gradient(90deg, #185bf3, #8b34f8);
      position: absolute;
      bottom: -30px;
      left: 0;
      right: 0;
      margin: 0 auto; }
  #home .wtb-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-top: 1rem; }
    @media only screen and (min-width: 768px) {
      #home .wtb-list {
        margin-top: 1rem;
        margin-bottom: 1rem;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between; } }
    @media only screen and (min-width: 992px) {
      #home .wtb-list {
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between; } }
    @media only screen and (min-width: 1200px) {
      #home .wtb-list {
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start; } }
    #home .wtb-list .wtb-dropdown, #home .wtb-list .subscribe {
      width: 100%; }
      @media only screen and (min-width: 1200px) {
        #home .wtb-list .wtb-dropdown, #home .wtb-list .subscribe {
          width: 50%; } }
    #home .wtb-list .btn-learn {
      width: 100%; }
      @media only screen and (min-width: 1200px) {
        #home .wtb-list .btn-learn {
          width: 50%; } }
  #home .feature-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end; }
    @media only screen and (max-width: 768px) {
      #home .feature-list {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center; } }
    #home .feature-list .feature {
      font-size: 1rem;
      margin-bottom: 2rem; }
      @media only screen and (min-width: 992px) {
        #home .feature-list .feature {
          font-size: 1rem;
          margin-bottom: 0; } }
      @media only screen and (min-width: 1200px) {
        #home .feature-list .feature {
          font-size: 1.2rem; } }
      @media only screen and (min-width: 1500px) {
        #home .feature-list .feature {
          font-size: 1.4rem; } }
      #home .feature-list .feature .feature-title {
        font-family: "TT-Norms-Pro-Normal", sans-serif;
        color: #3473e7;
        letter-spacing: 1px;
        font-size: 2.5rem;
        font-weight: 600; }
        @media only screen and (max-width: 480px) {
          #home .feature-list .feature .feature-title {
            font-size: 2rem; } }
        @media only screen and (min-width: 1500px) {
          #home .feature-list .feature .feature-title {
            font-size: 3rem; } }
      #home .feature-list .feature .feature-desc {
        font-size: 1rem;
        letter-spacing: 1px; }
        @media only screen and (max-width: 480px) {
          #home .feature-list .feature .feature-desc {
            font-size: 0.8rem; } }
      #home .feature-list .feature img {
        width: 80px;
        margin-bottom: 10px; }
        @media only screen and (min-width: 768px) {
          #home .feature-list .feature img {
            width: auto; } }
  #home .kv_img {
    background-position: top center;
    background-repeat: no-repeat; }
  #home section.hero {
    overflow: hidden;
    padding-top: 76px;
    padding-bottom: 0;
    background-image: url("../images/home/kv-hero.webp");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 1200px; }
    @media only screen and (min-width: 992px) {
      #home section.hero {
        background-size: 1600px; } }
    @media only screen and (min-width: 1200px) {
      #home section.hero {
        background-image: url("../images/home/kv-hero.jpg");
        background-size: auto; } }
    @media only screen and (max-width: 480px) {
      #home section.hero {
        background-size: 700px;
        background-position: bottom center; } }
    #home section.hero .content {
      padding: 7% 0 62%; }
      @media only screen and (min-width: 1200px) {
        #home section.hero .content {
          padding: 7% 0 62%; } }
      @media only screen and (min-width: 1500px) {
        #home section.hero .content {
          padding: 7% 0 51%; } }
      @media only screen and (max-width: 480px) {
        #home section.hero .content {
          padding: 7% 0 65%; } }
      #home section.hero .content img {
        margin: 0 auto; }
        @media only screen and (max-width: 480px) {
          #home section.hero .content img {
            padding: 0 10%; } }
      #home section.hero .content h1 {
        font-size: 36px; }
        @media only screen and (max-width: 480px) {
          #home section.hero .content h1 {
            font-size: 1.5rem;
            margin-top: 10px; } }
    #home section.hero .item-list {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-flow: row nowrap;
              flex-flow: row nowrap;
      -ms-flex-line-pack: justify;
          align-content: space-between;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      max-width: 1920px;
      margin: 0 auto; }
    #home section.hero .set {
      width: 35%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-flow: row wrap;
              flex-flow: row wrap;
      -ms-flex-line-pack: justify;
          align-content: space-between;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between; }
    #home section.hero .tagline {
      font-size: 4rem;
      position: absolute;
      top: 145px;
      left: 2rem;
      z-index: 99; }
      @media only screen and (min-width: 768px) {
        #home section.hero .tagline {
          font-size: 5rem;
          top: 18rem; } }
      @media only screen and (min-width: 992px) {
        #home section.hero .tagline {
          font-size: 6.5rem;
          top: 22rem;
          left: 3.5rem; } }
      @media only screen and (min-width: 1200px) {
        #home section.hero .tagline {
          font-size: 8rem;
          top: 26rem;
          left: 4.5rem; } }
      @media only screen and (min-width: 1500px) {
        #home section.hero .tagline {
          font-size: 10rem;
          top: 31rem;
          left: 4.5rem; } }
    #home section.hero .text-box {
      margin-top: 8rem;
      margin-bottom: 0;
      padding-left: 2rem; }
      @media only screen and (max-width: 480px) {
        #home section.hero .text-box {
          margin-top: 5rem;
          margin-bottom: 0;
          padding-left: 1rem;
          padding-right: 1rem; } }
    #home section.hero .btn-subscribe {
      display: inline-block;
      width: auto;
      margin-top: 1rem; }
    #home section.hero .kv-1 {
      max-width: 348px; }
      @media only screen and (max-width: 480px) {
        #home section.hero .kv-1 {
          padding-right: 1.5%; } }
    #home section.hero .kv-2 {
      max-width: 348px; }
      @media only screen and (max-width: 480px) {
        #home section.hero .kv-2 {
          padding-left: 1.5%; } }
    #home section.hero .kv-3 {
      margin-top: 23px;
      max-width: 692px; }
      @media only screen and (max-width: 480px) {
        #home section.hero .kv-3 {
          margin-top: 3%; } }
    #home section.hero .kv-img {
      position: relative;
      padding-left: 0;
      padding-right: 0; }
      @media only screen and (min-width: 992px) {
        #home section.hero .kv-img {
          padding-left: 10px;
          padding-right: 10px; } }
      #home section.hero .kv-img:after {
        content: "";
        position: absolute;
        top: 0;
        left: calc(-100% + -10px);
        height: 100%;
        width: 100%;
        min-width: 200px;
        max-width: 100%;
        background-image: url("../images/filler-dark.jpg");
        display: none; }
        @media only screen and (min-width: 768px) {
          #home section.hero .kv-img:after {
            display: block; } }
    #home section.hero .kv-vid {
      padding-left: 0;
      padding-right: 0; }
      @media only screen and (max-width: 768px) {
        #home section.hero .kv-vid {
          margin-top: 3%; } }
      @media only screen and (min-width: 480px) {
        #home section.hero .kv-vid img {
          width: 100%; } }
      @media only screen and (min-width: 768px) {
        #home section.hero .kv-vid {
          padding-left: 10px;
          padding-right: 10px; } }
      @media only screen and (min-width: 1200px) {
        #home section.hero .kv-vid {
          max-width: 568px; } }
      @media only screen and (min-width: 1500px) {
        #home section.hero .kv-vid {
          max-width: 674px; } }
      #home section.hero .kv-vid:after {
        content: "";
        position: absolute;
        top: 0;
        right: calc(-100% + -10px);
        display: block;
        height: 100%;
        width: 100%;
        min-width: 200px;
        max-width: 100%;
        background-color: #d39d67; }
      #home section.hero .kv-vid .btn-video {
        display: block;
        height: 100%;
        overflow: hidden; }
        @media only screen and (min-width: 992px) {
          #home section.hero .kv-vid .btn-video {
            max-height: 599px; } }
        @media only screen and (min-width: 1200px) {
          #home section.hero .kv-vid .btn-video {
            max-height: 727px; } }
        @media only screen and (min-width: 1500px) {
          #home section.hero .kv-vid .btn-video {
            max-height: 868px; } }
  #home section.vid {
    padding: 5rem 0; }
    #home section.vid .col-xs-12 {
      padding-left: 0;
      padding-right: 0; }
    #home section.vid .play-button {
      width: 60px;
      height: 60px; }
      @media only screen and (min-width: 768px) {
        #home section.vid .play-button {
          width: 100px;
          height: 100px; } }
      @media only screen and (min-width: 1200px) {
        #home section.vid .play-button {
          width: 128px;
          height: 128px; } }
      #home section.vid .play-button:after {
        content: "Create with ASUS Campaign Video";
        position: absolute;
        bottom: -2rem;
        display: block;
        width: 662px;
        font-size: 1rem;
        left: -135%;
        color: #fff; }
        @media only screen and (min-width: 768px) {
          #home section.vid .play-button:after {
            left: -280%;
            font-size: 3rem;
            bottom: -5rem; } }
        @media only screen and (min-width: 1200px) {
          #home section.vid .play-button:after {
            left: -200%; } }
  #home .sec_feature_1 {
    padding: 5rem 0 0;
    text-align: center; }
    #home .sec_feature_1 img {
      margin: 0 auto; }
    #home .sec_feature_1 .feature-list {
      max-width: 1200px;
      margin: 2rem auto;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center; }
      @media only screen and (max-width: 768px) {
        #home .sec_feature_1 .feature-list {
          margin: 2rem auto;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
              -ms-flex-flow: column;
                  flex-flow: column;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center; } }
  #home .sec_feature_2 {
    padding: 0 0 5rem;
    text-align: center; }
    #home .sec_feature_2 img {
      margin: 0 auto; }
    #home .sec_feature_2 .workflow {
      margin: 0 auto; }
      #home .sec_feature_2 .workflow .workflow-nav {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-flow: row wrap;
                flex-flow: row wrap;
        width: 100%;
        margin: 3rem auto 0; }
        #home .sec_feature_2 .workflow .workflow-nav .tab {
          width: 33.3333%;
          font-size: 1rem;
          padding: 20px 0;
          text-align: center;
          font-family: "TT-Norms-Pro-Normal", sans-serif;
          letter-spacing: 1px;
          cursor: pointer;
          -webkit-user-select: none;
             -moz-user-select: none;
              -ms-user-select: none;
                  user-select: none;
          color: #999;
          position: relative; }
          @media only screen and (min-width: 768px) {
            #home .sec_feature_2 .workflow .workflow-nav .tab {
              width: 33.3333%;
              font-size: 1.5rem; } }
          @media only screen and (min-width: 1500px) {
            #home .sec_feature_2 .workflow .workflow-nav .tab {
              font-size: 1.8rem; } }
          #home .sec_feature_2 .workflow .workflow-nav .tab:after {
            content: "";
            height: 1px;
            background: #333;
            display: block;
            width: 100%;
            position: absolute;
            bottom: 0; }
          #home .sec_feature_2 .workflow .workflow-nav .tab.hd-active {
            color: #fff; }
            #home .sec_feature_2 .workflow .workflow-nav .tab.hd-active:after {
              height: 5px;
              background: linear-gradient(90deg, #185bf3, #8b34f8); }
      #home .sec_feature_2 .workflow .workflow-img {
        position: relative; }
        #home .sec_feature_2 .workflow .workflow-img .tab-content {
          display: none; }
          #home .sec_feature_2 .workflow .workflow-img .tab-content.hd-active {
            display: block; }
          #home .sec_feature_2 .workflow .workflow-img .tab-content .item-list {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
                -ms-flex-flow: row wrap;
                    flex-flow: row wrap;
            -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                    justify-content: space-between;
            -webkit-box-align: baseline;
                -ms-flex-align: baseline;
                    align-items: baseline; }
            #home .sec_feature_2 .workflow .workflow-img .tab-content .item-list .item {
              width: 100%;
              margin: 2rem 0; }
              @media only screen and (min-width: 768px) {
                #home .sec_feature_2 .workflow .workflow-img .tab-content .item-list .item {
                  width: 30%; } }
              #home .sec_feature_2 .workflow .workflow-img .tab-content .item-list .item .pd-content p {
                line-height: 1.5rem; }
          @media only screen and (min-width: 768px) {
            #home .sec_feature_2 .workflow .workflow-img .tab-content .disclaimer {
              text-align: left; } }
          #home .sec_feature_2 .workflow .workflow-img .tab-content .title {
            font-size: 1.3rem;
            margin: 1rem 0;
            font-family: "TT-Norms-Pro-Normal", sans-serif;
            color: #d39d67; }
            @media only screen and (min-width: 768px) {
              #home .sec_feature_2 .workflow .workflow-img .tab-content .title {
                font-size: 1rem; } }
            @media only screen and (min-width: 992px) {
              #home .sec_feature_2 .workflow .workflow-img .tab-content .title {
                font-size: 1.3rem; } }
            @media only screen and (min-width: 1200px) {
              #home .sec_feature_2 .workflow .workflow-img .tab-content .title {
                font-size: 1.5rem; } }
  #home .sec_feature_3 {
    padding: 5rem 0; }
    #home .sec_feature_3 .products-cta {
      background-image: url("../images/home/kv-best-product.jpg");
      background-repeat: no-repeat;
      background-position: top center;
      background-size: cover;
      height: 362px;
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center; }
      #home .sec_feature_3 .products-cta .content {
        width: 80%;
        text-align: center; }
  #home .sec_feature_4 {
    padding: 5rem 0;
    text-align: center; }
    #home .sec_feature_4 img {
      margin: 0 auto; }
    #home .sec_feature_4 .wtb-list .card-button, #home .sec_feature_4 .wtb-list .btn-learn {
      max-width: 240px; }
      @media only screen and (min-width: 1500px) {
        #home .sec_feature_4 .wtb-list .card-button, #home .sec_feature_4 .wtb-list .btn-learn {
          max-width: 280px; } }
    #home .sec_feature_4 .owl-carousel .item {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-flow: row wrap;
              flex-flow: row wrap;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center; }
      @media only screen and (max-width: 768px) {
        #home .sec_feature_4 .owl-carousel .item {
          width: 480px;
          margin: 0 auto; } }
      @media only screen and (max-width: 480px) {
        #home .sec_feature_4 .owl-carousel .item {
          width: 90%;
          margin: 0 auto; } }
      #home .sec_feature_4 .owl-carousel .item.alt {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
            -ms-flex-flow: row-reverse;
                flex-flow: row-reverse;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap; }
      #home .sec_feature_4 .owl-carousel .item .title {
        width: 100%;
        margin: 2rem 0; }
        #home .sec_feature_4 .owl-carousel .item .title h3 {
          font-family: "TT-Norms-Pro-Normal", sans-serif;
          font-size: 2.3rem; }
          @media only screen and (max-width: 480px) {
            #home .sec_feature_4 .owl-carousel .item .title h3 {
              font-size: 1.5rem; } }
          @media only screen and (min-width: 1500px) {
            #home .sec_feature_4 .owl-carousel .item .title h3 {
              font-size: 2.8rem; } }
        #home .sec_feature_4 .owl-carousel .item .title .sub-title {
          font-size: 1.5rem;
          line-height: 1; }
          @media only screen and (max-width: 480px) {
            #home .sec_feature_4 .owl-carousel .item .title .sub-title {
              font-size: 1.1rem; } }
          @media only screen and (min-width: 1500px) {
            #home .sec_feature_4 .owl-carousel .item .title .sub-title {
              font-size: 1.8rem; } }
      #home .sec_feature_4 .owl-carousel .item .kv {
        width: 100%; }
        @media only screen and (min-width: 992px) {
          #home .sec_feature_4 .owl-carousel .item .kv {
            width: 55%; } }
        #home .sec_feature_4 .owl-carousel .item .kv img {
          width: auto; }
      #home .sec_feature_4 .owl-carousel .item .pd-content {
        text-align: left;
        width: 100%; }
        @media only screen and (min-width: 992px) {
          #home .sec_feature_4 .owl-carousel .item .pd-content {
            width: 45%; } }
        #home .sec_feature_4 .owl-carousel .item .pd-content .feature-list {
          text-align: center;
          -ms-flex-pack: distribute;
              justify-content: space-around;
          max-width: 550px;
          margin: 2rem auto 0; }
          #home .sec_feature_4 .owl-carousel .item .pd-content .feature-list .feature:first-child {
            width: 100%;
            -webkit-box-flex: 0;
                -ms-flex: none;
                    flex: none; }
            #home .sec_feature_4 .owl-carousel .item .pd-content .feature-list .feature:first-child .feature-desc {
              font-size: 1.5rem; }
              @media only screen and (min-width: 1500px) {
                #home .sec_feature_4 .owl-carousel .item .pd-content .feature-list .feature:first-child .feature-desc {
                  font-size: 2rem; } }
          #home .sec_feature_4 .owl-carousel .item .pd-content .feature-list .feature img {
            width: 80px; }
        #home .sec_feature_4 .owl-carousel .item .pd-content .title {
          font-family: "TT-Norms-Pro-Normal", sans-serif;
          font-size: 1.5rem;
          margin: 1rem 0; }
          @media only screen and (max-width: 480px) {
            #home .sec_feature_4 .owl-carousel .item .pd-content .title {
              font-size: 1.2rem; } }
          @media only screen and (min-width: 1500px) {
            #home .sec_feature_4 .owl-carousel .item .pd-content .title {
              font-size: 2rem; } }
  #home .sec_feature_5 {
    padding: 5rem 0; }
    #home .sec_feature_5 .proart-cta {
      background-image: url("../images/home/kv-proart.jpg");
      background-repeat: no-repeat;
      background-position: top left;
      background-size: 800px;
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: reverse;
          -ms-flex-direction: row-reverse;
              flex-direction: row-reverse; }
      @media only screen and (min-width: 768px) {
        #home .sec_feature_5 .proart-cta {
          height: 205px;
          background-size: cover;
          background-position: top center; } }
      @media only screen and (min-width: 992px) {
        #home .sec_feature_5 .proart-cta {
          height: 265px; } }
      @media only screen and (min-width: 1200px) {
        #home .sec_feature_5 .proart-cta {
          height: 320px; } }
      @media only screen and (min-width: 1500px) {
        #home .sec_feature_5 .proart-cta {
          height: 362px; } }
      #home .sec_feature_5 .proart-cta .content {
        width: 100%;
        padding-top: 70%; }
        @media only screen and (min-width: 768px) {
          #home .sec_feature_5 .proart-cta .content {
            width: 45%;
            padding-top: 0; } }
        @media only screen and (min-width: 992px) {
          #home .sec_feature_5 .proart-cta .content {
            width: 45%; } }
        @media only screen and (min-width: 1200px) {
          #home .sec_feature_5 .proart-cta .content {
            width: 40%; } }
        #home .sec_feature_5 .proart-cta .content a {
          color: #fff;
          text-decoration: none; }
          #home .sec_feature_5 .proart-cta .content a:hover {
            color: #d39d67; }
        #home .sec_feature_5 .proart-cta .content p {
          font-size: 1.3rem;
          margin: 0; }
          @media only screen and (max-width: 480px) {
            #home .sec_feature_5 .proart-cta .content p {
              font-size: 1rem; } }
  #home .sec_feature_6 {
    padding: 5rem 0;
    text-align: center; }
    #home .sec_feature_6 .title {
      max-width: 700px;
      margin-left: auto;
      margin-right: auto; }
      @media only screen and (min-width: 1500px) {
        #home .sec_feature_6 .title {
          max-width: 860px; } }
      @media only screen and (max-width: 480px) {
        #home .sec_feature_6 .title {
          padding-left: 20px;
          padding-right: 20px; } }
    #home .sec_feature_6 .product_list {
      position: relative;
      overflow: hidden;
      margin-right: auto;
      margin-left: auto;
      width: 100%;
      max-width: 1280px;
      font-size: 0; }
    #home .sec_feature_6 .product_list .product {
      display: inline-block;
      position: relative;
      overflow: hidden;
      box-sizing: border-box;
      width: 20%;
      height: 350px;
      vertical-align: top; }
    #home .sec_feature_6 .product_list .product .product-img {
      position: absolute;
      top: 0;
      left: 50%;
      margin-left: -128px;
      width: 256px;
      height: 350px; }
    #home .sec_feature_6 .product_list .product .product-img .img {
      width: 256px;
      height: 350px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover; }
    #home .sec_feature_6 .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; }
    #home .sec_feature_6 .product_list .product .content-link .link-text {
      display: inline-block; }
    #home .sec_feature_6 .product_list .product .product-mask {
      position: absolute;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7); }
    #home .sec_feature_6 .product_list .product .product-content {
      position: absolute;
      z-index: 9;
      top: 50%;
      width: 100%;
      text-align: center;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%); }
    #home .sec_feature_6 .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.3;
      text-shadow: 0 0 9px #000;
      font-family: "TT-Norms-Pro-Normal", sans-serif; }
    #home .sec_feature_6 .product_list .product .product-content .content-hidden {
      position: relative;
      overflow: hidden;
      height: 100%; }
    #home .sec_feature_6 .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.125rem;
      line-height: 1.6; }
    #home .sec_feature_6 .product_list .product .product-frame {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
    #home .sec_feature_6 .product_list .product .product-frame > div {
      position: absolute; }
    #home .sec_feature_6 .product_list .product .product-frame .frame-top {
      top: 0;
      left: 0;
      height: 2px;
      background: linear-gradient(to right, #a450df, #8455de); }
    #home .sec_feature_6 .product_list .product .product-frame .frame-right {
      top: 0;
      right: 0;
      width: 2px;
      background: linear-gradient(to bottom, #8455de, #2264dd); }
    #home .sec_feature_6 .product_list .product .product-frame .frame-bottom {
      right: 0;
      bottom: 0;
      height: 2px;
      background: linear-gradient(to left, #2264dd, #425fdd); }
    #home .sec_feature_6 .product_list .product .product-frame .frame-left {
      bottom: 0;
      left: 0;
      width: 2px;
      background: linear-gradient(to top, #425fdd, #a450df); }
    #home .sec_feature_6 .product_list .product .product-mask {
      top: 0;
      left: 0;
      opacity: 0;
      transition: opacity 400ms; }
    #home .sec_feature_6 .product_list .product .product-content .content-hidden {
      opacity: 0;
      max-height: 0; }
    #home .sec_feature_6 .product_list .product .product-frame .frame-top {
      width: 0%;
      transition: width 400ms 400ms; }
    #home .sec_feature_6 .product_list .product .product-frame .frame-right {
      height: 0%;
      transition: height 400ms; }
    #home .sec_feature_6 .product_list .product .product-frame .frame-bottom {
      width: 0%;
      transition: width 400ms 400ms; }
    #home .sec_feature_6 .product_list .product .product-frame .frame-left {
      height: 0%;
      transition: height 400ms; }

@-webkit-keyframes hideToShow {
  0% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes hideToShow {
  0% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }
    #home .sec_feature_6 .product_list .product.hover .product-mask {
      z-index: 9;
      opacity: 0.85; }
    #home .sec_feature_6 .product_list .product.hover .product-content .content-title {
      transition: -webkit-transform 0ms 200ms;
      transition: transform 0ms 200ms;
      transition: transform 0ms 200ms, -webkit-transform 0ms 200ms;
      -webkit-animation: hideToShow 1s;
              animation: hideToShow 1s; }
    #home .sec_feature_6 .product_list .product.hover .product-content .content-hidden {
      opacity: 1;
      max-height: 1000px;
      transition: opacity 500ms linear 500ms, max-height 500ms linear 450ms; }
    #home .sec_feature_6 .product_list {
      left: 50%;
      margin-left: -650px;
      padding-top: 89px;
      width: 1300px;
      max-width: 1300px; }
    #home .sec_feature_6 .product_list .product {
      margin: 0 8px 17px; }
    #home .sec_feature_6 .product_list .product .product-img {
      left: 0;
      margin-left: 0; }
    #home .sec_feature_6 .product_list .product.s2-1 {
      width: 308px;
      height: 460px; }
    #home .sec_feature_6 .product_list .product.s2-1 .product-img {
      width: 308px;
      height: 460px; }
    #home .sec_feature_6 .product_list .product.s2-1 .img {
      width: 308px;
      height: 460px; }
    #home .sec_feature_6 .product_list .s2-1 .img {
      background-image: url("../images/home/card_1.jpg"); }
    #home .sec_feature_6 .product_list .product.s2-2 {
      width: 308px;
      height: 460px; }
    #home .sec_feature_6 .product_list .product.s2-2 .product-img {
      width: 308px;
      height: 460px; }
    #home .sec_feature_6 .product_list .product.s2-2 .img {
      width: 308px;
      height: 460px; }
    #home .sec_feature_6 .product_list .s2-2 .img {
      background-image: url("../images/home/card_2.jpg"); }
    #home .sec_feature_6 .product_list .product.s2-3 {
      width: 308px;
      height: 460px; }
    #home .sec_feature_6 .product_list .product.s2-3 .product-img {
      width: 308px;
      height: 460px; }
    #home .sec_feature_6 .product_list .product.s2-3 .img {
      width: 308px;
      height: 460px; }
    #home .sec_feature_6 .product_list .s2-3 .img {
      background-image: url("../images/home/card_3.jpg"); }
    #home .sec_feature_6 .product_list .product.s2-4 {
      width: 308px;
      height: 460px; }
    #home .sec_feature_6 .product_list .product.s2-4 .product-img {
      width: 308px;
      height: 460px; }
    #home .sec_feature_6 .product_list .product.s2-4 .img {
      width: 308px;
      height: 460px; }
    #home .sec_feature_6 .product_list .s2-4 .img {
      background-image: url("../images/home/card_4.jpg"); }
    #home .sec_feature_6 .product_list .product.s2-5 {
      width: 416px;
      height: 380px; }
    #home .sec_feature_6 .product_list .product.s2-5 .product-img {
      width: 416px;
      height: 380px; }
    #home .sec_feature_6 .product_list .product.s2-5 .img {
      width: 416px;
      height: 380px; }
    #home .sec_feature_6 .product_list .s2-5 .img {
      background-image: url("../images/home/card_5.jpg"); }
    #home .sec_feature_6 .product_list .product.s2-6 {
      width: 416px;
      height: 380px; }
    #home .sec_feature_6 .product_list .product.s2-6 .product-img {
      width: 416px;
      height: 380px; }
    #home .sec_feature_6 .product_list .product.s2-6 .img {
      width: 416px;
      height: 380px; }
    #home .sec_feature_6 .product_list .s2-6 .img {
      background-image: url("../images/home/card_6.jpg"); }
    #home .sec_feature_6 .product_list .product.s2-7 {
      width: 416px;
      height: 380px; }
    #home .sec_feature_6 .product_list .product.s2-7 .product-img {
      width: 416px;
      height: 380px; }
    #home .sec_feature_6 .product_list .product.s2-7 .img {
      width: 416px;
      height: 380px; }
    #home .sec_feature_6 .product_list .s2-7 .img {
      background-image: url("../images/home/card_7.jpg"); }
    @media (min-width: 1280px) {
      #home .sec_feature_6 .product_list .product:hover .product-frame {
        z-index: 12; }
      #home .sec_feature_6 .product_list .product:hover .product-frame .frame-top {
        width: 100%;
        transition: width 400ms 400ms; }
      #home .sec_feature_6 .product_list .product:hover .product-frame .frame-right {
        height: 100%;
        transition: height 400ms 800ms; }
      #home .sec_feature_6 .product_list .product:hover .product-frame .frame-bottom {
        width: 100%;
        transition: width 400ms 400ms; }
      #home .sec_feature_6 .product_list .product:hover .product-frame .frame-left {
        height: 100%;
        transition: height 400ms 800ms; }
      #home .sec_feature_6 .product_list .product:hover .product-mask {
        z-index: 9;
        opacity: 1; }
      #home .sec_feature_6 .product_list .product:hover .product-content .content-title {
        transition: -webkit-transform 0ms 200ms;
        transition: transform 0ms 200ms;
        transition: transform 0ms 200ms, -webkit-transform 0ms 200ms;
        -webkit-animation: hideToShow 1s;
                animation: hideToShow 1s; }
      #home .sec_feature_6 .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) {
      #home .sec_feature_6 .product_list {
        text-align: center; }
      #home .sec_feature_6 .product_list .product .product-content .content-title {
        margin-bottom: -10px;
        padding: 0 28px;
        font-size: 1.875rem; }
      #home .sec_feature_6 .product_list .product {
        display: inline-block;
        padding: 1px;
        box-sizing: border-box;
        width: 365px;
        height: 250px; }
      #home .sec_feature_6 .product_list .product .product-content .content-hidden .content-info {
        line-height: 1.3;
        margin-top: 26px; }
      #home .sec_feature_6 .product_list .product .product-img {
        top: 50%;
        left: 50%;
        margin-left: unset;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%); } }
    @media all and (min-width: 731px) and (max-width: 1279.5px) {
      #home .sec_feature_6 .product_list {
        padding-top: 89px;
        left: 50%;
        margin-left: -385px;
        width: 770px; }
      #home .sec_feature_6 .product_list .product {
        margin: 0 6px 14px; }
      #home .sec_feature_6 .product_list .product .product-img {
        left: 50%;
        margin-left: 0; }
      #home .sec_feature_6 .product_list .product.s2-1 {
        width: 358px;
        height: 460px; }
      #home .sec_feature_6 .product_list .product.s2-1 .product-img {
        width: 358px;
        height: 460px; }
      #home .sec_feature_6 .product_list .product.s2-1 .img {
        width: 358px;
        height: 460px; } }
    @media all and (min-width: 731px) and (max-width: 1279.5px) {
      #home .sec_feature_6 .product_list .product.s2-2 {
        width: 358px;
        height: 460px; }
      #home .sec_feature_6 .product_list .product.s2-2 .product-img {
        width: 358px;
        height: 460px; }
      #home .sec_feature_6 .product_list .product.s2-2 .img {
        width: 358px;
        height: 460px; } }
    @media all and (min-width: 731px) and (max-width: 1279.5px) {
      #home .sec_feature_6 .product_list .product.s2-3 {
        width: 358px;
        height: 460px; }
      #home .sec_feature_6 .product_list .product.s2-3 .product-img {
        width: 358px;
        height: 460px; }
      #home .sec_feature_6 .product_list .product.s2-3 .img {
        width: 358px;
        height: 460px; } }
    @media all and (min-width: 731px) and (max-width: 1279.5px) {
      #home .sec_feature_6 .product_list .product.s2-4 {
        width: 358px;
        height: 460px; }
      #home .sec_feature_6 .product_list .product.s2-4 .product-img {
        width: 358px;
        height: 460px; }
      #home .sec_feature_6 .product_list .product.s2-4 .img {
        width: 358px;
        height: 460px; } }
    @media all and (min-width: 731px) and (max-width: 1279.5px) {
      #home .sec_feature_6 .product_list .product.s2-5 {
        width: 358px;
        height: 380px; }
      #home .sec_feature_6 .product_list .product.s2-5 .product-img {
        width: 358px;
        height: 380px; }
      #home .sec_feature_6 .product_list .product.s2-5 .img {
        width: 358px;
        height: 380px; } }
    @media all and (min-width: 731px) and (max-width: 1279.5px) {
      #home .sec_feature_6 .product_list .product.s2-6 {
        width: 358px;
        height: 380px; }
      #home .sec_feature_6 .product_list .product.s2-6 .product-img {
        width: 358px;
        height: 380px; }
      #home .sec_feature_6 .product_list .product.s2-6 .img {
        width: 358px;
        height: 380px; } }
    @media all and (min-width: 731px) and (max-width: 1279.5px) {
      #home .sec_feature_6 .product_list .product.s2-7 {
        width: 730px;
        height: 358px; }
      #home .sec_feature_6 .product_list .product.s2-7 .product-img {
        width: 730px;
        height: 358px; }
      #home .sec_feature_6 .product_list .product.s2-7 .img {
        width: 730px;
        height: 358px; } }
    @media all and (max-width: 730.5px) {
      #home .sec_feature_6 .product_list {
        text-align: center; }
      #home .sec_feature_6 .product_list .product {
        display: inline-block;
        padding: 1px;
        box-sizing: border-box;
        width: 100%;
        height: 300px; }
      #home .sec_feature_6 .product_list .product .content-title {
        margin-bottom: -10px; }
      #home .sec_feature_6 .product_list .product .product-content .content-hidden .content-info {
        line-height: 1.3;
        margin-top: 26px; }
      #home .sec_feature_6 .product_list .product .product-img {
        top: 50%;
        left: 50%;
        margin-left: unset;
        width: 320px;
        height: 300px;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%); }
      #home .sec_feature_6 .product_list .product .product-img .img {
        width: 320px;
        height: 300px; } }
    @media all and (max-width: 730.5px) {
      #home .sec_feature_6 .product_list {
        padding-top: 31px;
        left: 0;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        max-width: 500px; }
      #home .sec_feature_6 .product_list .product {
        margin: 0 auto 14px;
        max-width: 414px; }
      #home .sec_feature_6 .product_list .product .product-content .content-title {
        font-size: 1.5rem; }
      #home .sec_feature_6 .product_list .product .product-content .content-info {
        line-height: 1.6;
        margin-top: 26px;
        font-size: 0.9375rem; }
      #home .sec_feature_6 .product_list .product .product-img {
        left: 50%;
        margin-left: 0;
        max-width: 414px; }
      #home .sec_feature_6 .product_list .product .product-img .img {
        max-width: 414px; }
      #home .sec_feature_6 .product_list .product.s2-1 {
        width: 100%;
        height: 290px; }
      #home .sec_feature_6 .product_list .product.s2-1 .product-img {
        width: 100%;
        height: 290px; }
      #home .sec_feature_6 .product_list .product.s2-1 .img {
        width: 100%;
        height: 290px; } }
    @media all and (max-width: 730.5px) {
      #home .sec_feature_6 .product_list .product.s2-2 {
        width: 100%;
        height: 290px; }
      #home .sec_feature_6 .product_list .product.s2-2 .product-img {
        width: 100%;
        height: 290px; }
      #home .sec_feature_6 .product_list .product.s2-2 .img {
        width: 100%;
        height: 290px; } }
    @media all and (max-width: 730.5px) {
      #home .sec_feature_6 .product_list .product.s2-3 {
        width: 100%;
        height: 290px; }
      #home .sec_feature_6 .product_list .product.s2-3 .product-img {
        width: 100%;
        height: 290px; }
      #home .sec_feature_6 .product_list .product.s2-3 .img {
        width: 100%;
        height: 290px; } }
    @media all and (max-width: 730.5px) {
      #home .sec_feature_6 .product_list .product.s2-4 {
        width: 100%;
        height: 290px; }
      #home .sec_feature_6 .product_list .product.s2-4 .product-img {
        width: 100%;
        height: 290px; }
      #home .sec_feature_6 .product_list .product.s2-4 .img {
        width: 100%;
        height: 290px; } }
    @media all and (max-width: 730.5px) {
      #home .sec_feature_6 .product_list .product.s2-5 {
        width: 100%;
        height: 290px; }
      #home .sec_feature_6 .product_list .product.s2-5 .product-img {
        width: 100%;
        height: 290px; }
      #home .sec_feature_6 .product_list .product.s2-5 .img {
        width: 100%;
        height: 290px; } }
    @media all and (max-width: 730.5px) {
      #home .sec_feature_6 .product_list .product.s2-6 {
        width: 100%;
        height: 290px; }
      #home .sec_feature_6 .product_list .product.s2-6 .product-img {
        width: 100%;
        height: 290px; }
      #home .sec_feature_6 .product_list .product.s2-6 .img {
        width: 100%;
        height: 290px; } }
    @media all and (max-width: 730.5px) {
      #home .sec_feature_6 .product_list .product.s2-7 {
        width: 100%;
        height: 290px; }
      #home .sec_feature_6 .product_list .product.s2-7 .product-img {
        width: 100%;
        height: 290px; }
      #home .sec_feature_6 .product_list .product.s2-7 .img {
        width: 100%;
        height: 290px; } }
  #home section.display {
    margin-top: 2rem;
    margin-bottom: 2rem; }
    @media only screen and (min-width: 768px) {
      #home section.display {
        margin-top: 5rem;
        margin-bottom: 5rem; } }
    @media only screen and (min-width: 1200px) {
      #home section.display {
        margin-top: 5rem;
        margin-bottom: 5rem; } }
    #home section.display .container-fluid {
      position: relative;
      padding-left: 0;
      padding-right: 0; }
    #home section.display .kv-img:before {
      content: "";
      position: absolute;
      top: 106%;
      left: 0;
      display: block;
      max-height: 222px;
      height: 100%;
      width: 100%;
      min-width: 200px;
      max-width: 100%;
      background-image: url("../images/home/monitor-kv2@mobile.jpg");
      background-position: top left;
      background-repeat: no-repeat;
      background-size: cover; }
      @media only screen and (min-width: 768px) {
        #home section.display .kv-img:before {
          top: 0;
          max-height: 100%;
          left: inherit;
          right: calc(-100% + -10px);
          background-image: url("../images/home/monitor-kv2.jpg");
          background-size: auto; } }
      @media only screen and (min-width: 992px) {
        #home section.display .kv-img:before {
          background-size: contain; } }
      @media only screen and (min-width: 1200px) {
        #home section.display .kv-img:before {
          background-size: auto; } }
    #home section.display .kv-img:after {
      content: "";
      position: absolute;
      top: 0;
      left: calc(-100% + -10px);
      display: none;
      height: 100%;
      width: 100%;
      min-width: 200px;
      max-width: 100%;
      background-image: url("../images/home/monitor-kv1.jpg");
      background-position: top right;
      background-repeat: no-repeat; }
      @media only screen and (min-width: 768px) {
        #home section.display .kv-img:after {
          display: block; } }
    @media only screen and (max-width: 768px) {
      #home section.display .kv-img {
        padding: 0; } }
    @media only screen and (min-width: 992px) {
      #home section.display .kv-img {
        max-width: 64%;
        position: relative;
        right: -18%; } }
    @media only screen and (min-width: 1200px) {
      #home section.display .kv-img {
        max-width: 60%;
        position: relative;
        right: -20%; } }
    @media only screen and (min-width: 1500px) {
      #home section.display .kv-img {
        max-width: 1024px;
        position: relative;
        right: -9.5%; } }
    #home section.display .content {
      padding: 0 6%; }
      @media only screen and (min-width: 992px) {
        #home section.display .content {
          padding: 0 2rem; } }
      #home section.display .content p {
        padding-right: 0; }
        @media only screen and (min-width: 992px) {
          #home section.display .content p {
            padding-right: 2rem; } }
      #home section.display .content .text-box {
        margin-bottom: 5rem; }
      #home section.display .content .feature-list {
        margin-top: 2rem;
        width: 100%; }
        @media only screen and (min-width: 768px) {
          #home section.display .content .feature-list {
            width: 80%;
            margin-top: 2rem;
            padding: 0 1rem; } }
        @media only screen and (min-width: 992px) {
          #home section.display .content .feature-list {
            width: 100%; } }
        @media only screen and (min-width: 1200px) {
          #home section.display .content .feature-list {
            width: 80%; } }
        #home section.display .content .feature-list .feature {
          text-align: center; }
          #home section.display .content .feature-list .feature img {
            margin: 0 auto; }
      @media only screen and (min-width: 1200px) {
        #home section.display .content .wtb-list {
          -webkit-box-pack: start;
              -ms-flex-pack: start;
                  justify-content: flex-start; }
          #home section.display .content .wtb-list > div, #home section.display .content .wtb-list > a {
            width: auto; } }
    #home section.display .contest-cta {
      padding-top: 1rem;
      text-align: center; }
      #home section.display .contest-cta a {
        font-size: 1.5rem;
        text-decoration: none;
        font-weight: bold; }
        #home section.display .contest-cta a:hover, #home section.display .contest-cta a:focus {
          text-decoration: underline;
          color: #d39d67; }

#pros {
  overflow-x: hidden;
  max-width: 1920px; }
  #pros p {
    max-width: 900px; }
  #pros h2 {
    color: #fff; }
  #pros .owl-theme .owl-dots .owl-dot.active span, #pros .owl-theme .owl-dots .owl-dot:hover span {
    background: #185bf3; }
  #pros .btn {
    text-transform: none;
    border: none; }
  #pros .animation {
    opacity: 0; }
  #pros .animation.in-viewport {
    -webkit-animation: bottomFadeIn .5s forwards .1s;
            animation: bottomFadeIn .5s forwards .1s; }
  #pros .img.animation.in-viewport {
    -webkit-animation: fadeIn .5s forwards .5s;
            animation: fadeIn .5s forwards .5s; }
  #pros .btn-learn, #pros .card-button {
    color: #fff;
    font-size: 1.2rem;
    font-family: "TT-Norms-Pro-Normal", sans-serif;
    background: linear-gradient(60deg, #185bf3, #8b34f8);
    text-decoration: none;
    padding: 15px;
    width: 100%;
    max-width: 280px;
    display: block;
    margin: 2rem auto 0;
    border-radius: 6px;
    font-weight: normal; }
  #pros .header-style-1 {
    position: relative;
    margin-bottom: 4rem; }
    #pros .header-style-1:before {
      content: "";
      display: block;
      width: 250px;
      height: 3px;
      background: linear-gradient(90deg, #185bf3, #8b34f8);
      position: absolute;
      bottom: -30px;
      left: 0;
      right: 0;
      margin: 0 auto; }
  #pros .wtb-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-top: 1rem; }
    @media only screen and (min-width: 768px) {
      #pros .wtb-list {
        margin-top: 1rem;
        margin-bottom: 1rem;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between; } }
    @media only screen and (min-width: 992px) {
      #pros .wtb-list {
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between; } }
    @media only screen and (min-width: 1200px) {
      #pros .wtb-list {
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start; } }
    #pros .wtb-list .wtb-dropdown, #pros .wtb-list .subscribe {
      width: 100%; }
      @media only screen and (min-width: 1200px) {
        #pros .wtb-list .wtb-dropdown, #pros .wtb-list .subscribe {
          width: 50%; } }
    #pros .wtb-list .btn-learn {
      width: 100%; }
      @media only screen and (min-width: 1200px) {
        #pros .wtb-list .btn-learn {
          width: 50%; } }
  #pros .feature-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end; }
    @media only screen and (max-width: 768px) {
      #pros .feature-list {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center; } }
    #pros .feature-list .feature {
      font-size: 1rem;
      margin-bottom: 2rem; }
      @media only screen and (min-width: 992px) {
        #pros .feature-list .feature {
          font-size: 1rem;
          margin-bottom: 0; } }
      @media only screen and (min-width: 1200px) {
        #pros .feature-list .feature {
          font-size: 1.2rem; } }
      @media only screen and (min-width: 1500px) {
        #pros .feature-list .feature {
          font-size: 1.4rem; } }
      #pros .feature-list .feature .feature-title {
        font-family: "TT-Norms-Pro-Normal", sans-serif;
        color: #3473e7;
        letter-spacing: 1px;
        font-size: 2.5rem;
        font-weight: 600; }
        @media only screen and (max-width: 480px) {
          #pros .feature-list .feature .feature-title {
            font-size: 2rem; } }
        @media only screen and (min-width: 1500px) {
          #pros .feature-list .feature .feature-title {
            font-size: 3rem; } }
      #pros .feature-list .feature .feature-desc {
        font-size: 1rem;
        letter-spacing: 1px; }
        @media only screen and (max-width: 480px) {
          #pros .feature-list .feature .feature-desc {
            font-size: 0.8rem; } }
      #pros .feature-list .feature img {
        width: 80px;
        margin-bottom: 10px; }
        @media only screen and (min-width: 768px) {
          #pros .feature-list .feature img {
            width: auto; } }
  #pros .kv_img {
    background-position: top center;
    background-repeat: no-repeat; }
  #pros .sec_video {
    padding-top: 75px; }
    @media only screen and (max-width: 480px) {
      #pros .sec_video {
        padding-top: 60px; } }
    #pros .sec_video .img__video_containter {
      position: relative;
      width: 100%;
      height: 440px; }
      #pros .sec_video .img__video_containter .video_box {
        position: absolute;
        top: 0;
        left: calc(50% - 1280px);
        width: 2560px;
        height: 100%; }
    #pros .sec_video .video_control {
      position: absolute;
      z-index: 10;
      bottom: 50px;
      left: 50px; }
      #pros .sec_video .video_control .video_control_btn {
        cursor: pointer;
        width: 36px;
        height: 36px;
        border-width: 0;
        background-color: transparent; }
        #pros .sec_video .video_control .video_control_btn.pause {
          background-image: url("../images/pros/icon_pause.svg"); }
        #pros .sec_video .video_control .video_control_btn.resume {
          background-image: url("../images/pros/icon_play.svg"); }
    #pros .sec_video .video_title {
      position: absolute;
      z-index: 7;
      top: 190px;
      margin: 0;
      width: 100%;
      color: #fff;
      font-size: 3.25rem;
      text-align: center;
      font-weight: bold; }
  #pros .sec_videos {
    padding-top: 80px;
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: 2560px 1000px;
    background-image: url("../images/pros/bg.jpg"); }
    #pros .sec_videos .campaign_intro__containter {
      margin: 0 auto;
      margin-bottom: 126px;
      width: 90%;
      max-width: 850px; }
      #pros .sec_videos .campaign_intro__containter .campaign_intro {
        color: #fff;
        font-size: 1.25rem;
        text-align: center;
        line-height: 1.5; }
    #pros .sec_videos .block_title__containter {
      margin: 0 auto;
      margin-bottom: 52px;
      width: 90%;
      max-width: 850px; }
      #pros .sec_videos .block_title__containter .title {
        color: #fff;
        font-size: 2.75rem;
        text-align: center;
        font-weight: bold; }
        @media only screen and (max-width: 730.9px) {
          #pros .sec_videos .block_title__containter .title {
            font-size: 2.25rem;
            line-height: inherit; } }
    #pros .sec_videos .block__containter {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      margin: 0 auto;
      width: 100%;
      max-width: 1280px;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap; }
      @media only screen and (min-width: 731px) and (max-width: 1279.9px) {
        #pros .sec_videos .block__containter {
          display: block; } }
      @media only screen and (max-width: 730.9px) {
        #pros .sec_videos .block__containter {
          display: block; } }
      #pros .sec_videos .block__containter .block_item {
        margin-bottom: 70px;
        padding: 0 25px 20px;
        width: 50%; }
        @media only screen and (min-width: 731px) and (max-width: 1279.9px) {
          #pros .sec_videos .block__containter .block_item {
            margin-bottom: 60px;
            width: auto; } }
        @media only screen and (max-width: 768px) {
          #pros .sec_videos .block__containter .block_item {
            margin-bottom: 35px;
            padding: 0 0 20px;
            width: auto; } }
        #pros .sec_videos .block__containter .block_item .img {
          display: block;
          margin: 0 auto;
          width: 594px;
          height: 446px;
          background-position: 50% 50%;
          background-size: cover !important;
          background-position: center;
          background-repeat: no-repeat; }
          @media only screen and (max-width: 730.9px) {
            #pros .sec_videos .block__containter .block_item .img {
              width: 320px;
              height: 215px; } }
        #pros .sec_videos .block__containter .block_item .block_item__content {
          margin-top: 26px;
          color: #fff;
          line-height: 1.5; }
          @media only screen and (min-width: 731px) and (max-width: 1279.9px) {
            #pros .sec_videos .block__containter .block_item .block_item__content {
              margin-right: auto;
              margin-left: auto;
              width: 594px; } }
          @media only screen and (max-width: 730.9px) {
            #pros .sec_videos .block__containter .block_item .block_item__content {
              margin-right: auto;
              margin-left: auto;
              width: 320px; } }
          #pros .sec_videos .block__containter .block_item .block_item__content .title {
            margin-bottom: 8px;
            font-size: 2rem;
            font-weight: bold; }
            @media only screen and (max-width: 730.9px) {
              #pros .sec_videos .block__containter .block_item .block_item__content .title {
                font-size: 1.5rem; } }
          #pros .sec_videos .block__containter .block_item .block_item__content .from {
            color: #959595;
            font-size: 1.25rem; }
            @media only screen and (max-width: 730.9px) {
              #pros .sec_videos .block__containter .block_item .block_item__content .from {
                font-size: 1.125rem; } }
          #pros .sec_videos .block__containter .block_item .block_item__content .text {
            margin-top: 10px;
            margin-bottom: 0;
            font-size: 1.25rem; }
            @media only screen and (max-width: 730.9px) {
              #pros .sec_videos .block__containter .block_item .block_item__content .text {
                font-size: 1rem; } }
          #pros .sec_videos .block__containter .block_item .block_item__content .btn-video {
            display: inline-block;
            position: relative;
            margin-top: 20px;
            color: #be9b78;
            font-size: 1.375rem;
            text-decoration: none; }
            #pros .sec_videos .block__containter .block_item .block_item__content .btn-video:hover {
              text-decoration: underline;
              text-underline-position: below; }
            #pros .sec_videos .block__containter .block_item .block_item__content .btn-video span {
              color: #cdab82;
              transition: all .3s;
              border-bottom: 1px solid transparent; }
            #pros .sec_videos .block__containter .block_item .block_item__content .btn-video svg {
              position: absolute;
              top: 50%;
              left: 100%;
              margin-top: 2px;
              margin-left: 3px;
              width: 12px;
              height: 12px;
              -webkit-transform: translateY(-50%);
                      transform: translateY(-50%); }
              #pros .sec_videos .block__containter .block_item .block_item__content .btn-video svg path {
                stroke: #cdab82; }
      #pros .sec_videos .block__containter .block_item__1 .img {
        background-image: url("../images/pros/videos_1.jpg"); }
      #pros .sec_videos .block__containter .block_item__2 .img {
        background-image: url("../images/pros/videos_2.jpg"); }
      #pros .sec_videos .block__containter .block_item__3 .img {
        background-image: url("../images/pros/videos_3.jpg"); }
      #pros .sec_videos .block__containter .block_item__4 .img {
        background-image: url("../images/pros/videos_4.jpg"); }
  #pros .sec_feature_1 {
    padding: 0;
    text-align: center; }
    #pros .sec_feature_1 img {
      margin: 0 auto; }
    #pros .sec_feature_1 .proartists_list {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-flow: row wrap;
              flex-flow: row wrap;
      margin-top: 5rem;
      max-width: 1280px;
      margin-left: auto;
      margin-right: auto; }
      @media only screen and (max-width: 480px) {
        #pros .sec_feature_1 .proartists_list {
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center; } }
      #pros .sec_feature_1 .proartists_list .proartist {
        width: 30%;
        text-align: left;
        max-width: 380px;
        margin: 0 1.5%; }
        @media only screen and (max-width: 480px) {
          #pros .sec_feature_1 .proartists_list .proartist {
            width: 320px; } }
        #pros .sec_feature_1 .proartists_list .proartist .proartist-img {
          position: relative; }
          #pros .sec_feature_1 .proartists_list .proartist .proartist-img .img-tag {
            position: absolute;
            bottom: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.8);
            padding: 6px 15px 3px; }
        #pros .sec_feature_1 .proartists_list .proartist .proartist-content {
          position: relative;
          margin-top: 30px;
          padding-bottom: 70px; }
        #pros .sec_feature_1 .proartists_list .proartist .content-role, #pros .sec_feature_1 .proartists_list .proartist .content-title {
          margin-top: 10px;
          color: #ffffff;
          font-size: 1.25rem;
          line-height: 1.1; }
        #pros .sec_feature_1 .proartists_list .proartist .content-name {
          margin-top: 8px;
          color: #3771f7;
          font-size: 2rem;
          line-height: 1; }
        #pros .sec_feature_1 .proartists_list .proartist .content-intro {
          margin-top: 27px;
          color: #e9e9e9;
          font-size: 1.25rem;
          line-height: 1.3; }
        #pros .sec_feature_1 .proartists_list .proartist .content-link {
          margin-top: 30px;
          display: block; }
        #pros .sec_feature_1 .proartists_list .proartist .btn-video {
          text-decoration: none;
          margin-top: 30px;
          display: block; }
        #pros .sec_feature_1 .proartists_list .proartist .content-link span, #pros .sec_feature_1 .proartists_list .proartist .btn-video span {
          color: #3771f7;
          font-size: 1.375rem;
          transition: all 300ms;
          border-bottom: 1px solid transparent;
          text-decoration: none; }
        #pros .sec_feature_1 .proartists_list .proartist .content-link:after, #pros .sec_feature_1 .proartists_list .proartist .btn-video:after {
          content: '>';
          padding-left: 7px;
          color: #3771f7;
          font-size: 1.375rem; }
  #pros .sec_feature_2 {
    padding: 0 0 5rem;
    text-align: center; }
    #pros .sec_feature_2 img {
      margin: 0 auto; }
    #pros .sec_feature_2 .workflow {
      margin: 0 auto; }
      #pros .sec_feature_2 .workflow .workflow-nav {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-flow: row wrap;
                flex-flow: row wrap;
        width: 100%;
        margin: 3rem auto 0; }
        #pros .sec_feature_2 .workflow .workflow-nav .tab {
          width: 33.3333%;
          font-size: 1rem;
          padding: 20px 0;
          text-align: center;
          font-family: "TT-Norms-Pro-Normal", sans-serif;
          letter-spacing: 1px;
          cursor: pointer;
          -webkit-user-select: none;
             -moz-user-select: none;
              -ms-user-select: none;
                  user-select: none;
          color: #999;
          position: relative; }
          @media only screen and (min-width: 768px) {
            #pros .sec_feature_2 .workflow .workflow-nav .tab {
              width: 33.3333%;
              font-size: 1.5rem; } }
          @media only screen and (min-width: 1500px) {
            #pros .sec_feature_2 .workflow .workflow-nav .tab {
              font-size: 1.8rem; } }
          #pros .sec_feature_2 .workflow .workflow-nav .tab:after {
            content: "";
            height: 1px;
            background: #333;
            display: block;
            width: 100%;
            position: absolute;
            bottom: 0; }
          #pros .sec_feature_2 .workflow .workflow-nav .tab.hd-active {
            color: #fff; }
            #pros .sec_feature_2 .workflow .workflow-nav .tab.hd-active:after {
              height: 5px;
              background: linear-gradient(90deg, #185bf3, #8b34f8); }
      #pros .sec_feature_2 .workflow .workflow-img {
        position: relative; }
        #pros .sec_feature_2 .workflow .workflow-img .tab-content {
          display: none; }
          #pros .sec_feature_2 .workflow .workflow-img .tab-content.hd-active {
            display: block; }
          #pros .sec_feature_2 .workflow .workflow-img .tab-content .item-list {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
                -ms-flex-flow: row wrap;
                    flex-flow: row wrap;
            -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                    justify-content: space-between;
            -webkit-box-align: baseline;
                -ms-flex-align: baseline;
                    align-items: baseline; }
            #pros .sec_feature_2 .workflow .workflow-img .tab-content .item-list .item {
              width: 100%;
              margin: 2rem 0; }
              @media only screen and (min-width: 768px) {
                #pros .sec_feature_2 .workflow .workflow-img .tab-content .item-list .item {
                  width: 30%; } }
              #pros .sec_feature_2 .workflow .workflow-img .tab-content .item-list .item .pd-content p {
                line-height: 1.5rem; }
          @media only screen and (min-width: 768px) {
            #pros .sec_feature_2 .workflow .workflow-img .tab-content .disclaimer {
              text-align: left; } }
          #pros .sec_feature_2 .workflow .workflow-img .tab-content .title {
            font-size: 1.3rem;
            margin: 1rem 0;
            font-family: "TT-Norms-Pro-Normal", sans-serif;
            color: #d39d67; }
            @media only screen and (min-width: 768px) {
              #pros .sec_feature_2 .workflow .workflow-img .tab-content .title {
                font-size: 1rem; } }
            @media only screen and (min-width: 992px) {
              #pros .sec_feature_2 .workflow .workflow-img .tab-content .title {
                font-size: 1.3rem; } }
            @media only screen and (min-width: 1200px) {
              #pros .sec_feature_2 .workflow .workflow-img .tab-content .title {
                font-size: 1.5rem; } }
  #pros .sec_feature_3 {
    padding: 5rem 0; }
    #pros .sec_feature_3 .products-cta {
      background-image: url("../images/home/kv-best-product.jpg");
      background-repeat: no-repeat;
      background-position: top center;
      background-size: cover;
      height: 362px;
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center; }
      #pros .sec_feature_3 .products-cta .content {
        width: 80%;
        text-align: center; }
  #pros .sec_feature_4 {
    padding: 5rem 0;
    text-align: center; }
    #pros .sec_feature_4 img {
      margin: 0 auto; }
    #pros .sec_feature_4 .owl-carousel .item {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-flow: row wrap;
              flex-flow: row wrap;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center; }
      @media only screen and (max-width: 768px) {
        #pros .sec_feature_4 .owl-carousel .item {
          width: 480px;
          margin: 0 auto; } }
      @media only screen and (max-width: 480px) {
        #pros .sec_feature_4 .owl-carousel .item {
          width: 90%;
          margin: 0 auto; } }
      #pros .sec_feature_4 .owl-carousel .item.alt {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
            -ms-flex-flow: row-reverse;
                flex-flow: row-reverse;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap; }
      #pros .sec_feature_4 .owl-carousel .item .title {
        width: 100%;
        margin: 2rem 0; }
        #pros .sec_feature_4 .owl-carousel .item .title h3 {
          font-family: "TT-Norms-Pro-Normal", sans-serif;
          font-size: 2.3rem; }
          @media only screen and (max-width: 480px) {
            #pros .sec_feature_4 .owl-carousel .item .title h3 {
              font-size: 1.5rem; } }
          @media only screen and (min-width: 1500px) {
            #pros .sec_feature_4 .owl-carousel .item .title h3 {
              font-size: 2.8rem; } }
        #pros .sec_feature_4 .owl-carousel .item .title .sub-title {
          font-size: 1.5rem;
          line-height: 1; }
          @media only screen and (max-width: 480px) {
            #pros .sec_feature_4 .owl-carousel .item .title .sub-title {
              font-size: 1.1rem; } }
          @media only screen and (min-width: 1500px) {
            #pros .sec_feature_4 .owl-carousel .item .title .sub-title {
              font-size: 1.8rem; } }
      #pros .sec_feature_4 .owl-carousel .item .kv {
        width: 100%; }
        @media only screen and (min-width: 992px) {
          #pros .sec_feature_4 .owl-carousel .item .kv {
            width: 55%; } }
        #pros .sec_feature_4 .owl-carousel .item .kv img {
          width: auto; }
      #pros .sec_feature_4 .owl-carousel .item .pd-content {
        text-align: left;
        width: 100%; }
        @media only screen and (min-width: 992px) {
          #pros .sec_feature_4 .owl-carousel .item .pd-content {
            width: 45%; } }
        #pros .sec_feature_4 .owl-carousel .item .pd-content .feature-list {
          text-align: center;
          -ms-flex-pack: distribute;
              justify-content: space-around;
          max-width: 550px;
          margin: 2rem auto 0; }
          #pros .sec_feature_4 .owl-carousel .item .pd-content .feature-list .feature:first-child {
            width: 100%;
            -webkit-box-flex: 0;
                -ms-flex: none;
                    flex: none; }
            #pros .sec_feature_4 .owl-carousel .item .pd-content .feature-list .feature:first-child .feature-desc {
              font-size: 1.5rem; }
              @media only screen and (min-width: 1500px) {
                #pros .sec_feature_4 .owl-carousel .item .pd-content .feature-list .feature:first-child .feature-desc {
                  font-size: 2rem; } }
          #pros .sec_feature_4 .owl-carousel .item .pd-content .feature-list .feature img {
            width: 80px; }
        #pros .sec_feature_4 .owl-carousel .item .pd-content .title {
          font-family: "TT-Norms-Pro-Normal", sans-serif;
          font-size: 1.5rem;
          margin: 1rem 0; }
          @media only screen and (max-width: 480px) {
            #pros .sec_feature_4 .owl-carousel .item .pd-content .title {
              font-size: 1.2rem; } }
          @media only screen and (min-width: 1500px) {
            #pros .sec_feature_4 .owl-carousel .item .pd-content .title {
              font-size: 2rem; } }
  #pros .sec_feature_5 {
    padding: 5rem 0; }
    #pros .sec_feature_5 .proart-cta {
      background-image: url("../images/home/kv-proart.jpg");
      background-repeat: no-repeat;
      background-position: top left;
      background-size: 800px;
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: reverse;
          -ms-flex-direction: row-reverse;
              flex-direction: row-reverse; }
      @media only screen and (min-width: 768px) {
        #pros .sec_feature_5 .proart-cta {
          height: 205px;
          background-size: cover;
          background-position: top center; } }
      @media only screen and (min-width: 992px) {
        #pros .sec_feature_5 .proart-cta {
          height: 265px; } }
      @media only screen and (min-width: 1200px) {
        #pros .sec_feature_5 .proart-cta {
          height: 320px; } }
      @media only screen and (min-width: 1500px) {
        #pros .sec_feature_5 .proart-cta {
          height: 362px; } }
      #pros .sec_feature_5 .proart-cta .content {
        width: 100%;
        padding-top: 70%; }
        @media only screen and (min-width: 768px) {
          #pros .sec_feature_5 .proart-cta .content {
            width: 45%;
            padding-top: 0; } }
        @media only screen and (min-width: 992px) {
          #pros .sec_feature_5 .proart-cta .content {
            width: 45%; } }
        @media only screen and (min-width: 1200px) {
          #pros .sec_feature_5 .proart-cta .content {
            width: 40%; } }
        #pros .sec_feature_5 .proart-cta .content a {
          color: #fff;
          text-decoration: none; }
          #pros .sec_feature_5 .proart-cta .content a:hover {
            color: #d39d67; }
        #pros .sec_feature_5 .proart-cta .content p {
          font-size: 1.3rem;
          margin: 0; }
          @media only screen and (max-width: 480px) {
            #pros .sec_feature_5 .proart-cta .content p {
              font-size: 1rem; } }
  #pros section.display {
    margin-top: 2rem;
    margin-bottom: 2rem; }
    @media only screen and (min-width: 768px) {
      #pros section.display {
        margin-top: 5rem;
        margin-bottom: 5rem; } }
    @media only screen and (min-width: 1200px) {
      #pros section.display {
        margin-top: 5rem;
        margin-bottom: 5rem; } }
    #pros section.display .container-fluid {
      position: relative;
      padding-left: 0;
      padding-right: 0; }
    #pros section.display .kv-img:before {
      content: "";
      position: absolute;
      top: 106%;
      left: 0;
      display: block;
      max-height: 222px;
      height: 100%;
      width: 100%;
      min-width: 200px;
      max-width: 100%;
      background-image: url("../images/home/monitor-kv2@mobile.jpg");
      background-position: top left;
      background-repeat: no-repeat;
      background-size: cover; }
      @media only screen and (min-width: 768px) {
        #pros section.display .kv-img:before {
          top: 0;
          max-height: 100%;
          left: inherit;
          right: calc(-100% + -10px);
          background-image: url("../images/home/monitor-kv2.jpg");
          background-size: auto; } }
      @media only screen and (min-width: 992px) {
        #pros section.display .kv-img:before {
          background-size: contain; } }
      @media only screen and (min-width: 1200px) {
        #pros section.display .kv-img:before {
          background-size: auto; } }
    #pros section.display .kv-img:after {
      content: "";
      position: absolute;
      top: 0;
      left: calc(-100% + -10px);
      display: none;
      height: 100%;
      width: 100%;
      min-width: 200px;
      max-width: 100%;
      background-image: url("../images/home/monitor-kv1.jpg");
      background-position: top right;
      background-repeat: no-repeat; }
      @media only screen and (min-width: 768px) {
        #pros section.display .kv-img:after {
          display: block; } }
    @media only screen and (max-width: 768px) {
      #pros section.display .kv-img {
        padding: 0; } }
    @media only screen and (min-width: 992px) {
      #pros section.display .kv-img {
        max-width: 64%;
        position: relative;
        right: -18%; } }
    @media only screen and (min-width: 1200px) {
      #pros section.display .kv-img {
        max-width: 60%;
        position: relative;
        right: -20%; } }
    @media only screen and (min-width: 1500px) {
      #pros section.display .kv-img {
        max-width: 1024px;
        position: relative;
        right: -9.5%; } }
    #pros section.display .content {
      padding: 0 6%; }
      @media only screen and (min-width: 992px) {
        #pros section.display .content {
          padding: 0 2rem; } }
      #pros section.display .content p {
        padding-right: 0; }
        @media only screen and (min-width: 992px) {
          #pros section.display .content p {
            padding-right: 2rem; } }
      #pros section.display .content .text-box {
        margin-bottom: 5rem; }
      #pros section.display .content .feature-list {
        margin-top: 2rem;
        width: 100%; }
        @media only screen and (min-width: 768px) {
          #pros section.display .content .feature-list {
            width: 80%;
            margin-top: 2rem;
            padding: 0 1rem; } }
        @media only screen and (min-width: 992px) {
          #pros section.display .content .feature-list {
            width: 100%; } }
        @media only screen and (min-width: 1200px) {
          #pros section.display .content .feature-list {
            width: 80%; } }
        #pros section.display .content .feature-list .feature {
          text-align: center; }
          #pros section.display .content .feature-list .feature img {
            margin: 0 auto; }
      @media only screen and (min-width: 1200px) {
        #pros section.display .content .wtb-list {
          -webkit-box-pack: start;
              -ms-flex-pack: start;
                  justify-content: flex-start; }
          #pros section.display .content .wtb-list > div, #pros section.display .content .wtb-list > a {
            width: auto; } }
    #pros section.display .contest-cta {
      padding-top: 1rem;
      text-align: center; }
      #pros section.display .contest-cta a {
        font-size: 1.5rem;
        text-decoration: none;
        font-weight: bold; }
        #pros section.display .contest-cta a:hover, #pros section.display .contest-cta a:focus {
          text-decoration: underline;
          color: #d39d67; }

.product {
  overflow-x: hidden;
  max-width: 1920px; }
  .product .module {
    padding: 1.5rem 0; }
    @media only screen and (min-width: 768px) {
      .product .module {
        padding: 4rem 0; } }
    @media only screen and (min-width: 1200px) {
      .product .module {
        padding: 7rem 0; } }
    .product .module.legal {
      padding: 3rem 0; }
  .product .desktop {
    display: none; }
    @media only screen and (min-width: 768px) {
      .product .desktop {
        display: block; } }
  .product .mobile {
    display: block; }
    @media only screen and (min-width: 768px) {
      .product .mobile {
        display: none; } }
  .product .hero {
    overflow: hidden;
    padding-top: 50px; }
    @media only screen and (min-width: 768px) {
      .product .hero {
        padding-top: 76px; } }
    .product .hero .kv-img {
      position: relative; }
      .product .hero .kv-img:after {
        content: "";
        position: relative;
        bottom: -12px;
        left: 0;
        width: 100%;
        background-image: url("../images/filler-dark.jpg");
        background-size: cover;
        display: block; }
  .product .tagline {
    font-size: 2.1rem;
    line-height: 1.1;
    letter-spacing: 2px;
    font-family: "TT-Norms-Pro-Normal", sans-serif;
    text-transform: uppercase; }
    @media only screen and (min-width: 768px) {
      .product .tagline {
        font-size: 2.7rem; } }
    @media only screen and (min-width: 1200px) {
      .product .tagline {
        font-size: 3rem; } }
    .product .tagline span {
      font-size: 2.7rem; }
      @media only screen and (min-width: 768px) {
        .product .tagline span {
          font-size: 3rem; } }
      @media only screen and (min-width: 1200px) {
        .product .tagline span {
          font-size: 3.5rem; } }
      @media only screen and (min-width: 1500px) {
        .product .tagline span {
          font-size: 4.2rem; } }
  .product .content {
    padding: 0 6%; }
    @media only screen and (min-width: 768px) {
      .product .content {
        padding: 0 4%; } }
  .product .title {
    padding-left: 0px;
    padding-right: 0px; }
    .product .title .b-line {
      border: 4px solid #d39d67;
      padding: 2rem;
      font-size: 2.1rem; }
      @media only screen and (min-width: 768px) {
        .product .title .b-line {
          font-size: 3rem;
          position: absolute;
          width: 45rem;
          padding-left: 7rem;
          top: 0;
          left: -9%; } }
      @media only screen and (min-width: 992px) {
        .product .title .b-line {
          font-size: 3rem; } }
      @media only screen and (min-width: 1500px) {
        .product .title .b-line {
          font-size: 3.5rem; } }
  @media only screen and (min-width: 768px) {
    .product .text-box {
      padding-top: 4rem; } }
  .product .text-box h2 {
    font-size: 1.4rem;
    margin-top: 2.5rem; }
    @media only screen and (min-width: 768px) {
      .product .text-box h2 {
        font-size: 2rem; } }
  .product .wtb-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-top: 4rem; }
    @media only screen and (min-width: 768px) {
      .product .wtb-list {
        margin-top: 4rem;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between; } }
    @media only screen and (min-width: 992px) {
      .product .wtb-list {
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between; } }
    @media only screen and (min-width: 1200px) {
      .product .wtb-list {
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start; } }
    .product .wtb-list .wtb-dropdown, .product .wtb-list .subscribe {
      width: 100%;
      margin-top: 1rem; }
      @media only screen and (min-width: 992px) {
        .product .wtb-list .wtb-dropdown, .product .wtb-list .subscribe {
          width: auto;
          -webkit-box-flex: 0;
              -ms-flex: none;
                  flex: none;
          margin: 4rem auto 0; } }
    .product .wtb-list .btn-learn {
      width: 100%; }
      @media only screen and (min-width: 1200px) {
        .product .wtb-list .btn-learn {
          width: 50%; } }
  .product .feature-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    width: 100%;
    margin-top: 3rem; }
    @media only screen and (min-width: 768px) {
      .product .feature-list {
        margin-top: 6rem;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between; } }
    .product .feature-list .feature {
      font-size: 1.2rem;
      margin: auto;
      margin-top: 1rem;
      margin-bottom: 1rem;
      width: 50%;
      text-align: center; }
      @media only screen and (min-width: 992px) {
        .product .feature-list .feature {
          font-size: 1.3rem;
          width: auto;
          margin: inherit;
          margin-top: 4rem; } }
      @media only screen and (min-width: 1200px) {
        .product .feature-list .feature {
          font-size: 1.8rem;
          line-height: 2.2rem; } }
      .product .feature-list .feature img {
        margin: 0 auto;
        width: 92px; }
        @media only screen and (min-width: 768px) {
          .product .feature-list .feature img {
            width: auto; } }
  .product .kv-img, .product .kv-img-2 {
    background-position: top center;
    background-repeat: no-repeat;
    padding-left: 0px;
    padding-right: 0px; }
    @media only screen and (min-width: 480px) {
      .product .kv-img img, .product .kv-img-2 img {
        width: 100%; } }
    @media only screen and (min-width: 768px) {
      .product .kv-img img, .product .kv-img-2 img {
        width: auto; } }
  .product .kv-img-2 {
    margin: 12px 0 0; }
    @media only screen and (min-width: 768px) {
      .product .kv-img-2 {
        margin: 0; } }

.vivobook .nvidia {
  background-image: url("../images/icons/icon-nvidia-studio.png");
  background-position: top center;
  background-repeat: no-repeat;
  position: absolute;
  width: 120px;
  height: 120px; }

.vivobook .module {
  text-align: center;
  padding: 3rem 0; }
  @media only screen and (max-width: 480px) {
    .vivobook .module {
      padding: 2rem 0; } }
  .vivobook .module p {
    max-width: 1000px; }
  .vivobook .module h2 {
    font-family: "Roboto", sans-serif; }

.vivobook .promotion {
  width: 200px; }
  @media only screen and (min-width: 1200px) {
    .vivobook .promotion {
      width: auto; } }
  .vivobook .promotion img {
    max-width: 180px; }
    @media only screen and (min-width: 1200px) {
      .vivobook .promotion img {
        max-width: 230px; } }
  .vivobook .promotion .disclaimer {
    padding-top: 10px;
    line-height: 1.5rem;
    font-size: 1rem; }
    @media only screen and (min-width: 1500px) {
      .vivobook .promotion .disclaimer {
        font-size: 1.1rem; } }

.vivobook .feature-list {
  font-family: "TT-Norms-Pro-Normal", sans-serif;
  font-weight: 500;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap; }
  .vivobook .feature-list .feature {
    margin: 20px; }
  .vivobook .feature-list .feature-title {
    color: #1c9ecf;
    font-size: 1.5rem; }
    @media only screen and (min-width: 768px) {
      .vivobook .feature-list .feature-title {
        font-size: 2rem; } }
    @media only screen and (min-width: 1200px) {
      .vivobook .feature-list .feature-title {
        font-size: 3rem; } }
    .vivobook .feature-list .feature-title span {
      font-size: 70%; }
  .vivobook .feature-list .feature-desc {
    font-size: 0.875rem; }
    @media only screen and (min-width: 768px) {
      .vivobook .feature-list .feature-desc {
        font-size: 1.1rem; } }
    @media only screen and (min-width: 1200px) {
      .vivobook .feature-list .feature-desc {
        font-size: 1.3rem; } }

.vivobook .item-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around; }
  .vivobook .item-list .item {
    margin: 3rem 0; }
    @media only screen and (max-width: 768px) {
      .vivobook .item-list .item {
        margin: 1rem 0; } }

.vivobook .hero {
  background-color: #190e0a;
  background-image: url("../images/vivobook/kv-hero.webp");
  background-position: top center;
  background-repeat: no-repeat;
  position: relative;
  padding: 75px 0 3rem;
  background-size: 250%; }
  @media only screen and (min-width: 768px) {
    .vivobook .hero {
      background-size: auto; } }
  @media only screen and (min-width: 1200px) {
    .vivobook .hero {
      background-image: url("../images/vivobook/kv-hero.jpg"); } }
  .vivobook .hero h1 {
    font-size: 2rem;
    margin-top: 1rem; }
    @media only screen and (min-width: 768px) {
      .vivobook .hero h1 {
        font-size: 2.5rem;
        margin-top: 3rem; } }
    @media only screen and (min-width: 992px) {
      .vivobook .hero h1 {
        font-size: 3.5rem; } }
    .vivobook .hero h1 span {
      display: block;
      font-size: 1.5rem; }
      @media only screen and (min-width: 768px) {
        .vivobook .hero h1 span {
          font-size: 2rem; } }
      @media only screen and (min-width: 992px) {
        .vivobook .hero h1 span {
          font-size: 3rem; } }
  @media only screen and (max-width: 480px) {
    .vivobook .hero .play-button {
      top: 25%;
      bottom: inherit; } }
  .vivobook .hero .container {
    padding-left: 0;
    padding-right: 0; }
  .vivobook .hero .kv {
    padding: 120% 0 0; }
    @media only screen and (min-width: 768px) {
      .vivobook .hero .kv {
        padding: 35px 0 53%; } }
    @media only screen and (min-width: 992px) {
      .vivobook .hero .kv {
        padding: 35px 0 53%; } }
    @media only screen and (min-width: 1200px) {
      .vivobook .hero .kv {
        padding: 35px 0 44%; } }
  .vivobook .hero .promotion {
    position: absolute;
    top: 75%;
    right: 1%; }
    @media only screen and (max-width: 480px) {
      .vivobook .hero .promotion {
        position: static;
        width: auto; } }
    @media only screen and (min-width: 992px) {
      .vivobook .hero .promotion {
        top: 32%;
        right: 1%; } }
  .vivobook .hero .nvidia {
    top: 55%;
    right: 30px; }
    @media only screen and (max-width: 480px) {
      .vivobook .hero .nvidia {
        position: static;
        margin: 0 auto; } }
    @media only screen and (min-width: 992px) {
      .vivobook .hero .nvidia {
        top: 10%;
        right: 30px; } }
    @media only screen and (min-width: 1200px) {
      .vivobook .hero .nvidia {
        top: -30%;
        right: 30px; } }
    @media only screen and (min-width: 1500px) {
      .vivobook .hero .nvidia {
        top: -24%;
        right: 30px; } }
  .vivobook .hero .item-list {
    width: 400px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
    @media only screen and (min-width: 992px) {
      .vivobook .hero .item-list {
        position: absolute;
        top: 30%;
        left: 2%; } }
    @media only screen and (min-width: 1200px) {
      .vivobook .hero .item-list {
        top: 30%;
        left: 5%; } }
    @media only screen and (min-width: 1500px) {
      .vivobook .hero .item-list {
        top: 30%;
        left: 10%; } }
    .vivobook .hero .item-list .item {
      width: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-flow: wrap;
          flex-flow: wrap;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      margin: 0.5rem 0; }
      .vivobook .hero .item-list .item .item-kv {
        width: 22%; }
        @media only screen and (max-width: 480px) {
          .vivobook .hero .item-list .item .item-kv {
            width: 40%; } }
        .vivobook .hero .item-list .item .item-kv img {
          margin-right: 0;
          margin-left: auto; }
      .vivobook .hero .item-list .item .item-desc {
        width: 50%;
        text-align: left;
        padding-left: 20px; }
        @media only screen and (max-width: 480px) {
          .vivobook .hero .item-list .item .item-desc {
            width: 60%; } }
  .vivobook .hero .btn-cta {
    position: absolute;
    bottom: 5rem;
    left: 0;
    right: 0;
    display: inline-block;
    margin: 0 auto;
    width: 140px; }
    @media only screen and (max-width: 480px) {
      .vivobook .hero .btn-cta {
        top: 35%;
        bottom: inherit; } }
    @media only screen and (min-width: 992px) {
      .vivobook .hero .btn-cta {
        bottom: 0rem; } }

.vivobook .section_1 {
  position: relative; }
  @media only screen and (min-width: 992px) {
    .vivobook .section_1 .vid {
      position: absolute;
      top: 32%;
      right: 5%; } }
  @media only screen and (min-width: 1500px) {
    .vivobook .section_1 .vid {
      top: 37%;
      right: 15%; } }
  .vivobook .section_1 .vid .btn-video {
    position: relative;
    display: inline-block; }
  .vivobook .section_1 .kv {
    margin-top: 3rem;
    background-color: #050d10;
    padding-bottom: 7rem; }
    @media only screen and (max-width: 480px) {
      .vivobook .section_1 .kv {
        padding-bottom: 11rem; } }
    @media only screen and (min-width: 992px) {
      .vivobook .section_1 .kv {
        padding-bottom: 4rem; } }
    @media only screen and (min-width: 1200px) {
      .vivobook .section_1 .kv {
        padding-bottom: 3rem; } }
  .vivobook .section_1 .feature-list {
    position: absolute;
    bottom: 1rem;
    left: 0;
    right: 0; }
    @media only screen and (min-width: 1500px) {
      .vivobook .section_1 .feature-list {
        bottom: 3rem; } }
    .vivobook .section_1 .feature-list .feature:nth-child(1) {
      width: 100%;
      display: block;
      color: #fff; }
    .vivobook .section_1 .feature-list .feature-title {
      color: #ef4801; }

.vivobook .section_2 .kv {
  position: relative;
  margin-top: 3rem;
  padding-bottom: 10rem;
  background-color: #000; }
  @media only screen and (max-width: 480px) {
    .vivobook .section_2 .kv {
      padding-bottom: 0; } }
  @media only screen and (min-width: 768px) {
    .vivobook .section_2 .kv {
      padding-bottom: 12rem; } }
  @media only screen and (min-width: 992px) {
    .vivobook .section_2 .kv {
      padding-bottom: 10rem; } }
  @media only screen and (min-width: 1200px) {
    .vivobook .section_2 .kv {
      padding-bottom: 7rem; } }

.vivobook .section_2 .vid {
  position: absolute;
  bottom: 4rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 400px; }
  @media only screen and (max-width: 480px) {
    .vivobook .section_2 .vid {
      position: relative;
      width: auto;
      width: 320px;
      bottom: 1rem; } }
  .vivobook .section_2 .vid .play-button {
    width: 60px;
    height: 60px; }
    @media only screen and (max-width: 768px) {
      .vivobook .section_2 .vid .play-button {
        width: 60px;
        height: 60px; } }

.vivobook .section_3 .kv {
  position: relative; }

.vivobook .section_3 h2 {
  position: absolute;
  top: 3rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  font-family: "TT-Norms-Pro-Normal", sans-serif;
  color: #fff;
  font-size: 2rem; }
  @media only screen and (max-width: 480px) {
    .vivobook .section_3 h2 {
      position: relative;
      width: 100%;
      top: 0;
      margin-bottom: 1rem; } }
  @media only screen and (min-width: 768px) {
    .vivobook .section_3 h2 {
      font-size: 2.5rem; } }
  @media only screen and (min-width: 992px) {
    .vivobook .section_3 h2 {
      font-size: 3.5rem; } }
  .vivobook .section_3 h2 span {
    display: block;
    font-size: 1.5rem; }
    @media only screen and (min-width: 768px) {
      .vivobook .section_3 h2 span {
        font-size: 2rem; } }
    @media only screen and (min-width: 992px) {
      .vivobook .section_3 h2 span {
        font-size: 3rem; } }

.vivobook .section_3 .promotion {
  position: absolute;
  top: 52%;
  right: 1%; }
  @media only screen and (max-width: 480px) {
    .vivobook .section_3 .promotion {
      position: relative;
      width: 100%; } }
  @media only screen and (min-width: 992px) {
    .vivobook .section_3 .promotion {
      top: 50%;
      right: 1%; } }
  @media only screen and (min-width: 1200px) {
    .vivobook .section_3 .promotion {
      top: 27%;
      right: 1%; } }

.vivobook .section_3 .nvidia {
  top: 30%;
  right: 30px; }
  @media only screen and (max-width: 480px) {
    .vivobook .section_3 .nvidia {
      position: relative;
      right: 0;
      left: 0;
      margin: 0 auto; } }
  @media only screen and (min-width: 992px) {
    .vivobook .section_3 .nvidia {
      top: 30%;
      right: 30px; } }
  @media only screen and (min-width: 1200px) {
    .vivobook .section_3 .nvidia {
      top: 0px;
      right: 30px; } }

.vivobook .section_3 .btn-arrow {
  position: absolute;
  bottom: 20px;
  margin: 0 auto;
  left: 0;
  right: 0; }
  @media only screen and (max-width: 480px) {
    .vivobook .section_3 .btn-arrow {
      position: relative;
      margin-top: 1rem; } }

.vivobook .section_4 .kv {
  position: relative;
  margin-top: 3rem;
  padding-bottom: 10rem;
  background-color: #17041a; }
  @media only screen and (min-width: 768px) {
    .vivobook .section_4 .kv {
      padding-bottom: 5rem; } }
  @media only screen and (min-width: 992px) {
    .vivobook .section_4 .kv {
      padding-bottom: 2rem; } }
  @media only screen and (min-width: 1200px) {
    .vivobook .section_4 .kv {
      padding-bottom: 0rem; } }

.vivobook .section_4 .feature-list {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0; }
  .vivobook .section_4 .feature-list .feature:nth-child(1) {
    width: 100%;
    display: block; }

.vivobook .section_5 .kv {
  margin-top: 3rem; }

.vivobook .section_5 .feature-list {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0; }
  @media only screen and (max-width: 480px) {
    .vivobook .section_5 .feature-list {
      position: relative;
      bottom: inherit; } }

.vivobook .section_6 .kv {
  margin-top: 3rem; }

.vivobook .compare_new .product-spec tbody tr {
  background-color: #000; }

.vivobook .compare_new .product-spec tbody tr:nth-child(even) {
  background-color: #151515; }

.vivobook .compare_new .product-spec tbody tr th,
.vivobook .compare_new .product-spec tbody tr td {
  border-bottom: none; }

.zenbook .module {
  text-align: center;
  padding: 3rem 0; }
  .zenbook .module p {
    max-width: 1000px; }
  .zenbook .module h2 {
    font-family: "Roboto", sans-serif;
    color: #fff; }
  .zenbook .module .sub-title {
    font-family: "TT-Norms-Pro-Medium", sans-serif;
    color: #fff;
    font-size: 1.3rem;
    letter-spacing: 1px;
    position: relative;
    margin-bottom: 2rem;
    text-shadow: 0 0 20px #001d21;
    text-transform: uppercase;
    display: inline-block; }
    .zenbook .module .sub-title:after {
      content: "";
      position: absolute;
      bottom: -10px;
      left: 0;
      right: 0;
      margin: 0 auto;
      display: block;
      width: 100%;
      height: 1px;
      background: #fff;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 25%, rgba(255, 255, 255, 0.5) 75%, rgba(255, 255, 255, 0)); }

.zenbook .bg-lightblue {
  background-color: #eef1f6; }

.zenbook .item-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around; }
  .zenbook .item-list .item {
    margin: 3rem 0; }
    @media only screen and (max-width: 768px) {
      .zenbook .item-list .item {
        margin: 1rem 0; } }

.zenbook .hero {
  position: relative;
  padding: 50px 0 0; }
  @media only screen and (min-width: 768px) {
    .zenbook .hero {
      padding: 75px 0 0; } }
  .zenbook .hero .kv {
    overflow: hidden;
    position: relative; }
    .zenbook .hero .kv .img {
      background-image: url("../images/zenbook/kv-hero.webp");
      background-repeat: no-repeat;
      background-size: contain;
      position: relative;
      left: 50%;
      -webkit-transform: translate(-50%, 0);
              transform: translate(-50%, 0);
      width: 480px;
      height: 360px; }
      @media only screen and (min-width: 480px) {
        .zenbook .hero .kv .img {
          width: 768px;
          height: 580px; } }
      @media only screen and (min-width: 768px) {
        .zenbook .hero .kv .img {
          width: 992px;
          height: 750px; } }
      @media only screen and (min-width: 992px) {
        .zenbook .hero .kv .img {
          background-image: url("../images/zenbook/kv-hero.jpg");
          background-size: contain;
          width: 1200px;
          height: 420px; } }
      @media only screen and (min-width: 1200px) {
        .zenbook .hero .kv .img {
          width: 1600px;
          height: 565px; } }
      @media only screen and (min-width: 1500px) {
        .zenbook .hero .kv .img {
          width: 1920px;
          height: 675px; } }
  @media only screen and (max-width: 480px) {
    .zenbook .hero .play-button {
      top: 15%;
      bottom: inherit; } }
  .zenbook .hero .container {
    padding-left: 0;
    padding-right: 0; }
  .zenbook .hero .btn-cta {
    left: 0;
    right: 0;
    display: inline-block;
    margin: 30px auto 0;
    width: 140px; }
    @media only screen and (min-width: 992px) {
      .zenbook .hero .btn-cta {
        margin: 30px 0 0; } }
  @media only screen and (min-width: 992px) {
    .zenbook .hero .content {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      padding-left: 5%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-flow: column;
              flex-flow: column;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: start;
          -ms-flex-align: start;
              align-items: flex-start; } }
  @media only screen and (min-width: 1500px) {
    .zenbook .hero .content {
      padding-left: 10%; } }
  .zenbook .hero .content h1 {
    font-size: 2rem;
    font-family: "TT-Norms-Pro-Medium", sans-serif;
    margin-bottom: 10px;
    line-height: 1; }
    @media only screen and (min-width: 768px) {
      .zenbook .hero .content h1 {
        font-size: 3rem; } }
    @media only screen and (min-width: 992px) {
      .zenbook .hero .content h1 {
        font-size: 2rem; } }
    @media only screen and (min-width: 1200px) {
      .zenbook .hero .content h1 {
        font-size: 3rem; } }
    .zenbook .hero .content h1 span {
      font-family: "Roboto", sans-serif; }
  .zenbook .hero .content .tagline {
    font-size: 1.8rem;
    line-height: 1; }
    @media only screen and (min-width: 768px) {
      .zenbook .hero .content .tagline {
        font-size: 2.5rem; } }
    @media only screen and (min-width: 992px) {
      .zenbook .hero .content .tagline {
        font-size: 1.8rem; } }
    @media only screen and (min-width: 1200px) {
      .zenbook .hero .content .tagline {
        font-size: 2.5rem; } }
  .zenbook .hero .disclaimer {
    font-family: "TT-Norms-Pro-Normal", sans-serif;
    font-size: 0.8rem;
    line-height: 1.2rem;
    margin-top: 10px; }
    @media only screen and (min-width: 992px) {
      .zenbook .hero .disclaimer {
        font-size: 1rem;
        line-height: 1.5rem; } }
  .zenbook .hero .promotion {
    margin: 2rem auto 0;
    width: 300px; }
    @media only screen and (min-width: 992px) {
      .zenbook .hero .promotion {
        position: absolute;
        top: 120px;
        margin: 0 auto;
        top: 120px;
        right: 0; } }
    @media only screen and (min-width: 1200px) {
      .zenbook .hero .promotion {
        top: 120px;
        right: 5%; } }
    @media only screen and (min-width: 1500px) {
      .zenbook .hero .promotion {
        top: 120px;
        right: 10%;
        width: 360px; } }
    .zenbook .hero .promotion img {
      width: 150px; }
    .zenbook .hero .promotion a {
      text-decoration: none;
      color: #fff; }

@media only screen and (max-width: 768px) {
  .zenbook .vid {
    padding-top: 0; } }

.zenbook .vid .kv {
  padding-bottom: 3rem; }

.zenbook .vid .btn-video {
  margin-top: 1rem;
  border: 1px solid #333;
  display: inline-block;
  position: relative; }
  .zenbook .vid .btn-video img {
    margin: 0 auto; }
  .zenbook .vid .btn-video .play-button {
    width: 60px;
    height: 60px; }
    @media only screen and (max-width: 768px) {
      .zenbook .vid .btn-video .play-button {
        width: 60px;
        height: 60px; } }

.zenbook .section_1 {
  position: relative;
  background-image: url("../images/zenbook/bg-1.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top right; }
  .zenbook .section_1 .item-list .item {
    width: 90%;
    margin: 2rem auto;
    background: white;
    background: radial-gradient(circle at 48%, rgba(255, 255, 255, 0.4) 10%, transparent 50%); }
    @media only screen and (min-width: 768px) {
      .zenbook .section_1 .item-list .item {
        width: 25%;
        background: radial-gradient(circle at 48%, rgba(255, 255, 255, 0.4) 10%, transparent 40%); } }
    @media only screen and (min-width: 992px) {
      .zenbook .section_1 .item-list .item {
        width: 25%;
        background: radial-gradient(circle at 48%, rgba(255, 255, 255, 0.4) 10%, transparent 50%); } }
    .zenbook .section_1 .item-list .item .img {
      margin: 0 auto; }
    .zenbook .section_1 .item-list .item .item-desc {
      font-size: 1rem;
      max-width: 280px;
      margin: 2rem auto 0; }
      @media only screen and (min-width: 992px) {
        .zenbook .section_1 .item-list .item .item-desc {
          font-size: 1.2rem; } }

.zenbook .section_2 {
  position: relative;
  background-image: url("../images/zenbook/bg-2.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center; }
  .zenbook .section_2 .content-container {
    position: relative; }
    .zenbook .section_2 .content-container .content .title {
      font-size: 1.8rem;
      width: auto;
      margin: 0 auto 20px;
      line-height: 1.2; }
      @media only screen and (min-width: 768px) {
        .zenbook .section_2 .content-container .content .title {
          font-size: 2.5rem; } }
      @media only screen and (min-width: 992px) {
        .zenbook .section_2 .content-container .content .title {
          font-size: 2.2rem;
          width: 370px;
          font-family: "TT-Norms-Pro-Medium", sans-serif; } }
    @media only screen and (min-width: 992px) {
      .zenbook .section_2 .content-container .content {
        position: absolute;
        bottom: 70px;
        left: 0;
        right: 0;
        margin: 0 auto;
        padding: 0;
        width: 38%; } }
    @media only screen and (min-width: 992px) {
      .zenbook .section_2 .content-container .content .note {
        position: relative;
        top: 60px; } }
  .zenbook .section_2 .item-list {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between; }
    .zenbook .section_2 .item-list .item {
      width: 90%;
      margin: 2rem auto; }
      @media only screen and (min-width: 768px) {
        .zenbook .section_2 .item-list .item {
          width: 45%;
          margin: 1.5rem 0; } }
      @media only screen and (min-width: 992px) {
        .zenbook .section_2 .item-list .item {
          width: 32%;
          margin: 1.5rem 0; } }
      .zenbook .section_2 .item-list .item .img {
        margin: 0 auto; }
      .zenbook .section_2 .item-list .item .item-title {
        font-size: 1.3rem;
        margin-top: 1rem;
        font-family: "TT-Norms-Pro-Medium", sans-serif; }
      .zenbook .section_2 .item-list .item .item-desc {
        font-size: 1rem;
        max-width: 320px;
        margin: 0 auto; }
        @media only screen and (min-width: 992px) {
          .zenbook .section_2 .item-list .item .item-desc {
            font-size: 1.2rem; } }

.zenbook .section_3 {
  position: relative;
  background-repeat: no-repeat;
  background-size: auto;
  background-position: 50% 100px; }
  @media only screen and (min-width: 768px) {
    .zenbook .section_3 {
      background-image: url("../images/zenbook/bg-3.webp");
      background-position: 50% 50px;
      background-size: 1230px; } }
  @media only screen and (min-width: 992px) {
    .zenbook .section_3 {
      background-position: 50% 100px;
      background-size: 1580px; } }
  @media only screen and (min-width: 1200px) {
    .zenbook .section_3 {
      background-position: 50% 100px;
      background-size: auto; } }
  @media only screen and (min-width: 768px) {
    .zenbook .section_3 .item-list {
      margin-top: 280px; } }
  @media only screen and (min-width: 992px) {
    .zenbook .section_3 .item-list {
      margin-top: 400px; } }
  @media only screen and (min-width: 1200px) {
    .zenbook .section_3 .item-list {
      margin-top: 475px; } }
  .zenbook .section_3 .item-list .item {
    width: 90%;
    margin: 2rem auto; }
    @media only screen and (min-width: 768px) {
      .zenbook .section_3 .item-list .item {
        width: 45%;
        margin: 3rem 0; } }
    @media only screen and (min-width: 1200px) {
      .zenbook .section_3 .item-list .item {
        width: 37%; } }
    .zenbook .section_3 .item-list .item .item-title {
      font-size: 1.8rem;
      line-height: 1;
      margin: 20px auto;
      display: inline-block;
      max-width: 400px; }
      @media only screen and (min-width: 768px) {
        .zenbook .section_3 .item-list .item .item-title {
          font-family: "TT-Norms-Pro-Medium", sans-serif;
          font-size: 2rem;
          margin: 0 auto 20px; } }
      @media only screen and (min-width: 992px) {
        .zenbook .section_3 .item-list .item .item-title {
          font-size: 2.3rem; } }
    .zenbook .section_3 .item-list .item .item-desc {
      font-size: 1rem; }
      @media only screen and (min-width: 992px) {
        .zenbook .section_3 .item-list .item .item-desc {
          font-size: 1.2rem; } }

.zenbook .section_5 p {
  max-width: 800px;
  margin: 0 auto; }

.zenbook .section_5 .img {
  margin: 0 auto; }

.zenbook .section_5 .feature-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  max-width: 1366px;
  margin: 3rem auto 0; }
  @media only screen and (max-width: 480px) {
    .zenbook .section_5 .feature-list {
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start;
      margin-top: 1rem; } }
  .zenbook .section_5 .feature-list .feature {
    width: 50%; }
    @media only screen and (min-width: 768px) {
      .zenbook .section_5 .feature-list .feature {
        width: 30%; } }
    @media only screen and (min-width: 992px) {
      .zenbook .section_5 .feature-list .feature {
        width: 16.6666%; } }
    .zenbook .section_5 .feature-list .feature img {
      margin: 1rem auto;
      -webkit-filter: contrast(100);
              filter: contrast(100); }
    .zenbook .section_5 .feature-list .feature .feature-desc {
      font-size: 1.3rem; }

.zenbook .compare_new .product-spec thead th {
  padding: 15px 5px 0; }

.zenbook .compare_new .product-spec thead th img {
  max-width: 150px; }

.zenbook .compare_new .product-spec thead th .btn-arrow {
  margin-top: 15px; }

.zenbook .compare_new .product-spec thead th .btn-arrow span {
  font-weight: bold; }

.zenbook .compare_new .product-spec thead tr:last-child th {
  padding: 5px 5px 15px; }

.zenbook .compare_new .product-spec tbody {
  border: 1px solid #333; }

.zenbook .compare_new .product-spec tbody tr th {
  font-size: 0.875rem;
  text-transform: none;
  font-weight: bold;
  white-space: pre-wrap; }
  @media only screen and (min-width: 768px) {
    .zenbook .compare_new .product-spec tbody tr th {
      min-width: 100px; } }

.zenbook .compare_new .product-spec thead h3 {
  padding: 0;
  font-size: 1rem; }

.zenbook .compare_new .product-spec tbody tr {
  background-color: #000; }

.zenbook .compare_new .product-spec tbody tr:nth-child(even) {
  background-color: #0e0e0e; }

.zenbook .compare_new .product-spec tbody tr th,
.zenbook .compare_new .product-spec tbody tr td {
  border-bottom: none; }

.zenbook .compare_new .product-spec tbody td {
  width: 150px;
  max-width: 200px;
  min-width: 150px;
  padding: 15px;
  font-size: 0.875rem;
  border-left: 1px solid #333; }

.studiobook .module {
  text-align: center;
  padding: 3rem 0; }
  .studiobook .module p {
    max-width: 1000px; }
  .studiobook .module h2 {
    font-family: "TTNorms-Pro-Regular", sans-serif;
    color: #fff; }

.studiobook .feature-list {
  font-family: "TT-Norms-Pro-Normal", sans-serif;
  font-weight: 500; }
  .studiobook .feature-list .feature-title {
    color: #d39d67;
    font-size: 1.5rem; }
    @media only screen and (min-width: 768px) {
      .studiobook .feature-list .feature-title {
        font-size: 2rem; } }
    @media only screen and (min-width: 1200px) {
      .studiobook .feature-list .feature-title {
        font-size: 3rem; } }
  .studiobook .feature-list .feature-desc {
    font-size: 0.875rem; }
    @media only screen and (min-width: 768px) {
      .studiobook .feature-list .feature-desc {
        font-size: 1.1rem; } }
    @media only screen and (min-width: 1200px) {
      .studiobook .feature-list .feature-desc {
        font-size: 1.3rem; } }

.studiobook .section_1 {
  position: relative; }
  .studiobook .section_1 .content {
    padding: 0; }
  .studiobook .section_1 .title {
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 1px; }
  .studiobook .section_1 .cont {
    text-align: center; }
    @media only screen and (min-width: 992px) {
      .studiobook .section_1 .cont {
        text-align: left; } }
    .studiobook .section_1 .cont .feature-list {
      text-align: center; }
      .studiobook .section_1 .cont .feature-list img {
        margin: 0 auto; }
  .studiobook .section_1 .cont-1 {
    width: 100%;
    margin: 2rem auto 0; }
    @media only screen and (min-width: 768px) {
      .studiobook .section_1 .cont-1 {
        width: 80%; } }
    @media only screen and (min-width: 992px) {
      .studiobook .section_1 .cont-1 {
        width: 29%;
        position: absolute;
        top: 0;
        left: 3%;
        margin: inherit; } }
    .studiobook .section_1 .cont-1 .feature-list {
      margin-top: 1rem; }
      @media only screen and (min-width: 992px) {
        .studiobook .section_1 .cont-1 .feature-list {
          margin-top: 0; } }
  .studiobook .section_1 .cont-2 {
    width: 100%; }
    @media only screen and (min-width: 768px) {
      .studiobook .section_1 .cont-2 {
        width: 80%;
        margin: 0 auto; } }
    @media only screen and (min-width: 992px) {
      .studiobook .section_1 .cont-2 {
        width: 22%;
        position: absolute;
        bottom: 5%;
        right: 5%; } }
    .studiobook .section_1 .cont-2 .feature-list {
      margin-top: 2rem; }
  .studiobook .section_1 .disclaimer {
    font-family: "TT-Norms-Pro-Normal", sans-serif;
    font-size: 0.875rem;
    line-height: 1.2rem;
    margin-top: 10px; }
    @media only screen and (min-width: 992px) {
      .studiobook .section_1 .disclaimer {
        font-size: 1.1rem;
        line-height: 1.5rem; } }

.studiobook .hero {
  position: relative; }
  @media only screen and (max-width: 480px) {
    .studiobook .hero .play-button {
      top: 50%;
      bottom: inherit; } }
  .studiobook .hero .container {
    padding-left: 0;
    padding-right: 0; }
  .studiobook .hero .btn-cta {
    position: absolute;
    bottom: -2rem;
    left: 0;
    right: 0;
    display: inline-block;
    margin: 0 auto;
    width: 140px; }
    @media only screen and (min-width: 992px) {
      .studiobook .hero .btn-cta {
        bottom: 1rem; } }

.studiobook .section_2 .kv {
  padding-bottom: 3rem; }

.studiobook .section_2 .btn-video {
  margin-top: 4rem;
  display: block;
  position: relative; }
  .studiobook .section_2 .btn-video .play-button {
    top: -21%; }

.studiobook .section_3 {
  position: relative; }
  .studiobook .section_3 .feature-list {
    width: 300px;
    text-align: left;
    z-index: 99;
    margin: 0 auto; }
    @media only screen and (min-width: 768px) {
      .studiobook .section_3 .feature-list {
        width: 370px; } }
    @media only screen and (min-width: 992px) {
      .studiobook .section_3 .feature-list {
        width: 370px;
        margin: inherit;
        position: absolute;
        top: 24%;
        left: 8%; } }
    @media only screen and (min-width: 1200px) {
      .studiobook .section_3 .feature-list {
        width: 515px; } }
    .studiobook .section_3 .feature-list .feature {
      margin: 1rem 0; }
    .studiobook .section_3 .feature-list .feature:nth-child(2) {
      position: relative;
      padding-left: 70px; }
      .studiobook .section_3 .feature-list .feature:nth-child(2):before {
        content: "";
        position: absolute;
        top: 10px;
        left: 0;
        display: inline-block;
        height: 53px;
        width: 53px;
        background-image: url("../images/icons/icon-ai.png");
        background-repeat: no-repeat; }
    .studiobook .section_3 .feature-list .feature:nth-child(3) {
      position: relative;
      padding-left: 70px; }
      .studiobook .section_3 .feature-list .feature:nth-child(3):before {
        content: "";
        position: absolute;
        top: 10px;
        left: 0;
        display: inline-block;
        height: 53px;
        width: 53px;
        background-image: url("../images/icons/icon-rendering.png");
        background-repeat: no-repeat; }
  .studiobook .section_3 .kv {
    position: relative; }
    .studiobook .section_3 .kv p {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0; }
      @media only screen and (min-width: 768px) {
        .studiobook .section_3 .kv p {
          bottom: 21%; } }

.studiobook .section_4 {
  padding-top: 0;
  margin-top: 0; }
  @media only screen and (min-width: 768px) {
    .studiobook .section_4 {
      margin-top: -6rem; } }
  @media only screen and (min-width: 992px) {
    .studiobook .section_4 {
      margin-top: -10rem; } }
  .studiobook .section_4 .feature-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin: 3rem 0; }
    @media only screen and (min-width: 768px) {
      .studiobook .section_4 .feature-list {
        padding-left: 6%; } }
    @media only screen and (min-width: 1200px) {
      .studiobook .section_4 .feature-list {
        padding-left: 10%; } }
    .studiobook .section_4 .feature-list .feature {
      margin: 0 1rem; }
      @media only screen and (min-width: 1200px) {
        .studiobook .section_4 .feature-list .feature {
          margin: 0 3rem; } }
      .studiobook .section_4 .feature-list .feature span {
        font-size: 1.5rem; }

.studiobook .section_5 p {
  max-width: 800px; }

.studiobook .section_5 .feature-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  margin-top: 3rem; }
  @media only screen and (max-width: 480px) {
    .studiobook .section_5 .feature-list {
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start;
      margin-top: 1rem; } }
  @media only screen and (max-width: 480px) {
    .studiobook .section_5 .feature-list .feature {
      width: 50%; } }
  .studiobook .section_5 .feature-list .feature img {
    margin: 1rem auto; }

.studiobook .section_6 .kv {
  position: relative;
  margin-top: 3rem; }
  @media only screen and (min-width: 768px) {
    .studiobook .section_6 .kv {
      padding-top: 50%; } }
  @media only screen and (min-width: 768px) {
    .studiobook .section_6 .kv .kv-1 {
      position: absolute;
      top: 0;
      left: 0;
      width: 60%; } }
  @media only screen and (min-width: 1500px) {
    .studiobook .section_6 .kv .kv-1 {
      width: auto; } }
  .studiobook .section_6 .kv .kv-2 {
    margin-top: 3rem; }
    @media only screen and (min-width: 768px) {
      .studiobook .section_6 .kv .kv-2 {
        position: absolute;
        top: 10px;
        right: 0;
        width: 60%;
        margin-top: 0; } }
    @media only screen and (min-width: 1500px) {
      .studiobook .section_6 .kv .kv-2 {
        width: auto; } }

.station-pd5 .module {
  text-align: center;
  padding: 3rem 0; }
  @media only screen and (min-width: 768px) {
    .station-pd5 .module p {
      max-width: 900px;
      margin-left: auto;
      margin-right: auto; } }
  @media only screen and (min-width: 1200px) {
    .station-pd5 .module p {
      max-width: 1000px; } }

.station-pd5 .feature-list {
  font-family: "TT-Norms-Pro-Normal", sans-serif;
  font-weight: 500; }
  .station-pd5 .feature-list .feature-title {
    color: #d39d67;
    font-size: 1.5rem; }
    @media only screen and (min-width: 768px) {
      .station-pd5 .feature-list .feature-title {
        font-size: 2rem; } }
    @media only screen and (min-width: 1200px) {
      .station-pd5 .feature-list .feature-title {
        font-size: 2rem; } }
  .station-pd5 .feature-list .feature-desc {
    font-size: 0.875rem; }
    @media only screen and (min-width: 768px) {
      .station-pd5 .feature-list .feature-desc {
        font-size: 1rem; } }
    @media only screen and (min-width: 1200px) {
      .station-pd5 .feature-list .feature-desc {
        font-size: 1rem; } }

.station-pd5 .play-button {
  width: 122px;
  height: 122px; }
  @media only screen and (max-width: 768px) {
    .station-pd5 .play-button {
      width: 60px;
      height: 60px; } }

.station-pd5 .hero {
  position: relative;
  background-image: url("../images/pd5/hero@mobile.webp");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
  padding-top: 8rem; }
  @media only screen and (min-width: 1200px) {
    .station-pd5 .hero {
      background-image: url("../images/pd5/hero.jpg");
      background-position: bottom center;
      background-size: contain;
      padding-top: 9rem; } }
  @media only screen and (max-width: 480px) {
    .station-pd5 .hero {
      padding-top: 5rem;
      padding-bottom: 0;
      background-size: 600px; } }
  .station-pd5 .hero .pd-title {
    padding-bottom: 67%;
    text-align: center; }
    @media only screen and (min-width: 1200px) {
      .station-pd5 .hero .pd-title {
        padding-bottom: 50%; } }
    @media only screen and (max-width: 480px) {
      .station-pd5 .hero .pd-title {
        padding-bottom: 90%; } }
    .station-pd5 .hero .pd-title img {
      margin: 0 auto; }
    @media only screen and (min-width: 1500px) {
      .station-pd5 .hero .pd-title {
        padding-bottom: 63%; } }
    @media only screen and (max-width: 768px) {
      .station-pd5 .hero .pd-title {
        width: 80%;
        margin: 0 auto; } }
  .station-pd5 .hero .btn-cta {
    display: inline-block;
    margin: 2rem auto 0;
    width: 140px; }
  .station-pd5 .hero .content {
    padding: 0; }
  .station-pd5 .hero .title {
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: #d39d67; }
  .station-pd5 .hero .cont {
    text-align: center; }
    @media only screen and (min-width: 1200px) {
      .station-pd5 .hero .cont {
        text-align: left; } }
    .station-pd5 .hero .cont p {
      font-size: 1rem;
      line-height: 1.8rem; }
    .station-pd5 .hero .cont .feature-list {
      text-align: center; }
      .station-pd5 .hero .cont .feature-list img {
        margin: 0 auto; }
  .station-pd5 .hero .cont-1 {
    width: 100%;
    margin: 2rem auto 0; }
    @media only screen and (min-width: 768px) {
      .station-pd5 .hero .cont-1 {
        width: 80%; } }
    @media only screen and (min-width: 1200px) {
      .station-pd5 .hero .cont-1 {
        width: 315px;
        position: absolute;
        bottom: 0;
        left: 3%;
        margin: inherit; } }
    .station-pd5 .hero .cont-1 .feature-list {
      margin-top: 1rem;
      margin-bottom: 3rem; }
      @media only screen and (min-width: 992px) {
        .station-pd5 .hero .cont-1 .feature-list {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: end;
              -ms-flex-align: end;
                  align-items: flex-end;
          -ms-flex-pack: distribute;
              justify-content: space-around; } }
      @media only screen and (min-width: 1200px) {
        .station-pd5 .hero .cont-1 .feature-list {
          margin-top: 2rem;
          margin-bottom: 0;
          text-align: left;
          display: block; } }
      .station-pd5 .hero .cont-1 .feature-list .feature {
        margin-top: 1rem; }
  .station-pd5 .hero .cont-2 {
    width: 100%; }
    @media only screen and (min-width: 768px) {
      .station-pd5 .hero .cont-2 {
        width: 80%;
        margin: 0 auto; } }
    @media only screen and (min-width: 1200px) {
      .station-pd5 .hero .cont-2 {
        width: 315px;
        position: absolute;
        top: 26%;
        right: 5%;
        text-align: right; } }
    .station-pd5 .hero .cont-2 .feature-list {
      margin-top: 2rem; }
      @media only screen and (min-width: 992px) {
        .station-pd5 .hero .cont-2 .feature-list {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          -ms-flex-pack: distribute;
              justify-content: space-around; } }
      @media only screen and (min-width: 1200px) {
        .station-pd5 .hero .cont-2 .feature-list {
          margin-top: 2rem;
          display: block; } }
      .station-pd5 .hero .cont-2 .feature-list .feature {
        margin-top: 1rem; }
        @media only screen and (min-width: 1200px) {
          .station-pd5 .hero .cont-2 .feature-list .feature img {
            margin: 0 0 0 auto; } }
  .station-pd5 .hero .cont-3 {
    width: 100%; }
    @media only screen and (min-width: 768px) {
      .station-pd5 .hero .cont-3 {
        width: 80%;
        margin: 0 auto; } }
    @media only screen and (min-width: 1200px) {
      .station-pd5 .hero .cont-3 {
        width: 330px;
        position: absolute;
        bottom: 0;
        right: 5%;
        text-align: right; } }
    .station-pd5 .hero .cont-3 .feature-list {
      margin-top: 2rem;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-flow: column;
              flex-flow: column; }
      @media only screen and (min-width: 1200px) {
        .station-pd5 .hero .cont-3 .feature-list {
          -webkit-box-orient: horizontal;
          -webkit-box-direction: normal;
              -ms-flex-flow: row;
                  flex-flow: row; } }
      .station-pd5 .hero .cont-3 .feature-list .feature {
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
        margin-bottom: 2rem; }
        @media only screen and (min-width: 1200px) {
          .station-pd5 .hero .cont-3 .feature-list .feature {
            margin-bottom: 0; } }
  .station-pd5 .hero .disclaimer {
    font-family: "TT-Norms-Pro-Normal", sans-serif;
    font-size: 0.875rem;
    line-height: 1.2rem;
    margin-top: 10px; }
    @media only screen and (min-width: 992px) {
      .station-pd5 .hero .disclaimer {
        font-size: 1.1rem;
        line-height: 1.5rem; } }

@media only screen and (max-width: 768px) {
  .station-pd5 .section_2 {
    padding-top: 0; } }

.station-pd5 .section_2 .kv {
  padding-bottom: 3rem; }

.station-pd5 .section_2 .btn-video {
  margin-top: 4rem;
  display: block;
  position: relative; }
  .station-pd5 .section_2 .btn-video img {
    margin: 0 auto; }

.station-pd5 .section_3 {
  position: relative; }
  .station-pd5 .section_3 .feature-list {
    width: 300px;
    z-index: 99;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -ms-flex-pack: distribute;
        justify-content: space-around; }
    @media only screen and (min-width: 768px) {
      .station-pd5 .section_3 .feature-list {
        width: 100%;
        max-width: 900px;
        position: static;
        top: 18%;
        left: 0;
        right: 0; } }
    @media only screen and (min-width: 1200px) {
      .station-pd5 .section_3 .feature-list {
        position: absolute;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between; } }
    @media only screen and (max-width: 480px) {
      .station-pd5 .section_3 .feature-list {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center; } }
    .station-pd5 .section_3 .feature-list .feature {
      margin: 1rem 0; }
      @media only screen and (max-width: 480px) {
        .station-pd5 .section_3 .feature-list .feature {
          margin: 0.5rem 0; } }
  .station-pd5 .section_3 .kv {
    position: relative; }
    .station-pd5 .section_3 .kv img {
      margin: 0 auto; }
      @media only screen and (max-width: 480px) {
        .station-pd5 .section_3 .kv img {
          max-width: none;
          width: 500px;
          position: relative;
          top: 0;
          left: -21%; } }
    .station-pd5 .section_3 .kv p {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0; }
      @media only screen and (min-width: 768px) {
        .station-pd5 .section_3 .kv p {
          right: 15%;
          left: auto;
          bottom: 10%; } }

.station-pd5 .section_4 {
  position: relative; }
  .station-pd5 .section_4 .feature-list {
    width: 300px;
    z-index: 99;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -ms-flex-pack: distribute;
        justify-content: space-around; }
    @media only screen and (min-width: 768px) {
      .station-pd5 .section_4 .feature-list {
        width: 100%;
        max-width: 600px;
        top: 18%;
        left: 0;
        right: 0; } }
    @media only screen and (min-width: 992px) {
      .station-pd5 .section_4 .feature-list {
        position: absolute; } }
    .station-pd5 .section_4 .feature-list .feature {
      margin: 1rem 0; }
  .station-pd5 .section_4 .kv {
    position: relative; }
    .station-pd5 .section_4 .kv img {
      margin: 0 auto; }
      @media only screen and (max-width: 480px) {
        .station-pd5 .section_4 .kv img {
          max-width: none;
          width: 500px;
          position: relative;
          top: 0;
          left: -21%; } }
    .station-pd5 .section_4 .kv p {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0; }
      @media only screen and (min-width: 768px) {
        .station-pd5 .section_4 .kv p {
          right: 15%;
          left: auto;
          bottom: 10%; } }

@media only screen and (min-width: 992px) {
  .station-pd5 .section_5 {
    padding-bottom: 0; } }

.station-pd5 .section_5 p {
  max-width: 800px; }

.station-pd5 .section_5 .wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap; }
  .station-pd5 .section_5 .wrapper .content-text {
    position: static;
    width: 100%;
    z-index: 99; }
    @media only screen and (min-width: 992px) {
      .station-pd5 .section_5 .wrapper .content-text {
        width: 41%;
        position: absolute; } }

.station-pd5 .section_5 .nav-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  width: 360px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  margin: 0 auto; }
  @media only screen and (max-width: 768px) {
    .station-pd5 .section_5 .nav-list {
      width: 320px; } }
  .station-pd5 .section_5 .nav-list .nav {
    width: 100%;
    background-color: #000;
    color: #d9aa7b;
    padding: 12px 20px 12px 70px;
    margin-top: 30px;
    border: 1px solid #d9aa7b;
    border-radius: 30px;
    font-size: 1.2rem;
    position: relative;
    text-align: left;
    font-family: "TT-Norms-Pro-Medium", sans-serif;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none; }
    .station-pd5 .section_5 .nav-list .nav.hd-active {
      color: #000;
      background-color: #d9aa7b;
      box-shadow: 0px 0px 10px #d39d67; }
    .station-pd5 .section_5 .nav-list .nav:before {
      content: "";
      background-position: top center;
      background-repeat: no-repeat;
      display: block;
      position: absolute;
      width: 35px;
      height: 35px;
      top: 8px;
      left: 20px; }
  .station-pd5 .section_5 .nav-list .nav1:before {
    background-image: url("../images/pd5/power-button-2.png"); }
  .station-pd5 .section_5 .nav-list .nav1.hd-active::before {
    background-image: url("../images/pd5/power-button-1.png"); }
  .station-pd5 .section_5 .nav-list .nav2:before {
    background-image: url("../images/pd5/bell-2.png"); }
  .station-pd5 .section_5 .nav-list .nav2.hd-active::before {
    background-image: url("../images/pd5/bell-1.png"); }
  .station-pd5 .section_5 .nav-list .nav3:before {
    background-image: url("../images/pd5/warning-sign-2.png"); }
  .station-pd5 .section_5 .nav-list .nav3.hd-active::before {
    background-image: url("../images/pd5/warning-sign-1.png"); }

.station-pd5 .section_5 .kv-list .kv {
  display: none; }
  .station-pd5 .section_5 .kv-list .kv img {
    max-width: none;
    width: 500px;
    position: relative;
    top: 0;
    left: -17%;
    right: auto; }
    @media only screen and (min-width: 480px) {
      .station-pd5 .section_5 .kv-list .kv img {
        position: relative;
        top: 0;
        left: 0;
        width: 100%; } }
    @media only screen and (min-width: 992px) {
      .station-pd5 .section_5 .kv-list .kv img {
        position: relative;
        top: -5rem;
        right: -14rem;
        left: auto; } }
    @media only screen and (min-width: 1200px) {
      .station-pd5 .section_5 .kv-list .kv img {
        top: -10rem;
        right: -16rem; } }
  .station-pd5 .section_5 .kv-list .kv.hd-active {
    display: block; }

.station-pd5 .section_6 {
  position: relative; }
  @media only screen and (min-width: 768px) {
    .station-pd5 .section_6 {
      padding-bottom: 0; } }
  .station-pd5 .section_6 .feature-list {
    width: 300px;
    z-index: 99;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -ms-flex-pack: distribute;
        justify-content: space-around; }
    @media only screen and (min-width: 768px) {
      .station-pd5 .section_6 .feature-list {
        width: 100%;
        max-width: 600px;
        position: absolute;
        top: 18%;
        left: 0;
        right: 0; } }
    .station-pd5 .section_6 .feature-list .feature {
      margin: 1rem 0; }
  .station-pd5 .section_6 .kv {
    position: relative; }
    .station-pd5 .section_6 .kv img {
      margin: 0 auto; }
      @media only screen and (max-width: 480px) {
        .station-pd5 .section_6 .kv img {
          max-width: none;
          width: 500px;
          position: relative;
          top: 0;
          left: -21%; } }
    .station-pd5 .section_6 .kv p {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0; }
      @media only screen and (min-width: 768px) {
        .station-pd5 .section_6 .kv p {
          right: 15%;
          left: auto;
          bottom: 10%; } }

.station-pd5 .section_7 {
  padding-bottom: 6rem; }
  @media only screen and (max-width: 768px) {
    .station-pd5 .section_7 {
      padding-bottom: 3rem; } }
  .station-pd5 .section_7 p {
    max-width: 1200px; }
  .station-pd5 .section_7 .feature-list {
    width: 300px;
    z-index: 99;
    margin: 0 auto 3rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
    @media only screen and (min-width: 768px) {
      .station-pd5 .section_7 .feature-list {
        width: 100%;
        max-width: 700px; } }
    .station-pd5 .section_7 .feature-list .feature {
      margin: 1rem 1.5rem; }
  .station-pd5 .section_7 .nav-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    text-align: center;
    margin: 0 auto; }
    @media only screen and (max-width: 768px) {
      .station-pd5 .section_7 .nav-list {
        margin-bottom: 3rem; } }
    .station-pd5 .section_7 .nav-list .nav {
      width: 25%;
      background-color: #000;
      color: #d9aa7b;
      padding: 12px 20px 12px 20px;
      margin: 1rem 0 5rem;
      border: 1px solid #d9aa7b;
      border-radius: 30px;
      font-size: 1.2rem;
      position: relative;
      text-align: center;
      font-family: "TT-Norms-Pro-Medium", sans-serif;
      cursor: pointer;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none; }
      @media only screen and (max-width: 768px) {
        .station-pd5 .section_7 .nav-list .nav {
          width: 80%;
          margin: 1rem; } }
      .station-pd5 .section_7 .nav-list .nav.hd-active {
        color: #000;
        background-color: #d9aa7b;
        box-shadow: 0px 0px 10px #d39d67; }
      .station-pd5 .section_7 .nav-list .nav:before {
        content: "";
        background-position: top center;
        background-repeat: no-repeat;
        display: block;
        position: absolute;
        width: 35px;
        height: 35px;
        top: 8px;
        left: 20px; }
  .station-pd5 .section_7 .cont {
    display: none; }
    .station-pd5 .section_7 .cont img {
      margin: 0 auto; }
  .station-pd5 .section_7 .cont.hd-active {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap; }
  .station-pd5 .section_7 .content-1.hd-active {
    display: block; }
  .station-pd5 .section_7 .content-2 .content-text, .station-pd5 .section_7 .content-3 .content-text {
    width: 45%;
    padding: 0 10px; }
    @media only screen and (max-width: 768px) {
      .station-pd5 .section_7 .content-2 .content-text, .station-pd5 .section_7 .content-3 .content-text {
        width: 100%; } }
  .station-pd5 .section_7 .content-2 .kv, .station-pd5 .section_7 .content-3 .kv {
    width: 55%; }
    @media only screen and (max-width: 768px) {
      .station-pd5 .section_7 .content-2 .kv, .station-pd5 .section_7 .content-3 .kv {
        width: 100%; } }

.station-pd5 .wtb {
  background-color: #060606;
  padding-top: 5rem; }
  @media only screen and (min-width: 992px) {
    .station-pd5 .wtb .compare_new .product-spec table {
      max-width: 600px; } }
  .station-pd5 .wtb .compare_new .product-spec tbody tr {
    background-color: #151515; }
  .station-pd5 .wtb .compare_new .product-spec tbody tr:nth-child(even) {
    background-color: #060606; }
  .station-pd5 .wtb .compare_new .product-spec tbody tr th,
  .station-pd5 .wtb .compare_new .product-spec tbody tr td {
    border-bottom: none; }

.projector .module {
  text-align: center;
  padding: 3rem 0; }
  @media only screen and (min-width: 768px) {
    .projector .module p {
      max-width: 900px;
      margin-left: auto;
      margin-right: auto; } }
  @media only screen and (min-width: 1200px) {
    .projector .module p {
      max-width: 1000px; } }

.projector .feature-list {
  font-family: "TT-Norms-Pro-Normal", sans-serif;
  font-weight: 500; }
  .projector .feature-list .feature-title {
    color: #d39d67;
    font-size: 1.5rem; }
    .projector .feature-list .feature-title span {
      font-family: "TT-Norms-Pro-Medium", sans-serif;
      font-size: 3rem;
      font-weight: bold;
      line-height: 1; }
    @media only screen and (min-width: 768px) {
      .projector .feature-list .feature-title {
        font-size: 1.8rem; } }
    @media only screen and (min-width: 1200px) {
      .projector .feature-list .feature-title {
        font-size: 1.8rem; } }
  .projector .feature-list .feature-desc {
    font-size: 0.875rem; }
    @media only screen and (min-width: 768px) {
      .projector .feature-list .feature-desc {
        font-size: 1rem; } }
    @media only screen and (min-width: 1200px) {
      .projector .feature-list .feature-desc {
        font-size: 1rem; } }

.projector .play-button {
  width: 122px;
  height: 122px; }
  @media only screen and (max-width: 768px) {
    .projector .play-button {
      width: 60px;
      height: 60px; } }

.projector .hero {
  position: relative;
  background-image: url("../images/projector/hero@mobile.webp");
  background-repeat: no-repeat;
  background-position: 50% 50px;
  background-size: contain;
  padding-top: 8rem; }
  @media only screen and (min-width: 1200px) {
    .projector .hero {
      background-image: url("../images/projector/hero.jpg");
      background-position: 50% 50px;
      background-size: auto;
      padding-top: 9rem; } }
  @media only screen and (max-width: 480px) {
    .projector .hero {
      padding-top: 5rem;
      background-size: 390px; } }
  .projector .hero .pd-title {
    padding-bottom: 35%;
    text-align: center; }
    @media only screen and (min-width: 992px) {
      .projector .hero .pd-title {
        padding-bottom: 50%; } }
    @media only screen and (min-width: 1200px) {
      .projector .hero .pd-title {
        padding-bottom: 37%; } }
    @media only screen and (min-width: 1500px) {
      .projector .hero .pd-title {
        padding-bottom: 32%; } }
    @media only screen and (max-width: 480px) {
      .projector .hero .pd-title {
        padding-bottom: 8%; } }
    .projector .hero .pd-title img {
      margin: 0 auto; }
  .projector .hero .btn-cta {
    display: inline-block;
    margin: 2rem auto 0;
    width: 140px; }
  .projector .hero .content {
    padding: 0; }
  .projector .hero .title {
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: #d39d67; }
  .projector .hero .feature-list {
    text-align: center;
    margin-top: 5rem; }
    @media only screen and (max-width: 480px) {
      .projector .hero .feature-list {
        margin-top: 15rem; } }
    .projector .hero .feature-list img {
      margin: 0 auto; }
  .projector .hero .cont-1 {
    width: 100%;
    margin: 2rem auto 0; }
    @media only screen and (min-width: 768px) {
      .projector .hero .cont-1 {
        width: 80%; } }
    .projector .hero .cont-1:before, .projector .hero .cont-1:after {
      content: "";
      display: block;
      height: 3px;
      width: 100%;
      background: #72624e;
      background: linear-gradient(90deg, rgba(114, 98, 78, 0.1) 0%, #72624e 50%, rgba(114, 98, 78, 0.1) 100%); }
    .projector .hero .cont-1 ul {
      list-style: none;
      padding: 0;
      margin: 2rem auto;
      text-align: left;
      font-size: 1.2rem;
      max-width: 425px;
      width: 100%; }
      .projector .hero .cont-1 ul li {
        margin: 5px 0;
        position: relative;
        padding-left: 15px; }
        .projector .hero .cont-1 ul li:before {
          content: "";
          display: block;
          height: 5px;
          width: 5px;
          background-color: #d39d67;
          position: absolute;
          left: 0;
          top: 9px; }
  .projector .hero .cont-2 {
    margin: 3rem 0; }
  .projector .hero .disclaimer {
    font-family: "TT-Norms-Pro-Normal", sans-serif;
    font-size: 0.8rem;
    line-height: 1.2rem;
    margin-top: 10px; }
    @media only screen and (min-width: 992px) {
      .projector .hero .disclaimer {
        font-size: 1.1rem;
        line-height: 1.5rem; } }
  .projector .hero .promotion img {
    width: 192px; }

.projector .section_1 {
  position: relative;
  padding-top: 0;
  padding-bottom: 0; }
  .projector .section_1 .content {
    position: static;
    width: 100%;
    text-align: center; }
    @media only screen and (min-width: 1200px) {
      .projector .section_1 .content {
        position: absolute;
        bottom: 0;
        right: 0;
        text-align: left;
        width: 45%; } }
    @media only screen and (min-width: 1500px) {
      .projector .section_1 .content {
        width: 40%;
        right: 9%; } }
  .projector .section_1 .feature-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin: 3rem 0;
    text-align: center; }
    .projector .section_1 .feature-list .feature {
      width: 191px;
      margin-right: 3rem; }
      .projector .section_1 .feature-list .feature:nth-child(2) {
        margin-right: 0; }

@media only screen and (max-width: 768px) {
  .projector .section_2 {
    padding-top: 0; } }

.projector .section_2 .kv {
  padding-bottom: 3rem; }

.projector .section_2 .btn-video {
  margin-top: 4rem;
  display: block;
  position: relative; }
  .projector .section_2 .btn-video img {
    margin: 0 auto; }

.projector .section_3 {
  position: relative;
  padding-top: 6rem;
  padding-bottom: 6rem;
  background-image: url("../images/projector/bg-1.webp");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover; }
  @media only screen and (min-width: 1200px) {
    .projector .section_3 {
      background-image: url("../images/projector/bg-1.jpg"); } }
  .projector .section_3 .content-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 auto 3rem;
    max-width: 800px;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between; }
    @media only screen and (max-width: 768px) {
      .projector .section_3 .content-list {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-flow: column;
                flex-flow: column; } }
    .projector .section_3 .content-list .kv {
      width: 100%;
      max-width: 286px; }
      @media only screen and (max-width: 768px) {
        .projector .section_3 .content-list .kv {
          max-width: none; } }
    .projector .section_3 .content-list .content {
      width: 60%;
      text-align: left; }
      @media only screen and (max-width: 768px) {
        .projector .section_3 .content-list .content {
          width: 100%;
          text-align: center; } }
  .projector .section_3 .feature-list {
    width: 300px;
    z-index: 99;
    margin: 0 auto 2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    text-align: center; }
    @media only screen and (min-width: 768px) {
      .projector .section_3 .feature-list {
        width: 100%;
        max-width: 600px; } }
    @media only screen and (min-width: 1200px) {
      .projector .section_3 .feature-list {
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between; } }
    @media only screen and (max-width: 480px) {
      .projector .section_3 .feature-list {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center; } }
    .projector .section_3 .feature-list .feature {
      margin: 1rem 0; }
      @media only screen and (max-width: 480px) {
        .projector .section_3 .feature-list .feature {
          margin: 0.5rem 0; } }
  .projector .section_3 .kv {
    position: relative; }
    .projector .section_3 .kv img {
      margin: 0 auto; }

.projector .section_4 {
  position: relative;
  padding-top: 6rem;
  padding-bottom: 6rem;
  background-image: url("../images/projector/bg-2.webp");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover; }
  @media only screen and (min-width: 1200px) {
    .projector .section_4 {
      background-image: url("../images/projector/bg-2.jpg"); } }
  @media only screen and (max-width: 480px) {
    .projector .section_4 {
      padding-top: 3rem;
      padding-bottom: 3rem; } }
  .projector .section_4 .content-set {
    margin: 3rem auto 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    max-width: 1194px; }
    @media only screen and (max-width: 768px) {
      .projector .section_4 .content-set {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-flow: row wrap;
                flex-flow: row wrap; } }
    .projector .section_4 .content-set .content {
      padding: 0; }
      @media only screen and (min-width: 992px) {
        .projector .section_4 .content-set .content {
          text-align: left; } }
  .projector .section_4 .feature-list {
    width: 300px;
    z-index: 99;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -ms-flex-pack: distribute;
        justify-content: space-around; }
    @media only screen and (min-width: 768px) {
      .projector .section_4 .feature-list {
        width: 100%;
        max-width: 600px; } }
    .projector .section_4 .feature-list .feature {
      margin: 1rem 0; }
  .projector .section_4 .kv {
    position: relative; }
    .projector .section_4 .kv img {
      margin: 0 auto; }

.projector .section_5 {
  padding-top: 6rem;
  padding-bottom: 6rem;
  background-image: url("../images/projector/bg-3.webp");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover; }
  @media only screen and (min-width: 1200px) {
    .projector .section_5 {
      background-image: url("../images/projector/bg-3.jpg"); } }
  @media only screen and (max-width: 480px) {
    .projector .section_5 {
      padding-top: 3rem;
      padding-bottom: 3rem; } }
  .projector .section_5 .kv-set {
    margin-top: 5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
    @media only screen and (max-width: 480px) {
      .projector .section_5 .kv-set {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-flow: column;
                flex-flow: column; } }
  .projector .section_5 .feature-list {
    margin-left: 60px; }
    @media only screen and (max-width: 480px) {
      .projector .section_5 .feature-list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-flow: row;
                flex-flow: row;
        margin: 0;
        -ms-flex-pack: distribute;
            justify-content: space-around;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center; } }
    .projector .section_5 .feature-list .feature {
      margin: 30px 0; }

.projector .section_6 {
  position: relative; }
  .projector .section_6 .kv {
    position: relative;
    margin: 4rem 0; }
    .projector .section_6 .kv img {
      margin: 0 auto; }

.projector .section_7 {
  padding-bottom: 6rem; }
  @media only screen and (max-width: 768px) {
    .projector .section_7 {
      padding-bottom: 3rem; } }
  .projector .section_7 p {
    max-width: 1200px; }
  .projector .section_7 .feature-list {
    width: 300px;
    z-index: 99;
    margin: 0 auto 3rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
    @media only screen and (min-width: 768px) {
      .projector .section_7 .feature-list {
        width: 100%;
        max-width: 700px; } }
    .projector .section_7 .feature-list .feature {
      margin: 1rem 1.5rem; }
  .projector .section_7 .nav-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    text-align: center;
    margin: 0 auto; }
    @media only screen and (max-width: 768px) {
      .projector .section_7 .nav-list {
        margin-bottom: 3rem; } }
    .projector .section_7 .nav-list .nav {
      width: 25%;
      background-color: #000;
      color: #d9aa7b;
      padding: 12px 20px 12px 20px;
      margin: 1rem 0 5rem;
      border: 1px solid #d9aa7b;
      border-radius: 30px;
      font-size: 1.2rem;
      position: relative;
      text-align: center;
      font-family: "TT-Norms-Pro-Medium", sans-serif;
      cursor: pointer;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none; }
      @media only screen and (max-width: 768px) {
        .projector .section_7 .nav-list .nav {
          width: 80%;
          margin: 1rem; } }
      .projector .section_7 .nav-list .nav.hd-active {
        color: #000;
        background-color: #d9aa7b;
        box-shadow: 0px 0px 10px #d39d67; }
      .projector .section_7 .nav-list .nav:before {
        content: "";
        background-position: top center;
        background-repeat: no-repeat;
        display: block;
        position: absolute;
        width: 35px;
        height: 35px;
        top: 8px;
        left: 20px; }
  .projector .section_7 .cont {
    display: none; }
    .projector .section_7 .cont img {
      margin: 0 auto; }
  .projector .section_7 .cont.hd-active {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap; }
  .projector .section_7 .content-1.hd-active {
    display: block; }
  .projector .section_7 .content-2 .content-text, .projector .section_7 .content-3 .content-text {
    width: 45%;
    padding: 0 10px; }
    @media only screen and (max-width: 768px) {
      .projector .section_7 .content-2 .content-text, .projector .section_7 .content-3 .content-text {
        width: 100%; } }
  .projector .section_7 .content-2 .kv, .projector .section_7 .content-3 .kv {
    width: 55%; }
    @media only screen and (max-width: 768px) {
      .projector .section_7 .content-2 .kv, .projector .section_7 .content-3 .kv {
        width: 100%; } }

.projector .wtb {
  background-color: #060606;
  padding-top: 5rem; }
  .projector .wtb .compare_new .product-spec {
    margin-top: 4rem; }
    @media only screen and (min-width: 1500px) {
      .projector .wtb .compare_new .product-spec {
        width: 90%; } }
  @media only screen and (min-width: 992px) {
    .projector .wtb .compare_new .product-spec table {
      max-width: 600px; } }
  .projector .wtb .compare_new .product-spec table .btn-arrow span {
    font-weight: bold; }
  .projector .wtb .compare_new .product-spec .dropdown-content > a {
    width: 100%; }
  .projector .wtb .compare_new .product-spec thead tr:nth-child(1) {
    color: #d39d67;
    font-size: 1.5rem; }
  .projector .wtb .compare_new .product-spec thead tr th:nth-child(2) {
    background-color: #121517;
    border-right: 1px solid #333; }
  .projector .wtb .compare_new .product-spec thead h3 {
    font-size: 1.1rem;
    color: #d39d67; }
    .projector .wtb .compare_new .product-spec thead h3 span {
      color: #fff; }
  .projector .wtb .compare_new .product-spec tbody tr {
    background-color: #151515;
    text-align: left; }
  .projector .wtb .compare_new .product-spec tbody tr:nth-child(even) {
    background-color: #060606; }
  .projector .wtb .compare_new .product-spec tbody tr th,
  .projector .wtb .compare_new .product-spec tbody tr td {
    border-bottom: none;
    border-right: 1px solid #333; }
  .projector .wtb .compare_new .product-spec tbody tr td:nth-child(2) {
    background-color: #232323; }
  .projector .wtb .compare_new .product-spec tbody tr:nth-child(even) td:nth-child(2) {
    background-color: #121517; }
  .projector .wtb .compare_new .product-spec tbody tr td:last-child {
    border-right: none; }
  .projector .wtb .compare_new .product-spec tbody tr th {
    color: #d39d67;
    text-transform: none;
    border-right: none; }

.proart-display .module {
  text-align: center;
  padding: 3rem 0; }
  .proart-display .module p {
    max-width: 1000px; }
  .proart-display .module h2 {
    font-family: "Roboto", sans-serif;
    color: #fff; }

.proart-display .feature-list {
  font-family: "TT-Norms-Pro-Normal", sans-serif;
  font-weight: 500; }
  .proart-display .feature-list .feature-title {
    font-family: "TT-Norms-Pro-Medium", sans-serif;
    color: #d39d67;
    background: #a58461;
    background: linear-gradient(180deg, #ffffff 20%, #a58461 70%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.5rem;
    font-weight: 600; }
    @media only screen and (min-width: 768px) {
      .proart-display .feature-list .feature-title {
        font-size: 2rem; } }
    @media only screen and (min-width: 1200px) {
      .proart-display .feature-list .feature-title {
        font-size: 2.3rem; } }
  .proart-display .feature-list .feature-desc {
    color: #d39d67;
    font-size: 0.875rem; }
    @media only screen and (min-width: 768px) {
      .proart-display .feature-list .feature-desc {
        font-size: 1.1rem; } }
    @media only screen and (min-width: 1200px) {
      .proart-display .feature-list .feature-desc {
        font-size: 1.3rem; } }

.proart-display .play-button {
  width: 122px;
  height: 122px; }
  @media only screen and (max-width: 768px) {
    .proart-display .play-button {
      width: 60px;
      height: 60px; } }

.proart-display .hero {
  position: relative; }
  .proart-display .hero .container {
    padding-left: 0;
    padding-right: 0; }
  .proart-display .hero .btn-cta {
    position: absolute;
    bottom: -2rem;
    left: 0;
    right: 0;
    display: inline-block;
    margin: 0 auto;
    width: 140px; }
    @media only screen and (min-width: 768px) {
      .proart-display .hero .btn-cta {
        top: 35%;
        bottom: inherit; } }
    @media only screen and (min-width: 992px) {
      .proart-display .hero .btn-cta {
        top: 32%; } }

.proart-display .section_1 {
  position: relative;
  background-image: url("../images/display/kv-1.webp");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 1300px;
  background-color: #37a8d0; }
  @media only screen and (min-width: 992px) {
    .proart-display .section_1 {
      background-size: cover; } }
  @media only screen and (min-width: 1200px) {
    .proart-display .section_1 {
      background-image: url("../images/display/kv-1.jpg");
      background-position: bottom center; } }
  @media only screen and (min-width: 1500px) {
    .proart-display .section_1 {
      background-size: 1920px; } }
  @media only screen and (max-width: 480px) {
    .proart-display .section_1 {
      background-size: 700px;
      background-position: bottom center;
      background-color: #37a8d0;
      padding-bottom: 0; } }
  .proart-display .section_1 .content {
    padding-bottom: 56%; }
    @media only screen and (min-width: 992px) {
      .proart-display .section_1 .content {
        padding-bottom: 50%; } }
    @media only screen and (min-width: 1200px) {
      .proart-display .section_1 .content {
        padding-bottom: 27%; } }
    @media only screen and (min-width: 1500px) {
      .proart-display .section_1 .content {
        padding-bottom: 36%; } }
    @media only screen and (max-width: 480px) {
      .proart-display .section_1 .content {
        padding-bottom: 0%; } }
  @media only screen and (max-width: 480px) {
    .proart-display .section_1 .promotion {
      padding-bottom: 72%; } }
  .proart-display .section_1 .promotion img {
    max-width: 200px; }
    @media only screen and (min-width: 1500px) {
      .proart-display .section_1 .promotion img {
        max-width: 250px; } }
  .proart-display .section_1 .feature-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
    @media only screen and (max-width: 480px) {
      .proart-display .section_1 .feature-list {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-flow: column;
                flex-flow: column; } }
    .proart-display .section_1 .feature-list .feature {
      margin: 15px; }
    .proart-display .section_1 .feature-list img {
      margin: 0 auto; }
  .proart-display .section_1 .cont {
    text-align: center; }
  .proart-display .section_1 .cont-1 {
    width: 245px;
    margin: 2rem auto;
    z-index: 99;
    position: relative; }
    @media only screen and (min-width: 768px) {
      .proart-display .section_1 .cont-1 {
        position: absolute;
        margin: inherit;
        top: 43%;
        left: 20%; } }
    @media only screen and (min-width: 992px) {
      .proart-display .section_1 .cont-1 {
        top: 30%;
        left: 23%; } }
    @media only screen and (min-width: 1200px) {
      .proart-display .section_1 .cont-1 {
        top: 43%;
        left: 10%; } }
    @media only screen and (min-width: 1500px) {
      .proart-display .section_1 .cont-1 {
        top: 40%;
        left: 12%; } }
    .proart-display .section_1 .cont-1 .btn-video {
      text-decoration: none;
      font-size: 1.5rem;
      color: #fff; }
    .proart-display .section_1 .cont-1 .play-button {
      width: 40px;
      height: 40px;
      border: 1px solid #fff;
      border-radius: 50%;
      left: inherit; }
  .proart-display .section_1 .cont-2 {
    width: 100%;
    z-index: 99;
    margin: 2rem auto 0;
    position: absolute;
    bottom: 20px;
    left: 0; }
    @media only screen and (min-width: 768px) {
      .proart-display .section_1 .cont-2 {
        bottom: inherit;
        width: 35%;
        top: 40%;
        right: 11%;
        left: inherit;
        margin: 0; } }
    @media only screen and (min-width: 992px) {
      .proart-display .section_1 .cont-2 {
        top: 28%;
        right: 11%; } }
    @media only screen and (min-width: 1200px) {
      .proart-display .section_1 .cont-2 {
        width: 22%;
        top: 40%;
        right: 3%; } }
    @media only screen and (min-width: 1500px) {
      .proart-display .section_1 .cont-2 {
        top: 38%;
        right: 0%; } }
    .proart-display .section_1 .cont-2 .title {
      font-weight: bold;
      font-size: 1.2rem;
      margin-bottom: 10px; }
      @media only screen and (min-width: 1500px) {
        .proart-display .section_1 .cont-2 .title {
          font-size: 1.5rem; } }
  .proart-display .section_1 .disclaimer {
    font-family: "TT-Norms-Pro-Normal", sans-serif;
    font-size: 0.875rem;
    line-height: 1.2rem;
    margin-top: 10px; }
    @media only screen and (min-width: 992px) {
      .proart-display .section_1 .disclaimer {
        font-size: 1.1rem;
        line-height: 1.5rem; } }

.proart-display .testimonial {
  background-color: #181b22;
  padding-top: 0; }
  @media only screen and (max-width: 480px) {
    .proart-display .testimonial .title {
      margin-top: 2rem; } }
  .proart-display .testimonial .quote-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-top: 3rem; }
    @media only screen and (max-width: 480px) {
      .proart-display .testimonial .quote-list {
        margin-top: 1rem; } }
    .proart-display .testimonial .quote-list .item {
      width: 30%;
      text-align: left; }
      @media only screen and (max-width: 768px) {
        .proart-display .testimonial .quote-list .item {
          width: 100%;
          padding-top: 2rem;
          text-align: center; } }
      .proart-display .testimonial .quote-list .item p {
        line-height: 1.5rem; }
      .proart-display .testimonial .quote-list .item q {
        font-size: 1rem; }

.proart-display .section_2 {
  background-image: url("../images/display/bg-1.webp");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover; }
  @media only screen and (min-width: 1200px) {
    .proart-display .section_2 {
      background-image: url("../images/display/bg-1.jpg"); } }
  .proart-display .section_2 .video-set {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
    @media only screen and (max-width: 480px) {
      .proart-display .section_2 .video-set {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-flow: column;
                flex-flow: column; } }
    .proart-display .section_2 .video-set .item {
      max-width: 315px;
      width: 100%;
      margin: 10px; }
      @media only screen and (max-width: 480px) {
        .proart-display .section_2 .video-set .item {
          margin: 10px auto; } }
      .proart-display .section_2 .video-set .item .btn-video {
        position: relative;
        display: block; }
        .proart-display .section_2 .video-set .item .btn-video .play-button {
          width: 50px;
          height: 50px;
          border: 1px solid #fff;
          border-radius: 50%; }
      .proart-display .section_2 .video-set .item .title {
        font-size: 1.5rem;
        font-family: "TT-Norms-Pro-Medium", sans-serif;
        padding: 5px;
        background: #a58461;
        background: linear-gradient(90deg, #a58461 30%, #64513b 80%); }
      .proart-display .section_2 .video-set .item p {
        text-align: left;
        line-height: 1.5rem;
        margin-top: 20px; }

.proart-display .section_3 {
  background-image: url("../images/display/kv-2.webp");
  background-repeat: no-repeat;
  background-position: 0% 80%;
  background-size: contain;
  position: relative; }
  @media only screen and (min-width: 992px) {
    .proart-display .section_3 {
      background-position: top center;
      background-size: contain; } }
  @media only screen and (min-width: 1200px) {
    .proart-display .section_3 {
      background-image: url("../images/display/kv-2.jpg"); } }
  @media only screen and (max-width: 480px) {
    .proart-display .section_3 {
      background-position: 60% 80%;
      background-size: 700px; } }
  .proart-display .section_3 .feature-list {
    text-align: center;
    z-index: 99;
    margin: 0 auto; }
    @media only screen and (min-width: 992px) {
      .proart-display .section_3 .feature-list {
        margin: inherit;
        position: absolute;
        top: 40%;
        left: 8%; } }
    .proart-display .section_3 .feature-list .feature {
      margin: 1rem 0; }
  .proart-display .section_3 .kv {
    padding-top: 50%; }
    @media only screen and (min-width: 992px) {
      .proart-display .section_3 .kv {
        padding-top: 44%; } }
    @media only screen and (max-width: 480px) {
      .proart-display .section_3 .kv {
        padding-top: 81%; } }

.proart-display .section_4 {
  background-image: url("../images/display/kv-3.webp");
  background-repeat: no-repeat;
  background-position: 4% 100%;
  background-size: auto;
  position: relative; }
  @media only screen and (min-width: 992px) {
    .proart-display .section_4 {
      background-position: top center;
      background-size: cover; } }
  @media only screen and (min-width: 1200px) {
    .proart-display .section_4 {
      background-image: url("../images/display/kv-3.jpg"); } }
  @media only screen and (min-width: 1500px) {
    .proart-display .section_4 {
      background-size: 1920px; } }
  @media only screen and (max-width: 480px) {
    .proart-display .section_4 {
      background-position: 13% 100%;
      background-size: 800px; } }
  .proart-display .section_4 .feature-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    text-align: center;
    z-index: 99;
    margin: 0 auto; }
    @media only screen and (min-width: 992px) {
      .proart-display .section_4 .feature-list {
        margin: inherit;
        position: absolute;
        top: 46%;
        right: 0;
        width: 47%; } }
    .proart-display .section_4 .feature-list .feature {
      margin: 1rem 0;
      width: 33%; }
  .proart-display .section_4 .kv {
    padding-top: 68%; }
    @media only screen and (min-width: 992px) {
      .proart-display .section_4 .kv {
        padding-top: 60%; } }
    @media only screen and (max-width: 480px) {
      .proart-display .section_4 .kv {
        padding-top: 78%; } }

.proart-display .section_5 {
  background-image: url("../images/display/kv-4.webp");
  background-repeat: no-repeat;
  background-position: 200% 70%;
  background-size: 700px;
  position: relative; }
  @media only screen and (min-width: 992px) {
    .proart-display .section_5 {
      background-position: 170% 40%;
      background-size: 900px; } }
  @media only screen and (min-width: 1200px) {
    .proart-display .section_5 {
      background-image: url("../images/display/kv-4.jpg");
      background-size: 1100px;
      background-position: 80% 0%; } }
  @media only screen and (min-width: 1500px) {
    .proart-display .section_5 {
      background-size: auto;
      background-position: 67% 0%; } }
  @media only screen and (max-width: 480px) {
    .proart-display .section_5 {
      background-size: 700px;
      background-position: bottom center;
      padding-bottom: 0; } }
  .proart-display .section_5 .feature-list {
    text-align: center;
    z-index: 99;
    margin: 0 auto; }
    @media only screen and (min-width: 768px) {
      .proart-display .section_5 .feature-list {
        position: absolute;
        top: 51%;
        left: 5%; } }
    @media only screen and (min-width: 992px) {
      .proart-display .section_5 .feature-list {
        top: 40%;
        left: 13%;
        margin: inherit; } }
    @media only screen and (min-width: 1200px) {
      .proart-display .section_5 .feature-list {
        left: 12%; } }
    @media only screen and (min-width: 1500px) {
      .proart-display .section_5 .feature-list {
        left: 19%; } }
    .proart-display .section_5 .feature-list .feature {
      margin: 1rem 0; }
      .proart-display .section_5 .feature-list .feature img {
        margin: 0 auto; }
        @media only screen and (max-width: 480px) {
          .proart-display .section_5 .feature-list .feature img {
            width: 150px; } }
  .proart-display .section_5 .content {
    padding-bottom: 41%; }
    @media only screen and (min-width: 1500px) {
      .proart-display .section_5 .content {
        padding-bottom: 36%; } }
    @media only screen and (max-width: 480px) {
      .proart-display .section_5 .content {
        padding-bottom: 10px; } }
  .proart-display .section_5 p {
    max-width: 1100px; }
    .proart-display .section_5 p b {
      font-family: "TT-Norms-Pro-Medium", sans-serif; }
  @media only screen and (max-width: 480px) {
    .proart-display .section_5 .kv {
      padding-top: 83%; } }

.proart-display .wtb {
  background-color: #060606;
  padding-top: 5rem;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover; }
  .proart-display .wtb h3 {
    min-width: 160px; }
  .proart-display .wtb .tabnav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap; }
    .proart-display .wtb .tabnav .tabnav-item {
      margin: 20px 15px; }
      @media only screen and (max-width: 480px) {
        .proart-display .wtb .tabnav .tabnav-item {
          width: calc(50% - 30px); } }
    .proart-display .wtb .tabnav a {
      text-decoration: none;
      font-size: 1.8rem;
      font-family: "TT-Norms-Pro-Medium", sans-serif;
      color: #fff;
      display: block;
      padding: 7px 25px;
      line-height: 1;
      background: #a58461;
      background: linear-gradient(90deg, #a58461 30%, #64513b 80%); }
    .proart-display .wtb .tabnav .tabnav-item.active a {
      background: #d39d67; }
  .proart-display .wtb .tabcontent-item {
    display: none; }
  .proart-display .wtb .tabcontent-item.active {
    display: block; }
  .proart-display .wtb .compare_new .product-spec thead th .card-button span {
    font-weight: bold; }
  .proart-display .wtb .compare_new .product-spec tbody tr {
    background-color: #151515; }
  .proart-display .wtb .compare_new .product-spec tbody tr:nth-child(even) {
    background-color: #060606; }
  .proart-display .wtb .compare_new .product-spec tbody tr th {
    white-space: pre-wrap; }
  .proart-display .wtb .compare_new .product-spec tbody tr th,
  .proart-display .wtb .compare_new .product-spec tbody tr td {
    border: none; }
  .proart-display .wtb .compare_new .product-spec tbody tr:first-child th,
  .proart-display .wtb .compare_new .product-spec tbody tr:first-child td {
    border: none; }

.proart-display .eyecare .item-list {
  margin: 3rem auto 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

.proart-display .eyecare .item-list .item {
  width: 100%; }

.proart-display .eyecare .item-list .item .item-desc {
  padding: 20px; }

.proart-display .eyecare .item-list .item .item-title {
  font-size: 1.5rem;
  margin-bottom: 1rem; }

@media only screen and (min-width: 1200px) {
  .proart-display .eyecare .item-list {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row;
            flex-flow: row; }
  .proart-display .eyecare .item-list .item {
    margin: 0 15px; }
  .proart-display .eyecare .item-list .item {
    width: calc(50% - 30px); } }

.proart {
  /* dropdown-content */ }
  .proart .btn-group {
    margin-bottom: 10px; }
  .proart .btn__learnmore {
    margin-top: 5px;
    margin-bottom: 5px;
    width: auto; }
  .proart .section-nav {
    text-align: center; }
  .proart .section-nav ul {
    list-style: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 0;
    margin: 0; }
  .proart .section-nav ul li {
    display: inline-block;
    padding: 15px 20px;
    border-bottom: 1px solid #cdab82;
    width: 20%;
    font-size: 1.1rem;
    cursor: pointer;
    color: #fff; }
  .proart .section-nav ul li.hd-active {
    background-color: #cdab82;
    color: #000; }
  @media only screen and (max-width: 480px) {
    .proart .section-nav ul {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-flow: row wrap;
              flex-flow: row wrap; }
    .proart .section-nav ul li {
      width: 50%; } }
  .proart .product__list .grid__item .item__container {
    display: none; }
  .proart .product__list .grid__item .item__container.hd-active {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -ms-flex-pack: distribute;
        justify-content: space-around; }
  @media all and (min-width: 1280px) {
    .proart .product__list.need-arrow .grid__item .item__container .item {
      width: 30%;
      margin: 3rem 0; } }
  .proart .item-PA32UCG-K .img {
    background-image: url(../images/products/PA32UCG-K.png); }
  .proart .item-PA32UCX-PK .img {
    background-image: url(../images/products/PA32UCX-PK.png); }
  .proart .item-PA27UCX-K .img {
    background-image: url(../images/products/PA27UCX-K.png); }
  .proart .item-PA278CV .img {
    background-image: url(../images/products/PA278CV.png); }
  .proart .item-PA247CV .img {
    background-image: url(../images/products/PA247CV.png); }
  .proart .item-PA329C .img {
    background-image: url(../images/products/PA329C.png); }
  .proart .item-PA329CV .img {
    background-image: url(../images/products/PA329CV.png); }
  .proart .item-PA34VC .img {
    background-image: url(../images/products/PA34VC.png); }
  .proart .item-PA148CTV .img {
    background-image: url(../images/products/PA148CTV.png); }
  .proart .item-Studiobook-Pro-16-OLED .img {
    background-image: url(../images/products/W7600.png); }
  .proart .item-Studiobook-Pro-X .img {
    background-image: url(../images/products/W730G5T.png); }
  .proart .item-Studiobook-Pro-15 .img {
    background-image: url(../images/products/W500G5T.png); }
  .proart .item-Studiobook-Pro-17 .img {
    background-image: url(../images/products/W700G3T.png); }
  .proart .item-Studiobook-One .img {
    background-image: url(../images/products/W590G6T.png); }
  .proart .item-UX582 .img {
    background-image: url(../images/products/UX582.png); }
  .proart .item-vivobook-pro-16x-oled .img {
    background-image: url(../images/products/vivobook-pro-16x-oled.png); }
  .proart .item-ProArt-X570-Creator .img {
    background-image: url(../images/products/X570-CREATOR.png); }
  .proart .item-ProArt-B550-Creator .img {
    background-image: url(../images/products/B550-CREATOR.png); }
  .proart .item-Z690 .img {
    background-image: url(../images/products/Z690.png); }
  .proart .item-ProArt-Station-PD5 .img {
    background-image: url(../images/products/ProArt-Station-PD5.png); }
  .proart .item-ProArt-Projector-A1 .img {
    background-image: url(../images/products/ProArt-Projector-A1.png); }
  .proart .item-ProArt-Mouse-Pad-PS201 .img {
    background-image: url(../images/products/PS201.png); }
  .proart .card-button {
    cursor: pointer;
    text-transform: none; }
  .proart .dropdown {
    position: relative;
    width: auto;
    margin: 0 auto !important; }
  @media only screen and (max-width: 480px) {
    .proart .dropdown {
      width: 100%; } }
  @media only screen and (min-width: 768px) {
    .proart .dropdown {
      margin: 0; } }
  .proart .dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 160px;
    max-width: 240px;
    width: auto;
    box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.2);
    z-index: 19;
    bottom: 60px;
    left: 0;
    right: 0;
    margin: 0 auto;
    border-radius: 4px; }
  @media only screen and (max-width: 480px) {
    .proart .dropdown-content {
      width: 100%; } }
  .proart .dropdown-content::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    bottom: -9px;
    left: auto;
    right: 36px;
    /* margin: 0 auto; */
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #fff; }
  .proart .dropdown-content::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    bottom: -11px;
    left: auto;
    right: 36px;
    /* margin: 0 auto; */
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 11px solid #ddd; }
  .proart .dropdown-content a {
    color: #cdab82;
    padding: 3px !important;
    text-decoration: none;
    display: block !important;
    font-weight: 400;
    font-size: 0.875rem;
    width: 47%;
    border: none; }
  @media only screen and (max-width: 480px) {
    .proart .dropdown-content a {
      width: 100%; } }
  @media only screen and (min-width: 768px) {
    .proart .dropdown-content a {
      padding: 5px !important; } }
  .proart .dropdown-content a:hover {
    background-color: #fff !important;
    color: #cdab82;
    box-shadow: inset 3px 0 0 #cdab82, inset -3px 0 0 #cdab82; }
  .proart .dropdown-content a div {
    margin: 0 auto;
    width: auto;
    height: 40px;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain; }
  .proart .dropdown-content a:first-child:hover {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px; }
  .proart .dropdown-content a:last-child {
    border-bottom: 0; }
  .proart .dropdown-content a:last-child:hover {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px; }
  .proart .aci-show {
    /* display: block; */
    width: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    /* max-width: none; */ }
  @media only screen and (max-width: 480px) {
    .proart .aci-show {
      margin: auto !important; } }
  .proart .text-right .dropdown-content,
  .proart .text-left .dropdown-content {
    bottom: 70px;
    margin-left: 53px; }
  .proart .grid__item .item__container .item.text-bottom .item-content .wd__content .btn-group .btn__learnmore.form_question_button {
    font-size: 16px;
    margin-left: 10px;
    margin-right: 10px;
    color: #000;
    font-weight: bold; }

.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after, .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
  content: " ";
  display: block;
  background: white;
  position: absolute;
  z-index: 30;
  box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); }

.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after {
  width: 3px;
  height: 9999px;
  left: 50%;
  margin-left: -1.5px; }

.twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
  width: 9999px;
  height: 3px;
  top: 50%;
  margin-top: -1.5px; }

.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%; }

.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
  transition-duration: 0.5s; }

.twentytwenty-before-label, .twentytwenty-after-label {
  transition-property: opacity; }

.twentytwenty-before-label:before, .twentytwenty-after-label:before {
  color: white;
  font-size: 13px;
  letter-spacing: 0.1em; }

.twentytwenty-before-label:before, .twentytwenty-after-label:before {
  position: absolute;
  background: rgba(255, 255, 255, 0.2);
  line-height: 38px;
  padding: 0 20px;
  border-radius: 2px; }

.twentytwenty-horizontal .twentytwenty-before-label:before, .twentytwenty-horizontal .twentytwenty-after-label:before {
  top: 50%;
  margin-top: -19px; }

.twentytwenty-vertical .twentytwenty-before-label:before, .twentytwenty-vertical .twentytwenty-after-label:before {
  left: 50%;
  margin-left: -45px;
  text-align: center;
  width: 90px; }

.twentytwenty-left-arrow, .twentytwenty-right-arrow, .twentytwenty-up-arrow, .twentytwenty-down-arrow {
  width: 0;
  height: 0;
  border: 6px inset transparent;
  position: absolute; }

.twentytwenty-left-arrow, .twentytwenty-right-arrow {
  top: 50%;
  margin-top: -6px; }

.twentytwenty-up-arrow, .twentytwenty-down-arrow {
  left: 50%;
  margin-left: -6px; }

.twentytwenty-container {
  box-sizing: content-box;
  z-index: 0;
  overflow: hidden;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none; }

.twentytwenty-container img {
  max-width: 100%;
  position: absolute;
  top: 0;
  display: block; }

.twentytwenty-container.active .twentytwenty-overlay, .twentytwenty-container.active :hover.twentytwenty-overlay {
  background: transparent; }

.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label,
.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label, .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-before-label,
.twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-after-label {
  opacity: 0; }

.twentytwenty-container * {
  box-sizing: content-box; }

.twentytwenty-before-label {
  opacity: 0; }

.twentytwenty-before-label:before {
  content: attr(data-content); }

.twentytwenty-after-label {
  opacity: 0; }

.twentytwenty-after-label:before {
  content: attr(data-content); }

.twentytwenty-horizontal .twentytwenty-before-label:before {
  left: 10px; }

.twentytwenty-horizontal .twentytwenty-after-label:before {
  right: 10px; }

.twentytwenty-vertical .twentytwenty-before-label:before {
  top: 10px; }

.twentytwenty-vertical .twentytwenty-after-label:before {
  bottom: 10px; }

.twentytwenty-overlay {
  transition-property: background;
  background: transparent;
  z-index: 25; }

.twentytwenty-overlay:hover {
  background: rgba(0, 0, 0, 0.5); }

.twentytwenty-overlay:hover .twentytwenty-after-label {
  opacity: 1; }

.twentytwenty-overlay:hover .twentytwenty-before-label {
  opacity: 1; }

.twentytwenty-before {
  z-index: 20; }

.twentytwenty-after {
  z-index: 10; }

.twentytwenty-handle {
  height: 38px;
  width: 38px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -22px;
  margin-top: -22px;
  border: 3px solid white;
  border-radius: 1000px;
  box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
  z-index: 40;
  cursor: pointer; }

.twentytwenty-horizontal .twentytwenty-handle:before {
  bottom: 50%;
  margin-bottom: 22px;
  box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }

.twentytwenty-horizontal .twentytwenty-handle:after {
  top: 50%;
  margin-top: 22px;
  box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }

.twentytwenty-vertical .twentytwenty-handle:before {
  left: 50%;
  margin-left: 22px;
  box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }

.twentytwenty-vertical .twentytwenty-handle:after {
  right: 50%;
  margin-right: 22px;
  box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }

.twentytwenty-left-arrow {
  border-right: 6px solid white;
  left: 50%;
  margin-left: -17px; }

.twentytwenty-right-arrow {
  border-left: 6px solid white;
  right: 50%;
  margin-right: -17px; }

.twentytwenty-up-arrow {
  border-bottom: 6px solid white;
  top: 50%;
  margin-top: -17px; }

.twentytwenty-down-arrow {
  border-top: 6px solid white;
  bottom: 50%;
  margin-bottom: -17px; }

.twentytwenty-container {
  max-width: 1280px;
  margin: 0 auto; }

.twentytwenty-handle {
  margin-left: -20px;
  border: none;
  box-shadow: none; }

.twentytwenty span {
  display: inline-block;
  position: absolute;
  z-index: 100;
  opacity: 1;
  color: #fff;
  font-size: 20px;
  transition: opacity 500ms; }

.twentytwenty span.disappear {
  opacity: 0; }

.twentytwenty span.textLeft1 {
  top: 22px;
  left: 27px;
  font-size: 36px; }

.twentytwenty span.textLeft2 {
  top: 70px;
  left: 27px; }

.twentytwenty span.textRight1 {
  top: 22px;
  right: 27px;
  font-size: 36px; }

.twentytwenty span.textRight2 {
  top: 70px;
  right: 27px; }

.twentytwenty-left-arrow {
  margin-top: -1px;
  margin-left: -22px;
  border-right: 6px solid transparent; }

.twentytwenty-horizontal .twentytwenty-handle::before {
  margin-bottom: -48px; }

.twentytwenty-left-arrow::before {
  display: block;
  position: absolute;
  z-index: -1;
  top: -15px;
  left: 2px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: white;
  content: ''; }

.twentytwenty-horizontal .twentytwenty-handle::before, .twentytwenty-horizontal .twentytwenty-handle::after {
  margin-left: 0;
  background: white;
  box-shadow: none; }

.cookie-notice {
  position: fixed;
  bottom: 0;
  z-index: 9999;
  width: 100%; }

.rog-container-pop-up {
  position: relative;
  padding: 2.2em 2em 2.6em;
  background: #3b3b3b;
  font-family: Tahoma; }
  @media only screen and (max-width: 768px) {
    .rog-container-pop-up {
      padding: 2rem; } }

.rog-inner {
  max-width: 1600px;
  margin: 0 auto; }

.rog-container-pop-up a {
  color: #0074D9; }

.rog-container-pop-up .pop-up-content {
  width: 70%;
  position: relative;
  z-index: 4; }
  @media only screen and (max-width: 768px) {
    .rog-container-pop-up .pop-up-content {
      width: 100%; } }

.rog-container-pop-up p {
  color: #fff;
  font-size: 14px;
  line-height: 21px;
  padding: 2px 0;
  margin: 0 0 10px; }
  @media only screen and (max-width: 768px) {
    .rog-container-pop-up p {
      font-size: 13px;
      line-height: 1.2rem; } }

.rog-container-pop-up .btn {
  min-width: 155px;
  margin: 6px 0 2px;
  line-height: 1;
  padding: 10px 18px;
  border: 1px solid #0074D9;
  background: transparent;
  position: relative;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  border-radius: 2px;
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }
  @media only screen and (max-width: 768px) {
    .rog-container-pop-up .btn {
      min-width: auto;
      width: 49%; } }

.btn-policy-ok.btn {
  background-color: #0074D9;
  color: #fff; }

.btn-policy-no.btn:hover {
  color: #0074D9; }