@charset "UTF-8";
@keyframes shine {
  to {
    background-position-x: -200%;
  }
}
lazy-img {
  display: block;
  width: 100%;
  height: 200px;
  background: #f0f0f0;
  position: relative;
  overflow: hidden;
}
lazy-img[ratio], lazy-img[ratio-mobile], lazy-img[ratio-desktop] {
  height: auto;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}
lazy-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: opacity 0.3s ease;
}
lazy-img[ratio] img, lazy-img[ratio-mobile] img, lazy-img[ratio-desktop] img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
lazy-img.loading {
  background: #eee;
  background: linear-gradient(90deg, #ececec 0%, #f5f5f5 50%, #ececec 100%);
  background-size: 200% 100%;
  animation: 1.5s shine linear infinite;
}
lazy-img.loading img {
  opacity: 0;
}
lazy-img.loaded img {
  opacity: 1;
}
lazy-img.error {
  background: #ffe6e6;
  border: 2px dashed #ff6b6b;
}
lazy-img.error::after {
  content: "載入失敗";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ff6b6b;
  font-size: 14px;
}

lazy-video {
  display: block;
  width: 100%;
  background: #000;
  position: relative;
  overflow: hidden;
}
lazy-video[ratio], lazy-video[ratio-mobile], lazy-video[ratio-desktop] {
  height: auto;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}
lazy-video video {
  width: 100%;
  display: block;
}
lazy-video[ratio] video, lazy-video[ratio-mobile] video, lazy-video[ratio-desktop] video {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
lazy-video.loading {
  background: #eee;
  background: linear-gradient(90deg, #ececec 0%, #f5f5f5 50%, #ececec 100%);
  background-size: 200% 100%;
  animation: 1.5s shine linear infinite;
}

lazy-background {
  display: block;
  min-height: 300px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  transition: opacity 0.3s ease;
  overflow: hidden;
}
lazy-background[ratio], lazy-background[ratio-mobile], lazy-background[ratio-desktop] {
  min-height: auto;
  height: auto;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}
lazy-background.loading {
  background: #eee;
  background: linear-gradient(90deg, #ececec 0%, #f5f5f5 50%, #ececec 100%);
  background-size: 200% 100%;
  animation: 1.5s shine linear infinite;
}
lazy-background.loaded {
  opacity: 1;
  animation: none;
}

lazy-iframe {
  display: block;
  width: 100%;
  height: 400px;
  background: #f0f0f0;
  position: relative;
  overflow: hidden;
}
lazy-iframe[ratio], lazy-iframe[ratio-mobile], lazy-iframe[ratio-desktop] {
  height: auto;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}
lazy-iframe iframe {
  width: 100%;
  height: 100%;
  border: none;
}
lazy-iframe[ratio] iframe, lazy-iframe[ratio-mobile] iframe, lazy-iframe[ratio-desktop] iframe {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}
lazy-iframe.loading {
  background: #eee;
  background: linear-gradient(90deg, #ececec 0%, #f5f5f5 50%, #ececec 100%);
  background-size: 200% 100%;
  animation: 1.5s shine linear infinite;
}

/*# sourceMappingURL=_c-lazyload.css.map */