@charset "UTF-8";
/*
 * 圖片顯示比例
 */
/* 1:1 Aspect Ratio */
.square-img {
  padding-top: 100%;
  width: 100%;
  position: relative;
  /* If you want text inside of it */
}
.square-img > * {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.square-img > * img {
  width: 100%;
}

.square-img-in {
  padding-top: 100%;
  width: 100%;
  position: relative;
  /* If you want text inside of it */
}
.square-img-in > * {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.square-img-in > * img {
  width: 100%;
}
.square-img-in a img {
  width: auto !important;
  height: 100% !important;
}

/* 2:1 Aspect Ratio */
.rectangle-img-2-1 {
  padding-top: 50%;
  width: 100%;
  position: relative;
  /* If you want text inside of it */
}
.rectangle-img-2-1 > * {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rectangle-img-2-1 > * img {
  width: 100%;
}

/* 3:2 Aspect Ratio */
.rectangle-img-3-2 {
  padding-top: 66%;
  width: 100%;
  position: relative;
  /* If you want text inside of it */
}
.rectangle-img-3-2 > * {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rectangle-img-3-2 > * img {
  width: 100%;
}

/* 16:19 Aspect Ratio */
.rectangle-img-16-9 {
  padding-top: 56.25%;
  width: 100%;
  position: relative;
  /* If you want text inside of it */
}
.rectangle-img-16-9 > * {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rectangle-img-16-9 > * img {
  width: 100%;
}

/* 16:10 Aspect Ratio */
.rectangle-img-16-10 {
  padding-top: 56.25%;
  width: 100%;
  position: relative;
  /* If you want text inside of it */
}
.rectangle-img-16-10 > * {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rectangle-img-16-10 > * img {
  width: 100%;
}

body {
  padding-top: 56px;
}

.web_edit img {
  max-width: 100%;
  height: auto;
}

.spec_img img {
  max-width: 100%;
  height: auto;
}
.spec_price {
  text-align: center;
}
.spec_price .original_price {
  color: #999999;
}
.spec_price .selling_price span {
  display: inline-block;
  height: 40px;
  font: bold 30px/30px Century Gothic;
  margin: 0 3px;
  color: #d62672;
}
.cart_list {
  display: table;
  width: 100%;
  border-bottom: 2px solid #dee2e6;
  margin-bottom: 1rem;
}
.cart_list_header, .cart_list_body, .cart_list_footer {
  display: table-row;
}
.cart_list_header > div, .cart_list_body > div, .cart_list_footer > div {
  text-align: center;
  vertical-align: middle;
  padding: 0.75rem;
  display: table-cell;
  border-top: 1px solid #dee2e6;
}
.cart_list_header div {
  vertical-align: bottom;
  font-weight: bold;
  border-bottom: 2px solid #dee2e6;
}

@media only screen and (max-width: 479px) {
  .cart_list {
    display: block;
  }
  .cart_list_header {
    display: none;
  }
  .cart_list_body, .cart_list_footer {
    display: block;
  }
  .cart_list_body > div, .cart_list_footer > div {
    padding: 0.25rem;
    border: none;
    display: block;
  }
  .cart_list_body {
    float: left;
    width: 100%;
    border-bottom: 1px solid #dee2e6;
  }
  .cart_list_body > div {
    float: left;
  }
  .cart_list_body .iteration {
    display: none;
  }
  .cart_list_body .cover {
    width: 100px;
  }
  .cart_list_body .prod_name, .cart_list_body .specification {
    text-align: left;
    width: calc(100% - 100px);
  }
  .cart_list_body .selling_price, .cart_list_body .qty {
    width: calc((100% - 100px) / 2);
  }
  .cart_list_body .selling_price {
    text-align: left !important;
  }
  .cart_list_body .qty {
    width: calc((100% - 100px) / 2);
  }
  .cart_list_body .sub_total {
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    width: calc((100% - 100px) / 3 * 2);
  }
  .cart_list_body .del {
    width: calc((100% - 100px) / 3);
  }
  .cart_list_footer {
    float: left;
    width: 100%;
    padding-left: 40%;
    text-align: right;
  }
  .cart_list_footer > div {
    float: left;
  }
}