body h2,body h3,body h4,body h5,body p,body span,body li,body a,body i,body button{
  font-family: 'Pinghei','STHeiti','Microsoft YaHei' ;
}
body.spoon-cn h2,body.spoon-cn h3,body.spoon-cn h4,body.spoon-cn h5,body.spoon-cn p,body.spoon-cn button,body.spoon-cn span,body.spoon-cn li,body.spoon-cn a{
  font-family: 'Pinghei','STHeiti','Microsoft YaHei';
}
.spoon-show{
  text-align: center;
  padding: 60px 0 100px;
  background-color: #eaeaea;
}
.spoon-show a{
  color: #fff;
  background-color:#e44d4d;
  font-size: 24px;
  border-radius:12px;
  padding: 10px 40px;
  text-decoration: none;
}
.spoon-video{
  position: relative;
}
.spoon-video .spoon-video-play{
  position: absolute;
  top: 50%;
  left: 47%;
  height: 100px;
  width: 100px;
}
.spoon-show img{
  width: 85%;
  margin-top: 3%;
}
.spoon-show h2{
  font-size: 60px;
  color: #5a5c5c;
}
.spoon-show p{
  font-size: 32px;
  color: #343434;
  margin-bottom:25px;
}
.spoon-stabilizer{
  background-color: #252525;
  padding: 20px 0 100px;
  color: #fff;
}
.spoon-video{
  background-size: cover !important;
}
.spoon-stabilizer h2{
  font-size: 45px;
  margin-top: 0px;
}
.spoon-stabilizer h4{
  font-size: 22px;
  width: 60%;
  margin: 0 auto 30px;
  line-height: 1.2;
}
.spoon-stabilizer p{
  color: #ddd;
  font-size: 16px;
}
.spoon-stabilizer .spoon-stabilizer-img,.spoon-safe-img,.spoon-sustainable-img,.spoon-end-content,.faq-play{
  position: relative;
  display: inline-block;
}
#Layer_1{
  position: absolute;
  top: 7%;
  left:2%;
  width:100%;
  opacity: 1;
}
.path {
  stroke-dasharray: 2000;
  stroke-dashoffset: 0;
  animation: dash 5s linear ;
  -moz-animation:  dash 5s linear;
  -webkit-animation:  dash 5s linear;
  -o-animation:  dash 5s linear;
}
@keyframes dash {
  from {
    stroke-dashoffset: 2000;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@-moz-keyframes dash {
  from {
    stroke-dashoffset: 2000;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@-o-keyframes dash {
  from {
    stroke-dashoffset: 2000;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes dash {
  from {
    stroke-dashoffset: 2000;
  }
  to {
    stroke-dashoffset: 0;
  }
}
.spoon-safe{
  background-color: #dedede;
  padding:100px 0;
}
.spoon-safe-img{
  margin-left:-130px;
}
.spoon-safe-img span.breathing-light-top,.spoon-safe-img span.breathing-light-bottom{
  background-color: #35b790;
  position: absolute;
  height: 5.2%;
  opacity: .4;
  width:3.9%;
  border-radius: 50%;
  animation:  1.5s blinking infinite alternate ease-in-out ;
  -moz-animation:  1.5s blinking infinite alternate ease-in-out;
  -webkit-animation:  1.5s blinking infinite alternate ease-in-out;
  -o-animation:  1.5s blinking infinite alternate ease-in-out;
}
@keyframes blinking {
  from {
    background-color: #35b790;
    box-shadow: 0 0 0 3px #35b790;
  }
  to {
    background-color: #35b790;
    box-shadow: 0 0 0 10px #35b790;
  }
}
@-moz-keyframes blinking {
  from {
    background-color: #35b790;
    box-shadow: 0 0 0 3px #35b790;
  }
  to {
    background-color: #35b790;
    box-shadow: 0 0 0 10px #35b790;
  }
}
@-webkit-keyframes blinking {
  from {
    background-color: #35b790;
    box-shadow: 0 0 0 3px #35b790;
  }
  to {
    background-color: #35b790;
    box-shadow: 0 0 0 10px #35b790;
  }
}
@-o-keyframes blinking {
  from {
    background-color: #35b790;
    box-shadow: 0 0 0 3px #35b790;
  }
  to {
    background-color: #35b790;
    box-shadow: 0 0 0 10px #35b790;
  }
}
.spoon-safe-img span.breathing-light-bottom{
  top: 38.6%;
  left: 45.25%;
}
.spoon-safe-img span.breathing-light-top{
  top: 15.25%;
  left: 32.1%;
}
.spoon-safe-text{
  padding-top: 45%;
  padding-left:17.6%;
}
.spoon-safe-text h3{
  font-size: 40px;
  color: #343434;
}
.spoon-safe-text h5{
  margin-bottom: 50px;
  font-size: 22px;
  color: #545454;
}
.spoon-safe-text p{
  color: #666;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 6px;
}
.spoon-use{
  background-color: #d9d9d9;
  padding:100px 0;
}
.spoon-use-img{
  position: relative;
}
.use-img-one,.use-img-two,.use-img-three,.use-img-fort{
  position: absolute;
}
.use-img-one{
  top: 23%;
  right: 3%;
}
.use-img-two{
  top: 25%;
  right: 2%;
}
.use-img-three{
  top: 26%;
  right: 5%;
}
.use-img-fort{
  top: 23%;
  right:8%;
}
.spoon-user-intro{
  margin-top: -100px;
  text-align: center;
  color: #343434;
}
.spoon-user-intro h3{
  font-size: 40px;
  margin-bottom: 20px;
}
.spoon-user-intro h5{
  font-size: 24px;
  margin-bottom: 35px;
}
.spoon-user-intro p{
  color: #656565;
  font-size: 16px;
}
.spoon-comfortable{
  background-color: #5c5c5c;
  padding-bottom: 100px;
}
.spoon-comfortable-text{
  padding:66% 0 0 17.6%;
  color: #fff;
}
.spoon-comfortable-text h3{
  font-size: 40px;
}
.spoon-comfortable-text h5{
  font-size: 24px;
  margin-bottom: 80px;
}
.spoon-comfortable-text p{
  font-size: 16px;
  color: #ddd;
}
.spoon-comfortable-img img{
  width: 95%;
}
.spoon-sustainable{
  background-color: #eaeaea;
}
.sustainable-intro{
  padding: 55% 0 50px 0;
  text-align: right;
  color: #5c5c5c;
}
.wave,.wave-circle{
  position: absolute;
  display: inline-block;
  height: 50px;
  width:50px;
  border-radius: 50%;
  z-index: 2;
}
.wave{
  top: 55%;
  left: 52%;
}
.wave-circle{
  background-color: #74cd6d;
  top: 0%;
  left:0%;
}
.ripple {
  display:inline-block;
  border-radius:50%;
  width:5px;
  height:5px;
  animation:rip 3s infinite ease-in-out;
  -webkit-animation:rip 3s infinite ease-in-out;
  -moz-animation:rip 3s infinite ease-in-out;
  -o-animation:rip 3s infinite ease-in-out;
  position:absolute;
  z-index:-1;
  top:23px;
  left:22px;
}
@keyframes rip
{
  0%  {
    box-shadow:0 0 0 26px #bfbfbf,
               0 0 0 28px #74cd6d;
    opacity: 0;
  }
  50%  {
    opacity: .6;
  }
  100% {
    box-shadow:0 0 0 50px #bfbfbf,
               0 0 0 54px #74cd6d;
    opacity: 0.1;
  }
}
@-webkit-keyframes rip
{
  0%  {
    box-shadow:0 0 0 26px #bfbfbf,
               0 0 0 28px #74cd6d;
    opacity: 0;
  }
  50%  {
    opacity: .6;
  }
  100% {
    box-shadow:0 0 0 50px #bfbfbf,
               0 0 0 54px #74cd6d;
    opacity: 0.1;
  }
}
@-moz-keyframes rip
{
  0%  {
    box-shadow:0 0 0 25px #bfbfbf,
               0 0 0 28px #74cd6d;
    opacity: 0;
  }
  50%  {
    opacity: .6;
  }
  100% {
    box-shadow:0 0 0 50px #bfbfbf,
               0 0 0 56px #74cd6d;
    opacity: 0.1;
  }
}
@-o-keyframes rip
{
  0%  {
    box-shadow:0 0 0 25px #bfbfbf,
               0 0 0 28px #74cd6d;
    opacity: 0;
  }
  50%  {
    opacity: .6;
  }
  100% {
    box-shadow:0 0 0 50px #bfbfbf,
               0 0 0 56px #74cd6d;
    opacity: 0.1;
  }
}
.sustainable-intro h3{
  font-size: 36px;
  margin-bottom: 20px;
}
.spoon-kinds-text h3{
  font-size: 38px;
  margin-bottom: 20px;
}
.sustainable-intro h5{
  font-size: 22px;
  line-height: 1.3;
}
.sustainable-intro p{
  font-size: 16px;
}
p.mg-b,.sustainable-intro h5{
  margin-bottom: 30px;
}
.sustainable-intro span,.spoon-kinds span{
  padding: 6px 15px;
  background-color: #d7d7d7;
  font-size: 16px;
  border-radius: 15px;
  display: inline-block;
}
.spoon-kinds{
  text-align: center;
  background-color: #fff;
  color: #5c5c5c;
  padding: 80px 0 100px;
  overflow: hidden;
}
.spoon-kinds h5{
   line-height: 1.3;
  margin-bottom: 35px;
  font-size: 21px;
}
.kinds-left.kinds-img-left{
  position: relative;
  left: 0px;
  opacity: 1;
}
.kinds-right.kinds-img-right{
  position: relative;
  right: 0px;
  opacity: 1;
}
.kinds-img-left{
  display: inline-block;
  position: relative;
  left: -400px;
  opacity: 0;
  margin-right: 35px;
  transition: all 1.5s ease-in-out;
  -moz-transition: all 1.5s ease-in-out;
  -webkit-transition: all 1.5s ease-in-out;
  -o-transition: all 1.5s ease-in-out;
}
.kinds-img-right{
  position: relative;
  right: -400px;
  opacity: 0;
  display: inline-block;
  transition: all 1.5s ease-in-out;
  -moz-transition: all 1.5s ease-in-out;
  -webkit-transition: all 1.5s ease-in-out;
  -o-transition: all 1.5s ease-in-out;
}
.kinds-img-left img,.kinds-img-right img{
  margin-top: 50px;
  width: 85%;
}
.kinds-img-right img{
  display: block;
}
.spoon-fork{
  background-color: #d7d7d7;
  padding: 80px 0;
  color: #5c5c5c;
}
.spoon-fork-intro img{
  margin-bottom: 15px;
  width: 60%;
}
.spoon-fork-intro h4{
  margin-bottom: 55px;
  font-size: 22px;
}
.spoon-fork-intro p{
  font-size: 16px;
}
.spoon-fork-intro span{
  margin-top: -5px;
  font-size: 10px;
}
.spoon-knows{
  background-color: #fff;
  color:#343434;
  padding: 80px 0;
}
.spoon-sustainable-img img {
  margin-top: 80px;
  margin-left: -50px;
}
.spoon-knows-intro img{
  margin-left: 0px;
}
.spoon-knows-text {
  max-width: 500px;
  padding-top: 60%;
}
.spoon-knows-text  h3{
  font-size: 36px;
  line-height: 1.3;
}
.spoon-knows-text h5{
  font-size: 22px;
  line-height: 1.2;
  margin-bottom: 55px;
  color: #5c5c5c;
}
.spoon-knows-text  p{
  color: #5c5c5c;
  font-size: 16px;
  line-height:1.3;
}
.spoon-design{
  background-color: #343434;
  padding: 80px 0;
}
.spoon-design img{
  width: 65%;
}
.spoon-design-text{
  color: #fff;
  margin-top: -70px;
}
.spoon-design-text h3{
  font-size: 38px;
  margin-bottom: 40px;
}
.spoon-design-text p{
  font-size: 18px;
}
.spoon-end-video{
  background-color: #fff;
  padding: 80px 0;
}
.spoon-end-video img{
  margin-left: -80px;
  width: 100%;
}

.spoon-end-content img.spoon-video-play{
  position: absolute;
  width: 100%;
  top: 0px;
  left: 10%;
}
.spoon-end-text{
  padding: 65% 0 0 11%;
}
.spoon-end-text h2{
  font-size: 60px;
  color: #5a5c5c;
  margin-bottom: 35px;
}
.spoon-end-text p{
  font-size: 22px;
  color: #5c5c5c;
}
.to-animate {
  width: 50px;
  height: 50px;
  background: #9cfff4;
  position: absolute;
  top: -25px;
  left: -25px;
  border-radius: 25px;
  opacity: 1;
  z-index:99;
}
.spoon-comfortable{
  overflow: hidden;
}
.spoon-comfortable-img img{
  margin-top: -495px;
  margin-left: -465px;
  width: auto;
}
.spoon-comfortable-img{
  display: inline-block;
  position: relative;
  margin-left: -240px;
}
.spoon-comfortable #svg-line {
  position: absolute;
  top: 49%;
  left: 12%;
  width: 100%;
  height: 61%;
}

footer.footer{
  height: 76px;
  background-color: #343434;
  color: #999;
  width: 100%;
  padding: 20px;
}
footer.footer span{
  margin-left:10px;
}
.secondary-bar {
  background-color: #fff;
}
.secondary-nav li{
  padding-top: 32px;
  height: 100px;
  list-style: none;
  float: right;
  width: 33%;
  text-align: center;
  color: #343434;
  font-size: 30px;
  display: inline-block;
}
.secondary-nav a.active li,.secondary-nav  li:hover{
  background-color: #44b68f;
  color: #fff;
}
.faq-page .spoon-show{
  padding-bottom: 120px;
  padding-top: 120px;
}
.faq-page-content{
  background-color: #f4f4f4;
  padding: 100px 0;
  color: #343434;
}
.faq-page-content h2{
  font-size: 64px;
  margin-bottom: 80px;
}
.faq-page-content h4{
  font-size: 36px;
  margin-bottom: 45px;
}
.faq-intro-one p{
  font-size: 18px;
  word-spacing: 6px;
  margin-bottom: 45px;
}
.faq-intro-one .find-up{
  font-weight: bold;
  margin-bottom: 30px;
}
.faq-page-content ul li{
  position: relative;
  list-style: none;
  font-size: 18px;
  word-spacing: 3px;
  line-height: 2;
}
.faq-page-content ul{
  padding-left: 40px;
  margin-bottom: 75px;
}
.faq-page-content .faq-intro-one ul{
  margin-bottom: 35px;
}
.faq-page-content a{
  color: #25b289;
  text-decoration: none;
  border-bottom: 1px solid #25b289;
  padding-bottom: 3px;
}
.faq-page-content ul li .dot{
  position: absolute;
  top: 13px;
  left: -25px;
  height: 8px;
  width: 8px;
  border-radius: 50%;
  background-color: #25b289;
}
.faq-intro-one p.span-star{
  position: relative;
  padding-left: 40px;
  margin-bottom: 65px;
}
.spoon-knows-text p.span-star{
  position: relative;
  padding-left: 25px;
  margin-top: 45px;
}
.spoon-knows-text p.span-star span{
  position: absolute;
  font-size: 45px;
  top: -12px;
  left: 0px;
  color: #d84848;
}
.faq-intro-one p.span-star span{
  position: absolute;
  font-size: 55px;
  top: -12px;
  left: 12px;
  color: #d84848;
}
.faq-intro-one .contact-number{
  padding-left: 40px;
  margin-bottom: 35px;
}
.faq-intro-one .contact-number p{
  margin-bottom: 5px;
}
.faq-intro-one img{
  margin-bottom: 20px;
}
.faq-intro-one{
  margin-bottom: 40px;
}
.faq-intro-four p{
  padding-left: 40px;
  font-size: 18px;
  line-height: 2;
  margin-bottom: 25px;
}
.navbar{
  margin-bottom: 0px;
  background-color: #fff;
  border: none;
}
.navbar li a{
  color: #343434;
}
.nav>li>a:focus,.nav>li>a:hover,.nav .open>a, .nav .open>a:focus, .nav .open>a:hover,.navbar li.dropdown:hover{
  background-color: #fff;
  color: #44b68f;
}
.nav>li>a{
  padding: 15px 0;
}

.navbar .navbar-header{
  text-align: center;
}
.navbar-header a{
  position: absolute;
  display: inline-block;
  padding: 15px 0 10px;
  left: 0;
  width: 250px;
}
.navbar-header a img{
  width: 205px;
  margin: 0px;
  margin-left: 20%;
}
.navbar-brand {
  float: none;
  height: 100%;
}
.navbar-brand img{
  margin: 0 auto;
  width: auto;
}
.navbar-nav li{
  position: relative;
  width: 150px;
  font-size: 18px;
}
.navbar .change-button{
  line-height: 5.48;
  width: 10%;
  min-width: 90px;
}
.navbar .change-button  a:hover,.navbar .change-button  a:focus{
  color: #999;
  background-color: #e9e9e9;
}
.navbar .change-button  a.active,.navbar .change-button  a.active:hover{
  background-color: #3dc397;
  color: #fff;
}
.navbar .change-button  a{
  display: inline-block;
  line-height: 1;
  color: #999;
  font-size: 16px;
  padding: 4px 8px;
}
.navbar-nav li a,.navbar-nav a{
  transition: all .25s ;
  -moz-transition: all .25s ;
  -webkit-transition: all .25s ;
  -o-transition: all .25s ;
  line-height: 2.5;
}
.navbar .change-button  a{
  text-decoration: none;
  float: none;
  display: inline-block;
}
.arrow-top,.arrow-bottom{
  display: inline-block;
  color:  #343434;
  position: absolute;
  opacity: 0;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
   transition: all .25s ;
  -moz-transition: all .25s ;
  -webkit-transition: all .25s ;
  -o-transition: all .25s ;
  pointer-events: none;
}
.arrow-top{
  z-index: 99;
  top: -25px;
  right: 17%;
}
.arrow-bottom{
  top: 65px;
  right: 64%;
}
.arrow-action.arrow-top{
  top: 5px;
  right: 35%;
  opacity: 1;
  color: #44b68f;
}
.arrow-action.arrow-bottom{
  color: #44b68f;
  opacity: 1;
  top: 42px;
  right: 55%;
}
.button-left,.button-right{
  background-color: #e9e9e9;
  color: #999;
}
.button-right{
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.button-left{
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  margin-right: -5px;
}
.triangle{
  position: absolute;
  display: none;
  top: 67px;
  left: 45%;
  height: 16px;
  width: 16px;
  z-index: 99;
  background-color: #fff;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
}
.faq-page-content,.faq-page,.navbar-nav li.dropdown{
  position: relative;
}
 .faq-float{
  position: fixed;
  top:120px;
  right: 50px;
  height: 90px;
  z-index:12;
}
.spoon-show sup,.spoon-end-text sup{
  font-size: 36px;
}
.recruitment-wrapper {
  position: fixed;
  right: -10px;
  top: 150px;
  width: 330px;
  height: 400px;
  padding-left: 10px;
  z-index: 100;
  background-color: #fdfdfd;
  opacity: 0.95;
  box-shadow: -1px 1px 1px #bbb;
  border: 1px solid #ddd;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
  transition: 0.3s;
}
.recruitment-title {
  margin: 25px auto 10px;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  color: #333;
}
.recruitment-info {
  margin: 5px auto;
  padding-left: 30px;
  font-size: 14px;
  line-height: 24px;
  color: #666;
}
.recruitment-info-text {
  vertical-align: middle;
  margin-left: 5px;
}
.recruitment-hint {
  text-align: center;
  color: #aaa;
  margin-top: 10px;
}
.recruitment-input, .recruitment-detail {
  display: block;
  margin: 10px auto 15px;
  width: 250px;
  border: 1px solid #ddd;
  outline: none;
  transition: border 0.1s ease, opacity 1.0s ease;
}
.recruitment-detail {
  height: 100px;
}
.recruitment-input-pass {
  border: 1px solid #4fc8a0;
  box-shadow: 0 0 5px #4fc8a0;
}
.recruitment-input-nopass {
  border: 1px solid #f07070;
  box-shadow: 0 0 5px #f03030;
}
.recruitment-submit-button {
  display: block;
  margin: 20px auto;
  width: 100px;
  height: 30px;
  text-align: center;
  background-color: #46c59b;
  color: #fff;
  border: none;
  outline: none;
  border-radius: 15px;
  transition: opacity 0.5s;
}
.recruitment-submit-button:hover {
  box-shadow: 0 0 3px #26854b;
}
.recruitment-submit-button:active {
  box-shadow: 0 0 10px #46c59b;
}
.recruitment-resubmit-button {
  position: absolute;
  display: none;
  left: 120px;
  bottom: 1px;
  opacity: 0;
}
.recruitment-success-info {
  position: absolute;
  padding-left: 10%;
  padding-right: 5%;
  width: 85%;
  top: 180px;
  padding-right: 10px;
  z-index: -1;
  text-align: center;
  font-size: 18px;
  color: #555;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.fold-button {
  position: absolute;
  left: 0;
  top: 30px;
  width: 40px;
  height: 330px;
  color: #46c59b;
  border: none;
  outline: none;
  background: none;
  text-align: center;
  line-height: 30px;
  transform: scaleY(2);
}
.fold-button:hover {
  opacity: 0.6;
}
.nav-bg{
  background-color: #5c5c5c;
  height: 0px;
  display: none;
  position: absolute;
  top: 75px;
  width: 100%;
  left: 0;
  z-index: 10;
}
.dropdown-ul.dropdown-menu{
  width: 200%;
  display: none;
  position: absolute;
  background:none;
  top: 79px;
  left: -50%;
  list-style: none;
  z-index: 99;
  padding: 2px 0 10px 100%;
  text-align: left;
  box-shadow: none;
  border: none;
}
.dropdown-menu{
  margin-left: -69px;
}

.navbar-nav li.dropdown .dropdown-ul.dropdown-menu>li>a:hover{
  background-color: #5c5c5c;
}
.navbar-nav li.dropdown .dropdown-ul.dropdown-menu>li>a{
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  padding: 0;
}
button.nav-icon-item{
  position: fixed;
  top: 120px;
  right:50px;
  height: 85px;
  width: 85px;
  border-radius: 50%;
  background-color: #ecc22a;
  z-index: 100;
  float: none;
  margin: 0;
  border: none;
  opacity: .7;
  color: #fff;
  font-size: 12px;
  text-align: center;
}
button.nav-icon-item i{
  font-size: 40px;
  display: inline-block;
  font-family: sans-serif;
  font-style: normal;
  line-height: 1;
}
.modal-body .uk-video{
  height:600px;
}
.faq-play .faq-img-play{
  position: absolute;
  top: 45%;
  left: 40%;
  height: 45px;
}
@media (max-width: 1300px){
  .spoon-safe-img img{
    width: 100%;
  }
  .spoon-comfortable #svg-line{
    height: 62%;
    left: 9%;
  }
}
@media (max-width: 1300px){
  .spoon-stabilizer img{
    width: 80%
  }
  #Layer_1 {
    height: 78%;
  }
  .spoon-user-intro{
    margin-top: 0;
  }
  .spoon-comfortable-text{
    padding: 50% 0 0 17.6%;
  }
  .spoon-comfortable-img img{
    margin-top: -467px;
    margin-left: -383px;
    width: 137%;
  }
  .kinds-img-left img,.kinds-img-right img{
    width: 70%;
  }
  .spoon-fork-intro h4{
    margin-bottom: 35px;
  }
  .spoon-knows-intro img{
    width: 104%;
  }
  .spoon-knows-text{
    padding-top: 15%;
  }
  .spoon-design-text{
    margin-top: -135px;
  }
  .spoon-end-text{
    padding: 50% 0 0 11%;
  }
  .spoon-end-video img{
    margin-left: -70px;
    width: 90%;
  }
}

@media (max-width: 800px){
  .watch-intro-data .col-md-4{
    text-align: center;
  }
  .faq-float{
    height:60px;
    right:12px;
    top:80px;
  }
  .spoon-comfortable-text h3,button.nav-icon-item i{
    font-size: 30px;
  }
  .spoon-user-intro h3{
    font-size: 28px;
  }
  .spoon-user-intro h5{
    font-size: 18px;
    margin-bottom: 20px;
  }
  .spoon-user-intro p{
    font-size: 14px;
  }
  button.nav-icon-item{
    height: 60px;
    width: 60px;
  }
  .spoon-video .spoon-video-play{
    height: 50px;
    width: 50px;
    left: 42%;
  }
  .arrow-bottom,.dropdown-ul.dropdown-menu{
    display: none;
  }
  .dropdown-ul.dropdown-menu{
    width: 100%;
    position: absolute;
    background-color:#ccc !important;
    top: 56px;
    left: 0;
  }
  .dropdown-ul li{
    padding: 5px 0;
    width: 100%;
  }
  .sustainable-intro,.spoon-user-intro p{
    text-align: left;
  }
  .modal-body .uk-video{
   height:250px;
  }
  .faq-intro-four p{
    margin-bottom: 20px;
    line-height: 1.4;
  }
  .faq-intro-one p{
    margin-bottom: 30px;
  }
  .secondary-nav ul{
    padding-left: 0;
  }
  .secondary-nav .container{
    padding:0;
  }
  .secondary-nav ul li{
    width: 50%;
    height: 60px;
    padding-top: 17px;
    font-size: 21px;
  }
  .faq-page-content{
    padding: 25px 0;
  }
  .faq-page-content h2{
    font-size: 36px;
  }
  .faq-page-content h4{
    font-size: 24px;
    margin-bottom: 30px;
  }
  .faq-page-content ul,.faq-intro-one p.span-star,.faq-intro-one .contact-number,.faq-intro-four p{
    padding-left: 25px;
  }
  .faq-page-content ul li{
    line-height: 1.4;
    margin-bottom: 5px;
  }
  .faq-page-content ul li .dot{
    top: 9px;
  }
  .faq-intro-one p.span-star span{
    left: -2px;
  }
  .faq-intro-one{
    margin-bottom: 0px;
  }
  .faq-intro-one p.span-star,.faq-page-content .faq-intro-one ul,.faq-intro-one .find-up{
    margin-bottom: 20px;
  }
  .faq-page-content ul,.faq-page-content h2,.spoon-safe-text h5{
    margin-bottom: 25px;
  }
  button.nav-icon-item{
    right: 12px;
    margin: 0;
    top: 80px;
  }
  .navbar-nav li.dropdown .dropdown-ul.dropdown-menu>li>a{
     color: #343434;
  }
  .navbar-collapse li.dropdown a{
    padding: 5px 0;
  }
  .navbar .change-button{
    width: 100%;
    line-height: 1;
    padding: 5px 0;
  }
  .navbar-header button.navbar-toggle{
    background-color: #eaeaea;
    margin-top: 15px;
  }
  .navbar-toggle .icon-bar{
    background-color: #999;
  }
  .navbar-header a img{
    width: 70%;
  }
  .navbar-nav,.navbar-header a img{
    margin: 0px;
    margin-left: 20%;
  }
  .navbar .navbar-header{
    width: auto;
  }
  .spoon-show{
    padding: 20px 0 40px;
  }
  .spoon-show a{
    font-size: 21px;
    margin-bottom: 20px;
  }
  .kinds-img-left{
    padding-left: 10px;
  }
  .spoon-kinds{
    padding-top: 20px;
  }
  .footer{
    height: 50px;
    padding: 20px;
  }
  .spoon-comfortable #svg-line{
    height: 40%;
  }
  .spoon-show h2{
    font-size: 28px;
    margin-bottom: 15px;
  }
  .spoon-show img{
    margin-top: 20%;
  }
  .spoon-show sup, .spoon-end-text sup{
    font-size: 24px;
  }
  .spoon-safe-text h3{
    font-size: 28px;
  }
  .spoon-comfortable #svg-line{
    top: 68%;
    left: 24%;
  }
  .spoon-show p{
    font-size: 18px;
    margin-bottom: 30px;
  }
  .spoon-stabilizer{
    padding: 10px 0;
  }
  .spoon-stabilizer-img img,.spoon-stabilizer-img #Layer_1,.navbar-nav li{
    width:100%;
  }
  .spoon-stabilizer-img #Layer_1{
    height: 80%;
  }
  .spoon-stabilizer h2{
    font-size: 24px;
    margin-top: 5px;
  }
  .spoon-stabilizer h4{
    margin-bottom: 20px;
    font-size: 18px;
    width: 90%;
    margin: 10px auto;
  }
  .spoon-stabilizer p{
    font-size: 13px;
  }
  .spoon-safe{
    padding: 20px 10px;
  }
  .spoon-safe-text,.spoon-comfortable-text,.spoon-end-text,.spoon-knows-text,.spoon-design{
    padding: 0px;
  }
  .spoon-safe-img{
    margin-left: 0px;
  }
  .spoon-use-img img,.spoon-sustainable-img img,.spoon-safe-img img,.kinds-img-left img,.spoon-comfortable  img{
    width:100%;
  }
  .spoon-user-intro{
    margin-top: 40px;
  }
  .spoon-stabilizer-img,.spoon-safe-text{
    margin-bottom: 30px;
  }
  .spoon-comfortable-text p{
    margin-bottom: 5px;
  }
  .spoon-comfortable-text h5{
    margin-bottom: 20px;
    font-size: 20px;
  }
  .spoon-sustainable{
    padding-bottom: 30px;
  }
  .sustainable-intro h3{
    font-size: 30px;
  }
  .spoon-comfortable  img,.spoon-end-content img{
    margin-left: 0px;
  }
  .kinds-img-left {
    padding-left: 10px;
  }
  .spoon-comfortable{
    padding-bottom: 40px;
  }
  .sustainable-intro {
    padding: 10px;
  }
  .sustainable-intro  h5{
    margin-bottom: 15px;
    text-align: left;
  }
  .kinds-img-left img,.spoon-comfortable  img{
    margin-top: 0px;
  }
  .kinds-img-right img{
    margin:0 auto;
    width: 60%;
  }
  .kinds-img-left {
    margin-right: 0px;
    margin-top: 40px;
  }
  .kinds-img-right{
    margin-top: 27px;
  }
  .kinds-img-left ,.kinds-img-right{
    width: 50%;
    float: left;
  }
  .spoon-kinds h5{
    margin-bottom: 20px;
  }
  .spoon-kinds-text h3{
    font-size: 28px;
  }
  .spoon-kinds p.mg-b,.sustainable-intro p.mg-b,.spoon-kinds-text h3{
    margin-bottom: 15px;
  }
  .spoon-fork{
    padding: 40px 0 ;
  }
  .spoon-fork-intro img,.spoon-knows-text p{
    margin-bottom: 0px;
  }
  .spoon-fork img{
    width:65%;
  }
  .spoon-fork-intro h4{
    margin-bottom: 15px;
  }
  .spoon-knows{
    padding: 20px 0;
  }
  .spoon-end-video{
    padding:35px 0 0 0;
    position: relative;
  }
  .sustainable-intro h3{
    margin: 0 0 15px;
  }
  .spoon-design-text {
    margin-top: 10px;
  }
  .spoon-design-text p{
    font-size: 16px;
  }
  .use-img-one,.use-img-two,.use-img-three,.use-img-fort,.onepage-pagination,.spoon-fork-intro p{
    display: none;
  }
  .spoon-knows-intro  img{
    margin-left: 35px;
    width: 70%;
  }
  .spoon-knows-text p{
    font-size: 14px;
  }
  .spoon-knows-text h5{
    font-size: 18px;
    margin-bottom: 15px;
  }
  .spoon-end-content img.spoon-video-play{
    left: 0px;
  }
  .spoon-knows-text h3{
    font-size: 24px;
    line-height: 1.3;
  }
   .spoon-knows-text{
    padding:0px;
  }
  .spoon-design-text h3{
    font-size: 28px;
    margin-bottom: 15px;
  }
  .spoon-design-intro {
    padding: 35px 0;
  }
  .spoon-design-intro  img,.spoon-end-content img{
    width: 100%;
  }
  .spoon-end-text h2{
    margin-bottom: 20px;
    font-size: 36px;
  }
  .spoon-video-img img{
    top: 40%;
    position: relative;
  }
  .spoon-end-content img.spoon-video-play{
    top: 50%;
  }
  .spoon-end-text{
    margin-bottom: 45px;
  }
  .spoon-comfortable-img{
    margin-left: 0px;
  }
  .spoon-use{
    padding: 45px 0 60px 0;
  }
  .wave-circle{
    height: 20px;
    width: 20px;
  }
  .ripple{
    top: 8px;
    left: 8px;
  }
  .faq-page .spoon-show{
    padding-top: 45px;
  }
  @-webkit-keyframes rip{
    0%  {
      box-shadow:0 0 0 13px #bfbfbf,
                 0 0 0 15px #74cd6d;
      opacity: 0;
    }
    50%  {
      opacity: .6;
    }
    100% {
      box-shadow:0 0 0 25px #bfbfbf,
                 0 0 0 29px #74cd6d;
      opacity: 0.1;
    }
  }
  @-moz-keyframes rip
  {
    0%  {
      box-shadow:0 0 0 13px #bfbfbf,
                 0 0 0 15px #74cd6d;
      opacity: 0;
    }
    50%  {
      opacity: .6;
    }
    100% {
      box-shadow:0 0 0 25px #bfbfbf,
                 0 0 0 29px #74cd6d;
      opacity: 0.1;
    }
  }
  @-o-keyframes rip{
    0%  {
      box-shadow:0 0 0 13px #bfbfbf,
                 0 0 0 15px #74cd6d;
      opacity: 0;
    }
    50%  {
      opacity: .6;
    }
    100% {
      box-shadow:0 0 0 25px #bfbfbf,
                 0 0 0 29px #74cd6d;
      opacity: 0.1;
    }
  }
}





.cup h3,.cup h4,.cup h2,.cup p{
  color: #343434;
}
.cup{
  letter-spacing: 1px;
}
.cup h3{
  font-size: 40px;
  margin-bottom: 15px;
}
.cup h4{
  margin-bottom: 50px;
  font-size: 21px;
}
.cup h2{
  font-size: 56px;
}
.cup p{
  font-size: 16px;
  margin-bottom: 7px;
}
.gyenno-cup{
  background-color: #f2f2f2;
  padding: 80px 0 80px;
}
.prompt p{
  padding-left: 5px;
  margin-top: 35px;
}
.gyenno-cup span,.prompt p{
  position: relative;
}
.gyenno-cup span:after,.prompt p:after,.prompt p:before{
  font-size: 50px;
  content: "*";
  position: absolute;
  top: -14px;
}
.gyenno-cup span:after,.prompt p:after{
  left: -25px;
}
.prompt p:before{
  left: -15px;
}
.gyenno-cup img{
  display: block;
  margin:0 auto 25px;
}
.gyenno-cup-text{
  padding-top: 180px;
}
.gyenno-cup-text h2{
  margin-bottom: 50px;
}
.gyenno-cup-text h3{
  font-size: 46px;
  word-spacing: 10px;
  margin-bottom: 30px;
}
.gyenno-cup-text h3,.gyenno-cup-text h2,.gyenno-cup-text p{
  color: #5c5c5c;
}
.gyenno-cup-text p{
  font-size: 24px;
}
.cup-video{
  position: relative;
}
.cup-video .cup-video-img{
  width: 100%;
}
.cup-video .cup-video-play{
  position: absolute;
  top: 45%;
  left: 45%;
}
.cup-intro,.cup-care{
  background-color: #fff;
}
.cup-intro-text{
  padding-top: 250px;
  padding-right: 100px;
  text-align: right;
}

.cup-en .cup-intro-text{
  padding-right: 0px;
  text-align: left;
}
.cup-protect{
  background-color: #f2f2f2;
  padding: 120px 0 80px;
}
.cup-protect h4{
  margin-bottom: 120px;
}
.cup-protect-img{
  display: inline-block;
  position: relative;
}
.cup-protect-img span{
  position: absolute;
  bottom: 8%;
  width: 94%;
  height: 6px;
  border-radius: 3px;
  left: 3%;
}
.breathing-rlight{
  background-color: #fe3433;
   animation: 1s blinkings infinite alternate ease-in-out;
  -webkit-animation: 1s blinkings infinite alternate ease-in-out;
  -o-animation: 1s blinkings infinite alternate ease-in-out;
  -moz-animation: 1s blinkings infinite alternate ease-in-out;
}
@-webkit-keyframes blinkings {
  from {
    background-color: #fe3433;
    box-shadow: 0 0 5px #fe3433;
  }

  to {
    background-color: #ef2e2d;
    box-shadow: 0 0 20px #ef2e2d;
  }
}
@-moz-keyframes blinkings {
  from {
    background-color: #fe3433;
    box-shadow: 0 0 5px #fe3433;
  }

  to {
    background-color: #ef2e2d;
    box-shadow: 0 0 20px #ef2e2d;
  }
}
@-o-keyframes blinkings {
  from {
    background-color: #fe3433;
    box-shadow: 0 0 5px #fe3433;
  }

  to {
    background-color: #ef2e2d;
    box-shadow: 0 0 20px #ef2e2d;
  }
}
@keyframes blinkings {
  from {
    background-color: #fe3433;
    box-shadow: 0 0 5px #fe3433;
  }

  to {
    background-color: #ef2e2d;
    box-shadow: 0 0 20px #ef2e2d;
  }
}
.breathing-blight{
  background-color:#83dbff;
  animation: 1s blink infinite alternate ease-in-out;
  -webkit-animation: 1s blink infinite alternate ease-in-out;
  -o-animation: 1s blink infinite alternate ease-in-out;
  -moz-animation: 1s blink infinite alternate ease-in-out;
}
@-webkit-keyframes blink{
  from {
    background-color: #83dbff;
    box-shadow: 0 0 5px #83dbff;
  }

  to {
    background-color: #47c3f6;
    box-shadow: 0 0 20px #47c3f6;
  }
}
@-moz-keyframes blink{
  from {
    background-color: #83dbff;
    box-shadow: 0 0 5px #83dbff;
  }

  to {
    background-color: #47c3f6;
    box-shadow: 0 0 20px #47c3f6;
  }
}
@-o-keyframes blink{
  from {
    background-color: #83dbff;
    box-shadow: 0 0 5px #83dbff;
  }

  to {
    background-color: #47c3f6;
    box-shadow: 0 0 20px #47c3f6;
  }
}
@keyframes blink{
  from {
    background-color: #83dbff;
    box-shadow: 0 0 5px #83dbff;
  }

  to {
    background-color: #47c3f6;
    box-shadow: 0 0 20px #47c3f6;
  }
}
.cup-customization{
  background-color: #f2f2f2;
  padding: 80px 0 120px;
}
.cup-customization-intro{
  margin-bottom: 100px;
}
.cup-customization .col-md-4{
  padding-top: 38px;
}
.cup-customization img{
  margin-bottom: 30px;
}
.cup-customization p{
  padding:0 65px;
  text-align: left;
  line-height: 1.6;
}
span.red-dot{
  position: relative;
  display: block;
  width: 150px;
  margin: 25px auto ;
  font-size: 18px;
  text-align: justify;
}
span.red-dot:before{
  content: "";
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background-color: #ff2e2e;
  position: absolute;
  top: 9px;
  left: -20px;
}
.cup-care{
  padding-bottom: 80px;
}
.cup-care h3{
  margin-top: -60px;
}
.cup-care h4{
  margin-bottom: 55px;
}
.cup-care ul,.cup-safe-text ul{
  display: inline-block;
  text-align: left;
  list-style: none;
  font-size: 16px;
  padding-left: 50px;
}
.cup-care ul li{
  line-height: 2;
  padding-left: 45px;
  position: relative;
}
.cup-care ul li span.dot,.cup-safe-text ul li span.dot{
  border-radius: 50%;
  background-color: #44b68f;
  height: 6px;
  width: 6px;
  position: absolute;
  left: 25px;
  top: 13px;
}
.cup-beauty,.cup-end-video{
  background-color: #f2f2f2;
  padding:120px 0 80px;
}
.cup-end-video,.cup-safe-img,.cup-safe-text ul li{
  position: relative;
}
.cup-beauty-text{
  padding-top: 190px;
  padding-left: 70px;
}
.cup-safe{
  background-color: #fff;
  padding: 50px 0;
  text-align: center;
}
.cup-safe-img{
  display: inline-block;
  padding-right: 200px;
}
.cup-safe-img .pop{
  position: absolute;
  top: 50%;
  right: 35%;
  height: 10px;
  width: 10px;
}
.cup-safe-img .pop.pop-up{
  animation:popup 1.5s ease-in-out;
  -o-animation:popup 1.5s ease-in-out;
  -webkit-animation:popup 1.5s ease-in-out;
  -moz-animation:popup 1.5s ease-in-out;
  height: 214px;
  width: 250px;
  top: 28%;
  right: 0%;
}
@-webkit-keyframes popup{
  0%{
      top: 50%;
      right: 35%;
      height: 10px;
      width: 10px;
  }
  70%{
    height: 230px;
    width: 270px;
    top: 26%;
    right: -2%;
  }
  100%{
    height: 214px;
    width: 250px;
    top: 28%;
    right: 0%;
  }
}
@keyframes popup{
  0%{
      top: 50%;
      right: 35%;
      height: 10px;
      width: 10px;
  }
  70%{
    height: 230px;
    width: 270px;
    top: 26%;
    right: -2%;
  }
  100%{
    height: 214px;
    width: 250px;
    top: 28%;
    right: 0%;
  }
}
@-o-keyframes popup{
  0%{
      top: 50%;
      right: 35%;
      height: 10px;
      width: 10px;
  }
  70%{
    height: 230px;
    width: 270px;
    top: 26%;
    right: -2%;
  }
  100%{
    height: 214px;
    width: 250px;
    top: 28%;
    right: 0%;
  }
}
@-moz-keyframes popup{
  0%{
      top: 50%;
      right: 35%;
      height: 10px;
      width: 10px;
  }
  70%{
    height: 230px;
    width: 270px;
    top: 26%;
    right: -2%;
  }
  100%{
    height: 214px;
    width: 250px;
    top: 28%;
    right: 0%;
  }
}
.cup-safe-text ul,.cup-safe-text ul li{
  padding-left: 0px;
}
.cup-safe-text ul li{
  line-height: 2;
}
.cup-safe-text ul li span.dot{
  background-color: #bfb5aa;
  left: -15px;
}
.cup-safepin{
  background-color: #fff;
  padding-bottom: 80px;
}
.cup-safepin-text p{
  padding: 0 250px;
  line-height: 1.7;
}
.cup-health{
  background-color: #f2f2f2;
  padding-bottom: 60px;
}
.cup-health img{
  margin-bottom: 30px;
}
.cup-health p{
  line-height: 1.7;
  margin-bottom: 20px;
}
.cup-health span{
  color: #999;
}
.cup-end-text{
  padding: 250px 0 60px 0;
}
.cup-battery{
  background-color: #fff;
  padding: 40px 0;
}
.cup-battery-text h4{
  margin-bottom: 8px;
}
.cup-battery-text p{
  margin-bottom: 35px;
  font-size: 15px;
}
.lights-item {
  padding-top: 10px;
}
.lights-item span{
  height: 30px;
  width: 30px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 15px;
}
.lights-item span.blue-light{
  background-color: #83dbff;
}
.lights-item span.green-light{
  background-color: #96ed6b;
}
.lights-item span.yellow-light{
  background-color: #ffd200;
}
.lights-item span.red-light{
  background-color: #ff2625;
}
.cup-battery-p{
  padding-left: 115px;
  color: #999;
  margin-top: 50px;
}
.cup-battery-p span{
  position: absolute;
  font-size: 45px;
  top: -10px;
  left: 81px;
}

.cup-end-video .cup-video-play{
  position: absolute;
  top: 42%;
  left: 45%;
}
.cup-end-video h3{
  font-size: 46px;
}
.cup-safepin-img,.cup-battery-p{
  position: relative;
}
.cup-safepin-img img{
  width: 100%;
}
.cup-safepin-img .wave{
  position: absolute;
  top: 37%;
  left: 46.2%;
  height: 180px;
  width: 180px;
}
 .cup-safepin-img .ripple {
  -webkit-animation: pulse 2s linear infinite;
  -o-animation: pulse 2s linear infinite;
  -moz-animation: pulse 2s linear infinite;
  animation: pulse 2s linear infinite;
  border: #9fd871 solid 3px;
  border-radius: 50%;
  box-sizing: border-box;
  content: ' ';
  height: 120%;
  left: -20%;
  opacity: .6;
  position: absolute;
  top: -20%;
  -webkit-transform: scale(0.714);
  -o-transform: scale(0.714);
  -moz-transform: scale(0.714);
  transform: scale(0.714);
  width: 120%;
  z-index: 1;
}
.cup-safepin-img .ripple{
  -webkit-animation-delay: .8s;
  -o-animation-delay: .8s;
  -moz-animation-delay: .8s;
  animation-delay: .8s;
}
@-webkit-keyframes pulse {
  to {
    opacity: 0;
    -webkit-transform: scale(1.1);
  }
}
@keyframes pulse {
  to {
    opacity: 0;
    -webkit-transform: scale(1.1);
  }
}
@-o-keyframes pulse {
  to {
    opacity: 0;
    -webkit-transform: scale(1.1);
  }
}
@-moz-keyframes pulse {
  to {
    opacity: 0;
    -webkit-transform: scale(1.1);
  }
}
.cup-care-p{
  text-align: left;
  padding: 0 325px;
  line-height: 1.6;
}
.cup-care .cup-care-b{
  margin-bottom: 40px;
}
.cup-en span.red-dot{
  width:170px;
}
.cup-en .cup-protect h4{
  margin-bottom: 120px;
  text-align: left;
  padding: 0 100px;
}
.cup-en .cup-safe-text{
  margin-top: -30px;
}
.cup-en .cup-safe-text ul{
  padding: 0 220px;
}
.cup-en .cup-safe-text ul li{
  margin-bottom: 25px;
}
.cup-en .cup-beauty-text h3{
  margin-bottom: 45px;
}
.cup-en .cup-beauty-text p{
  line-height: 1.8;
  font-size: 18px;
}
.cup-en .cup-health h3{
  margin-bottom: 45px;
}
.cup-en .cup-health p{
  padding: 0 220px;
  margin-bottom: 30px;
}
.cup-en .gyenno-cup h2{
  font-size: 36px;
}

@media (max-width: 1380px){
  .cup-safepin-img .wave{
    width: 135px;
    height: 135px;
  }
}
@media (max-width: 1460px){
  .cup-safepin-img .wave{
    width: 140px;
    height: 140px;
  }
}
@media (max-width: 1300px){
  .cup-safepin-img .wave{
    width: 125px;
    height: 125px;
  }
}
@media (max-width: 786px){
  .cup-safe-text ul li span.dot{
    left: -10px;
  }
  .gyenno-cup span:after{
    content: "*";
    position: absolute;
    top: -14px;
    left: -15px;
  }
  @-webkit-keyframes popup{
    0%{
        top: 50%;
        right: 35%;
        height: 10px;
        width: 10px;
    }
    70%{
      height: 120px;
      width: 135px;
      top: 26%;
      right: 4%;
    }
    100%{
      height: 100px;
      width: 115px;
      top: 28%;
      right: 6%;
    }
  }
  @keyframes popup{
    0%{
        top: 50%;
        right: 35%;
        height: 10px;
        width: 10px;
    }
    70%{
      height: 120px;
      width: 135px;
      top: 26%;
      right: 4%;
    }
    100%{
      height: 100px;
      width: 115px;
      top: 28%;
      right: 6%;
    }
  }
  @-o-keyframes popup{
    0%{
        top: 50%;
        right: 35%;
        height: 10px;
        width: 10px;
    }
    70%{
      height: 120px;
      width: 135px;
      top: 26%;
      right: 4%;
    }
    100%{
      height: 100px;
      width: 115px;
      top: 28%;
      right: 6%;
    }
  }
  .cup-safe-img{
    padding-right: 110px;
  }
  .cup-safe-img .pop.pop-up{
    height: 100px;
    width: 115px;
    right: 6%;
  }
  footer.footer{
    height: 76px;
    font-size: 13px;
  }
  .cup-safepin-img .ripple{
    border: #9fd871 solid 2px;
  }
  .cup-safepin-img .wave{
    width: 39px;
    height: 39px;
  }
  @-webkit-keyframes pulse {
  to {
      opacity: 0;
      -webkit-transform: scale(1.5);
      transform: scale(1.5);
      -o-transform: scale(1.5);
      -moz-transform: scale(1.5);
    }
  }
  @keyframes pulse {
    to {
      opacity: 0;
      -webkit-transform: scale(1.5);
      transform: scale(1.5);
      -o-transform: scale(1.5);
      -moz-transform: scale(1.5);
    }
  }
  @-o-keyframes pulse {
    to {
      opacity: 0;
      -webkit-transform: scale(1.5);
      transform: scale(1.5);
      -o-transform: scale(1.5);
      -moz-transform: scale(1.5);
    }
  }
  @-moz-keyframes pulse {
    to {
      opacity: 0;
      -webkit-transform: scale(1.5);
      transform: scale(1.5);
      -o-transform: scale(1.5);
      -moz-transform: scale(1.5);
    }
  }
  .cup-care-p,.cup-en .cup-protect h4,.cup-en .cup-safe-text ul,.cup-en .cup-health p{
    padding: 10px 0;
  }
  .cup-en .gyenno-cup h2{
    font-size: 21px;
  }
  .gyenno-cup,.cup-customization,.cup-protect,.cup-beauty,.cup-end-video {
    padding: 20px 0;
  }
  .gyenno-cup img,.cup-beauty img,.cup-battery img,.cup-end-video img{
    height: 300px;
  }
  .gyenno-cup-text {
    padding-top: 20px;
  }
  .cup h3{
    font-size: 21px;
    margin-bottom: 15px;
  }
  .cup h2{
    font-size: 24px;
    margin-bottom: 20px;
    margin-top: 0px;
  }
  .cup h4{
    margin-bottom: 25px;
    font-size: 18px;
  }
  .gyenno-cup-text h3{
    margin-bottom: 15px;
  }
  .gyenno-cup-text p{
    font-size: 18px;
  }
  .cup-video .cup-video-play{
    height: 35px;
    width: 35px;
  }
  .cup-intro img{
    width: 100%;
  }
  .cup-intro-text,.cup-beauty-text,.cup-end-text {
    padding: 0 0 25px 0;
  }
  .cup-customization-intro{
    margin-bottom: 0px;
  }
  .cup-customization p{
    margin-bottom: 25px;
    padding: 5px 15px;
  }
  .cup-care  img{
    width: 100%;
  }
  .cup-care {
    padding-bottom: 30px;
  }
  .cup-care h3{
    margin-top: -15px;
  }
  .cup-care ul, .cup-safe-text ul{
    padding-left: 0px;
  }
  .cup-care ul li{
    padding-left: 20px;
  }
  .cup-care ul li span.dot{
    left: 5px;
  }
  .cup-protect-img img,.cup-safe-img img{
    width: 100%;
  }
  .cup-safepin-text p{
    padding: 10px 0;
  }
  .cup-safepin{
    padding-bottom: 35px;
  }
  .cup-health  img{
    width: 90%;
  }
  .cup-battery-text h4{
    margin-bottom: 5px;
  }
  .cup-battery-p{
    padding-left: 25px;
    margin-top: 15px;
  }
  .cup-battery-p span{
    left: -5px;
    font-size: 40px;
  }
  .cup-end-video{
    text-align: center;
  }
  .cup-end-video img.cup-video-play{
    height: 35px;
    width: 35px;
  }
}
@media (max-width: 380px){
  .cup-safepin-img .wave {
    width: 35px;
    height: 35px;
  }
}
@media (max-width: 325px){
  .cup-safepin-img .wave {
    width: 30px;
    height: 30px;
  }
}



.gyenno{
  background-size:100% 100% !important;
}
.gyenno img,.slick-video img{
  width: 100%;
}
.product-banner .gyenno-watch,.product-banner .banner-spoon,.product-banner .banner-cup{
  height: 800px;
  background-color: #eaeaea;
  padding: 100px 0 80px;
}
.product-banner .banner-spoon{
  padding: 100px 0 80px;
}
.product-banner ul.slick-dots{
  position:absolute;
  bottom:5%;
  left:45%;
}
.product-banner ul.slick-dots li{
  float:left;
  margin-left:20px;
  display:inline-block;
}
.product-banner ul.slick-dots li a span,.app-span{
  height:10px;
  width:10px;
  border-radius:50%;
  display:inline-block;
  background-color:#bebebe;
}
.app-span{
  display:none;
}
.product-banner ul.slick-dots li.slick-active a span,li.slick-active .app-span{
  background-color: #3dc397;
}
.gyenno-watch-text,.banner-cup-text{
  padding-top: 250px;
}
.banner-spoon-text{
  padding-top: 230px;
}
.banner-cup img{
  float: right;
}
.banner-payou img{
  margin: 0 auto;
  max-width:1280px
}
.gyenno-watch-text h3,.banner-spoon-text h3,.banner-cup-text h3{
  font-size: 46px;
  color: #5a5c5c;
  margin-bottom: 30px;
}
.gyenno-watch-text h4,.banner-spoon-text h4,.banner-cup-text h4{
  font-size: 24px;
  color: #5c5c5c;
}
.slick-video .slick-video-play{
  position: absolute;
  top: 35%;
  left :45%;
  width: auto;
  height: auto;
}
.fade-view  .about-us .teams-member,.banner-spoon-text,.gyenno-watch-text,.banner-cup-text{
  text-align: center;
}
.fade-view  .about-us .teams-member img{
  display: inline-block;
  margin-left: 30px;
  margin-top: 25px;
}
.fade-view  .about-us .teams-member img:first-child{
  margin-left: 0px;
}
.contact-way {
  background-color: #dfdfdf;
  padding: 80px 0 120px;
}
.contact-way-text h3{
  color: #000;
  font-weight: bold;
}
.contact-way-text p{
  margin-bottom: 30px;
}
.slick-video,.product-banner,.fade-view{
  position: relative;
}
.fade-view .slick-dots {
  position: absolute;
  bottom:15%;
  left: 33.5%;
}
.fade-view .slick-dots li{
  float: left;
  display: inline-block;
  margin-left: 20px;
}
.media-report,.slick-video,.slick-video img,.contact-way ,.about-us{
  height: 900px;
}
.media-report-text{
  padding-top: 180px;
  text-align: right;
}
.media-report-text h4{
  margin-bottom: 20px;
  font-size: 36px;
}
.media-report-text p{
  line-height: 1.6;
}
.about-us{
  background-color: #dfdfdf;
  padding: 0 0;
}
.media-report{
  padding: 160px 0;
}
.media-report-img{
  display: inline-block;
  position: relative;
}
.media-report-img .add-media{
  position: absolute;
  right: 40px;
  top: 50%;
}
.about-us-text{
  padding-top: 30px;
}
.about-us-text p{
  margin-bottom: 35px;
  line-height: 1.6;
  font-size: 15px;
}
.about-us:focus,.media-report:focus,.contact-way :focus,.slick-initialized .slick-slide,.slick-slide.slick-current.slick-active:focus,.index-cn .fade-view .slick-dots a:focus{
  outline: none;
}
.cup .modal-header h4{
  margin-bottom: 0;
}

.hg {
  position: relative;
  width: 116px;
  height: 136px;
  background: url('/before/image/hexagon.png') no-repeat;
  -webkit-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
}
.index-cn .hg span{
  top: 45%;
}
.hg span {
  width: 100%;
  text-align: center;
  top: 35%;
  position: relative;
  float: left;
  margin-top: -9px;
  color: #41ae89;
  z-index: 100;
  -webkit-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
}
ul.slick-dots li a:hover .hg {
  background: url("/before/image/hexagon-hover.png") no-repeat;
}
ul.slick-dots li a:hover .hg span {
  color: #41ae89;
}
.slick-active .hg {
  background: url("/before/image/hexagon-fill.png") no-repeat;
}
.slick-active .hg span{
  color: #fff;
}
.app-span{
  display:none;
}
.gon {
  padding-top: 30px;
  overflow:hidden;
  border-radius:10px;
  width: 110px;
  height: 120px;
  background:  linear-gradient(to top, transparent 0%,transparent 50%, transparent 40%, transparent 50%,transparent 100%);
  background-size: 110px 120px;
  text-align: center;
  cursor: pointer;
  transition: color 500ms ease, text-shadow 500ms ease;
  -o-transition: color 500ms ease, text-shadow 500ms ease;
  -moz-transition: color 500ms ease, text-shadow 500ms ease;
  -webkittransition: color 500ms ease, text-shadow 500ms ease;
}
.link-items{
  background-color:#343434;
  padding: 20px 0;
  text-align: center;
  border-bottom: 1px solid #222;
  color:#fff;
  font-size:16px;
}
.link-items img{
  width:100px;
}
.link-items .link-item a{
  display:inline-block;
  padding:0 20px;
  border-left:1px solid #909090;
  margin-top:25px;
  color: #909090;
  margin-bottom: 10px;
  font-size: 16px;
  text-decoration: none;
}
.link-items .link-item a:first-child{
  border-left:none;
}
.fans{
  display:inline-block;
  margin-top:25px;
  position:relative;
  color: #909090;
  vertical-align: middle;
}
.fans i{
  color:#999;
  margin-left:20px;
  font-size: 25px;
  vertical-align: middle;
}
.fans i:hover,.fans i:focus{
  color:#20a911;
}
.erwei i.fa-weixin:hover + .erweima,.erwei i.fa-weixin:focus + .erweima{
  display:block;
}
.erweima{
  display:none;
  position:absolute;
  padding:5px;
  background-color:#fff;
  bottom:35px;
  right:-42px;
  border-radius:8px;
}
.erweima:after{
  content:"";
  background-color:#fff;
  height:10px;
  width:10px;
  position:absolute;
  bottom:-5px;
  left:45%;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);		/* IE 9 */
  -webkit-transform: rotate(45deg);	/* Safari and Chrome */
  -o-transform: rotate(45deg);		/* Opera */
  -moz-transform: rotate(45deg);
}
.gyenno{
  position: relative;
}
.gyenno .down-icon{
  position: absolute;
  left: 48.5%;
  width: auto;
  -webkit-animation: down 1s infinite ease-in-out alternate;
  -o-animation: down 1s infinite ease-in-out alternate;
  -moz-animation: down 1s infinite ease-in-out alternate;
  animation: down 1s infinite ease-in-out alternate;
}

@-webkit-keyframes down{
   from {
    bottom: 90px;
    opacity: 1;
  } to {
    bottom:60px;
    opacity: 0.3;
  }
}
@-o-keyframes down{
   from {
    bottom: 90px;
    opacity: 1;
  } to {
    bottom:60px;
    opacity: 0.3;
  }
}
@-moz-keyframes down{
   from {
    bottom: 90px;
    opacity: 1;
  } to {
    bottom:60px;
    opacity: 0.3;
  }
}
@keyframes down{
   from {
    bottom: 90px;
    opacity: 1;
  } to {
    bottom:60px;
    opacity: 0.3;
  }
}
.index-en .contact-way-text p:last-child{
  word-spacing: 5px;
}
.media-report-text p{
  margin-bottom: 35px;
}
.media-report-text a{
  color: #343434;
}
.media-report-text a img{
  display: inline-block;
  margin-right: 5px;
}
.top-bottom{
  position:fixed;
  right:50px;
  bottom:50px;
  z-index:999;
  display:none;
}
.slick-track a:focus,.slick-track a:hover,.media-report-text a,.report-item-text h4 a{
  text-decoration:none;
}
.banner-spoon  img{
  width: 30%;
  margin:0 auto;
}
.media-detail ,.report-items,body.report{
  background-color: #eaeaea;
}
.media-detail-content{
  background-color: #fff;
  margin:35px auto;
  width: 980px;
  color: #666;
  padding:40px 20px;
}
.media-detail-content p{
  margin-bottom: 35px;
  line-height: 1.6;
  font-size: 18px;
}
.detail-header h3,.report-item-text h3{
  color: #3dc397;
  font-size: 36px;
  margin-bottom: 30px;
}
.media-detail-img{
  text-align: center;
  position: relative;
  margin-bottom: 30px;
}
.detail-header span{
  font-size: 16px;
}
.media-detail-img .media-detail-play{
  position: absolute;
  top: 45%;
  left: 45%;
  width: auto;
}
.detail-header{
  margin-bottom: 35px;
}
.media-detail-img img{
  width: 100%;
}
.report-item{
  background-color: #fff;
  padding: 25px;
  width: 980px;
  margin: 0 auto 40px;
}
.report-items{
  padding: 35px 0;
}

.report-item-text{
  color: #666;
  padding-top: 30px;
}
.report-item-text h4{
  margin-bottom: 25px;
}
.report-item-text h4 a{
  color: #3dc397;
}
.report-item-text p{
  font-size: 16px;
  line-height: 1.8;
}
@media (max-width: 1500px){
  .fade-view .slick-dots{
    left: 29%;
  }
  .fade-view .about-us .teams-member img{
    height: 100px;
  }
}
@media (max-width: 800px){
  .banner-cup img{
    float: none;
    text-align: center;
  }
  .top-bottom{
    bottom:20px;
    right:20px;
    height:40px;
  }
  .link-items .link-item a{
    padding:0 8px;
  }
  .product-banner ul.slick-dots{
    left:23%;
    bottom:1%;
  }
  .fans i{
    margin-left:10px;
  }
  .gyenno{
    display: none;
  }
  .product-banner .gyenno-watch, .product-banner .banner-spoon, .product-banner .banner-cup{
    height: 540px;
  }
  .product-banner .gyenno-watch{
    padding:50px 0;
  }
  .contact-way-text h3{
    font-size: 18px;
  }
  .gyenno .web-hid{
    display: block;
  }
  .report-items{
    padding-top: 25px;
  }
  .report-item{
    padding:20px 0;
  }
  .media-detail .container,.report-items .container{
    padding:0px;
  }
  .media-detail-content{
    margin:20px auto 0;
  }
  .report-item-text h4,.media-detail-content p{
    font-size: 16px;
  }
  .detail-header h3,.report-item-text h3{
    font-size: 20px;
    margin-bottom: 15px;
  }
  .media-detail-content,.media-detail-img img,.report-item,.report-item img{
    width: 100%;
  }
  .media-detail-content .media-detail-play{
    height: 35px;
    width: 35px;
  }
  .index .gyenno .down-icon{
    height: 20px;
    width: 20px;
     -webkit-animation: downs 1s infinite ease-in-out alternate;
  -o-animation: downs 1s infinite ease-in-out alternate;
  -moz-animation: downs 1s infinite ease-in-out alternate;
  animation: downs 1s infinite ease-in-out alternate;
  }
  @-webkit-keyframes downs{
  from {
    bottom: 25px;
    opacity: 1;
  } to {
    bottom:10px;
    opacity: 0.3;
    }
  }
  @-o-keyframes downs{
    from {
      bottom: 25px;
      opacity: 1;
    } to {
      bottom:10px;
      opacity: 0.3;
    }
  }
  @-moz-keyframes downs{
    from {
      bottom:25px;
      opacity: 1;
    } to {
      bottom:10px;
      opacity: 0.3;
    }
  }
  @keyframes downs{
    from {
      bottom: 25px;
      opacity: 1;
    } to {
      bottom:10px;
      opacity: 0.3;
    }
  }
  .gyenno-watch img,.banner-cup img{
    width: 55%;
    margin: 0 auto;
  }
  .banner-spoon  img{
    width: 28%;
  }
  .gyenno-watch-text,.banner-spoon-text{
    padding-top: 20px;
  }
  .gyenno-watch,.product-banner .banner-spoon,.product-banner .banner-cup{
    padding: 0;
    text-align: center;
  }
  .product-banner .banner-spoon{
    padding: 15px 0;
  }
  .banner-cup-text{
    padding: 10px 0;
  }
  .gyenno-watch-text h3,.banner-cup-text h3,.banner-spoon-text h3{
    font-size: 32px;
    margin-bottom: 10px;
  }
  .gyenno-cup-text h4{
    margin-bottom: 30px;
  }
  .media-report-img img,.slick-video img{
    width: 100%;
  }
  .fade-view .slick-dots .hg{
    display: none !important;
  }
  .fade-view .slick-dots{
    left:25%;
    bottom:0%;
  }
  .app-span{
    display:block;
  }
  .media-report-img .add-media{
    width: auto;
    height: 25px;
    right: 25px;
  }
  .media-report{
    padding: 80px 0;
  }
  .media-report-text h4{
    font-size: 30px;
  }
  .media-report-text{
    padding-top: 80px;
  }
  .about-us{
    padding: 20px 0;
  }
  .fade-view .about-us .teams-member img{
    height: 60px;
  }
  .about-us-text{
    padding-top: 30px;
  }
  .contact-way{
    padding:25px 0;
  }
  .contact-way img{
    width: 90%;
    margin: 0 auto;
  }
  .contact-way-text p{
    margin-bottom: 25px;
  }
  .slick-video img{
    height:400px;
  }
  .slick-video .slick-video-play{
    height: 35px;
    width: 35px;
  }
  .slick-video,.contact-way,.about-us,.media-report{
    height: 650px;
  }
  .index-en .slick-video,.index-en .contact-way,.index-en .about-us,.index-en .media-report{
    height: 680px;
  }
  .index-en .about-us-text{
    padding-top: 0px;
  }
  .index-en .about-us-text p{
    line-height: 1.2;
  }
  .slick-video{
    background-color: #dfdfdf;
    padding: 120px 0;
  }
  .slick-video .slick-video-play{
    top: 45%;
  }
  .contact-way-text{
  padding-left: 15px;
}
}

@media (max-width: 380px){
   .fade-view .slick-dots{
    left:23%;
  }

}

@media (max-width: 330px){
   .fade-view .slick-dots{
    left:20%;
    bottom:4%;
  }
  .banner-cup-text{
    padding: 25px 0;
  }
}




.nav-open-img, .nav-close-img{
  position: fixed;
  top: 110px;
  right: 60px;
  width: auto;
  z-index: 999;
}
.nav-close-img,.nav-items a span{
  display: none;
}
.nav-items{
  position: fixed;
  top: 76px;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  text-align: center;
  padding: 13% 0;
  display: none;
  z-index: 9;
}
.nav-items a{
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #343434;
  margin: 0 auto 30px;
  font-size: 24px;
  opacity: 0;
}
.nav-items a span{
  left: 39%;
  position: absolute;
  height: 2px;
  width: 20%;
  background-color: #3dc397;
  bottom: -5px;
}
.nav-items a span.nav-bottom{
  width: 60%;
  left:20%;
  display: block;
   animation:navbo .4s ease-in-out;
  -o-animation:navbo .4s ease-in-out;
  -moz-animation:navbo .4s ease-in-out;
  -webkit-animation:navbo .4s ease-in-out;
}
@-webkit-keyframes navbo{
  from {
    left: 39%;
    width: 20%;
    display: none;
  }
  to {
     width: 60%;
    left:20%;
    display: block;
  }
}
@-moz-keyframes navbo{
  from {
    left: 39%;
    width: 20%;
    display: none;
  }
  to {
     width: 60%;
    left:20%;
    display: block;
  }
}
@-o-keyframes navbo{
  from {
    left: 39%;
    width: 20%;
    display: none;
  }
  to {
     width: 60%;
    left:20%;
    display: block;
  }
}
@keyframes navbo{
  from {
    left: 39%;
    width: 20%;
    display: none;
  }
  to {
     width: 60%;
    left:20%;
    display: block;
  }
}
.watch-nav-noe,.watch-nav-noes,.watch-nav-two,.watch-nav-twos,.watch-nav-three,.watch-nav-threes,
.watch-nav-four,.watch-nav-fours,.watch-nav-five,.watch-nav-fives,.watch-nav-six,.watch-nav-sixs{
  opacity: 1;
  animation:navshow 1.5s ease-in-out;
  -o-animation:navshow 1.5s ease-in-out;
  -moz-animation:navshow 1.5s ease-in-out;
  -webkit-animation:navshow 1.5s ease-in-out;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;

}
@-webkit-keyframes navshow{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-moz-keyframes navshow{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes navshow{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes navshow{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.block-nav .col-md-4{
  padding:0;
}
.block-nav-item{
  position: relative;
  overflow: hidden;
}
.block-nav-item img{
  width: 100%;
}
.block-nav-item  .mask{
  position: absolute;
  top: 0;
  left: 0;
}
.block-nav-item .text-center{
  position: absolute;
  top: 33%;
  width: 100%;
  color: #fff;
  opacity: .9;
}
.watch-intro-data p span{
  position: absolute;
  font-size: 50px;
  top: -11px;
  left: -15px;
}
.block-nav-item .text-center h3{
  font-size: 32px;
}
.block-nav-item .text-center p{
  font-size: 18px;
}
.watch-video {
  position: relative;
}
.watch-video img{
  width: 100%;
}
.watch-video .watch-video-play{
  position: absolute;
  top: 45%;
  left: 49%;
  width: auto;
}
.watch-intro{
  background-color: #f2f2f2;
  padding: 30px 0 50px;
}
.watch-intro-data{
  padding:0 20px 30px;
  border-bottom: 1px solid #ccc;
}
.watch-intro-data h4{
  font-size: 24px;
}
.watch-intro-data  p{
  margin-bottom: 40px;
}
.watch-intro-data  p.none-b{
  margin-bottom: 0px;
}
.watch-intro-config{
  padding: 0 35px;
}
.watch-intro-config h3{
  margin-bottom: 30px;
}
.watch-intro-config p{
  padding-left: 20px;
  position: relative;
  font-size: 16px;
}
.watch-intro-config p:after{
  content: "";
  background-color: #717b89;
  height: 6px;
  width: 6px;
  border-radius: 50%;
  position: absolute;
  top: 7px;
  left: -10px;
}
.watch-design{
  background-color: #f3f3f3;
  padding: 120px 0;
}
.design-front-text{
  padding-top: 240px;
}
.design-front-text h3{
  font-size: 46px;
  color: #343434;
  margin-bottom: 20px;
}
.design-front-text p{
  font-size: 30px;
  color: #666;
}
.design-intro,.infor-intro{
  background-color: #fff;
  padding:60px 0;
}
.design-intro-text,.infor-intro-text{
  width: 600px;
  margin: 0 auto;
}
.design-intro-text p,.infor-intro-text p{
  font-size: 20px;
  line-height: 1.5;
}
.design-feeling{
  background-color: #f3f3f3;
  padding:35px 0 50px;
}
.infor-wirst{
  background-color: #f3f3f3;
  padding-top: 35px;
}
.design-feeling-text,.infor-wirst-text{
  width: 600px;
  margin: 0 auto;
}
.design-feeling-text h2,.infor-wirst-text h2,.infor-times-text h2{
  font-size: 34px;
  margin-bottom: 45px;
  line-height: 1.5;
}
.design-feeling-text p,.infor-wirst-text p,.infor-times-text p{
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 60px;
}
.design-feeling .col-md-7 img:first-child{
  margin-bottom: 45px;
}
.design-gallery{
  background-color: #fff;
  padding: 130px 0;
}
.design-gallery img{
  display: block;
  margin: 0 auto 40px;
}
.design-gallery p{
  padding-left: 40px;
  font-size: 18px;
  position: relative;
  color: #666;
}
.design-gallery p:after{
  content: "";
  position: absolute;
  top: 10px;
  left: 25px;
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background-color: #b9b9b9;
}
.design-next {
  background-color: #f3f3f3;
  padding: 120px 0;
}
.design-next-text{
  padding: 40px 0 0 40px;
}
.design-next-text p{
  color: #999;
  margin-bottom: 5px;
  font-size: 18px;
}
.design-next-text h3{
  margin-bottom: 35px;
  font-size: 24px;
  line-height: 1.4;
}
.design-next-text a{
  color: #3dc397;
  font-size: 18px;
}
.design-next-text a:hover{
  text-decoration: none;
}
.design-next-text a span{
  font-size: 25px;
  margin-left: 20px;
}
.design-show{
  position: relative;
}
.design-show-text{
  position: absolute;
  width: 100%;
  top: 15%;
  text-align: center;
}
.design-show-text h3{
  text-align: left;
  font-size: 46px;
  color: #fff;
  margin: 0 auto;
  display: inline-block;
  line-height: 1.4;
}
.block-nav-item:hover .block-nav-item .mask,.block-nav-item:hover .block-nav-item  .text-center{
  width: 100%;
}
.change-b.change-big{

  transition:transform 1s;
  -o-transition:-o-transform 1s;
  -moz-transition:-moz-transform 1s;
  -webkit-transition:-webkit-transform 1s;
    transform:scale(1.2);
  -o-transform:scale(1.2);
  -webkit-transform:scale(1.2);
  -moz-transform:scale(1.2);
}

.infor-notice-text span{
  padding-left: 20px;
  position: relative;
}
.infor-notice-text span:after{
  content: "*";
  position: absolute;
  font-size: 50px;
  top: -15px;
  left: 0px;
}
.information-front,.techo-front,.watch-sport{
  position: relative;
}
.information-front h2,.watch-sport h2{
  position: absolute;
  top: 20%;
  left: 20%;
  font-size: 32px;
  color: #343434;
  line-height: 1.4;
}
.watch-techo-en .techo-front h2{
  right: 25%;
  top: 25%;
}
.techo-front h2{
  right: 17%;
  position: absolute;
  top: 28%;
  font-size: 32px;
  color: #343434;
}
.information-front h2 span,.techo-front h2 span,.watch-sport h2 span{
  font-size: 46px;
  margin-right: 25px;
  font-weight: bold;
}

.infor-control{
  padding: 120px 0;
  background-color: #fff;
}
.infor-control-text{
  padding: 100px 50px 0 0;
}
.infor-control-text h2{
  margin-bottom: 35px;
  font-size: 34px;
}
.infor-control-text p{
  font-size: 18px;
  line-height: 1.5;
}
.infor-times{
  background-color: #fff;
  padding: 45px 0 20px 0;
}
.infor-times-text{
  width: 600px;
  margin: 0 auto;
}
.infor-times img{
  margin: 0 auto 15px;
  display: block;
}
.infor-times .col-md-4 p{
  line-height: 1.6;
  font-size: 16px;
  padding: 0 30px;
}
.infor-notice{
  overflow: hidden;
  padding: 120px 0;
  background-color: #f3f3f3;
}
.infor-notice-img{
  position: relative;
  display: inline-block;
}
.infor-notice-text{
  padding-top: 120px;
  width: 600px;
}
.infor-notice-text h3{
  font-size: 34px;
  margin-bottom: 35px;
}
.infor-notice-text p{
  margin-bottom: 20px;
  font-size: 18px;
  line-height: 1.6;
}
.move-hand{
  position: absolute;
  bottom: -60%;
  left: 100%;
}
.watch-infor .design-next{
  background-color: #fff;
}
.move-hand.move-hands{
  bottom: -20%;
  left: 70%;
   -webkit-animation: hands 1.5s ease-in-out ;
  -o-animation: hands 1.5s ease-in-out ;
  -moz-animation: hands 1.5s ease-in-out ;
  animation:hands 1.5s ease-in-out ;
}
 @keyframes hands{
  from{
    bottom: -60%;
    left: 100%;
  }
  to {
      bottom:-20%;
      left: 70%;
    }
}
@-o-keyframes hands{
   from{
    bottom: -60%;
    left: 100%;
  }
  to {
      bottom:-20%;
      left: 70%;
    }
}
@-webkit-keyframes hands{
   from{
    bottom: -60%;
    left: 100%;
  }
  to {
      bottom:-20%;
      left: 70%;
    }
}
.infor-map{
  position: relative;
}
.infor-map img{
  width: 100%;
}
.infor-map .paris{
  position: absolute;
  width: auto;
  top: 24%;
  left: 15%;
  opacity: 0;
}
.infor-map .beijing{
  position: absolute;
  width: auto;
  top: 34%;
  left: 39%;
  opacity: 0;
}
.infor-map .newyork{
  position: absolute;
  width: auto;
  top: 28%;
  right: 12.5%;
  opacity: 0;
}
.infor-map-text{
  position: absolute;
  width: 600px;
  left: 33.5%;
  bottom: 10%;
}
.infor-map-text h3{
  font-size: 34px;
  margin-bottom: 35px;
}
.infor-map-text p{
  font-size: 18px;
  line-height: 1.6;
}
.paris.paris-show,.beijing.beijing-show,.newyork.newyork-show{
  opacity: 1;
  -webkit-animation: shows 1.8s ease-in-out;
  -o-animation: shows 1.8s ease-in-out;
  -moz-animation: shows 1.8s ease-in-out;
  animation:shows 1.8s ease-in-out;
}
@-webkit-keyframes shows{
   from{
    opacity: 0;
  }
  to {
     opacity: 1;
    }
}
@-o-keyframes shows{
   from{
    opacity: 0;
  }
  to {
     opacity: 1;
    }
}
@keyframes shows{
   from{
    opacity: 0;
  }
  to {
     opacity: 1;
    }
}
@-moz-keyframes shows{
   from{
    opacity: 0;
  }
  to {
     opacity: 1;
    }
}
.sport-intro{
  background-color: #fff;
  padding: 60px 0;
}
.sport-intro-text,.sport-record-text{
  width: 600px;
  margin: 0 auto;
}
.sport-intro-text p,.sport-record-text p{
  font-size: 20px;
  line-height: 1.6;
}
.sport-record-text p{
  font-size: 18px;
}
.sport-record{
  background-color: #f3f3f3;
  padding: 45px 0 30px 0;
}
.sport-record-text h3{
  font-size: 34px;
  margin-bottom: 30px;
}
.sport-record-text{
  margin-bottom: 30px;
}
.sport-record-img{
  position: relative;
  width: 800px;
  margin: 0 auto;
  background-color: #fff;
  padding: 45px 0;
}
.sport-record-img img{
  display: block;
  margin: 0 auto;
}
.light-flash{
  opacity: 0;
  position: absolute;
  top: 6%;
  left: 11%;
  opacity: 0.7;
  animation:flashs .8s ease-in-out infinite alternate;
  -o-animation:flashs .8s ease-in-out infinite alternate;
  -moz-animation:flashs .8s ease-in-out infinite alternate;
  -webkit-animation:flashs .8s ease-in-out infinite alternate;
}
@-moz-keyframes flashs{
   from{
    opacity: 0;
  }
  to {
     opacity: 1;
    }
}
@-o-keyframes flashs{
   from{
    opacity: 0;
  }
  to {
     opacity: 1;
    }
}
@-webkit-keyframes flashs{
   from{
    opacity: 0;
  }
  to {
     opacity: 1;
    }
}
@keyframes flashs{
   from{
    opacity: 0;
  }
  to {
     opacity: 1;
    }
}
.sport-benefit{
  background-color: #fff;
  padding: 50px 0;
}
.sport-benefit-item{
  background-color: #f3f3f3;
  padding: 45px 0;
  margin-bottom: 40px;
}
.sport-benefit-text{
  padding: 120px 80px 0 0;
  font-size: 18px;
  line-height: 1.7;
}
.health-data{
  background-color: #f3f3f3;
  padding: 160px 0;
  color: #343434;
}
.health-data-text{
  padding-top: 60px;
}
.health-data-text h4{
  font-size: 24px;
  margin-bottom: 10px;
}
.health-data-text h3{
  font-size: 34px;
  margin-bottom: 30px;
}
.health-data-text p,.sport-power-text p{
  font-size: 18px;
  line-height: 1.7;
}
.sport-power{
  padding-top:60px;
  background-color: #fff;
}
.sport-power img{
  margin: 0 auto;
  display: block;
}
.sport-power-text{
  width: 600px;
  margin: 0 auto;
}
.sport-power-text h3{
  font-size: 34px;
  margin-bottom: 35px;
}
.sport-power-text p{
  margin-bottom: 100px;
}
.header-intro{
  background-color: #fff;
  padding: 60px 0;
}
.header-intro p{
  width: 600px;
  margin: 0 auto;
  font-size: 20px;
  line-height: 1.7;
}
.inter-transmit,.techo-special,.techo-shock{
  background-color: #f3f3f3;
  padding: 100px 0;
  overflow: hidden;
}
.intro-part{
  width: 600px;
  margin: 0 auto 50px;
  color: #343434;
}
.intro-part h3{
  font-size: 34px;
  margin-bottom: 45px;
}
.intro-part p{
  line-height: 1.6;
  font-size: 18px;
}
.watch-inter .design-next{
  background-color: #fff;
}
.inter-transmit-img{
  position: relative;
}
.inter-transmit-img span{
  background-color: #000;
  height: 7%;
  width: 14%;
  position: absolute;
  bottom: 30%;
  right: 6%;
}
.watch-inter-en .inter-transmit-img span{
  width: 16%;
}
.heart-rate{
  width: 600px;
  margin-left: -25px;
  margin-right: -15px;
  opacity: 0;
}
.heartbeat{
  position: absolute;
  top: 25%;
  right: 6%;
  width: 185px;
  height: 185px;
  display: none;
}
.inter-transmit-img .click-hand{
  position: absolute;
  left: 25%;
  top:90%;
  width: 500px;
}
.click-hand.click-hands{
  left: 10%;
  top:32%;
  -webkit-animation: clickhands 1.5s ease-in-out ;
  -o-animation: clickhands 1.5s ease-in-out ;
  -moz-animation: clickhands 1.5s ease-in-out ;
  animation:clickhands 1.5s ease-in-out ;
}

@keyframes clickhands{
  from{
      left: 25%;
      top:90%;
  }
  to {
      left: 10%;
      top:32%;
    }
}
@-o-keyframes clickhands{
  from{
      left: 25%;
      top:90%;
  }
  to {
      left: 10%;
      top:32%;
    }
}
@-moz-keyframes clickhands{
  from{
      left: 25%;
      top:90%;
  }
  to {
      left: 10%;
      top:32%;
    }
}
@-webkit-keyframes clickhands{
  from{
      left: 25%;
      top:90%;
  }
  to {
      left: 10%;
      top:32%;
    }
}
.techo-front{
  position: relative;
}
.techo-front-img{
  position: absolute;
  right: 10%;
  top: 40%;
}
.watch-techo-en  .techo-front-img{
  right: 15%;
  top: 46%;
}
.front-img{
  display: inline-block;
  padding: 25px;
}
.front-img img{
  margin-bottom: 15px;
  opacity: .6;
}
.front-img img:hover{
  opacity: .8;
}
.special-img-left{
  margin-right: -10px;
  writing-mode:horizontal-tb;
  direction:rtl;
  width: 0;
  height: 360px;
}
.special-img-left.unfold-img,.special-img-right.unfold-img{
  -webkit-animation: unfolds 1.5s ease-in-out ;
  -o-animation: unfolds 1.5s ease-in-out ;
  -moz-animation: unfolds 1.5s ease-in-out ;
  animation:unfolds 1.5s ease-in-out ;
  width: 436px;
  height: 360px;
}

.special-img-right{
  margin-left: -11px;
   width: 0px;
   height: 360px;
}
@keyframes unfolds{
  from{
      width: 0px;
      height: 360px;
  }
  to {
      width: 436px;
      height: 360px;
    }
}
@-o-keyframes unfolds{
  from{
      width: 0px;
      height: 360px;
  }
  to {
      width: 436px;
      height: 360px;
    }
}
@-webkit-keyframes unfolds{
  from{
      width: 0px;
      height: 360px;
  }
  to {
      width: 436px;
      height: 360px;
    }
}
@-moz-keyframes unfolds{
  from{
      width: 0px;
      height: 360px;
  }
  to {
      width: 436px;
      height: 360px;
    }
}
.techo-surfaces .techo-surfaces-text{
  position: absolute;
  top: 15%;
  color: #fff;
  width: 100%;
  z-index: 8;
}
.techo-surfaces-text .intro-part{
  color: #fff;
}
.techo-surfaces{
  position: relative;
}
.techo-shock .intro-part{
  padding-top: 100px;
}
.techo-shock .intro-part h3{
  line-height: 1.5;
  font-size: 34px;
}
.techo-shock .intro-part p{
  font-size: 18px;
}
.techo-attention{
  padding: 100px 0;
}
.attention-text-right{
  padding: 108px 0 0 0;
}
.techo-attention .col-md-6:first-child{
  text-align: right;
}
.attention-text-right h4{
  font-size: 24px;
  margin-top: 40px;
}
.attention-text-left h3,.attention-text-right h3{
  font-size: 34px;
  margin-bottom: 35px;
}
.attention-text-left p,.attention-text-right p{
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 2px;
}
.attention-text-left{
  padding: 260px 0 0 20px;
}
.techo-safety,.care-target,.care-family{
  padding: 80px 0;
  background-color: #f3f3f3;
  overflow: hidden;
}
.techo-safety .container-fluid{
  padding: 0px;
}
.techo-safety .intro-part{
 padding: 200px 0 0 50px;
 margin: 0;
}
.techo-safety-img{
  position: relative;
}
.techo-safety-img .wave{
  position: absolute;
  top: 53.5%;
  left: 70.6%;
  height: 180px;
  width: 180px;
}
 .techo-safety-img .ripple {
  -webkit-animation: pulse 2s linear infinite;
  animation: pulse 2s linear infinite;
  border: #9fd871 solid 3px;
  border-radius: 50%;
  box-sizing: border-box;
  content: ' ';
  height: 120%;
  left: -20%;
  opacity: .8;
  position: absolute;
  top: -20%;
  -webkit-transform: scale(0.714);
  transform: scale(0.714);
  width: 120%;
  z-index: 1;
}
.techo-safety-img .ripple{
  -webkit-animation-delay: .8s;
  -o-animation-delay: .8s;
  animation-delay: .8s;
  -moz-animation-delay: .8s;
}
.techo-surfaces-img{
  position: relative;
}
.techo-surfaces-img #svg-lines{
  position: absolute;
  bottom: 1%;
  left: -13.5%;
  height: 35%;
}
.care-front {
  position: relative;
}
.care-front h2{
  position: absolute;
  top:26%;
  left: 24.5%;
  font-size: 32px;
  color: #fff;
}
.care-front h2 span{
  font-size: 46px;
  margin-right: 35px;
}
.care-target .intro-part p{
  margin-bottom: 65px;
}
.watch-techo-en .techo-surfaces-img #svg-line-small{
  left: 3%;
}
.watch-techo-en .techo-surfaces-img #svg-lines{
  left: -2%;
}
.techo-surfaces-img #svg-line-small{
  position: absolute;
  bottom: 22%;
  left: -7%;
  height: 18%;
}
.care-target-img{
  width: 800px;
  margin: 0 auto;
  position: relative;
}
.care-health{
  padding: 100px 0;
}
.care-health .intro-part{
  width: 500px;
  margin: 180px auto 0;
}
.care-family-img {
  position: relative;
}
.care-family .intro-part{
  width: 500px;
  margin: 100px auto 0;
}
.care-hand{
  position: absolute;
  top: 90%;
  left: 90%;
  width: 500px;
}
.care-hand.care-hands{
  top: 60%;
  left: 60%;
  -webkit-animation: carehand 1.5s ease-in-out ;
  -o-animation: carehand 1.5s ease-in-out ;
  -moz-animation: carehand 1.5s ease-in-out ;
  animation:carehand 1.5s ease-in-out ;
}
@-moz-keyframes carehand{
  from{
      top: 90%;
      left: 90%;
  }
  to {
      top: 60%;
      left: 60%;
    }
}
@keyframes carehand{
  from{
      top: 90%;
      left: 90%;
  }
  to {
      top: 60%;
      left: 60%;
    }
}
@-o-keyframes carehand{
  from{
      top: 90%;
      left: 90%;
  }
  to {
      top: 60%;
      left: 60%;
    }
}
@-webkit-keyframes carehand{
  from{
      top: 90%;
      left: 90%;
  }
  to {
      top: 60%;
      left: 60%;
    }
}
.techo-shock-img{
  position: relative;
}
.shock{
  position: absolute;
  top: 11%;
  left: 13%;
  opacity: 0;
}
.shock.shocks{
   animation: shocks 1.2s infinite ease-in-out;
  -moz-animation:  shocks 1.2s infinite ease-in-out;
  -webkit-animation:  shocks 1.2s infinite ease-in-out;
  -o-animation:  shocks 1.2s infinite ease-in-out;
}
@keyframes shocks {
  0%{
    opacity: 0;
  }
  25%{
    opacity: .2;
    transform:scale(1.2,1.2);
  }
  50%{
    transform:scale(1.4,1.4);
    opacity: .6;
  }
  75%{
    opacity: .2;
    transform:scale(1.6,1.6);
  }
  100%{
    opacity: 0;
    transform:scale(1.7,1.7);
  }
}
@-webkit-keyframes shocks {
 0%{
    opacity: 0;
  }
  25%{
    opacity: .2;
    transform:scale(1.2,1.2);
  }
  50%{
    transform:scale(1.4,1.4);
    opacity: .6;
  }
  75%{
    opacity: .2;
    transform:scale(1.6,1.6);
  }
  100%{
    opacity: 0;
    transform:scale(1.7,1.7);
  }
}
@-moz-keyframes shocks {
 0%{
    opacity: 0;
  }
  25%{
    opacity: .2;
    transform:scale(1.2,1.2);
  }
  50%{
    transform:scale(1.4,1.4);
    opacity: .6;
  }
  75%{
    opacity: .2;
    transform:scale(1.6,1.6);
  }
  100%{
    opacity: 0;
    transform:scale(1.7,1.7);
  }
}
@-o-keyframes shocks {
  0%{
    opacity: 0;
  }
  25%{
    opacity: .2;
    transform:scale(1.2,1.2);
  }
  50%{
    transform:scale(1.4,1.4);
    opacity: .6;
  }
  75%{
    opacity: .2;
    transform:scale(1.6,1.6);
  }
  100%{
    opacity: 0;
    transform:scale(1.7,1.7);
  }
}
.health-target{
  position: absolute;
  top: 15%;
  left: 43%;
  opacity: 0;
}
.health-target.health-targets{
  opacity: 1;
   animation: targets 1.1s ease-in-out;
  -moz-animation:  targets 1.1s ease-in-out;
  -webkit-animation:  targets 1.1s ease-in-out;
  -o-animation:  targets 1.1s ease-in-out;
}
@keyframes targets {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes targets {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-moz-keyframes targets {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes targets {
  from {
    opacity: 0;
  }
  to {
   opacity: 1;
  }
}
.target-dot-1,.target-dot-2,.target-dot-3,.target-dot-4,.target-dot-5,.target-dot-6,.target-dot-7,.target-dot-8,.target-dot-9,.target-dot-10{
  position: absolute;
  z-index: 9;
  height: 15px;
  display: none;
}
.target-dot-1{
  bottom: 19%;
  left: 10.5%;
}
.target-dot-2{
  bottom: 35%;
  left: 15%;
}
.target-dot-3{
  bottom: 24%;
  left: 25.5%;
}
.target-dot-4{
  bottom: 48%;
  left: 36.5%;
}
.target-dot-5{
  top: 25%;
  left: 41%;
}
.target-dot-6{
  bottom: 36%;
  right: 42%;
}
.target-dot-7{
  bottom: 30%;
  right: 27%;
}
.target-dot-8{
  bottom: 48%;
  right: 19.5%;
}
.target-dot-9{
  bottom: 53%;
  right: 12.2%;
}
.target-dot-10{
  bottom: 56%;
  right: 4.5%;
}
#largy{
  position: absolute;
  bottom: -32%;
  height: 215%;
  left: -56.5%;
  width: 214%;
}

.e3_polylines {
  stroke-dasharray: 2000;
  stroke-dashoffset: 0;
  animation: dashs 10s linear ;
  -moz-animation:  dashs 10s linear;
  -webkit-animation:  dashs 10s linear;
  -o-animation:  dashs 10s linear;
}
@keyframes dashs {
  from {
    stroke-dashoffset: 2000;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@-moz-keyframes dashs {
  from {
    stroke-dashoffset: 2000;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@-o-keyframes dashs {
  from {
    stroke-dashoffset: 2000;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes dashs {
  from {
    stroke-dashoffset: 2000;
  }
  to {
    stroke-dashoffset: 0;
  }
}
.inter-front{
  position: relative;
}
.inter-front h2{
  position: absolute;
  top: 20%;
  left: 20%;
  font-size: 34px;
  color: #fff;
  line-height: 1.5;
}
.inter-front h2 span{
  font-size: 46px;
}
.care-target-img .app-target{
  display: none;
  width: 100%;
}

.product-banner a h4{
  color: #343434;
}


@media (max-width: 1480px){
  .information-front h2,.techo-front h2,.watch-sport h2{
    font-size:28px;
  }
  .techo-front h2{
    right: 13%;
  }
  .watch-techo-en .techo-front h2{
    right: 20%;
    top: 20%;
  }
  .techo-front h2 span,.information-front h2 span,.watch-sport h2 span{
  font-size: 40px;
  }
  .design-show-text h3{
    font-size: 40px;
  }
  .watch-techo-en .techo-surfaces-img #svg-line-small{
    left: -11%;
  }
  .watch-techo-en .techo-surfaces-img #svg-lines{
    left: -16%;
  }
   .techo-safety .intro-part{
    padding: 130px 0 0 50px ;
  }
  .techo-safety-img .wave{
    top: 54%;
    left: 76%;
    height: 140px;
    width: 140px;
  }
  .techo-safety-img img{
    width: 100%;
  }
  .front-img{
    padding: 15px;
  }
  .front-img img{
    width: 90px;
  }
  .care-front h2,.inter-front h2{
    font-size: 27px;
  }
  .care-front h2 span,.inter-front h2 span{
    font-size: 32px;
  }
   .infor-map-text{
    left: 30%;
    bottom: 2%;
  }
  .infor-map-text h3{
    font-size: 32px;
    margin-bottom: 30px;
  }
  .infor-map .paris{
    width: 120px;
    top: 20%;
    left: 15%;
  }
  .infor-map .beijing{
    width: 120px;
    top: 30%;
    left: 39%;
  }
  .infor-map .newyork{
    width: 120px;
    top: 25%;
    right: 11.5%;
  }
  .design-feeling-text h2, .infor-wirst-text h2, .infor-times-text h2{
    font-size: 34px;
  }
}
@media (max-width: 1380px){
  .information-front h2 span,.techo-front h2 span,.watch-sport h2 span{
    font-size: 36px;
  }
  .design-show-text h3{
    font-size: 36px;
  }
  .watch-techo-en .techo-surfaces-img #svg-line-small{
    left: 14%;
  }
  .watch-techo-en .techo-surfaces-img #svg-lines{
    left: -19%;
  }
  .attention-text-right{
    margin-right: 0px;
  }
   .techo-safety .intro-part{
    padding: 130px 70px 0 10px ;
  }
  .techo-safety-img .wave{
    top: 54%;
    left: 76%;
    height: 130px;
    width: 130px;
  }
  .front-img img{
    width: 80px;
  }
  .infor-map-text{
    left: 28%;
  }
  .infor-map .paris{
    top: 19%;
    left: 15%;
  }
  .infor-map .beijing{
    top: 29%;
    left: 39%;
  }
  .infor-map .newyork{
    top: 23%;
    right: 11.5%;
  }
   .care-front h2,.inter-front h2{
    font-size: 24px;
  }
  .care-front h2 span,.inter-front h2 span{
    font-size: 32px;
  }
}
@media (max-width: 1300px){
  .watch-techo-en .techo-surfaces-img #svg-line-small{
    left: -16%;
  }
  .watch-techo-en .techo-surfaces-img #svg-lines{
    left: -23%;
  }
  .infor-map .paris{
    top: 17%;
    left: 15%;
  }
  .infor-map .beijing{
    top: 27%;
    left: 39%;
  }
  .infor-map .newyork{
    top: 21%;
    right: 11.5%;
  }
  .infor-map-text{
    left: 27%;
    bottom: 2%;
  }
  .infor-map-text h3{
    font-size: 32px;
    margin-bottom: 30px;
  }
}
@media (max-width: 800px){
  .inter-transmit-img span{
    right: 13%;
    width: 15%;
  }
  .watch-inter-en .inter-transmit-img span{
    width: 21%;
    right: 10%;
  }
  .front-img img{
    width:20px;
  }
  .front-img{
    padding:3px;
  }
  .front-img p{
    display:none;
  }
  .information-front h2 span, .techo-front h2 span,.watch-sport h2 span{
    font-size: 12px;
    margin-right: 5px;
  }
  .information-front h2, .techo-front h2,.watch-sport h2 {
    font-size: 8px;
  }
  .watch-sport h2 {
    left: 5%;
  }
  .techo-front h2{
    right: 5%;
    top: 14%;
  }
  .watch-techo-en .techo-front h2{
    right: 8%;
  }
  .design-show-text h3{
    font-size: 12px;
  }
  .special-img-left{
   height: 120px;
}
.special-img-left.unfold-img,.special-img-right.unfold-img{
  width: 115px;
  height: 120px;
}
.special-img-right{
  margin-left: -11px;
   width: 0px;
   height: 120px;
}

@keyframes unfolds{
  from{
      width: 0px;
      height: 120px;
  }
  to {
      width: 115px;
      height: 120px;
    }
}
@-o-keyframes unfolds{
   from{
      width: 0px;
      height: 120px;
  }
  to {
      width: 115px;
      height: 120px;
    }
}
@-webkit-keyframes unfolds{
   from{
      width: 0px;
      height: 120px;
  }
  to {
      width: 115px;
      height: 120px;
    }
}
@-moz-keyframes unfolds{
   from{
      width: 0px;
      height: 120px;
  }
  to {
      width: 115px;
      height: 120px;
    }
}
  .techo-surfaces-text .intro-part{
    color: #343434;
    padding: 20px 10px;
  }
  .techo-surfaces-text .intro-part h3,.techo-shock .intro-part h3{
    font-size: 24px;
  }
  .techo-shock img,.techo-attention img{
    width: 80%;
  }
  .techo-surfaces .techo-surfaces-text{
    top: 100%;
  }
  .techo-attention img{
    display: block;
    margin: 0 auto;
  }
  .techo-shock .intro-part{
    padding-top: 280px;
  }
  .techo-safety, .care-target, .care-family,.care-health,.inter-transmit, .techo-special, .techo-shock,.techo-attention{
    padding: 30px 0;
  }
  .techo-safety-img img{
    width: 80%;
  }
  .techo-safety-img .wave{
    top: 54%;
    left: 61%;
    height: 65px;
    width: 65px;
  }
  .techo-safety .intro-part{
    padding: 15px;
  }
  .techo-safety .intro-part h3{
    font-size: 24px;
  }
  .techo-special-img img{
    width: 30%;
  }
  .attention-text-left,.attention-text-right{
    padding: 0px;
  }
  .attention-text-left h3, .attention-text-right h3{
    font-size: 24px;
  }
  .care-health .intro-part{
    width: auto;
    margin: 0px;
  }
  .care-health img{
    width: 100%;
  }
  .care-family-img img{
    width: 80%;
  }
  .care-family .intro-part{
    width: auto;
    margin: 100px 0 0 0;
  }
  .care-target-img img{
    display: none;
  }
  .care-target-img{
    width: 100%;
  }
  #largy{
    display: none;
  }
  .care-target-img .app-target{
  display: block;
  }
  .care-front h2,.inter-front h2{
    font-size: 16px;
    left: 15%;
    top: 15%;
  }
  .care-front h2 span,.inter-front h2 span{
    font-size: 21px;
  }
  .block-nav-item .text-center h3{
    font-size: 24px;
  }
  .block-nav-item .text-center p{
    font-size: 16px;
  }
  .block-nav-item .text-center{
    top: 23%;
  }
  .watch-video .watch-video-play{
    height: 50px;
    width: 50px;
    top: 38%;
    left: 41%;
  }
  .watch-intro-data img{
    width: 60%;
    margin-bottom: 40px;
  }
  .watch-intro-data p{
    margin-bottom: 25px;
  }
  .watch-intro-config h3{
    font-size: 18px;
  }
  .prompt p{
    padding-left: 20px;
  }
  .prompt p:before{
    left: 0px;
  }
  .prompt p:after{
    left: -15px;
  }
  .watch-design{
    padding: 25px 0;
  }
  .design-front img{
    width: 100%;
  }
  .design-front-text{
    padding-top: 30px;
  }
  .design-front-text h3{
    font-size: 32px;
  }
  .design-front-text p{
    font-size: 18px;
  }
  .design-intro-text, .infor-intro-text,.design-feeling-text, .infor-wirst-text{
    width: auto;
  }
  .design-intro-text p, .infor-intro-text p,.design-next-text p{
    font-size: 17px;
  }
  .design-feeling-text p, .infor-wirst-text p, .infor-times-text p,.attention-text-left p, .attention-text-right p,.infor-control-text p,.infor-notice-text p,.techo-shock .intro-part p,.intro-part p{
    font-size: 16px;
  }
  .design-feeling-text h2, .infor-wirst-text h2, .infor-times-text h2{
    font-size: 20px;
    margin-bottom: 20px;
  }
  .design-feeling  .col-md-5  img,.design-feeling .col-md-7  img,.design-next img, .infor-wirst img{
    width: 100%;
  }
  .design-feeling  .col-md-5  img,.design-feeling .col-md-7 img:first-child{
    margin-bottom: 20px;
  }
  .design-gallery{
    padding: 30px 0;
  }
  .design-gallery .col-md-3{
    margin-bottom: 40px;
  }
  .design-gallery img{
    width: 60%;
    margin-bottom: 20px;
  }
  .design-next{
    padding: 30px 0;
  }
  .design-next-text{
    padding: 30px 0 0 0;
  }
  .design-next-text h3{
    font-size: 18px;
    margin-bottom: 15px;
    margin-top: 5px;
  }
  .design-next-text p{
    margin-bottom: 8px;
  }
  .design-next-text a{
    font-size: 14px;
  }
  .design-intro, .infor-intro{
    padding: 25px 0;
  }
  .design-feeling-text h2, .infor-wirst-text h2, .infor-times-text h2,.infor-control-text h2,.infor-map-text h3{
    font-size: 24px;
  }
  .information-front .nav-open-img, .information-front .nav-close-img{
    width: 25px;
    top: 75px;
    right: 20px;
  }
  .infor-control{
    padding: 25px 0;
  }
  .infor-control-text h2{
    margin-bottom: 25px;
  }
  .infor-control-text{
    padding: 0 0 20px 0;
  }
  .infor-control img{
    width: 65%;
  }
  .infor-map{
    height: 520px;
    background-color: #f3f3f3;
  }
  .infor-map .paris{
    width: 65px;
    top: 10%;
    left: 15%;
  }
  .infor-map .beijing{
    width: 65px;
    top: 17%;
    left: 39%;
  }
  .infor-map .newyork{
    width: 65px;
    top: 12%;
    right: 11.5%;
  }
  .infor-map-text{
    left: 1%;
    bottom: 6%;
    width: auto;
    padding: 0 15px;
  }
  .infor-map-text p{
    font-size: 16px;
  }
  .infor-times{
    padding: 25px 0;
  }
  .infor-times-text{
    width: auto;
  }
  .design-feeling-text p, .infor-wirst-text p, .infor-times-text p{
    margin-bottom: 30px;
  }
  .infor-times .col-md-4{
    margin-bottom: 35px;
  }
  .infor-notice-img img{
    width: 75%;
    display: block;
    margin: 0 auto;
  }
  .infor-notice-img .move-hand{
    width: 160%;
  }
  .move-hand.move-hands{
    bottom: -28%;
    left: 68%;
  }
   @keyframes hands{
    from{
      bottom: -60%;
      left: 100%;
    }
    to {
        bottom:-28%;
        left: 68%;
      }
  }
  @-o-keyframes hands{
     from{
      bottom: -60%;
      left: 100%;
    }
    to {
        bottom:-28%;
        left: 68%;
      }
  }
  @-webkit-keyframes hands{
     from{
      bottom: -60%;
      left: 100%;
    }
    to {
        bottom:-28%;
        left: 68%;
      }
  }
  .infor-notice-text{
    width: auto;
    padding-top: 60px;
  }
  .infor-notice-text h3 {
    font-size: 24px;
    margin-bottom: 25px;
  }
  .infor-notice-text p{
    font-size: 14px;
  }
  .infor-notice{
    padding: 40px 0;
  }
  .infor-times .col-md-4 p{
    padding:0 5px;
  }
   .sport-intro,.header-intro{
    padding: 30px 0;
  }
  .sport-intro-text,.sport-intro-text, .sport-record-text{
    width: auto;
  }
  .watch .gyenno-watch {
    padding: 0px;
  }
  .sport-intro-text p{
    font-size: 17px;
  }
  .sport-record-text p{
    font-size: 16px;
  }
  .sport-record{
    padding:  15px;
  }
  .sport-record-text h3{
    font-size: 24px;
    margin-bottom: 20px;
  }
  .sport-record-img img{
    width: 90%;
  }
  .sport-record-img,.sport-power-text,.header-intro p,.intro-part{
    width: auto;
  }
  .header-intro p{
    font-size: 17px;
  }
  .light-flash{
    top: 15%;
    left: 6%;
  }
  .intro-part h3{
    font-size: 24px;
    margin-bottom: 30px;
  }
  .sport-benefit-item img{
    width: 85%;
    margin-bottom: 25px;
  }
  .sport-benefit-text{
    padding: 0px 10px;
    font-size: 16px;
  }
  .sport-benefit,.inter-transmit{
    padding: 20px 0;
  }
  .health-data{
    padding: 30px 0;
  }
  .health-data img{
    width: 80%;
  }
  .health-data-text h4{
    font-size: 21px;
    margin-bottom: 0px;
  }
  .health-data-text h3{
    margin-bottom: 25px;
    margin-top: 15px;
    font-size: 24px;
  }
  .health-data-text p, .sport-power-text p{
    font-size: 16px;
    line-height: 1.5;
  }
  .sport-power{
    padding-top: 20px;
  }
  .sport-power-text h3{
    font-size: 24px;
    margin-bottom: 25px;
  }
  .sport-power img{
    width: 80%;
  }
  .nav-open-img, .nav-close-img{
    width: 30px;
    top: 75px;
    right: 20px;
  }
  .nav-items{
    top: 65px;
  }
  .nav-items{
    padding: 65px 0;
  }
  .inter-transmit-img  img{
    width: 30%;
  }
  .heart-rate{
    margin-left: -5px;
    margin-right: -5px;
  }
  .inter-transmit-img img.heartbeat{
    width: 86px;
    height: 86px;
    top: 25%;
    right: 9%;
  }
  .inter-transmit-img .click-hand{
    width: 200px;
  }
}
@media (max-width: 380px){
  .inter-transmit-img img.heartbeat{
    height: 75px;
    width:75px;
    right: 9%;
    top: 26%;
  }
  .techo-safety-img .wave{
    top: 53%;
    left: 60.2%;
  }

}
@media (max-width: 360px){
  .product-banner .gyenno-watch, .product-banner .banner-spoon, .product-banner .banner-cup{
    height: 500px;
  }
  .inter-transmit-img img.heartbeat {
    width: 65px;
    height: 65px;
    top: 26%;
    right: 9%;
  }
  .watch-techo-en .techo-front h2{
    right: 3%;
  }
  .watch-techo-en .techo-front-img{
    right: 11%;
    top: 50%;
  }
   .techo-front h2{
    right: 3%;
  }
  .techo-safety-img .wave{
    top: 53%;
    left: 60%;
    height: 55px;
    width: 55px;
  }
}
/*media样式*/
.report-item img {
  width: 100%;
  height: 100%;
}
.media-detail ,.report-items,body.report{
  background-color: #eaeaea;
}
.media-detail-content{
  background-color: #fff;
  margin:35px auto;
  /*width: 980px;*/
  padding: 40px;
  color: #666;
}
.media-detail-content img {
  display: block;
  margin: 0 auto;
  width: 80%;
}
.media-detail-content p{
  margin-bottom: 35px;
  line-height: 1.6;
  font-size: 18px;
}
.detail-header h3,.report-item-text h3{
  font-size: 36px;
  margin-bottom: 30px;
}
.media-detail-img{
  text-align: center;
  position: relative;
  margin-bottom: 30px;
}
.detail-header span{
  font-size: 16px;
}
.media-detail-img .media-detail-play{
  position: absolute;
  top: 45%;
  left: 45%;
  width: auto;
}
.detail-header{
  margin-bottom: 35px;
  position: relative;
}
.media-detail-img img{
  width: 100%;
}
.report-item{
  background-color: #fff;
  padding: 25px;
  margin: 0 auto 40px;
}
.report-items{
  padding: 35px 0;
}

.report-item-text{
  color: #666;
  /*padding-top: 30px;*/
}
.report-item-text h4{
  margin-bottom: 25px;
}
.report-item-text p{
  font-size: 16px;
  line-height: 1.8;
}
.media-report-text p{
  margin-bottom: 35px;
}
.media-report-text a{
  color: #343434;
}
.media-report-text a img{
  display: inline-block;
  margin-right: 5px;
}

a.back-home {
  font-size: 1.2em;
  position: absolute;
  left: 0;
}
ol.page-navigator, ul.post-near {
  padding: 0;
  list-style: none;
  display: inline-block;
}

.abs-right {
  position: absolute;
  right: 0px;
}

ol.page-navigator li, ul.post-near li {
  float: left;
  padding: 0 10px;
}

ol.page-navigator li.current a {
  color: #666;
  font-weight: bold;
}
a{
  color: #3dc397;
}
a:hover, a:focus{
  color: #45DCAA;;
  text-decoration: none;
}
@media (max-width: 800px){
  .link-items .link-item a{
    padding:0 8px;
  }
  .report-items{
    padding-top: 25px;
  }
  .report-item{
    padding:20px 0;
  }
  .media-detail .container,.report-items .container{
    padding:0px;
  }
  .media-detail-content{
    margin:20px auto 0;
  }
  .report-item-text h4,.media-detail-content p{
    font-size: 16px;
  }
  .detail-header h3,.report-item-text h3{
    font-size: 20px;
    margin-bottom: 15px;
  }
  .media-detail-content,.media-detail-img img,.report-item,.report-item img{
    width: 100%;
  }
  .media-detail-content .media-detail-play{
    height: 35px;
    width: 35px;
  }
  .media-report-img img,.slick-video img{
    width: 100%;
  }
  .media-report-img .add-media{
    width: auto;
    height: 25px;
    right: 25px;
  }
  .media-report{
    padding: 80px 0;
  }
  .media-report-text h4{
    font-size: 30px;
  }
  .media-report-text{
    padding-top: 80px;
  }
}
#foot_app{position:relative}#foot_app>div{position:absolute;z-index:1000000;width:180px;top:-120px;left:-55px;font-size:16px;background-color:#3b3b3b;color:#fff;padding:15px;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0;-moz-transform:scale(.001, .001);-ms-transform:scale(.001, .001);-webkit-transform:scale(.001, .001);transform:scale(.001, .001);-moz-transition:all .3s ease;-o-transition:all .3s ease;-webkit-transition:all .3s ease;transition:all .3s ease;-moz-transform-origin:50% 100%;-ms-transform-origin:50% 100%;-webkit-transform-origin:50% 100%;transform-origin:50% 100%}#foot_app>div>hr{margin:10px 0}#foot_app>div:after{content:"";position:absolute;border-top:18px solid rgba(59,59,59,0.5);border-bottom:18px solid  transparent;border-left:10px solid  transparent;border-right:10px solid  transparent;top:96px;left:50%;-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-webkit-transform:translateX(-50%);transform:translateX(-50%)}#foot_app:hover>div{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=60);opacity:.6;-moz-transform:scale(1, 1);-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);transform:scale(1, 1)}