@charset "utf-8";

/*
 * CSS Document
 * ==========================================================================
 * 版權所有 2019 鉅潞科技網頁設計公司，並保留所有權利。
 * 網站地址: http://www.grnet.com.tw
 * ==========================================================================
 * $Date: 2019-03 $
*/
/* PLUGIN: Index load */
.pace { -webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.pace.pace-inactive .pace-progress { -webkit-animation: ani_pace 1s both; -o-animation: ani_pace 1s both; animation: ani_pace 1s both; }
.pace .pace-progress { position: fixed; z-index: 1500; top: 50%; left: 0; height: 2rem; width: 100%; -webkit-transfarm: translate3d(0, -80px, 0) !important; -ms-transform: translate3d(0, -80px, 0) !important; transform: translate3d(0, -80px, 0) !important; }
.pace .pace-progress:after { display: block; position: relative; margin: 15px auto 0 auto; text-align: center; content: attr(data-progress-text); font-family: 'Kalam', 'Arial', sans-serif; font-weight: 100; font-size: 2rem; line-height: 1; color: #a61956; }
.pace .pace-progress .load-logo { position: relative; z-index: 10; overflow: hidden; display: block; margin: 0 auto 10px auto; padding: 0; z-index: 1; width: 110px; height: 90px; font-size: 0; }
.pace .pace-progress .load-logo div { display: block; margin: 0 auto; background-image: url(../images/logo.png); background-repeat: no-repeat; -moz-background-size: auto 300%; -o-background-size: auto 300%; -webkit-background-size: auto 300%; background-size: auto 300%; }
.pace .pace-progress .load-logo div:before { content: ""; display: block; width: 100%; position: relative; }
.pace .pace-progress .load-logo div:nth-of-type(1) { width: 86%; background-position: 0 0; }
.pace .pace-progress .load-logo div:nth-of-type(1):before { padding-bottom: 52.222%; }
.pace .pace-progress .load-logo div:nth-of-type(2) { width: 100%; background-position: 100% 50%; }
.pace .pace-progress .load-logo div:nth-of-type(2):before { padding-bottom: 38.2111%; }
.index:before { content: ''; position: fixed; z-index: 999; top: 0; right: 0; left: 0; background: #fff; height: 100%; opacity: 1; -webkit-transition: height 1s .2s, opacity 1s .2s; -o-transition: height 1s .2s, opacity 1s .2s; transition: height 1s .2s, opacity 1s .2s; }
.pace-done.index:before { height: 0; opacity: 0; }
@-webkit-keyframes ani_pace {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@-moz-keyframes ani_pace {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes ani_pace {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* PLUGIN: Infinite loading */
.loader-eff { height: 60px; width: 100px; text-align: center; padding: 1em; margin: 0 auto; }
.loader-eff div { width: 5px; height: 100%; background: #EBD8AC; display: inline-block; vertical-align: middle; margin: 0 4px; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); transform: scaleY(0.5); -webkit-animation-name: loader; -o-animation-name: loader; animation-name: loader; -webkit-animation-duration: 0.6s; -o-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; }
.loader-eff div:nth-of-type(1) { -webkit-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; }
.loader-eff div:nth-of-type(2) { -webkit-animation-delay: 0.15s; -o-animation-delay: 0.15s; animation-delay: 0.15s; }
.loader-eff div:nth-of-type(3) { -webkit-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; }
@-webkit-keyframes loader {
  0% { -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); -o-transform: scaleY(0.5); transform: scaleY(0.5); }
  50% { -webkit-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); }
  100% { -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); -o-transform: scaleY(0.5); transform: scaleY(0.5); }
}
@-moz-keyframes loader {
  0% { -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); -o-transform: scaleY(0.5); transform: scaleY(0.5); }
  50% { -webkit-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); }
  100% { -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); -o-transform: scaleY(0.5); transform: scaleY(0.5); }
}
@keyframes loader {
  0% { -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); -o-transform: scaleY(0.5); transform: scaleY(0.5); }
  50% { -webkit-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); }
  100% { -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); -o-transform: scaleY(0.5); transform: scaleY(0.5); }
}

.page-load-status { display: none; position: relative; z-index: 100; padding-top: 20px; text-align: center; color: #333; }
.page-load-status .infinite-scroll-last, .page-load-status .infinite-scroll-error { text-align: center; border-radius: 5px; color: #333; font-size: 1rem; opacity: 0.5; }

/* MagnificPopup Zoom */
.mfp-zoom .mfp-container { opacity: 0; -webkit-transition: -webkit-transform .3s ease-in-out, opacity .3s; -moz-transition: -moz-transform .3s ease-in-out, opacity .3s; -o-transition: -o-transform .3s ease-in-out, opacity .3s; transition: transform .3s ease-in-out, opacity .3s; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); }
.mfp-zoom.mfp-ready .mfp-container { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
.mfp-zoom.mfp-removing .mfp-container { opacity: 0; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); }
.popup-style { background: rgba(0, 0, 0, 0.1); top: 0; }
.popup-style .mfp-content { width: 100%; max-width: 1030px; border: 1px solid #222; background: #fff; padding: 50px; margin: 50px auto; }
.popup-style .mfp-close { display: inline-block; height: 50px; width: 50px; z-index: 5; cursor: pointer; position: absolute; top: 20px; right: 20px; font-size: 0; opacity: 1; }
.popup-style .mfp-close:before, .popup-style .mfp-close:after { content: ""; display: inline-block; pointer-events: none; height: 2px; width: 48px; position: absolute; top: 50%; left: 0; background: #222; -moz-transform-origin: center center; -ms-transform-origin: center center; -webkit-transform-origin: center center; transform-origin: center center; -moz-transition: background 0.25s; -o-transition: background 0.25s; -webkit-transition: background 0.25s; transition: background 0.25s; }
.popup-style .mfp-close:before { margin-top: -1px; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
.popup-style .mfp-close:after { margin-top: -1px; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.popup-style .mfp-close:hover { color: #666; }
.popup-style .mfp-close:hover span:before, .popup-style .mfp-close:hover span:after { background: #666; }
.popup-style .mfp-close:focus { color: #666; }
@media (max-width:991px) {
  .popup-style .mfp-content { padding: 30px; margin: 10px auto; }
  .popup-style .mfp-close { height: 35px; width: 35px; }
  .popup-style .mfp-close:before, .popup-style .mfp-close:after { width: 34px; }
}