@charset "UTF-8";

html,body{
  margin:0;
  padding:0;
  height:100%;
  /* font-size:16px; */
}
body{
  background:#fff;
}
img{
  display:block;
  border:none;
}
.min{display:none;}
.ossian{position: relative;}


/*
 * ---------------------------------------------------------------------
 * 版頭的區塊
 * ---------------------------------------------------------------------
*/
header.big-title{
  background:#ff94a6;
}
header.big-title h1{
  position: relative;
  display:block;
  margin:0;
  padding:0;
  width:100%;
  height:816px;
}
header.big-title h1 span{
  display:none;
}
header.big-title h1 img{
  width:100%;
  margin:auto;
  display:none;
}



/*
 * ---------------------------------------------------------------------
 * 三組贈品
 * ---------------------------------------------------------------------
 */
.goodgifts{
  position: absolute;
  top:530px;
  z-index:99999;
  width:100%;
}
.goodgifts .container{

}
ul.gifts, ul.gifts li{
  margin:0;
  padding:0;
  list-style: none;
}
ul.gifts li{
  text-align:center;
}
ul.gifts li a{
  position: relative;
  display:block;
  margin:5px;
  background:#ffb9c9;
  color:#1d1311;
  padding-bottom: 20px;
}
ul.gifts li a::before{
  content:'';
  position: absolute;
  display:inline-block;
  margin:0 auto;
  top:-20px;
  left:0;
  width:100%;
  height:56px;
  background:url(../images/201809_xander_to_school/zhu.png) no-repeat top center;
}
ul.gifts li a::after{
  content:'';
  position: absolute;
  bottom:-42px;
  left:0;
  width:100%;
  height:42px;
  background:url(../images/201809_xander_to_school/shadow.png) no-repeat top center;
}
.gift-img{
  margin:0 auto;
  width:200px;
}
.gift{
  position: absolute;
  top:0;
  left:0;
  background:url(../images/201809_xander_to_school/gift.png) no-repeat;
  width:92px;
  height:92px;

}

/*
 * ---------------------------------------------------------------------
 * 商品列表的區塊
 * ---------------------------------------------------------------------
*/
.addLine{
  border:none;
  margin:0 auto;
}
.this-month{
  padding:2em 1em 1.25em;
}

.this-month img{
  margin:0 auto;
  width:auto;
  max-width:100%;
}

.products-list{background:#ff94a6;}
ul.all-products, ul.all-products li{
  margin:0;
  padding:0;
  list-style: none;
}
ul.all-products{
  display:block;
  padding:0;
  /* background:#dddfe9;
  padding:30px; */
}
ul.all-products li{
  display:inline-block;
}
ul.all-products li a{
  position: relative;
  display:block;
  overflow:hidden;
  margin:5px;
  color:#3d3d3c;
  background:#fff;
  box-shadow: 0 0 3px rgba(0,0,0,0.1);
  text-decoration: none;
  -webkit-transition:all .3s;
     -moz-transition:all .3s;
      -ms-transition:all .3s;
          transition:all .3s;
  -webkit-transform:translateY(0px);
     -moz-transform:translateY(0px);
      -ms-transform:translateY(0px);
      transform:translateY(0px);
}
ul.all-products li a:hover{
  color:#3d3d3c;
  -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
     -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
      -ms-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
          box-shadow: 0 3px 3px rgba(0,0,0,0.2);
  -webkit-transform:translateY(-8px);
     -moz-transform:translateY(-8px);
      -ms-transform:translateY(-8px);
      transform:translateY(-8px);
}
ul.all-products li a img{
  width:100%;
}
.product-count{
  text-align:center;
  padding:1em 0;
  background:#8decdb;
  color:#000;
  font-weight:bold;
  font-size:18px;
}
dl.product-description, dl.product-description dt, dl.product-description dd{
  margin:0;
  padding:0;
}
dl.product-description{
  background:#f2f2f2;
  color:#000;
}
dl.product-description dt{
  padding:10px 10px 0 10px;
  text-align:center;
  font-size:20px;
}
dl.product-description dd{
  padding:10px;
}
.old-price, .new-price{
  display:inline-block;
  width:100%;
  text-align:center;
  color:#333;
  font-size:18px;
}
.new-price em{
  font-style:normal;
  font-weight:bold;
  font-size:1.5em;
  font-family:'Arial Black', Helvetica, sans-serif;
  color:#ff301a;
}

ul.two-banners, ul.two-banners li{
  display:block;
  margin:0;
  padding:0;
  list-style: none;
}
ul.two-banners li{
  width:100%;
  text-align:center;
}
ul.two-banners li a{
  display:inline-block;
}
.two-banners img{
  margin:1em auto 0;
  width:auto;
  max-width:100%;
}

/*
 * ---------------------------------------------------------------------
 * 活動辦法的區塊
 * ---------------------------------------------------------------------
*/

.footer-act{
  margin:0 auto 3em;
  padding:2em;
}
.footer-act header{
  text-align:center;
  font-weight:bold;
  font-size:36px;
  color:#ff0024;
}
ul.import-list{
  margin-top:1em;
}
ul.import-list li{
  color:#ff0024;
}
ol.act-list li{
  list-style-type: lower-alpha;
}
.actLine{
  border-radius:3em;
  background:#ff94a6;
  display:inline-block;
  margin:1em 0.35em 1em 0;
  padding:0.5em 0.75em  0.35em;
  color:#fff;
  font-size:0.75em;
}



/*
 *
 * RWD 調整
 *
*/
@media screen and (min-width:1501px){
  header.big-title h1{background:url(../images/201809_xander_to_school/kv.jpg) no-repeat top center;}
}
@media screen and (max-width:1500px){
  header.big-title h1{background:url(../images/201809_xander_to_school/kv-desktop.jpg) no-repeat top center;}
  .min{display:none;}
  .desktop{display:block;}
  .max{display:none;
}
@media screen and (max-width:1200px){
  .min{display:block;}
  .desktop{display:none;}
  .max{display:none;
}
@media screen and (max-width:990px){
  .products-list{padding-top:250px;}
}
@media screen and (max-width:800px){
  header.big-title h1{background:url(../images/201809_xander_to_school/kv-min.jpg) no-repeat top center;}
  .goodgifts .container{width:100%;}
  .addLine{width:100%; max-width:100%;}
}
@media screen and (max-width:767px){
  .products-list{padding-top:810px;}
}