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

.slick-list{
  z-index: 1;
}
.slick-list .item{
  vertical-align: top;
}
.slick-slide a{
  outline: none;
}


.slick-arrow{ position: absolute; z-index: 2; top: 50%; padding: 0; width: 27px; height: 47px; margin-top: -26px; background: none; border: none; font-size: 0;}
.slick-arrow.slick-prev{left: 0;}
.slick-arrow.slick-next{right: 0;}
.slick-arrow.slick-prev{ background: url('../images/left.png') center center no-repeat;}
.slick-arrow.slick-next{background: url('../images/right.png') center center no-repeat;}





/*banner*/
.banner-slick{position: relative;}
.banner-slick .slick-dots{ position: absolute; left: 50%; margin: 0; padding: 0; z-index: 2; font-size: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); bottom: 100px;}
.banner-slick .slick-dots li{display: inline-block; margin: 13px 10px;}
.banner-slick .slick-dots li button{width: 11px; height: 11px; padding: 0; background: transparent; border: none; position: relative; }
.banner-slick .slick-dots li button:after{content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-shadow: 0 0 0 3px #ffffff; border-radius: 50%; -webkit-transform: scale(1); transform: scale(1);-webkit-transition: transform 0.35s; transition: transform 0.35s; }
.banner-slick .slick-dots li button:before{  content: ""; position: absolute; width: 12px; height: 11px; left: 50%; top: 50%; margin: -6px 0 0 -6px; border-radius: 50%; background: #567fd0;}
.banner-slick .slick-dots li.slick-active button:before{background: #16b888; }
.banner-slick .slick-dots li.slick-active button:after{-webkit-transform: scale(1); transform: scale(1);}
@media (max-width: 991px) { 
  .banner-slick .slick-dots{ bottom: 0; }
}









/*partners*/
.partners .list .slick-dots{ margin: 20px 0; padding: 0; text-align: center; width: 100%; z-index: 2; font-size: 0;}
.partners .list .slick-dots li{display: inline-block; vertical-align: middle; padding: 0 8px; }
.partners .list .slick-dots li button{width: 12px; height: 12px; padding: 0; border-radius: 50%; background: transparent; border: 1px solid #ff5b37; position: relative; }
.partners .list .slick-dots li button:after{content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; right: -1px; border-radius: 50%; background: #ff5b37; -webkit-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: transform 0.35s; -o-transition: transform 0.35s; transition: transform 0.35s;}
.partners .list .slick-dots li.slick-active button:after{-webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }

/*story-slick*/
.story-slick .slick-arrow{ opacity: 0.5; position: absolute; z-index: 2; top: 50%; padding: 0; width: 50px; height: 50px; margin-top: -50px; background: none; border: none; font-size: 0;}
.story-slick .slick-arrow:before{content: ""; position: absolute; top: 50%; left: 50%; width: 50%; height: 50%; display: block; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: -25% 65%; -moz-transform-origin: -25% 65%; -ms-transform-origin: -25% 65%; -o-transform-origin: -25% 65%; transform-origin: -25% 65%; }
.story-slick .slick-arrow.slick-prev{left: 0;}
.story-slick .slick-arrow.slick-next{right: 0;}
.story-slick .slick-arrow.slick-prev:before{border-top: 2px solid #fff; border-left: 2px solid #fff;}
.story-slick .slick-arrow.slick-next:before{border-bottom: 2px solid #fff; border-right: 2px solid #fff;}
.story-slick .slick-dots{ margin: 20px 0; padding: 0; text-align: center; width: 100%; z-index: 2; font-size: 0;}
.story-slick .slick-dots li{display: inline-block; vertical-align: middle; padding: 0 8px; }
.story-slick .slick-dots li button{width: 12px; height: 12px; padding: 0; border-radius: 50%; background: transparent; border: 1px solid #fff; position: relative; }
.story-slick .slick-dots li button:after{content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; right: -1px; border-radius: 50%; background: #fff; -webkit-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: transform 0.35s; -o-transition: transform 0.35s; transition: transform 0.35s;}
.story-slick .slick-dots li.slick-active button:after{-webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
@media (min-width: 1025px) { 
  .story-slick .slick-arrow:hover{opacity: 1;}
}

/*success-slick*/
.success-slick .slick-arrow{ position: absolute; z-index: 2; top: 50%; padding: 0; width: 50px; height: 50px; margin-top: -25px; background: none; border: none; font-size: 0;}
.success-slick .slick-arrow:before{content: ""; position: absolute; top: 50%; left: 50%; width: 50%; height: 50%; display: block; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: -25% 65%; -moz-transform-origin: -25% 65%; -ms-transform-origin: -25% 65%; -o-transform-origin: -25% 65%; transform-origin: -25% 65%; }
.success-slick .slick-arrow.slick-prev{left: -50px;}
.success-slick .slick-arrow.slick-next{right: -50px;}
.success-slick .slick-arrow.slick-prev:before{border-top: 2px solid #aaa; border-left: 2px solid #aaa;}
.success-slick .slick-arrow.slick-next:before{border-bottom: 2px solid #aaa; border-right: 2px solid #aaa;}
@media (max-width: 991px) { 
  .success-slick .slick-arrow.slick-prev{left: 0px;}
  .success-slick .slick-arrow.slick-next{right: 0px;}
}

/*magnificpopup*/
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
  opacity: 0;
  -webkit-backface-visibility: hidden;
  -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-figure{position: relative; background: #fff;}
.mfp-figure .mfp-close{position: absolute; top: 0; right: 0; width: 40px; height: 40px; padding: 0; text-align: center; background: rgba(0, 0, 0, 0.5); color: #fff;}
.mfp-figure img.mfp-img{padding: 0;}