/*!
 *
 * ProArt main.css
 *
 * @version 20161123
 *
 */
.owl-carousel .animated {
  -webkit-animation-duration: 800ms;
  animation-duration: 800ms;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both
}

.owl-carousel .owl-animated-in {
  z-index: 0
}

.owl-carousel .owl-animated-out {
  z-index: 1
}

.owl-carousel .fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

.owl-height {
  -webkit-transition: height 500ms ease-in-out;
  -moz-transition: height 500ms ease-in-out;
  -ms-transition: height 500ms ease-in-out;
  -o-transition: height 500ms ease-in-out;
  transition: height 500ms ease-in-out
}

.owl-carousel {
  display: none;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: 1
}

.owl-carousel .owl-stage {
  position: relative;
  -ms-touch-action: pan-Y
}

.owl-carousel .owl-stage:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0
}

.owl-carousel .owl-stage-outer {
  position: relative;
  overflow: hidden;
  -webkit-transform: translate3d(0px, 0, 0)
}

.owl-carousel .owl-controls .owl-dot, .owl-carousel .owl-controls .owl-nav .owl-next, .owl-carousel .owl-controls .owl-nav .owl-prev {
  cursor: pointer;
  cursor: hand;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.owl-carousel.owl-loaded {
  display: block
}

.owl-carousel.owl-loading {
  opacity: 0;
  display: block
}

.owl-carousel.owl-hidden {
  opacity: 0
}

.owl-carousel .owl-refresh .owl-item {
  display: none
}

.owl-carousel .owl-item {
  position: relative;
  min-height: 1px;
  float: left;
  -webkit-backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.owl-carousel .owl-item img {
  display: block;
  width: 100%;
  -webkit-transform-style: preserve-3d
}

.owl-carousel.owl-text-select-on .owl-item {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto
}

.owl-carousel .owl-grab {
  cursor: move;
  cursor: -webkit-grab;
  cursor: -o-grab;
  cursor: -ms-grab;
  cursor: grab
}

.owl-carousel .owl-rtl {
  direction: rtl
}

.owl-carousel .owl-rtl .owl-item {
  float: right
}

.no-js .owl-carousel {
  display: block
}

.owl-carousel .owl-item .owl-lazy {
  opacity: 0;
  -webkit-transition: opacity 400ms ease;
  -moz-transition: opacity 400ms ease;
  -ms-transition: opacity 400ms ease;
  -o-transition: opacity 400ms ease;
  transition: opacity 400ms ease
}

.owl-carousel .owl-item img {
  transform-style: preserve-3d
}

.owl-carousel .owl-video-wrapper {
  position: relative;
  height: 100%;
  background: #000
}

.owl-carousel .owl-video-play-icon {
  position: absolute;
  height: 80px;
  width: 80px;
  left: 50%;
  top: 50%;
  margin-left: -40px;
  margin-top: -40px;
  background: url(owl.video.play.png) no-repeat;
  cursor: pointer;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  -webkit-transition: scale 100ms ease;
  -moz-transition: scale 100ms ease;
  -ms-transition: scale 100ms ease;
  -o-transition: scale 100ms ease;
  transition: scale 100ms ease
}

.owl-carousel .owl-video-play-icon:hover {
  -webkit-transition: scale(1.3, 1.3);
  -moz-transition: scale(1.3, 1.3);
  -ms-transition: scale(1.3, 1.3);
  -o-transition: scale(1.3, 1.3);
  transition: scale(1.3, 1.3)
}

.owl-carousel .owl-video-playing .owl-video-play-icon, .owl-carousel .owl-video-playing .owl-video-tn {
  display: none
}

.owl-carousel .owl-video-tn {
  opacity: 0;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  -webkit-transition: opacity 400ms ease;
  -moz-transition: opacity 400ms ease;
  -ms-transition: opacity 400ms ease;
  -o-transition: opacity 400ms ease;
  transition: opacity 400ms ease
}

.owl-carousel .owl-video-frame {
  position: relative;
  z-index: 1
}

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0
}

article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
  display: block
}

audio, canvas, progress, video {
  display: inline-block
}

audio:not([controls]) {
  display: none;
  height: 0
}

progress {
  vertical-align: baseline
}

template, [hidden] {
  display: none
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects
}

a:active, a:hover {
  outline-width: 0
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted
}

b, strong {
  font-weight: inherit
}

b, strong {
  font-weight: bolder
}

dfn {
  font-style: italic
}

h1 {
  font-size: 2em;
  margin: 0.67em 0
}

mark {
  background-color: #ff0;
  color: #000
}

small {
  font-size: 80%
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}

sub {
  bottom: -0.25em
}

sup {
  top: -0.5em
}

img {
  border-style: none
}

svg:not(:root) {
  overflow: hidden
}

code, kbd, pre, samp {
  font-family: monospace, monospace;
  font-size: 1em
}

figure {
  margin: 1em 40px
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible
}

button, input, optgroup, select, textarea {
  font: inherit;
  margin: 0
}

optgroup {
  font-weight: bold
}

button, input {
  overflow: visible
}

button, select {
  text-transform: none
}

button, html [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button
}

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0
}

button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal
}

textarea {
  overflow: auto
}

[type="checkbox"], [type="radio"] {
  box-sizing: border-box;
  padding: 0
}

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
  height: auto
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px
}

[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
  -webkit-appearance: none
}

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit
}

p {
  margin: 0 0 .75em;
  padding: 0
}

p:last-child {
  margin-bottom: 0
}

b, em {
  font-weight: normal
}

small {
  font-size: inherit
}

i, em {
  font-style: normal
}

figure, blockquote, fieldset {
  margin: 0;
  padding: 0;
  border: 0
}

ul, ol, dl, dd, dt {
  margin: 0;
  padding: 0;
  list-style: none outside none
}

h1, h2, h3, h4, h5, h6 {
  padding: 0;
  margin: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline
}

object, embed, audio, video, canvas, iframe, img, svg {
  vertical-align: bottom
}

input[type="text"], input[type="search"], input[type="email"], input[type="password"], textarea {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

textarea {
  resize: vertical
}

table {
  font-size: inherit;
  font: 100%
}

img {
  display: block;
  height: auto
}

*:focus {
  outline: 0
}

* {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: transparent
}

::-moz-selection {
  background: #ddd;
  color: #494952
}

::selection {
  background: #ddd;
  color: #494952
}

.masthead, .mastfoot, .pic, figure, img, [class*="btn"] {
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none
}

.mastbody {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -moz-font-feature-settings: "liga", "kern"
}

.bold {
  font-weight: 700
}

.t-overflow {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis
}

.t-underline {
  text-decoration: underline
}

a.t-underline {
  text-decoration: underline
}

.t-underliner a {
  text-decoration: underline
}

q:before {
  content: '“'
}

q:after {
  content: '”'
}

.clr-white {
  color: #f7f7f8
}

.clr-lightgray {
  color: #eee
}

.clr-midgray {
  color: #7d7d7d
}

.clr-silver {
  color: #dbdbdb
}

.clr-slate {
  color: #b8bdc0
}

.clr-midslateblue {
  color: #7e7e8f
}

.clr-slateblue {
  color: #494952
}

.clr-sky {
  color: #00b7ee
}

.clr-darkblue {
  color: #23232d
}

.clr-black {
  color: #000
}

.clr-milk {
  color: #e7e3da
}

.clr-sand {
  color: #daccb6
}

.bg-white {
  background-color: #f7f7f8
}

.bg-lightgray {
  background-color: #eee
}

.bg-midgray {
  background-color: #7d7d7d
}

.bg-silver {
  background-color: #dbdbdb
}

.bg-slate {
  background-color: #b8bdc0
}

.bg-midslateblue {
  background-color: #7e7e8f
}

.bg-slateblue {
  background-color: #494952
}

.bg-sky {
  background-color: #00b7ee
}

.bg-darkblue {
  background-color: #23232d
}

.bg-black {
  background-color: #000
}

.bg-milk {
  background-color: #e7e3da
}

.bg-sand {
  background-color: #daccb6
}

.bdr-white {
  border-color: #f7f7f8 !important
}

.bdr-black {
  border-color: #000 !important
}

.bdr-darkblue {
  border-color: #23232d !important
}

a, a:hover, a:active {
  color: inherit;
  text-decoration: none
}

.link-black {
  color: white
}

.link-black:hover, .link-black:active {
  color: #333
}

.link-white {
  color: white
}

.link-white:hover, .link-white:active {
  color: #eee
}

.link-sky {
  color: #00b7ee
}

.link-sky:hover, .link-sky:active {
  color: #0090bb
}

body {
  color: #000;
  font-size: 17px;
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;
  line-height: 1.5
}

.fs-base {
  font-size: 17px
}

.heading {
  margin-bottom: .5em;
  font-family: "Roboto Condensed";
  font-size: 2.764706em;
  line-height: 1
}

.maintitle {
  margin-bottom: 1em;
  font-size: 1.588235em;
  line-height: 1.2
}

@media (max-width: 1024px) {
  body, .fs-base {
    font-size: 16px
  }
}

@media (max-width: 640px) {
  .heading {
    font-size: 2.352941em
  }
}

@media (max-width: 520px) {
  body, .fs-base {
    font-size: 15px
  }
}

@media (max-width: 360px) {
  .heading {
    font-size: 2.235294em
  }

  body, .fs-base {
    font-size: 14px
  }
}

.fs-sm-3 {
  font-size: 77%
}

.fs-sm-1 {
  font-size: 93%
}

.fs-sm-2 {
  font-size: 85%
}

.fs-lg-1 {
  font-size: 108%
}

.fs-lg-2 {
  font-size: 116%
}

.fs-lg-3 {
  font-size: 123.1%
}

.fs-lg-4 {
  font-size: 131%
}

.fs-lg-5 {
  font-size: 138.5%
}

body {
  width: 100%;
  overflow-x: hidden;
  background-color: #f7f7f8
}

.mastbody {
  position: relative;
  overflow: hidden
}

.mastbody-inner {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  min-height: 400px;
  padding-bottom: 0.1px
}

.header-pc .mastbody-inner {
  padding-top: 72px
}

.constraint {
  max-width: 1020px;
  margin-left: auto;
  margin-right: auto
}

html.header-pc .masthead {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 100;
  height: 72px
}

html.header-pc .masthead-bg {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #23232d
}

html.header-pc .masthead-bg:before {
  content: '';
  position: absolute;
  z-index: -2;
  top: 50%;
  bottom: 0;
  left: 10px;
  right: 10px;
  -moz-border-radius: 100px / 10px;
  border-radius: 100px / 10px;
  -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3)
}

html.header-pc html.header-fixed .masthead-bg {
  background: #23232d;
  background: rgba(35, 35, 45, 0.94)
}

html.header-pc .masthead-inner {
  position: relative;
  height: 100%
}

html.header-pc .navbar {
  position: relative;
  z-index: 3;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  max-width: 1020px;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  white-space: nowrap
}

html.header-pc .navbar .mainitem {
  display: inline-block;
  vertical-align: top
}

html.header-pc .navbar .mainbtn {
  position: relative;
  display: block;
  height: 72px;
  line-height: 72px;
  padding-left: 36px;
  padding-right: 36px;
  background: transparent;
  color: white;
  font-size: 18px;
  font-family: "Roboto Condensed";
  -moz-transition: background 0.3s ease;
  -o-transition: background 0.3s ease;
  -webkit-transition: background 0.3s ease;
  transition: background 0.3s ease
}

@media (max-width: 1024px) {
  html.header-pc .navbar .mainbtn {
    padding-left: 30px;
    padding-right: 30px
  }
}

html.header-pc .navbar .mainbtn .txt {
  position: relative;
  z-index: 2;
  -moz-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease
}

html.header-pc .navbar .mainbtn .fa {
  display: none
}

html.header-pc .navbar .mainbtn .bg {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  margin: auto;
  width: 84%;
  height: 40px;
  border: 1px solid white;
  opacity: 0
}

html.no-opacity html.header-pc .navbar .mainbtn .bg {
  visibility: hidden
}

html.header-pc .navbar .mainbtn[href="javascript:;"] {
  cursor: default
}

html.header-pc .navbar .mainbtn:hover, html.header-pc .navbar .mainbtn:active {
  background: #2e2e38
}

html.header-pc .navbar .mainitem.active .mainbtn {
  background: #494952
}

html.header-pc .navbar .mainbtn:active .txt {
  opacity: .6;
  -moz-transition: none;
  -o-transition: none;
  -webkit-transition: none;
  transition: none
}

html.header-pc .navbar .mainitem.on .mainbtn .bg {
  opacity: 1;
  visibility: visible
}

html.header-pc .navbar .submenu {
  display: none !important
}

.navpanel {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 2;
  background: #494952
}

.navpanel .submenu {
  display: table !important;
  width: auto;
  margin-left: auto;
  margin-right: auto
}

.navpanel .subitem {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  background: transparent;
  -moz-transition: ease 0.2s;
  -o-transition: ease 0.2s;
  -webkit-transition: ease 0.2s;
  transition: ease 0.2s
}

.navpanel .subbtn {
  position: relative;
  display: block;
  padding: 20px 24px;
  background: transparent;
  color: white;
  font-size: 17px;
  font-family: "Roboto Condensed";
  line-height: 1.2
}

@media (max-width: 1024px) {
  .navpanel .subbtn {
    padding-left: 14px;
    padding-right: 14px
  }
}

.navpanel .subitem:hover, .navpanel .subitem:active {
  background: #36363f
}

html.header-mb .navpanel {
  display: none !important
}

html.submenu-open.header-pc .navpanel.in {
  display: block;
  -webkit-animation: submenu-in 0.2s ease;
  -moz-animation: submenu-in 0.2s ease;
  -o-animation: submenu-in 0.2s ease;
  animation: submenu-in 0.2s ease;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both
}

html.submenu-open.header-pc .navpanel.out {
  display: block;
  -webkit-animation: submenu-out 0.1s ease;
  -moz-animation: submenu-out 0.1s ease;
  -o-animation: submenu-out 0.1s ease;
  animation: submenu-out 0.1s ease;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both
}

@-moz-keyframes submenu-in {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@-webkit-keyframes submenu-in {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@-o-keyframes submenu-in {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@keyframes submenu-in {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@-moz-keyframes submenu-out {
  0% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

@-webkit-keyframes submenu-out {
  0% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

@-o-keyframes submenu-out {
  0% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

@keyframes submenu-out {
  0% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

html.header-mb .masthead {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 100;
  width: 48px;
  height: 48px
}

html.header-mb .masthead-inner {
  position: relative;
  height: 100%
}

html.header-mb .navbar {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  padding-top: 48px;
  overflow: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: #23232d;
  color: #f7f7f8;
  text-align: center;
  white-space: nowrap
}

html.header-mb .navbar .mainitem {
  display: block;
  margin-bottom: 2px;
  background: #23232d
}

html.header-mb .navbar .mainbtn {
  position: relative;
  display: block;
  line-height: 2.4em;
  padding-left: 1em;
  padding-right: 1em;
  color: white;
  font-size: 1.411765em;
  font-family: "Roboto Condensed"
}

html.header-mb .navbar .mainbtn .txt {
  position: relative;
  z-index: 2
}

html.header-mb .navbar .mainbtn .fa {
  display: block;
  position: absolute;
  right: 20px;
  top: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
  margin: auto;
  text-align: center;
  font-size: 20px
}

html.header-mb .navbar .mainbtn .bg {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  margin: auto;
  width: 100%;
  height: 100%;
  background: transparent
}

html.header-mb .navbar .mainbtn[href="javascript:;"] {
  cursor: default
}

html.header-mb .navbar .mainbtn:active .txt {
  opacity: .9
}

html.header-mb .navbar .mainitem.active .mainbtn .bg, html.header-mb .navbar .mainbtn:active .bg {
  background: rgba(0, 0, 0, 0.2)
}

html.header-mb .navbar .mainitem.active .mainbtn .fa {
  -moz-transform: rotate(90deg) translateX(3px);
  -ms-transform: rotate(90deg) translateX(3px);
  -webkit-transform: rotate(90deg) translateX(3px);
  transform: rotate(90deg) translateX(3px)
}

html.header-mb .navbar .submenu {
  display: none;
  background: #494952
}

html.header-mb .navbar .submenu .subbtn {
  position: relative;
  display: block;
  line-height: 2.2em;
  padding-left: 1em;
  padding-right: 1em;
  color: #f7f7f8;
  font-size: 1.294118em;
  font-family: "Roboto Condensed";
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis
}

html.header-mb .navbar .submenu .subbtn .txt br {
  display: none
}

html.header-mb .navbar .submenu .subbtn:active {
  background: rgba(0, 0, 0, 0.2)
}

html.header-mb .navbar .submenu .subbtn:active .txt {
  opacity: .9
}

html.header-mb.navbar-open .navbar.in {
  display: block;
  -webkit-animation: navbar-in 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  -moz-animation: navbar-in 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  -o-animation: navbar-in 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  animation: navbar-in 0.5s cubic-bezier(0.19, 1, 0.22, 1)
}

html.header-mb.navbar-open .navbar.out {
  display: block;
  -webkit-animation: navbar-out 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-animation: navbar-out 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -o-animation: navbar-out 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation: navbar-out 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955)
}

html.header-mb .navoverlay {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.4)
}

html.header-mb.navbar-open .navoverlay.in {
  display: block;
  -webkit-animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)
}

html.header-mb.navbar-open .navoverlay.out {
  display: block;
  -webkit-animation: fadeOut 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-animation: fadeOut 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-animation: fadeOut 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  animation: fadeOut 0.4s cubic-bezier(0.165, 0.84, 0.44, 1)
}

html.header-mb .navtoggle {
  position: fixed;
  right: 0;
  top: 0;
  width: 48px;
  height: 48px;
  background: #23232d;
  cursor: pointer
}

html.header-mb .navtoggle b {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 50%;
  height: 42%
}

html.header-mb .navtoggle i {
  float: left;
  position: absolute;
  top: 50%;
  left: 0px;
  width: 100%;
  height: 3px;
  overflow: hidden;
  border-radius: 1.5px;
  margin-top: -3px;
  background: white;
  opacity: 1;
  -moz-transform-origin: 50% 50% 50%;
  -ms-transform-origin: 50% 50% 50%;
  -webkit-transform-origin: 50% 50% 50%;
  transform-origin: 50% 50% 50%;
  -moz-transition: ease-out 0.1s;
  -o-transition: ease-out 0.1s;
  -webkit-transition: ease-out 0.1s;
  transition: ease-out 0.1s
}

html.header-mb .navtoggle i:first-child {
  top: 10%
}

html.header-mb .navtoggle i:last-child {
  top: 90%
}

html.header-mb .navtoggle:active i {
  opacity: .6
}

html.header-mb.navbar-open .navtoggle {
  background: transparent
}

html.header-mb.navbar-open .navtoggle i {
  opacity: 0;
  width: 110%;
  top: 50%;
  -moz-transition-duration: 0.05s;
  -o-transition-duration: 0.05s;
  -webkit-transition-duration: 0.05s;
  transition-duration: 0.05s
}

html.header-mb.navbar-open .navtoggle i:first-child, html.header-mb.navbar-open .navtoggle i:last-child {
  opacity: 1
}

html.header-mb.navbar-open .navtoggle i:first-child {
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg)
}

html.header-mb.navbar-open .navtoggle i:last-child {
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg)
}

@-moz-keyframes navbar-in {
  0% {
    -moz-transform: translateY(-110%);
    -ms-transform: translateY(-110%);
    -webkit-transform: translateY(-110%);
    transform: translateY(-110%)
  }

  100% {
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -webkit-transform: translateY(0%);
    transform: translateY(0%)
  }
}

@-webkit-keyframes navbar-in {
  0% {
    -moz-transform: translateY(-110%);
    -ms-transform: translateY(-110%);
    -webkit-transform: translateY(-110%);
    transform: translateY(-110%)
  }

  100% {
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -webkit-transform: translateY(0%);
    transform: translateY(0%)
  }
}

@-o-keyframes navbar-in {
  0% {
    -moz-transform: translateY(-110%);
    -ms-transform: translateY(-110%);
    -webkit-transform: translateY(-110%);
    transform: translateY(-110%)
  }

  100% {
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -webkit-transform: translateY(0%);
    transform: translateY(0%)
  }
}

@keyframes navbar-in {
  0% {
    -moz-transform: translateY(-110%);
    -ms-transform: translateY(-110%);
    -webkit-transform: translateY(-110%);
    transform: translateY(-110%)
  }

  100% {
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -webkit-transform: translateY(0%);
    transform: translateY(0%)
  }
}

@-moz-keyframes navbar-out {
  0% {
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -webkit-transform: translateY(0%);
    transform: translateY(0%)
  }

  100% {
    -moz-transform: translateY(-110%);
    -ms-transform: translateY(-110%);
    -webkit-transform: translateY(-110%);
    transform: translateY(-110%)
  }
}

@-webkit-keyframes navbar-out {
  0% {
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -webkit-transform: translateY(0%);
    transform: translateY(0%)
  }

  100% {
    -moz-transform: translateY(-110%);
    -ms-transform: translateY(-110%);
    -webkit-transform: translateY(-110%);
    transform: translateY(-110%)
  }
}

@-o-keyframes navbar-out {
  0% {
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -webkit-transform: translateY(0%);
    transform: translateY(0%)
  }

  100% {
    -moz-transform: translateY(-110%);
    -ms-transform: translateY(-110%);
    -webkit-transform: translateY(-110%);
    transform: translateY(-110%)
  }
}

@keyframes navbar-out {
  0% {
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -webkit-transform: translateY(0%);
    transform: translateY(0%)
  }

  100% {
    -moz-transform: translateY(-110%);
    -ms-transform: translateY(-110%);
    -webkit-transform: translateY(-110%);
    transform: translateY(-110%)
  }
}

.mastfoot {
  position: relative;
  background: #f7f7f8;
  box-shadow: 0 -1px 8px rgba(204, 204, 204, 0.5);
  padding: 1em 1em;
  text-align: center;
  color: #333
}

.mastfoot .copyright {
  font-size: 85%
}

#backtop {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: fixed;
  z-index: 90;
  right: 20px;
  bottom: -60px;
  width: 56px;
  height: 56px;
  overflow: hidden;
  line-height: 56px;
  border: 3px solid #23232d;
  background: #f7f7f8;
  background: rgba(247, 247, 248, 0.2);
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  color: #23232d;
  opacity: 0;
  cursor: pointer;
  -moz-transition: ease 0.3s;
  -o-transition: ease 0.3s;
  -webkit-transition: ease 0.3s;
  transition: ease 0.3s
}

#backtop .fa-arrow-up {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 28px;
  height: 28px;
  font-size: 28px
}

#backtop:hover, #backtop:active {
  background: #494952;
  border-color: #494952;
  color: white
}

html.leave-top #backtop {
  opacity: 1;
  bottom: 20px
}

html.header-mb #backtop {
  width: 48px;
  height: 48px;
  right: 5px
}

html.header-mb.leave-top #backtop {
  bottom: 45px
}

br.mb {
  display: none
}

@media (max-width: 640px) {
  br.mb {
    display: block
  }

  br.pc {
    display: none
  }
}

.at-c {
  text-align: center
}

.at-r {
  text-align: right
}

.at-l {
  text-align: left
}

.at-t {
  vertical-align: top
}

.at-b {
  vertical-align: bottom
}

.at-m {
  vertical-align: middle
}

.mg-b-0 {
  margin-bottom: 0 !important
}

.mg-b-1 {
  margin-bottom: 0.294118em
}

.mg-b-2 {
  margin-bottom: 0.588235em
}

.mg-b-3 {
  margin-bottom: 0.882353em
}

.mg-b-4 {
  margin-bottom: 1.176471em
}

.mg-b-5 {
  margin-bottom: 1.764706em
}

.mg-b-6 {
  margin-bottom: 2.352941em
}

.mg-b-7 {
  margin-bottom: 2.941176em
}

.mg-b-8 {
  margin-bottom: 3.529412em
}

.mg-t-0 {
  margin-top: 0 !important
}

.mg-t-1 {
  margin-top: 0.294118em
}

.mg-t-2 {
  margin-top: 0.588235em
}

.mg-t-3 {
  margin-top: 0.882353em
}

.mg-t-4 {
  margin-top: 1.176471em
}

.mg-t-5 {
  margin-top: 1.764706em
}

.mg-t-6 {
  margin-top: 2.352941em
}

.mg-t-7 {
  margin-top: 2.941176em
}

.mg-t-8 {
  margin-top: 3.529412em
}

.mg-r-0 {
  margin-right: 0 !important
}

.mg-r-1 {
  margin-right: 0.294118em
}

.mg-r-2 {
  margin-right: 0.588235em
}

.mg-r-3 {
  margin-right: 0.882353em
}

.mg-r-4 {
  margin-right: 1.176471em
}

.mg-r-5 {
  margin-right: 1.764706em
}

.mg-r-6 {
  margin-right: 2.352941em
}

.mg-r-7 {
  margin-right: 2.941176em
}

.mg-r-8 {
  margin-right: 3.529412em
}

.mg-l-0 {
  margin-left: 0 !important
}

.mg-l-1 {
  margin-left: 0.294118em
}

.mg-l-2 {
  margin-left: 0.588235em
}

.mg-l-3 {
  margin-left: 0.882353em
}

.mg-l-4 {
  margin-left: 1.176471em
}

.mg-l-5 {
  margin-left: 1.764706em
}

.mg-l-6 {
  margin-left: 2.352941em
}

.mg-l-7 {
  margin-left: 2.941176em
}

.mg-l-8 {
  margin-left: 3.529412em
}

.pd-b-0 {
  padding-bottom: 0 !important
}

.pd-b-1 {
  padding-bottom: 0.294118em
}

.pd-b-2 {
  padding-bottom: 0.588235em
}

.pd-b-3 {
  padding-bottom: 0.882353em
}

.pd-b-4 {
  padding-bottom: 1.176471em
}

.pd-b-5 {
  padding-bottom: 1.764706em
}

.pd-b-6 {
  padding-bottom: 2.352941em
}

.pd-b-7 {
  padding-bottom: 2.941176em
}

.pd-t-0 {
  padding-top: 0 !important
}

.pd-t-1 {
  padding-top: 0.294118em
}

.pd-t-2 {
  padding-top: 0.588235em
}

.pd-t-3 {
  padding-top: 0.882353em
}

.pd-t-4 {
  padding-top: 1.176471em
}

.pd-t-5 {
  padding-top: 1.764706em
}

.pd-t-6 {
  padding-top: 2.352941em
}

.pd-t-7 {
  padding-top: 2.941176em
}

.pd-r-0 {
  padding-right: 0 !important
}

.pd-r-1 {
  padding-right: 0.294118em
}

.pd-r-2 {
  padding-right: 0.588235em
}

.pd-r-3 {
  padding-right: 0.882353em
}

.pd-r-4 {
  padding-right: 1.176471em
}

.pd-r-5 {
  padding-right: 1.764706em
}

.pd-r-6 {
  padding-right: 2.352941em
}

.pd-r-7 {
  padding-right: 2.941176em
}

.pd-l-0 {
  padding-left: 0 !important
}

.pd-l-1 {
  padding-left: 0.294118em
}

.pd-l-2 {
  padding-left: 0.588235em
}

.pd-l-3 {
  padding-left: 0.882353em
}

.pd-l-4 {
  padding-left: 1.176471em
}

.pd-l-5 {
  padding-left: 1.764706em
}

.pd-l-6 {
  padding-left: 2.352941em
}

.pd-l-7 {
  padding-left: 2.941176em
}

@-moz-keyframes fadeIn {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@-moz-keyframes fadeOut {
  0% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

@-o-keyframes fadeOut {
  0% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

.hero {
  background-color: rgba(0, 0, 0, 0.075);
  overflow: hidden
}

.hero .hero-inner {
  position: relative;
  display: block;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto
}

.hero .hero-inner .parallax {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 28%
}

.hero .hero-inner .parallax img {
  position: absolute;
  left: 0;
  top: 0
}

.hero .hero-inner img {
  width: 100%
}

@media (min-width: 641px) {
  html.no-mobile .hero .hero-inner .parallax {
    -webkit-animation: fadeIn 2s ease 1s;
    -moz-animation: fadeIn 2s ease 1s;
    -o-animation: fadeIn 2s ease 1s;
    animation: fadeIn 2s ease 1s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both
  }
}

@media (max-width: 640px) {
  .hero .hero-inner .parallax {
    height: auto;
    padding-top: 0 !important
  }

  .hero .hero-inner .parallax img {
    position: relative;
    left: auto;
    top: auto !important
  }
}

@media (max-width: 800px) {
  .hero .hero-inner {
    left: 50%;
    width: 800px;
    margin-left: -400px
  }
}

@media (max-width: 768px) {
  .hero .hero-inner {
    width: 768px;
    margin-left: -384px
  }
}

@media (max-width: 640px) {
  .hero .hero-inner {
    width: 640px;
    margin-left: -320px
  }
}

@media (max-width: 520px) {
  .hero .hero-inner {
    width: 520px;
    margin-left: -260px
  }
}

.heroslider {
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto
}

.heroslider .item {
  position: absolute;
  left: 0;
  bottom: 101%
}

.heroslider .item:first-child {
  position: relative;
  z-index: 2;
  left: auto;
  bottom: auto
}

.heroslider .owl-item .item {
  position: relative;
  z-index: inherit;
  left: auto;
  bottom: auto
}

.heroslider .owl-dots {
  position: absolute;
  bottom: 1.176471em;
  left: 0;
  right: 0;
  text-align: center
}

.heroslider .owl-dot {
  display: inline-block;
  vertical-align: middle;
  width: 14px;
  height: 14px;
  line-height: 14px;
  margin-left: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: #f7f7f8;
  opacity: .9
}

html.no-mobile .heroslider .owl-dot {
  -moz-transition: 0.2s;
  -o-transition: 0.2s;
  -webkit-transition: 0.2s;
  transition: 0.2s
}

.heroslider .owl-dot.active {
  background: #fa0087;
  opacity: 1
}

.heroslider .owl-dot:hover, .heroslider .owl-active {
  background: white
}

.videoslider {
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto
}

.videoslider .item {
  position: absolute;
  left: 0;
  bottom: 101%
}

.videoslider .item:first-child {
  position: relative;
  z-index: 2;
  left: auto;
  bottom: auto
}

.videoslider .owl-item .item {
  position: relative;
  z-index: inherit;
  left: auto;
  bottom: auto
}

.videoslider .owl-dots {
  position: absolute;
  bottom: 1.176471em;
  left: 0;
  right: 0;
  text-align: center
}

.videoslider .owl-dot {
  display: inline-block;
  vertical-align: middle;
  width: 14px;
  height: 14px;
  line-height: 14px;
  margin-left: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: #f7f7f8;
  opacity: .9
}

html.no-mobile .videoslider .owl-dot {
  -moz-transition: 0.2s;
  -o-transition: 0.2s;
  -webkit-transition: 0.2s;
  transition: 0.2s
}

.videoslider .owl-dot.active {
  background: #fa0087;
  opacity: 1
}

.videoslider .owl-dot:hover, .videoslider .owl-active {
  background: white
}

@media (max-width: 640px) {
  .heroslider .owl-dots {
    bottom: 8px
  }

  .heroslider .owl-dot {
    width: 8px;
    height: 8px;
    margin-left: 3px;
    margin-right: 3px
  }

  .videoslider .owl-dots {
    bottom: 8px
  }

  .videoslider .owl-dot {
    width: 8px;
    height: 8px;
    margin-left: 3px;
    margin-right: 3px
  }
}

.lead {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 3px solid #23232d;
  width: 89.705882%;
  padding: 4.901961% 0.980392%;
  margin: 4.117647em auto
}

.lead .heading {
  letter-spacing: -0.02em
}

@media (max-width: 640px) {
  .lead {
    width: 94%;
    margin-top: 2.058824em;
    margin-bottom: 2.058824em;
    padding-left: 3%;
    padding-right: 3%
  }
}

.sectrow {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 4.411765em
}

@media (max-width: 640px) {
  .sectrow {
    margin-bottom: 2.941176em
  }
}

.sectrow .text {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

.sectrow .text[class*="bg-"] {
  padding: 1.764706em 2.45098%
}

@media (max-width: 640px) {
  .sectrow .text[class*="bg-"] {
    padding: 1.764706em 5%
  }
}

.sectrow .text p, .sectrow-text-p {
  font-size: 108%;
  line-height: 1.6
}

.sectrow .text .notes {
  font-size: 85%;
  line-height: 1.4;
  opacity: .7
}

.explist {
  padding-top: 2.941176em;
  padding-bottom: 1.764706em;
  border-top: 1px solid #c9c9c9
}

.explist .heading {
  text-align: center
}

.explist .list {
  max-width: 1020px;
  margin-left: auto;
  margin-right: auto;
  font-size: 0;
  text-align: center;
}

.explist .list .item {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  vertical-align: top;
  width: 33.33%;
  padding-left: 2px;
  padding-right: 2px;
  margin-bottom: 0.882353em
}

.explist .list .item .inner {
  display: block;
  padding: 15px 0;
  background: transparent;
  text-align: center
}

html.no-mobile .explist .list .item .inner {
  -moz-transition: background 0.5s ease;
  -o-transition: background 0.5s ease;
  -webkit-transition: background 0.5s ease;
  transition: background 0.5s ease
}

.explist .list .item .icon {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.588235em
}

.explist .list .item .title {
  position: relative;
  top: 0;
  margin-bottom: .2em;
  font-size: 1.529412em;
  font-family: "Roboto Condensed";
  line-height: 1.1
}

html.no-mobile .explist .list .item .title {
  -moz-transition: color 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: color 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-transition: color 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  transition: color 0.5s cubic-bezier(0.77, 0, 0.175, 1)
}

.explist .list .item .title br {
  display: none
}

.explist .list .item .descr {
  font-size: 93%;
  color: #7d7d7d
}

html.no-mobile .explist .list .item .descr {
  -moz-transition: color 0.4s cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: color 0.4s cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-transition: color 0.4s cubic-bezier(0.77, 0, 0.175, 1);
  transition: color 0.4s cubic-bezier(0.77, 0, 0.175, 1)
}

.explist .list .item .inner:hover, .explist .list .item .inner:active {
  background: #eee
}

.explist .list .item .inner:hover .title, .explist .list .item .inner:active .title {
  color: #494952
}

.explist .list .item .inner:hover .descr, .explist .list .item .inner:active .descr {
  color: #494952
}

@media (max-width: 800px) {
  .explist .list .item {
    width: 50%
  }
}

@media (max-width: 640px) {
  .explist .heading {
    width: 94%;
    margin-left: auto;
    margin-right: auto
  }

  .explist .list .item .inner {
    padding-top: 2%;
    padding-bottom: 2%
  }

  .explist .list .item .title br {
    display: block
  }
}

@media (max-width: 432px) {
  .explist .list .item {
    display: block;
    width: auto;
    padding-left: 10px;
    padding-right: 10px;
    margin: 0
  }

  .explist .list .item .inner {
    padding-left: 110px;
    text-align: left
  }

  .explist .list .item .inner:before, .explist .list .item .inner:after {
    content: "";
    display: table
  }

  .explist .list .item .inner:after {
    clear: both
  }

  .explist .list .item .inner {
    zoom: 1
  }

  .explist .list .item .icon {
    float: left;
    width: 86px;
    margin-left: -100px
  }

  .explist .list .item .title {
    margin-top: .6em
  }

  .explist .list .item .title br {
    display: none
  }
}

.monitorlist .list {
  max-width: 1020px;
  margin-left: auto;
  margin-right: auto;
  font-size: 0
}

.monitorlist .item {
  display: inline-block;
  vertical-align: top;
  width: 25%;
  margin-bottom: 2.352941em
}

.monitorlist .item .inner {
  display: block;
  margin-left: 8px;
  margin-right: 8px
}

.monitorlist .item .pic {
  margin-bottom: 7px
}

.monitorlist .item .pic img {
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto
}

.monitorlist .item .meta {
  min-height: 5.294118em;
  padding-left: 7%;
  padding-bottom: 0.588235em;
  font-family: "Roboto Condensed";
  line-height: 1.2
}

.monitorlist .item .meta .name {
  margin-bottom: .3em;
  font-weight: 700;
  font-size: 108%
}

.monitorlist .item .meta .specs {
  font-size: 85%;
  opacity: .6
}

html.no-mobile .monitorlist .item .meta .specs {
  -moz-transition: opacity 0.2s ease;
  -o-transition: opacity 0.2s ease;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease
}

.monitorlist .item .btn-more {
  display: block;
  width: 5.294118em;
  line-height: 1.6em;
  border-radius: 0.764706em;
  margin-left: auto;
  margin-right: auto;
  background: #999;
  font-size: 85%;
  color: white;
  text-align: center;
  white-space: nowrap
}

html.no-mobile .monitorlist .item .btn-more {
  -moz-transition: background 0.2s ease;
  -o-transition: background 0.2s ease;
  -webkit-transition: background 0.2s ease;
  transition: background 0.2s ease
}

.monitorlist .item .btn-more .fa {
  margin-left: .3em
}

html.no-mobile .monitorlist .item .inner:hover .meta .specs, .monitorlist .item .inner:active .meta .specs {
  opacity: 1
}

html.no-mobile .monitorlist .item .inner:hover .btn-more, .monitorlist .item .inner:active .btn-more {
  background: #23232d
}

.monitorlist .item .inner:active {
  opacity: .92
}

html.no-mobile .monitorlist .list.clr-white .item .inner:hover .meta .specs, .monitorlist .list.clr-white .item .inner:active .meta .specs {
  color: #f7f7f8
}

html.no-mobile .monitorlist .list.clr-white .item .inner:hover .btn-more, .monitorlist .list.clr-white .item .inner:active .btn-more {
  background: #7d7d7d
}

@media (max-width: 960px) {
  .monitorlist .item {
    width: 33.33%
  }
}

@media (max-width: 640px) {
  .monitorlist .list {
    width: 84%
  }

  .monitorlist .item {
    width: 50%;
    margin-bottom: 1.176471em
  }

  .monitorlist .item .inner {
    margin-left: 0;
    margin-right: 0
  }
}

@media (max-width: 520px) {
  .monitorlist .list {
    width: 90%
  }
}

@media (max-width: 432px) {
  .monitorlist .list {
    width: 98%
  }

  .monitorlist .item {
    margin-bottom: 0.294118em
  }

  .monitorlist .item .pic {
    margin-bottom: 0
  }

  .monitorlist .item .meta {
    line-height: 1.1
  }

  .monitorlist .item .meta {
    min-height: 0;
    padding-bottom: 0
  }

  .monitorlist .item .btn-more {
    display: none
  }
}

.prodfinder {
  padding-top: 3.529412em;
  background: white
}

.prodfinder .heading {
  text-align: center
}

.prodfinder .menu {
  position: relative;
  text-align: center;
  font-family: "Roboto Condensed"
}

.prodfinder .menu .category {
  max-width: 1020px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1em
}

.prodfinder .menu .specs {
  padding: 1.2em 10px;
  background: #7d7d7d;
  box-shadow: inset 0 0 2em rgba(0, 0, 0, 0.1);
  -moz-transition: background 0.2s;
  -o-transition: background 0.2s;
  -webkit-transition: background 0.2s;
  transition: background 0.2s
}

.prodfinder .menu .specs .row {
  display: none
}

.prodfinder .menu .specs .row.on {
  display: block;
  -webkit-animation: fadeIn 0.3s ease;
  -moz-animation: fadeIn 0.3s ease;
  -o-animation: fadeIn 0.3s ease;
  animation: fadeIn 0.3s ease
}

.prodfinder .menu .specs .item {
  display: inline-block;
  vertical-align: top;
  margin: .5em 10px
}

.prodfinder .menu .specs .btn {
  display: block;
  line-height: 2.352941em;
  border: 1px solid white;
  border-radius: 1.176471em;
  padding: 0 2em;
  background: transparent;
  cursor: pointer;
  color: white
}

html.no-mobile .prodfinder .menu .specs .btn {
  -moz-transition: ease 0.2s;
  -o-transition: ease 0.2s;
  -webkit-transition: ease 0.2s;
  transition: ease 0.2s
}

.prodfinder .menu .specs .btn:hover {
  background: #dbdbdb;
  border-color: #dbdbdb;
  color: #23232d
}

.prodfinder .menu .specs .btn:active {
  background: #c9c9c9;
  border-color: #dbdbdb;
  color: #23232d
}

.prodfinder .menu .specs .item.on .btn {
  background: white;
  color: #23232d
}

html.prodfinder-menu-fixed .prodfinder .menu {
  padding-bottom: 5.882353em
}

html.prodfinder-menu-fixed .prodfinder .menu .specs {
  position: fixed;
  left: 0;
  right: 0;
  top: 72px;
  z-index: 20;
  background: rgba(68, 68, 68, 0.88)
}

html.prodfinder-menu-fixed.header-mb .prodfinder .menu .specs {
  top: 0
}

.prodfinder .monitorlist {
  padding-top: 2.352941em;
  -moz-transition: height 0.5s ease-out;
  -o-transition: height 0.5s ease-out;
  -webkit-transition: height 0.5s ease-out;
  transition: height 0.5s ease-out
}

.prodfinder .monitorlist .list {
  min-height: 600px
}

.prodfinder .monitorlist .item.off {
  display: none
}

.prodfinder .monitorlist .item.show {
  -webkit-animation: fadeIn 0.5s ease;
  -moz-animation: fadeIn 0.5s ease;
  -o-animation: fadeIn 0.5s ease;
  animation: fadeIn 0.5s ease
}

@media (max-width: 640px) {
  .prodfinder .heading {
    width: 92%;
    margin-left: auto;
    margin-right: auto
  }

  .prodfinder .menu .specs .item {
    margin: .35em 4px
  }

  .prodfinder .menu .specs .item .btn {
    padding: 0 1em
  }

  .prodfinder .menu .category {
    width: 92%
  }
}

@media (max-width: 432px) {
  .prodfinder .menu .specs .item .btn {
    line-height: 1.764706em;
    font-size: 93%
  }
}

.tabmenu {
  display: table;
  width: 100%;
  border-spacing: 20px 0;
  table-layout: fixed;
  margin-left: auto;
  margin-right: auto
}

.tabmenu .btn {
  display: table-cell;
  vertical-align: middle;
  width: auto;
  height: 3.058824em;
  border: 1px solid #23232d;
  padding: 0 3px;
  background: transparent;
  text-align: center;
  cursor: pointer
}

html.no-mobile .tabmenu .btn {
  -moz-transition: ease 0.2s;
  -o-transition: ease 0.2s;
  -webkit-transition: ease 0.2s;
  transition: ease 0.2s
}

.tabmenu .btn .txt {
  line-height: 1;
  font-size: 1.058824em
}

html.no-mobile .tabmenu .btn:hover {
  background: rgba(126, 126, 143, 0.2);
  border-color: #7e7e8f
}

html.no-mobile .tabmenu .btn:active {
  background: #494952;
  border-color: #494952;
  color: white
}

html.mobile .tabmenu .btn:active {
  background: rgba(126, 126, 143, 0.2)
}

.tabmenu .btn.on {
  background: #23232d !important;
  color: #fff !important;
  cursor: default
}

@media (max-width: 768px) {
  .tabmenu {
    table-layout: auto;
    border-spacing: 15px 0
  }

  .tabmenu .btn .txt {
    font-size: 0.941176em
  }
}

@media (max-width: 640px) {
  .tabmenu {
    border-spacing: 10px 0
  }
}

@media (max-width: 520px) {
  .tabmenu {
    border-spacing: 4px 0
  }

  .tabmenu .btn {
    height: 3.294118em
  }
}

@media (max-width: 432px) {
  .tabmenu:not(.no-onerow) {
    display: block;
    width: 88%;
    margin-left: auto;
    margin-right: auto
  }

  .tabmenu:not(.no-onerow) .btn {
    display: block;
    width: auto;
    margin-bottom: 4px;
    height: 2.235294em;
    line-height: 2.235294em
  }

  .tabmenu:not(.no-onerow) .btn .txt {
    line-height: inherit
  }

  .tabmenu .btn {
    height: 2.823529em
  }
}

@media (max-width: 360px) {
  .tabmenu:not(.no-onerow) {
    width: 100%
  }
}

.relatedmonitor {
  padding-top: 1.176471em;
  margin-bottom: 2.941176em
}

.relatedmonitor .heading {
  margin-bottom: 0;
  text-align: center
}

.relatedmonitor .heading .bg {
  display: inline-block;
  padding: 0 .75em
}

.relatedmonitor .monitorlist .list {
  margin-top: -23px;
  padding-top: 46px;
  border: 1px solid black;
  padding-left: 10px;
  padding-right: 10px
}

@media (max-width: 1280px) {
  .relatedmonitor {
    padding-left: 15px;
    padding-right: 15px
  }
}

@media (max-width: 640px) {
  .relatedmonitor {
    padding-left: 0;
    padding-right: 0
  }

  .relatedmonitor .heading {
    width: 92%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: .5em
  }

  .relatedmonitor .heading .bg {
    padding: 0
  }

  .relatedmonitor .monitorlist .list {
    margin-top: 0;
    padding: 0;
    border: none
  }
}

.footmenu {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-spacing: 1px;
  background: #f7f7f8
}

.footmenu .btn {
  display: table-cell;
  width: auto;
  padding: 1.1em 5px;
  background: #23232d;
  color: white;
  font-size: 1.529412em;
  font-family: "Roboto Condensed";
  line-height: 1;
  vertical-align: middle;
  text-align: center
}

html.no-mobile .footmenu .btn {
  -moz-transition: ease 0.2s;
  -o-transition: ease 0.2s;
  -webkit-transition: ease 0.2s;
  transition: ease 0.2s
}

.footmenu .btn:hover {
  background: #39394a
}

.footmenu .btn:active {
  background: black
}

@media (max-width: 640px) {
  .footmenu .btn {
    font-size: 1.176471em
  }
}

.bg-paper {
  background: url("../img/ui/bg-paper.png")
}

.vs {
  padding-left: 2.941176%;
  padding-right: 2.941176%
}

.vs:before, .vs:after {
  content: "";
  display: table
}

.vs:after {
  clear: both
}

.vs {
  zoom: 1
}

.vs-item {
  position: relative;
  width: 50%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

.vs-item.right {
  float: right;
  padding-left: 3px
}

.vs-item.left {
  float: left;
  padding-right: 3px
}

.vs-pic {
  position: relative
}

.vs-pic .img {
  width: 100%
}

.vs-title {
  margin-top: .5em;
  text-align: center;
  font-family: "Roboto Condensed"
}

@media (max-width: 520px) {
  .vs {
    padding-left: 0;
    padding-right: 0
  }
}

@media (max-width: 432px) {
  .vs-item {
    float: none !important;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.882353em;
    padding-left: 0 !important;
    padding-right: 0 !important
  }
}

@media (max-width: 360px) {
  .vs-item {
    width: auto
  }
}

.sv {
  width: auto
}

.sv-inner:before, .sv-inner:after {
  content: "";
  display: table
}

.sv-inner:after {
  clear: both
}

.sv-inner {
  zoom: 1
}

.sv-item {
  position: relative;
  width: 50%
}

.sv-item.left {
  float: left
}

.sv-item.right {
  float: right
}

.sv-pic {
  position: relative
}

.sv-pic .img {
  width: 100%
}

@media (max-width: 640px) {
  .sv-pic .img {
    width: 120%
  }

  .sv-item.left .sv-pic .img {
    margin-left: -20%
  }
}

@media (max-width: 520px) {
  .sv-pic .img {
    width: 130%
  }

  .sv-item.left .sv-pic .img {
    margin-left: -30%
  }
}

@media (max-width: 432px) {
  .sv-pic .img {
    width: 140%
  }

  .sv-item.left .sv-pic .img {
    margin-left: -40%
  }
}

@media (max-width: 360px) {
  .sv-pic .img {
    width: 150%
  }

  .sv-item.left .sv-pic .img {
    margin-left: -50%
  }
}

.img+.legend {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  bottom: .75em;
  right: 0;
  font-size: 85%;
  font-weight: 700;
  opacity: .8;
  text-align: center;
  line-height: 1.3
}

#videoplayer {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 199999;
  width: 100%;
  height: 100%;
  background: black;
  background: rgba(0, 0, 0, 0.6);
  animation: videoplayer-in 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.36s;
  animation-fill-mode: backwards
}

#videoplayer iframe.player {
  position: relative;
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
  padding: 0;
  vertical-align: bottom;
  background: black
}

#videoplayer .close {
  position: absolute;
  right: 0;
  top: 0;
  width: 52px;
  height: 52px;
  overflow: hidden;
  opacity: .6;
  transition: opacity .15s;
  color: white;
  cursor: pointer
}

#videoplayer .close:hover {
  opacity: 1
}

#videoplayer .close:active {
  opacity: .82
}

#videoplayer .close:focus {
  opacity: .82;
  outline: none
}

#videoplayer .close:before {
  display: block;
  width: 52px;
  height: 52px;
  line-height: 52px;
  font-size: 52px;
  content: "\00D7";
  font-family: 'arial', sans-serif;
  text-align: center;
  vertical-align: middle;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased
}

@keyframes videoplayer-in {
  0% {
    transform: scale(1.1)
  }

  100% {
    transform: scale(1)
  }
}

.discoverlist {
  padding-top: 3.529412em;
  background: white
}

.discoverlist .heading {
  text-align: center
}

.discoverlist .list {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  max-width: 1020px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 4.705882em
}

.discoverlist .list:before, .discoverlist .list:after {
  content: "";
  display: table
}

.discoverlist .list:after {
  clear: both
}

.discoverlist .list {
  zoom: 1
}

.discoverlist .list .item {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  width: 33.33%;
  padding-left: 10px;
  padding-right: 10px
}

.discoverlist .list .item .inner {
  position: relative;
  display: block
}

.discoverlist .list .item .pic img {
  width: 100%
}

html.no-mobile .discoverlist .list .item .pic {
  -moz-transition: opacity 0.5s ease;
  -o-transition: opacity 0.5s ease;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease
}

.discoverlist .list .item .title {
  position: absolute;
  bottom: -30px;
  right: 0;
  display: block;
  width: 88%;
  height: 60px;
  line-height: 60px;
  font-size: 1.529412em;
  font-family: "Roboto Condensed";
  text-align: center;
  white-space: nowrap;
  overflow: hidden
}

.discoverlist .list .item .title .fa {
  margin-left: .3em
}

.discoverlist .list .item .title b {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin-left: 0%;
  background: white
}

html.no-mobile .discoverlist .list .item .title b {
  -moz-transition: cubic-bezier(0.19, 1, 0.22, 1) 0.3s;
  -o-transition: cubic-bezier(0.19, 1, 0.22, 1) 0.3s;
  -webkit-transition: cubic-bezier(0.19, 1, 0.22, 1) 0.3s;
  transition: cubic-bezier(0.19, 1, 0.22, 1) 0.3s
}

.discoverlist .list .item .title.ov {
  left: 0;
  right: auto;
  bottom: 20%
}

.discoverlist .list .item .title.ov b {
  margin-left: -101%;
  background: #23232d;
  background: rgba(35, 35, 45, 0.85);
  color: white
}

html.no-mobile .discoverlist .list .item .title.ov b {
  -moz-transition: cubic-bezier(0.19, 1, 0.22, 1) 0.4s;
  -o-transition: cubic-bezier(0.19, 1, 0.22, 1) 0.4s;
  -webkit-transition: cubic-bezier(0.19, 1, 0.22, 1) 0.4s;
  transition: cubic-bezier(0.19, 1, 0.22, 1) 0.4s
}

html.no-mobile .discoverlist .list .item .inner:hover .pic, html.no-mobile .discoverlist .list .item .inner:active .pic {
  background: #23232d;
  opacity: .6
}

html.no-mobile .discoverlist .list .item .inner:hover .title.ov b, html.no-mobile .discoverlist .list .item .inner:active .title.ov b {
  margin-left: 0%
}

html.no-mobile .discoverlist .list .item .inner:hover .title.nm b, html.no-mobile .discoverlist .list .item .inner:active .title.nm b {
  margin-left: 101%
}

html.mobile .discoverlist .list .item .inner:active .pic {
  background: #23232d;
  opacity: .9
}

html.mobile .discoverlist .list .item .inner:active .title.nm b {
  background: #f7f7f8
}

@media (max-width: 960px) {
  .discoverlist .list .item .title {
    font-size: 1.294118em
  }
}

@media (max-width: 800px) {
  .discoverlist .list {
    padding-left: 15px;
    padding-right: 15px
  }

  .discoverlist .list .item {
    padding-left: 5px;
    padding-right: 5px
  }

  .discoverlist .list .item .title {
    height: 48px;
    line-height: 48px;
    font-size: 1.058824em
  }
}

@media (max-width: 640px) {
  .discoverlist .heading {
    width: 92%;
    margin-left: auto;
    margin-right: auto
  }

  .discoverlist .list .item .title {
    width: 100%;
    font-size: 1em
  }
}

@media (max-width: 520px) {
  .discoverlist {
    padding-top: 1.764706em
  }

  .discoverlist .list {
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 0.588235em
  }

  .discoverlist .list .item {
    float: none;
    width: auto;
    margin-bottom: 2.941176em;
    padding-left: 0;
    padding-right: 0
  }

  .discoverlist .list .item .title {
    width: 85%;
    font-size: 1.529412em
  }

  .discoverlist .list .item .pic {
    position: relative;
    height: 0;
    padding-top: 56%;
    overflow: hidden
  }

  .discoverlist .list .item .pic img {
    position: absolute;
    left: 0;
    top: 0
  }
}

@media (max-width: 432px) {
  .discoverlist .list {
    padding-left: 20px;
    padding-right: 20px
  }
}

@media (max-width: 360px) {
  .discoverlist .list {
    padding-left: 10px;
    padding-right: 10px
  }
}

.page-home .explist {
  padding-top: 3.529412em;
  padding-bottom: 0;
  border-top: 0;
  background: white
}

.page-home .prolist {
  padding-bottom: 1.764706em;
  background: white
}

.page-graphic .row1 {
  position: relative;
  z-index: 3
}

.page-graphic .row1:before, .page-graphic .row1:after {
  content: "";
  display: table
}

.page-graphic .row1:after {
  clear: both
}

.page-graphic .row1 {
  zoom: 1
}

.page-graphic .row1 .pic {
  float: left;
  width: 53.431373%
}

.page-graphic .row1 .pic img {
  width: 100%
}

.page-graphic .row1 .text {
  float: right;
  width: 41.666667%;
  margin-right: 1.470588%
}

@media (max-width: 640px) {
  .page-graphic .row1 .pic {
    float: none;
    width: auto;
    margin-bottom: 1.764706em
  }

  .page-graphic .row1 .text {
    float: none;
    width: 92%;
    margin-left: auto;
    margin-right: auto
  }
}

.page-graphic .row2 {
  position: relative;
  z-index: 2;
  top: -5.588235em
}

.page-graphic .row2:before, .page-graphic .row2:after {
  content: "";
  display: table
}

.page-graphic .row2:after {
  clear: both
}

.page-graphic .row2 {
  zoom: 1
}

.page-graphic .row2 .pic {
  float: right;
  width: 53.921569%
}

.page-graphic .row2 .pic img {
  width: 100%
}

.page-graphic .row2 .text {
  float: left;
  width: 41.666667%;
  margin-left: 2.45098%;
  padding-top: 5.882353%
}

@media (max-width: 960px) {
  .page-graphic .row2 {
    top: auto
  }

  .page-graphic .row2 .text {
    padding-top: 0
  }
}

@media (max-width: 640px) {
  .page-graphic .row2 .pic {
    float: none;
    width: auto;
    margin-bottom: 1.764706em
  }

  .page-graphic .row2 .text {
    float: none;
    width: 92%;
    margin-left: auto;
    margin-right: auto
  }
}

.page-graphic .row3 .text {
  width: 80.392157%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 2.352941em
}

@media (max-width: 640px) {
  .page-graphic .row3 .text {
    width: 92%;
    padding-top: 1.764706em
  }
}

.page-graphic .row4 {
  position: relative;
  width: 117.647059%;
  margin-left: -8.823529%
}

.page-graphic .row4 .pic {
  width: 100%
}

.page-graphic .row4 .pic img {
  width: 100%
}

.page-graphic .row4 .text {
  position: absolute;
  top: 0;
  left: 10%;
  padding-top: 8.333333%;
  width: 31.666667%
}

@media (max-width: 1024px) {
  .page-graphic .row4 {
    margin-left: 0
  }
}

@media (max-width: 960px) {
  .page-graphic .row4 .text {
    left: 5%;
    padding-top: 6.666667%;
    width: 37.5%
  }
}

@media (max-width: 768px) {
  .page-graphic .row4 .text {
    left: 2.5%;
    padding-top: 4.166667%;
    width: 39.166667%
  }
}

@media (max-width: 640px) {
  .page-graphic .row4 {
    width: auto
  }

  .page-graphic .row4 .pic {
    width: 120%;
    margin-left: -10%;
    margin-bottom: 1.764706em
  }

  .page-graphic .row4 .text {
    position: relative;
    left: auto;
    top: auto;
    width: 92%;
    padding-top: 0;
    margin-left: auto;
    margin-right: auto
  }
}

.page-photography .bg-sand .maintitle.clr-white {
  text-shadow: 0.5px 0 0 rgba(247, 247, 248, 0.7), 0.5px 0 0 rgba(247, 247, 248, 0.7)
}

.page-photography .row1:before, .page-photography .row1:after {
  content: "";
  display: table
}

.page-photography .row1:after {
  clear: both
}

.page-photography .row1 {
  zoom: 1
}

.page-photography .row1 .pic {
  float: right;
  width: 52.941176%;
  margin-right: 1.960784%
}

.page-photography .row1 .pic img {
  width: 100%
}

.page-photography .row1 .text {
  float: left;
  width: 41.176471%;
  margin-left: 1.470588%
}

@media (max-width: 640px) {
  .page-photography .row1 .pic {
    float: none;
    width: auto;
    margin-right: auto;
    margin-bottom: 1.764706em
  }

  .page-photography .row1 .text {
    float: none;
    width: 92%;
    margin-left: auto;
    margin-right: auto
  }
}

.page-photography .row2 .text {
  width: 80.392157%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 2.352941em
}

@media (max-width: 640px) {
  .page-photography .row2 .text {
    width: 92%;
    padding-top: 1.764706em
  }
}

.page-photography .row3 {
  width: 122.058824%;
  margin-left: -6.372549%
}

.page-photography .row3:before, .page-photography .row3:after {
  content: "";
  display: table
}

.page-photography .row3:after {
  clear: both
}

.page-photography .row3 {
  zoom: 1
}

.page-photography .row3 .pic {
  position: relative;
  float: left;
  width: 55.02008%;
  margin-top: 5.882353em
}

.page-photography .row3 .pic img {
  width: 100%
}

.page-photography .row3 .text {
  position: relative;
  float: right;
  width: 44.97992%;
  left: -13.654618%
}

@media (max-width: 640px) {
  .page-photography .row3 {
    width: auto;
    margin-left: auto
  }

  .page-photography .row3 .pic {
    float: none;
    width: auto;
    margin-top: 0
  }

  .page-photography .row3 .text {
    left: auto;
    float: none;
    width: auto
  }
}

.page-photography .row4 {
  width: 141.960784%;
  margin-left: 2.941176%
}

.page-photography .row4:before, .page-photography .row4:after {
  content: "";
  display: table
}

.page-photography .row4:after {
  clear: both
}

.page-photography .row4 {
  zoom: 1
}

.page-photography .row4 .pic {
  position: relative;
  float: right;
  width: 48.895028%;
  left: -30.939227%
}

.page-photography .row4 .pic img {
  width: 100%
}

.page-photography .row4 .text {
  position: relative;
  float: left;
  width: 51.104972%;
  margin-top: 22.352941em
}

@media (max-width: 960px) {
  .page-photography .row4 .text {
    margin-top: 17.647059em
  }
}

@media (max-width: 640px) {
  .page-photography .row4 {
    width: auto;
    margin-left: auto
  }

  .page-photography .row4 .pic {
    left: auto;
    float: none;
    width: auto
  }

  .page-photography .row4 .text {
    float: none;
    width: auto;
    margin-top: 0
  }
}

.page-video .row1:before, .page-video .row1:after {
  content: "";
  display: table
}

.page-video .row1:after {
  clear: both
}

.page-video .row1 {
  zoom: 1
}

.page-video .row1 .pic {
  float: left;
  width: 51.960784%
}

.page-video .row1 .pic img {
  width: 100%
}

.page-video .row1 .text {
  float: right;
  width: 42.156863%;
  margin-right: 3.431373%
}

@media (max-width: 640px) {
  .page-video .row1 .pic {
    float: none;
    width: auto;
    margin-bottom: 1.764706em
  }

  .page-video .row1 .text {
    float: none;
    width: 92%;
    margin-left: auto;
    margin-right: auto
  }
}

.page-video .row2 {
  position: relative
}

.page-video .row2 .pic {
  position: absolute;
  right: 0;
  top: 4.411765em;
  width: 58.823529%
}

.page-video .row2 .pic img {
  width: 100%
}

.page-video .row2 .text {
  position: relative;
  width: 42.156863%;
  margin-left: 0.980392%
}

@media (max-width: 960px) {
  .page-video .row2 .text {
    width: 47.058824%
  }
}

@media (max-width: 640px) {
  .page-video .row2 .pic {
    position: relative;
    right: auto;
    top: auto;
    width: auto
  }

  .page-video .row2 .text {
    width: 100%;
    margin-left: auto;
    margin-right: auto
  }
}

.page-video .scenario+.constraint {
  position: relative;
  z-index: 2
}

.page-video .row3 {
  position: relative;
  margin-top: -11.764706em
}

.page-video .row3 .text {
  width: 55.392157%;
  margin-left: auto;
  margin-right: 2.941176%
}

@media (max-width: 1280px) {
  .page-video .row3 {
    margin-top: -5.882353em
  }

  .page-video .row3 .text {
    width: 60.784314%
  }
}

@media (max-width: 640px) {
  .page-video .row3 {
    margin-top: 0
  }

  .page-video .row3 .text {
    width: 100%;
    margin: 0 auto
  }
}

.page-video .row4 {
  position: relative;
  margin-top: -10.588235em
}

.page-video .row4 .text {
  width: 60.294118%;
  margin-left: 8.823529%
}

@media (max-width: 1366px) {
  .page-video .row4 {
    margin-top: -7.058824em
  }

  .page-video .row4 .text {
    width: 64.705882%
  }
}

@media (max-width: 1280px) {
  .page-video .row4 {
    margin-top: -5.882353em
  }
}

@media (max-width: 640px) {
  .page-video .row4 {
    margin-top: 0
  }

  .page-video .row4 .text {
    width: 100%;
    margin: 0 auto
  }
}

.exp-heading {
  padding-top: 3.529412em
}

.exp-heading .heading {
  margin-bottom: 1em
}

@media (max-width: 640px) {
  .exp-heading {
    width: 92%;
    margin-left: auto;
    margin-right: auto
  }
}

.page-calibration .row1 .text {
  width: 80.392157%;
  margin-left: auto;
  margin-right: auto
}

@media (max-width: 640px) {
  .page-calibration .row1 .text {
    width: 92%
  }
}

.page-calibration .row2 {
  width: 104.803922%;
  margin-left: 0.490196%
}

.page-calibration .row2:before, .page-calibration .row2:after {
  content: "";
  display: table
}

.page-calibration .row2:after {
  clear: both
}

.page-calibration .row2 {
  zoom: 1
}

.page-calibration .row2 .pic {
  position: relative;
  float: left;
  width: 57.904584%;
  margin-top: 5.882353em
}

.page-calibration .row2 .pic img {
  width: 100%
}

.page-calibration .row2 .text {
  position: relative;
  float: right;
  width: 42.095416%;
  left: -5.612722%
}

@media (max-width: 640px) {
  .page-calibration .row2 {
    width: auto;
    margin-left: auto;
    margin-bottom: 0
  }

  .page-calibration .row2 .pic {
    float: none;
    width: auto;
    margin-top: 0
  }

  .page-calibration .row2 .text {
    left: auto;
    float: none;
    width: auto
  }
}

.page-calibration .row3 .sectrow {
  margin-bottom: 0;
  padding-top: 5.882353em;
  padding-bottom: 4.705882em
}

.page-calibration .row3 .sectrow .text {
  width: 80.392157%;
  margin-left: auto;
  margin-right: auto
}

.page-calibration .row3 .sectrow .pic {
  width: 51.470588%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 5.882353%
}

.page-calibration .row3 .sectrow .pic img {
  width: 100%
}

@media (max-width: 640px) {
  .page-calibration .row3 .sectrow {
    padding-top: 3.529412em;
    padding-bottom: 3.529412em
  }

  .page-calibration .row3 .sectrow .text {
    width: 92%
  }

  .page-calibration .row3 .sectrow .pic {
    width: 92%
  }
}

.page-calibration .row4 .sectrow {
  padding-top: 4.705882em;
  padding-bottom: 4.705882em
}

.page-calibration .row4 .sectrow:before, .page-calibration .row4 .sectrow:after {
  content: "";
  display: table
}

.page-calibration .row4 .sectrow:after {
  clear: both
}

.page-calibration .row4 .sectrow {
  zoom: 1
}

.page-calibration .row4 .sectrow .pic {
  float: left;
  width: 54.313725%;
  margin-left: 0.980392%;
  padding-top: 1.960784%
}

.page-calibration .row4 .sectrow .pic img {
  width: 100%
}

.page-calibration .row4 .sectrow .text {
  float: right;
  width: 36.27451%;
  margin-right: 2.45098%
}

@media (max-width: 768px) {
  .page-calibration .row4 .sectrow .pic {
    float: none;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0;
    margin-bottom: 0.588235em
  }

  .page-calibration .row4 .sectrow .text {
    float: none;
    width: 80%;
    margin-left: auto;
    margin-right: auto
  }
}

@media (max-width: 640px) {
  .page-calibration .row4 .sectrow {
    padding-top: 3.529412em;
    padding-bottom: 3.529412em
  }

  .page-calibration .row4 .sectrow .pic {
    width: 92%
  }

  .page-calibration .row4 .sectrow .text {
    width: 92%
  }
}

.page-calibration .row5 {
  width: 105.098039%;
  margin-left: 1.960784%
}

.page-calibration .row5:before, .page-calibration .row5:after {
  content: "";
  display: table
}

.page-calibration .row5:after {
  clear: both
}

.page-calibration .row5 {
  zoom: 1;
  margin-bottom: 3em;
}

.page-calibration .row5 .pic {
  position: relative;
  float: right;
  width: 58.022388%;
  left: -6.716418%;
  margin-top: 4.705882em
}

.page-calibration .row5 .pic img {
  width: 100%
}

.page-calibration .row5 .text {
  position: relative;
  float: left;
  width: 41.977612%
}

.page-calibration .row5 .compatibles {
  position: absolute;
  top: 100%;
  left: 8.888889%;
  padding-top: 5.555556%;
  width: 60.666667%
}

.page-calibration .row5 .compatibles img {
  width: 100%
}

@media (max-width: 768px) {
  .page-calibration .row5 .text {
    width: 46.641791%
  }

  .page-calibration .row5 .pic {
    width: 53.358209%
  }
}

@media (max-width: 640px) {
  .page-calibration .row5 {
    width: auto;
    margin-left: auto;
    padding-bottom: 10.588235em
  }

  .page-calibration .row5 .pic {
    left: auto;
    float: none;
    width: auto;
    margin-top: 0
  }

  .page-calibration .row5 .text {
    float: none;
    width: auto
  }

  .page-calibration .row5 .compatibles {
    left: 0;
    width: 100%
  }

  .page-calibration .row5 .compatibles img {
    width: 70%;
    max-width: 273px;
    margin-left: auto;
    margin-right: auto
  }
}

.page-calibration .row6 {
  text-align: center;
  margin: 0 auto 5em auto;
      padding-top : 20px;
}

.page-calibration .row6 h2 {
  font-weight: 600;
}

.page-calibration .row6 .select_box .notice {
  border: 1px solid;
  width: 400px;
  margin: 0 auto;
  padding: 5px 0;
  /* font-weight: 600; */
  cursor: pointer;
}

.page-calibration .row6 .select_box .notice i{
  margin-left:9px;
}

.page-calibration .row6 .select_box .select_option {
  border: 1px solid;
  width: 372px;
  margin: 0 auto;
  text-align: left;
  padding: 14px;
  border-top: 0;
  display: none;
  transition: ease 0.2s;
}
.page-calibration .row6 .select_box .select_option li:hover{
    background: #eee;
}
.page-calibration .row6 .select_box .select_option li{
    position: relative;
}
.page-calibration .row6 .select_box .select_option li a{
    position: relative;
    width:100%;
    display:block;
}
.page-calibration .show-in-mobile{
  display: none;
}
@media (max-width: 520px) {
  .page-calibration .show-in-mobile{
    display: block;
  }
  .page-calibration .row6 .select_box .notice {
    width: 100%;
  }

  .page-calibration .row6 .select_box .select_option {
    width: calc( 100% - 28px);
  }
}


.page-truecolor .row1:before, .page-truecolor .row1:after {
  content: "";
  display: table
}

.page-truecolor .row1:after {
  clear: both
}

.page-truecolor .row1 {
  zoom: 1
}

.page-truecolor .row1 .pic {
  float: left;
  width: 52.941176%
}

.page-truecolor .row1 .pic img {
  width: 133.888889%;
  height: auto;
  margin-left: -33.888889%
}

.page-truecolor .row1 .text {
  float: right;
  width: 43.137255%;
  margin-right: 1.470588%
}

@media (max-width: 768px) {
  .page-truecolor .row1 .pic {
    float: none;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.764706em
  }

  .page-truecolor .row1 .text {
    float: none;
    width: 92%;
    margin-left: auto;
    margin-right: auto
  }
}

@media (max-width: 640px) {
  .page-truecolor .row1 .pic {
    width: 82%
  }
}

@media (max-width: 432px) {
  .page-truecolor .row1 .pic {
    width: 92%
  }
}

.page-truecolor .row2 .text1 {
  width: 80.392157%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 2.352941em;
  margin-bottom: 2.352941em
}

.page-truecolor .row2 .gamut {
  margin-bottom: 2.352941em
}

.page-truecolor .row2 .gamut img {
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto
}

.page-truecolor .row2 .vs {
  margin-bottom: 2.352941em
}

.page-truecolor .row2 .text2 {
  width: 80.392157%;
  margin-left: auto;
  margin-right: auto
}

@media (max-width: 640px) {
  .page-truecolor .row2 .text1 {
    width: 92%;
    padding-top: 1.764706em;
    margin-bottom: 1.176471em
  }

  .page-truecolor .row2 .gamut {
    margin-bottom: 1.176471em
  }

  .page-truecolor .row2 .gamut img {
    width: 50%;
    max-width: 179px
  }

  .page-truecolor .row2 .vs {
    margin-bottom: 1.176471em
  }

  .page-truecolor .row2 .text2 {
    width: 92%
  }
}

.magnify {
  position: relative;
  display: inline-block
}

.magnify .magnify-lens {
  position: absolute;
  left: 51.15304%;
  top: 26.119403%;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  -moz-box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
  cursor: none;
  z-index: 20;
  background-repeat: no-repeat;
  background-position: -530px -203px
}

@media (max-width: 640px) {
  .magnify .magnify-lens {
    width: 120px;
    height: 120px
  }
}

.magnify .magnify-lens.loading {
  background: #333 !important;
  opacity: 0.8
}

.magnify .magnify-lens.loading:after {
  position: absolute;
  top: 45%;
  left: 0;
  width: 100%;
  color: #fff;
  content: 'Loading...';
  font: italic normal 16px/1 Calibri, sans-serif;
  text-align: center;
  text-shadow: 0 0 2px rgba(51, 51, 51, 0.8);
  text-transform: none
}

.page-resolution .row1 .text1 {
  width: 85.294118%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.352941em
}

.page-resolution .row1 .vs {
  margin-bottom: 2.352941em
}

.page-resolution .row1 .text2 {
  width: 63.72549%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.352941em
}

.page-resolution .row1 .morespace {
  padding-left: 2.941176%;
  padding-right: 2.941176%
}

.page-resolution .row1 .morespace img {
  width: 100%
}

@media (max-width: 640px) {
  .page-resolution .row1 .text1 {
    width: 92%;
    margin-bottom: 1.176471em
  }

  .page-resolution .row1 .vs {
    margin-bottom: 1.176471em
  }

  .page-resolution .row1 .text2 {
    width: 92%;
    margin-bottom: 1.176471em
  }
}

@media (max-width: 520px) {
  .page-resolution .row1 .morespace {
    padding-left: 0;
    padding-right: 0
  }
}

.page-resolution .row2 {
  text-align: center
}

.page-resolution .row2:before, .page-resolution .row2:after {
  content: "";
  display: table
}

.page-resolution .row2:after {
  clear: both
}

.page-resolution .row2 {
  zoom: 1
}

.page-resolution .row2 .sm, .page-resolution .row2 .lg {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 50%;
  float: left;
  padding-right: 1.960784%;
  padding-left: 1.960784%
}

.page-resolution .row2 .item {
  margin-bottom: 0.588235em
}

.page-resolution .row2 .item .pic img {
  width: 100%
}

.page-resolution .row2 .item .title {
  height: 5.294118em;
  margin-top: .5em;
  padding-left: 15.686275%;
  padding-right: 7.843137%;
  font-family: "Roboto Condensed";
  line-height: 1.4
}

@media (max-width: 960px) {
  .page-resolution .row2 .item .title {
    padding-left: 7.843137%;
    padding-right: 0
  }
}

@media (max-width: 520px) {
  .page-resolution .row2 .sm {
    margin-bottom: 2.352941em
  }

  .page-resolution .row2 .sm, .page-resolution .row2 .lg {
    float: none;
    width: 80%;
    padding-left: 0;
    padding-right: 2%;
    margin-left: auto;
    margin-right: auto
  }

  .page-resolution .row2 .item {
    margin-bottom: 1.176471em
  }

  .page-resolution .row2 .item .title {
    height: auto;
    padding: 0
  }
}

@media (max-width: 432px) {
  .page-resolution .row2 .sm, .page-resolution .row2 .lg {
    width: 92%
  }
}

.page-multitasking .row1 .text {
  width: 90.196078%;
  margin-left: auto;
  margin-right: auto
}

@media (max-width: 640px) {
  .page-multitasking .row1 .text {
    width: 92%
  }
}

.page-multitasking .row2 .sectrow {
  padding-top: 3.529412em;
  padding-bottom: 1.764706em
}

.page-multitasking .row2 .sectrow:before, .page-multitasking .row2 .sectrow:after {
  content: "";
  display: table
}

.page-multitasking .row2 .sectrow:after {
  clear: both
}

.page-multitasking .row2 .sectrow {
  zoom: 1
}

.page-multitasking .row2 .sectrow .pic {
  float: left;
  width: 51.470588%;
  margin-left: 2.941176%
}

.page-multitasking .row2 .sectrow .pic img {
  width: 100%
}

.page-multitasking .row2 .sectrow .text {
  float: right;
  width: 39.215686%;
  margin-right: 2.941176%
}

.page-multitasking .row2 .sectrow .modes img {
  max-width: 100%;
  height: auto
}

@media (max-width: 768px) {
  .page-multitasking .row2 .sectrow .pic {
    float: none;
    width: 72%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.588235em
  }

  .page-multitasking .row2 .sectrow .text {
    float: none;
    width: 80%;
    margin-left: auto;
    margin-right: auto
  }
}

@media (max-width: 640px) {
  .page-multitasking .row2 .sectrow {
    padding-top: 2.941176em;
    padding-bottom: 1.470588em
  }

  .page-multitasking .row2 .sectrow .pic {
    width: 92%
  }

  .page-multitasking .row2 .sectrow .text {
    width: 92%
  }
}

.page-multitasking .row3:before, .page-multitasking .row3:after {
  content: "";
  display: table
}

.page-multitasking .row3:after {
  clear: both
}

.page-multitasking .row3 {
  zoom: 1
}

.page-multitasking .row3 .pic {
  float: right;
  width: 51.470588%;
  margin-right: 2.941176%
}

.page-multitasking .row3 .pic img {
  width: 100%
}

.page-multitasking .row3 .text {
  float: left;
  width: 39.215686%;
  margin-left: 2.941176%
}

.page-multitasking .row3 .modes img {
  max-width: 100%;
  height: auto
}

@media (max-width: 768px) {
  .page-multitasking .row3 .pic {
    float: none;
    width: 72%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.588235em
  }

  .page-multitasking .row3 .text {
    float: none;
    width: 80%;
    margin-left: auto;
    margin-right: auto
  }
}

@media (max-width: 640px) {
  .page-multitasking .row3 .pic {
    width: 92%
  }

  .page-multitasking .row3 .text {
    width: 92%
  }
}

.page-eyecare .row1 .text {
  width: 77.45098%;
  margin-left: auto;
  margin-right: auto
}

@media (max-width: 640px) {
  .page-eyecare .row1 .text {
    width: 92%
  }
}

.page-eyecare .row2 .maintitle {
  width: 92%;
  margin-left: auto;
  margin-right: auto
}

.page-eyecare .row2 .menu {
  width: 77.45098%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.176471em;
  font-weight: 700
}

.page-eyecare .row2 .monitor {
  position: relative;
  width: 77.156863%;
  margin-left: auto;
  margin-right: auto
}

.page-eyecare .row2 .monitor .device {
  width: 100%;
  height: 0;
  padding-top: 67.217281%
}

.page-eyecare .row2 .monitor .bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%
}

.page-eyecare .row2 .monitor .screens {
  position: absolute;
  left: 1.270648%;
  top: 2.079395%;
  width: 97.585769%;
  height: 82.230624%;
  overflow: hidden
}

.page-eyecare .row2 .monitor .screens .item {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  visibility: hidden
}

.page-eyecare .row2 .monitor .screens .item:first-child {
  visibility: visible
}

@media (max-width: 640px) {
  .page-eyecare .row2 .monitor {
    width: 92%
  }

  .page-eyecare .row2 .menu {
    width: 92%
  }
}

.page-eyecare .row3 .sv {
  width: 117.647059%;
  margin-left: -8.823529%
}

.page-eyecare .row3 .text {
  width: 77.45098%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 2.352941em
}

.page-eyecare .row3 .certified {
  margin-left: auto;
  margin-right: auto
}

@media (max-width: 1024px) {
  .page-eyecare .row3 .sv {
    width: auto;
    margin-left: 0
  }
}

@media (max-width: 640px) {
  .page-eyecare .row3 .text {
    width: 92%
  }
}

.page-eyecare .row4 .text {
  width: 77.45098%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3.235294em
}

.page-eyecare .row4 .modes {
  width: 88.235294%;
  margin-left: auto;
  margin-right: auto
}

.page-eyecare .row4 .modes:before, .page-eyecare .row4 .modes:after {
  content: "";
  display: table
}

.page-eyecare .row4 .modes:after {
  clear: both
}

.page-eyecare .row4 .modes {
  zoom: 1
}

.page-eyecare .row4 .modes .item {
  width: 25%;
  float: left;
  text-align: center
}

.page-eyecare .row4 .modes .item:nth-child(2) {
  position: relative;
  left: 1em
}

.page-eyecare .row4 .modes .pic {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.470588em;
  max-width: 100%
}

.page-eyecare .row4 .modes .title {
  line-height: 1.3
}

@media (max-width: 640px) {
  .page-eyecare .row4 .text {
    width: 92%
  }
}

@media (max-width: 520px) {
  .page-eyecare .row4 .modes {
    width: 92%
  }

  .page-eyecare .row4 .modes .item {
    width: 50%;
    margin-bottom: 1.470588em
  }

  .page-eyecare .row4 .modes .item:nth-child(2) {
    left: auto
  }

  .page-eyecare .row4 .modes .item:nth-child(2n+1) {
    clear: left
  }
}

@-moz-keyframes quickfit-screen-blink {
  0%, 10% {
    background: black
  }

  100% {
    background: transparent
  }
}

@-webkit-keyframes quickfit-screen-blink {
  0%, 10% {
    background: black
  }

  100% {
    background: transparent
  }
}

@-o-keyframes quickfit-screen-blink {
  0%, 10% {
    background: black
  }

  100% {
    background: transparent
  }
}

@keyframes quickfit-screen-blink {
  0%, 10% {
    background: black
  }

  100% {
    background: transparent
  }
}

.page-usability .row1 .text {
  width: 76.470588%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.764706em
}

.page-usability .row1 .monitor {
  position: relative;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.176471em
}

.page-usability .row1 .monitor .device {
  width: 100%;
  height: 0;
  padding-top: 41.666667%
}

.page-usability .row1 .monitor .bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%
}

.page-usability .row1 .monitor .screens {
  position: absolute;
  left: 25.098039%;
  top: 10.352941%;
  width: 45.294118%;
  height: 61.176471%;
  overflow: hidden;
  background: transparent
}

.page-usability .row1 .monitor .screens .item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  visibility: hidden
}

.page-usability .row1 .monitor .screens .item:first-child {
  visibility: visible
}

.page-usability .row1 .monitor .screens.blink {
  -webkit-animation: quickfit-screen-blink 2s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-animation: quickfit-screen-blink 2s cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-animation: quickfit-screen-blink 2s cubic-bezier(0.165, 0.84, 0.44, 1);
  animation: quickfit-screen-blink 2s cubic-bezier(0.165, 0.84, 0.44, 1)
}

@media (max-width: 640px) {
  .page-usability .row1 .text {
    width: 92%
  }

  .page-usability .row1 .monitor {
    width: 160%;
    margin-left: -26%
  }

  .page-usability .row1 .menu {
    width: 92%;
    margin-left: auto;
    margin-right: auto
  }
}

.page-usability .row2 .text {
  width: 76.470588%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.764706em
}

.page-usability .row2 .compares {
  position: relative;
  width: 91.372549%;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.176471em;
  background: black
}

.page-usability .row2 .compares .list {
  position: relative
}

.page-usability .row2 .compares .list .item {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  visibility: hidden
}

.page-usability .row2 .compares .list .item:first-child {
  visibility: visible;
  position: relative
}

.page-usability .row2 .compares .legend-left, .page-usability .row2 .compares .legend-right {
  position: absolute;
  bottom: 0.705882em;
  z-index: 5;
  padding: 0 .6em;
  background: #23232d;
  color: white;
  font-weight: 700;
  font-size: 1.294118em;
  line-height: 1.764706em
}

.page-usability .row2 .compares .legend-left {
  left: 0.705882em
}

.page-usability .row2 .compares .legend-right {
  right: 0.705882em
}

.page-usability .row2 .menu {
  width: 95.294118%;
  margin-left: auto;
  margin-right: auto
}

@media (max-width: 640px) {
  .page-usability .row2 .text {
    width: 92%
  }

  .page-usability .row2 .compares {
    width: auto
  }

  .page-usability .row2 .menu {
    width: 92%;
    margin-left: auto;
    margin-right: auto
  }
}

.page-usability .row3 .pic {
  position: relative;
  margin-bottom: 1.764706em
}

.page-usability .row3 .pic .bg {
  width: 100%
}

.page-usability .row3 .pic .menu {
  position: absolute;
  top: 0;
  right: 4.411765%;
  padding-top: 5.588235%;
  width: 38.137255%
}

.page-usability .row3 .pic .menu img {
  width: 100%
}

.page-usability .row3 .text {
  width: 80.392157%;
  margin-left: auto;
  margin-right: auto
}

@media (max-width: 640px) {
  .page-usability .row3 .pic {
    width: 160%;
    margin-left: -40%
  }

  .page-usability .row3 .pic .menu {
    right: 14%
  }

  .page-usability .row3 .text {
    width: 92%
  }
}

.page-usability .row4 {
  overflow: hidden;
  margin-bottom: 2.352941em
}

.page-usability .row4 .sectrow {
  position: relative;
  padding-top: 6.470588em;
  padding-bottom: 6.470588em;
  margin-bottom: 0
}

.page-usability .row4 .sectrow .pic {
  position: absolute;
  top: 0;
  left: 47.058824%
}

.page-usability .row4 .sectrow .pic img {
  height: 100%;
  width: auto
}

.page-usability .row4 .sectrow .text {
  position: relative;
  width: 50.980392%;
  margin-left: 3.921569%
}

@media (max-width: 640px) {
  .page-usability .row4 .sectrow {
    padding-top: 0;
    padding-bottom: 2.941176em
  }

  .page-usability .row4 .sectrow .pic {
    position: relative;
    left: auto;
    top: auto;
    width: 140%
  }

  .page-usability .row4 .sectrow .pic img {
    width: 100%;
    height: auto
  }

  .page-usability .row4 .sectrow .text {
    width: 92%;
    margin-left: auto;
    margin-right: auto
  }
}

.prolist {
  padding-top: 2.941176em
}

.prolist .heading {
  margin-bottom: 1em;
  text-align: center
}

.prolist .video {
  display: block;
  position: relative;
  background: #23232d
}

.prolist .video .preview {
  opacity: 1
}

.prolist .video .icon-play {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  /* bottom: 15%; */
  bottom: 50%;
  margin-bottom: -47.5px;
  top: auto;
  width: 94px;
  height: 94px;
  background: url("../img/ui/icon-play.png") 50% 50% no-repeat;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  cursor: pointer;
  opacity: .7
}

html.no-mobile .prolist .video .preview, html.no-mobile .prolist .video .icon-play {
  -moz-transition: opacity 0.5s ease;
  -o-transition: opacity 0.5s ease;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease
}

html.no-mobile .prolist .video:hover .preview, .prolist .video:active .preview {
  opacity: .8
}

html.no-mobile .prolist .video:hover .icon-play, .prolist .video:active .icon-play {
  opacity: 1
}

.prolist .list {
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto
}

.prolist .list:before, .prolist .list:after {
  content: "";
  display: table
}

.prolist .list:after {
  clear: both
}

.prolist .list {
  zoom: 1
}

.prolist .list .item {
  width: 25%;
  overflow: hidden;
  float: left;
  background: #494952;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none
}

.prolist .list .item:nth-child(odd) {
  background: #55555f
}

.prolist .list .inner {
  display: block;
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 100%
}

.prolist .list .pic {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%
}

.prolist .list .text {
  opacity: 0;
  -moz-transform: scale(1.1, 1.1);
  -ms-transform: scale(1.1, 1.1);
  -webkit-transform: scale(1.1, 1.1);
  transform: scale(1.1, 1.1);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #23232d;
  background: rgba(0, 0, 0, 0.6);
  text-align: center;
  color: white;
  font-family: "Roboto Condensed"
}

html.no-opacity .prolist .list .text {
  visibility: hidden
}

.prolist .list .text .title {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  display: block;
  padding-bottom: 45%;
  padding-left: 5px;
  padding-right: 5px
}

.prolist .list .text .title .expert {
  display: block;
  margin-bottom: .5em;
  font-size: 1.176471em;
  line-height: 1.1
}

.prolist .list .text .title .name {
  font-size: 2.235294em;
  line-height: .96
}

.prolist .list .text .btn-more {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8.333333%;
  margin-left: auto;
  margin-right: auto;
  width: 6.818182em;
  line-height: 1.529412em;
  border: 1px solid white;
  -moz-border-radius: 1.529412em;
  -webkit-border-radius: 1.529412em;
  border-radius: 1.529412em;
  font-size: 1.294118em
}

html.no-mobile .prolist .list .pic, html.no-mobile .prolist .list .text {
  -moz-transition: cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -o-transition: cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -webkit-transition: cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  transition: cubic-bezier(0.77, 0, 0.175, 1) 0.3s
}

html.mobile .prolist .list .pic, html.mobile .prolist .list .text {
  -moz-transition-duration: 0s;
  -o-transition-duration: 0s;
  -webkit-transition-duration: 0s;
  transition-duration: 0s;
  -moz-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s
}

html.no-mobile .prolist .list a.inner:hover .text, .prolist .list a.inner:active .text {
  visibility: visible;
  opacity: 1;
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1)
}

html.no-mobile .prolist .list a.inner:hover .pic, .prolist .list a.inner:active .pic {
  -moz-transform: scale(1.1, 1.1);
  -ms-transform: scale(1.1, 1.1);
  -webkit-transform: scale(1.1, 1.1);
  transform: scale(1.1, 1.1)
}

@media (max-width: 1024px) {
  .prolist .list .item .text {
    font-size: 75%
  }

  .prolist .video .icon-play {
    width: 80px;
    height: 80px;
    margin-bottom: -40px;
  }
}

@media (max-width: 800px) {
  .prolist .list .item {
    width: 50%
  }

  .prolist .list .item.dummy {
    display: none
  }

  .prolist .video .icon-play {
    width: 64px;
    height: 64px;
    margin-bottom: -32px;
  }
}

@media (max-width: 640px) {
  .prolist .heading {
    width: 92%;
    margin-left: auto;
    margin-right: auto
  }
}

@media (max-width: 520px) {
  .prolist .video .icon-play {
    width: 52px;
    height: 52px;
    margin-bottom: -26px;
  }
}

.page-pros-view {
  position: relative
}

.page-pros-view .sectrow .text {
  width: 77.45098%;
  margin-left: auto;
  margin-right: auto
}

.page-pros-view .sectrow .pic img {
  width: 100%
}

@media (max-width: 640px) {
  .page-pros-view .sectrow .text {
    width: 92%
  }
}

.page-pros-view q {
  font-style: italic
}

.pros-heading {
  position: relative;
  margin-top: -2.941176em;
  margin-bottom: 3.529412em;
  text-align: center
}

.pros-heading .inner {
  display: inline-block
}

.pros-heading .txt {
  display: block;
  width: 100%;
  overflow: hidden;
  padding: 0.705882em 0;
  margin-left: auto;
  margin-right: auto;
  background: #23232d;
  color: white
}

@media (min-width: 641px) {
  .pros-heading .txt {
    -webkit-animation: pros-heading 2s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
    -moz-animation: pros-heading 2s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
    -o-animation: pros-heading 2s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
    animation: pros-heading 2s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both
  }
}

.pros-heading .title {
  display: block;
  margin-bottom: .1em;
  padding-left: 1.944444em;
  padding-right: 1.944444em;
  font-size: 1.058824em;
  line-height: 1.2;
  white-space: nowrap
}

.pros-heading .name {
  display: block;
  font-size: 2.764706em;
  font-family: "Roboto Condensed";
  padding-left: 0.744681em;
  padding-right: 0.744681em;
  line-height: 1;
  white-space: nowrap
}

@media (max-width: 640px) {
  .pros-heading {
    margin-bottom: 2.352941em
  }

  .pros-heading .txt .title {
    padding-left: 15px;
    padding-right: 15px;
    letter-spacing: -.01em
  }

  .pros-heading .txt .name {
    padding-left: 15px;
    padding-right: 15px;
    letter-spacing: -0.03em;
    font-size: 2.470588em
  }
}

@-moz-keyframes pros-heading {
  0% {
    width: 150%;
    margin-left: -25%;
    opacity: 0;
    background: #494952
  }

  100% {
    width: 100%;
    margin-left: 0%;
    opacity: 1;
    background: #23232d
  }
}

@-webkit-keyframes pros-heading {
  0% {
    width: 150%;
    margin-left: -25%;
    opacity: 0;
    background: #494952
  }

  100% {
    width: 100%;
    margin-left: 0%;
    opacity: 1;
    background: #23232d
  }
}

@-o-keyframes pros-heading {
  0% {
    width: 150%;
    margin-left: -25%;
    opacity: 0;
    background: #494952
  }

  100% {
    width: 100%;
    margin-left: 0%;
    opacity: 1;
    background: #23232d
  }
}

@keyframes pros-heading {
  0% {
    width: 150%;
    margin-left: -25%;
    opacity: 0;
    background: #494952
  }

  100% {
    width: 100%;
    margin-left: 0%;
    opacity: 1;
    background: #23232d
  }
}

.pros-seeother {
  text-align: center
}

.pros-seeother .btn {
  display: inline-block;
  line-height: 3.764706em;
  padding: 0 3.235294em;
  background: #7e7e8f;
  color: white;
  font-family: "Roboto Condensed"
}

html.no-mobile .pros-seeother .btn {
  -moz-transition: ease 0.3s;
  -o-transition: ease 0.3s;
  -webkit-transition: ease 0.3s;
  transition: ease 0.3s
}

.pros-seeother .btn .txt {
  font-size: 1.411765em
}

.pros-seeother .btn .txt .fa {
  margin-left: .5em
}

.pros-seeother .btn:hover, .pros-seeother .btn:active {
  background: #494952
}

/***maxim20161215***/
.sectrow .video {
  display: block;
  position: relative;
  background: #23232d
}

.sectrow .video .preview {
  opacity: 1
}

.sectrow .video .icon-play {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  bottom: 35%;
  top: auto;
  width: 94px;
  height: 94px;
  background: url("../img/ui/icon-play.png") 50% 50% no-repeat;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  cursor: pointer;
  opacity: .7
}

html.no-mobile .sectrow .video .preview, html.no-mobile .sectrow .video .icon-play {
  -moz-transition: opacity 0.5s ease;
  -o-transition: opacity 0.5s ease;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease
}

html.no-mobile .sectrow .video:hover .preview, .sectrow .video:active .preview {
  opacity: .8
}

html.no-mobile .sectrow .video:hover .icon-play, .sectrow .video:active .icon-play {
  opacity: 1
}

/*20181019 Jams*/
.page-contrast .page-end{
  margin-top:1em;
  margin-bottom: 2.352941em;
}

.page-contrast .showDifference {
  position: relative;
  width: auto;
  height: auto;
}

.page-contrast .showDifference .text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  max-width: 960px;
  height: auto;
  text-align: center;
}

.page-contrast .showDifference .text .textbox {
  position: absolute;
  padding: 10px 10px 5% 10px;
  color: #FFF;
  border: 1px solid #FFF;
  text-shadow: 1px 1px #545151;
}

.page-contrast .showDifference .text .bright_areas {
  top: 15px;
  left: 36%;
}

.page-contrast .showDifference .text .shadows {
  margin-top: 17%;
  right: 5%;
}

.page-contrast .title-700 {
  font-weight: 700;
  color: #000;
  text-align: center;
}

@media (max-width: 520px) {
  .page-contrast .showDifference {

  }

  .page-contrast .showDifference .text .textbox {
    position: absolute;
    padding: 0;
    color: #000;
    border: 0;
  }

  .page-contrast .showDifference .text .bright_areas {
    top: 0;
    width: 100%;
    left: 0;
    text-align: center;
  }

  .page-contrast .showDifference .text .shadows {
    margin-top: -10px;
    width: 100%;
    right: 0;
    text-align: center;
  }
}

.page-contrast .ba-slider {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.page-contrast .ba-slider img {
  width: 100%;
  display: block;
}

.page-contrast .resize {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 30%;
  overflow: hidden;
}

.page-contrast .handle {
  /* Thin line seperator */
  position: absolute;
  left: 30%;
  top: 0;
  bottom: 0;
  width: 4px;
  margin-left: -2px;
  background: rgba(0, 0, 0, .5);
  cursor: ew-resize;
}

.page-contrast .handle:after {
  /* Big orange knob  */
  position: absolute;
  top: 50%;
  margin-top: -28px;
  margin-left: -84px;
  content: url(../img/exp/contrast-panel.png);
}

.page-contrast .draggable:after {
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  line-height: 48px;
  font-size: 30px;
}

.page-contrast .brightness_range {
  position: relative;
  width: 100%;
  height: 400px;
}

.page-contrast .brightness_range img {
  position: absolute;
  left: 50%;
  top: 30px;
  margin-left: -130px;
}

.page-contrast .brightness_range .range_text {
  position: absolute;
  left: 50%;
  top: 87px;
  border-top: 1px solid;
  border-bottom: 1px solid;
  padding: 11.5px 30px;
  margin-left: -314px;
  font-size: 16px;
}

@media (max-width: 520px) {
  .page-contrast .brightness_range {
    width: 100%;
    height: 200px;
  }

  .page-contrast .brightness_range img {
    left: 50%;
    width: 130px;
    top: 30px;
    margin-left: 0;
  }

  .page-contrast .brightness_range .range_text {
    left: auto;
    top: 57px;
    right: 50%;
    border-top: 1px solid;
    border-bottom: 1px solid;
    padding: 0.5px 20px;
    margin-left: 0;
    font-size: 12px;
  }
}

.page-contrast .vs {
  padding-left: 0;
  max-width: 1020px;
  padding-right: 0;
  margin: 0 auto;
}

.page-contrast .vs-item {
  margin-bottom: 0;
}

.page-contrast .vs-item.left {
  padding-right: 0;
}

.page-contrast .vs-item.right {
  padding-left: 0;
}

@media (max-width: 432px) {
  .page-contrast .vs-item {
    margin-bottom: 0;
    width: 100% !important;
  }

  .page-contrast .vs-item.left {
    margin-bottom: 10px;
  }
}

.page-contrast .sectrow {
  margin-bottom: 0;
}

.page-contrast .compares {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

.page-contrast .monitor_vs {
  border: .1em solid #FFFFFF;
  position: absolute;
  top: 20%;
  width: 30%;
  height: auto;
  text-align: center;
  padding-bottom: 20%;
}

.page-contrast .monitor_vs img {
  margin: 0 auto;
  bottom: 0.2em;
  position: absolute;
}

.page-contrast .monitor_vs .title {
  margin-top: -1.8em;
  color: #FFFFFF;
}

.page-contrast .monitor_sdr {
  left: 19%;
  background-color: rgba(0, 0, 0, 0.6);
  background-image: url(../img/exp/contrast-pic2-1.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

.page-contrast .monitor_hdr {
  right: 19%;
  background-color: rgba(0, 0, 0, 0.6);
  background-image: url(../img/exp/contrast-pic2-2.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

.page-contrast .monitor_sdr img {
  width: 24%;
  left: 38%;
}

.page-contrast .monitor_hdr img {
  width: 60%;
  left: 20%;
}

@media (max-width: 960px) {
  .page-contrast .monitor_vs {
    position: relative;
    display: inline-block;
    border: 0;
    outline: 3px solid #fff;
    outline-offset: -3px;
    margin-top: 50px;
    width: 49.7%;
    height: auto;
    text-align: center;
    padding-bottom: 33%;
  }

  .page-contrast .monitor_vs .title {
    margin-top: -1.8em;
    color: #000000;
  }

  .page-contrast .monitor_sdr {
    left: auto;

  }

  .page-contrast .monitor_hdr {
    right: auto;

  }
}

@media (max-width: 640px) {
  .page-contrast .monitor_vs {
    width: 100%;
    padding-bottom: 60%;
  }
}

.page-contrast .img+.legend {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  background-color: #252424;
  top: 0;
  bottom: auto;
  right: 0;
  font-size: 85%;
  font-weight: 700;
  opacity: .8;
  text-align: center;
  line-height: 2.5;
  color: #FFFFFF;
}

.page-contrast .row1 .text1 {
  width: 85.294118%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.352941em;
  margin-top: 1em;
}

.page-contrast .row2 .text1, .page-contrast .row3 .text1 {
  width: 85.294118%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.352941em;
  margin-top: 60px;
}

@media (max-width: 640px) {
  .page-contrast .row1 .text1 {
    width: 92%;
    margin-bottom: 1.176471em
  }
}

@media (max-width: 520px) {}

.page-contrast .row2 {
  text-align: center
}

.page-contrast .row3 {
  text-align: center;
  margin-bottom: 5em;
}

.page-contrast .row2:before, .page-contrast .row2:after, .page-contrast .row3:before, .page-contrast .row3:after {
  content: "";
  display: table
}

.page-contrast .row2:after, .page-contrast .row3:after {
  clear: both
}

.page-contrast .row2, .page-contrast .row3 {
  zoom: 1
}

.page-contrast .row2 .sm, .page-contrast .row2 .lg {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 50%;
  float: left;
  padding-right: 1.960784%;
  padding-left: 1.960784%
}

.page-contrast .row2 .item {
  margin-bottom: 0.588235em
}

.page-contrast .row2 .item .pic img {
  width: 100%
}

.page-contrast .row2 .item .title {
  height: 1em;
  margin-top: .5em;
  padding-left: 0;
  padding-right: 0;
  font-family: "Roboto Condensed";
  line-height: 1.4
}

.page-contrast .row2 .modes {
  width: 90%;
  margin: 0 auto;
}

.page-contrast .row3 .modes {
  width: 80%;
  margin: 0 auto;
}

.page-contrast .row2 .modes {
  width: 90%;
  margin: 0 auto;
}

.page-contrast .row2 .modes, .page-contrast .row3 .modes {
  zoom: 1;
  display: inline-flex;
  vertical-align: top;
  flex-wrap: nowrap;
  justify-content: center;
}

.page-contrast .row2 .modes .item, .page-contrast .row3 .modes .item {
  width: 25%;
  text-align: center
}

.page-contrast .row2 .modes .pic, .page-contrast .row3 .modes .pic {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.770588em;
  max-width: 100%;
}

.page-contrast .row2 .modes .title, .page-contrast .row3 .modes .title {
  line-height: 1.3
}

@media (max-width: 640px) {
  .page-contrast .row2 .text, .page-contrast .row3 .text {
    width: 92%
  }
}

@media (max-width: 520px) {
  .page-contrast .row2 .modes {
    width: 92%;
    flex-wrap: wrap;
  }

  .page-contrast .row3 .modes {
    width: 82%;
    flex-wrap: wrap;
  }

  .page-contrast .row2 .modes .item {
    width: 100%;
    margin-bottom: 1.470588em
  }

  .page-contrast .row3 .modes .item {
    width: 50%;
    margin-bottom: 1.470588em
  }

  .page-contrast .row2 .modes .item:nth-child(2) {
    left: auto
  }

  .page-contrast .row2 .modes .item:nth-child(2n+1) {
    clear: left
  }

  .page-contrast .row3 .modes .item:nth-child(2) {
    left: auto
  }

  .page-contrast .row3 .modes .item:nth-child(2n+1) {
    clear: left
  }
}

.page-contrast .display-icons {
  display: inline-block;
}

.page-contrast .display-icons img {
  display: inline-block;
}

@media (max-width: 520px) {
  .page-contrast .display-icons img {
    max-width: 145px;
  }
}

.page-contrast .full-view {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

.page-contrast .show-in-mobile {
  visibility: hidden;
  display: none;
}

.page-contrast .hide-in-mobile {
  visibility: visible;
  display: block;
}

@media (max-width: 960px) {
  .page-contrast .row2 .item .title {
    padding-left: 7.843137%;
    padding-right: 0
  }
}

@media (max-width: 520px) {
  .page-contrast .show-in-mobile {
    visibility: visible;
  }

  .page-contrast .hide-in-mobile {
    visibility: hidden;
  }

  .page-contrast .row2 .sm {
    margin-bottom: 2.352941em
  }

  .page-contrast .row2 .sm, .page-contrast .row2 .lg {
    float: none;
    width: 80%;
    padding-left: 0;
    padding-right: 2%;
    margin-left: auto;
    margin-right: auto
  }

  .page-contrast .row2 .item {
    margin-bottom: 1.176471em
  }

  .page-contrast .row2 .item .title {
    height: auto;
    padding: 0
  }
}

@media (max-width: 432px) {
  .page-contrast .row2 .sm, .page-contrast .row2 .lg {
    width: 92%
  }
}

.page-contrast .scenario, .page-contrast .constraint {
  position: relative;
  z-index: 2
}

.page-contrast .icon-play {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -25px;
  margin-top: -15px;
  width: 50px;
  height: 50px;
  background: url("../img/ui/icon-play.png") 50% 50% no-repeat;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  cursor: pointer;
  opacity: .7
}

html.no-mobile .page-contrast .icon-play {
  -moz-transition: opacity 0.5s ease;
  -o-transition: opacity 0.5s ease;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease
}

.sectrow .video:active .preview {
  opacity: .8
}

html.no-mobile .sectrow .video:hover .icon-play, .sectrow .video:active .icon-play {
  opacity: 1
}

.page-contrast .video .icon-play {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  margin: auto;
  bottom: 50%;
  margin-bottom: -47px;
  width: 94px;
  height: 94px;
  background: url("../img/ui/icon-play.png") 50% 50% no-repeat;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  cursor: pointer;
  opacity: .7
}

html.no-mobile .page-contrast .video .preview, html.no-mobile .page-contrast .video .icon-play {
  -moz-transition: opacity 0.5s ease;
  -o-transition: opacity 0.5s ease;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease
}

@media (max-width: 1024px) {
  .page-contrast .video .icon-play {
    width: 80px;
    height: 80px;
    margin-bottom: -40px;
  }
}

@media (max-width: 800px) {
  .page-contrast .video .icon-play {
    width: 64px;
    height: 64px;
    margin-bottom: -32px;
  }
}

@media (max-width: 520px) {
  .page-contrast .video .icon-play {
    width: 52px;
    height: 52px;
    margin-bottom: -26px;
  }
}

.page-contrast .row2 .monitor {
  position: relative;
  width: 100%;
  max-width: 1020px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

.page-contrast .row2 .monitor .device {
  width: 100%;
  height: 0;
  padding-bottom: 41.5%;
}

.page-contrast .screens {
  position: relative;
}

.page-contrast .screens .item {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  visibility: hidden;
}

.page-contrast .screens .item:first-child {
  visibility: visible;
}

/*20181019 Jams*/
.descr .proul{
list-style-type: disc;
width:80%;
    text-align: left;
    max-width:500px;
    margin: 25px auto;
}
.descr .proul2{
    list-style-type: disc;
    width:80%;
    text-align: left;
    max-width: 320px;
    margin: 25px auto;
}
.descr .proul2 ul li{
  padding-left: 20px;
}
.descr p b{
  font-weight: bold;
}
.descr p a{
  text-decoration: underline;
}

.descr p a:hover{
  text-decoration: none;
}
.page-contrast .constraint .menu{
      margin-bottom: 1.352941em;
}
.page-contrast .smart-hdr{
  display: block;
  text-align: left;
}

.page-contrast .smart-hdr .item{
  display: block;
  margin:30px auto 0;
  padding: 0 5px;
}

.page-contrast .smart-hdr .item img{
  width:100%;
}
.page-contrast .smart-hdr .item .title-700{
  text-align: left;
}
.page-contrast .smart-hdr .item p{
  font-size: 16px;
}
@media (min-width:576px){

  .page-contrast .smart-hdr{
    display: inline-flex;
  }
  .page-contrast .smart-hdr .item{
    width:33%;
  }
}