@charset "UTF-8";
/*
  For Shop Style
  By Shijie 
*/
body {
  color: #000;
  background-color: #fff;
  width: 100vw;
  height: 100vh;
}

.page-header {
  position: relative;
  background: #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
}
.page-header.sticky {
  position: sticky;
  top: 0;
  z-index: 1020;
}

.page-body {
  position: relative;
  margin-top: 30px;
  min-height: 50vh;
  margin-bottom: 30px;
}
.page-body img {
  max-width: 100%;
}

.page-footer {
  position: relative;
  background: #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
}

.top-0 {
  top: 0;
}

.bottom-0 {
  bottom: 0;
}

.right-0 {
  right: 0;
}

.left-0 {
  left: 0;
}

.w-32px {
  width: 32px;
}

.w-64px {
  width: 64px;
}

.w-128px {
  width: 128px;
}

.w-256px {
  width: 256px;
}

/* hover effect */
.hover-float {
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hover-float:hover, .hover-float:focus, .hover-float:active {
  -webkit-transform: translateY(-4px);
  transform: translateY(-4px);
}

/* Google Material-ICON for sizing the icon. */
.material-icons.md-18 {
  font-size: 18 px;
}
.material-icons.md-36 {
  font-size: 36 px;
}
.material-icons.md-48 {
  font-size: 48 px;
}

/* Rules for using icons as black on a light background. */
.material-icons.md-dark {
  color: rgba(0, 0, 0, 0.5);
}

.material-icons.md-dark.md-inactive {
  color: rgba(0, 0, 0, 0.3);
}

/* Rules for using icons as white on a dark background. */
.material-icons.md-light {
  color: rgb(255, 255, 255);
}

.material-icons.md-light.md-inactive {
  color: rgba(255, 255, 255, 0.3);
}

/* Bootstrap 4 d-flex justify-content-center align-items-center */
.d-f-c-c {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Bootstrap 4 d-flex align-items-center */
.d-f--c {
  display: flex !important;
  align-items: center !important;
}

/* Bootstrap 4 d-flex justify-content-center */
.d-f-c {
  display: flex !important;
  justify-content: center !important;
}

/* Bootstrap 4 d-flex justify-content-between */
.d-f-b {
  display: flex !important;
  justify-content: space-between !important;
}

/* Bootstrap 4 d-flex justify-content-end */
.d-f-e {
  display: flex !important;
  justify-content: end !important;
}

.d-f-b-c {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

/* Define Font Size */
.display-1 {
  font-size: 6rem;
}

.display-2 {
  font-size: 5.5rem;
}

.display-3 {
  font-size: 4.5rem;
}

.display-4 {
  font-size: 3.5rem;
}

.display-5 {
  font-size: 2.5rem;
}

.display-6 {
  font-size: 2rem;
}

.display-7 {
  font-size: 1.75rem;
}

.display-8 {
  font-size: 1.5rem;
}

.display-9 {
  font-size: 1.25rem;
}

.display-10 {
  font-size: 1rem;
}

.text-bold {
  font-weight: bold;
}

.rwd-display-1 {
  font-size: 4rem;
}

.rwd-display-2 {
  font-size: 3rem;
}

.rwd-display-3 {
  font-size: 2.25rem;
}

.rwd-display-4 {
  font-size: 1.75rem;
}

.rwd-display-5 {
  font-size: 1.25rem;
}

.rwd-display-6 {
  font-size: 0.8rem;
}

/* Max Ex Sm size */
@media screen and (max-width: 576px) {
  .rwd-display-1 {
    font-size: 3rem;
  }

  .rwd-display-2 {
    font-size: 2.5rem;
  }

  .rwd-display-3 {
    font-size: 2.25rem;
  }

  .rwd-display-4 {
    font-size: 1.75rem;
  }

  .rwd-display-5 {
    font-size: 1.25rem;
  }

  .rwd-display-6 {
    font-size: 0.8rem;
  }
}
/* Image */
img {
  position: relative;
}
img:after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  content: "";
}

.image-wrapper img,
.image-wrapper video {
  object-fit: cover;
  object-position: center center;
  max-width: 100%;
}

[class*=image-aspect-ratio-] .image-wrapper {
  position: relative;
  display: block;
  width: 100%;
  padding: 100% 0 0;
  overflow: hidden;
}

[class*=image-aspect-ratio-] .image-wrapper::before {
  display: block;
  content: "";
}

[class*=image-aspect-ratio-] .image-wrapper img,
[class*=image-aspect-ratio-] .image-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.image-aspect-ratio-1x1 .image-wrapper {
  padding-top: 100%;
}

.image-aspect-ratio-2x1 .image-wrapper {
  padding-top: 50%;
}

.image-aspect-ratio-3x1 .image-wrapper {
  padding-top: 33.3333333333%;
}

.image-aspect-ratio-4x1 .image-wrapper {
  padding-top: 25%;
}

.image-aspect-ratio-4x3 .image-wrapper {
  padding-top: 75%;
}

.image-aspect-ratio-16x9 .image-wrapper {
  padding-top: 56.25%;
}

.image-aspect-ratio-21x9 .image-wrapper {
  padding-top: 42.8571428571%;
}

.image-aspect-ratio-1x2 .image-wrapper {
  padding-top: 200%;
}

.image-aspect-ratio-3x4 .image-wrapper {
  padding-top: 133.3333333333%;
}

.image-aspect-ratio-9x16 .image-wrapper {
  padding-top: 177.7777777778%;
}

img.fit-cover {
  width: 100%;
  object-fit: cover;
  object-position: center center;
}
img.fit-contain {
  width: 100%;
  object-fit: cover;
  object-position: center center;
}
img.image-1x1 {
  aspect-ratio: 1/1;
}
img.image-2x1 {
  aspect-ratio: 2/1;
}
img.image-3x1 {
  aspect-ratio: 3/1;
}
img.image-4x1 {
  aspect-ratio: 4/1;
}
img.image-4x3 {
  aspect-ratio: 4/3;
}
img.image-16x9 {
  aspect-ratio: 16/9;
}
img.image-21x9 {
  aspect-ratio: 21/9;
}
img.image-1x2 {
  aspect-ratio: 1/2;
}
img.image-3x4 {
  aspect-ratio: 3/4;
}
img.image-9x16 {
  aspect-ratio: 9/16;
}

@media (orientation: portrait) {
  .image-aspect-ratio-1x1-portrait .image-wrapper {
    padding-top: 100% !important;
  }

  .image-aspect-ratio-4x3-portrait .image-wrapper {
    padding-top: 75% !important;
  }

  .image-aspect-ratio-3x4-portrait .image-wrapper {
    padding-top: 133.3333333333% !important;
  }

  .image-aspect-ratio-9x16-portrait .image-wrapper {
    padding-top: 177.7777777778% !important;
  }
}
/* Bootstrap 4 Define Carousel */
.carousel {
  position: relative;
}
.carousel .text-title {
  font-size: 2rem;
  text-shadow: 0 3px 5px #555;
}
.carousel .carousel-indicators {
  margin-bottom: 0;
}
.carousel .carousel-control-next,
.carousel .carousel-control-prev {
  position: absolute;
  top: calc(50% - 20px);
  padding: 10px;
  width: 40px;
  height: 40px;
  z-index: 1;
  display: flex;
  color: #fff;
  text-align: center;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.carousel .carousel-control-prev {
  left: 0;
}
.carousel .carousel-control-next {
  right: 0;
}
.carousel:hover .carousel-control-next, .carousel:hover .carousel-control-prev {
  background: rgba(0, 0, 0, 0.5);
  opacity: 1;
}

/* Summerynote Editor Style */
.note-float-left {
  margin-right: 10px;
}

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

/* For bootbox Style
.modal-content {
  border: 5px solid #000 !important;
  border-radius: 0 !important;
}
*/
/* Pagination links */
.js-pagination a {
  color: black;
  background-color: lightgray;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color 0.3s;
}
.js-pagination a:focus, .js-pagination a:hover, .js-pagination a.active {
  background-color: dodgerblue;
  color: white;
}

[data-component] {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
[data-component] .bg-ligth {
  background: #f8f9fa;
  color: #000;
}
[data-component] .bg-dark {
  background: #343a40;
  color: #fff;
}

[data-component=image], [data-component=carousel] {
  padding-top: 0;
  padding-bottom: 0;
}

.image-text-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 20px 20px 25px 20px;
}

.text-box {
  position: relative;
}
.text-box a.text-link-btn {
  border: 2px solid rgba(0, 0, 0, 0.7);
  border-radius: 20;
  background: #000;
  color: #fff;
}

a.text-link-btn {
  padding: 8px 24px;
  border: 2px solid rgba(0, 0, 0, 0.7);
  border-radius: 20;
  background: #000;
  color: #fff;
}
a.text-link-btn:hover {
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 0 3px #fff;
}
a.text-link-btn:empty {
  display: none;
}

.image-container a.picture-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.image-container a.picture-link[href=""] {
  display: none;
}
.image-container a.picture-link:hover {
  cursor: pointer;
}

.simple-list {
  color: #000;
  background: #fff;
}
.simple-list .simple-list-item:focus, .simple-list .simple-list-item:hover {
  background: #f8f9fa;
  color: #000;
  box-shadow: 0 0 5px #ccc;
}

[data-text-align=left] {
  text-align: left;
}

[data-text-align=center] {
  text-align: center;
}

[data-text-align=right] {
  text-align: right;
}

[data-box-align=left] {
  justify-content: flex-start;
  align-items: center;
}

[data-box-align=center] {
  justify-content: center;
  align-items: center;
}

[data-box-align=right] {
  justify-content: flex-end;
  align-items: center;
}

[data-box-align=top-left] {
  justify-content: flex-start;
  align-items: flex-start;
}

[data-box-align=top-center] {
  justify-content: center;
  align-items: flex-start;
}

[data-box-align=top-right] {
  justify-content: flex-end;
  align-items: flex-start;
}

[data-box-align=bottom-left] {
  justify-content: flex-start;
  align-items: flex-end;
}

[data-box-align=bottom-center] {
  justify-content: center;
  align-items: flex-end;
}

[data-box-align=bottom-right] {
  justify-content: flex-end;
  align-items: flex-end;
}

[data-text-color=black] {
  color: #000;
}

[data-text-color=white] {
  color: #fff;
}

[data-text-color=dark] {
  color: #333;
  text-shadow: 0 0 3px #fff;
}

[data-text-color=light] {
  color: #fafafa;
  text-shadow: 0 0 3px #000;
}

/*Grid-View For Article And Goods */
.grid-view .grid-item .card a:hover {
  text-decoration: none;
}
.grid-view .grid-item .card .card-body .text-box {
  padding: 8px;
}
.grid-view .grid-item .card .rank-box {
  padding: 4px 8px;
}

/* Rank */
.rank-box {
  font-size: 16px;
}
.rank-box .star-rate {
  color: #ffd200;
  text-shadow: 0 0 3px #fff;
}
.rank-box .star-rate[rank="1"]:before {
  content: "★";
}
.rank-box .star-rate[rank="2"]:before {
  content: "★★";
}
.rank-box .star-rate[rank="3"]:before {
  content: "★★★";
}
.rank-box .star-rate[rank="4"]:before {
  content: "★★★★";
}
.rank-box .star-rate[rank="5"]:before {
  content: "★★★★★";
}

/* Max Ex Sm size */
@media screen and (max-width: 576px) {
  [data-component] {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  [data-component=image],
[data-component=carousel] {
    padding-top: 0;
    padding-bottom: 0;
  }

  .grid-view.goods-list .grid-item .card .card-body {
    position: relative;
    display: flex;
  }
  .grid-view.goods-list .grid-item .card .card-body .image-container {
    width: 120px;
  }
  .grid-view.goods-list .grid-item .card .card-body .text-box {
    width: calc(100% - 120px);
    padding: 4px 8px !important;
  }
  .grid-view.goods-list .grid-item .card .card-body .rank-box {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    padding: 2px 10px 2px 24px !important;
    font-size: 12px;
    text-shadow: 0 0 1px #fff;
  }
}
/* Max $md size */
@media screen and (max-width: 768px) {
  [data-component] {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  [data-component=image],
[data-component=carousel] {
    padding-top: 0;
    padding-bottom: 0;
  }

  .grid-view.article-list .grid-item .card {
    box-shadow: initial !important;
  }
  .grid-view.article-list .grid-item .card .card-body {
    position: relative !important;
    display: flex !important;
  }
  .grid-view.article-list .grid-item .card .card-body .image-container {
    width: 120px !important;
    padding-top: 10px;
  }
  .grid-view.article-list .grid-item .card .card-body .text-box {
    width: calc(100% - 120px) !important;
    padding: 4px 8px !important;
  }
}
/* bs 4 btn default disabled */
.btn.disabled, .btn:disabled {
  opacity: 0.3;
  background-color: gray;
  color: #fff;
}

/*# sourceMappingURL=shop.css.map */