n/*
 * media query and postfix
 *  320 ≤ width ≤  736  sm( 320,  360,  375, 414)
 *  736 < width ≤ 1200  md( 768,  800, 1024, 1080, 1152)
 * 1200 < width ≤ 1440  lg(1280, 1366, 1440)
 * 1440 < width ≤ 1920  xl(1600, 1680, 1920, default)
 */


/* TP-Link Navi fix */

.header {
  z-index: 1000000;
}

@media screen and (max-width:736px) {
  html, body, body>.page-content-wrapper {
    min-width: 320px;
  }
  .header .bg {
    background: rgb(74, 203, 214);
    border-bottom: none;
  }
  .header .logo {
    background-image: url(tp-logo.png);
  }
  .header .m-searchBtn {
    background-image: url(tp-search.png);
  }
  .header .m-navBtn {
    background-image: url(tp-menu.png);
  }
}


/*---------- font ----------*/

body, .light {
  font-weight: 300;
}

.regular {
  font-weight: 400;
}

.medium {
  font-weight: 500;
}

.bold {
  font-weight: 700;
}

@media screen and (max-width:1200px) {
  .light-md {
    font-weight: 300;
  }
  .regular-md {
    font-weight: 400;
  }
  .medium-md {
    font-weight: 500;
  }
  .bold-md {
    font-weight: 700;
  }
}

@media screen and (max-width:736px) {
  .light-sm {
    font-weight: 300;
  }
  .regular-sm {
    font-weight: 400;
  }
  .medium-sm {
    font-weight: 500;
  }
  .bold-sm {
    font-weight: 700;
  }
}


/*---------- deco-wrapper ----------*/

.deco-wrapper {
  margin: 0 auto;
  position: relative;
  width: 1366px;
}

@media screen and (max-width:1440px) {
  .deco-wrapper {
    width: 1024px;
  }
}

@media screen and (max-width:1200px) {
  .deco-wrapper {
    width: 92%;
    max-width: 1024px;
  }
}

@media screen and (max-width:736px) {
  .deco-wrapper {
    margin: 0 20px;
    min-width: 280px;
    width: auto;
  }
}


/*----------- deco-navi -------------*/

.deco-overview, .deco-feature, .deco-support {
  display: none;
  margin:0 auto;
  max-width:1920px;
}

.show-overview .deco-overview, .show-feature .deco-feature, .show-support .deco-support {
  display: block;
}

.show-overview .deco-navi .navi-overview, .show-feature .deco-navi .navi-feature, .show-support .deco-navi .navi-support {
  color: rgb(74, 203, 214);
  border-bottom: 2px solid;
}

.deco-navi {
  background: #fff;
  -webkit-box-shadow: 0 1px 5px rgba(200, 200, 200, 0.8);
  box-shadow: 0 1px 5px rgba(200, 200, 200, 0.8);
  box-sizing: border-box;
  height: 51px;
  position: relative;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 999999;
}

.deco-navi.fixed {
  position: fixed;
  left: 0;
  top: 0;
}

.deco-navi .logo {
  background: none;
  height: auto;
  left: 2px;
  position: absolute;
  top: 11px;
  width: auto;
  z-index: 9;
}

.deco-navi .logo a {
  background: url(logo.png) no-repeat;
  background: url(logo.svg) 50% / 100% no-repeat;
  color: transparent;
  display: block;
  font-size: 0;
  height: 27px;
  width: 77px;
}

.deco-navi .slide, .deco-navi .cover {
  display: none;
}

.deco-navi ul {
  font-size: 0;
  height: 100%;
  text-align: right;
}

.deco-navi li {
  color: #033333;
  display: inline-block;
  height: 50px;
  padding: 0 5px;
}

.deco-navi li+li {
  margin-left: 40px;
}

.deco-navi li a {
  color: inherit;
  font-size: 15px;
  line-height: 51px;
  text-decoration: none;
}

.deco-navi li:not(.navi-support):last-child:nth-child(4) a{
  color: #000;
  background: #fdc741;
  display: inline-block;
  padding: 1px 12px 0;
  border-radius: 4px;
  line-height: 33px;
  font-weight: 500;
  font-size: 14px;
}  

@media screen and (max-width:736px) {
  .header {
    z-index: 1;
  }
  .deco-navi {
    background: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-bottom: 1px solid #f9f9f9;
    height: auto;
    position: absolute;
    top: 45px;
  }
  .deco-navi .deco-wrapper {
    background: rgba(255, 255, 255, 0.95);
    margin: 0;
    padding: 0 20px;
    position: relative;
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
    z-index: 999999;
  }
  .deco-navi .logo {
    left: 20px;
    top: 10px;
  }
  .deco-navi .logo a {
    background-size: 100%;
    height: 20px;
    width: 57px;
  }
  .deco-navi .slide {
    display: block;
    width: 100%;
  }
  .deco-navi .slide {
    display: block;
    position: relative;
    top: 14px;
    width: 100%;
    height: 100%;
    z-index: 1;
    -webkit-transition: -webkit-transform 1s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform-origin 1s cubic-bezier(0.86, 0, 0.07, 1);
    transition: -webkit-transform 1s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform-origin 1s cubic-bezier(0.86, 0, 0.07, 1);
    transition: transform 1s cubic-bezier(0.86, 0, 0.07, 1), transform-origin 1s cubic-bezier(0.86, 0, 0.07, 1);
    transition: transform 1s cubic-bezier(0.86, 0, 0.07, 1), transform-origin 1s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform 1s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform-origin 1s cubic-bezier(0.86, 0, 0.07, 1), -ms-transform-origin 1s cubic-bezier(0.86, 0, 0.07, 1);
    -webkit-transform: translateY(16%);
    -ms-transform: translateY(16%);
    transform: translateY(16%)
  }
  .deco-navi .slide::before, .deco-navi .slide::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    width: 12px;
    height: 1px;
    z-index: 1;
    -webkit-transition: -webkit-transform .5s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform-origin .5s cubic-bezier(0.86, 0, 0.07, 1);
    transition: -webkit-transform .5s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform-origin .5s cubic-bezier(0.86, 0, 0.07, 1);
    transition: transform .5s cubic-bezier(0.86, 0, 0.07, 1), transform-origin .5s cubic-bezier(0.86, 0, 0.07, 1);
    transition: transform 1s cubic-bezier(0.86, 0, 0.07, 1), transform-origin .5 cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform .5s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform-origin .5s cubic-bezier(0.86, 0, 0.07, 1), -ms-transform-origin .5s cubic-bezier(0.86, 0, 0.07, 1)
  }
  .deco-navi .slide::before {
    right: 50%
  }
  .deco-navi .slide::after {
    left: 50%
  }
  .deco-navi .slide::before, .deco-navi .slide::after {
    background: #333
  }
  .deco-navi .slide::before {
    -webkit-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -webkit-transform: rotate(40deg) scaleY(1.5);
    -ms-transform: rotate(40deg) scaleY(1.5);
    transform: rotate(40deg) scaleY(1.5)
  }
  .deco-navi .slide::after {
    -webkit-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: rotate(-40deg) scaleY(1.5);
    -ms-transform: rotate(-40deg) scaleY(1.5);
    transform: rotate(-40deg) scaleY(1.5)
  }
  .deco-navi .cover {
    background: rgba(0, 0, 0, 0.1);
    bottom: 100%;
    display: block;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    -webkit-transition: opacity .5s cubic-bezier(0.86, 0, 0.07, 1);
    transition: opacity .5s cubic-bezier(0.86, 0, 0.07, 1);
    top: 0;
    z-index: 999998;
  }
  .deco-navi ul {
    height: 0;
    margin-left: -20px;
    margin-right: -20px;
    overflow: hidden;
    padding-top: 25px;
    position: relative;
    -webkit-transition: height .5s cubic-bezier(0.86, 0, 0.07, 1);
    transition: height .5s cubic-bezier(0.86, 0, 0.07, 1);
  }
  .deco-navi ul li {
    display: block;
    height: 43px;
    text-align: center;
  }
  .deco-navi ul li+li {
    margin-left: 0;
  }
  .deco-navi li a {
    line-height: 43px;
  }
 
  .deco-navi.open {
    border-bottom: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  .deco-navi.open .deco-wrapper {
    background: #fff;
  }
  .deco-navi.open .slide .icon {
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%)
  }
  .deco-navi.open .slide::before {
    -webkit-transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
    -webkit-transform: rotate(-40deg) scaleY(1.5);
    -ms-transform: rotate(-40deg) scaleY(1.5);
    transform: rotate(-40deg) scaleY(1.5)
  }
  .deco-navi.open .slide::after {
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: rotate(40deg) scaleY(1.5);
    -ms-transform: rotate(40deg) scaleY(1.5);
    transform: rotate(40deg) scaleY(1.5)
  }
  .deco-navi.open .cover {
    bottom: 0;
    opacity: 1;
  }
  .deco-navi.open ul {
    height: 180px;
  }
  .show-overview .deco-overview, .show-feature .deco-feature, .show-support .deco-support {
    padding-top: 90px;
  }
  .show-overview .deco-navi .navi-overview, .show-feature .deco-navi .navi-feature, .show-support .deco-navi .navi-support {
    border-bottom: none;
  }
  .deco-overview *, .deco-feature *, .deco-support * {
    letter-spacing: .01em;
  }
}


/* dialog */

.dialog-layer {
  background: #000000;
  bottom: 0;
  display: none;
  filter: alpha(opacity=80);
  left: 0;
  opacity: 0.8;
  position: fixed;
  right: 0;
  top: 0;
  z-index:999999999999999;
}

.dialog {
  box-shadow: 0 0 10px #000000;
  display: none;
  left: 50%;
  position: fixed;
  top: 50%;
  z-index:999999999999999;
}

.dialog .close {
  background: url(icon-close.png) no-repeat;
  cursor: pointer;
  height: 32px;
  position: absolute;
  right: -16px;
  top: -16px;
  width: 32px;
}

.video-dialog {
  background: #000000;
  height: 480px;
  margin-left: -427px;
  margin-top: -240px;
  width: 854px;
}

.video-dialog iframe {
  border: none;
  height: 480px;
  width: 854px;
}

#get-window-height{
    bottom:0;
    position:fixed;
    visibility:hidden;
    top:0;
    width:0;
}