.js.no-touch.localstorage.no-ios {
  overflow-x: hidden;
  -ms-overflow-x: hidden;
}
.container * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
li {
  list-style-type: none;
}
.catalog-product-view .container {
  padding: 0; 
}
.catalog-product-view .container h2 {
  font-size: 2em;
  text-transform: none;
}
.catalog-product-view  .container img {
  width: 100%;
  object-fit: cover;
}
.catalog-product-view  .container p {
  line-height: 1.2em;
  margin-bottom: 0;
}
.container > div {
  width: 100%;
}
.flex {
  display: flex;
  flex-flow: row nowrap;
  // justify-content: center;
}
.flex .left, .flex .right {
  flex: 0 1 50vw;
  text-align: left;
  position: relative;
}
.content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 10%;
}
.img_merge {
  position: relative;
}
.img_merge .img_front, 
.img_merge .img_front1, .img_merge .img_front2 {
  position: absolute;
  top: 0;
  left: 0;
}
/*btn
------------------------------------*/ 
.catalog-product-view .list_btn{
  text-transform: uppercase;
  text-decoration: none;
}
.btn.learn_btn {
  background-color: #55C9C3;
  font-size: 14px;
}
.btn.learn_btn:after {
  font-family: "entypo" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\e75e";
  display: inline-block;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: white;
  text-align: center;
  line-height: 25px;
  color: #55C9C3;
  margin-left: 10px;
}
/*hr
------------------------------------*/ 
.catalog-product-view .hr {
  margin: 2px 0 35px 0 !important;
}
@media screen and (max-width: 1199px) {
  .catalog-product-view .hr {
    margin: 2px 0 15px 0 !important;
  }
}
@media screen and (max-width: 420px) {
  .catalog-product-view .hr {
    margin: 2px 0 5px 0 !important;
  }
}
@media screen and (max-width: 767px) {
  .flex {
    flex-flow: column nowrap;
  }
  .flex .left, .flex .right {
    flex: none;
  }
  .content {
    position: static;
    transform: translateY(0);
  }
  .catalog-product-view .container h2{
    font-size: 1.8em;
  }
  p {
    font-size: 1em;
  }
}
/*detail
------------------------------------*/ 
.detail .left img {
  height: 90%;
  margin: 5% auto;
  display: block;
  opacity: 0;
}
.detail .right h2 {
  font-weight: bold;
}
.detail .right h4 {
  margin-bottom: 20px;
}
.detail .right li {
  margin-left: 16px;
  text-indent: -10px;
}
.detail .right li:before {
  font-family: "entypo" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\2605"; 
  display: inline-block;
  color: #F5AF30;
  margin-right: 5px;
  line-height: 2.8em;
}
.detail .price-box .price {
  color: #4c4c4c;
  display: block;
  font-weight: bolder;
  margin: 20px 0;
  font-size: 1.3em;
}
.catalog-product-view .product-view .add-to-cart {
  margin: 0;
  padding: 0; 
}
.catalog-product-view .product-view .add-to-cart .qty-wrapper {
  display: inline;
}
.catalog-product-view .product-view .detail .add-to-cart .qty-wrapper input.qty {
  height: 40px;
}
.price-group {
  display: flex;
}
.price-rrp {
  line-height: 71px;
  margin-right: 10px;
  font-size: 15px;
}
.detail .right .content input {
  border-radius: 15px;
  border: 1px solid #E5BA38;
  width: 85px;
  font-family: Arial, sans-serif;
}
.add-to-cart-buttons {
  float: right;
}
@media screen and (max-width: 999px) {
  .content {
    left: 0;
  }
  .detail {
    padding-bottom: 50px;
  }
}
@media screen and (max-width: 767px) {
  .detail .price-box .price {
    text-align: center;
  }
  .catalog-product-view .product-view .add-to-cart .qty-wrapper,
  .catalog-product-view .product-view .add-to-cart .qty-wrapper input.qty {
    float: none;
  }
  .price-group {
    justify-content: center;
  }
}
@media screen and (max-width: 767px) {
  .detail .price-box .price {
    text-align: center;
  }
  .catalog-product-view .product-view .add-to-cart .qty-wrapper,
  .catalog-product-view .product-view .add-to-cart .qty-wrapper input.qty {
    float: none;
  }
}

/*banner1
 -----------------------------------*/ 
 /*video
 -----------------------------------*/ 
.video {
  height: 500px;
  margin-bottom: 50px;
}
.video .left .slideshow.product{
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.container .video .slideshow-container .slideshow li.slider img.play_btn {
  position: absolute;
  width: 10%;
  top: 50%;
  left: 50%;
  z-index: 10;
  transform: translateX(-50%) translateY(-50%);
  cursor: pointer;
}
.video .slick-prev:before, .video .slick-next:before {
  color: #4c4c4c;
}
.video .slick-next {
  right: -80px;
}
.video .slick-prev {
  left: -80px;
}
.video .right .content {
  height: 80%;
  padding: 20px;
}
.video .right .content h2 {
  margin-bottom: 15px;
}
.video .right .content p {
  line-height: 2;
}
.video .learn_btn {
  margin: 20px 0;
}
@media screen and (max-width: 1199px) {
  .video {
    height: 400px;
  }
  .video .right .content {
    padding: 10px;
  }
  .video .slick-next {
    right: -50px;
  }
  .video .slick-prev {
    left: -50px;
  }
  .video .learn_btn { 
    float: right;
  }
}
@media screen and (max-width: 999px) {
  .video {
    height: 350px;
  }
  .video .slick-next {
    right: -30px;
  }
  .video .slick-prev {
    left: -30px;
  }
  .video .right .content {
    height: 60%;
  }
  .video .right .content h2 {
    margin-bottom: 10px;
  }
  .video .right .content p {
    line-height: 1.2;
  }
}
@media screen and (max-width: 767px) {
  .video {
    height: 700px;
    margin-bottom: 10px;
  }
  .video.flex .left, .video.flex .right {
    flex: 0 1 65vh;
  }
  .video.flex .right {
    flex: 0 1 35vh;
  }
  .video .learn_btn {
    float: none;
    position: absolute;
    left: 45%;
    transform: translateX(-50%);
    margin: 20px;
  }
}
@media screen and (max-width: 600px) {
  .video {
    height: 600px;
    margin-bottom: 30px;
  }
}
@media screen and (max-width: 420px) {
  .video {
    height: 500px;
    margin-bottom: 70px;
  }
  .video.flex .left, .video.flex .right {
    flex: 0 1 55vh;
  }
  .video.flex .right {
    flex: 0 1 45vh;
  }
}
@media screen and (max-width: 320px) {
  .video {
    height: 450px;
    margin-bottom: 60px;
  }
  .video.flex .left, .video.flex .right {
    flex: 0 1 50vh;
  }
  .video.flex .right {
    flex: 0 1 50vh;
  }
}
 /*reason
  -------------------------------------*/ 
.reason {
  padding-bottom: 40px;
}
// .reason .flex {
//   justify-content: center;
// } 
.reason figure {
  position: relative;
  overflow: hidden;
  margin: 20px auto;
  max-width: 350px;
  max-height: 350px;
  width: 100%;
  text-align: center;
}
 .reason figure figcaption {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  // align-items:center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0;
  -webkit-transition: all .6s;
  transition: all .6s;
  padding: 25px; 
  background-color: rgba(255,255,255,.5);
}
 .reason figure figcaption.mouseenter {
  opacity: 1;
}
.reason figure figcaption h3 {
  font-size: 1.6em;
  margin-bottom: 20px;
}
@media screen and (max-width: 1419px) {
  .reason figure {
    max-width: 300px;
    max-height: 300px;
  }
}
@media screen and (max-width: 1024px) {
  .reason figure {
    max-width: 220px;
    max-height: 220px;
  }
  .reason figure figcaption {
    background-color: transparent;
  }
  .reason figure:after {
    background-color: rgba(255,255,255,.5);
    height: 70%;
    width: 100%;
    position: absolute;
    content: '';
    opacity: 1;
    top: 15%;
    left: 0;
  }
  .reason figure figcaption {
    opacity: 1;
  }
  .reason figure figcaption h3 {
    margin-bottom: 5px;
  }
}
@media screen and (max-width: 999px) {
  .reason figure figcaption {
    padding: 15px;
  }
  .reason figure figcaption h3 {
    margin-bottom: 0;
  }
  .reason figure figcaption p {
    font-size: 1em;
  }
}
@media screen and (max-width: 767px) {
  .reason .flex {
    text-align: center;
    text-align: -webkit-center;
    text-align: -moz-center;
  }
  .reason figure {
    max-width: 300px;
    max-height: 300px;
  }
  .reason h2 {
    text-align: center;
  }
}
@media screen and (max-width: 420px) {
  .reason figure {
    max-width: 220px;
    max-height: 220px;
  }
  .reason figure {
    margin: 5px auto;
  }
}
/*benefits
 -------------------------*/ 
.benefits {
  padding: 80px 60px;
  background-color: #EFEFEF;
}
.benefits h2 {
  line-height: 1;
}
.benefits .btn {
  float: right;
  margin-top: -11px;
}
.benefits ul.flex {
  display: flex;
  justify-content: space-around;
  overflow: hidden;
}
.benefits ul.flex li {
  width: 10%;
  text-align: center;
  text-align: -webkit-center;
  text-align: -moz-center;
}
.benefits ul.flex li img {
  opacity: 0;
  transform: translateY(200%);
  margin: 0 auto;
}
.benefits ul.flex li p {
  margin-top: 20px;
}
.phone_btn {
  display: none;
}
@media screen and (max-width: 1199px) { 
  .benefits ul.flex li {
    width: 15%;
  }
  .catalog-product-view .benefits .hr {
    margin: 5px 0 30px 0 !important;
  }
  .ma500.benefits ul.flex {
    flex-flow: row wrap;
    justify-content: center;
  }
  .ma500.benefits .flex li:nth-child(1), .ma500.benefits .flex li:nth-child(2),
  .ma500.benefits .flex li:nth-child(3) {
    flex: 0 18%;
    margin: 20px 20px;
  }
  .ma500.benefits .flex li:nth-child(4), .ma500.benefits .flex li:nth-child(5),
  .ma500.benefits .flex li:nth-child(6), .ma500.benefits .flex li:nth-child(7) {
    flex: 0 1 18%;
    margin: 20px 20px;
  }
}
@media screen and (max-width: 767px) {
  .benefits {
    text-align: center;
    padding: 40px 10px 60px 10px;
    margin-bottom: 20px;
  }
  .catalog-product-view .benefits .hr {
    margin: 10px 0 10px 0 !important;
  }
  .benefits .desktop_btn {
    display: none;
  }
  .benefits ul.flex, .ma500.benefits ul.flex {
    flex-flow: row wrap;
    justify-content: center;
  }
  .benefits .flex li:nth-child(1), .benefits .flex li:nth-child(2),
  .ma500.benefits .flex li:nth-child(1), .ma500.benefits .flex li:nth-child(2),
  .ma500.benefits .flex li:nth-child(6), .ma500.benefits .flex li:nth-child(7){
    flex: 0 1 33%;
    margin: 30px 10px;
  }
  .benefits .flex li:nth-child(3), .benefits .flex li:nth-child(4),
  .benefits .flex li:nth-child(5), .ma500.benefits .flex li:nth-child(3), 
  .ma500.benefits .flex li:nth-child(4), .ma500.benefits .flex li:nth-child(5) {
    flex: 0 1 33%;
  }
  .ma500.benefits .flex li:nth-child(3), 
  .ma500.benefits .flex li:nth-child(4), .ma500.benefits .flex li:nth-child(5) {
    margin: 0;
  }
  .benefits ul.flex li img {
    width: 80%;
  }
  .benefits .phone_btn {
    display: inline-block;
    float: none;
    margin: 20px 0; 
  }
  .mc200.benefits .flex li {
    flex: 0 1 25%;
    margin: 10px;
  }
 }

/*productBanner
 ---------------------------------*/
.productBanner {
  position: relative;
  overflow: hidden;
}
.productBanner img {
  opacity: 0;
}
.productBanner .right, .productBanner .left {
  position: absolute;
  width: 40%;
  top: 40%;
}
.productBanner .right {
  left: 50%;
}
.productBanner .left {
  left: 10%;
}
/*banner2
 ---------------------------------*/
.mc200.banner2 .img_front {
  transform: translateY(65%);
}
.mc300.banner2 .left {
  top: 65%;
}
/*banner3
 ---------------------------------*/
.ma500.banner3 .left {
  flex-flow: row wrap;
  position: absolute;
  top: 100%;
  left: 5%;
  opacity: 0;
}
.ma500.banner3 .left img{
  width: 30%;
  margin: 30px;
  height: 110%;
  object-fit: contain;
  opacity: 1;
}
.ma500.banner3 .right {
  color: white;
}
.ma100.banner3 .img_front {
  transform: translateX(100%);
}
.mc200.banner3 img  {
  transform: translateY(65%);
}
.mc300.banner3 .img_front1 {
  transform: translateX(-100%);
}
.mc300.banner3 .img_front2 {
  transform: translateX(100%);
}
@media screen and (max-width: 1024px) { 
  .ma500.banner3 .left img {
    margin: 15px; 
  }
}
@media screen and (max-width: 767px) { 
  // .ma500.banner3 .left {
  //   left: 0;
  // }
  .ma500.banner3 .left img {
    margin: 5px;
    width: 20%;
  }
  .ma500.banner3 .right {
    color: black;
  }
}
/*banner4
 ---------------------------------*/
.ma500.banner4 .img_front1 {
  transform: translateX(100%);
}
.ma500.banner4 .img_front2 {
  transform: translateX(-100%);
}
.mc300.banner4 img {
  transform: translateY(65%);
}
.banner4 .midd {
  width: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: white;
  text-align: center;
}
@media screen and (max-width: 767px) { 
  .banner4 .midd {
    color: black;
    transform: translateY(0);
    text-align: left;
  }
}
 /*banner5
  ----------------------------------*/
.ma100.banner5 .img_front1 {
  transform: translateX(100%);
}
.ma100.banner5 .img_front2 {
  transform-style:perspective-3d;
  transform: rotateZ(-180deg);
}
.mc200.banner5 img {
  transform: translateY(65%);
}
/*productBanner - rwd
 ------------------------------------*/
@media screen and (max-width: 1024px) { 
  .productBanner .right, .productBanner .left, .mc300.banner2 .left {
    width: 45%;
    top: 30%;
  }
}
@media screen and (max-width: 767px) { 
  .productBanner  .right, .productBanner .left, .productBanner .midd, .mc300.banner2 .left {
    position: static;
    width: 100%;
    padding: 20px; 
  }
}
/*specification
 -------------------------------------*/
.specification {
  text-align: center;
  text-align: -webkit-center; 
  text-align: -moz-center; 
  margin-top: 50px;
}
.catalog-product-view .container .specification img {
  width: 38%;
  opacity: 0;
  margin: 0 auto;
}
.specification .btn.tablet_btn {
  display: none;
  margin: 0 auto;
}
.specification .flex {
  margin-bottom: 10%;
}
.specification .flex div {
  padding-left: 15%;
}
.specification .flex div h2 {
  margin-bottom: 20px;
}
.specification .flex div p {
  line-height: 2;
}
.specification .flex .right li {
  margin-left: 20px;
  list-style-type: disc;
  line-height: 2;
}
.specification .btn {
  margin-bottom: 35px;
} 
@media screen and (max-width: 1199px) { 
  .specification .desktop_btn {
    display: none;
  }
  .specification .btn.tablet_btn {
    display: block;
    margin: 0 auto;
    margin-bottom: 35px;
  }
}
@media screen and (max-width: 767px) {
  .specification .right {
    margin-top: 50px;
  }
  .specification .flex div {
    padding-left: 10%;
  }
  .specification .flex div h2 {
    margin-bottom: 10px;
  }
  .specification .flex div p {
    line-height: 1.6;
  }
  .specification .flex .right li {
    line-height: 1.6;
  }
  .catalog-product-view .container .specification img {
    width: 70%;
  }
}
 /*icon-fadein
  ---------------------------------------*/
.icon-fadein {
  padding: 60px;
}
.ma100.icon-fadein {
  background-color: #f26075;
}
.ma500.icon-fadein {
  background-color: #e7d3c0;
}
.mc200.icon-fadein {
  background-color: #7bc2d4;
}
.mc300.icon-fadein {
  background-color: #3BC9C6;
}
.icon-fadein .flex {
  flex-flow: row wrap;
}
.icon-fadein .flex li {
  flex: 0 1 50%;
  text-align: center;
  text-align: -webkit-center;
  opacity: 0;
}
.icon-fadein .flex li:nth-child(1),.icon-fadein .flex li:nth-child(2) {
  margin-bottom: 40px;
}
.icon-fadein .flex li img {
  width: 30%;
  margin: 0 auto;
}
.icon-fadein .flex li .icon-text {
  width: 60%;
  margin: 0 auto;
}
.icon-fadein .flex li h3 {
  color: white;
  margin-top: 10px;
  font-family: 'Source Sans Pro', sans-serif;
}
.ma500.icon-fadein .flex li h3 {
    color: #4c4c4c;
}
.icon-fadein .flex li p {
    font-family: 'Source Sans Pro', sans-serif;
    color: white;
}
.icon-fadein .flex li p {
    color: #4c4c4c;
}
}
@media screen and (max-width: 1199px) { 
  .icon-fadein .flex li:nth-child(1),.icon-fadein .flex li:nth-child(2) {
    margin-bottom: 3%;
  }
  .icon-fadein .flex li img {
    width: 40%;
  }
  .icon-fadein .flex li .icon-text {
    width: 50%;
  }
}
@media screen and (max-width: 767px) { 
  .icon-fadein {
    padding: 5% 2%; 
  }
  // .icon-fadein .flex li {
  //   flex: 0 1 40%;
  // }
  .icon-fadein .flex li img {
    width: 60%;
  }
  .icon-fadein .flex li .icon-text {
    float: none;
    width: 100%;
    padding: 10px;
  }
  .icon-fadein .flex li h3 {
    font-size: 16px;
    margin-top: 0;
  }
  .icon-fadein .flex li p {
    font-size: .9em;
  }
}
@media screen and (max-width: 320px) { 
  .icon-fadein .flex li {
    width: 120px;
  }
  .icon-fadein .flex li h3 {
    margin: 0;
  }
}
/*banner6-translate
 -----------------------------------------*/
.banner6-translate {
  position: relative;
  margin-bottom: 10%;
  overflow: hidden;
}
.banner6-translate img{
  transform: translateY(80%);
}
.banner6-translate .left {
  position: absolute;
  bottom: 5%;
  left: 15%;
  z-index: 1;
}
.banner6-translate .left .btn {
  background-color: #55C9C3;
  margin: 17px 0;
}
.banner6-translate .p_btn {
  display: none;
}
@media screen and (max-width: 1024px) { 
  .banner6-translate .left {
    left: 6%;
  }
}
@media screen and (max-width: 767px) {
  .banner6-translate {
    text-align: center;
    text-align: -webkit-center;
    text-align: -moz-center;
  }
  .banner6-translate .left {
    padding: 9% 0 0 0;
    position: static;
    text-align: left;
  }
  .banner6-translate .left .d_btn {
    display: none;
  }
  .banner6-translate .p_btn {
    display: inline-block;
    margin: 15px auto;
  }
}
/*recommend
 -----------------------------------------*/
.recommend {
  padding: 0 10%;
}
.recommend .flex {
  justify-content: center;
}
.recommend .flex li {
  flex: 0 1 25%;
  padding: 30px;
  text-align: center;
  text-align: -webkit-center;
  text-align: -moz-center;
}
.recommend .flex li img {
  width: 80%;
  margin: 0 auto;
}
.recommend .flex li h3 {
  margin-bottom: 15px;
  font-size: 22px;
  height: 56px;
}
.recommend .flex li p {
  height: 100px;
}
  @media screen and (max-width: 1419px) {
  .recommend .flex {
    justify-content: space-between;
  }
  .recommend .flex li {
    flex: 0 1 33%;
    padding: 5px; 
  }
  .recommend .flex li h3 {
    height: inherit;
  }
  .recommend .flex li img {
    width: 100%;
  }
}
@media screen and (max-width: 1319px) {
  .recommend .flex li h3 {
    font-size: 19px;
  }
}
@media screen and (max-width: 1199px) {
  .recommend h2 {
    text-align: center;
  }
}
@media screen and (max-width: 999px) {
  .recommend .flex li h3 {
    height: 56px;
    font-size: 20px;
  }
}
@media screen and (max-width: 767px) {
  .recommend .flex {
    display: block;
  }
  .recommend {
    text-align: center; 
  }
  .recommend .flex li h3 {
    height: inherit;
  }
  .recommend .flex li {
    margin-bottom: 40px;
  }
  .recommend .flex li img {
    width: 75%;
  }
  .recommend .flex li p {
    height: 60px;
  }
}