@charset "utf-8";

/*
 * CSS Document
 * ==========================================================================
 * 版權所有 2020 鉅潞科技網頁設計公司，並保留所有權利。
 * 網站地址: http://www.grnet.com.tw
 * ==========================================================================
 * $Author: rain $
 * $Date: 2020-07-06. $
 * **請注意: 本樣式檔處理使用套件的客製樣式，避免因套件程式延遲載入造成樣式跑版。
*/

/* Slider */
.slick-list { z-index: 1; }
.slick-slide a { outline: none; color: #000 }

/*dots*/
.slick-dots { position: absolute; width: 100%; text-align: center; bottom: 50px; margin: 0; padding: 0; z-index: 2; font-size: 0;}
.slick-dots li { display: inline-block; vertical-align: middle; }
.slick-dots li button { width: 20px; height: 20px; padding: 0;  position: relative; border: 0; display: inline-block; vertical-align: middle; background: transparent; }
.slick-dots li button:before{ content: ''; display: block; width: 5px; height: 5px; border-radius: 5px; background: #fff; border: 1px solid #fff; position: absolute; left: 50%; top: 50%;transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); }
.slick-dots li.slick-active button:before { border-radius: 10px; width: 10px; height: 10px; border: 1px solid #fff; background: #fff; }
@media (max-width:991px) {
  .slick-dots { bottom: 20px; }
  .slick-dots li button {width: 48px; height: 48px; }
}

/* 頁碼&左右箭頭共用 */
.slider+.page-box { text-align: right; line-height: 23px; font-size: 1.125rem; letter-spacing: 2px; width: calc(90% - 80px); margin: 20px auto; }
.slider+.page-box span {  font-family: 'Arial'; display: inline-block; font-size: 0.8rem; vertical-align: bottom; }
.slider+.page-box span.current { font-size: 2rem; border-bottom: 1px solid #000; margin-bottom: 10px; margin: 0 5px 10px 5px; padding-bottom: 10px; font-weight: bold; }
.slider .slick-arrow { position: absolute; outline: none; text-indent: -9999px; z-index: 9; cursor: pointer; padding: 0; top: 50%; margin-top: -27.5px; border: 0; width: 55px; height: 55px; background: #000; -moz-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); -o-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); -webkit-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); }
.slider .slick-arrow:after { content: ''; display: block; width: 15px; height: 15px; border-color: #fff; border-width: 1px 1px 0 0; border-style: solid; position: absolute; }
.slider .slick-arrow.slick-prev { left: 0; background: #000; }
.slider .slick-arrow.slick-next { right: 0; background: #000; }
.slider .slick-arrow.slick-prev:after { left: 21px; -webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); top: 20px; }
.slider .slick-arrow.slick-next:after { right: 20px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 20px; }
@media (min-width:992px) {
  .slider .slick-arrow:hover { }
}
@media (max-width:1199px) {
  .slider+.page-box { width: calc(100% - 60px); }
  .slider+.page-box span.current { font-size: 1.5rem; }
}



/* Index Banner */
.i-banner .slick-dots li { opacity: 0 }
.i-banner .slick-arrow.slick-prev { top: unset; bottom: -65px; left: calc(100% - 12%); margin-top: 0; background: transparent; }
.i-banner .slick-arrow.slick-next { right: 0; margin-top: 0; bottom: -65px; top: unset; background: transparent; }
.i-banner .slick-arrow:after { border-color: #000 }
@media (max-width:1199px) {
  .i-banner .slick-arrow.slick-prev { left: calc(100% - 18%) }
}
@media (max-width: 767px){ }
@media (max-width:640px) {
  .i-banner.slider+.page-box { margin: 10px auto 5px; width: calc(100% - 85px); }
    .i-banner.slider+.page-box span.current { font-size: 1.1rem; padding: 0; }

  .i-banner .slick-arrow{ width: 40px; height: 40px; }
  .i-banner .slick-arrow:after{ width: 8px; height: 8px; }
  .i-banner .slick-arrow.slick-prev { bottom: -40px; left: unset; right: 100px;}
  .i-banner .slick-arrow.slick-next { bottom: -40px; }
}

#section2 .work-list.slider .slick-arrow { background: #333; }
#section2 .work-list.slider .slick-arrow.slick-prev { top: calc(40% - 55px - 1px); left: calc(740px - 15px) }
#section2 .work-list.slider .slick-arrow.slick-next { right: auto; top: 40%; left: calc(740px - 15px) }
@media only screen and (min-width:992px) {
  #section2 .work-list.slider .slick-arrow { background: #000; }
}
@media only screen and (max-width:1366px) {
  #section2 .work-list.slider .slick-arrow.slick-prev { left: calc(100% - 55px) }
  #section2 .work-list.slider .slick-arrow.slick-next { left: calc(100% - 55px) }
}
@media only screen and (max-width:1199px) {
  #section2 .work-list.slider .slick-arrow.slick-prev { left: auto; right: 0px; }
  #section2 .work-list.slider .slick-arrow.slick-next { left: auto; right: 0px; }
}
@media only screen and (max-width:991px) {
  #section2 .work-list.slider .slick-arrow{ margin-top: -48px; width: 48px; height: 48px; margin-top: 0 }
   #section2 .work-list.slider .slick-arrow.slick-prev:after{ top: 15px }
 #section2 .work-list.slider .slick-arrow.slick-next:after{ top: 15px }
  #section2 .work-list.slider .slick-arrow.slick-prev { left: -15px; right: auto; }
  #section2 .work-list.slider .slick-arrow.slick-next { left: auto; right: -15px; top: calc(40% - 55px - 1px); }
}
@media only screen and (max-width: 767px) {
#section2 .work-list.slider .slick-arrow.slick-prev,
#section2 .work-list.slider .slick-arrow.slick-next { top:25%; margin-top: 0 }
}

#section4 .pic-slider .slick-arrow:after{ border-color: #333; }
@media only screen and (min-width:992px) {
#section4 .pic-slider .slick-arrow:hover:after{ border-color: #fff; }
}


#section5 .gallery-slick .slick-arrow { background: transparent }
#section5 .gallery-slick .slick-prev { left: -55px }
#section5 .gallery-slick .slick-next { right: -55px }
#section5 .gallery-slick .slick-dots { bottom: -25px }

#section5 .gallery-slick .slick-arrow:after{ border-color: #333; }
#section5 .gallery-slick li button:before { border: 1px solid #222; background: #222; }

@media only screen and (max-width:991px) {
 #section5 .gallery-slick .slick-dots li button{ width: 30px; height: 20px; }
}

@media only screen and (max-width: 640px) {
#section5 .gallery-slick .slick-prev { left: 0px }
#section5 .gallery-slick .slick-next { right: 0px }
}
/* Works slick */
.works-slick.slider .slick-dots { bottom: -30px; }
.works-slick.slider .slick-dots li {  }
.works-slick.slider .slick-dots li button:before { width: 8px; height: 8px; border: 1px solid #666; }
.works-slick.slider .slick-dots li.slick-active button:before  { background: #000;}

@media only screen and (max-width: 767px) {
.works-slick.slider .slick-arrow{ width: 40px; height: 40px; border-radius: 40px; margin-top: -20px; background: rgba(0, 0, 0, 0.5); }
.works-slick.slider  .slick-prev { left: 10px }
.works-slick.slider  .slick-next { right: 10px }
.works-slick.slider  .slick-arrow.slick-prev:after { left: 15px; top: 13px; }
.works-slick.slider  .slick-arrow.slick-next:after { right: 15px;top: 13px;}
}



/* Artists List */
.work-slider { }
.work-slider .slider .slick-arrow { width: 30px; height: 30px; background: transparent; margin-top: -15px; }
.work-slider .slider .slick-arrow:after { width: 10px; height: 10px; border-color: #686868; }
.work-slider .slider .slick-arrow.slick-prev { left: -30px; }
.work-slider .slider .slick-arrow.slick-next { right: -30px; }
.work-slider .slider .slick-arrow.slick-prev:after { left: 10px; top: 10px; }
.work-slider .slider .slick-arrow.slick-next:after { right: 10px; top: 10px; }
@media only screen and (max-width:1199px) {
  .work-slider .slider .slick-arrow { background: rgba(0, 0, 0, 0.65); }
  .work-slider .slider .slick-arrow:hover { background: rgba(0, 0, 0, 1); }
  .work-slider .slider .slick-arrow:after { border-color: #ccc; }
  .work-slider .slider .slick-arrow.slick-prev { left: 0px; }
  .work-slider .slider .slick-arrow.slick-next { right: 0px; }
}

/* Scenario Slick */
.scenario-wrap .thumbs-slick { }
.scenario-wrap .thumbs-slick .slick-arrow { background: transparent; width: 40px; height: 40px; margin-top: -30px }
.scenario-wrap .thumbs-slick .slick-arrow:after { border-color: #000; width: 8px; height: 8px; }
@media (max-width:991px) {
  .scenario-wrap .thumbs-slick .slick-arrow { width: 30px; height: 30px; }
  .scenario-wrap .thumbs-slick .slick-arrow.slick-prev:after { left: 5px }
  .scenario-wrap .thumbs-slick .slick-arrow.slick-next:after { right: 5px }
}

/* Recommend List */
.recommend-list .slick-dots li { display: none; }
.recommend-list .slick-dots { margin: 0; display: none; }
.recommend-list +.page-box { margin: 0; right: 0; bottom: 0; float: right; text-align: center; width: 140px; }
.recommend-list +.page-box span,
.recommend-list +.page-box span.current { font-family: "Spectral", "NotoSansTC", "Microsoft JhengHei", sans-serif; font-size: 1rem; border: 0; padding: 0; margin: 0 5px; font-weight: normal; }
.recommend-list .slick-arrow { width: 30px; height: 1px; top: calc(100% + 64px) }
.recommend-list .slick-arrow:after { border-color: #000; width: 7px; height: 7px; }
.recommend-list .slick-arrow.slick-prev:after { left: 0; top: -3px; }
.recommend-list .slick-arrow.slick-next:after { right: 0; top: -3px; }
.recommend-list .slick-arrow.slick-prev { left: calc(100% - 150px); }
.recommend-list .slick-arrow.slick-next { right: 10px; }
@media (max-width:1199px) {
  .recommend-list +.page-box { margin-top: 10px; }
}
@media (max-width:767px) {
  .recommend-list +.page-box { margin-top: 20px }
}

.logo-slick.slider .slick-arrow{ width: 40px; height: 40px; margin-top: -20px; background: rgba(0, 0, 0, 0.8) }
.logo-slick.slider .slick-arrow:after {  width: 10px; height: 10px; }
.logo-slick.slider .slick-arrow.slick-prev:after { left: 17px; top: 15px; }
.logo-slick.slider .slick-arrow.slick-next:after { right: 17px; top: 15px; }
.logo-slick.slider .slick-dots{ bottom: 0px; }
.logo-slick.slider .slick-dots li button{ width: 30px }
.logo-slick.slider .slick-dots li button:before { background: #666;  border: 1px solid #666;}
@media (max-width: 991px) {
}
/*無限載入 loading */
.btn-loadmore { display: block; margin: 0 auto; }
.btn-loadmore:before { display: block; margin: 0 auto; width: 1px; height: 58px; position: absolute; left: 50%; top: -70px; background: #8d8d8d; -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; }
.btn-loadmore:after { content: ''; display: block; width: 1px; height: 14px; position: absolute; left: calc(50% - 4px); background: #8d8d8d; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; top: -23px; }
.page-load-status { position: fixed; top: 50%; left: 50%; margin-left: -90px; display: none; z-index: 100; width: 180px; padding: 0px; line-height: 50px; text-align: center; color: #666; }
.page-load-status .infinite-scroll-last,
.page-load-status .infinite-scroll-error { color: #fff; text-align: center; border-radius: 5px; font-size: 0.95rem; background: rgba(0, 0, 0, 0.5);}
.page-load-status.fadeout { -webkit-animation: fade-out-bottom 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: fade-out-bottom 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }
.loader-ellips { font-size: 20px; position: relative; width: 75px; height: 1em; margin: 10px auto; }
.loader-ellips .loader-ellips__dot { display: block; width: 15px; height: 15px; border-radius: 0.5em; background: #666; position: absolute; animation-duration: 0.5s; animation-timing-function: ease; animation-iteration-count: infinite; }
.loader-ellips .loader-ellips__dot:nth-child(1),
.loader-ellips .loader-ellips__dot:nth-child(2) { left: 0; }
.loader-ellips .loader-ellips__dot:nth-child(3) { left: 1.5em; }
.loader-ellips .loader-ellips__dot:nth-child(4) { left: 3em; }
.loader-ellips .loader-ellips__dot:nth-child(1) { animation-name: reveal; }
.loader-ellips .loader-ellips__dot:nth-child(2),
.loader-ellips .loader-ellips__dot:nth-child(3) { animation-name: slide; }
.loader-ellips .loader-ellips__dot:nth-child(4) { animation-name: reveal; animation-direction: reverse; }
@media only screen and (min-width:992px) {
  .btn-loadmore:hover:before { background: #8d8d8d; left: 50%; width: 1px; height: 30px; top: 70px; }
  .btn-loadmore:hover:after { top: 90px; height: 10px; }
}

@media only screen and (max-width: 767px) {
  .btn-loadmore:before { height: 38px; top: -50px; }
.btn-loadmore{ margin: 25px auto }
}

@-webkit-keyframes reveal {
  from { -moz-transform: scale(0.001); -ms-transform: scale(0.001); -webkit-transform: scale(0.001); transform: scale(0.001); }
  to { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); }
}
@-moz-keyframes reveal {
  from { -moz-transform: scale(0.001); -ms-transform: scale(0.001); -webkit-transform: scale(0.001); transform: scale(0.001); }
  to { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes reveal {
  from { -moz-transform: scale(0.001); -ms-transform: scale(0.001); -webkit-transform: scale(0.001); transform: scale(0.001); }
  to { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); }
}
@-webkit-keyframes slide {
  to { -moz-transform: translateX(1.5em); -ms-transform: translateX(1.5em); -webkit-transform: translateX(1.5em); transform: translateX(1.5em); }
}
@-moz-keyframes slide {
  to { -moz-transform: translateX(1.5em); -ms-transform: translateX(1.5em); -webkit-transform: translateX(1.5em); transform: translateX(1.5em); }
}
@keyframes slide {
  to { -moz-transform: translateX(1.5em); -ms-transform: translateX(1.5em); -webkit-transform: translateX(1.5em); transform: translateX(1.5em); }
}


/* magnificPopup */

.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
  opacity: 0;
  -webkit-backface-visibility: hidden;
  /* ideally, transition speed should match zoom duration */
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
    opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
    opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
  opacity: 0;
}

.mfp-close,.mfp-iframe-holder .mfp-close{  width: 48px!important; height: 48px; top: -48px!important; font-size: 0!important; display: block; color: #fff; top:0; right: 0!important; font-size: 0; opacity: 1; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
.mfp-close:before,
.mfp-close:after{ content: ''; position: absolute; display: block; background: #fff; width: 1px; height: 44px; left: 24px; top: 3px; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
.mfp-close:before{ transform: rotate(-45deg); }
.mfp-close:after{ transform: rotate(45deg); }

.mfp-close:hover{ background: #25b1a8 }
.mfp-close:hover:before{ transform: rotate(45deg); }
.mfp-close:hover:after{ transform: rotate(135deg); }