@charset "utf-8";

/*
 * CSS Document
 * ==========================================================================
 * 版權所有 2016 鉅潞科技網頁設計公司，並保留所有權利。
 * 網站地址: http://www.grnet.com.tw
 * ==========================================================================
 * $Author: Buzz $
 * $Date: 2016/12/22 (四) $
*/

@font-face {
  font-family: 'Comfortaa';
  src: url("../fonts/Comfortaa-Bold.woff2") format("woff2"), url("../fonts/Comfortaa-Bold.woff") format("woff"), url("../fonts/Comfortaa-Bold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: fallback;
}

/*  */
.container_map {
  width: 100%;
  position: relative;
  font-size: 0;

}

.sales-list {
  width: 33.33%;
  border: 1px solid #e5e5e5;
  display: inline-block;
  height: 880px;
}

.map {
  width: 65.66%;
  height: 880px;
  margin-left: 1%;
  display: inline-block;
}

.position-list {
  height: 880px;
  overflow: auto;
}

.location {
  padding: 15px 15px 25px 15px;
  border-bottom: 1px solid #e5e5e5;
  cursor: pointer;
}

.location .no {
  width: 30px;
  height: 30px;
  text-align: center;
  background: #8B97CB;
  display: inline-block;
  font-size: 18px;
  color: #fff;
  line-height: 30px;
  /* position: absolute;
  left: 0;
  top: 0; */

}

.location .shop_name {
  font-size: 18px;
  vertical-align: 2px;
  padding-left: 10px;
  display: inline-block;
}

.location .address {
  font-size: 16px;
  padding-left: 42px;
  /* white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; */
}

.location .phone {
  font-size: 16px;
  padding-left: 42px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.location_text {
  padding-left: 50px;
  margin: 0;
}

.location_text li {
  font-size: 16px;

}

.location.active,
.location:hover {
  background-color: #eee;
}

.location .g-btn-margin-xs {
  float: right;
}

/*  */

.about_bg {
  background-color: #fff;
}

.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

html,
body {
  font-family: "Microsoft JhengHei UI", "Microsoft JhengHei", "Arial", sans-serif;
  color: #353535;
  font-size: 17px;
  line-height: 2;
}

::selection {
  background: #6ba9ce;
  color: #fff;
}

::-moz-selection {
  background: #6ba9ce;
  color: #fff;
}

/*@media (max-width:767px){
  body{ padding-top: 72px}
}*/


/* a Link Styles */
a,
a:visited,
a:hover,
a:active,
a:focus {
  text-decoration: none;
  outline: 0
}

/* 文字方式呈現連結 */
.g-link {
  color: #ed819d;
  text-decoration: underline;
  white-space: nowrap
}

.g-link:hover {
  color: #EC4F78;
  text-decoration: none;
}

/* display / hide */
.displayNone {
  display: none;
}

.displayBlock {
  display: block;
  position: relative;
}

.md-hide {
  display: block;
}

@media (min-width:768px) {
  .md-hide {
    display: none;
  }
}

/* Table */
.tabSet,
.tabSet th,
.tabSet td {
  padding: 0;
  border: 0;
  border-spacing: 0;
  border-collapse: collapse;
}

.tabSet input,
.tabSet label,
.tabSet select {
  vertical-align: middle;
}

.hide {
  display: none;
}

/* Ul */
.ulset {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Placeholder */
::-webkit-input-placeholder {
  color: #888;
  font-size: 15px;
}

::-moz-placeholder {
  color: #888;
  opacity: 1;
  font-size: 15px;
}

:-ms-input-placeholder {
  color: #888;
  font-size: 15px;
}

:-moz-placeholder {
  color: #888;
  font-size: 15px;
}

/* animate */
.turn {
  transition: all 0.3s cubic-bezier(.41, .17, .32, .93);
  -o-transition: all 0.3s cubic-bezier(.41, .17, .32, .93);
  -ms-transition: all 0.3s cubic-bezier(.41, .17, .32, .93);
  -moz-transition: all 0.3s cubic-bezier(.41, .17, .32, .93);
  -webkit-transition: all 0.3s cubic-bezier(.41, .17, .32, .93);
}

h1,
h2,
h3,
h4,
h5,
h6,
.fw-normal,
b,
label {
  font-weight: 400;
}

.fz-12 {
  font-size: 0.85rem;
}

.fz-20 {
  font-size: 1.375rem;
}

.fz-24 {
  font-size: 1.5rem;
}

.fz-30 {
  font-size: 1.7rem;
}

.color-blue {
  color: #6690de !important;
}

.color-skyblue {
  color: #049FE1 !important;
}

.color-pink {
  color: #e87392 !important;
}

.color-darkgreen {
  color: #83b292 !important;
}

.color-lightgreen {
  color: #8bbd25 !important;
}

.color-yellow {
  color: #F7B500 !important;
}

.color-white {
  color: #fff !important;
}

.color-num1 {
  color: #f57777;
}

.color-num2 {
  color: #de7191;
}
.color-num2_a{
  color: #de7191;

}
.color-num2_a:hover{
  color: #de7191;
  text-decoration: underline;
}
.color-num3 {
  color: #6690de;
}

.color-num4 {
  color: #83b292;
}

.color-num5 {
  color: #f8b500;
}

.color-gray {
  color: #666;
}

@media (max-width:767px) {
  .fz-20 {
    font-size: 1.25rem;
  }

  .fz-24 {
    font-size: 1.375rem;
  }

  .fz-30 {
    font-size: 1.4125rem;
  }
}

/* 窄段落區塊 */
.paragraph-narrow {
  display: block;
  margin: 0 auto;
  max-width: 780px;
}

.paragraph-narrow600 {
  display: block;
  margin: 0 auto;
  max-width: 600px;
}

.paragraph-narrow550 {
  display: block;
  margin: 0 auto;
  max-width: 550px;
}

/* 文字粗細 */
.txt-bold {
  font-weight: 500;
}

.txt-bolder {
  font-weight: 700;
}

.txt-lighter {
  font-weight: 300;
}

/* 文字區塊白暈底 */
.txt-whitebg {
  background: url(../images/txt-whitebg.png) no-repeat center center;
  background-size: 100% 90%;
  padding: 30px 20px;
  margin: -30px auto;
}

@media (min-width:768px) {
  .txt-whitebg {
    padding: 70px 60px;
  }
}

/* 文字筆畫 */
.txt-wb {
  -webkit-text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff, 0px 1px 0 #fff, 0px -1px 0 #fff, -1px 0px 0 #fff, 1px 0px 0 #fff, 2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff, 0px 2px 0 #fff, 0px -2px 0 #fff, -2px 0px 0 #fff, 2px 0px 0 #fff, 1px 2px 0 #fff, -1px 2px 0 #fff, 1px -2px 0 #fff, -1px -2px 0 #fff, 2px 1px 0 #fff, -2px 1px 0 #fff, 2px -1px 0 #fff, -2px -1px 0 #fff, 3px 3px 4px rgba(0, 0, 0, 0.2);
  -moz-text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff, 0px 1px 0 #fff, 0px -1px 0 #fff, -1px 0px 0 #fff, 1px 0px 0 #fff, 2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff, 0px 2px 0 #fff, 0px -2px 0 #fff, -2px 0px 0 #fff, 2px 0px 0 #fff, 1px 2px 0 #fff, -1px 2px 0 #fff, 1px -2px 0 #fff, -1px -2px 0 #fff, 2px 1px 0 #fff, -2px 1px 0 #fff, 2px -1px 0 #fff, -2px -1px 0 #fff, 3px 3px 4px rgba(0, 0, 0, 0.2);
  -ms-text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff, 0px 1px 0 #fff, 0px -1px 0 #fff, -1px 0px 0 #fff, 1px 0px 0 #fff, 2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff, 0px 2px 0 #fff, 0px -2px 0 #fff, -2px 0px 0 #fff, 2px 0px 0 #fff, 1px 2px 0 #fff, -1px 2px 0 #fff, 1px -2px 0 #fff, -1px -2px 0 #fff, 2px 1px 0 #fff, -2px 1px 0 #fff, 2px -1px 0 #fff, -2px -1px 0 #fff, 3px 3px 4px rgba(0, 0, 0, 0.2);
  -o-text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff, 0px 1px 0 #fff, 0px -1px 0 #fff, -1px 0px 0 #fff, 1px 0px 0 #fff, 2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff, 0px 2px 0 #fff, 0px -2px 0 #fff, -2px 0px 0 #fff, 2px 0px 0 #fff, 1px 2px 0 #fff, -1px 2px 0 #fff, 1px -2px 0 #fff, -1px -2px 0 #fff, 2px 1px 0 #fff, -2px 1px 0 #fff, 2px -1px 0 #fff, -2px -1px 0 #fff, 3px 3px 4px rgba(0, 0, 0, 0.2);
  text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff, 0px 1px 0 #fff, 0px -1px 0 #fff, -1px 0px 0 #fff, 1px 0px 0 #fff, 2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff, 0px 2px 0 #fff, 0px -2px 0 #fff, -2px 0px 0 #fff, 2px 0px 0 #fff, 1px 2px 0 #fff, -1px 2px 0 #fff, 1px -2px 0 #fff, -1px -2px 0 #fff, 2px 1px 0 #fff, -2px 1px 0 #fff, 2px -1px 0 #fff, -2px -1px 0 #fff, 3px 3px 4px rgba(0, 0, 0, 0.2);
}

.txt-wb-skyblue {
  -webkit-text-shadow: 1px 1px 0 #049FE1, -1px 1px 0 #049FE1, 1px -1px 0 #049FE1, -1px -1px 0 #049FE1, 0px 1px 0 #049FE1, 0px -1px 0 #049FE1, -1px 0px 0 #049FE1, 1px 0px 0 #049FE1, 2px 2px 0 #049FE1, -2px 2px 0 #049FE1, 2px -2px 0 #049FE1, -2px -2px 0 #049FE1, 0px 2px 0 #049FE1, 0px -2px 0 #049FE1, -2px 0px 0 #049FE1, 2px 0px 0 #049FE1, 1px 2px 0 #049FE1, -1px 2px 0 #049FE1, 1px -2px 0 #049FE1, -1px -2px 0 #049FE1, 2px 1px 0 #049FE1, -2px 1px 0 #049FE1, 2px -1px 0 #049FE1, -2px -1px 0 #049FE1, 3px 3px 4px rgba(0, 0, 0, 0.2);
  -moz-text-shadow: 1px 1px 0 #049FE1, -1px 1px 0 #049FE1, 1px -1px 0 #049FE1, -1px -1px 0 #049FE1, 0px 1px 0 #049FE1, 0px -1px 0 #049FE1, -1px 0px 0 #049FE1, 1px 0px 0 #049FE1, 2px 2px 0 #049FE1, -2px 2px 0 #049FE1, 2px -2px 0 #049FE1, -2px -2px 0 #049FE1, 0px 2px 0 #049FE1, 0px -2px 0 #049FE1, -2px 0px 0 #049FE1, 2px 0px 0 #049FE1, 1px 2px 0 #049FE1, -1px 2px 0 #049FE1, 1px -2px 0 #049FE1, -1px -2px 0 #049FE1, 2px 1px 0 #049FE1, -2px 1px 0 #049FE1, 2px -1px 0 #049FE1, -2px -1px 0 #049FE1, 3px 3px 4px rgba(0, 0, 0, 0.2);
  -ms-text-shadow: 1px 1px 0 #049FE1, -1px 1px 0 #049FE1, 1px -1px 0 #049FE1, -1px -1px 0 #049FE1, 0px 1px 0 #049FE1, 0px -1px 0 #049FE1, -1px 0px 0 #049FE1, 1px 0px 0 #049FE1, 2px 2px 0 #049FE1, -2px 2px 0 #049FE1, 2px -2px 0 #049FE1, -2px -2px 0 #049FE1, 0px 2px 0 #049FE1, 0px -2px 0 #049FE1, -2px 0px 0 #049FE1, 2px 0px 0 #049FE1, 1px 2px 0 #049FE1, -1px 2px 0 #049FE1, 1px -2px 0 #049FE1, -1px -2px 0 #049FE1, 2px 1px 0 #049FE1, -2px 1px 0 #049FE1, 2px -1px 0 #049FE1, -2px -1px 0 #049FE1, 3px 3px 4px rgba(0, 0, 0, 0.2);
  -o-text-shadow: 1px 1px 0 #049FE1, -1px 1px 0 #049FE1, 1px -1px 0 #049FE1, -1px -1px 0 #049FE1, 0px 1px 0 #049FE1, 0px -1px 0 #049FE1, -1px 0px 0 #049FE1, 1px 0px 0 #049FE1, 2px 2px 0 #049FE1, -2px 2px 0 #049FE1, 2px -2px 0 #049FE1, -2px -2px 0 #049FE1, 0px 2px 0 #049FE1, 0px -2px 0 #049FE1, -2px 0px 0 #049FE1, 2px 0px 0 #049FE1, 1px 2px 0 #049FE1, -1px 2px 0 #049FE1, 1px -2px 0 #049FE1, -1px -2px 0 #049FE1, 2px 1px 0 #049FE1, -2px 1px 0 #049FE1, 2px -1px 0 #049FE1, -2px -1px 0 #049FE1, 3px 3px 4px rgba(0, 0, 0, 0.2);
  text-shadow: 1px 1px 0 #049FE1, -1px 1px 0 #049FE1, 1px -1px 0 #049FE1, -1px -1px 0 #049FE1, 0px 1px 0 #049FE1, 0px -1px 0 #049FE1, -1px 0px 0 #049FE1, 1px 0px 0 #049FE1, 2px 2px 0 #049FE1, -2px 2px 0 #049FE1, 2px -2px 0 #049FE1, -2px -2px 0 #049FE1, 0px 2px 0 #049FE1, 0px -2px 0 #049FE1, -2px 0px 0 #049FE1, 2px 0px 0 #049FE1, 1px 2px 0 #049FE1, -1px 2px 0 #049FE1, 1px -2px 0 #049FE1, -1px -2px 0 #049FE1, 2px 1px 0 #049FE1, -2px 1px 0 #049FE1, 2px -1px 0 #049FE1, -2px -1px 0 #049FE1, 3px 3px 4px rgba(0, 0, 0, 0.2);
}

.txt-wb-pink {
  -webkit-text-shadow: 1px 1px 0 #EE819E, -1px 1px 0 #EE819E, 1px -1px 0 #EE819E, -1px -1px 0 #EE819E, 0px 1px 0 #EE819E, 0px -1px 0 #EE819E, -1px 0px 0 #EE819E, 1px 0px 0 #EE819E, 2px 2px 0 #EE819E, -2px 2px 0 #EE819E, 2px -2px 0 #EE819E, -2px -2px 0 #EE819E, 0px 2px 0 #EE819E, 0px -2px 0 #EE819E, -2px 0px 0 #EE819E, 2px 0px 0 #EE819E, 1px 2px 0 #EE819E, -1px 2px 0 #EE819E, 1px -2px 0 #EE819E, -1px -2px 0 #EE819E, 2px 1px 0 #EE819E, -2px 1px 0 #EE819E, 2px -1px 0 #EE819E, -2px -1px 0 #EE819E, 3px 3px 4px rgba(0, 0, 0, 0.2);
  -moz-text-shadow: 1px 1px 0 #EE819E, -1px 1px 0 #EE819E, 1px -1px 0 #EE819E, -1px -1px 0 #EE819E, 0px 1px 0 #EE819E, 0px -1px 0 #EE819E, -1px 0px 0 #EE819E, 1px 0px 0 #EE819E, 2px 2px 0 #EE819E, -2px 2px 0 #EE819E, 2px -2px 0 #EE819E, -2px -2px 0 #EE819E, 0px 2px 0 #EE819E, 0px -2px 0 #EE819E, -2px 0px 0 #EE819E, 2px 0px 0 #EE819E, 1px 2px 0 #EE819E, -1px 2px 0 #EE819E, 1px -2px 0 #EE819E, -1px -2px 0 #EE819E, 2px 1px 0 #EE819E, -2px 1px 0 #EE819E, 2px -1px 0 #EE819E, -2px -1px 0 #EE819E, 3px 3px 4px rgba(0, 0, 0, 0.2);
  -ms-text-shadow: 1px 1px 0 #EE819E, -1px 1px 0 #EE819E, 1px -1px 0 #EE819E, -1px -1px 0 #EE819E, 0px 1px 0 #EE819E, 0px -1px 0 #EE819E, -1px 0px 0 #EE819E, 1px 0px 0 #EE819E, 2px 2px 0 #EE819E, -2px 2px 0 #EE819E, 2px -2px 0 #EE819E, -2px -2px 0 #EE819E, 0px 2px 0 #EE819E, 0px -2px 0 #EE819E, -2px 0px 0 #EE819E, 2px 0px 0 #EE819E, 1px 2px 0 #EE819E, -1px 2px 0 #EE819E, 1px -2px 0 #EE819E, -1px -2px 0 #EE819E, 2px 1px 0 #EE819E, -2px 1px 0 #EE819E, 2px -1px 0 #EE819E, -2px -1px 0 #EE819E, 3px 3px 4px rgba(0, 0, 0, 0.2);
  -o-text-shadow: 1px 1px 0 #EE819E, -1px 1px 0 #EE819E, 1px -1px 0 #EE819E, -1px -1px 0 #EE819E, 0px 1px 0 #EE819E, 0px -1px 0 #EE819E, -1px 0px 0 #EE819E, 1px 0px 0 #EE819E, 2px 2px 0 #EE819E, -2px 2px 0 #EE819E, 2px -2px 0 #EE819E, -2px -2px 0 #EE819E, 0px 2px 0 #EE819E, 0px -2px 0 #EE819E, -2px 0px 0 #EE819E, 2px 0px 0 #EE819E, 1px 2px 0 #EE819E, -1px 2px 0 #EE819E, 1px -2px 0 #EE819E, -1px -2px 0 #EE819E, 2px 1px 0 #EE819E, -2px 1px 0 #EE819E, 2px -1px 0 #EE819E, -2px -1px 0 #EE819E, 3px 3px 4px rgba(0, 0, 0, 0.2);
  text-shadow: 1px 1px 0 #EE819E, -1px 1px 0 #EE819E, 1px -1px 0 #EE819E, -1px -1px 0 #EE819E, 0px 1px 0 #EE819E, 0px -1px 0 #EE819E, -1px 0px 0 #EE819E, 1px 0px 0 #EE819E, 2px 2px 0 #EE819E, -2px 2px 0 #EE819E, 2px -2px 0 #EE819E, -2px -2px 0 #EE819E, 0px 2px 0 #EE819E, 0px -2px 0 #EE819E, -2px 0px 0 #EE819E, 2px 0px 0 #EE819E, 1px 2px 0 #EE819E, -1px 2px 0 #EE819E, 1px -2px 0 #EE819E, -1px -2px 0 #EE819E, 2px 1px 0 #EE819E, -2px 1px 0 #EE819E, 2px -1px 0 #EE819E, -2px -1px 0 #EE819E, 3px 3px 4px rgba(0, 0, 0, 0.2);
}

/* 文字重點畫線 */
.txt-underline {
  position: relative;
  display: inline;
  color: #EE819E;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid #EE819E;
  padding-bottom: .1rem;
  margin-bottom: .4rem;
}

/* 切割文字 */
.txt-cut {
  display: inline;
}

.txt-cut--inline {
  display: block;
}

.txt-sperate {
  margin: 0;
}

.text-cut--block {
  display: block;
}

@media (min-width:350px) {
  .g-copyright-contact .txt-cut--inline {
    display: inline-block;
  }
}

@media (min-width:992px) {
  .txt-cut {
    display: block;
  }

  .txt-cut--inline {
    display: inline;
  }

  .txt-sperate {
    margin: 0.5rem 0 0;
  }
}

.no-data {
  text-align: center;
  display: block;
  margin: 2rem 0;
}

/* 對齊 */
.text-RightToCenter,
.text-LeftToCenter {
  text-align: center;
}

.text-CenterToRight {
  text-align: right;
}

.text-CenterToLeft {
  text-align: left;
}

.text-LeftToRight {
  text-align: left;
}

@media (min-width:992px) {
  .text-RightToCenter {
    text-align: right;
  }

  .text-LeftToCenter {
    text-align: left;
  }

  .text-CenterToRight,
  .text-CenterToLeft {
    text-align: center;
  }

  .text-LeftToRight {
    text-align: right;
  }
}

.verTop {
  vertical-align: top;
}

.f-right,
.f-left {
  float: none;
  margin: 0 10px 10px 0;
  display: block;
  text-align: center;
}

@media (min-width:768px) {
  .f-right {
    float: right;
    margin: 0 0 10px 10px;
  }

  .f-left {
    float: right;
    margin: 0 10px 10px 0;
  }
}

/* overflow:hidden */
.overhide {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.form-clause {
  overflow-y: auto;
  font-size: 1rem;
  overflow-x: hidden;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  background: #fff;
  color: #333;
  max-height: 250px;
  border: 1px solid #ccc;
  padding: 15px;
  word-wrap: break-word;
  word-break: normal;
  white-space: pre-line;
  font-family: inherit;
}

/* hr */
.hr-draw {
  display: block;
  overflow: hidden;
  border: none;
  background: url(../images/hr-draw.png) repeat-x 0 0;
  height: 6px;
  width: 100%;
  margin: 20px 0;
}

.hr-white {
  display: block;
  position: relative;
  border: none;
  border-top: 1px solid #fff;
  height: 1;
  width: 100%;
  margin: 20px auto;
  opacity: .6;
}

.hr-white:before,
.hr-white:after {
  content: ' ';
  width: 5px;
  height: 5px;
  background: #fff;
  position: absolute;
  top: 50%;
  margin-top: -3px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
  border-radius: 25px;
}

.hr-white:before {
  left: 0;
}

.hr-white:after {
  right: 0;
}

.hr-gray {
  display: block;
  overflow: hidden;
  border: none;
  border-top: 1px solid #eee;
  height: 1;
  width: 100%;
  margin: 20px 0;
}

.hr-dot {
  display: block;
  overflow: hidden;
  border: none;
  background: url(../images/hr-dot.gif) repeat-x 0 0;
  height: 5px;
  width: 100%;
  margin: 20px 0;
}

.hr-italic {
  display: block;
  overflow: hidden;
  border: none;
  height: 5px;
  width: 100%;
  margin: 20px 0;
  background: url(../images/hr-italic.gif) repeat-x 0 0;
}

/* 區塊上下距 */
.g-marginTB-40 {
  display: block;
  width: auto;
  margin: 40px auto;
}

.g-marginTB-40 strong {
  position: relative;
  z-index: 10;
}

.g-marginTB-10 {
  display: block;
  margin: 10px auto;
}

.g-marginTB-15 {
  display: block;
  margin: 15px auto;
}

.g-marginTB-20 {
  display: block;
  width: auto;
  margin: 20px auto;
}

.g-marginTB-30 {
  display: block;
  width: auto;
  margin: 30px auto;
}

.class-apply-notice {
  font-size: 0.9375rem;
  border-radius: 10px;
  margin: 10px -10px 0 -10px;
  background: #f7edef;
  padding: 10px;
}

.class-apply-notice a {
  text-decoration: underline;
  color: inherit;
  display: inline-block;
  margin: 0 5px;
}

.class-apply-notice a:hover {
  text-decoration: none;
  color: #EC4F78;
}

@media (max-width:767px) {
  .g-marginTB-40 {
    margin: 20px auto;
  }
}

/* 表單 */
.formBg {
  background: #fff;
  margin: 0 auto 20px auto;
  border-radius: 25px;
  padding: 20px;
  display: block;
  -webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
}

@media (min-width:768px) {
  .formBg {
    padding: 50px 40px;
    margin: 0 auto 50px auto;
    border-radius: 50px;
  }
}

@media (max-width:767px) {
  .formBg {
    border-radius: 25px;
    padding: 10px;
  }
}

.form-single-boxbg {
  background: #f8f8f8;
  margin: 0 auto 20px auto;
  padding: 10px;
  display: block;
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
  border: 1px solid #eee;
  border-left: 5px solid #EE819E;
}

@media (min-width:768px) {
  .form-single-boxbg {
    padding: 20px;
  }
}

.form-control {
  display: block;
  width: 100%;
  height: 2.2rem;
  padding: 0 .5rem;
  font-size: 1rem;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
}

.form-control.marginB {
  margin-bottom: 15px;
}

.baby-birth .form-group {
  min-width: 170px;
}

.form-label {
  white-space: nowrap;
}

@media (max-width:767px) {
  .form-label.text-right {
    text-align: left;
    display: block;
    white-space: normal;
  }
}

.star:before {
  content: '*';
  display: inline-block;
  color: #f00;
  font-size: 1.2rem;
  font-weight: bold;
}

.form-inline .form-label,
.form-inline .checkbox-inline,
.form-inline .radio-inline {
  margin: 0 10px 0 0;
}

.babyItem .form-inline .checkbox-inline {
  min-width: 170px;
}

.checkbox input[type=checkbox],
.checkbox-inline input[type=checkbox],
.radio input[type=radio],
.radio-inline input[type=radio] {
  position: relative;
  margin-right: 5px;
}

.agree label {
  display: inline-block;
}

.agree a {
  color: inherit;
  text-decoration: underline
}

.agree a:hover {
  color: #EE819E;
  text-decoration: none
}

.codewrap {
  padding-right: 110px;
  display: inline-block;
  position: relative;
  margin-bottom: 15px;
}

.codewrap .code {
  position: absolute;
  right: 0;
  top: 0;
}

.codewrap .form-control {
  width: 100%;
}

@media (max-width:767px) {

  .form-group.inline .form-label,
  .form-group.inline .col-lg-1,
  .form-group.inline .col-lg-10,
  .form-group.inline .col-lg-11,
  .form-group.inline .col-lg-12,
  .form-group.inline .col-lg-2,
  .form-group.inline .col-lg-3,
  .form-group.inline .col-lg-4,
  .form-group.inline .col-lg-5,
  .form-group.inline .col-lg-6,
  .form-group.inline .col-lg-7,
  .form-group.inline .col-lg-8,
  .form-group.inline .col-lg-9,
  .form-group.inline .col-md-1,
  .form-group.inline .col-md-10,
  .form-group.inline .col-md-11,
  .form-group.inline .col-md-12,
  .form-group.inline .col-md-2,
  .form-group.inline .col-md-3,
  .form-group.inline .col-md-4,
  .form-group.inline .col-md-5,
  .form-group.inline .col-md-6,
  .form-group.inline .col-md-7,
  .form-group.inline .col-md-8,
  .form-group.inline .col-md-9,
  .form-group.inline .col-sm-1,
  .form-group.inline .col-sm-10,
  .form-group.inline .col-sm-11,
  .form-group.inline .col-sm-12,
  .form-group.inline .col-sm-2,
  .form-group.inline .col-sm-3,
  .form-group.inline .col-sm-4,
  .form-group.inline .col-sm-5,
  .form-group.inline .col-sm-6,
  .form-group.inline .col-sm-7,
  .form-group.inline .col-sm-8,
  .form-group.inline .col-sm-9,
  .form-group.inline .col-xs-1,
  .form-group.inline .col-xs-10,
  .form-group.inline .col-xs-11,
  .form-group.inline .col-xs-12,
  .form-group.inline .col-xs-2,
  .form-group.inline .col-xs-3,
  .form-group.inline .col-xs-4,
  .form-group.inline .col-xs-5,
  .form-group.inline .col-xs-6,
  .form-group.inline .col-xs-7,
  .form-group.inline .col-xs-8,
  .form-group.inline .col-xs-9 {
    display: inline-block;
    width: auto;
    padding-right: 0;
  }

  .checkbox-inline input[type="text"] {
    display: inline-block;
    width: auto;
    max-width: 100%;
  }
}

/* 按鈕 */
.g-btn {
  display: inline-block;
  border: none;
  background-image: none;
  background-repeat: no-repeat;
  background-color: #999;
  background-position: 0 0;
  color: #fff;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  padding: .5rem 1rem;
  margin: .5rem 1rem .5rem 0;
  font-size: .9rem;
  white-space: nowrap;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}

.classform .turn {
  padding: .3rem .6rem;
  font-size: .6rem;
}

.classLocation .turn {
  padding: .3rem .6rem;
  font-size: .6rem;
}

/* 按鈕-small用在地圖連結 */
.g-btn.small {
  padding: 2px;
}

.g-btn.small .g-icon {
  margin-bottom: 0px;
}

.g-btn.small {
  color: #666;
  position: relative;
  top: auto;
  margin: 0 5px 0 0;
  left: auto;
  width: 30px;
  height: 30px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
  border-radius: 25px;
}

.g-btn.small.pink {
  background: #fef9fa;
  border: 1px solid #ed819d;
}

.g-btn.small.pink:hover {
  color: #EC4F78;
  background: #FCE5EA;
}

.g-btn.small.purple {
  background: #8B97CB;
  border: 1px solid #8B97CB;
}

.g-btn.small.purple:hover {
  color: #fff;
  background: #5D6FBB;
}

/* 按鈕-圓角 */
.g-btn-round {
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
  border-radius: 25px;
}

/* 按鈕-不能按 */
.g-btn-disable {
  cursor: auto;
}

.g-btn.disabled {
  cursor: not-allowed !important;
}

/* 按鈕-顏色 */
input[type="submit"],
input[type="reset"],
button[type="submit"],
button[type="reset"] {
  padding: .5rem 2rem;
}

.g-btn:hover {
  color: #fff;
}

.g-btn-pink,
.g-btn-pink.g-btn-disable,
.g-btn-pink.g-btn-disable:hover {
  background-color: #ed819d;
}

.g-btn-pink:hover {
  background-color: #EC4F78;
}

.g-btn-green,
.g-btn-green.g-btn-disable,
.g-btn-green.g-btn-disable:hover {
  background-color: #8FBB34;
}

.g-btn-green:hover {
  background-color: #7CAF13;
}

.g-btn-yellow,
.g-btn-yellow.g-btn-disable,
.g-btn-yellow.g-btn-disable:hover {
  background-color: #f8b500;
}

.g-btn-yellow:hover {
  background-color: #FFA000;
}

.g-btn-gray,
.g-btn-gray.g-btn-disable,
.g-btn-gray.g-btn-disable:hover {
  background-color: #bbb;
}

.g-btn-gray:hover {
  background-color: #999;
}

.g-btn-blue,
.g-btn-blue.g-btn-disable,
.g-btn-blue.g-btn-disable:hover {
  background-color: #6690de;
}

.g-btn-blue:hover {
  background-color: #4273ce;
}

.g-btn-sky,
.g-btn-sky.g-btn-disable,
.g-btn-sky.g-btn-disable:hover {
  background-color: #2ebdf3;
}

.g-btn-sky:hover {
  background-color: #03A0FB;
}

.g-btn-fb,
.g-btn-fb.g-btn-disable,
.g-btn-fb.g-btn-disable:hover {
  background-color: #3b5998;
}

.g-btn-fb:hover {
  background-color: #295FCB;
}

.g-btn-white,
.g-btn-white.g-btn-disable,
.g-btn-white.g-btn-disable:hover {
  background-color: #eee;
  border: 1px solid #ccc;
  color: #666;
}

.g-btn-white:hover,
.g-btn-white:focus {
  background-color: #ddd;
  color: #333;
}

/* 按鈕-新增寶寶 */
.btn-addbaby {
  width: 100%;
  padding: 1rem;
  margin: 20px auto;
  display: block;
  background: #f5f5f5;
  border: 3px dashed #ccc;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
  border-radius: 15px;
  color: #999;
  font-weight: 500;
  font-size: 1rem;
}

.btn-addbaby:hover {
  border: 3px dashed #999;
  background: #fff;
}

.btn-addbaby .g-icon-add {
  background: rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
  border-radius: 25px;
  overflow: hidden;
  vertical-align: middle;
  margin: 0 2px 0 0;
}

@media (min-width:768px) {
  .babyItem .text-RightToCenter {
    text-align: right;
  }
}

/* 按鈕-上傳檔案 */
.g-btn-upload {
  display: block;
  width: 100%;
}

@media (min-width:768px) {
  .g-btn-upload {
    display: inline-block;
    width: auto;
  }
}

/* 按鈕-寬度間距變化 */
.g-btn-block {
  display: block;
  width: 100%;
  text-align: center;
}

.g-btn-block-xs {
  display: inline-block;
  width: auto;
}

.g-btn-margin-xs {
  margin: 15px auto;
}

@media (max-width:450px) {
  .g-btn-block-xs {
    display: block;
    width: 100%;
    text-align: center;
  }
}

/* 按鈕-登出 */
.g-btn-logout {
  margin: 0 auto 20px auto;
}

@media (min-width:768px) {
  .g-btn-logout {
    margin: 0 auto;
  }
}

/* 按鈕-刪除 */
.g-btn-delete {
  width: 25px;
  height: 25px;
  background: url(../images/icon-sprite.png) no-repeat -50px 0;
  display: block;
  border: none;
  color: transparent;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  padding: 0;
}

.g-btn-delete:hover {
  background-position: -75px 0;
}

/* 按鈕-搜尋 */
.g-btn-search {
  width: 75px;
  color: #e86c8d;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  text-indent: 0;
  white-space: nowrap;
  overflow: visible;
  padding: 8px 10px 8px 23px;
  font-size: 1rem;
  border: 1px solid #ed819d;
  background: #fff;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
  border-radius: 25px;
}

.g-btn-search:hover {
  color: #e4466f;
  background: #f9f0f2;
}

.g-btn-search:before {
  content: ' ';
  display: inline-block;
  width: 27px;
  height: 27px;
  background: url(../images/icon-sprite.png) no-repeat 0 0;
  display: block;
  border: none;
  position: absolute;
  left: 3px;
  top: 10px;
  color: transparent;
  text-indent: 0;
  white-space: nowrap;
  overflow: hidden;
}

.g-btn-search:hover:before {
  background-position: -25px 0;
}

/* 搜尋-預設(與課程頁面) */
.p-select-box {
  position: relative;
  display: block;
  width: 100%;
  border: 1px solid #ed819d;
  background: #fff;
  -webkit-box-shadow: none;
  box-shadow: none;
  padding: 10px 10px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
  border-radius: 25px;
}

.p-search-box {
  position: relative;
  display: block;
  padding: 0 85px 0 0;
}

.p-search-box input[type='text'] {
  width: 100%;
  border: 1px solid #ed819d;
  background: #fff;
  -webkit-box-shadow: none;
  box-shadow: none;
  padding: 8px 10px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
  border-radius: 25px;
}

/* 搜尋-(店家頁面) */
.store-search .g-btn-search {
  width: 75px;
  color: #9c8cef;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  text-indent: 0;
  white-space: nowrap;
  overflow: visible;
  padding: 8px 10px 8px 23px;
  font-size: 1rem;
  border: 1px solid #ac9ef5;
  background: #fff;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
  border-radius: 25px;
}

.store-search .g-btn-search:hover {
  color: #6a57d0;
  background: #f9f6fc;
}

.store-search .g-btn-search:before {
  content: ' ';
  display: inline-block;
  width: 27px;
  height: 27px;
  background: url(../images/icon-sprite.png) no-repeat -400px -25px;
  display: block;
  border: none;
  position: absolute;
  left: 3px;
  top: 10px;
  color: transparent;
  text-indent: 0;
  white-space: nowrap;
  overflow: hidden;
}

.store-search .g-btn-search:hover:before {
  background-position: -425px -25px;
}

.p-store-select-box {
  position: relative;
  display: block;
  width: 100%;
  border: 1px solid #ac9ef5;
  background: #fff;
  -webkit-box-shadow: none;
  box-shadow: none;
  padding: 10px 10px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
  border-radius: 25px;
}

.p-search-box.store-search {
  position: relative;
  display: block;
  padding: 0 85px 0 0;
  margin: 10px 0;
}

.p-search-box.store-search input[type='text'] {
  width: 100%;
  border: 1px solid #ac9ef5;
  background: #fff;
  -webkit-box-shadow: none;
  box-shadow: none;
  padding: 8px 10px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
  border-radius: 25px;
}

/* 連結小icon */
.g-icon {
  display: inline-block;
  margin-bottom: -7px;
  margin-left: 2px;
  margin-right: 2px;
}

.g-icon:before {
  content: ' ';
  background-image: url(../images/icon-sprite.png);
  background-repeat: no-repeat;
  background-color: transparent;
  width: 23px;
  height: 23px;
  display: block;
}

.g-icon.g-icon-search:before {
  background-position: -2px -2px;
}

/* 查詢 */
.g-icon.g-icon-back:before {
  background-position: -102px -2px;
}

/* 返回前頁 */
.g-icon.g-icon-calendar:before {
  background-position: -127px -2px;
}

/* 日曆 */
.g-icon.g-icon-map:before {
  background-position: -177px -2px;
}

/* 課程地圖 */
.g-icon.g-icon-apply:before {
  background-position: -202px -2px;
}

/* 報名 */
.g-icon.g-icon-readmore:before {
  background-position: -227px -2px;
}

/* 閱讀更多 */
.g-icon.g-icon-user:before {
  background-position: -152px -2px;
}

/* 使用者 */
.g-icon.g-icon-add:before {
  width: 39px;
  height: 39px;
  background-position: -190px -25px;
}

/* 紅利產生日期 */
.g-icon.g-icon-bonusDate:before {
  background-position: -302px -2px;
}

/* 紅利事件描述 */
.g-icon.g-icon-bonusName:before {
  background-position: -252px -2px;
}

/* 紅利平台點數 */
.g-icon-bonusPoint:before {
  background-position: -477px -27px;
}

/* 增加 */
.g-icon.g-icon-classTime:before {
  background-position: -352px -2px;
}

/* 報到時間 */
.g-icon.g-icon-className:before {
  background-position: -252px -2px;
}

/* 課程主題 */
.g-icon.g-icon-classHost:before {
  background-position: -277px -2px;
}

/* 課程主講人 */
.g-icon.g-icon-classDate:before {
  background-position: -302px -2px;
}

/* 課程日期(粉) */
.g-icon.g-icon-classLocation:before {
  background-position: -377px -2px;
}

/* 課程地圖 */
.g-icon.g-icon-classLocationWhite:before {
  background-position: -377px -27px;
}

/* 課程地圖 */
.g-icon.g-icon-classPhone:before {
  background-position: -452px -27px;
}

/* 課程電話 */
.g-icon.g-icon-classState:before {
  background-position: -477px -27px;
}

/* 課程狀態 */
.g-icon.g-icon-classView:before {
  background-position: -502px -27px;
}

/* 查看課程詳細 */
.g-icon.g-icon-store:before {
  background-position: -402px -2px;
}

/* 分店名稱 */
.g-icon.g-icon-location:before {
  background-position: -427px -2px;
}

/* 分店地址 */
.g-icon.g-icon-tel:before {
  background-position: -452px -2px;
}

/* 分店電話 */
.g-icon.g-icon-baby-ok:before {
  background-position: -477px -2px;
}

/* 審核通過 */
.g-icon.g-icon-baby-yet:before {
  background-position: -502px -2px;
}

/* 尚待審核 */
.g-icon.g-icon-logout:before {
  background-position: -527px -2px;
}

/* 會員登出 */
.g-icon.g-icon-pviewSpec:before {
  background-position: -269px -28px;
  width: 33px;
  height: 33px;
  margin-bottom: -3px;
}

/* 產品規格 */
.g-icon.g-icon-pviewAge:before {
  background-position: -231px -28px;
  width: 33px;
  height: 33px;
  margin-bottom: -3px;
}

/* 適用年齡 */
.g-icon.g-icon-num1:before {
  width: 65px;
  height: 65px;
  background-position: 0 -63px;
}

/* 1 */
.g-icon.g-icon-num2:before {
  width: 65px;
  height: 65px;
  background-position: -65px -63px;
}

/* 2 */
.g-icon.g-icon-num3:before {
  width: 65px;
  height: 65px;
  background-position: -130px -63px;
}

/* 3 */
.g-icon.g-icon-num4:before {
  width: 65px;
  height: 65px;
  background-position: -195px -63px;
}

/* 4 */
.g-icon.g-icon-num5:before {
  width: 65px;
  height: 65px;
  background-position: -260px -63px;
}

/* 5 */
.g-icon-num1,
.g-icon-num2,
.g-icon-num3,
.g-icon-num4,
.g-icon-num5 {
  margin-bottom: -25px;
}

.g-icon.g-icon-footerfb:before {
  width: 50px;
  height: 50px;
  background-position: -195px -128px;
}

.g-icon.g-icon-footerline:before {
  width: 50px;
  height: 50px;
  background: url(../images/icon_line2.png) no-repeat;
  background-size: 200%;
}

.g-icon.g-icon-footerig:before {
  width: 50px;
  height: 50px;
  background: url(../images/icon_ig2.png) no-repeat;
  background-size: 200%;
}

/* 頁尾fb */
.g-icon.g-icon-footerfb:hover:before {
  background-position: -245px -128px;
}

.g-icon.g-icon-footerline:hover:before,
.g-icon.g-icon-footerig:hover:before {
  background-position: -50px 0;
}

/* 頁尾fb:hover */

/* 圖片-限制尺寸 */
.img-max img {
  max-width: 100%;
  line-height: 0;
}

/* 圖片-寶寶代表圖 */
.babeimg {
  width: 195px;
  height: 145px;
  background: url(../images/icon-sprite.png) no-repeat 0 -128px;
  margin: 0 auto 20px auto;
}

/* 圖片-陰影 */
.img-shadow img {
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}

/* 圖片-水平垂直置中區塊 */
.img-equalwrap {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.img-equalwrap img {
  display: inline-block;
}

/* 圖片-暗點遮罩 */
.mask-dark {
  position: relative;
}

.mask-dark:before {
  transition: all 0.3s cubic-bezier(.41, .17, .32, .93);
  -o-transition: all 0.3s cubic-bezier(.41, .17, .32, .93);
  -ms-transition: all 0.3s cubic-bezier(.41, .17, .32, .93);
  -moz-transition: all 0.3s cubic-bezier(.41, .17, .32, .93);
  -webkit-transition: all 0.3s cubic-bezier(.41, .17, .32, .93);
  content: ' ';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  opacity: 1;
  background: url(../images/mask-dark.png) repeat 0 0;
}

.mask-dark:hover:before {
  opacity: 0;
}

.mask-dark img {
  z-index: 1;
}

/* 圖片-放大效果 */
.mask-zoom img {
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
  transition: 1s cubic-bezier(.41, .17, .32, .93);
  -o-transition: 1s cubic-bezier(.41, .17, .32, .93);
  -ms-transition: 1s cubic-bezier(.41, .17, .32, .93);
  -moz-transition: 1s cubic-bezier(.41, .17, .32, .93);
  -webkit-transition: 1s cubic-bezier(.41, .17, .32, .93);
}

.mask-zoom:hover img {
  -ms-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

/* 圖片-形狀遮罩 */
.mask-shape {
  width: 100%;
  height: auto;
  max-width: 400px;
  max-height: 340px;
  position: relative;
  overflow: hidden;
}

.mask-shape:after {
  content: ' ';
  background: url(../images/mask-shape.png) no-repeat 0 0;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  z-index: 100;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -1px;
}

/* 圖片-全螢 */
.img-responsive {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.img-responsive img {
  width: 100vw;
  height: auto;
}

/* 圖片-連結提示 */
.mask-view {
  position: relative;
}

.mask-view--elem {
  display: none;
  -webkit-animation: bounceIn .6s;
  animation: bounceIn .6s;
  width: 88px;
  height: 88px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -44px;
  margin-left: -44px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  padding: 25px;
  background-color: rgba(255, 130, 145, 0.7);
}

.mask-view--elem:before {
  content: " ";
  display: block;
  text-align: center;
  width: 38px;
  height: 38px;
  background: url(../images/icon-sprite.png) no-repeat -114px -25px;
}

/* 按鈕-回到最頂部 */
.scrollTop {
  display: block;
  width: 58px;
  right: 5%;
  bottom: 120px;
  position: fixed;
  z-index: 900;
  overflow: hidden;
  background: url(../images/scrollTop.png) no-repeat center center;
  background-size: contain;
}

.scrollTop:before {
  content: '';
  display: block;
  width: 100%;
  padding-bottom: 148.27%;
  position: relative;
}

.scrollTop:hover {
  margin-top: -10px;
}

@media (max-width:991px) {
  .scrollTop {
    right: 40px;
    bottom: 30px;
  }
}

@media (max-width:767px) {
  .scrollTop {
    right: 20px;
    bottom: 55px;
    width: 35px;
  }
}

/* 首頁彈出 */
.popup {
  width: 100%;
  overflow: hidden;
  color: inherit;
  font-size: 1rem;
}

.popup-open {
  width: 50px;
  height: 50px;
  display: block;
  position: fixed;
  bottom: 15px;
  right: 15px;
  cursor: pointer;
  z-index: 500;
}

.popup-open:hover {
  margin-bottom: 13px;
}

.popup-open.hi {
  -webkit-animation: bounceIn .8s cubic-bezier(.41, .17, .32, .93);
  -moz-animation: bounceIn .8s cubic-bezier(.41, .17, .32, .93);
  -o-animation: bounceIn .8s cubic-bezier(.41, .17, .32, .93);
  animation: bounceIn .8s cubic-bezier(.41, .17, .32, .93);
}

@media (min-width:768px) {
  .popup-open {
    bottom: 55px;
    right: 65px;
  }
}

/* 會員表單 */
.form-agree {
  line-height: 40px;
}

.form-agree .checkbox-style {
  padding-left: 0;
}

.form-agree a {
  color: inherit;
  text-decoration: underline;
}

.form-agree a:hover {
  color: ##EE819E;
  text-decoration: underline;
}

.m-stit {
  display: block;
  margin: 30px 0 10px 0;
  padding: 0 0 0 15px;
  font-size: 1.125rem;
  line-height: 1.3;
  font-weight: 600;
  border-left: 3px solid #EE819E;
  color: #EE819E;
}

.m-babe-tit {
  font-weight: bold;
  font-size: 1rem;
  color: #555;
  display: block;
  padding: 0;
  margin: 25px 0 40px 10px;
  position: relative;
}

/* FORM - BOX */
.form-box {
  display: block;
  position: relative;
  margin: 0 auto 10px auto;
  padding: 0 0 0 150px;
  font-size: 16px;
}

.form-box.full-label {
  padding-left: 0;
}

.form-box.full-label .label-style {
  width: auto;
  display: block;
  position: relative;
  top: auto;
  left: auto;
  margin: 0 0 10px 0;
}

.form-box.long-label {
  padding-left: 300px;
}

.form-box.long-label .label-style {
  width: 300px;
}

.form-box.mid-label {
  padding-left: 200px;
}

.form-box.mid-label .label-style {
  width: 200px;
}

.label-style {
  font-size: 16px;
  width: 150px;
  line-height: 1.3;
  color: #444;
  padding: 0 0 0 10px;
  margin: 0;
  display: inline-block;
  border: none;
  position: absolute;
  top: 12px;
  left: 0;
}

.form-box .fill-style {
  font-size: 16px;
  line-height: 1.3;
  color: #444;
  padding: 10px 5px;
  margin: 0;
  display: block;
  min-height: 35px;
}

.ac-vertify {
  position: relative;
  padding-right: 145px;
}

.ac-vertify .checkAccount {
  width: 140px;
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0;
  line-height: 40px;
}

.ac-vertify .checkAccount:before {
  margin: 0;
}

.btn-loginfb {
  line-height: 40px;
  background: #3b5998;
  border-radius: 4px;
  display: block;
  font-size: 14px;
  padding: 0 15px;
  margin: 5px 0 0 0;
  width: calc(100% - 145px);
  color: #fff;
  text-align: center;
}

.btn-loginfb:hover {
  background: #2858bd;
  color: #fff;
}

.btn-loginfb:before {
  content: '\f09a';
  color: #fff;
  font-size: 1.25rem;
  display: inline-block;
  vertical-align: middle;
  margin: 0 5px 0 0;
  font-family: 'FontAwesome';
}

.label-style .star {
  color: red;
  font-family: 'Arial';
  font-size: 1.1375rem;
  display: inline-block;
  vertical-align: middle;
  position: absolute;
  top: 0;
  left: 0;
  font-style: normal;
}

.label-style .star:before {
  display: none;
}

.form-box .etc .radio-style,
.form-box .etc .checkbox-style {
  margin-right: 0;
}

.form-box .etc {
  display: inline-block;
  vertical-align: top;
  margin-right: 15px;
}

.form-box .etc .input-style {
  width: auto;
  max-width: 100px;
  display: inline-block;
  vertical-align: top;
}

.form-box .upload-file-wrap {
  padding: 5px 0;
  line-height: 1.2;
  display: block;
  position: relative;
}

.form-box .upload-file-wrap .progress-wrap {
  margin-bottom: 10px;
}

.form-box .upload-file-wrap .g-btn-upload {
  display: inline-block;
  font-size: 0.9375rem;
  height: 30px;
  line-height: 26px;
  padding: 0 10px;
  margin: 0;
  width: auto;
}

.form-box.check-full .radio-style,
.form-box.check-full .checkbox-style,
.form-box.check-full .etc {
  display: block;
  margin: 0;
}

.form-box.check-multi .radio-style,
.form-box.check-multi .checkbox-style,
.form-box.check-multi .etc {
  min-width: calc(32% - 10px);
}

.form-box.full-label.check-multi .radio-style,
.form-box.full-label.check-multi .checkbox-style,
.form-box.full-label.check-multi .etc {
  min-width: calc(19% - 10px);
}

.form-box.full-label.check-multi .etc .radio-style,
.form-box.full-label.check-multi .etc .checkbox-style {
  width: auto;
  display: inline-block;
}

.form-box.full-label.check-multi .radio-style span,
.form-box.full-label.check-multi .checkbox-style span {
  margin-left: 10px;
}

@media (max-width:1499px) {

  .form-box.full-label.check-multi .radio-style,
  .form-box.full-label.check-multi .checkbox-style,
  .form-box.full-label.check-multi .etc {
    min-width: calc(24% - 10px);
  }
}

@media (max-width:991px) {

  .form-box.full-label.check-multi .radio-style,
  .form-box.full-label.check-multi .checkbox-style,
  .form-box.full-label.check-multi .etc {
    min-width: calc(32% - 10px);
  }
}

@media (max-width:767px) {

  .form-box,
  .form-box.long-label,
  .form-box.mid-label {
    padding: 0 0 10px 0;
  }

  .label-style,
  .form-box.long-label .label-style,
  .form-box.mid-label .label-style {
    display: block;
    position: relative;
    top: auto;
    font-size: 0.875rem;
    margin: 0 0 5px 0;
    color: #666;
    padding: 0;
  }

  .label-style .star {
    position: relative;
    left: auto;
    top: auto;
  }
}

@media (max-width:639px) {

  .form-box.full-label.check-multi .radio-style,
  .form-box.full-label.check-multi .checkbox-style,
  .form-box.full-label.check-multi .etc {
    min-width: calc(49% - 10px);
  }
}

@media (max-width:399px) {

  .form-box.full-label.check-multi .radio-style,
  .form-box.full-label.check-multi .checkbox-style,
  .form-box.full-label.check-multi .etc {
    min-width: auto;
    display: block;
  }
}

/* TEXT */
.input-style {
  width: 100%;
  background-color: #fff;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  height: 40px;
  padding: 0 10px;
}

.input-style:focus {
  border: 1px solid #EE819E;
}

/* CODE */
.form-box.code {
  max-width: calc(50% + 100px - 19px);
  width: 100%;
  display: inline-block;
  vertical-align: middle;
}

.form-box.code .input-style {
  padding-right: 150px;
}

.codeimg {
  width: 155px;
  position: absolute;
  bottom: 10px;
  right: 0;
}

@media (max-width:767px) {
  .form-box.code {
    width: 100%;
    max-width: 100%;
  }

  .form-box.code .input-style {
    padding-right: 130px;
  }

  .codeimg {
    width: 120px;
  }
}

/* RADIO */
.radio-style {
  padding: 0;
  white-space: nowrap;
  margin: 0 10px 0 0;
  display: inline-block;
  vertical-align: top;
  font-weight: normal;
  line-height: 40px;
}

.radio-style input {
  outline: none;
  display: none;
}

.radio-style input+span {
  display: inline-block;
  vertical-align: middle;
  border: 2px solid #999;
  background: #fff;
  width: 20px;
  height: 20px;
  padding: 3px;
  margin: -2px 8px 0 0;
  border-radius: 50%;
}

.radio-style input+span i {
  display: block;
  width: 100%;
  height: 100%;
  background: #999;
  -webkit-transform: scale(0);
  transform: scale(0);
  border-radius: 50%;
  -webkit-transition: -webkit-transform .2s;
  transition: -webkit-transform .2s;
  transition: transform .2s;
  transition: transform .2s, -webkit-transform .2s;
}

.radio-style input:checked+span {
  border-color: #999;
}

.radio-style input:checked+span i {
  -webkit-transform: scale(1);
  transform: scale(1);
}

.radio-style:hover input+span,
.radio-style:active input+span {
  border-color: #666;
}

.radio-style:hover input+span i,
.radio-style:active input+span i {
  background-color: #666;
}

.radio-style:hover input:checked+span,
.radio-style:active input:checked+span {
  border-color: #666;
  background: #fff;
}

.radio-style:hover input:checked+span i,
.radio-style:active input:checked+span i {
  background-color: #666;
}

@media (max-width:991px) {
  .radio-style {
    margin: 0 5px;
  }
}

/* CHECKBOX */
.checkbox-style {
  padding: 0;
  white-space: nowrap;
  margin: 0 10px 0 0;
  display: inline-block;
  vertical-align: top;
  font-weight: normal;
  line-height: 40px;
}

.checkbox-style input {
  outline: none;
  display: none;
}

.checkbox-style input+span {
  display: inline-block;
  vertical-align: middle;
  border: 2px solid #999;
  background: #fff;
  width: 18px;
  height: 18px;
  padding: 0;
  margin: -2px 8px 0 0;
  border-radius: 1px;
}

.checkbox-style input+span i {
  display: inline-block;
  vertical-align: top;
  margin: 3px 0 0 6px;
  width: 12px;
  height: 8px;
  border-left: 2px solid #555;
  border-bottom: 2px solid #999;
  -webkit-transform: scale(0) rotate(-45deg);
  transform: scale(0) rotate(-45deg);
  -webkit-transition: -webkit-transform .2s;
  transition: -webkit-transform .2s;
  transition: transform .2s;
  transition: transform .2s, -webkit-transform .2s;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}

.checkbox-style input:checked+span {
  border-color: #999;
}

.checkbox-style input:checked+span i {
  -webkit-transform: scale(1) rotate(-45deg);
  transform: scale(1) rotate(-45deg);
}

.checkbox-style:hover input+span,
.checkbox-style:active input+span {
  border-color: #666;
}

.checkbox-style:hover input:checked+span,
.checkbox-style:active input:checked+span {
  border-color: #666;
  background: #fff;
}

.checkbox-style:hover input:checked+span i,
.checkbox-style:active input:checked+span i {
  border-left: 2px solid #666;
  border-bottom: 2px solid #666;
}

/* TEXTAREA */
.textarea-style {
  border-radius: 4px;
  background: #fff;
  height: 90px;
  padding: 10px;
  width: 100%;
  display: block;
  outline: none;
  border: 1px solid #ccc;
}

.textarea-style:focus {
  border: 1px solid #EE819E;
}

/* SELECT */
.select-style {
  border-radius: 4px;
  padding: 0 40px 0 10px;
  display: block;
  width: 100%;
  height: 40px;
  line-height: 40px;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: #fff url("../images/select_aw.png") right 0 no-repeat;
  background-size: auto 100%;
  outline: none;
  border: 1px solid #ccc;
}

.select-style:focus {
  border: 1px solid #EE819E;
}

.select-style::-ms-expand {
  display: none;
}

.form-box.select-multi .select-style,
.form-box.select-multi .input-style {
  display: inline-block;
  vertical-align: top;
  width: calc((100% / 3) - 5px);
  margin-left: 3px;
}

.form-box.select-multi .select-style:nth-of-type(3n+1) {
  margin-left: 0;
}

@media (max-width:499px) {

  .form-box.select-multi .select-style,
  .form-box.select-multi .input-style {
    display: block;
    width: 100%;
    margin-left: 0;
    margin-bottom: 10px;
  }
}

/* ==========================================
  共用架構
========================================== */
.g-container-fluid,
.g-container,
.g-container-bigger,
.g-container-form {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  min-width: 180px;
}

.g-container-fluid {
  padding-left: 0;
  padding-right: 0;
}

@media (min-width:768px) {
  .g-container {
    width: 750px;
  }

  .g-container-bigger {
    width: 768px;
  }
}

@media (min-width:992px) {
  .g-container {
    width: 980px;
  }

  .g-container-bigger {
    width: 980px;
  }
}

@media (min-width:1200px) {
  .g-container {
    width: 980px;
  }

  .g-container-bigger {
    width: calc(100% - 80px);
    max-width: 1200px;
  }
}

@media (min-width:1500px) {
  .g-container {
    width: 1300px;
  }

  .g-container-bigger {
    width: calc(100% - 80px);
    max-width: 1500px
  }
}

/* class_view */
@media (max-width:600px) {

  .col-xs-4.xxs,
  .col-xs-8.xxs {
    width: 100%;
  }
}

/* 頁首 */
.g-header {
  background: url(../images/header-bg.png) repeat-x 0 bottom;
  height: 125px;
  left: 0;
  right: 0;
  z-index: 1000;
}

.g-header--unscroll {
  padding-top: 25px;
  position: absolute;
  top: 0;
}

.g-header--scroll {
  padding-top: 38px;
  position: fixed;
  top: -125px;
}

.g-header--scroll.show {
  top: -30px;
  opacity: 1;
  -webkit-animation: fadeInDown .3s cubic-bezier(.41, .17, .32, .93);
  -moz-animation: fadeInDown .3s cubic-bezier(.41, .17, .32, .93);
  -o-animation: fadeInDown .3s cubic-bezier(.41, .17, .32, .93);
  animation: fadeInDown .3s cubic-bezier(.41, .17, .32, .93);
}

.g-logo {
  width: 135px;
  height: 50px;
  float: left;
  margin-left: 10px;
  position: relative;
  z-index: 100;
}

.g-logo a {
  display: block;
}

.g-header--scroll .g-logo {
  width: 135px;
  height: 50px;
}

/* 主導覽 */
.navbar-toggle {
  position: relative;
  float: right;
  padding: 10px;
  margin: 10px;
  background-color: transparent;
  background-image: none;
  border: none;
  border-radius: 5px;
  display: block;
}

.navbar-toggle:hover {
  background-color: transparent;
}

/* open-hambuger */
.navbar-toggle .icon-bar {
  display: block;
  width: 25px;
  height: 3px;
  border-radius: 5px;
  background-color: #ed819e;
}

.navbar-toggle:hover .icon-bar {
  background-color: #FF346E;
}

.navbar-toggle .icon-bar+.icon-bar {
  margin-top: 5px;
}

/* close-hambuger */
.navbar-toggle .icon-bar:nth-child(1) {
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

.navbar-toggle .icon-bar:nth-child(2) {
  opacity: 1;
}

.navbar-toggle .icon-bar:nth-child(3) {
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

/*open-hambuger*/
.navbar-toggle.open .icon-bar:nth-child(1) {
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  margin-top: 10px;
}

.navbar-toggle.open .icon-bar:nth-child(2) {
  opacity: 0;
}

.navbar-toggle.open .icon-bar:nth-child(3) {
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  margin-top: -11px;
}

@media (min-width:1250px) {
  .navbar-toggle {
    display: none;
  }
}

.g-header-right {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
}

/* 主導覽mobile */
.g-mainNav-wrap {
  float: none;
  height: 0;
  position: absolute;
  top: 62px;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  text-align: center;
  -webkit-animation: fadeIn .5s;
  animation: fadeIn .5s;
}

.g-mainNav-wrap.opennav {
  display: block;
}

.g-mainNav {
  border-top: 1px solid #ddd;
}

.g-mainNav li {
  float: left;
  width: 50%;
  height: auto;
  margin: 0;
  position: relative;
  overflow: hidden;
  border: none;
  border-bottom: 1px solid #ddd;
}

.g-mainNav li:nth-child(even) {
  border-right: 1px solid #ddd;
}

.g-mainNav li:after {
  content: ' ';
  height: 1px;
  width: 100%;
  background: #ddd;
  position: absolute;
  left: 0;
  top: 0;
  display: none;
}

.g-mainNav li a {
  display: block;
  position: relative;
  font-size: .9375rem;
  color: #333;
  text-align: left;
  padding-left: 55px;
  line-height: 50px;
  background-color: #fff;
}

.g-mainNav li a:hover {
  color: #EA7195;
  background-color: #f8f8f8;
}

@media (min-width:1250px) {
  .g-mainNav li a {
    line-height: inherit;
    font-size: .8rem;
  }

  .g-mainNav li.m1:after {
    display: none;
  }
}

@media (min-width:1500px) {
  .g-mainNav li a {
    font-size: .9375rem;
  }
}

/* 主導覽選單icon */

/* m1 = 關於貝比卡兒, m2 = 產品資訊, m3 = 媽媽教室, m4 = 購買地點, m5 = 知識百科, m6 = 活動訊息, m7 = 使用者分享, m8 = 聯絡我們, m9 = 金裝羊活動*/
.g-mainNav li a span,
.g-header--scroll .g-mainNav li a span {
  margin: 0 auto;
  content: ' ';
  width: 40px;
  height: 40px;
  display: block;
  background-image: url(../images/menu-sprite.png);
  background-repeat: no-repeat;
  background-color: transparent;
  position: absolute;
  left: 5px;
  top: 5px;
}

.g-mainNav li a:hover span,
.g-header--scroll .g-mainNav li a:hover span {
  background-image: url(../images/menu-sprite-hover.png);
}

.g-mainNav li.m9 a:hover span,
.g-header--scroll .g-mainNav li.m9 a:hover span {
  background: url(../images/m9.png) -40px 0;
}

.g-mainNav li.m1 a span,
.g-header--scroll .g-mainNav li.m1 a span {
  background-position: 0 0;
}

.g-mainNav li.m2 a span,
.g-header--scroll .g-mainNav li.m2 a span {
  background-position: -40px 0;
}

.g-mainNav li.m3 a span,
.g-header--scroll .g-mainNav li.m3 a span {
  background-position: -80px 0;
}

.g-mainNav li.m4 a span,
.g-header--scroll .g-mainNav li.m4 a span {
  background-position: -120px 0;
}

.g-mainNav li.m5 a span,
.g-header--scroll .g-mainNav li.m5 a span {
  background-position: -160px 0;
}

.g-mainNav li.m6 a span,
.g-header--scroll .g-mainNav li.m6 a span {
  background-position: -200px 0;
}

.g-mainNav li.m7 a span,
.g-header--scroll .g-mainNav li.m7 a span {
  background-position: -240px 0;
}

.g-mainNav li.m8 a span,
.g-header--scroll .g-mainNav li.m8 a span {
  background-position: -280px 0;
}

.g-mainNav li.m9 a span,
.g-header--scroll .g-mainNav li.m9 a span {
  background: url(../images/m9.png) 0 0;
}
.g-mainNav li.m10 a span,
.g-header--scroll .g-mainNav li.m10 a span {
  background: url(../images/m10.png) 0 0;
}
.g-mainNav li.m10 a:hover span, .g-header--scroll .g-mainNav li.m10 a:hover span {
  background: url(../images/m10.png) -40px 0;
}
@media (min-width:768px) {
  .g-mainNav-wrap {
    top: 79px;
  }

  .g-header--scroll .g-mainNav-wrap {
    top: 62px;
  }

  .g-logo {
    width: 190px;
    height: 70px;
    margin-left: 30px;
  }
}

@media (min-width:1250px) {

  .g-header-right,
  .g-header--scroll .g-header-right {
    left: 0;
  }

  .g-mainNav-wrap {
    float: left;
    width: 70%;
    max-width: 850px;
    position: relative;
    top: auto;
    right: auto;
    left: 49%;
    margin-left: -430px;
    bottom: auto;
    display: block;
  }

  .g-header--scroll .g-mainNav-wrap {
    top: auto;
  }

  .g-mainNav {
    border-top: none;
  }

  .g-mainNav li {
    float: left;
    width: 9.5%;
    height: auto;
    border: none;
    border-bottom: none;
  }

  .g-mainNav li:nth-child(even) {
    border-right: none;
  }

  .g-mainNav li:after {
    height: 15px;
    width: 1px;
    left: 0;
    top: auto;
    bottom: 5px;
    display: block;
    background-color: #de7191;
  }

  .g-mainNav li:first-child:after {
    display: none;
  }

  .g-mainNav li a {
    text-align: center;
    padding-left: 0;
    background-color: transparent;
  }

  .g-mainNav li a:hover {
    background-color: transparent;
  }

  .g-mainNav li a span {
    position: relative;
    left: auto;
    top: auto;
  }

  /* 滾動卷軸後選單 */
  .g-header--scroll .g-mainNav-wrap {
    max-width: 980px;
    /* 860 */
    margin-left: -450px;
  }

  .g-header--scroll .g-mainNav li a {
    font-size: .92rem;
  }

  .g-header--scroll .g-mainNav li:after {
    display: none;
  }

  .g-header--scroll .g-mainNav li a span,
  .g-header--scroll .g-mainNav li.m9 a span {
    width: 20px;
    height: 20px;
    background-image: none;
    position: relative;
    left: 0;
  }
  .g-header--scroll .g-mainNav li a span,
  .g-header--scroll .g-mainNav li.m10 a span {
    width: 20px;
    height: 20px;
    background-image: none;
    position: relative;
    left: 0;
  }
  .g-header--scroll .g-mainNav li a:hover span {
    background-position: -452px -10px;
  }

  .g-header--scroll .g-mainNav li.m9 a:hover span {
    background: url(../images/m9.png) -40px 0;
  }
}

@media (min-width:1250px) and (max-width:1449px) {
  .g-logo {
    width: 150px;
  }
}

@media (min-width:1450px) {
  .g-mainNav-wrap {
    margin-left: -450px;
    max-width: 1170px;
    /* 980 */
  }
}

@media (min-width:1650px) {
  .g-mainNav-wrap {
    margin-left: -490px;
  }
}


/* 副導覽 */
.mobile-subNav {
  display: none;
}

.g-subNav {
  width: auto;
  height: auto;
  float: right;
  position: absolute;
  top: 10px;
  right: 52px;
  display: inline-block;
}

.g-subNav li {
  float: left;
  width: auto;
  margin: 0 2px 0 0;
  -ms-transform: scale(.85);
  -webkit-transform: scale(.85);
  transform: scale(.85);
}

.g-subNav li a {
  display: inline-block;
  position: relative;
  font-size: .82rem;
  color: #333;
}

.g-subNav li a:hover {
  color: #55b800;
}

.g-subNav li span,
.mobile-subNav a span {
  margin: 0 auto;
  content: ' ';
  width: 40px;
  height: 40px;
  display: inline-block;
  vertical-align: middle;
  background-image: url(../images/menu-sprite.png);
  background-repeat: no-repeat;
  bag-subNavckground-color: transparent;
  transition: color .3s ease;
  -o-transition: color .3s ease;
  -ms-transition: color .3s ease;
  -moz-transition: color .3s ease;
  -webkit-transition: color .3s ease;
}

.g-subNav li:hover span,
.mobile-subNav a:hover span {
  background-image: url(../images/menu-sprite-hover.png);
}

.g-mainNav li.mobile-subNav a.member-login {
  float: none;
  width: 100%;
}

.g-mainNav li.mobile-subNav a.member-logout span {
  background-position: -300px -133px;
  background-image: url(../images/icon-sprite.png);
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}

.g-mainNav li.mobile-subNav a.member-logout:hover span {
  background-position: -344px -133px;
  background-image: url(../images/icon-sprite.png);
}

.g-subNav li.subm1 span,
.mobile-subm1 span {
  background-position: -320px 0;
}

.g-subNav li.subm2 span,
.mobile-subm2 span {
  background-position: -320px 0;
}

.g-subNav li.subm3 span,
.mobile-subm3 span {
  background-position: -360px 0;
}

.g-subNav li.subm4 span,
.mobile-subm4 span {
  background-position: -400px 0;
}

.mobile-line span {
  background-position: -520px 0;
}

.mobile-ig span {
  background-position: -560px 0;
}


.g-subNav li.link_line a span {
  background: url(../images/icon_line.png) no-repeat;
}

.g-subNav li.link_ig a span {
  background: url(../images/icon_ig.png) no-repeat;
}

.g-subNav li.link_line a span:hover,
.g-subNav li.link_ig a span:hover {
  background-position: -40px 0;
}

.mobile-subNav a span .g-subNav li b {
  font-weight: normal;
  display: none;
  white-space: nowrap;
}

.subm-dropmenu {
  width: 100px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #ccc;
  position: absolute;
  top: 60px;
  left: 53%;
  font-size: 1rem;
  -webkit-transform: translateX(-50%) scale(1.5);
  -ms-transform: translateX(-50%) scale(1.5);
  -o-transform: translateX(-50%) scale(1.5);
  transform: translateX(-50%) scale(1.5);
  height: 0;
  opacity: 0;
}

.g-header--scroll .subm-dropmenu {
  top: 65px;
}

.g-subNav li.member:hover .subm-dropmenu {
  height: auto;
  display: block;
  opacity: 1;
}

.subm-dropmenu:before {
  content: '';
  position: absolute;
  border-width: 0 5px 8px 5px;
  border-color: transparent transparent #fff transparent;
  border-style: solid;
  top: -7px;
  left: 50%;
  margin-left: -5px;
  z-index: 3;
}

.subm-dropmenu:after {
  content: '';
  position: absolute;
  border-width: 0 7px 8px 7px;
  border-color: transparent transparent #ccc transparent;
  border-style: solid;
  top: -8px;
  left: 50%;
  margin-left: -7px;
  z-index: 2;
}

.subm-dropmenu li {
  display: block;
  float: none;
  margin: 0;
  padding: 0;
}

.subm-dropmenu li a {
  display: block;
  border-top: 1px solid #ccc;
  padding: 0.2rem 0.5rem;
  margin: 0 auto;
}

.subm-dropmenu li:first-child a {
  border-top: none;
}

.member-welcome {
  font-size: 0.85rem;
  color: #666;
  position: absolute;
  top: 45%;
  left: auto;
  right: 185px;
  white-space: nowrap;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-52%);
  transform: translateY(-50%);
  text-align: right;
  display: inline-block;
  width: auto;
}

.g-header--scroll .member-welcome {
  top: 55%;
}
.trial_data{
  list-style: none;
  margin: 0;
  padding: 0;
}
.trial_data li{
  display: flex;
  width: 100%;
  padding: 5px 0;
}
.trial_data_title{
  flex: 0 0;
  flex-basis: 125px;
  font-weight: bold;
  color: #EC4F78;
}
.trial_data_ds{
  flex-grow: 2;
}
.trial_btn{
  display: inline-block;
  border: none;
  background-color: #ed819d;
  color: #fff;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  padding: 0.5rem 1rem;
  margin: 0.5rem 0rem 0.5rem 0;
  font-size: .9rem;
  white-space: nowrap;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
  border-radius: 25px;
  position: absolute;
  top: 5px;
  right: 15px;
}
.trial_btn:hover{
  background-color: #EC4F78;
  color: #fff;

}


.trial_btn_embar{
  position: absolute;
  top: 5px;
  right: 15px;
  display: inline-block;
  border: none;
  background-color: #d8d8d8;
    color: #fff;
    cursor: no-drop;
  text-align: center;
  vertical-align: middle;
  padding: .5rem 1rem;
  margin: 0.5rem 0rem 0.5rem 0;
  font-size: .9rem;
  white-space: nowrap;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
  border-radius: 25px;
}
.trial_btn_embar:hover{
  background-color: #a7a7a7;
    color: #fff;
}
.first_btn .g-btn{
  display: inline-block;
    border: none;
    background-image: none;
    background-repeat: no-repeat;
    background-color: #ed819d;
    background-position: 0 0;
    color: #fff;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    padding: 0.5rem 1rem;
    margin: 0.5rem 0rem 0.5rem 0;
    font-size: .9rem;
    white-space: nowrap;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
}
.first_activity .g-btn{
  display: inline-block;
    border: none;
    background-image: none;
    background-repeat: no-repeat;
    background-color: #ed819d;
    background-position: 0 0;
    color: #fff;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    padding: 0.5rem 1rem;
    margin: 0.5rem 0rem 0.5rem 0;
    font-size: .9rem;
    white-space: nowrap;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    border-radius: 25px;
}
.pink_a{
  color: #EC4F78;
  cursor: pointer;
}
.pink_a:hover{
  color: #EC4F78;
  text-decoration: underline;

}
.trial_row{
  padding: 0 0 35px;
}
.trial_babyWrapper{
  padding: 0 0 25px;
    border-bottom: 1px dashed #d6d6d6;
}

.info_radio {
  position: relative;
}

.cboxtags {
  position: absolute;
  top:0;
  right: 0;
}
.cboxtags label {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.9);
  border: 2px solid rgba(139, 139, 139, 0.3);
  color: #adadad;
  border-radius: 25px;
  white-space: nowrap;
  margin: 3px 0px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.2s;
}

.cboxtags label {
  padding: 8px 12px;
  cursor: pointer;
}

.cboxtags label::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "FontAwesome";
  font-weight: 900;
  font-size: 12px;
  padding: 2px 6px 2px 2px;
  content: "\f067";
  transition: transform 0.3s ease-in-out;
}

.cboxtags input[type="checkbox"]:checked+label::before {
  content: "\f00c";
  transform: rotate(-360deg);
  transition: transform 0.3s ease-in-out;
}

.cboxtags input[type="checkbox"]:checked+label {
  border: 2px solid #ee8bb7;
  background-color: #ee8bb7;
  color: #fff;
  transition: all 0.2s;
}

.cboxtags input[type="checkbox"]:disabled+label::before {
  content: "\f00c";
  transform: rotate(-360deg);
  transition: transform 0.3s ease-in-out;
}

.cboxtags input[type="checkbox"]:disabled+label {
  border: 2px solid #ee8bb7;
  background-color: #ee8bb7;
  color: #fff;
  transition: all 0.2s;
}

.cboxtags input[type="checkbox"] {
  display: absolute;
}

.cboxtags input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}

.cboxtags input[type="checkbox"]:focus+label {
  border: 2px solid #ee8bb7;
}


/*  */
.against_row{
  padding: 10px 0;
}
.against {
  display: inline-block;
}
.against label {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.9);
  border: 2px solid rgba(139, 139, 139, 0.3);
  color: #adadad;
  border-radius: 25px;
  white-space: nowrap;
  margin: 3px 0px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.2s;
}

.against label {
  padding: 5px 10px;
  cursor: pointer;
}

.against label::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "FontAwesome";
  font-weight: 900;
  font-size: 12px;
  padding: 2px 6px 2px 2px;
  content: "\f067";
  transition: transform 0.3s ease-in-out;
}

.against input[type="radio"]:checked+label::before {
  content: "\f00c";
  transform: rotate(-360deg);
  transition: transform 0.3s ease-in-out;
}

.against input[type="radio"]:checked+label {
  border: 2px solid #ee8bb7;
  background-color: #ee8bb7;
  color: #fff;
  transition: all 0.2s;
}

.against input[type="radio"]:disabled+label::before {
  content: "\f00c";
  transform: rotate(-360deg);
  transition: transform 0.3s ease-in-out;
}

.against input[type="radio"]:disabled+label {
  border: 2px solid #ee8bb7;
  background-color: #ee8bb7;
  color: #fff;
  transition: all 0.2s;
}

.against input[type="radio"] {
  display: absolute;
}

.against input[type="radio"] {
  position: absolute;
  opacity: 0;
}

.against input[type="radio"]:focus+label {
  border: 2px solid #ee8bb7;
}

/*  */

.trial_confirm{

}
.trial_confirm .form-group{
  margin-bottom: 0;
}
.memeber_activity .trial_data li {
  display: flex;
  width: 100%;
  padding: 5px 0;
  line-height: 1.5;
}
.against_content{
  display: none;
}
.against_active{
  display: block;
}
@media (max-width:450px) {
  .g-mainNav-wrap {
    top: 62px;
  }

  .g-mainNav-mobile {
    top: 62px;
  }

  /* .p-container-bg, .p-container-bg.m1, .p-container-bg.m2, .p-container-bg.m2-s1, .p-container-bg.m2-s2, .p-container-bg.m2-s3, .p-container-bg.m2-s4, .p-container-bg.m2-s5, .p-container-bg.m2-s6, .p-container-bg.m3, .p-container-bg.m4, .p-container-bg.m5, .p-container-bg.m6, .p-container-bg.m7, .p-container-bg.m8, .p-container-bg.subm-member, .p-container-bg.subm-sitemap { margin-top: 70px; } */
  .g-subNav {
    display: none;
  }

  .g-mainNav li.mobile-subNav {
    display: block;
    width: 100%;
    background: #fff;
  }

  .g-mainNav li.mobile-subNav a {
    float: left;
    display: block;
    width: 50%;
  }

  .g-mainNav li.mobile-subNav .mobile-subm4 .sr-only,
  .g-mainNav li.mobile-subNav .mobile-line .sr-only,
  .g-mainNav li.mobile-subNav .mobile-ig .sr-only {
    text-indent: 0;
    width: auto;
    overflow: visible;
    position: relative;
  }

  .g-mainNav li.mobile-subNav a.mobile-subm1,
  .g-mainNav li.mobile-subNav a.mobile-subm3,
  .g-mainNav li.mobile-subNav a.mobile-line {
    border-right: 1px solid #ddd;
  }

  .g-mainNav li.mobile-subNav a.mobile-subm1,
  .g-mainNav li.mobile-subNav a.mobile-subm2,
  .g-mainNav li.mobile-subNav a.mobile-subm3,
  .g-mainNav li.mobile-subNav a.mobile-subm4 {
    border-bottom: 1px solid #ddd;
  }

  .member-welcome {
    right: 55px;
    top: 50%
  }

  .g-header--scroll .member-welcome {
    top: 46%;
  }
}

@media (min-width:768px) {
  .g-header {
    height: 125px;
  }

  .g-header--unscroll {
    padding-top: 25px;
  }

  .g-header--scroll.show {
    top: -30px;
  }

  .g-header--scroll {
    padding-top: 38px;
  }
}

@media (min-width:1250px) {
  .g-subNav {
    right: 10px;
    top: 10px;
  }

  .member-welcome {
    right: 140px;
    display: none;
  }
}

@media (min-width:1650px) {
  .g-subNav {
    width: auto;
  }

  .g-subNav li {
    width: auto;
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  .g-subNav li b {
    display: inline;
  }

  .g-header--scroll .g-subNav li {
    -ms-transform: scale(.85);
    -webkit-transform: scale(.85);
    transform: scale(.85);
  }

  .g-header--scroll .g-subNav li b {
    display: none;
  }

  .member-welcome {
    right: 260px;
  }

  .g-header--scroll .member-welcome {
    right: 190px;
    display: block;
  }

  .g-header--unscroll .subm-dropmenu {
    -webkit-transform: translateX(-50%) scale(1.2);
    -ms-transform: translateX(-50%) scale(1.2);
    -o-transform: translateX(-50%) scale(1.2);
    transform: translateX(-50%) scale(1.2);
    top: 50px;
  }
}

/* 頁尾 */
.g-footer {
  background: url(../images/footer-bg.jpg) repeat 0 0 #f1a9c0;
  color: #fff;
  position: relative;
}

.g-footer>.g-container {
  max-width: 1300px;
}

.g-footer a,
.g-footer a:hover {
  color: #fff;
}

.g-footer-logo {
  margin: 0 0.8rem 0.8rem 0;
}

.g-footer-left,
.g-footer-right {
  float: none;
  width: 100%;
}

@media (min-width:992px) {
  .g-footer-left {
    float: left;
    width: 20%;
  }

  .g-footer-right {
    float: right;
    width: 80%;
  }
}

.g-footer-top {
  padding-top: 30px;
  padding-bottom: 30px;
  padding-right: -50px;
  display: none;
}

.g-footerNav {
  width: 100%;
}

@media (min-width:768px) {
  .g-footer-top {
    display: block;
  }
}

.g-footerNav ul {
  margin: 0;
  padding: 0;
}

.g-footerNav li {
  display: block;
  text-align: left;
}

.g-footerNav li a {
  font-size: .82rem;
  white-space: nowrap;
  display: block;
  position: relative;
  z-index: 10;
}

.g-footerNav li a:hover {
  background: #dd7190;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
  border-radius: 25px;
  padding: 0 10px;
  transition: all .3s cubic-bezier(.41, .17, .32, .93);
  -o-transition: all .3s cubic-bezier(.41, .17, .32, .93);
  -ms-transition: all .3s cubic-bezier(.41, .17, .32, .93);
  -moz-transition: all .3s cubic-bezier(.41, .17, .32, .93);
  -webkit-transition: all .3s cubic-bezier(.41, .17, .32, .93);
}

.g-footerNav>li {
  margin: 1rem 0;
  padding-top: 1rem;
  border-top: 1px solid #ffc4d6;
}

.g-footerNav>li:first-child {
  border-top: none;
}

@media (min-width:768px) {
  .g-footerNav>li {
    padding-top: 0;
    margin: 0 0 0.5rem 0;
    border-top: none;
    width: 20%;
  }
}

.g-footerNav>li>a {
  font-size: 0.94rem;
}

.g-footerNav>li>a:before {
  content: ' ';
  width: 6px;
  height: 6px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
  border-radius: 25px;
  background: #fff;
  position: absolute;
  top: 10px;
  left: -1rem;
}

.g-copyright {
  font-size: .88rem;
  background: #dd7190;
  border-top: 1px solid #f1c6d3;
  padding-top: 30px;
  padding-bottom: 30px;
}

.g-copyright .text-right,
.g-copyright .text-left {
  text-align: center;
}

.g-copyright-contact {
  width: 100%;
  display: inline-block;
  letter-spacing: .01rem;
}

.g-copyright-contact b {
  display: inline;
  font-weight: 500;
  letter-spacing: .08rem;
}

.g-copyright-fb {
  display: inline-block;
  vertical-align: text-bottom;
}

@media (min-width:768px) {
  .g-copyright .text-right {
    text-align: right;
  }

  .g-copyright .text-left {
    text-align: left;
  }

  .g-copyright-contact {
    margin: 0 auto;
    width: auto;
  }
}

/* 橫幅遮蓋曲線 */
.g-banner-cover {
  width: 100%;
  z-index: 1000;
  background: url(../images/g-banner-cover.png) no-repeat center 0;
  background-size: 100% 100%;
  position: absolute;
  display: block;
  left: 0;
  bottom: -1px;
}

.g-banner-cover.no-news {
  background-image: url(../images/g-banner-cover-nonews.png);
}

@media (max-width:767px) and (orientation:landscape) {
  .g-banner-cover {
    height: 35px;
  }
}

@media (max-width:767px) and (orientation:portrait) {
  .g-banner-cover {
    height: 30px;
  }
}

@media (min-width:768px) {
  .g-banner-cover {
    height: 55px;
  }
}

@media (min-width:1300px) {
  .g-banner-cover {
    height: 75px;
    width: 100%;
    left: 50%;
    margin-left: -50%;
  }
}

/* 中+英區塊標題 中+英 */
.g-ti {
  text-align: center;
  font-family: 'Comfortaa', "Microsoft JhengHei UI", "Microsoft JhengHei", "Arial", sans-serif;
  color: #222;
  font-size: 1.8rem;
  line-height: 1.6;
  font-weight: 600;
  margin: 50px auto 30px;
  auto;
  padding: 0;
  position: relative;
  z-index: 200;
}

.g-ti,
.g-ti-sub {
  -webkit-text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff, 0px 1px 0 #fff, 0px -1px 0 #fff, -1px 0px 0 #fff, 1px 0px 0 #fff, 2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff, 0px 2px 0 #fff, 0px -2px 0 #fff, -2px 0px 0 #fff, 2px 0px 0 #fff, 1px 2px 0 #fff, -1px 2px 0 #fff, 1px -2px 0 #fff, -1px -2px 0 #fff, 2px 1px 0 #fff, -2px 1px 0 #fff, 2px -1px 0 #fff, -2px -1px 0 #fff, 3px 3px 4px rgba(0, 0, 0, 0.2);
  -moz-text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff, 0px 1px 0 #fff, 0px -1px 0 #fff, -1px 0px 0 #fff, 1px 0px 0 #fff, 2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff, 0px 2px 0 #fff, 0px -2px 0 #fff, -2px 0px 0 #fff, 2px 0px 0 #fff, 1px 2px 0 #fff, -1px 2px 0 #fff, 1px -2px 0 #fff, -1px -2px 0 #fff, 2px 1px 0 #fff, -2px 1px 0 #fff, 2px -1px 0 #fff, -2px -1px 0 #fff, 3px 3px 4px rgba(0, 0, 0, 0.2);
  -ms-text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff, 0px 1px 0 #fff, 0px -1px 0 #fff, -1px 0px 0 #fff, 1px 0px 0 #fff, 2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff, 0px 2px 0 #fff, 0px -2px 0 #fff, -2px 0px 0 #fff, 2px 0px 0 #fff, 1px 2px 0 #fff, -1px 2px 0 #fff, 1px -2px 0 #fff, -1px -2px 0 #fff, 2px 1px 0 #fff, -2px 1px 0 #fff, 2px -1px 0 #fff, -2px -1px 0 #fff, 3px 3px 4px rgba(0, 0, 0, 0.2);
  -o-text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff, 0px 1px 0 #fff, 0px -1px 0 #fff, -1px 0px 0 #fff, 1px 0px 0 #fff, 2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff, 0px 2px 0 #fff, 0px -2px 0 #fff, -2px 0px 0 #fff, 2px 0px 0 #fff, 1px 2px 0 #fff, -1px 2px 0 #fff, 1px -2px 0 #fff, -1px -2px 0 #fff, 2px 1px 0 #fff, -2px 1px 0 #fff, 2px -1px 0 #fff, -2px -1px 0 #fff, 3px 3px 4px rgba(0, 0, 0, 0.2);
  text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff, 0px 1px 0 #fff, 0px -1px 0 #fff, -1px 0px 0 #fff, 1px 0px 0 #fff, 2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff, 0px 2px 0 #fff, 0px -2px 0 #fff, -2px 0px 0 #fff, 2px 0px 0 #fff, 1px 2px 0 #fff, -1px 2px 0 #fff, 1px -2px 0 #fff, -1px -2px 0 #fff, 2px 1px 0 #fff, -2px 1px 0 #fff, 2px -1px 0 #fff, -2px -1px 0 #fff, 3px 3px 4px rgba(0, 0, 0, 0.2);
}

.g-ti .deco {
  color: #EE819E;
  margin: 0 10px 0 2px
}

.g-ti.color-blue .deco {
  color: #6690de
}

.g-ti-sub {
  color: #00a4e2;
  display: block;
  margin: 30px auto 30px auto;
  line-height: 1.6;
  padding: 0;
  font-size: 1.625rem;
  font-weight: 600;
  text-align: center;
  font-family: 'Comfortaa', "Microsoft JhengHei UI", "Microsoft JhengHei", "Arial", sans-serif;
}

.g-ti-desc {
  font-size: 1.125rem;
  font-weight: 600;
  color: #f89501;
  display: block;
}

.g-ti-sub.small-mb {
  margin-bottom: 10px;
}

.g-ti span.g-ti-img {
  display: inline-block;
  margin: 0 0 -3px 0;
  background-image: url(../images/p-subject.png);
  background-repeat: no-repeat;
  background-color: transparent;
  height: 20px;
}

.g-ti span.g-ti-img.about {
  width: 115px;
  background-position: -5px -400px;
}

.g-ti span.g-ti-img.news {
  width: 70px;
  background-position: -5px -520px;
}

.g-ti span.g-ti-img.concept {
  width: 225px;
  background-position: -5px -450px;
}

.g-ti span.g-ti-img.m2-s2-milk {
  width: 120px;
  background-position: -5px -420px;
}

@media (max-width:767px) {
  .g-ti {
    font-size: 1.625rem;
    margin: 40px auto 20px auto;
  }

  .g-ti-sub {
    font-size: 1.4125rem;
    margin: 15px auto;
  }
}

@media (max-width:639px) {
  .g-ti {
    font-size: 1.4125rem;
  }

  .g-ti .deco {
    margin: 0 auto;
    display: block;
    font-size: .9375em
  }

  .g-ti-sub {
    font-size: 1.375rem;
  }

  .g-ti-desc {
    font-size: 1.0625rem;
  }
}

.g-ti .deco.m2-s2-milk:before {
  content: 'COW MILK';
}

.g-ti .deco.m2-s3-milk:before {
  content: 'GOAT MILK';
}

.g-ti .deco.m2-s4-milk:before {
  content: 'HA FORMULA';
}

.g-ti .deco.m2-s5-milk:before {
  content: 'CEREAL';
}

.g-ti .deco.m2-s6-milk:before {
  content: 'MAMA MILK';
}

.g-ti .deco.m2-s7-milk:before {
  content: 'GOAT MILK TABLETS';
}

.g-ti .deco.m2-s8-milk:before {
  content: 'DAILY PROBIOTIC DROPS';
}



/* MILK */

/* ==========================================
首頁架構
========================================== */

/* 首頁橫幅區 */
#i-slides {
  position: relative;
  margin-top: 100px;
  z-index: 0;
  overflow: hidden;
  /*position: relative; z-index: 0; overflow: hidden;*/
}

.i-slides-scroll {
  background: url('../images/i-slides-scroll.png') center center no-repeat;
  width: 40px;
  height: 40px;
  position: absolute;
  z-index: 1000;
  left: 50%;
  margin-left: -20px;
  bottom: 60px;
  display: none;
  opacity: 0;
}

.i-slides-scroll:after {
  content: 'SCROLL';
  color: #fff;
  font-size: .6rem;
  line-height: 1;
  position: absolute;
  width: 50px;
  bottom: -1rem;
  left: 50%;
  margin-left: -25px;
  text-align: center;
}

@media (min-width:768px) {
  .i-slides-scroll {
    display: block;
    opacity: 1;
  }
}

@media (min-width:1300px) {
  .i-slides-scroll {
    bottom: 150px;
  }
}

/* 首頁-最新消息 */
#i-news .g-ti {
  margin-top: 0;
}

#i-news {
  position: relative;
  padding-top: 30px;
  padding-bottom: 80px;
  z-index: 500;
  font-size: .92rem;
}

#i-news:after {
  content: ' ';
  position: absolute;
  z-index: 500;
  display: block;
  height: 40px;
  width: 100%;
  bottom: -40px;
  left: 0;
  right: 0;
  background: url(../images/i-mask-bg-1.png) repeat-x 0 0;
}

.i-news-one {
  max-width: 400px;
  margin: 0 auto;
  display: block;
}

.i-news-img {
  width: 100%;
  position: relative;
  margin: 0 auto .5rem auto;
  background-color: #f5f5f5;
}

.i-news-img:before {
  content: '';
  display: block;
  padding-bottom: 85%;
  width: 100%;
}

.i-news-img .img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform .35s;
  transition: -webkit-transform .35s;
  -o-transition: transform .35s;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.i-news-img:hover .img {
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
  transform: scale(1.05);
}

.i-news-img .mask-view--elem:before {
  position: absolute;
  margin-top: -17px;
  margin-left: -17px;
  top: 50%;
  left: 50%;
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  -o-transform-origin: center center;
  transform-origin: center center;
}

#i-news h3 {
  font-size: 1.1rem;
  color: #00a4e2;
  font-weight: 600;
}

#i-news a {
  color: #666;
  min-height: 85px;
}

#i-news a:hover {
  color: #333;
}

#i-news a:hover .color-darkgreen {
  color: #459a60;
}

#i-news .slick-dots,
.i-popular .slick-dots {
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}

@media (max-width:767px) {
  #i-news:after {
    background-size: auto 20px;
  }

  #i-news {
    padding-top: 10px;
    padding-bottom: 30px;
  }

  .i-news-slider {
    margin-left: auto;
    margin-right: auto;
  }

  .i-news-slider .box {
    border-top: 1px solid #ddd;
    padding: 20px 0;
    margin: 0;
    min-height: 86px;
  }

  .i-news-slider .box:first-of-type {
    display: block;
    border-top: none;
    padding: 0 0 20px 0
  }

  .i-news-slider .i-news-one {
    display: block !important;
    padding-left: 120px;
    position: relative;
    max-width: none;
  }

  .i-news-img {
    width: 100px;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2)
  }

  .i-news-img:after {
    display: none;
  }

  .i-news-img .mask-view--elem {
    width: 50px;
    height: 50px;
    margin-top: -25px;
    margin-left: -25px;
  }

  .i-news-img .mask-view--elem:before {
    -webkit-transform: scale(0.7);
    -ms-transform: scale(0.7);
    -o-transform: scale(0.7);
    transform: scale(0.7);
  }

  #i-news .row .i-news-one .text-left h3 {
    margin: 0 0 10px 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
  }

  #i-news .row .i-news-one .text-left>div {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
  }
}

@media (max-width:499px) {
  #i-news .row .i-news-one .text-left h3 {
    font-size: 1rem;
  }

  #i-news .row .i-news-one .text-left>div {
    font-size: .875rem;
  }
}

@media (max-width:639px) {
  .i-product-slider {
    padding: 0 30px;
  }
}

/* 首頁-關於我們 */
.about-elem-wrap {
  padding: 0 0 20px 0;
  position: relative;
}

.about-elem-wrap:before {
  content: '';
  z-index: 0;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 40%;
  background: rgb(255, 255, 255);
  background: linear-gradient(0deg, rgba(255, 255, 255, 1) 10%, rgba(247, 232, 229, 1) 70%, rgba(247, 232, 229, 1) 100%);
}

.about-elem-wrap .i-about-elem:before {
  padding-bottom: 50%;
}

#i-about {
  background: url(../images/i-about-bg.jpg) repeat 0 0 #F7E8E5;
  position: relative;
  z-index: 400;
  padding-top: 60px;
  padding-bottom: 11%;
  overflow: hidden;
}

.i-about-txt {
  display: block;
  margin: 0 auto 40px auto;
  max-width: 750px;
}

.i-about-elem {
  width: 120%;
  max-width: 1200px;
  height: auto;
  left: 50%;
  position: relative;
  -webkit-transform: translateX(-49%);
  -ms-transform: translateX(-49%);
  -o-transform: translateX(-49%);
  transform: translateX(-49%);
}

.i-about-elem:before {
  content: '';
  display: block;
  width: 100%;
  padding-bottom: 40%;
}

.i-about-txt .more {
  display: block;
  margin: 20px auto 0 auto;
  width: 150px;
  height: 40px;
  line-height: 40px;
  border-radius: 40px;
  text-align: center;
  background: #de7191;
  color: #fff;
  text-decoration: none;
}

.i-about-txt .more:hover {
  background: #ed819d
}

.i-grass {
  background-image: url(../images/i-grass.png);
  width: 100%;
  padding-top: 30.83%;
  top: 33.92%;
  left: 0;
  z-index: 5;
}

.i-goat {
  background-image: url(../images/i-goat.png);
  width: 15.83%;
  height: 75%;
  top: 13.92%;
  left: 16%;
  z-index: 30;
}

.i-milk-1 {
  background-image: url(../images/i-milk-1.png);
  width: 12.5%;
  height: 50%;
  top: 27.67%;
  left: 24.16%;
  z-index: 25;
}

.i-milk-2 {
  background-image: url(../images/i-milk-2.png);
  width: 13.33%;
  height: 50%;
  top: 27.67%;
  left: 36.66%;
  z-index: 25;
}

.i-milk-3 {
  background-image: url(../images/i-milk-3.png);
  width: 12.91%;
  height: 50%;
  top: 27.67%;
  left: 50%;
  z-index: 25;
}

.i-milk-4 {
  background-image: url(../images/i-milk-4.png);
  width: 12.5%;
  height: 50%;
  top: 27.67%;
  left: 63.16%;
  z-index: 25;
}

.i-cow {
  background-image: url(../images/i-cow.png);
  width: 15.41%;
  height: 35.71%;
  top: 33.57%;
  left: 73.16%;
  z-index: 10;
}

.i-flag {
  background-image: url(../images/i-flag.png);
  width: 26.66%;
  height: 75%;
  top: 2.67%;
  left: 62.83%;
  z-index: 5;
}

.i-heart-1 {
  background-image: url(../images/i-heart-1.png);
  width: 5%;
  height: 9.82%;
  top: 47.32%;
  left: -1.25%;
  z-index: 0;
}

.i-heart-2 {
  background-image: url(../images/i-heart-2.png);
  width: 8.33%;
  height: 17.85%;
  top: 0;
  left: 9.75%;
  z-index: 0;
}

.i-heart-3 {
  background-image: url(../images/i-heart-3.png);
  width: 5.41%;
  height: 10.71%;
  top: 10.71%;
  left: 41.25%;
  z-index: 0;
}

.i-heart-4 {
  background-image: url(../images/i-heart-4.png);
  width: 8.33%;
  height: 17.85%;
  top: 32.14%;
  left: 90.16%;
  z-index: 0;
}

.i-grass,
.i-goat,
.i-milk-1,
.i-milk-2,
.i-milk-3,
.i-milk-4,
.i-cow,
.i-flag,
.i-heart-1,
.i-heart-2,
.i-heart-3,
.i-heart-4 {
  position: absolute;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: contain;
}

.i-video-wrap {
  z-index: 15;
  width: 100%;
  line-height: 0;
  position: absolute;
  left: 50%;
  bottom: 30%;
  border-radius: 20px;
  padding: 6px;
  max-width: 540px;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}

.i-video-wrap:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  border-radius: 20px;
  background: url(../img_slash.png) repeat 0 0 #fdf4f3;
}

.i-video-wrap:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 6px;
  right: 6px;
  height: 30%;
  -webkit-transform: translateY(80%);
  -ms-transform: translateY(80%);
  -o-transform: translateY(80%);
  transform: translateY(80%);
  border-radius: 20px;
  background: rgb(0, 0, 0);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.25) 40%, rgba(0, 0, 0, 0.7) 100%);
  z-index: 0;
  -webkit-filter: blur(5px);
  -o-filter: blur(5px);
  filter: blur(5px);
}

.i-video-wrap .inner {
  position: relative;
  z-index: 2;
  border-radius: 18px;
  overflow: hidden;
}

.i-video-wrap .inner:before {
  content: '';
  width: 100%;
  z-index: 0;
  position: relative;
  display: block;
  padding-bottom: 56.25%;
}

.i-video-wrap iframe {
  z-index: 1;
  border: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

@media (max-width:991px) {
  .i-video-wrap {
    max-width: 480px;
  }

  .i-goat {
    left: 15%;
  }
}

@media (max-width:767px) {
  #i-about {
    padding-bottom: 8%;
  }

  .i-about-txt {
    margin-bottom: 40px;
  }

  .i-about-elem {
    width: 100%;
    left: auto;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }

  .i-about-elem:before {
    padding-bottom: 0;
  }

  .i-about-elem-wrap .i-grass,
  .i-about-elem-wrap .i-goat,
  .i-about-elem-wrap .i-milk-1,
  .i-about-elem-wrap .i-milk-2,
  .i-about-elem-wrap .i-milk-3,
  .i-about-elem-wrap .i-milk-4,
  .i-about-elem-wrap .i-cow,
  .i-about-elem-wrap .i-flag,
  .i-about-elem-wrap .i-heart-1,
  .i-about-elem-wrap .i-heart-2,
  .i-about-elem-wrap .i-heart-3,
  .i-about-elem-wrap .i-heart-4 {
    display: none;
  }

  .i-video-wrap {
    position: relative;
    max-width: calc(100% - 40px);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    bottom: auto;
  }

  .i-video-wrap:after {
    display: none;
  }
}

@media (min-width:768px) {
  #i-about {
    padding-top: 90px;
  }

  .i-about-txt .more {
    width: 200px;
    height: 50px;
    line-height: 50px;
  }
}

@media (min-width:992px) {
  #i-about {
    padding-top: 125px;
  }
}

/* 首頁-主打商品 */
.i-popular {
  position: relative;
  z-index: 401;
  padding-top: 3%;
  padding-bottom: 5%;
  background: url(../images/i-popular.jpg) repeat-y 0 0 #ddf0f8;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
}

.i-popular:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  padding-bottom: 5.2%;
  background: url(../images/i-popular-top.png) no-repeat 0 0;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-99%);
}

.i-popular .slick-slide {
  padding: 0 20px;
}

.i-popular .relatedP-one>a {
  max-width: none;
}

@media (min-width:1300px) {
  .i-popular .i-slider-theme .slick-prev {
    left: -40px !important;
  }

  .i-popular .i-slider-theme .slick-next {
    right: -40px !important;
  }
}

@media (max-width:991px) {
  .i-popular .slick-slide {
    padding: 0 10px;
  }
}

/* 首頁-廣告連結 */
.milkbg-top {
  padding-top: 100px;
  z-index: 450;
  position: relative;
}

.milkbg-top:before {
  content: ' ';
  position: absolute;
  z-index: 450;
  display: block;
  height: 40px;
  top: -40px;
  left: 0;
  right: 0;
  background: url(../images/i-mask-bg-2.png) repeat-x 0 0;
}

#i-links {
  position: relative;
  padding: 8px 0;
}

.i-link-list {
  position: relative;
  margin: 10px auto;
  width: calc(100% - 10px);
  max-width: 1300px;
}

.i-link-list:before {
  content: '';
  display: block;
  width: 100%;
  padding-bottom: 186.55%;
}

.i-link-list li {
  overflow: hidden;
  position: absolute;
  display: inline-block;
}

.i-link-list li:before {
  content: '';
  display: block;
  pointer-events: none;
  border: 5px solid #fff;
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.i-link-list li a {
  overflow: hidden;
  display: block;
  position: relative;
  z-index: 9;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  background-size: cover;
  -webkit-transition: all .35s linear;
  -o-transition: all .35s linear;
  transition: all .35s linear;
}

.i-link-list li a:before {
  content: '';
  display: block;
  width: 100%;
  padding-bottom: 100%;
}

.i-link-list li a:hover {
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
  transform: scale(1.05);
}

.i-link-list li .i-link-text {
  -webkit-transition: transform .35s linear;
  -o-transition: transform .35s linear;
  transition: transform .35s linear;
  position: absolute;
  z-index: 50;
  width: calc(100% - 10px);
  max-width: 280px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) scale(1);
  -ms-transform: translate(-50%, -50%) scale(1);
  -o-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
}

.i-link-list li .i-link-text:before {
  content: '';
  display: block;
  position: relative;
  height: 100%;
  padding-left: 100%;
}

.i-link-list li a:hover .i-link-text {
  -webkit-transform: translate(-50%, -50%) scale(.9523);
  -ms-transform: translate(-50%, -50%) scale(.9523);
  -o-transform: translate(-50%, -50%) scale(.9523);
  transform: translate(-50%, -50%) scale(.9523);
}

.i-link-list .img-max img {
  max-width: 100%;
}

.i-link-list li.i-link-1 a:before {
  padding-bottom: 200%;
}

.i-link-list li.i-link-2 a:before {
  padding-bottom: 100%;
}

.i-link-list li.i-link-3 a:before {
  padding-bottom: 43.28%;
}

.i-link-list li.i-link-4 a:before {
  padding-bottom: 43.28%;
}

.i-link-list li.i-link-5 a:before {
  padding-bottom: 100%;
}

.i-link-list li.i-link-3 .i-link-text {
  left: 25%;
  width: 50%;
}

.i-link-list li.i-link-4 .i-link-text {
  left: 25%;
  width: 50%;
}

.i-link-1 {
  width: 50%;
  top: 21.8%;
  left: 0;
  z-index: 3;
}

.i-link-2 {
  width: 50%;
  top: 21.8%;
  left: 50%;
  z-index: 5;
}

.i-link-3 {
  width: 100%;
  /* top: 53.6%; */
  top: -2%;
  left: 0;
  z-index: 1;
}

.i-link-4 {
  width: 100%;
  top: 76.8%;
  left: 0;
  z-index: 5;
}

.i-link-5 {
  width: 50%;
  top: 49.8%;
  left: 50%;
  z-index: 3;
}

@media (max-width:767px) {
  .milkbg-top {
    padding-top: 40px;
  }

  .milkbg-top:before {
    background-size: auto 20px;
    height: 20px;
    top: -20px;
  }

  .i-link-list {
    max-width: 580px;
  }

  .i-link-list li.i-link-1:before {
    border-right-width: 0;
  }
}

@media (min-width:992px) {
  #i-link {
    padding-top: 50px;
  }
}

@media (min-width:1200px) {
  .i-link-list {
    margin: 50px auto;
  }
}

@media (min-width:768px) {
  .i-link-list:before {
    padding-bottom: 44.78%;
  }

  .i-link-list li.i-link-1 a:before {
    padding-bottom: 173.13%;
  }

  .i-link-1 {
    width: 25.86%;
    height: 100%;
    top: 0;
    left: 0;
  }

  .i-link-2 {
    width: 22.39%;
    height: 50%;
    top: 0;
    left: 25.86%;
  }

  .i-link-3 {
    width: 51.73%;
    height: 50%;
    top: 0;
    left: 48.26%;
  }

  .i-link-4 {
    width: 51.73%;
    height: 50%;
    top: 50%;
    left: 25.86%;
  }

  .i-link-5 {
    width: 22.39%;
    height: 50%;
    top: 50%;
    left: 77.6%;
  }
}

@media (max-width:499px) {
  .i-link-list li:before {
    border: 4px solid #fff;
  }
}

/* ==========================================
內頁架構
========================================== */

/* 內頁內容背景 */
.p-container-bg {
  width: 100%;
  position: relative;
  z-index: 0;
  background-color: #fbf5ec;
  
}

.p-container-bg.m1 {
  background: url(../images/p-bg-m3.jpg) repeat center 0 #f8e8e8;
}

.p-container-bg.m2 {
  background: #fff;
  margin-top: 140px;
}

.p-container-bg.m2-s1 {
  background-color: #fff;
}

.p-container-bg.m2-s2 {
  background-color: #fff;
}

.p-container-bg.m2-s3 {
  background-color: #fff;
}

.p-container-bg.m2-s4 {
  background-color: #fff;
}

.p-container-bg.m2-s5 {
  background-color: #fff;
}

.p-container-bg.m2-s6 {
  background-color: #fff;
}

.p-container-bg.m3 {
  background: url(../images/p-bg-m3.jpg) repeat center 0 #f8e8e8;
}

.p-container-bg.m3-view {
  background: url(../images/p-topbg-m3.jpg) repeat center 0 #d9ebf5;
}

.p-container-bg.m4 {}

.p-container-bg.m5 {
  background: url(../images/p-bg-m5.jpg) repeat center 0 #FFDEDE;
}

.p-container-bg.m6 {
  background: url(../images/p-bg-m6.jpg) repeat center 0 #d8f1fd;
}

.p-container-bg.m7 {
  background: url(../images/p-bg-m7.jpg) repeat center 0 #e5edde;
}

.p-container-bg.subm-member {}

.p-container-bg.subm-sitemap {
  background: #fff;
}

/*.p-container-bg.milkbg:before { content: ' '; width: 100%; background: url(../images/p-section-bottom-milkbg.png) no-repeat center bottom; background-size: cover; position: absolute; min-height: 620px; bottom: 0; left: 0; right: 0; z-index: -1; }
*/
.p-container-bg.milkbg2:before {
  content: ' ';
  width: 100%;
  background: url(../images/p-section-bottom-milkbg-2.png) no-repeat center bottom;
  background-size: cover;
  position: absolute;
  min-height: 915px;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
}

.p-container-bg.milkbg2.m1:before {
  background-size: contain;
}


/* 內頁橫幅 */
#p-banner {
  position: relative;
  margin-bottom: 50px;
  z-index: 100;
  line-height: 0;
  margin-top: 100px;
}



@media (max-width:767px) {
  #p-banner {
    display: none;
  }
  .p-container-bg {
    padding: 0px 0 45px;
  }
}

/* 內頁橫幅標題 */
.p-subject {
  display: block;
  text-align: center;
  position: relative;
  top: 0;
  bottom: auto;
  margin-top: 0;
  z-index: 10;
}

.p-subject-en,
.p-subject-tw {
  display: block;
  margin: 10px auto;
  height: 40px;
  background-image: url(../images/p-subject.png);
  background-repeat: no-repeat;
  vertical-align: text-bottom;
}

.p-subject-tw {
  background: none;
  width: auto;
  font-size: 1.64rem;
  color: #333;
  font-weight: 400;
}

/* 依照原始選單順序 */
.p-subject--m1 .p-subject-en {
  width: 180px;
  background-position: 0 0;
}

.p-subject--m2 .p-subject-en {
  width: 190px;
  background-position: 0 -40px;
}

.p-subject--m3 .p-subject-en {
  width: 268px;
  background-position: 0 -80px;
}

.p-subject--m4 .p-subject-en {
  width: 140px;
  background-position: 0 -120px;
}

.p-subject--m5 .p-subject-en {
  width: 205px;
  background-position: 0 -160px;
}

.p-subject--m6 .p-subject-en {
  width: 173px;
  background-position: 0 -200px;
}

.p-subject--m7 .p-subject-en {
  width: 115px;
  background-position: 0 -240px;
}

.p-subject--m8 .p-subject-en {
  width: 230px;
  background-position: 0 -280px;
}

.p-subject--subm-member .p-subject-en {
  width: 183px;
  background-position: 0 -320px;
}

.p-subject--subm-sitemap .p-subject-en {
  width: 155px;
  background-position: 0 -360px;
}

@media (min-width:768px) {

  /*.p-subject { position: absolute; top: auto; bottom: -90px; right: 0; left: 0; margin-top: -30px; }*/
  .p-subject-en,
  .p-subject-tw {
    display: inline-block;
    margin: 0 10px;
  }

  .p-subject-tw {
    font-size: 1.64rem;
    line-height: 40px;
  }

  .p-subject-tw .txt-cut--inline {
    line-height: inherit !important;
  }

  .m6.list .p-subject--m6 {
    bottom: -20px;
  }
}

/* 頁碼 */
.p-pager {
  text-align: center;
  margin: 30px auto;
}

.p-pager a {
  text-decoration: none;
  display: inline-block;
  vertical-align: middle;
  margin: 0 5px;
  padding: 0;
  color: #999;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  line-height: 25px;
  font-size: .88rem;
}

.p-pager a.num {
  border: 1px solid transparent;
  background-color: transparent;
}

.p-pager a.num:hover {
  color: #555;
  background-color: #f8f8f8;
  border: 1px solid #ccc;
}

.p-pager a.num.current {
  color: #fff;
  background-color: #ed819e;
}

.p-pager a.prev,
.p-pager a.next {
  display: inline-block;
  background: transparent;
  border: none;
  position: relative;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
  width: auto;
  height: auto;
}

.p-pager a.prev:hover,
.p-pager a.next:hover {
  background: transparent;
  border: none;
  color: #333;
}

.p-pager a.prev:before,
.p-pager a.next:before {
  content: ' ';
  width: 0;
  height: 0;
  position: absolute;
  top: 50%;
  margin-top: -4px;
}

.p-pager a.prev:before {
  border-top: 4px transparent solid;
  border-right: 7px #ed819e solid;
  border-bottom: 4px transparent solid;
  border-left: 0 transparent solid;
  left: -15px;
}

.p-pager a.next:before {
  border-top: 4px transparent solid;
  border-right: 0 transparent solid;
  border-bottom: 4px transparent solid;
  border-left: 7px #ed819e solid;
  right: -15px;
}

.p-pager a.prev.disabled,
.p-pager a.next.disabled {
  color: #999;
}

@media (max-width:767px) {
  .p-pager a {
    margin: 0 2px;
  }
}

/* 頁碼-藍色 */
.p-pager.blue a.num.current {
  background-color: #6690de;
}

.p-pager.blue a.prev:before {
  border-right: 7px #6690de solid;
}

.p-pager.blue a.next:before {
  border-left: 7px #6690de solid;
}

/* 頁碼-藍色 */
.p-pager.lightgreen a.num.current {
  background-color: #8FBB34;
}

.p-pager.lightgreen a.prev:before {
  border-right: 7px #8FBB34 solid;
}

.p-pager.lightgreen a.next:before {
  border-left: 7px #8FBB34 solid;
}

/* 頁碼-紫色 */
.p-pager.purple a.num.current {
  background-color: #8B97CB;
}

.p-pager.purple a.prev:before {
  border-right: 7px #8B97CB solid;
}

.p-pager.purple a.next:before {
  border-left: 7px #8B97CB solid;
}

/* 頁籤開合-預設綠色 */
.tab-content {
  padding: 0 0 30px 0;
}

.tabCate-collapse {
  margin: 0 auto 20px auto;
  text-align: left;
  z-index: 150;
  position: relative;
  width: 100% !important;
  max-width: calc(100% - 20px);
}

.tabCateBtn {
  padding: 8px 15px;
  cursor: pointer;
  background: #00a4e2;
  color: #fff;
  position: relative;
}

.tabCateBtn .icon {
  position: absolute;
  font-size: .85rem;
  line-height: 1;
  color: #fff;
  top: 18px;
}

.tabCateBtn .icon.fa-plus {
  right: 15px;
}

.tabCateBtn .icon.fa-minus {
  right: 15px;
  display: none;
}

.tabCategory {
  margin: 0;
  padding: 0;
  width: 100%;
  display: none;
}

.tabCategory li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #ddd;
  display: block;
}

.tabCategory li a {
  display: block;
  color: #666;
  position: relative;
}

.tabCategory li a,
.tabCategory li a:focus,
.tabCategory li.selected a {
  text-decoration: none;
  background: #f8f8f8;
}

.tabCategory li a:hover {
  background: #eee;
}

@media (max-width:767px) {
  .tabCategory {
    border: 1px solid #ddd;
    border-bottom: none;
  }

  .tabCategory li a {
    line-height: 1.5;
  }
}

/* 頁籤開合-粉色點無三角 <768*/
.tabCate-collapse.pinkdot .tabCateBtn {
  background: #ed819d;
}

.tabCate-collapse.pinkdot .tabCategory li {
  border-bottom: 1px solid #F8B1C3;
}

.tabCate-collapse.pinkdot .tabCategory li a,
.tabCate-collapse.pinkdot .tabCategory li a:focus,
.tabCate-collapse.pinkdot .tabCategory li.selected a {
  background: #fdf2f5;
}

.tabCate-collapse.pinkdot .tabCategory li a:hover {
  background: #FFDEE7;
}

@media (max-width:767px) {
  .tabCate-collapse.pinkdot .tabCategory {
    border: 1px solid #F8B1C3;
    border-bottom: none;
  }
}

/* 頁籤開合-藍色 <768*/
.tabCate-collapse.blue .tabCateBtn {
  background: #5685DC;
}

.tabCate-collapse.blue .tabCategory li {
  border-bottom: 1px solid #C0D2F6;
}

.tabCate-collapse.blue .tabCategory li a,
.tabCate-collapse.blue .tabCategory li a:focus,
.tabCate-collapse.blue .tabCategory li.selected a {
  background: #fefefe;
}

.tabCate-collapse.blue .tabCategory li a:hover {
  background: #f1f5ff;
}

@media (max-width:767px) {
  .tabCate-collapse.blue .tabCategory {
    border: 1px solid #C0D2F6;
    border-bottom: none;
  }
}

/* 頁籤開合-黃色 <768*/
.tabCate-collapse.yellow .tabCateBtn {
  background: #f8b500;
}

.tabCate-collapse.yellow .tabCategory li {
  border-bottom: 1px solid #F9E7B3;
}

.tabCate-collapse.yellow .tabCategory li a,
.tabCate-collapse.yellow .tabCategory li a:focus,
.tabCate-collapse.yellow .tabCategory li.selected a {
  background: #fefefe;
}

.tabCate-collapse.yellow .tabCategory li a:hover {
  background: #FBF1D4;
}

.table-wrap .tabCate-collapse {
  margin-bottom: 0;
}

@media (max-width:767px) {
  .tabCate-collapse.yellow .tabCategory {
    border: 1px solid #F9E7B3;
    border-bottom: none;
  }
}

@media (min-width:768px) {
  .tabCate-collapse {
    margin: 15px auto 40px auto;
  }

  .tabCategory {
    vertical-align: top;
    text-align: center;
    display: block !important;
    /* keep exit */
  }

  .tabCategory li {
    text-align: center;
    display: inline-block;
    margin: 0 3px 10px 3px;
    border: none;
  }

  .table-wrap .tabCategory {
    text-align: left;
  }

  .tabCategory li a {
    padding: 3px 15px;
    display: block;
    background: #fefefe;
    text-decoration: none;
    border: 1px #00a4e2 solid;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    border-radius: 25px;
    overflow: hidden;
    font-size: 0.9375rem;
  }

  .tabCategory li a:hover,
  .tabCategory li a:focus {
    text-decoration: none;
    background: #d2ebff;
  }

  .tabCategory li.selected a {
    text-decoration: none;
    background: #e0f7ff;
    /*color: #fff;*/
  }

  .tabCategory li.selected:before {
    content: ' ';
    width: 0;
    height: 0;
    display: block;
    border-bottom: 0 transparent solid;
    border-right: 5px transparent solid;
    border-top: 7px #00a4e2 solid;
    border-left: 5px transparent solid;
    left: 50%;
    margin-left: -5px;
    bottom: -7px;
    position: absolute;
  }

  /* 頁籤開合-粉色點無三角 >768*/
  .tabCate-collapse.pinkdot .tabCategory li {
    text-align: center;
    display: inline-block;
    margin: 0 10px 10px 10px;
    border: none;
  }

  .tabCate-collapse.pinkdot .tabCategory li a {
    border: 1px #ed819d solid;
  }

  .tabCate-collapse.pinkdot .tabCategory li a:before,
  .tabCate-collapse.pinkdot .tabCategory li a:after {
    content: ' ';
    background-color: #ed819d;
    width: 2px;
    height: 2px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    border-radius: 25px;
    position: absolute;
    top: 50%;
    margin-top: -1px;
    display: block;
  }

  .tabCate-collapse.pinkdot .tabCategory li.selected a:before,
  .tabCate-collapse.pinkdot .tabCategory li.selected a:after {
    background-color: #fff;
  }

  .tabCate-collapse.pinkdot .tabCategory li a:before {
    left: 10px;
  }

  .tabCate-collapse.pinkdot .tabCategory li a:after {
    right: 10px;
  }

  .tabCate-collapse.pinkdot .tabCategory li.selected a {
    background: #ed819d;
  }

  .tabCate-collapse.pinkdot .tabCategory li.selected:before {
    display: none;
  }

  /* 頁籤開合-藍色 >768*/
  .tabCate-collapse.blue .tabCategory li {
    text-align: center;
    display: inline-block;
    margin: 0 10px 10px 10px;
    border: none;
  }

  .tabCate-collapse.blue .tabCategory li a {
    border: 1px #5685DC solid;
  }

  .tabCate-collapse.blue .tabCategory li.selected a {
    background: #5685DC;
  }

  .tabCate-collapse.blue .tabCategory li.selected:before {
    border-top: 7px #5685DC solid;
  }

  /* 頁籤開合-黃色 >768*/
  .tabCate-collapse.yellow .tabCategory li {
    text-align: center;
    display: inline-block;
    margin: 0 10px 10px 10px;
    border: none;
  }

  .tabCate-collapse.yellow .tabCategory li a {
    border: 1px #f8b500 solid;
  }

  .tabCate-collapse.yellow .tabCategory li.selected a {
    background: #f8b500;
  }

  .tabCate-collapse.yellow .tabCategory li.selected:before {
    border-top: 7px #f8b500 solid;
  }
}

@media (min-width:992px) {
  .tabCategory li {
    margin: 0 15px 10px 15px;
  }

  .tabCategory li a {
    padding: 8px 20px;
    font-size: 1rem;
  }
}

.maincontent-wrap {
  padding-top: 0;
}

.maincontent-wrap.no-ban {
  padding-top: 110px;
}

@media (max-width:767px) {
  .maincontent-wrap {
    padding-top: 115px;
  }

  .maincontent-wrap.no-ban {
    padding-top: 0;
  }
}

.p-section {
  position: relative;
  text-align: center;
}

@media (min-width:768px) {
  .p-section {
    padding: 50px 0;
  }
}

/* 羊奶優勢 區塊 */
.ti-GoatMilkGood {
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: 0.5rem;
  -webkit-animation: slideInUp .6s ease-in;
  -moz-animation: slideInUp .6s ease-in;
  -o-animation: slideInUp .6s ease-in;
  animation: slideInUp .6s ease-in;
}

.ti-GoatMilkGood span {
  font-size: 2.8rem;
}

.ti-num {
  margin-right: 1rem;
  font-size: 1.64rem;
}

.p-advantage-bg {
  background: url(../images/p-advantage-bg.jpg) repeat 0 0 #d5e9f4;
  padding: 240px 0 150px 0;
}

.p-advantage-textbg {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 350px 50px 120px 50px;
  background: url(../images/p-advantage-textbg-mid.png) repeat-y center bottom;
  background-size: contain;
}

@media (min-width:992px) {
  .p-advantage-textbg {
    padding: 350px 90px 250px 90px;
  }
}

.p-advantage-textbg .displayBlock,
.p-advantage-textbg h3,
.p-advantage-textbg h4,
.p-advantage-textbg h5 {
  margin-bottom: 30px;
}

.p-advantage-textbg-top {
  position: absolute;
  display: block;
  height: 240px;
  top: -120px;
  left: 0;
  right: 0;
  background: url(../images/p-advantage-textbg-top.png) no-repeat center 0;
  background-size: 100% 100%;
}

.p-advantage-textbg-bottom {
  position: absolute;
  display: block;
  height: 270px;
  bottom: -250px;
  left: 0;
  right: 0;
  background: url(../images/p-advantage-textbg-end.png) no-repeat center 0;
  background-size: contain;
}

.p-advantage-textbg-middle {
  margin: -340px auto -120px auto;
  position: relative;
  z-index: 100;
}

@media (min-width:768px) {
  .p-advantage-textbg {
    width: 750px;
  }
}

@media (min-width:992px) {
  .p-advantage-textbg {
    width: 980px;
  }

  .p-advantage-textbg-bottom {
    bottom: -150px;
  }

  .p-advantage-textbg-middle {
    margin: -340px auto -300px auto;
  }
}

@media (min-width:1200px) {
  .p-advantage-textbg {
    width: 1115px;
  }
}

.p-advantage-goat {
  width: 360px;
  height: 240px;
  z-index: 10;
  background: url(../images/p-advantage-goat.png);
  position: absolute;
  top: -220px;
  right: -50px;
}

.p-compare-wrap {
  width: 100%;
  margin: 20px auto;
  text-align: center;
}

.goatMilkSingle {
  display: inline-block;
  float: none;
  vertical-align: bottom;
  margin: 0 auto 30px auto;
  width: 100%;
}

@media (min-width:992px) {
  .p-compare-wrap {
    width: 768px;
  }

  .goatMilkSingle {
    width: 32.5%;
  }
}

.goatMilkDrop {
  background: url(../images/goatMilkDrop.png) no-repeat 0 0;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}

.goatMilkDrop.small {
  width: 80px;
  height: 75px;
  background-position: -155px -105px;
}

.goatMilkDrop.middle {
  width: 115px;
  height: 105px;
  background-position: -155px 0;
}

.goatMilkDrop.large {
  width: 155px;
  height: 140px;
  background-position: 0 0;
}

.goatMilkDrop.small .goatMilkSize {
  width: 80px;
  height: 75px;
}

.goatMilkDrop.middle .goatMilkSize {
  width: 115px;
  height: 105px;
}

.goatMilkDrop.large .goatMilkSize {
  width: 155px;
  height: 140px;
}

.goatMilkDrop.small:after {
  content: ' ';
  width: 35px;
  height: 35px;
  position: absolute;
  margin-top: -90px;
  margin-left: 0;
  z-index: 5;
  background: url(../images/goatMilkDrop.png) no-repeat -275px 0;
}

.goatMilkSize {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.goatMilkSize:before {
  content: attr(data-size);
  word-break: break-all;
  width: 2.47rem;
  display: inline-block;
  line-height: 1.1;
  z-index: 10;
}

.goatMilkName {
  display: block;
  text-align: center;
  margin-top: 20px;
}

/* 媽媽教室 */
.p-gift-wrap {
  margin: 0 auto;
  padding: 0;
}

.p-gift-top {
  max-width: 700px;
  margin: 0 auto;
}

.p-gift {
  position: relative;
  margin-bottom: 50px;
}

.p-gift-img {
  position: relative;
  z-index: 10;
}

.p-gift-name {
  position: relative;
  z-index: 15;
  padding: .82rem 1.64rem;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  border-radius: 50px;
  display: inline-block;
  width: auto;
  margin: 1rem auto;
}

.p-gift-txt {
  position: relative;
  z-index: 15;
}

.p-gift.pull-down {
  margin-top: -50px;
}

@media (min-width:768px) {
  .p-gift-wrap {
    margin: 50px auto 0 auto;
    padding: 0 5%;
  }

  .p-gift-wrap.gift-qa {
    margin: 20px auto 0 auto;
  }
}

@media (min-width:992px) {
  .p-gift {
    margin-bottom: 10px;
  }

  .p-gift.pull-up {
    /*margin-top: -50px;*/
    margin-top: 0px;
  }
}

.p-midimg-balloon-m1 {
  width: 118px;
  height: 223px;
  background: url(../images/p-midimg-balloon-m1.png) no-repeat 0 0;
  position: absolute;
  top: -80px;
  right: -40px;
  z-index: -1;
  opacity: 0;
  display: none;
}

.p-topimg-balloon-m3 {
  width: 120px;
  height: 225px;
  background: url(../images/p-topimg-balloon-m3.png) no-repeat 0 0;
  position: absolute;
  top: 0;
  left: -15px;
  z-index: -1;
  opacity: 0;
  display: none;
}

.p-topimg-balloon2-m3 {
  width: 140px;
  height: 395px;
  background: url(../images/p-topimg-balloon2-m3.png) no-repeat 0 0;
  position: absolute;
  top: -150px;
  right: -15px;
  z-index: -1;
  opacity: 0;
  display: none;
}

.p-midimg-balloon-m1,
.p-topimg-balloon-m3,
.p-topimg-balloon2-m3 {
  -webkit-animation: wobble 65s infinite alternate;
  animation: wobble 65s infinite alternate;
}

@media (min-width:992px) {

  .p-midimg-balloon-m1,
  .p-topimg-balloon-m3,
  .p-topimg-balloon2-m3 {
    display: block;
  }
}

/* 動態展示背景 */
.p-showbg {
  top: 60%;
}

.p-showbg:before {
  top: 60%;
}

.p-showbg,
.p-showbg:before {
  -ms-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
  position: absolute;
  left: 50%;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: -1;
  -webkit-animation: swing 15s infinite;
  animation: swing 15s infinite;
  background-size: contain;
}

.p-showbg:before {
  content: ' ';
  opacity: 0.35;
  -webkit-animation-direction: reverse;
  /* Safari 4.0 - 8.0 */
  animation-direction: reverse;
}

.p-showbg.anime2,
.p-showbg.anime2:before {
  -webkit-animation: swing 10s infinite;
  animation: swing 10s infinite;
  -webkit-animation-direction: alternate;
  /* Safari 4.0 - 8.0 */
  animation-direction: alternate;
}

.p-showbg.about-txt,
.p-showbg.about-txt:before {
  margin-left: -50%;
  margin-top: -30%;
  width: 100%;
  height: 60%;
  background-image: url(../images/p-txtbg-about.png);
  display: none;
}

@media (min-width:992px) {

  .p-showbg.about-txt,
  .p-showbg.about-txt:before {
    width: 950px;
    height: 550px;
    margin-left: -475px;
    margin-top: -275px;
    display: block;
  }
}

.p-showbg.gift,
.p-showbg.gift:before {
  margin-left: -50%;
  margin-top: -30%;
  width: 100%;
  height: 60%;
  background-image: url(../images/p-txtbg-gift.png);
}

.p-showbg.gift {
  top: auto;
  bottom: 6%;
  opacity: .8;
}

.p-showbg.gift:before {
  top: 25%;
  opacity: 0;
  display: none;
}

@media (min-width:992px) {
  .p-showbg.gift {
    top: 65%;
    bottom: auto;
  }

  .p-showbg.gift,
  .p-showbg.gift:before {
    width: 300px;
    height: 177px;
    margin-left: -150px;
    margin-top: -55px;
  }

  .p-showbg.gift.small,
  .p-showbg.gift.small:before {
    width: 230px;
    height: 138px;
    margin-left: -125px;
    margin-top: -55px;
  }

  .p-showbg.gift:before {
    opacity: .6;
    display: block;
  }
}

/* 報名注意事項 */
.p-class-notice-wrap {
  border-radius: 20px;
  background: #a9cfe4;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  position: relative;
  padding: 45px 15px 15px 15px;
  margin-bottom: 30px;
}

@media (min-width:768px) {
  .p-class-notice-wrap {
    border-radius: 25px;
  }
}

@media (min-width:992px) {
  .p-class-notice-wrap {
    padding: 45px 30px 30px 30px;
  }
}

.p-class-notice-wrap.pink {
  background: #fac3ca;
}

.p-class-notice-wrap:before {
  content: ' ';
  background: url(../images/class-notice-bg.gif) repeat 0 0 #fff;
  border-radius: 20px;
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 75px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 0;
}

.p-class-notice-inwrap {
  position: relative;
  z-index: 10;
}

.p-class-notice-name {
  margin: -10px auto 20px auto;
  display: block;
  position: relative;
  z-index: 50;
}

.p-class-notice {
  position: relative;
  z-index: 50;
  list-style: none;
  margin: 0;
  padding: 10px;
  background: #fff;
  border-radius: 15px;
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}

.p-class-notice li {
  text-align: left;
  display: block;
  background: url(../images/hr-dot.gif) repeat-x 0 top;
  padding: 10px 10px 10px 30px;
  margin: 0;
  font-size: 1rem;
  position: relative;
}

.p-class-notice li:first-child {
  background: none;
}

.p-class-notice li:before {
  content: ' ';
  background: url(../images/icon-sprite.png) no-repeat -154px -27px;
  width: 38px;
  height: 38px;
  position: absolute;
  top: 8px;
  left: -3px;
  -webkit-transform: scale(.8);
  -ms-transform: scale(.8);
  -o-transform: scale(.8);
  transform: scale(.8);
}

.r-class-notice {
  position: relative;
  z-index: 50;
  list-style: none;
  margin: 0;
  padding: 15px;
  background: #fff;
  border-radius: 15px;
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  font-size: 0;
}

.r-class-img {
  padding: 15px;
  width: 25%;
  display: inline-block;
}

.r-class-img img {
  width: 100%;
}

.r-class-text {
  font-size: 18px;
  display: inline-block;
  width: 75%;
  padding: 15px;
  vertical-align: middle;
  color: #ed819d;
  font-weight: bold;
}

@media (min-width:768px) {
  .p-class-notice-wrap {
    padding-top: 65px;
    padding-left: 60px;
    padding-right: 60px;
    padding-bottom: 30px;
    margin-bottom: 50px;
  }

  .p-class-notice-wrap:before {
    top: 80px;
    left: 35px;
    right: 35px;
    bottom: 15px;
    border-radius: 25px;
  }

  .p-class-notice-name {
    margin: -30px auto 30px auto;
  }

  .p-class-notice {
    padding: 20px 35px 20px 35px;
    border-radius: 20px;
  }

  .p-class-notice li {
    padding: .82rem 0.41rem .82rem 3rem;
  }

  .p-class-notice li:before {
    left: .2rem;
    top: .82rem;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}

.r-pd {
  margin: 30px 0 30px;
}

.p-class-search-inline {
  float: none;
  width: 100%;
  padding-right: 0;
}

@media (min-width:768px) {
  .p-class-search-inline {
    float: left;
    width: auto;
    padding-right: 15px;
  }
}

/* 產品介紹 */
.p-product-pimg {
  margin: 30px auto;
}

.p-bucket {
  width: 185px;
  height: 240px;
  background: url(../images/p-bucket.png) no-repeat 0 0;
  position: absolute;
  z-index: 0;
  right: 23%;
  bottom: 0;
  top: auto;
  display: none;
}

.p-bucket:after {
  content: ' ';
  width: 55px;
  height: 90px;
  background: url(../images/p-drop.png) no-repeat 0 0;
  position: absolute;
  z-index: 1;
  opacity: 0;
  left: 50%;
  top: -150px;
  margin-left: -27px;
  -webkit-animation: milkDrop 5s ease-in infinite;
  -moz-animation: milkDrop 5s ease-in infinite;
  -o-animation: milkDrop 5s ease-in infinite;
  animation: milkDrop 5s ease-in infinite;
}

.p-bucket.shown:after {
  opacity: 1;
}

.m2-s1 .p-bucket {
  display: none;
}

@media (min-width:768px) {
  .p-bucket {
    display: block;
  }
}

@-webkit-keyframes milkDrop {
  0% {
    top: -250px;
    opacity: 0
  }

  25% {
    top: -50px;
    opacity: 1;
  }

  30% {
    top: -10px;
    opacity: 0;
  }
}

@keyframes milkDrop {
  0% {
    top: -250px;
    opacity: 0
  }

  25% {
    top: -50px;
    opacity: 1;
  }

  30% {
    top: -10px;
    opacity: 0;
  }
}

/* 產品-第一區 */
.p-section-topbg {
  z-index: 20;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-color: transparent;
  background-size: cover;
  padding-bottom: 120px;
}

.p-section-topimg {
  display: block;
  position: relative;
  margin: 0 auto;
  text-align: center;
}

.topimg1,
.topimg2 {
  position: relative;
  z-index: 100;
  display: inline-block;
  margin-bottom: 20px;
}

.m1>.maincontent-wrap .g-section-txt {
  padding: 0 5px;
}

.m1>.maincontent-wrap .p-section-topbg {
  background-image: url(../images/p-topbg-m1.png);
  margin-bottom: 50px;
}

.m2-s1 .p-section-topbg {
  background-image: url(../images/p-topbg-m2-s1.png);
  background-position: 40% bottom;
  padding-bottom: 220px;
  padding-top: 20px;
}

.m2-s2 .p-section-topbg {
  background-image: url(../images/p-topbg-m2-s2.png);
}

.m2-s3 .p-section-topbg {
  background-image: url(../images/p-topbg-m2-s2.png);
}

.m2-s4 .p-section-topbg {
  background-image: url(../images/p-topbg-m2-s2.png);
}

.m2-s5 .p-section-topbg {
  background-image: url(../images/p-topbg-m2-s5.png);
}

.m2-s5 .p-section-topbg .g-ti-sub {
  margin-top: 30px;
}

.m2-s6 .p-section-topbg {
  background-image: url(../images/p-topbg-m2-s6.png);
}

.m3 .p-section-topbg {
  z-index: 50;
  background: url(../images/p-topbg-m3.jpg) repeat 0 0;
  padding-bottom: 0;
  position: relative;
}

.m3 .p-section-topbg.milkbg:before {
  content: ' ';
  width: 100%;
  background: url(../images/p-topbg-bottom-m3.png) no-repeat center bottom;
  position: absolute;
  min-height: 100%;
  bottom: -100px;
  left: 0;
  right: 0;
  z-index: -1;
}

.subm-sitemap .p-section-topbg {
  background: url(../images/p-bg-subm-sitemap.jpg) no-repeat 15% bottom #fff;
  background-size: 120%;
  padding-bottom: 150px;
  background-size: auto;
}


.trial-fixed {
  right: 3.6%;
  display: block;
  position: fixed;
  top: 380px;
  z-index: 500;
}
.trial-fixed_m{
  display: none;
}
@media (max-height:700px) {
  .trial-fixed {
    right: 3.6%;
    display: block;
    position: fixed;
    top: 106px;
    z-index: 500;
  }
}
@media (max-width:767px) {
  .trial-fixed_m{
    display: block;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 500;
  }
  .trial-fixed_m img{
    width: 100%;
  }
  .trial-fixed {
    display: none;
  }
  .m2-s3 .p-section-topbg {
    -webkit-background-size: auto 80%;
    background-size: auto 80%;
  }
}

@media (min-width:768px) {
  .p-section-topbg.negative-top {
    margin-top: -150px;
    padding-top: 90px;
  }

  .p-section-topbg {
    padding-bottom: 150px;
  }

  .m1>.maincontent-wrap .g-section-txt {
    padding: 0 30px;
  }
}

@media (min-width:992px) {

  .m3 .p-section-topbg,
  .m1>.maincontent-wrap .p-section-topbg {
    padding-top: 120px;
  }

  .subm-sitemap .p-section-topbg {
    background-position: center bottom;
    min-height: 500px;
  }

  .m2-s1 .p-section-topbg {
    background-position: center bottom;
    padding-bottom: 320px;
  }
}

@media (min-width:1200px) {
  .m2-s1 .p-section-topbg {
    padding-bottom: 400px;
  }
}

.shapebg-pink:before,
.shapebg-blue:before {
  content: ' ';
  display: block;
  width: 92%;
  height: 0;
  position: absolute;
  top: 0;
  left: 4%;
  z-index: 0;
  -webkit-animation: pulse 15s cubic-bezier(.41, .17, .32, .93) infinite;
  -moz-animation: pulse 15s cubic-bezier(.41, .17, .32, .93) infinite;
  -o-animation: pulse 15s cubic-bezier(.41, .17, .32, .93) infinite;
  animation: pulse 15s cubic-bezier(.41, .17, .32, .93) infinite;
}

.shapebg-pink:before {
  background: url(../images/shapebg-pink.png) no-repeat center center;
  background-size: contain;
  padding-top: 56.9%;
}

.shapebg-blue:before {
  background: url(../images/shapebg-blue.png) no-repeat center center;
  background-size: contain;
  padding-top: 59.6%;
}

.shapebg-pink img,
.shapebg-blue img {
  position: relative;
  z-index: 1;
}

.milktxtbg {
  max-width: 180px;
  background: url(../images/milk-txtbg.png) no-repeat 0 0;
  background-size: contain;
  z-index: 3;
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 50%
}

.milktxtbg:before {
  content: '';
  display: block;
  padding-bottom: 96.23%;
  width: 100%;
  line-height: 0;
}

.milktxtbg span {
  position: absolute;
  top: 45%;
  left: 55%;
  font-weight: bold;
  white-space: nowrap;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

@media (max-width:767px) {
  .milktxtbg {
    left: auto;
    right: 10%;
  }
}

@media (max-width:499px) {
  .milktxtbg {
    max-width: 150px;
    right: 5%
  }
}

.p-about-txt {
  position: relative;
}

.p-about-txt:before {
  content: ' ';
  display: inline-block;
  min-height: 100%;
  width: 1%;
  vertical-align: middle;
}

.txt-v-middle {
  display: inline-block;
  vertical-align: middle;
  z-index: 1000;
}

.p-section-mobileimg .img-max {
  opacity: 0;
}

.m2-s5 .p-section-topimg {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: auto;
  height: 50%;
  padding-top: 52%;
  top: 0;
  left: 0;
  display: block;
  margin-bottom: -50px;
}

.m2-s5 .p-section-topimg .topimg1 {
  width: 21.66%;
  height: 41.11%;
  background: url(../images/p-topimg1-m2-s5.png) no-repeat 0 0;
  top: 45%;
  left: 0;
  z-index: 10;
}

.m2-s5 .p-section-topimg .topimg2 {
  width: 30.66%;
  height: 70%;
  background: url(../images/p-topimg2-m2-s5.png) no-repeat 0 0;
  top: 10%;
  left: 16%;
  z-index: 7;
}

.m2-s5 .p-section-topimg .topimg3 {
  width: 28.88%;
  height: 78.8%;
  background: url(../images/p-topimg3-m2-s5.png) no-repeat 0 0;
  top: 0;
  left: 39.5%;
  z-index: 8;
}

.m2-s5 .p-section-topimg .topimg4 {
  width: 39.44%;
  height: 93.33%;
  background: url(../images/p-topimg4-m2-s5.png) no-repeat 0 0;
  top: 6.66%;
  left: 60%;
  z-index: 9;
}

.m2-s5 .p-section-topimg .topimg1,
.m2-s5 .p-section-topimg .topimg2,
.m2-s5 .p-section-topimg .topimg3,
.m2-s5 .p-section-topimg .topimg4 {
  position: absolute;
  background-size: contain;
  display: block;
}

@media (min-width:768px) {
  .m2-s5 .p-section-topimg {
    display: block;
    max-width: 650px;
    min-height: 320px;
    padding-top: 0;
    margin-bottom: -80px;
  }
}

/* 產品-第二區 */
.p-section-midbg {
  z-index: 10;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-color: transparent;
  background-size: cover;
  min-height: 300px;
  position: relative;
  padding-top: 80px;
  padding-bottom: 350px;
  margin-top: -120px;
  margin-bottom: 0;
}

.m1>.maincontent-wrap .p-section-midbg {
  padding-bottom: 0;
  background: url(../images/p-bg-m3.jpg) repeat 0 0;
}

.m2-s4 .p-section-midbg {
  background-image: url(../images/p-midbg-m2-s4.jpg);
  background-position: 46% top;
  padding-top: 150px;
  padding-bottom: 200px;
}

.m2-s5 .p-section-midbg {
  background-image: url(../images/p-midbg-m2-s5.jpg);
  padding-bottom: 50px;
  padding-top: 150px;
}

.m2-s6 .p-section-midbg {
  background-image: url(../images/p-midbg-m2-s6.jpg);
  background-color: #fef4f5;
  padding-top: 380px;
  padding-bottom: 120px;
}

.m2-s6 .p-section-midimg {
  position: absolute;
  z-index: 1;
  width: 220px;
  height: 390px;
  left: 50%;
  bottom: -280px;
  margin-left: -110px;
}

.m4-midtxt {
  max-width: 500px;
  padding: 70px 0;
}

.m2-s1 .p-section-midbg {
  background-image: url(../images/p-midbg-m2-s1.jpg);
  padding-top: 120px;
  padding-bottom: 100px;
  background-position: right bottom;
  background-color: #d5e9f4;
}

.m2-s2 .p-section-midbg,
.m2-s3 .p-section-midbg {
  padding-top: 150px;
  padding-bottom: 350px;
  background-image: url(../images/p-midbg-m2-s2.jpg);
  background-position: center bottom;
  background-color: #d5e9f4;
  background-size: cover;
  background-repeat: repeat-x;
}

.m2-s1 .p-section-midimg {
  width: 100%;
  height: auto;
  padding-top: 150%;
  position: relative;
  margin: 20px 0 -150px 0;
}

.m2-s1 .p-section-midimg .midimg1 {
  position: absolute;
  margin: 0;
  top: 30%;
  left: 55%;
  z-index: 5;
  -webkit-transform: scale(0.9);
  -ms-transform: scale(0.9);
  -o-transform: scale(0.9);
  transform: scale(0.9);
}

.m2-s1 .p-section-midimg .midimg2 {
  position: absolute;
  margin: 0;
  top: 30%;
  left: 0;
  z-index: 4;
  -webkit-transform: scale(0.9);
  -ms-transform: scale(0.9);
  -o-transform: scale(0.9);
  transform: scale(0.9);
}

.m2-s1 .p-section-midimg .midimg3 {
  position: absolute;
  margin: 0;
  top: 0%;
  left: 5%;
  z-index: 3;
}

@media (min-width:600px) {
  .m2-s1 .p-section-midbg {
    padding-bottom: 180px;
  }

  .m2-s1 .p-section-midimg {
    width: 100%;
    height: auto;
    padding-top: 55%;
    margin-top: 20px;
    margin-bottom: 0px;
  }

  .m2-s1 .p-section-midimg .midimg1 {
    top: 0%;
    left: 53%;
  }

  .m2-s1 .p-section-midimg .midimg2 {
    top: 5%;
    left: 0%;
  }

  .m2-s1 .p-section-midimg .midimg3 {
    top: 78%;
    left: 40%;
    z-index: 6;
  }
}

@media (min-width:768px) {
  .p-section-midbg {
    padding-top: 150px;
  }

  .m2-s1 .p-section-midbg {
    padding-bottom: 380px;
  }

  .m2-s1 .p-section-midimg {
    margin-bottom: -100px;
    padding-top: 50%;
    padding-top: 100px;
  }

  .m2-s1 .p-section-midimg .midimg1 {
    top: 0%;
    left: 42%;
  }

  .m2-s1 .p-section-midimg .midimg2 {
    top: 5%;
    left: 0%;
  }

  .m2-s1 .p-section-midimg .midimg3 {
    top: 150%;
    left: 48%;
  }

  .m2-s2 .p-section-midbg,
  .m2-s3 .p-section-midbg {
    padding-top: 120px;
  }

  .m2-s5 .p-section-midbg {
    padding-bottom: 100px;
    padding-top: 130px;
  }

  .m2-s6 .p-section-midbg {
    padding-bottom: 210px;
  }
}

@media (min-width:992px) {
  .m2-s1 .p-section-midbg {
    padding-bottom: 220px;
  }

  .m2-s1 .p-section-midimg {
    margin-bottom: 40px;
    margin-bottom: -60px;
    padding-top: 30%;
  }

  .m2-s1 .p-section-midimg .midimg1 {
    top: -5%;
    left: 28%;
  }

  .m2-s1 .p-section-midimg .midimg2 {
    top: 10%;
    left: 2%;
  }

  .m2-s1 .p-section-midimg .midimg3 {
    top: 40%;
    left: 46%;
    right: -5%;
  }
}

@media (min-width:1300px) {
  .m2-s1 .p-section-midimg {
    padding-top: 23%;
  }

  .m2-s1 .p-section-midimg .midimg1 {
    top: -6%;
    left: 30%;
  }

  .m2-s1 .p-section-midimg .midimg2 {
    top: -4%;
    left: 2%;
  }

  .m2-s1 .p-section-midimg .midimg3 {
    top: 35%;
    left: 55%;
  }
}

@media (min-width:1500px) {
  .m2-s1 .p-section-midimg .midimg1 {
    top: -3%;
    left: 33%;
  }

  .m2-s1 .p-section-midimg .midimg2 {
    top: 5%;
    left: 8%;
  }

  .m2-s1 .p-section-midimg .midimg3 {
    top: 35%;
    left: 45%;
  }
}

.p-midbg-ti-heart {
  background: url(../images/i-heart-2.png) no-repeat 0 0;
  width: 100px;
  height: 100px;
  left: 25%;
  margin-top: -30px;
  margin-left: -50px;
  z-index: 0;
  display: block;
  position: absolute;
}

.midimg-cow {
  width: 294px;
  height: 320px;
  background: url(../images/midimg-cow.png) no-repeat 0 0;
  left: 40%;
  bottom: 0;
  margin-left: -280px;
  position: absolute;
  display: none;
}

.midimg-goat {
  width: 239px;
  height: 218px;
  background: url(../images/midimg-goat.png) no-repeat 0 0;
  left: 40%;
  bottom: 100px;
  margin-left: -289px;
  position: absolute;
  display: none;
}

@media (min-width:768px) {

  .midimg-cow,
  .midimg-goat {
    display: block;
  }
}

/* 產品-第三區 */
.p-section-lastbg {
  z-index: 30;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-color: transparent;
  padding-top: 250px;
}

.p-section-lastbg h3 {
  z-index: 30;
  position: relative;
}

.p-section-lastbg:after {
  content: ' ';
}

.p-section-lastbg.milkbg,
.p-section-midbg.milkbg {
  background: url(../images/p-sectionbg-milkbg.jpg) no-repeat center bottom #f8f8f6;
  padding-top: 130px;
}

.p-section-lastbg.milkbg:before,
.p-section-midbg.milkbg:before {
  content: ' ';
  width: 100%;
  background: url(../images/p-sectionbg-top-milkbg.png) no-repeat 65% top;
  background-size: cover;
  position: absolute;
  min-height: 260px;
  top: -120px;
  left: 0;
  right: 0;
  z-index: -1;
}

@media (min-width:768px) {

  .p-section-lastbg.milkbg:before,
  .p-section-midbg.milkbg:before {
    background-position: center top;
  }
}

@media (min-width:1300px) {

  .p-section-lastbg.milkbg:before,
  .p-section-midbg.milkbg:before {
    height: 450px;
    top: -200px;
    width: 100%;
    left: 50%;
    margin-left: -50%;
  }
}

.m1>.maincontent-wrap .p-section-lastbg {
  background: none;
  padding-top: 50%;
}

.m1>.maincontent-wrap .p-section-lastbg .i-about-elem {
  width: 100%;
  height: auto;
  padding-bottom: 50%;
  position: absolute;
  left: 50%;
  margin-left: -50%;
  bottom: 20px;
  margin-top: 300px;
}

.m3 .p-section-lastbg {
  padding-top: 100px;
}

.m2-s4 .p-section-lastbg {
  padding-top: 180px;
}

.m2-s1 .p-section-lastbg {
  padding-top: 150px;
  padding-bottom: 50px;
}

.p-section-lastimg {
  position: absolute;
  z-index: 1;
}

.m2-s2 .p-section-lastimg {
  width: 270px;
  height: 380px;
  left: 50%;
  top: -200px;
  margin-left: -135px;
}

.m2-s3 .p-section-lastimg {
  width: 520px;
  height: 380px;
  left: 50%;
  top: -250px;
  margin-left: -260px;
}

.m2-s4 .p-section-lastimg {
  width: 320px;
  height: 305px;
  left: 50%;
  top: -90px;
  margin-left: -160px;
}

.m2-s1 .p-section-lastimg {
  width: 136px;
  height: 112px;
  left: 50%;
  top: 5%;
  margin-left: -68px;
}

.m2-s6 .p-section-lastbg {
  padding-top: 10px;
  padding-bottom: 10px;
}

@media (min-width:768px) {
  .m3 .p-section-lastbg {
    padding-top: 150px;
  }
}

@media (min-width:1200px) {
  .m1>.maincontent-wrap .p-section-lastbg {
    min-height: auto;
    padding-top: 50%;
  }

  .m1>.maincontent-wrap .p-section-lastbg .i-about-elem {
    width: 1200px;
    height: 560px;
    padding-bottom: 0;
    margin-left: -600px;
    margin-bottom: 80px;
    margin-top: -100px;
  }
}

@media (min-width:1400px) {
  .m1>.maincontent-wrap .p-section-lastbg {
    min-height: auto;
    padding-top: 45%;
  }
}

@media (min-width:2300px) {
  .m1>.maincontent-wrap .p-section-lastbg {
    min-height: auto;
    padding-top: 35%;
  }
}

/* 國旗 */
.p-flag-NZ,
.p-flag-France {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
  position: relative;
}

.p-flag-NZ:before,
.p-flag-France:before {
  content: ' ';
  width: 90px;
  height: 90px;
  position: absolute;
  z-index: -1;
}

.p-flag-NZ:before {
  background: url(../images/p-flag-NZ.png) no-repeat center center;
}

.p-flag-France:before {
  background: url(../images/p-flag-France.png) no-repeat center center;
}

.p-flag-NZ:before,
.p-flag-France:before,
.p-flag-right:before,
.p-flag-left:before {
  right: auto;
  left: 50%;
  margin-top: -100px;
  margin-left: -45px;
}

@media (min-width:768px) {

  .p-flag-NZ,
  .p-flag-France {
    margin-top: 80px;
  }

  .p-flag-NZ:before,
  .p-flag-France:before {
    margin-top: -60px;
  }

  .p-flag-right:before {
    right: -50px;
    left: auto;
    margin-left: 0
  }

  .p-flag-left:before {
    left: -50px;
    right: auto;
    margin-left: 0;
  }
}

/* 產品介紹-多彩icon清單 */
.p-list-point {
  list-style: none;
  margin: 0 auto 40px auto;
  padding: 0;
  max-width: 1024px;
}

.p-list-point .point-one {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  border-radius: 50px;
  border: 2px solid #fff;
  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  position: relative;
  min-height: 90px;
  padding: 120px 20px 20px 20px;
  margin: 50px auto 0 auto;
  list-style: none;
  text-align: center;
}

.p-list-point .point-one:last-of-type {
  margin-bottom: 0;
}

@media (min-width:768px) {
  .m2-s5 .point-one {
    margin-bottom: 15px;
    margin-top: 15px;
  }
}

.p-list-point .point-one .point-icon {
  width: 135px;
  height: 135px;
  background-repeat: no-repeat;
  background-image: url(../images/p-titleicon.png);
  background-color: transparent;
  z-index: 10;
  position: absolute;
  top: -35px;
  bottom: auto;
  left: 50%;
  margin-left: -67px;
}

.p-list-point .point-one .point-title {
  display: block;
  width: 100%;
  min-width: none;
  margin: 0 0 10px 0;
  font-size: 1.19rem;
  font-weight: 700;
  vertical-align: middle;
}

.p-list-point .point-one .point-txt {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 1rem;
  position: relative;
  vertical-align: middle;
  text-align: left;
}

.p-list-point .point-one .point-txt:before {
  content: ' ';
  height: 25px;
  width: 1px;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -13px;
  -webkit-box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
  display: none;
}
.memeber_activity .p-boxlist-wrap-right {
  display: block;
  padding: 0 15px 0 10px;
}
@media (min-width:450px) {
  .p-list-point .point-one {
    padding: 27px 20px 27px 135px;
    text-align: left;
    margin: 20px auto 0 auto;
  }

  .p-list-point .point-one .point-icon {
    top: 50%;
    left: -15px;
    margin-left: 0;
    margin-top: -67px;
  }
}

@media (min-width:768px) {
  .p-list-point .point-one {
    margin: 40px auto 0 auto;
  }
}

@media (min-width:992px) {
  .p-list-point .point-one .point-title {
    display: inline-block;
    width: 20%;
    min-width: none;
    margin: 0 0 0 0;
    text-align: center;
  }

  .p-list-point .col-md-6 .point-one .point-title {
    width: 100%;
    font-size: 1.19rem;
  }

  .p-list-point .point-one .point-txt {
    display: inline-block;
    width: 72%;
    padding: 0 35px;
    margin: -10px 0;
  }

  .p-list-point .point-one .point-txt:before {
    display: inline-block;
  }
}

@media (min-width:1500px) {
  .p-list-point .point-one .point-title {
    min-width: 210px;
  }
}

/* 腦部發展 */
.p-list-point .point1 {
  background-color: #E0F7FF;
}

.p-list-point .point1 .point-title {
  color: #15A3CB;
}

.p-list-point .point1 .point-icon {
  background-position: 0 0;
}

/* 眼睛發育 */
.p-list-point .point2 {
  background-color: #FEE6E6;
}

.p-list-point .point2 .point-title {
  color: #F98180;
}

.p-list-point .point2 .point-icon {
  background-position: 0 -135px;
}

/* 成長健壯 */
.p-list-point .point3 {
  background-color: #FEF5E4;
}

.p-list-point .point3 .point-title {
  color: #F89820;
}

.p-list-point .point3 .point-icon {
  background-position: 0 -270px;
}

/* 消化順暢 優纖順暢 */
.p-list-point .point4 {
  background-color: #FDE0FE;
}

.p-list-point .point4 .point-title {
  color: #C87FD0;
}

.p-list-point .point4 .point-icon {
  background-position: 0 -405px;
}

/* 完整保護 */
.p-list-point .point5 {
  background-color: #E2F9F3;
}

.p-list-point .point5 .point-title {
  color: #30CDBA;
}

.p-list-point .point5 .point-icon {
  background-position: 0 -540px;
}

/* 營養守護 */
.p-list-point .point6 {
  background-color: #FEE6E6;
}

.p-list-point .point6 .point-title {
  color: #F98180;
}

.p-list-point .point6 .point-icon {
  background-position: 0 -675px;
}

/* 滋補紅潤 */
.p-list-point .point7 {
  background-color: #dcfac8;
}

.p-list-point .point7 .point-title {
  color: #30CDBA;
}

.p-list-point .point7 .point-icon {
  background-position: 0 -810px;
}

/* 打勾藍 */
.p-list-point .point8 {
  background-color: #E0F7FF;
}

.p-list-point .point8 .point-title {
  color: #15A3CB;
}

.p-list-point .point8 .point-icon {
  background-position: 0 -945px;
}

/* 打勾橘 */
.p-list-point .point9 {
  background-color: #FEE6E6;
}

.p-list-point .point9 .point-title {
  color: #F89820;
}

.p-list-point .point9 .point-icon {
  background-position: 0 -1080px;
}

/* 打勾紅 */
.p-list-point .point10 {
  background-color: #FEE6E6;
}

.p-list-point .point10 .point-title {
  color: #F98180;
}

.p-list-point .point10 .point-icon {
  background-position: 0 -1215px;
}

/* 打勾綠 */
.p-list-point .point11 {
  background-color: #E2F9F3;
}

.p-list-point .point11 .point-title {
  color: #30CDBA;
}

.p-list-point .point11 .point-icon {
  background-position: 0 -1350px;
}

/* 潛能開發 */
.p-list-point .point12 {
  background: #fee6e6;
}

.p-list-point .point12 .point-title {
  color: #15A3CB;
}

.p-list-point .point12 .point-icon {
  background-position: 0 -1485px;
}

/* 資訊整合 */
.p-list-point .point13 {
  background: #fad2ff;
}

.p-list-point .point13 .point-title {
  color: #F98180;
}

.p-list-point .point13 .point-icon {
  background-position: 0 -1620px;
}

/* 知覺發展 */
.p-list-point .point14 {
  background-color: #fff5b9;
}

.p-list-point .point14 .point-title {
  color: #F89820;
}

.p-list-point .point14 .point-icon {
  background-position: 0 -1755px;
}

/* 訊息傳導 */
.p-list-point .point15 {
  background-color: #dcfac8;
}

.p-list-point .point15 .point-title {
  color: #30CDBA;
}

.p-list-point .point15 .point-icon {
  background-position: 0 -1890px;
}

/* 產品介紹-第四區 */
.p-cat3-sec4 {
  padding-top: 40px;
  padding-bottom: 50px;
  /*background: url(../images/p-cat3-sec4-bg.jpg) no-repeat left bottom #ceebf5;*/
  background: url(../images/p-topbg-m2-s6.png) no-repeat bottom;
  background-size: 100% auto;
}

.p-cat3-sec4 .point-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1150px;
}

.p-cat3-sec4 .point-list li {
  position: relative;
  border-radius: 50px;
  border: 3px solid #fff;
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
  min-height: 90px;
  padding: 120px 20px 30px 20px;
  margin: 50px auto 20px auto;
  background: #fff;
  list-style: none;
  text-align: center;
}

.p-cat3-sec4 .point-list li .point-icon {
  width: 135px;
  z-index: 10;
  position: absolute;
  top: -35px;
  bottom: auto;
  left: 50%;
  margin-left: -60px;
  border-radius: 50%;
  overflow: hidden;
  background: url(../images/p-titleicon-sheep.png) no-repeat center center;
  -webkit-background-size: 80%;
  background-size: 80%;
  /*-webkit-background-size: 55%; background-size: 55%;*/
}

.p-cat3-sec4 .point-list li .point-icon:after {
  content: '';
  display: block;
  position: absolute;
  z-index: 1;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: 50%;
  -webkit-box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .5);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .5);
  border: 15px solid rgba(255, 255, 255, 0.8)
}

.p-cat3-sec4 .point-list li .point-icon:before {
  content: '';
  width: 100%;
  padding-bottom: 100%;
  display: block;
  position: relative;
  z-index: 0;
}

.p-cat3-sec4 .point-list li .point-title {
  display: block;
  width: 100%;
  min-width: none;
  margin: 0 0 10px 0;
  font-size: 1.19rem;
  font-weight: 700;
}

.p-cat3-sec4 .point-list li .point-txt {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 1rem;
  position: relative;
  text-align: left;
}

.p-cat3-sec4 .point-list li .point-txt:before {
  content: ' ';
  height: 25px;
  width: 1px;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -13px;
  -webkit-box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
  display: none;
}

.p-cat3-sec4 .point-list li:nth-child(5n+1) {
  border-color: #a4d8e6;
}

.p-cat3-sec4 .point-list li:nth-child(5n+1) .point-title {
  color: #15A3CB;
}

.p-cat3-sec4 .point-list li:nth-child(5n+1) .point-icon {
  background-color: #15A3CB;
}

.p-cat3-sec4 .point-list li:nth-child(5n+2) {
  border-color: #fb9796;
}

.p-cat3-sec4 .point-list li:nth-child(5n+2) .point-title {
  color: #F98180;
}

.p-cat3-sec4 .point-list li:nth-child(5n+2) .point-icon {
  background-color: #F98180;
}

.p-cat3-sec4 .point-list li:nth-child(5n+3) {
  border-color: #ffd6a4;
}

.p-cat3-sec4 .point-list li:nth-child(5n+3) .point-title {
  color: #F89820;
}

.p-cat3-sec4 .point-list li:nth-child(5n+3) .point-icon {
  background-color: #F89820;
}

.p-cat3-sec4 .point-list li:nth-child(5n+4) {
  border-color: #eabcef;
}

.p-cat3-sec4 .point-list li:nth-child(5n+4) .point-title {
  color: #C87FD0;
}

.p-cat3-sec4 .point-list li:nth-child(5n+4) .point-icon {
  background-color: #C87FD0;
}

.p-cat3-sec4 .point-list li:nth-child(5n+5) {
  border-color: #93e2d9;
}

.p-cat3-sec4 .point-list li:nth-child(5n+5) .point-title {
  color: #30CDBA;
}

.p-cat3-sec4 .point-list li:nth-child(5n+5) .point-icon {
  background-color: #30CDBA;
}

#fitvidsCon img {
  max-width: 100%;
}

@media (min-width:450px) {
  .p-cat3-sec4 .point-list li {
    padding: 27px 27px 27px 130px;
    text-align: left;
  }

  .p-cat3-sec4 .point-list li .point-icon {
    width: 120px;
    top: 50%;
    left: -15px;
    margin-left: 0;
    margin-top: -60px;
  }
}

@media (min-width:768px) {
  .p-cat3-sec4 .point-list li {
    margin: 40px auto;
  }
}

@media (min-width:992px) {
  .p-cat3-sec4 {
    padding-top: 70px;
    padding-bottom: 200px;
  }

  .p-cat3-sec4 .point-list li .point-title {
    display: inline-block;
    vertical-align: middle;
    width: 20%;
    min-width: none;
    margin: 0 0 0 0;
    text-align: center;
  }

  .p-list-point .col-md-6 .point-one .point-title {
    width: 100%;
    font-size: 1.19rem;
  }

  .p-cat3-sec4 .point-list li .point-txt {
    display: inline-block;
    vertical-align: middle;
    width: 72%;
    padding: 0 35px;
    margin: -10px 0;
  }

  .p-cat3-sec4 .point-list li .point-txt:before {
    display: inline-block;
  }
}

@media (min-width:1500px) {
  .p-cat3-sec4 .point-list li .point-title {
    min-width: 210px;
  }
}

/* 產品介紹-詳細頁 */
.g-btn-block.p-view-btn {
  width: 100%;
}

.p-view-list,
.p-view-iconlist,
.p-view-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.p-view-list ol {
  list-style: decimal !important;
  margin: 0;
  padding: 0;
}

.p-view-list ol li {
  list-style: decimal !important;
  margin-left: 20px;
}

.p-view-list {
  margin: 0 0 40px 0;
  color: #00a4e2;
  display: block;
  position: relative;
  padding: 0;
  font-weight: 400;
  line-height: 2;
}

.p-view-list ul li {
  display: block;
  position: relative;
}

.p-view-list ul li {
  margin-left: 20px;
}

.p-view-list ul li:before {
  content: ' ';
  width: 10px;
  height: 10px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
  border-radius: 25px;
  background: #00a4e2;
  position: absolute;
  top: 12px;
  left: -20px;
}

.p-view-iconlist li {
  display: block;
  white-space: nowrap;
}

.p-view-iconlist li .wrap {
  width: 100%;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
  border-radius: 25px;
  border: 3px #fff solid;
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
  padding: .3rem 2rem .3rem 1rem;
  margin: 0 0 1rem 0;
  color: #333;
  position: relative;
  display: inline-block;
}

.p-view-iconlist li .lightblue {
  background: #D8F6FF;
}

.p-view-iconlist li .lightpink {
  background: #FFE1E3;
}

.p-view-iconlist li .itemname {
  display: inline;
  padding: 0 1rem 0 0.5rem;
  margin: 0 1rem 0 0;
  position: relative;
}

.p-view-iconlist li .itemname:after {
  content: ' ';
  height: 15px;
  width: 1px;
  background: #fff;
  -webkit-box-shadow: 1px 1px 0 #ccc;
  box-shadow: 1px 1px 0 #ccc;
  position: absolute;
  top: 3px;
  right: 0;
}

@media (min-width:768px) {
  .p-view-iconlist li .wrap {
    width: auto;
  }

  .g-btn-block.p-view-btn {
    width: auto;
    display: inline-block;
  }
}

.p-view-htmlbg {
  background: #eee;
  padding: 40px 0;
  font-size: 1rem;
}

.p-view-htmlbg img {
  max-width: 100%;
}

.p-view-htmlbg .img-left {
  padding: 0 20px 20px 0;
  float: left;
}

.p-view-htmlbg .img-right {
  padding: 0 20px 20px 0;
  float: right;
}

.p-view-htmlbg .img-center {
  padding: 0 auto 20px auto;
  display: block;
  text-align: center;
}

/* 網站地圖 */
.p-sitemapWrap {
  display: block;
  padding-left: 0;
  text-align: left;
  margin-bottom: 250px;
}

.indexLink {
  color: #EE819E;
  display: block;
  padding: 0;
  margin: 0 auto 10px auto;
  font-size: 1.19rem;
}

.indexLink a {
  color: #EE819E;
  text-decoration: none;
}

.indexLink a:hover {
  color: #EC4F78;
}

.p-sitemapDl {
  padding: 10px 0;
  margin: 0;
  display: block;
  text-align: left;
  border-bottom: 1px dotted #EE819E;
}

.p-sitemapDl a {
  color: #333;
}

.p-sitemapDl a:hover {
  color: #555;
}

.p-sitemapDl .sitemapDt {
  color: #EE819E;
  display: block;
  padding: 5px 0 5px 20px;
  margin: 0 auto;
  font-size: 1.0625rem;
  position: relative;
}

.p-sitemapDl .sitemapDt a {
  color: #EE819E;
  text-decoration: none;
  font-weight: 400;
}

.p-sitemapDl .sitemapDt a:hover {
  color: #EC4F78;
}

.p-sitemapDl .sitemapDt:before {
  content: ' ';
  width: 6px;
  height: 6px;
  border-radius: 25px;
  background: #EE819E;
  position: absolute;
  top: 15px;
  left: 5px;
}

.sitemapDd {
  display: block;
  padding: 5px 0 5px 20px;
}

@media (max-width:500px) {
  .p-sitemapWrap .col-xs-4 {
    width: 100%;
  }
}

@media (min-width:992px) {
  .p-sitemapDl {
    border-bottom: none;
  }

  .p-sitemapWrap {
    padding-left: 45%;
    margin: 0 auto auto;
  }
}

/* 相關產品 */
#p-relatedProducts {
  background: #fff;
  padding: 30px 0 0 0;
  margin: 0;
  text-align: center;
  vertical-align: top;
}

#p-relatedProducts .g-ti {
  margin-bottom: 0;
}

#p-relatedProducts .g-container-bigger {
  width: auto;
  padding-right: 0;
  padding-left: 0;
}

@media (min-width:768px) {
  #p-relatedProducts {
    padding: 50px 0;
  }

  #p-relatedProducts .g-container-bigger {
    width: 100%;
  }
}

@media (min-width:992px) {
  #p-relatedProducts .g-container-bigger {
    width: 100%;
  }
}

@media (min-width:1200px) {
  #p-relatedProducts .g-container-bigger {
    width: 1200px;
  }
}

@media (min-width:1500px) {
  #p-relatedProducts .g-container-bigger {
    width: 1500px;
  }
}

.relatedP-one {
  padding: 0;
  margin: 15px 0 15px -4px;
  display: inline-block;
  text-align: center;
  vertical-align: top;
}

.relatedP-one>a {
  display: inline-block;
  max-width: 280px;
}

.relatedP-img {
  background-color: #fff;
  margin: 0 auto;
  display: block;
}

.relatedP-img img {
  max-width: 100%;
  max-height: auto;
}

.relatedP-txt {
  color: #333;
  font-size: 1rem;
  text-align: center;
  display: block;
  margin: 20px auto;
}

.relatedP-txt {
  color: #333;
}

.relatedP-txt:hover {
  color: #ea4b61;
}

/* 區塊列表頁p-boxlist-wrap / 詳細頁p-boxlist-view-wrap ：
 使用者分享 / 活動訊息 / 知識百科 */
.p-boxlist-wrap,
.p-boxlist-view-wrap {
  background: #fff;
  margin: 0 auto 30px auto;
  display: block;
  -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

.p-boxlist-wrap {
  padding: 30px;
}

.p-boxlist-view-wrap {
  padding: 60px;
  margin-bottom: 60px;
}

@media (max-width:991px) {
  .p-boxlist-view-wrap {
    padding: 40px;
  }
}

@media (max-width:767px) {
  .p-boxlist-view-wrap {
    margin-bottom: 0;
  }

  .p-boxlist-view-wrap {
    padding: 30px;
  }
}

@media (max-width:499px) {
  .p-boxlist-wrap {
    padding: 15px;
  }

  .p-boxlist-view-wrap {
    padding: 20px;
  }
}

.p-boxlist-wrap {
  padding: 10px;
  position: relative;
}

.p-boxlist-wrap-left {
  float: left;
  width: 31%;
  max-width: 375px;
  margin-bottom: 0;
}

.p-boxlist-wrap-right {
  display: block;
  padding: 0 15px 0 33%;
}

.p-boxlist-wrap .date {
  color: #666;
  font-size: 14px;
  padding: 0;
  color: #8bbd25;
}

.p-boxlist-wrap .title {
  color: #e87392;
  padding: 10px 0 20px 0;
  font-size: 1.125rem;
  border-bottom: 1px dotted #ccc;
  margin: 0;
}

.p-boxlist-wrap .description {
  font-size: 1rem;
  margin-top: 20px;
  margin-bottom: 20px;
  display: block;
  text-align: left;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  max-height: 3.4rem;
  -webkit-line-clamp: 2;
}

@media (max-width:1499px) {
  .p-boxlist-wrap .title {
    padding: 10px 0 10px 0;
  }

  .p-boxlist-wrap .description {
    margin-top: 10px;
    margin-bottom: 0;
    font-size: 0.9375rem;
  }
}

@media (max-width:767px) {
  .p-boxlist-wrap-left {
    width: 110px;
  }

  .p-boxlist-wrap-right {
    padding: 0 15px 0 120px;
  }

  .p-boxlist-wrap .description {
    font-size: .875rem;
  }
}

@media (max-width:449px) {
  .p-boxlist-wrap-left {
    float: none;
    margin: 0 auto 10px auto;
    width: 100%;
    max-width: 200px;
  }

  .p-boxlist-wrap-right {
    padding: 0 15px;
  }

  .p-boxlist-wrap .date,
  .p-boxlist-wrap .title {
    text-align: center;
  }

  .p-boxlist-wrap .title {
    margin-top: 0;
  }

  .p-boxlist-wrap .g-btn {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 40px;
    line-height: 40px;
    padding: 0;
  }
}

/* 區塊列表詳細圖片陰影 */
.p-boxlist-view-img {
  width: 100%;
  height: auto;
  margin: 40px auto;
  position: relative;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 0 50px rgba(0, 0, 0, 0.1) inset;
  border-radius: 0% 0% 0% 0% / 0% 0% 0% 0%;
}

.p-boxlist-view-img img {
  position: relative;
  z-index: 10;
}

.p-boxlist-view-img:before {
  content: ' ';
  position: absolute;
  bottom: -8%;
  left: 0;
  right: 0;
  width: 100%;
  height: 33%;
  background: url(../images/img-shadowDown.png) no-repeat center bottom;
  background-size: cover;
  z-index: 0;
}

/* 區塊列表詳細分享按鈕 */
.p-shareicon {
  display: inline-bloek;
  list-style: none;
}

.p-shareicon:before {
  content: 'SHARE：';
  font-size: 1.21rem;
  color: #999;
  display: inline-block;
  position: absolute;
  margin-left: -80px;
  top: .4rem;
  text-align: left;
  background: none;
}

.p-shareicon li {
  display: inline-block;
  width: 35px;
  height: 35px;
  margin: 10px;
}

@media (max-width:400px) {
  .p-shareicon:before {
    content: ' ';
    display: inline-block;
    position: absolute;
    top: 5px;
    margin-left: -45px;
    width: 38px;
    height: 38px;
    background: url(../images/icon-sprite.png) no-repeat -304px -25px;
  }

  .p-shareicon li {
    margin: 5px;
  }
}

.p-shareicon li a {
  width: 38px;
  height: 38px;
  overflow: hidden;
  display: block;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  border-radius: 50px;
  background-image: url(../images/icon-sprite.png);
  background-repeat: no-repeat;
}

.p-shareicon li a.p-share-fb {
  background-position: -76px -25px;
  background-color: #3272a7;
}

.p-shareicon li a.p-share-fb:hover {
  background-color: #0B63AB;
}

.p-shareicon li a.p-share-line {
  background-position: -38px -25px;
  background-color: #0cc90b;
}

.p-shareicon li a.p-share-line:hover {
  background-color: #0AB709;
}

.p-shareicon li a.p-share-google {
  background-position: 0 -25px;
  background-color: #df4b38;
}

.p-shareicon li a.p-share-google:hover {
  background-color: #D82C16;
}

@media (min-width:992px) {
  .p-boxlist-view-img {
    max-width: 640px;
    max-height: 435px;
  }
}

/* 會員好康 */
.p-member-good {
  background: url(../images/member-good-bg.png) no-repeat right bottom #ffbd91;
  padding: 30px;
  margin: 0 auto 30px auto;
}

@media (max-width:500px) {
  .p-member-good .col-xs-6 {
    width: 100%;
  }
}

.p-member-good dl {
  color: #333;
  font-weight: 500;
}

.p-member-good dd {
  display: block;
  margin: 5px 0;
  color: #fff;
  font-size: 1.19rem;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

.p-step {
  text-align: center;
  font-size: 1.2rem;
  display: block;
  position: relative;
  padding: 20px;
  background: #ffe2ce;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.2);
}

.p-step.arrow {
  margin-bottom: 20px;
  margin-right: auto;
}

.p-step.arrow:before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  border-top: 10px solid #ffe2ce;
  border-right: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid transparent;
  top: auto;
  bottom: -20px;
  right: auto;
  left: 50%;
  margin-top: 0;
  margin-left: -5px;
}

@media (min-width:768px) {
  .p-step {
    padding: 20px;
  }

  .p-step.arrow {
    margin-right: 20px;
    margin-bottom: 0;
  }

  .p-step.arrow:before {
    border-top: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #ffe2ce;
    bottom: auto;
    top: 50%;
    left: auto;
    right: -20px;
    margin-top: -5px;
    margin-left: 0;
  }
}

/* 會員登入 */
.p-member-login-icon,
.p-member-login-txt {
  width: 100%;
  float: left;
}

.p-member-login-txt .notice {
  color: #ed819d;
  font-weight: bold;
  font-size: 0.8rem;
}

@media (min-width:600px) {
  .p-member-login-icon {
    width: 40%;
  }

  .p-member-login-txt {
    width: 60%;
  }
}

@media (min-width:768px) {
  .p-member-login-icon {
    width: 20%;
  }

  .p-member-login-txt {
    width: 80%;
    font-size: .9rem;
  }
}

/* 會員按鈕 */
.p-member-link {
  height: auto;
  position: relative;
  display: block;
  padding: 1rem;
  margin: 20px auto;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
  overflow: hidden;
  text-align: center;
}

.p-member-link .icon {
  display: inline-block;
  z-index: 10;
}

.p-member-link .name {
  display: block;
  color: #fff;
  font-size: 1rem;
}

.p-member-link .name span {
  display: block;
  margin: .5rem 0;
  font-size: 1rem;
}

.p-member-link .icon img {
  max-width: 100%;
  height: auto;
}

.checkAccount,
.checkAccount:visited {
  display: block;
  border-radius: 5px;
  margin-top: 3px;
  padding: 0.5rem 1rem;
  position: relative;
  background: #8FBB34;
  color: #fff;
  font-size: 0.85rem;
  line-height: 1;
  -webkit-transition: background .2s;
  -o-transition: background .2s;
  transition: background .2s;
  text-align: center;
}

.checkAccount:hover,
.checkAccount:active {
  color: #fff;
  background: #5DA224;
}

.checkAccount:before {
  content: '';
  width: 24px;
  height: 24px;
  background: url(../images/icon-sprite.png) no-repeat -332px -70px;
  display: inline-block;
  vertical-align: middle;
  margin: 0 0.5rem;
}

/* cssTable：購買地點 / 媽媽教室 */
.cssTable {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  margin: 20px auto;
}

.cssTable tr {
  border-bottom: 1px solid #eee;
}

.cssTable tr:nth-of-type(even) {
  background: #FEFAFB;
}

.cssTable tr:hover {
  background: #faeaed;
}

.cssTable td,
.cssTable th {
  padding: 20px 10px;
  color: #666;
  font-size: 1rem;
}

.cssTable .className {
  width: 20%;
  text-align: left;
}

.cssTable .classHost {
  width: 15%;
  text-align: left;
}

.cssTable .classDate {
  width: 20%;
  text-align: center;
}

.cssTable .classLocation {
  width: 35%;
  text-align: left;
}

.cssTable .classTime {
  width: 20%;
  text-align: center;
}

.cssTable .classState {
  width: 15%;
  text-align: center;
}

.cssTable .classView {
  width: 20%;
  text-align: center;
}

.cssTable .classCancle {
  width: 5%;
  text-align: center;
}

.cssTable .btnShow {
  width: 10%;
  text-align: center;
}

.cssTable .noData {
  width: 10%;
  text-align: center;
}

.cssTable .storeName {
  width: 30%;
  text-align: left;
}

.cssTable .storeLocation {
  width: 40%;
  text-align: left;
}

.cssTable .storeTel {
  width: 15%;
  text-align: left;
}

.cssTable th {
  color: #ed819d;
  border-top: 1px solid #ed819d;
  border-bottom: 1px solid #ed819d;
  background-color: #fef9fa;
  white-space: nowrap;
}

.cssTable .cssTbody .className {
  position: relative;
  color: #ed819d;
  padding-left: 30px;
  text-align: left;
}

.cssTable .className a {
  color: #ed819d;
}

.cssTable .className a:hover {
  color: #EC4F78;
}

.cssTable .classLocation {
  position: relative;
}

/* cssTable-bonus */
.cssTable .bonusDate {
  width: 30%;
  text-align: center;
}

.cssTable .bonusName {
  width: 50%;
  text-align: center;
}

.cssTable .bonusPoint {
  width: 20%;
  text-align: center;
  font-weight: bold;
}

.cssTable td.bonusPoint.plus {
  color: #ed819d;
}

.cssTable td.bonusPoint.minus {
  color: #049FE1;
}

.cssTable td.bonusPoint.plus:before,
.cssTable td.bonusPoint.minus:before {
  color: #666;
}

.bonus-now {
  display: block;
  margin: 0 auto 1rem auto;
  padding: 0.5rem;
  font-size: 1.1rem;
  text-align: center;
  border-radius: 25px;
  background: #f7f7f7;
  border: 2px solid #ebebeb;
  color: #ed819d;
  font-weight: 500;
}

/* cssTable-store */
.cssTable.store tr:nth-of-type(even) {
  background: #f9f6fc;
}

.cssTable.store tr:hover {
  background: #e5e4fb;
}

.cssTable.store th {
  color: #8c8bcb;
  border-top: 1px solid #8B97CB;
  border-bottom: 1px solid #8B97CB;
  background-color: #fbf9fe;
}

.cssTable.store .cssTbody .className {
  color: #8B97CB;
}

.cssTable.store .className a {
  color: #8B97CB;
}

.cssTable.store .className a:hover {
  color: #5D6FBB;
}

.cssTable.store .storeLocation {
  position: relative;
}

.cssTable.store .no-data {
  display: block;
  width: 100%;
}

.store_popup_a {
  text-decoration: underline;
  color: #978bcb;
}

.store_popup {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgb(0 0 0 / 45%);
  width: 100%;
  height: 100%;
  z-index: 9999;
}

.store_fix {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  background-color: #fff;
  height: 400px;
  /* overflow: auto; */
  border-radius: 10px;
  transform: translateY(-50%)translateX(-50%);
  padding: 10px;
}

.store_fix h3 {
  margin: 0;
  color: #8c8bcb;
  padding: 5px;
  font-size: 18px;
}

.store_box {
  overflow: auto;
  height: 350px;
}

.location_pord {
  padding: 0 20px;
  margin: 0;
}

.store_popup_close {
  position: absolute;
  width: 40px;
  top: -20px;
  right: -20px;
  cursor: pointer;
}

.store_popup_close img {

  width: 100%;
}

@media (max-width:992px) {
  .cssTable th {
    font-size: .92rem;
  }
}

@media (max-width:767px) {
  .store_popup_close {
    position: absolute;
    width: 40px;
    top: 0px;
    right: 0px;
    cursor: pointer;
  }

  .store_fix {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    background-color: #fff;
    height: 400px;
    /* overflow: auto; */
    border-radius: 10px;
    transform: translateY(-50%)translateX(-50%);
    padding: 10px;
  }

  .cssTable,
  .cssTable thead,
  .cssTable tbody,
  .cssTable th,
  .cssTable td,
  .cssTable tr {
    display: block;
  }

  /* Hide table headers (but not display: none;, for accessibility) */
  .cssTable thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .cssTable tr {
    border-bottom: 5px solid #ccc;
  }

  .cssTable tr:hover td {
    background: #faeaed;
    border-color: #fff;
  }

  .cssTable.store tr:hover td {
    background: #e5e4fb;
    border-color: #fff;
  }

  .cssTable td,
  .cssTable th {
    padding: 8px 10px;
  }

  .cssTable .className,
  .cssTable .classHost,
  .cssTable .classDate,
  .cssTable .classLocation,
  .cssTable .classTime,
  .cssTable .classState,
  .cssTable .classView,
  .cssTable .classCancle,
  .cssTable .btnShow,
  .cssTable .noData,
  .cssTable .storeName,
  .cssTable .storeLocation,
  .cssTable .storeTel,
  .cssTable .bonusDate,
  .cssTable .bonusName,
  .cssTable .bonusPoint {
    width: 100%;
    text-align: left;
  }

  .cssTable td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    display: block;
    vertical-align: top;
  }

  .cssTable td {
    padding-left: 35%;
    text-align: left;
  }

  .cssTable td:before {
    /* Now like a table header */
    position: absolute;
    top: 10px;
    left: 10px;
    width: 30%;
    text-shadow: 0px 0px 1px #ccc;
    padding-right: 10px;
    white-space: nowrap;
    font-weight: 500;
  }

  .cssTable td:before {
    content: attr(data-tabletitle);
  }
}

@media (max-width:450px) {
  .cssTable td {
    padding-left: 10px;
  }

  .cssTable td:before {
    position: relative;
    width: 100%;
    top: auto;
    left: auto;
    display: block;
  }

  .cssTable .btnShow,
  .cssTable .noData {
    text-align: center;
  }
}

.class-notice {
  display: block;
  color: #ea698c;
  margin: 30px auto;
  font-weight: bold;
}

.form-notice {
  color: #888;
  font-size: 0.85rem;
  line-height: 1.2;
}

.contact-map {
  margin: 1rem auto;
}

@media (min-width:768px) {
  .contact-map {
    margin: 0 auto 1rem auto;
  }
}

.child-yetuse {
  padding-left: 0.3rem;
  padding-right: 160px;
  display: block;
  margin: 0.5rem 0 1rem 0;
  position: relative;
}

.child-yetuse .form-label {
  display: block;
  position: relative;
  white-space: normal;
  margin: 0 auto;
}

.child-yetuse .fill-area {
  position: absolute;
  right: 0;
  top: 0;
  width: 160px;
  margin: 0 auto;
  padding: 0;
}

.child-yetuse .fill-area .form-control {
  width: 100%;
}

.child-getinfo .form-group {
  padding: 0 20px;
}

.child-getinfo .form-label,
.child-isuser .form-label {
  padding-left: 15px;
  position: relative;
  margin-left: 15px;
  margin-right: 15px;
  display: inline-block;
  white-space: normal
}

.child-getinfo .star,
.child-isuser .star {
  position: absolute;
  top: 0.1rem;
  left: 0;
}

@media (min-width:1500px) {
  .child-yetuse {
    padding-right: 0;
  }

  .child-yetuse .form-label {
    display: inline-block;
    margin-right: 1rem;
  }

  .child-yetuse .fill-area {
    position: relative;
    display: inline-block;
    width: 370px;
  }
}

@media (max-width:991px) {
  .child-yetuse {
    position: relative;
    padding-right: 0;
  }

  .child-yetuse .form-label {
    display: inline-block;
    position: relative;
  }

  .child-getinfo .form-label,
  .child-isuser .form-label {
    display: block;
  }

  .child-yetuse .fill-area {
    position: relative;
    width: 100%;
    right: auto;
    top: auto;
  }

  .child-isuser .form-group {
    padding: 0 20px;
  }
}

@media (max-width:767px) {
  .child_getinfo {
    display: inline-block;
  }
}

.important-notice {
  display: block;
  margin: 0 auto 25px auto;
  padding: 0 15px;
  color: #E00;
  font-weight: bold;
  font-size: 1rem;
  text-align: center;
}

.important-notice span {
  display: block;
}

.important-notice span a {
  color: #EC4F78;
  text-decoration: underline;
  margin-left: 5px;
}

.important-notice span a:hover {
  text-decoration: none;
  color: #F55;
}

@media (max-width:991px) {
  .important-notice {
    text-align: left;
  }

  .important-notice span {
    display: inline;
  }
}

@media (min-width:992px) {
  .m-login>.row {
    display: block;
    margin: 0 auto;
    font-size: 0;
  }

  .m-login .col-md-6 {
    display: inline-block;
    vertical-align: middle;
    font-size: 1rem;
    float: none;
  }
}

@media (min-width:500px) {
  .m-reverify button {
    min-width: 200px;
  }
}

.m-reverify {
  max-width: 900px;
}

.m-reverify .form-group .notice {
  margin: 10px 0 0 0;
  display: block;
}

/* 2020/03追加產品 */
.m2-s7 {
  overflow: hidden;
  background: #fff;
}

.p7-sec1 {
  background: url(../images/p7-sec1-bg.jpg) no-repeat center top #fff;
  padding-bottom: 8%;
  padding-top: 50px;
}

.p7-sec1 .g-container {
  perspective: 1000px;
  position: relative;
  padding-left: 15px;
  padding-right: 15px;
}

.p7-sec1 .img {
  margin: 0 auto 50px auto;
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 570px;
  z-index: 3;
  -webkit-transform: translateX(30px);
  -ms-transform: translateX(30px);
  -o-transform: translateX(30px);
  transform: translateX(30px);
}

.p7-sec1 .img img {
  max-width: 100%
}

.p7-sec1 .deco-line {
  position: absolute;
  background: #febe00;
  height: 1px;
}

.p7-sec1 .deco-line.n1 {
  z-index: 5;
  top: 39%;
  left: 17.3%;
  width: 20%;
  -webkit-transform: rotate(105deg);
  transform: rotate(105deg);
  -webkit-transform-origin: left center;
  transform-origin: left center;
}

.p7-sec1 .deco-line.n2 {
  z-index: 4;
  top: 120.05%;
  left: 10.92%;
  width: 73.07%;
  -webkit-transform: rotate(-8.5deg);
  transform: rotate(-8.5deg);
  -webkit-transform-origin: left center;
  transform-origin: left center;
}

.p7-sec1 .deco-line.n3 {
  z-index: 1;
  top: 81.75%;
  right: 17.46%;
  width: 65.38%;
  -webkit-transform-origin: right center;
  transform-origin: right center;
  -webkit-transform: rotate(12deg);
  transform: rotate(12deg);
}

.p7-sec1 ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.p7-sec1 ul li {
  display: inline-block;
  position: absolute;
  width: 100%;
  max-width: 175px;
  box-shadow: inset 0 0 30px rgba(238, 174, 0, 0.27);
  border: 2px solid #febe00;
  background: #fff;
  border-radius: 50%
}

.p7-sec1 ul li:nth-child(1) {
  z-index: 7;
  top: 14.61%;
  left: 10%;
}

.p7-sec1 ul li:nth-child(2) {
  z-index: 7;
  top: 99.23%;
  left: 5.16%;
  max-width: 158px;
}

.p7-sec1 ul li:nth-child(3) {
  z-index: 7;
  top: 60.61%;
  left: 78.25%;
}

.p7-sec1 ul li:after {
  content: '';
  display: block;
  width: 100%;
  padding-bottom: 100%;
}

.p7-sec1 ul li .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 100%;
  line-height: 1.5;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.p7-sec1 ul li h5 {
  color: #f8b500;
  font-size: 20px;
  font-weight: 600;
  margin: 0 auto 5px auto;
  padding: 0;
}

.p7-sec1 ul li p {
  text-align: center;
  font-size: 1.125rem;
  color: #666;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
  margin: 0;
  padding: 0;
}

.p7-sec2 {
  padding: 80px 0 60px 0;
  position: relative;
  background: url(../images/p7-sec2-bg-2.jpg) no-repeat 0 bottom, url(../images/p7-sec2-bg-1.jpg) no-repeat center top #bde4ee;
}

.p7-sec2 .g-container {
  max-width: 1230px;
}

.p7-sec2:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: -2px;
  width: 100%;
  height: 40px;
  background: url(../images/i-mask-bg-1.png) repeat-x 0 0;
  -webkit-background-size: auto 100%;
  background-size: auto 100%;
}

.p7-sec2 .top {
  display: table;
  width: 100%;
  direction: rtl;
  margin: 0 auto 30px auto;
}

.p7-sec2 .top .left {
  width: 58%;
  vertical-align: middle;
  display: table-cell;
  font-size: 1.29rem;
  color: #333;
  direction: ltr;
}

.p7-sec2 .top .right {
  width: 42%;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
  direction: ltr;
}

.p7-sec2 .top .right img {
  max-width: 100%;
}

.p7-sec2 .top h3 {
  color: #195a9e;
  font-size: 2rem;
  font-weight: 600;
  padding: 0;
  margin: 0 0 40px 0;
  letter-spacing: 0.08rem;
  -webkit-text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff, 0px 1px 0 #fff, 0px -1px 0 #fff, -1px 0px 0 #fff, 1px 0px 0 #fff, 2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff, 0px 2px 0 #fff, 0px -2px 0 #fff, -2px 0px 0 #fff, 2px 0px 0 #fff, 1px 2px 0 #fff, -1px 2px 0 #fff, 1px -2px 0 #fff, -1px -2px 0 #fff, 2px 1px 0 #fff, -2px 1px 0 #fff, 2px -1px 0 #fff, -2px -1px 0 #fff, 3px 3px 4px rgba(0, 0, 0, 0.2);
  -moz-text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff, 0px 1px 0 #fff, 0px -1px 0 #fff, -1px 0px 0 #fff, 1px 0px 0 #fff, 2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff, 0px 2px 0 #fff, 0px -2px 0 #fff, -2px 0px 0 #fff, 2px 0px 0 #fff, 1px 2px 0 #fff, -1px 2px 0 #fff, 1px -2px 0 #fff, -1px -2px 0 #fff, 2px 1px 0 #fff, -2px 1px 0 #fff, 2px -1px 0 #fff, -2px -1px 0 #fff, 3px 3px 4px rgba(0, 0, 0, 0.2);
  text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff, 0px 1px 0 #fff, 0px -1px 0 #fff, -1px 0px 0 #fff, 1px 0px 0 #fff, 2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff, 0px 2px 0 #fff, 0px -2px 0 #fff, -2px 0px 0 #fff, 2px 0px 0 #fff, 1px 2px 0 #fff, -1px 2px 0 #fff, 1px -2px 0 #fff, -1px -2px 0 #fff, 2px 1px 0 #fff, -2px 1px 0 #fff, 2px -1px 0 #fff, -2px -1px 0 #fff, 3px 3px 4px rgba(0, 0, 0, 0.2);
  -moz-text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff, 0px 1px 0 #fff, 0px -1px 0 #fff, -1px 0px 0 #fff, 1px 0px 0 #fff, 2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff, 0px 2px 0 #fff, 0px -2px 0 #fff, -2px 0px 0 #fff, 2px 0px 0 #fff, 1px 2px 0 #fff, -1px 2px 0 #fff, 1px -2px 0 #fff, -1px -2px 0 #fff, 2px 1px 0 #fff, -2px 1px 0 #fff, 2px -1px 0 #fff, -2px -1px 0 #fff, 3px 3px 4px rgba(0, 0, 0, 0.2);
}

.p7-sec2 .bottom h3 {
  font-size: 2.82rem;
  letter-spacing: 0.25rem;
  margin: 0 0 20px 0;
  color: #fff;
  font-weight: 800;
  -webkit-text-shadow: -3px -3px 0 #00a4e2, -3px 3px 0 #00a4e2, 3px -3px 0 #00a4e2, 3px 3px 0 #00a4e2, -3px -2px 0 #00a4e2, -3px 2px 0 #00a4e2, 3px -2px 0 #00a4e2, 3px 2px 0 #00a4e2, -2px -3px 0 #00a4e2, -2px 3px 0 #00a4e2, 2px -3px 0 #00a4e2, 2px 3px 0 #00a4e2, -3px -1px 0 #00a4e2, -3px 1px 0 #00a4e2, 3px -1px 0 #00a4e2, 3px 1px 0 #00a4e2, -1px -3px 0 #00a4e2, -1px 3px 0 #00a4e2, 1px -3px 0 #00a4e2, 1px 3px 0 #00a4e2, -3px 0 0 #00a4e2, 3px 0 0 #00a4e2, 0 -3px 0 #00a4e2, 0 3px 0 #00a4e2, 3px 3px 5px rgba(0, 0, 0, 0.2);
  text-shadow: -3px -3px 0 #00a4e2, -3px 3px 0 #00a4e2, 3px -3px 0 #00a4e2, 3px 3px 0 #00a4e2, -3px -2px 0 #00a4e2, -3px 2px 0 #00a4e2, 3px -2px 0 #00a4e2, 3px 2px 0 #00a4e2, -2px -3px 0 #00a4e2, -2px 3px 0 #00a4e2, 2px -3px 0 #00a4e2, 2px 3px 0 #00a4e2, -3px -1px 0 #00a4e2, -3px 1px 0 #00a4e2, 3px -1px 0 #00a4e2, 3px 1px 0 #00a4e2, -1px -3px 0 #00a4e2, -1px 3px 0 #00a4e2, 1px -3px 0 #00a4e2, 1px 3px 0 #00a4e2, -3px 0 0 #00a4e2, 3px 0 0 #00a4e2, 0 -3px 0 #00a4e2, 0 3px 0 #00a4e2, 3px 3px 5px rgba(0, 0, 0, 0.2);
}

.p7-sec2 .bottom h3:first-letter {
  letter-spacing: 0.5rem;
}

.p7-sec2 .bottom h3 strong {
  font-size: 1.29em;
  display: inline-block;
  margin: 0 0.05rem;
}

.p7-sec2 .bottom .list-wrap {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 23px;
  padding: 30px;
}

.p7-sec2 .bottom .list-wrap>ul {
  margin: 0;
  padding: 20px;
  list-style-type: none;
  background: #fff;
  border-radius: 20px;
}

.p7-sec2 .bottom .list-wrap>ul li:nth-child(odd) {
  padding-right: 30px;
}

.p7-sec2 .bottom .list-wrap>ul li:nth-child(even) {
  padding-left: 30px;
  border-left: 1px dotted #ddd;
}

.p7-sec2 .bottom .list-wrap>ul li:nth-child(1),
.p7-sec2 .bottom .list-wrap>ul li:nth-child(2) {
  border-top: none;
}

.p7-sec2 .bottom .list-wrap>ul li {
  display: inline-block;
  width: 50%;
  vertical-align: top;
  margin: 0;
  padding: 25px 0;
  border-top: 1px dotted #ddd;
}

.p7-sec2 .bottom .list-wrap>ul li .box {
  width: 100%;
  position: relative;
  padding-left: 145px;
  min-height: 125px;
  font-size: 1.17rem;
  line-height: 1.7;
  display: table;
}

.p7-sec2 .bottom .list-wrap>ul li .box p {
  display: table-cell;
  vertical-align: middle;
}

.p7-sec2 .bottom .list-wrap>ul li .box:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 124px;
  height: 124px;
  background-repeat: no-repeat;
  background-position: 0 0;
  -webkit-background-size: contain;
  background-size: contain;
}

.p7-sec2 .bottom .list-wrap>ul li:nth-child(1) .box:before {
  background-image: url(../images/p7-sec2-icon-1.png);
}

.p7-sec2 .bottom .list-wrap>ul li:nth-child(2) .box:before {
  background-image: url(../images/p7-sec2-icon-2.png);
}

.p7-sec2 .bottom .list-wrap>ul li:nth-child(3) .box:before {
  background-image: url(../images/p7-sec2-icon-3.png);
}

.p7-sec2 .bottom .list-wrap>ul li:nth-child(4) .box:before {
  background-image: url(../images/p7-sec2-icon-4.png);
}

.p7-sec2 .bottom .list-wrap>ul li:nth-child(5) .box:before {
  background-image: url(../images/p7-sec2-icon-5.png);
}

.p7-sec2 .bottom .list-wrap>ul li:nth-child(6) .box:before {
  background-image: url(../images/p7-sec2-icon-6.png);
}

.p7-sec1.showWrap .img {
  opacity: 0;
  margin-top: 30px;
  -webkit-transition: margin 1s, opacity 1s;
  -o-transition: margin 1s, opacity 1s;
  transition: margin 1s, opacity 1s;
}

.p7-sec1.showWrap.shown .img {
  opacity: 1;
  margin-top: 0;
}

.p7-sec1.showWrap ul li {
  opacity: 0;
  -webkit-transform: scale(.8);
  -ms-transform: scale(.8);
  -o-transform: scale(.8);
  transform: scale(.8);
  -webkit-transition: transform .5s, opacity .5s;
  -o-transition: transform .5s, opacity .5s;
  transition: transform .5s, opacity .5s;
}

.p7-sec1.showWrap.shown ul li {
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

.p7-sec1.showWrap .deco-line {
  opacity: 0;
}

.p7-sec1.showWrap.shown .deco-line {
  opacity: 1;
  -webkit-animation: ani_deco_line .35s ease both;
  -o-animation: ani_deco_line .35s ease both;
  animation: ani_deco_line .35s ease both;
}

.p7-sec1.showWrap ul li:nth-child(1) {
  -webkit-transition-delay: .1s;
  -o-transition-delay: .1s;
  transition-delay: .1s;
}

.p7-sec1.showWrap ul li:nth-child(2) {
  -webkit-transition-delay: .45s;
  -o-transition-delay: .45s;
  transition-delay: .45s;
}

.p7-sec1.showWrap ul li:nth-child(3) {
  -webkit-transition-delay: .9s;
  -o-transition-delay: .9s;
  transition-delay: .9s;
}

.p7-sec1.showWrap .deco-line.n1 {
  -webkit-animation-delay: .2s;
  -o-animation-delay: .2s;
  animation-delay: .2s;
}

.p7-sec1.showWrap .deco-line.n2 {
  -webkit-animation-delay: .55s;
  -o-animation-delay: .55s;
  animation-delay: .55s;
}

.p7-sec1.showWrap .deco-line.n3 {
  -webkit-animation-delay: 1.05s;
  -o-animation-delay: 1.05s;
  animation-delay: 1.05s;
}

.p7-sec2.showWrap .top .right img {
  -webkit-transform: translate(30px, 0);
  -ms-transform: translate(30px, 0);
  -o-transform: translate(30px, 0);
  transform: translate(30px, 0);
  opacity: 0;
  -webkit-transition: transform 1.2s, opacity 1.2s;
  -o-transition: transform 1.2s, opacity 1.2s;
  transition: transform 1.2s, opacity 1.2s;
}

.p7-sec2.showWrap .top .left {
  -webkit-transform: translate(0, 30px);
  -ms-transform: translate(0, 30px);
  -o-transform: translate(0, 30px);
  transform: translate(0, 30px);
  opacity: 0;
  -webkit-transition: transform 1s .15s, opacity 1s .15s;
  -o-transition: transform 1s .15s, opacity 1s .15s;
  transition: transform 1s .15s, opacity 1s .15s;
}

.p7-sec2.showWrap.shown .top .right img,
.p7-sec2.showWrap.shown .top .left {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}

.p7-sec2.showWrap h3 {
  opacity: 0;
  -webkit-transform: translate(0, 20px);
  -ms-transform: translate(0, 20px);
  -o-transform: translate(0, 20px);
  transform: translate(0, 20px);
  -webkit-transition: transform .5s, opacity .5s;
  -o-transition: transform .5s, opacity .5s;
  transition: transform .5s, opacity .5s;
}

.p7-sec2.showWrap.shown h3 {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}

.p7-sec2.showWrap.shown h3 strong {
  -webkit-animation: ani_ring 1s both .9s;
  -o-animation: ani_ring 1s both .9s;
  animation: ani_ring 1s both .9s;
}

.p7-sec2.showWrap .list-wrap {
  opacity: 0;
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -o-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: transform .6s ease-out, opacity .6s ease-out;
  -o-transition: transform .6s ease-out, opacity .6s ease-out;
  transition: transform .6s ease-out, opacity .6s ease-out;
}

.p7-sec2.showWrap .list-wrap>ul>li {
  opacity: 0;
  -webkit-transform: translate(0, 30px);
  -ms-transform: translate(0, 30px);
  -o-transform: translate(0, 30px);
  transform: translate(0, 30px);
  -webkit-transition: transform .6s, opacity .6s;
  -o-transition: transform .6s, opacity .6s;
  transition: transform .6s, opacity .6s;
}

.p7-sec2.showWrap.shown .list-wrap {
  opacity: 1;
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  -o-transform: scaleX(1);
  transform: scaleX(1);
}

.p7-sec2.showWrap.shown .list-wrap>ul>li {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}

.p7-sec2.showWrap .list-wrap>ul>li:nth-child(1) {
  -webkit-transition-delay: .5s;
  -o-transition-delay: .5s;
  transition-delay: .5s;
}

.p7-sec2.showWrap .list-wrap>ul>li:nth-child(2) {
  -webkit-transition-delay: .6s;
  -o-transition-delay: .6s;
  transition-delay: .6s;
}

.p7-sec2.showWrap .list-wrap>ul>li:nth-child(3) {
  -webkit-transition-delay: .7s;
  -o-transition-delay: .7s;
  transition-delay: .7s;
}

.p7-sec2.showWrap .list-wrap>ul>li:nth-child(4) {
  -webkit-transition-delay: .8s;
  -o-transition-delay: .8s;
  transition-delay: .8s;
}

.p7-sec2.showWrap .list-wrap>ul>li:nth-child(5) {
  -webkit-transition-delay: .9s;
  -o-transition-delay: .9s;
  transition-delay: .9s;
}

.p7-sec2.showWrap .list-wrap>ul>li:nth-child(6) {
  -webkit-transition-delay: 1s;
  -o-transition-delay: 1s;
  transition-delay: 1s;
}

@-webkit-keyframes ani_deco_line {
  from {
    width: 0;
  }
}

@keyframes ani_deco_line {
  from {
    width: 0;
  }
}

@-webkit-keyframes ani_ring {
  0% {
    transform: scale(1) rotate(0deg)
  }

  20% {
    transform: scale(1.2) rotate(0deg)
  }

  30% {
    transform: scale(1.2) rotate(-5deg)
  }

  40% {
    transform: scale(1.2) rotate(5deg)
  }

  50% {
    transform: scale(1.2) rotate(-5deg)
  }

  60% {
    transform: scale(1.2) rotate(5deg)
  }

  70% {
    transform: scale(1.2) rotate(0deg)
  }

  80%,
  100% {
    transform: scale(1) rotate(0deg)
  }
}

@keyframes ani_ring {
  0% {
    transform: scale(1) rotate(0deg)
  }

  20% {
    transform: scale(1.2) rotate(0deg)
  }

  30% {
    transform: scale(1.2) rotate(-5deg)
  }

  40% {
    transform: scale(1.2) rotate(5deg)
  }

  50% {
    transform: scale(1.2) rotate(-5deg)
  }

  60% {
    transform: scale(1.2) rotate(5deg)
  }

  70% {
    transform: scale(1.2) rotate(0deg)
  }

  80%,
  100% {
    transform: scale(1) rotate(0deg)
  }
}

@media (max-width:1499px) {
  .p7-sec1 .img {
    margin: 50px auto;
    width: 50%;
    max-width: 450px;
  }

  .p7-sec2 .top .left {
    width: 62%;
  }

  .p7-sec2 .top .right {
    width: 38%;
  }

  .p7-sec1 ul li:nth-child(1) {
    top: 2%;
    left: 0%;
  }

  .p7-sec1 ul li:nth-child(2) {
    top: 80%;
    left: -5%;
  }

  .p7-sec1 ul li:nth-child(3) {
    top: 55%;
    left: 80%;
  }

  .p7-sec1 .deco-line.n1 {
    top: 27%;
    left: 10%;
    width: 30%;
    -webkit-transform: rotate(105deg);
    transform: rotate(105deg);
  }

  .p7-sec1 .deco-line.n2 {
    top: 107%;
    left: 5%;
    width: 80%;
    -webkit-transform: rotate(-5.2deg);
    transform: rotate(-5.2deg);
  }

  .p7-sec1 .deco-line.n3 {
    top: 79%;
    right: 12%;
    width: 80%;
    -webkit-transform: rotate(11deg);
    transform: rotate(11deg);
  }

  .formBg .w50 {
    width: 50%;
  }

}

@media (max-width:1199px) {
  .p7-sec1 .g-container {
    max-width: 830px;
  }

  .p7-sec2 .bottom h3 {
    font-size: 2.25rem;
  }

  .p7-sec2 .top h3 {
    font-size: 1.625rem;
    letter-spacing: 0.015rem;
  }

  .p7-sec2 .bottom .list-wrap {
    padding: 15px;
  }

  .p7-sec2 .bottom .list-wrap>ul li .box {
    padding-left: 95px;
    min-height: 80px;
    font-size: 1rem;
  }

  .p7-sec2 .bottom .list-wrap>ul li .box:before {
    width: 80px;
    height: 80px;
  }
}

@media (max-width:991px) {
  .sales-list {
    width: 100%;
    border: 1px solid #e5e5e5;
    display: inline-block;
    height: 880px;
  }

  .map {
    width: 65.66%;
    height: 880px;
    margin-left: 1%;
    display: inline-block;
    display: none;
  }

  .p7-sec1 .img {
    width: 80%;
  }

  .p7-sec2 .top .left {
    font-size: 1.125rem;
  }
}

@media (max-width:839px) {
  .p7-sec1 .img {
    width: 90%;
    max-width: 570px;
    margin: 0 auto;
  }

  .p7-sec1 ul {
    text-align: center;
  }

  .p7-sec1 .deco-line {
    display: none !important
  }

  .p7-sec1 ul li:nth-child(3),
  .p7-sec1 ul li:nth-child(2),
  .p7-sec1 ul li:nth-child(1) {
    position: relative;
    top: auto;
    left: auto;
    max-width: 175px;
    width: calc(32% - 30px);
    margin: 0 5px;
    padding: 0;
  }

  .p7-sec2 .bottom h3 {
    text-align: center;
  }

  .p7-sec2 .bottom .list-wrap>ul {
    padding: 10px 20px;
  }

  .p7-sec2 .bottom .list-wrap>ul li {
    display: block;
    width: auto;
    padding: 15px 0;
  }

  .p7-sec2 .bottom .list-wrap>ul li:nth-child(2) {
    border-top: 1px dotted #ddd;
  }

  .p7-sec2 .bottom .list-wrap>ul li:nth-child(odd) {
    padding-right: 0;
  }

  .p7-sec2 .bottom .list-wrap>ul li:nth-child(even) {
    padding-left: 0;
    border-left: none;
  }
}

@media (max-width:767px) {
  .p7-sec2 .top {
    direction: ltr;
    margin: 0 auto 30px auto;
  }

  .p7-sec2 .top .right {
    display: block;
    position: relative;
    width: 90%;
    left: 50%;
    top: 0px;
    max-width: 350px;
    -webkit-transform: translate(-57%, 0);
    -ms-transform: translate(-57%, 0);
    -o-transform: translate(-57%, 0);
    transform: translate(-57%, 0);
  }

  .p7-sec2 .top .left {
    display: block;
    width: auto;
    padding: 0 10px;
    font-size: 1rem;
    text-align: center;

  }

  .p7-sec2 .top h3 {
    letter-spacing: 0;
    font-size: 1.41375rem;
    margin: 0 auto 15px auto;
  }

  .p7-sec2 .bottom h3 {
    letter-spacing: 0.05rem;
    font-size: 1.625rem;
    margin: 0 auto 15px auto;
  }

  .p7-sec2 .bottom h3:first-letter {
    letter-spacing: 0.05rem;
  }

  .p7-sec2 .bottom h3 strong {
    margin: 0 10px;
  }

  .p7-sec2 .bottom .list-wrap {
    padding: 10px;
  }

  .formBg .w50 {
    width: 100%;
  }
}

@media (max-width:639px) {

  .p7-sec1 ul li:nth-child(3),
  .p7-sec1 ul li:nth-child(2),
  .p7-sec1 ul li:nth-child(1) {
    width: 100%;
    margin: 0 auto 10px auto;
    max-width: none;
    padding: 10px;
    border-radius: 20px;
  }

  .p7-sec1 ul li h5 {
    font-size: 1.25rem;
  }

  .p7-sec1 ul li p br {
    display: none;
  }

  .p7-sec1 ul li .circle {
    position: relative;
    top: auto;
    left: auto;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
    margin: 0 auto;
  }

  .p7-sec1 ul li:after {
    padding-bottom: 0;
  }

  .p7-sec2 .bottom .list-wrap>ul li .box {
    padding-left: 65px;
    min-height: 60px;
  }

  .p7-sec2 .bottom .list-wrap>ul li .box:before {
    width: 55px;
    height: 55px;
  }
}


.m2-s8 {
  overflow: hidden;
  background: #fff;
}

.p8-sec1 {
  position: relative;
  z-index: 0;
  background: url(../images/p8-sec1-bg.jpg) no-repeat center bottom #fff;
  -webkit-background-size: 1920px auto;
  background-size: 1920px auto;
  padding-bottom: 100px;
  padding-top: 50px;
  text-align: center;
  min-height: 39%;
}

.p8-sec1:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 35%;
  width: 100%;
  z-index: 0;
  background: rgb(255, 255, 255);
  background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 70%);
}

.p8-sec1 .g-container {
  perspective: 1000px;
  z-index: 1;
  position: relative;
  padding-left: 15px;
  padding-right: 15px;
}

.p8-sec1 h3,
.p8-sec2 h3 {
  display: block;
  text-align: center;
  font-size: 2rem;
  letter-spacing: 0.25rem;
  margin: 0 0 20px 0;
  font-weight: 800;
  -webkit-text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff, 0px 1px 0 #fff, 0px -1px 0 #fff, -1px 0px 0 #fff, 1px 0px 0 #fff, 2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff, 0px 2px 0 #fff, 0px -2px 0 #fff, -2px 0px 0 #fff, 2px 0px 0 #fff, 1px 2px 0 #fff, -1px 2px 0 #fff, 1px -2px 0 #fff, -1px -2px 0 #fff, 2px 1px 0 #fff, -2px 1px 0 #fff, 2px -1px 0 #fff, -2px -1px 0 #fff, 3px 3px 4px rgba(0, 0, 0, 0.2);
  -moz-text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff, 0px 1px 0 #fff, 0px -1px 0 #fff, -1px 0px 0 #fff, 1px 0px 0 #fff, 2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff, 0px 2px 0 #fff, 0px -2px 0 #fff, -2px 0px 0 #fff, 2px 0px 0 #fff, 1px 2px 0 #fff, -1px 2px 0 #fff, 1px -2px 0 #fff, -1px -2px 0 #fff, 2px 1px 0 #fff, -2px 1px 0 #fff, 2px -1px 0 #fff, -2px -1px 0 #fff, 3px 3px 4px rgba(0, 0, 0, 0.2);
  text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff, 0px 1px 0 #fff, 0px -1px 0 #fff, -1px 0px 0 #fff, 1px 0px 0 #fff, 2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff, 0px 2px 0 #fff, 0px -2px 0 #fff, -2px 0px 0 #fff, 2px 0px 0 #fff, 1px 2px 0 #fff, -1px 2px 0 #fff, 1px -2px 0 #fff, -1px -2px 0 #fff, 2px 1px 0 #fff, -2px 1px 0 #fff, 2px -1px 0 #fff, -2px -1px 0 #fff, 3px 3px 4px rgba(0, 0, 0, 0.2);
  -moz-text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff, 0px 1px 0 #fff, 0px -1px 0 #fff, -1px 0px 0 #fff, 1px 0px 0 #fff, 2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff, 0px 2px 0 #fff, 0px -2px 0 #fff, -2px 0px 0 #fff, 2px 0px 0 #fff, 1px 2px 0 #fff, -1px 2px 0 #fff, 1px -2px 0 #fff, -1px -2px 0 #fff, 2px 1px 0 #fff, -2px 1px 0 #fff, 2px -1px 0 #fff, -2px -1px 0 #fff, 3px 3px 4px rgba(0, 0, 0, 0.2);
}

.p8-sec1 h3 {
  color: #61b71d;
}

.p8-sec2 h3 {
  color: #f8b500;
}

.p8-sec1 .img {
  position: relative;
  margin: 30px auto;
}

.p8-sec1 .img img {
  max-width: 100%;
  position: relative;
  z-index: 1;
}

.p8-sec1 .img:before {
  content: '';
  width: 105%;
  z-index: 0;
  padding-bottom: 41.14%;
  background: url(../images/p8-sec1-p-bg.png) no-repeat center center;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-background-size: contain;
  background-size: contain;
}

.p8-sec3 .share-slide .box .img {
  position: absolute;
  -webkit-clip-path: polygon(45.91% 0.78%, 49.66% 0.79%, 53.41% 0.95%, 57.15% 1.28%, 60.88% 1.80%, 64.57% 2.53%, 68.23% 3.51%, 71.83% 4.76%, 75.34% 6.31%, 78.74% 8.18%, 81.98% 10.39%, 85.04% 12.94%, 87.88% 15.82%, 90.48% 19.01%, 92.81% 22.46%, 94.89% 26.13%, 96.71% 29.99%, 98.29% 33.99%, 99.58% 38.13%, 100.42% 42.43%, 100.88% 46.81%, 101.03% 51.21%, 100.92% 55.62%, 100.58% 60.02%, 100.02% 64.38%, 99.25% 68.70%, 98.26% 72.96%, 97.04% 77.13%, 95.55% 81.18%, 93.74% 85.04%, 91.49% 88.56%, 88.63% 91.39%, 85.18% 93.09%, 81.51% 93.99%, 77.78% 94.50%, 74.05% 94.92%, 70.33% 95.51%, 66.67% 96.43%, 63.03% 97.50%, 59.39% 98.56%, 55.72% 99.49%, 52.02% 100.22%, 48.29% 100.67%, 44.54% 100.75%, 40.80% 100.41%, 37.11% 99.63%, 33.47% 98.55%, 29.90% 97.21%, 26.42% 95.57%, 23.06% 93.61%, 19.85% 91.33%, 16.83% 88.72%, 14.03% 85.78%, 11.48% 82.54%, 9.21% 79.03%, 7.23% 75.29%, 5.53% 71.36%, 4.10% 67.28%, 2.94% 63.09%, 2.01% 58.81%, 1.32% 54.47%, 1.04% 50.07%, 1.16% 45.67%, 1.64% 41.29%, 2.52% 37.00%, 3.87% 32.89%, 5.59% 28.97%, 7.60% 25.25%, 9.89% 21.76%, 12.43% 18.51%, 15.18% 15.51%, 18.12% 12.77%, 21.22% 10.29%, 24.47% 8.07%, 27.83% 6.12%, 31.29% 4.42%, 34.86% 3.10%, 38.57% 2.47%, 42.29% 1.90%, 45.91% 0.78%);
  clip-path: polygon(45.91% 0.78%, 49.66% 0.79%, 53.41% 0.95%, 57.15% 1.28%, 60.88% 1.80%, 64.57% 2.53%, 68.23% 3.51%, 71.83% 4.76%, 75.34% 6.31%, 78.74% 8.18%, 81.98% 10.39%, 85.04% 12.94%, 87.88% 15.82%, 90.48% 19.01%, 92.81% 22.46%, 94.89% 26.13%, 96.71% 29.99%, 98.29% 33.99%, 99.58% 38.13%, 100.42% 42.43%, 100.88% 46.81%, 101.03% 51.21%, 100.92% 55.62%, 100.58% 60.02%, 100.02% 64.38%, 99.25% 68.70%, 98.26% 72.96%, 97.04% 77.13%, 95.55% 81.18%, 93.74% 85.04%, 91.49% 88.56%, 88.63% 91.39%, 85.18% 93.09%, 81.51% 93.99%, 77.78% 94.50%, 74.05% 94.92%, 70.33% 95.51%, 66.67% 96.43%, 63.03% 97.50%, 59.39% 98.56%, 55.72% 99.49%, 52.02% 100.22%, 48.29% 100.67%, 44.54% 100.75%, 40.80% 100.41%, 37.11% 99.63%, 33.47% 98.55%, 29.90% 97.21%, 26.42% 95.57%, 23.06% 93.61%, 19.85% 91.33%, 16.83% 88.72%, 14.03% 85.78%, 11.48% 82.54%, 9.21% 79.03%, 7.23% 75.29%, 5.53% 71.36%, 4.10% 67.28%, 2.94% 63.09%, 2.01% 58.81%, 1.32% 54.47%, 1.04% 50.07%, 1.16% 45.67%, 1.64% 41.29%, 2.52% 37.00%, 3.87% 32.89%, 5.59% 28.97%, 7.60% 25.25%, 9.89% 21.76%, 12.43% 18.51%, 15.18% 15.51%, 18.12% 12.77%, 21.22% 10.29%, 24.47% 8.07%, 27.83% 6.12%, 31.29% 4.42%, 34.86% 3.10%, 38.57% 2.47%, 42.29% 1.90%, 45.91% 0.78%);
}

.p8-sec2 {
  position: relative;
  text-align: center;
  z-index: 1;
  background: url(../images/p8-sec2-bg.jpg) no-repeat center top #fff7e1;
}

.p8-sec2.no-sec3:before {
  display: none;
}

.p8-sec2.no-sec3 .g-container {
  padding-bottom: 60px;
}

.p8-sec2:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 1px;
  -webkit-transform: translate(0, -100%);
  -ms-transform: translate(0, -100%);
  -o-transform: translate(0, -100%);
  transform: translate(0, -100%);
  width: 100%;
  padding-bottom: 5.2%;
  background: url(../images/p8-sec2-top.png) repeat-x 0 0;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
}

.p8-sec2 .g-container {
  max-width: 1230px;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 60px;
  padding-bottom: 8%;
  overflow: hidden;
}

.p8-sec2 img {
  max-width: 100%;
}

.p8-sec2 .img-1 {
  margin: 30px auto 0 auto
}

.p8-sec2 .img-half {
  margin: 0 auto 20px auto;
  text-align: center;
}

.p8-sec2 .img-half img:nth-child(1) {
  float: left;
  width: 50%;
}

.p8-sec2 .img-half img:nth-child(2) {
  float: right;
  width: 50%;
}


.p8-sec3 {
  position: relative;
  text-align: center;
  z-index: 2;
  padding: 0;
  margin: 0;
  /* background: url(../images/p8-sec3-bg.jpg) repeat-y 0 0 #f7e6e3; */
  background-color: #FFF8DC;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
}

.p8-sec3 .g-container {
  width: 100% !important;
  max-width: 1530px;
  padding: 10px 15px 70px 15px;
}

.m2-s8 .p8-sec3:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 1px;
  -webkit-transform: translate(0, -100%);
  -ms-transform: translate(0, -100%);
  -o-transform: translate(0, -100%);
  transform: translate(0, -100%);
  width: 100%;
  padding-bottom: 5.3%;
  background: url(../images/p8-sec3-top.png) repeat-x 0 0;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
}

.p8-sec3 .share-slide {
  font-size: 0;
  text-align: center;
  padding-left: 50px;
  padding-right: 50px;
}

.p8-sec3 .share-slide .slick-arrow {
  width: 50px;
  height: 50px;
}

.p8-sec3 .share-slide .slick-arrow:before {
  content: '';
  display: inline-block;
  position: absolute;
  top: 50%;
  margin-top: -15px;
  width: 20px;
  height: 30px;
  background-image: url(../images/i-news-arrow.png);
  background-repeat: no-repeat;
  -webkit-background-size: auto 100%;
  background-size: auto 100%;
}

.p8-sec3 .share-slide .slick-arrow:hover:before {
  filter: brightness(1.05);
}

.p8-sec3 .share-slide .slick-prev {
  left: 0;
}

.p8-sec3 .share-slide .slick-prev:before {
  background-position: 0 0;
  left: 50%;
  margin-left: -12px;
}

.p8-sec3 .share-slide .slick-next {
  right: 0;
}

.p8-sec3 .share-slide .slick-next:before {
  background-position: 100% 0;
  right: 50%;
  margin-right: -12px;
}

.p8-sec3 .share-slide .box {
  padding: 0 20px;
  margin: 0 auto 15px auto;
  display: inline-block;
  vertical-align: top;
  text-align: center;
}

.p8-sec3 .share-slide .box a {
  display: block;
  margin: 0 auto;
  font-size: 1rem;
  color: #353535;
  max-width: 375px;
}

.p8-sec3 .share-slide .box .img {
  line-height: 0;
  position: relative;
  text-align: center;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  background-size: cover;
  margin: 0 auto 20px auto;
}

.p8-sec3 .share-slide .box .img:before {
  content: '';
  width: 100%;
  display: block;
  padding-bottom: 85%;
}

.p8-sec3 .share-slide .box .img img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.p8-sec3 .share-slide .box h4 {
  color: #e87392;
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  padding: 0;
  line-height: 1.5;
  -webkit-transition: color .15s;
  -o-transition: color .15s;
  transition: color .15s;
}

.p8-sec3 .share-slide .box p {
  margin: 20px auto 0 auto;
  font-size: 0.9411rem;
  line-height: 1.7;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  max-height: 3.2rem;
}

.p8-sec3 .share-slide .box a:hover h4 {
  color: #f73f70;
}

.p8-sec1.showWrap .img {
  opacity: 0;
  margin-top: 30px;
  -webkit-transition: margin 1s .25s, opacity 1s .25s;
  -o-transition: margin 1s .25s, opacity 1s .25s;
  transition: margin 1s .25s, opacity 1s .25s;
}

.p8-sec1.showWrap .paragraph-narrow,
.p8-sec1.showWrap h3,
.p8-sec2.showWrap .paragraph-narrow,
.p8-sec2.showWrap h3 {
  opacity: 0;
  -webkit-transform: translate(0, 30px);
  -ms-transform: translate(0, 30px);
  -o-transform: translate(0, 30px);
  transform: translate(0, 30px);
  -webkit-transition: transform 1s, opacity 1s;
  -o-transition: transform 1s, opacity 1s;
  transition: transform 1s, opacity 1s;
}

.p8-sec1.showWrap.shown .img {
  margin: 0;
  opacity: 1;
}

.p8-sec1.showWrap.shown .paragraph-narrow,
.p8-sec1.showWrap.shown h3,
.p8-sec2.showWrap.shown .paragraph-narrow,
.p8-sec2.showWrap.shown h3 {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}

.p8-sec2.showWrap .img-1 {
  opacity: 0;
  -webkit-transform: scale(1.02);
  -ms-transform: scale(1.02);
  -o-transform: scale(1.02);
  transform: scale(1.02);
  -webkit-transition: transform 1s .9s, opacity 1s .9s;
  -o-transition: transform 1s .7s, opacity 1s .7s;
  transition: transform 1s .7s, opacity 1s .7s;
}

.p8-sec2.showWrap.shown .img-1 {
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

.p8-sec2.showWrap .img-half img:nth-child(1) {
  opacity: 0;
  -webkit-transform: translate(-20px, 0);
  -ms-transform: translate(-20px, 0);
  -o-transform: translate(-20px, 0);
  transform: translate(-20px, 0);
  -webkit-transition: transform 1s .9s, opacity 1s .9s;
  -o-transition: transform 1s .9s, opacity 1s .9s;
  transition: transform 1s .9s, opacity 1s .9s;
}

.p8-sec2.showWrap .img-half img:nth-child(2) {
  opacity: 0;
  -webkit-transform: translate(20px, 0);
  -ms-transform: translate(20px, 0);
  -o-transform: translate(20px, 0);
  transform: translate(20px, 0);
  -webkit-transition: transform 1s .9s, opacity 1s .9s;
  -o-transition: transform 1s .9s, opacity 1s .9s;
  transition: transform 1s .9s, opacity 1s .9s;
}

.p8-sec2.showWrap.shown .img-half img:nth-child(1),
.p8-sec2.showWrap.shown .img-half img:nth-child(2) {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}

.mo {
  display: none;
}

@media (max-width:1399px) {
  .p8-sec1 {
    padding-bottom: 50px;
    padding-top: 30px;
    min-height: 20%;
  }

  .p8-sec2 .img-half {
    margin: 20px auto;
  }
}

@media (max-width:1199px) {

  .p8-sec3 .share-slide {
    padding-left: 40px;
    padding-right: 40px;
  }

  .p8-sec3 .share-slide .slick-arrow {
    width: 40px;
    height: 50px;
  }

  .p8-sec1 h3,
  .p8-sec2 h3 {
    font-size: 1.875rem;
    letter-spacing: 0.1rem;
  }
}

@media (max-width:991px) {
  .p8-sec1 {
    padding-bottom: 20px;
    -webkit-background-size: 200% auto;
    background-size: 200% auto;
  }

  .p8-sec1 h3,
  .p8-sec2 h3 {
    font-size: 1.5rem;
    letter-spacing: 0rem;
  }
}

@media (max-width:767px) {
  .trial_btn{
    display: inline-block;
    border: none;
    background-color: #ed819d;
    color: #fff;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    padding: 0.5rem 1rem;
    margin: 0.5rem 0rem 0.5rem 0;
    font-size: .9rem;
    white-space: nowrap;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    border-radius: 25px;
    position: relative;
    top: initial;
    right: initial;
  }
  .trial_btn_embar{
    position: relative;
    top: initial;
    right: initial;
    display: inline-block;
    border: none;
    background-color: #d8d8d8;
      color: #fff;
      cursor: no-drop;
    text-align: center;
    vertical-align: middle;
    padding: .5rem 1rem;
    margin: 0.5rem 0rem 0.5rem 0;
    font-size: .9rem;
    white-space: nowrap;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    border-radius: 25px;
  }

  .p8-sec1 h3,
  .p8-sec2 h3 {
    font-size: 1.375rem;
  }

  .p8-sec3 .g-container {
    padding-bottom: 30px;
  }

  .p8-sec3 .share-slide {
    padding: 0 20px;
    margin: 0;
  }

  .p8-sec3 .share-slide .box {
    padding: 0;
    margin: 0 0 30px 0;
    display: table;
    width: 100%;
    min-height: 100px;
    position: relative;
  }

  .p8-sec3 .share-slide .box:before {
    content: '';
    display: block;
    top: -15px;
    left: 0;
    height: 1px;
    width: 100%;
    position: absolute;
    background: rgb(243, 196, 202);
  }

  .p8-sec3 .share-slide .box:first-child:before {
    display: none;
  }

  .p8-sec3 .share-slide .box a {
    max-width: none;
    padding: 10px 0 10px 130px;
    width: 100%;
    text-align: left;
    display: table-cell;
  }

  .p8-sec3 .share-slide .box .img {
    width: 120px;
    position: absolute;
    left: 0;
    margin: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  .p8-sec3 .share-slide .box h3 {
    display: inline-block;
    vertical-align: middle;
  }

  .p8-sec3 .share-slide .box p {
    margin: 0;
    display: inline-block;
    vertical-align: middle;
  }

  .mo {
    display: block;
  }

  .r-class-img {
    padding: 15px;
    width: 100%;
    display: inline-block;
  }

  .r-class-img img {
    width: 100%;
  }

  .r-class-text {
    font-size: 18px;
    display: inline-block;
    width: 100%;
    padding: 15px;
    vertical-align: middle;
    text-align: justify;
  }

  .r-pd {
    margin: 30px 0;
  }
  .first_btn .g-btn{
    display: inline-block;
      border: none;
      background-image: none;
      background-repeat: no-repeat;
      background-color: #ed819d;
      background-position: 0 0;
      color: #fff;
      cursor: pointer;
      text-align: center;
      vertical-align: middle;
      padding: 0.5rem 1rem;
      margin: 0.5rem 0rem 0.5rem 0;
      font-size: .9rem;
      white-space: nowrap;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      -ms-border-radius: 4px;
      -o-border-radius: 4px;
      border-radius: 4px;
  }
  .first_activity .g-btn{
    display: inline-block;
      border: none;
      background-image: none;
      background-repeat: no-repeat;
      background-color: #ed819d;
      background-position: 0 0;
      color: #fff;
      cursor: pointer;
      text-align: center;
      vertical-align: middle;
      padding: 0.5rem 1rem;
      margin: 0.5rem 0rem 0.5rem 0;
      font-size: .9rem;
      white-space: nowrap;
      -webkit-border-radius: 25px;
      -moz-border-radius: 25px;
      -ms-border-radius: 25px;
      -o-border-radius: 25px;
      border-radius: 25px;
  }
}

@media (max-width:549px) {
  .mo {
    display: block;
  }

  .p8-sec1 .img {
    width: 120%;
    -webkit-transform: translateX(-12%);
    -ms-transform: translateX(-12%);
    -o-transform: translateX(-12%);
    transform: translateX(-12%);
  }

  .p8-sec2 .img-half img:nth-child(1),
  .p8-sec2 .img-half img:nth-child(2) {
    float: none;
    width: auto;
    display: block;
    margin: 0 auto;
    max-width: 350px
  }
}

/*