@charset "utf-8";
/***/
body {
  background:#fff;
}
.m-footer .bar .caption {background:#fff;}
.product-wrap {
  position: relative;
  padding-top:.67rem;
}
.product-wrap .pro-title {
  position: absolute;
  left:0;
  top:.67rem;
  z-index:1;
  width: .38rem;
  height:1.86rem;
  line-height: 1;
  text-align: center;
  background: #a7a6a6;
  color:#fff;
  font-size: .4rem;
  font-weight: 100;
  overflow: hidden;
  font-weight: 100;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}
.product-wrap .list {
  margin:0 auto;
  width:3.73rem;
  overflow: hidden;
}
.product-wrap .list img {max-width: 100%;}
.product-wrap .list .item {
  display: block;
  padding-bottom:.8rem;
  position: relative;
  text-align: center;
}
.product-wrap .list .item .thumb-box {
  position:relative;
  margin-bottom:.4rem;
}
.product-wrap .list .item img {max-width: 100%;}
.product-wrap .list .item .info {line-height: 1;}
.product-wrap .list .item .jp {
  margin-bottom:.12rem;
  font-size:.24rem;
}
.product-wrap .list .item .en {
  font-size:.18rem;
  font-family: "Futura LT"
}
.product-wrap .faq-view-more {
  padding:20px 0;
}
.product-wrap .list .item:hover {
  opacity: .8;
}
.product-wrap .list .item:hover .arrow-box {
  opacity: 1;
  transition: all .3s;
}
.product-wrap .arrow-box {
  position: absolute;
  left:50%;
  top:50%;
  z-index: 9;
  display: -webkit-box;
  -webkit-box-pack: justify;
  margin-left:-335px;
  margin-top:-16px;
  width:670px;
  height: 32px;
  opacity: 0;
}
.product-wrap .arrow-box::before,.product-wrap .arrow-box::after {
  display: block;
  content: "";
  width:32px;
  height:32px;
}
.product-wrap .arrow-box::before {background:url("images/icon-arrow-right-fill.png") no-repeat center;} 
.product-wrap .arrow-box::after {background:url("images/icon-arrow-left-fill.png") no-repeat center;} 

/***/
.smoothie-wrap {
  padding-top:.47rem;
  overflow: hidden;
}
.smoothie-wrap .top-title {
  margin:0 auto .6rem;
  width:100%;
  text-align: center;
}
.smoothie-wrap .top-title .name {
  display: inline-block;
  padding:0 .733rem;
  line-height: 1;
  font-size:.56rem;
  color:#fff;
  background-color: #878686;
}
.smoothie-wrap .top-title .small {
  padding-top:.12rem;
  font-size:.24rem;
  font-family: "Futura LT";
  line-height: 1;
}
.smoothie-wrap .description {
  /* padding-bottom:.4rem; */
  margin-bottom:.6rem;
  font-size:.2rem;
  line-height: 1.8;
  border-bottom:1px solid #878686;
}
.smoothie-wrap .description p {margin-bottom:.4rem;}
.smoothie-wrap .list {

}
.smoothie-wrap .list .item {
  display: flex;
  margin-bottom:.7rem;
}
.smoothie-wrap .list .thumb-box {
  flex:0 0 auto;
  width:2.56rem;
  height: 2.56rem;
  overflow: hidden;
}
.smoothie-wrap .list .thumb-box img {
  max-width: 100%;
  display: block;
}
.smoothie-wrap .list .info {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction:column;
  flex-direction:column;
  -webkit-justify-content:space-between;
  justify-content: space-between;
  padding-left:.24rem;
  height: 2.56rem;
  font-size: .18rem;
}
.smoothie-wrap .list .info .pro-name {font-size:.28rem;line-height: 1;}
.smoothie-wrap .list .info .introduce {line-height: 1.8;}





/***/
.well-wrap {
  position: relative;
  padding-top:1.33rem;
  padding-bottom:2.6rem;
}
.well-wrap .main-content {
  padding-right:1.8rem;
  padding-left:.6rem;
  font-size:.28rem;
}
.well-wrap .big-title {
  position: absolute;
  top:1.33rem;
  right: 0;
  z-index: 1;
  width:.7rem;
  text-align: right;
}
.well-wrap .big-title img {max-width: 100%;}
.well-wrap .top-title {
  padding:.45rem 0;
}
.well-wrap .top-title .name {
  display: inline-block;
  font-size:.32rem;
  padding:.08rem .12rem;
  color:#fff;
  background:#888787;
  text-align: center;
}
.well-wrap .top-title .small {
  margin-top:.12rem;
  font-size:.2rem;
  font-family: "Futura LT";
  line-height: 1;
}
.well-wrap .description {
  font-size:.28rem;
  line-height: 1.8;
}

.well-wrap .product-btn-box .btn {
  display: inline-block;
  position: relative;
  margin-bottom:.5rem;
  padding-right:.36rem;
  box-sizing: border-box;
  width:2rem;
  /* font-size:.24rem; */
}


/***/
.collagen-wrap {
  position: relative;
  padding-top:1.33rem;
  padding-bottom:2.6rem;
}
.collagen-wrap .main-content {
  padding-left:2.12rem;
  padding-right:1rem;
  font-size:.28rem;
}
.collagen-wrap .top-title {margin-bottom:.42rem;margin-top:.76rem;}
.collagen-wrap .top-title .name {
  display: inline-block;
  font-size:.4rem;
  padding:.08rem .12rem;
  color:#fff;
  background:#878686;
  line-height: 1;
}
.collagen-wrap .top-title .small {
  margin-top:.12rem;
  font-size:.2rem;
  font-family: "Futura LT";
  line-height: 1;
}
.collagen-wrap .big-title {
  position: absolute;
  top:1.33rem;
  left: .6rem;
  z-index: 1;
  width:.7rem;
  text-align: right;
}
.collagen-wrap .big-title img {max-width: 100%;}
.collagen-wrap .product-btn-box .btn {
  display: block;
  margin-top:.45rem;
  width:40%;
  /* font-size:.24rem; */
}

.collagen-wrap .description {
  font-size:.28rem;
  line-height: 1.8;
}

/****/
.essence-wrap {
  float: left;
  margin-right:-.6rem;
  margin-left:-.6rem;
  padding:.6rem 0;
}

.essence-wrap .item {
  display: flex;
  align-items: center;
  padding:.28rem .6rem;
  background-color:#fff;
}
.essence-wrap .item:nth-child(2n+1) {
  background-color:#f5f5f5;
}
.essence-wrap .item .pro-name {margin-bottom:.28rem}
.essence-wrap .item .pro-name .big {
  font-size:.32rem;
  line-height: 1;
}
.essence-wrap .item .pro-name .small {
  margin-top:.12rem;
  font-size:.18rem;
  font-family: "Futura LT";
  line-height: 1;
}
.essence-wrap .item .thumb-box {
  flex:0 0 auto;
  margin-left:.28rem;
  margin-right:0;
  width:3.3rem;
  text-align: center;
}
.essence-wrap .item .thumb-box:nth-child(2n+1) {
  margin-left:0;
  margin-right:.28rem;
}
.essence-wrap .item .thumb-box img {max-width: 100%;}
.essence-wrap .item .info {

  font-size:.2rem;
}
.essence-wrap .item .info .introduce {
  
  line-height: 1.8;
}

.essence-wrap .product-btn-box .btn {
  margin-top:.28rem;
  width:40%;
}


/****/
.oil-wrap {
  padding-top:.56rem;
}
.oil-wrap .list .item {
  margin-bottom:.85rem;
}
.oil-wrap .pro-name {
  margin-bottom:.5rem;
  font-size:.28rem;
  line-height: 1;
  text-align: center;
}
.oil-wrap .thumb-box {
  padding-bottom:.46rem;
  text-align: center;
}
.oil-wrap .thumb-box img {width:2.56rem;}
.oil-wrap  .product-btn-box {
  text-align: center;
}
.oil-wrap  .product-btn-box .btn {
  display: inline-block;
  margin-left:.21rem;
  margin-right:.21rem;
  padding-left:.32rem;
  padding-right:.32rem;
}
.oil-wrap .description {
  font-size:.24rem;
  line-height: 1.8;
  text-align: center;
}
.oil-wrap .description p {
  margin-bottom:.45rem;
}
.oil-wrap .md-fg {
  margin:0 auto 1.12rem;
  width: 1rem;
  height:.2rem;
  border-bottom:1px solid #878686;
}
.oil-wrap .top-title {
  margin-bottom:.32rem;
  text-align: center;
}
.oil-wrap .top-title .name {
  display: inline-block;
  padding:.08rem .28rem;
  font-size:.4rem;
  color:#fff;
  background:#878686;
  line-height: 1;
}
.oil-wrap .top-title .small {
  margin-top:.12rem;
  font-size:.24rem;
  font-family: "Futura LT";
  line-height: 1;
}
/******/
.product-social-btn {
  padding:50px 0 50px;
  text-align: center;
}
.product-btn-box .btn {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  margin-right:.42rem;
  padding:.12rem;
  line-height: 1;
  border:.014rem solid #9c9c9c;
  font-size:.18rem;
  text-align: center;
  cursor: pointer;
}

.product-btn-box .btn .fh {
  position: absolute;
  top:0.03rem;
  right:.18rem;
  z-index:1;
  font-size:.32rem;
  line-height: 1;
color:#999;
}

.m-modal {
  display: none;
  position: fixed;
  left: 0;
  top:0;
  right:0;
  bottom: 0;
  z-index:9990;
  padding:1.2rem;
  box-sizing: border-box;
  width:100%;
  /* display: flex; */
  align-items: center;
  background-color:rgba(0,0,0,.6);
}
.m-modal .content-wrap {
/*   position: fixed;
  left: 50%;
  top:50%;
  z-index:9998; */
  /* margin-top:-50%;
  margin-left:-5rem; */
  position: relative;
  box-sizing: border-box;
  width:100%;
  padding:1rem .6rem .6rem;
  height: 8rem;
  background-color:#fff;
  transition: all .2s;
}
.m-modal .content-wrap .content {
  font-size:.24rem;
  line-height: 1.8;
  overflow-y: auto;
  transition: all .2s;
  height: 100%;
  box-sizing: border-box;
}
.m-modal .content-wrap .content .item {
  display: none;
}
.m-modal .content-wrap .close-btn {
  position: absolute;
  top:.4rem;
  right:.4rem;
  z-index: 9999;
  width:.4rem;
  height: .4rem;
  background: url("images/icon-xx.gif") no-repeat center;
  background-size:.4rem auto;
}
.m-modal .content-wrap .close-btn:hover {opacity: .7;}