@charset "UTF-8";
/*
 * CSS Document
 * ==========================================================================
 * 版權所有 2019 鉅潞科技網頁設計公司，並保留所有權利。
 * 網站地址: http://www.grnet.com.tw
 * ==========================================================================
 * $Date: 2019-07 $
 * $Subhead: 套件相關 $
 * */
/* keyframe */
@-webkit-keyframes ani_loader {
  0% {
    -webkit-transform: scale(1) skewX(-19deg);
            transform: scale(1) skewX(-19deg);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: scale(0.6) skewX(-19deg);
            transform: scale(0.6) skewX(-19deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1) skewX(-19deg);
            transform: scale(1) skewX(-19deg);
    opacity: 0.8;
  }
}

@keyframes ani_loader {
  0% {
    -webkit-transform: scale(1) skewX(-19deg);
            transform: scale(1) skewX(-19deg);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: scale(0.6) skewX(-19deg);
            transform: scale(0.6) skewX(-19deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1) skewX(-19deg);
            transform: scale(1) skewX(-19deg);
    opacity: 0.8;
  }
}

@-webkit-keyframes ani_fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes ani_fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* PLUGIN: Slick Controller */
.slick-dots {
  position: absolute;
  list-style: none;
  left: 50%;
  bottom: 30px;
  text-align: center;
  padding: 0;
  margin: 0;
  line-height: 1;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}

.slick-dots li {
  display: inline-block;
  padding: 0 4px;
}

.slick-dots li button {
  outline: none;
  position: relative;
  width: 10px;
  height: 10px;
  margin: 0;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
  border: 1px solid #fff;
  font-size: 0;
  line-height: 0;
  background: #fff;
  border-radius: 20px;
  -webkit-transition: background .25s, border .25s, -webkit-transform .25s;
  transition: background .25s, border .25s, -webkit-transform .25s;
  -o-transition: background .25s, border .25s, transform .25s;
  transition: background .25s, border .25s, transform .25s;
  transition: background .25s, border .25s, transform .25s, -webkit-transform .25s;
}

.slick-dots li button:hover {
  background: #ddd;
  -webkit-transform: scale(1.05);
      -ms-transform: scale(1.05);
          transform: scale(1.05);
}

.slick-dots li.slick-active button {
  background: #0081d1;
}

.slick-dots li.slick-active button:hover {
  background: #0081d1;
}

.slick-arrow {
  position: absolute;
  z-index: 1;
  height: 100%;
  width: 80px;
  display: block;
  position: absolute;
  line-height: 0;
  font-size: 0;
  cursor: pointer;
  color: transparent;
  background: none;
  top: 0;
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  -webkit-transition: margin .2s;
  -o-transition: margin .2s;
  transition: margin .2s;
}

.slick-arrow:before {
  content: "";
  width: 34px;
  height: 34px;
  opacity: 0.6;
  position: absolute;
  top: 50%;
  border-color: #ffffff;
  border-style: solid;
  margin-top: -17px;
  display: inline-block;
  -webkit-transition: opacity .2s;
  -o-transition: opacity .2s;
  transition: opacity .2s;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.slick-arrow.slick-disabled {
  cursor: not-allowed;
  opacity: 0.1;
}

.slick-prev {
  left: 0;
}

.slick-prev:before {
  left: 50%;
  margin-left: -17px;
  border-width: 3px 0 0 3px;
}

.slick-next {
  right: 0;
}

.slick-next:before {
  right: 50%;
  margin-right: -17px;
  border-width: 0 3px 3px 0;
}

.pc .slick-prev {
  margin-left: 5px;
}

.pc .slick-prev:not(.slick-disabled):hover, .pc .slick-prev:not(.slick-disabled):active {
  margin-left: 0;
}

.pc .slick-prev:not(.slick-disabled):hover:before, .pc .slick-prev:not(.slick-disabled):active:before {
  opacity: 1;
}

.pc .slick-next {
  margin-right: 5px;
}

.pc .slick-next:not(.slick-disabled):hover, .pc .slick-next:not(.slick-disabled):active {
  margin-right: 0;
}

.pc .slick-next:not(.slick-disabled):hover:before, .pc .slick-next:not(.slick-disabled):active:before {
  opacity: 1;
}

@media (max-width: 991px) {
  .slick-arrow {
    width: 50px;
  }
  .slick-arrow:before {
    margin-top: -15px;
    width: 30px;
    height: 30px;
  }
  .slick-prev:before {
    margin-left: -15px;
  }
  .slick-next:before {
    margin-right: -15px;
  }
}

/* PLUGIN: Infinite loading Animation */
.loader-eff {
  height: 25px;
  width: 100px;
  text-align: center;
  padding: 0;
  margin: 20px auto;
}

.loader-eff div {
  width: 10px;
  height: 20px;
  background: #aaa;
  display: inline-block;
  vertical-align: middle;
  margin: 0 2px;
  -webkit-transform: scaleY(0) skewX(-19deg);
      -ms-transform: scaleY(0) skewX(-19deg);
          transform: scaleY(0) skewX(-19deg);
  -webkit-animation: ani_loader .35s linear infinite;
          animation: ani_loader .35s linear infinite;
}

.loader-eff div:nth-child(2) {
  -webkit-animation-delay: .04s;
          animation-delay: .04s;
}

.loader-eff div:nth-child(3) {
  -webkit-animation-delay: .08s;
          animation-delay: .08s;
}

.loader-eff div:nth-child(4) {
  -webkit-animation-delay: .12s;
          animation-delay: .12s;
}

/* PLUGIN: Infinite loading Message */
.page-load-status {
  display: none;
  font-size: 1rem;
  position: relative;
  max-width: 300px;
  margin: 0 auto;
  z-index: 100;
  text-align: center;
  color: #666;
}

.btn-loadmore {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 150px;
  height: 50px;
  line-height: 48px;
  font-weight: 400;
  font-size: 1rem;
  text-align: center;
  white-space: nowrap;
  font-family: 'Inter', 'Microsoft JhengHei UI', 'Microsoft JhengHei', 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  border-style: solid;
  border-width: 1px;
  -webkit-transition: background .2s, color .2s, border .2s;
  -o-transition: background .2s, color .2s, border .2s;
  transition: background .2s, color .2s, border .2s;
  border-color: #ddd;
  background-color: transparent;
  color: #666;
  overflow: hidden;
  width: 100%;
  max-width: 300px;
  height: 45px;
  line-height: 43px;
  margin: 20px auto;
  display: block;
}

.btn-loadmore:before {
  content: '';
  position: absolute;
  top: -5px;
  bottom: -5px;
  width: 100%;
  display: block;
  background: white;
  background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%);
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.2)), to(rgba(255, 255, 255, 0)));
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%);
  background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);
  -webkit-transform: scaleX(0) translate(0, 0);
      -ms-transform: scaleX(0) translate(0, 0);
          transform: scaleX(0) translate(0, 0);
}

.btn-loadmore span {
  color: inherit;
}

.btn-loadmorea {
  color: #666;
}

.btn-loadmorea:hover {
  color: #fff;
}

.btn-loadmore:hover {
  color: #fff;
  background: #666;
  border-color: #666;
}

.btn-loadmore:hover:before {
  -webkit-animation: ani_btn_hover .4s linear;
          animation: ani_btn_hover .4s linear;
}

.btn-loadmore:hover:after {
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}