
  .container-a1{
      width: 800px;
      max-width: 800px;
      margin: 30px auto;
    }
    .caption-style-1{
      list-style-type: none;
      margin: 0px;
      padding: 0px;
      
    }

    .caption-style-1 .col-12x p{
      font-size: 15px;
    }

    .caption-style-1 li{
      float: left;
      padding: 0px;
      position: relative;
      overflow: hidden;
      padding: 0 0 5% 0;
    }

    .caption-style-1 li:hover .caption{
      opacity: 1;

    }
    .caption-style-1 img{
      margin: 0px;
      padding: 0px;
      float: left;
      z-index: 4;
    }


    .caption-style-1 .caption{
      display: none;
      cursor: pointer;
      position: absolute;
      opacity: 0;
      float: left;  
      width:100%;
      -webkit-transition:all 0.45s ease-in-out;
      -moz-transition:all 0.45s ease-in-out;
      -o-transition:all 0.45s ease-in-out;
      -ms-transition:all 0.45s ease-in-out;
      transition:all 0.45s ease-in-out;
	 /* display:table;*/
	  height:100%;
	  vertical-align:middle;

    }
    .caption-style-1 .blur{
      background-color: rgba(0,0,0,0.75);
      /*height: 100%;
      width: 100%;*/
      width: 100vw;
    height: 100vw;
      float: left;
      z-index: 5;
      position: absolute;
      top:0;
    }

    .caption-style-1 .caption-text h1{
      text-transform: uppercase;
      font-size: 24px;
    }
    .caption-style-1 .caption-text{
      z-index: 10;
      color: #fff;
     /* position: absolute;*/
      /*width: 100%;
      float:left;
      padding: 15% 38%;
      height: 100%;*/
      /*text-align: center;*/
      /*top:30px;*/
	 /*  display:table-cell;
	  vertical-align:middle;*/
    
    text-align: center;
      padding: 0% 0%;
    display:inline-block;
    vertical-align:middle;
    width: 70px;
    height: auto;
    margin: 20% auto;
    float: none;

    }
/*--extra set--*/
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}


/*.web2{ background:url(../image/index/b2.jpg); }
.web3{ background: #fff;}
.web4{ background:url(../image/index/v1.jpg); }
.web5{ background:url(../image/index/contact.jpg);height:100%; }
*/



/*寵愛會員計畫*/
.member{ 
  background:url(../image/page/member.jpg); 
  /*height:100%;
  min-height: 100%;*/
}
.memberinfo{
  text-align: center;
  color: #fff;
  font-size: 18px;
  margin: 25% 0;
  line-height: 40px;
}

.member .contentword{
  max-width: 400px;
}
.member{ 
  -moz-background-size:cover;
  -webkit-background-size:cover;
  -o-background-size:cover;
  background-size:cover;
}

/*獨家活動*/
.uniqe{
  margin: 4% 0;
  padding: 0 5%;
}
.uniqe .col-6x{
  padding: 0 1%;
  margin: 1% 0;
}

/*送到心坎裡*/
.gift{
  margin: 3% 0;
  padding: 0 5%;
}
.box{
  padding: 0 3%;
  margin: 3% 0;
}
.giftpic{
  /*border:1px solid #939394;
  width: 90%;
  /*margin: 0 auto 3% auto;*/
  /*float: left;
  margin: 0 5% 3% 5%;*/
}
.formom{
   bottom: 0;
  position: absolute;
}
 
.formom .forwhom{
  text-align: center;
  background: #eab8a6;
  color: #fff;
  font-weight: bold;
  padding: 3% 0;

} 
.forwhom{
  text-align: center;
  background: #666666;
  color: #fff;
  font-weight: bold;
  padding: 3.65% 0;
  z-index: 13;
}
/*產品LIST*/
.products{
  margin: 0 0 3% 0;
}
.proinfo{
  padding: 0 .5% 0% .5%;
  /*background: #f00;*/
  text-align: center;
  font-weight: bold;
  margin: 0.5% 0% 0.5% 0%;
  width:auto;
}
.propic{
  border:1px solid #939394;
  width: 90%;
  /*margin: 0 auto 3% auto;*/
  float: left;
  margin: 0 5% 3% 5%;
}
.hover{
  padding:0 0 3% 0%;
  background: #ff0;
}
.protop{
  margin: 1% 0;
}

.allnums{
  float: right;
  margin: 2% 0 1% 0;
}
.pages{
 /* border-top:1px solid #717071;
  border-left:1px solid #717071;
  border-right:1px solid #717071;
  border-bottom:1px solid #717071;*/
  border-radius: 5px;
  /*background: #717071;*/
  max-width: 160px;
  float: right;
}
.pagenum{
  max-width: 50px;
}
.num{
  padding: 12% 2%;
  text-align: center;
  background: #fff;
  font-size:18px; 
  font-weight: bold;
  border:1px solid #717071; 
  text-align: center;
  color: #717071;
}
.now {
  background: #717071;
  color: #fff;
}
.pages .col-4x:last-child .num{
  /*border-right:0px;*/
}
.more{
  margin: 13% 0 15% 0;
  z-index:51;
}
.icon{
  font-size:40px; 
  border: 1px solid #fff;
  border-radius:11px;
  padding: 5px 0%;
  color: #fff;
  margin: 0 0 10% 0;
  text-align: center;
}
.more a{
  color:#fff;
}
.more a:hover,.more a:hover .icon{
  color:#eab8a6;
  border-color:#eab8a6;
}
/*產品介紹*/
.topcontent{
  /*background:#f00;*/
}
.proarea{
  margin: 5% 0 16% 0;
}
.proname h1{
  font-weight: bold;
  margin: 0 0 2% 0
}
.proname h3{
  color:#666666;
  font-weight: bold;
}
.procontent{/*下方產品介紹*/
  border-top:8px solid #f2f2f2;
  padding: 8% 0 5% 0;
  text-align: center;
  margin: 0% 0 0 0;
}
.procontent img{/*下方產品介紹*/
  /*float: left;*/
  margin: -0.8% 0 0 0;
}
.price{
  margin: 7% 0;
  color: #666;
  font-weight: bold;
  padding: 0 0 0 2%;
}
.goshop{/*購物去*/
  padding: 2.3% 4%;
  background:#eab8a6;
  color: #fff;
  font-weight: bold;
  font-size: 24px;
  text-align: center;
  border-radius:3px;
}
.goshop img{
  vertical-align: bottom;
}
.goshop span{
  letter-spacing: -6px;
  margin: 0 0 0 8px;
}
.goshop:hover{
  background: #000;
  color:#fff;
}
.prointro{/*右側簡述*/
  color: #666666;
  line-height: 26px;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 1px;
  margin: 0 0 5% 0;
  padding: 0 0 3% 0;
  border-bottom:1px solid #b3b3b3;
}
.introp::before{
  content: ".";
  font-weight: bold;
  font-size: 28px;
  float: left;
  height: 33px;
  width:15px;
  line-height: 13px;
  text-align: left;

}
.activeSlide{/*當前縮圖*/
 border:1px solid #939394;
}


/*登入/註冊*/
.login{
  text-align: center;
  margin:3% 0; 
}

.login span{
  float: right;
  font-size: 14px;
  margin:-4% 0 0 0;
}
.login span a{
  color: #808080;
}
.login span a:hover{
  color: #000;
}
.firstbuy{
  padding: 5% 8%;
  margin: 5% 0;
}
.firstbuy h2,.firstbuy h3,.firstbuy p,.firstbuy h4{
  text-align: center;
  margin: 2% 0 0 0 ;
}

.firstbuy p{
  text-align: left;
}

.putin{
  padding: 4% 2%;
}

/*FB按鈕*/
.fbpush{
	margin:22px 0 0 0;
}
@media only screen and (min-width: 600px) {
  .introp::before{
  content: ".";
  height: 25px;
  width:15px;
}

.proinfo{
  margin: 3% 0% 3% 0%;
  width:50%;
}

.caption-style-1 .caption-text{
    
    margin: 12% auto;
  

    }
 
}

@media (min-width: 768px) {
  

}
@media (min-width: 900px) {

  /*送到心坎裡*/
  .box{
    margin: 0% 0;
  }

  

}
@media (min-width: 1000px) {

.icon{
  font-size:30px; 
}
.proinfo{
  margin: .5% 0% .5% 0%;
  width:24.99%;
}
.caption-style-1 .caption-text{
    width:64px;
    margin: 20% auto;

    }

}

@media (min-width: 1200px) {

.icon{
  font-size:40px; 
}
  .caption-style-1 .caption{
      display: block;
      cursor: pointer;
      position: absolute;
      opacity: 0;
      float: left;  
      width:100%;
      -webkit-transition:all 0.45s ease-in-out;
      -moz-transition:all 0.45s ease-in-out;
      -o-transition:all 0.45s ease-in-out;
      -ms-transition:all 0.45s ease-in-out;
      transition:all 0.45s ease-in-out;
    display:table;
    height:100%;
    vertical-align:middle;

    }
.caption-style-1 .caption-text{
    width:70px;
    margin: 18% auto;

    }

}

@media (min-width: 1500px) {

  .caption-style-1 .col-12x p{
      font-size: 16px;
    }

    .caption-style-1 .caption-text{
    width:70px;
    margin: 20% auto;

    }
   
}


