@charset "utf-8";

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

/*dots*/
.slick-dots { position: absolute; left: 50%; bottom: 80px; margin: 0; padding: 0; z-index: 2; font-size: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); text-align: center; }
.slick-dots li { display: inline-block; width: 31px; height: 31px; border-radius: 100%; padding: 11px; }
.slick-dots li { width: 31px; height: 31px; border-radius: 100%; }
.slick-dots li button { width: 7px; height: 7px; padding: 0; background: transparent; position: relative; background: #ffffff; transition: all .3s ease; -o-transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; display: block; line-height: 7px; margin: 0; border-radius: 7px; border: 0; }
.slick-dots li.slick-active button{ background: #F00; }
@media (max-width:991px) {
	.slick-dots { bottom: 20px; width: 100%; }
}

/* 頁碼&左右箭頭共用 */
.slick-arrow { position: absolute; outline: none; text-indent: -9999px; z-index: 999; cursor: pointer; padding: 0; top: 21px; width: 40px; height: 40px; border-radius: 40px; background: #b51632; -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); border: 0; background: transparent; border: 2px solid #c5c5c5; }
.slick-arrow:before { content: ""; position: absolute; display: block; left: 20px; width: 10px; height: 10px; top: 21px; -webkit-transition: all 0.5s cubic-bezier(0.5, 0, 0.3, 0.5); transition: all 0.5s cubic-bezier(0.5, 0, 0.3, 0.5); border-width: 0 0 1px 1px; border-style: solid; transform: rotate(45deg); border-color: #fff; -o-transition: all 0.5s cubic-bezier(0.5, 0, 0.3, 0.5); border-color: transparent transparent #c5c5c5 #c5c5c5; top: 13px; left: 15px; border-width: 3px; width: 12px; height: 12px; }
.slick-arrow.slick-prev { right: 52px; }
.slick-arrow.slick-next { right: 0; }
.slick-arrow.slick-next:before { transform: rotate(-135deg); left: 10px; }
@media (min-width:992px) {
	.slick-arrow:hover { border: 2px solid #333; }
	.slick-arrow:hover:before { border-color: transparent transparent #333 #333; }
}

@media (max-width:991px) {
	.slick-arrow.slick-prev{ top: 50%; left: 0; }
	.slick-arrow.slick-next { top: 50% }
	}



/* #about .timeline .slick-dots{ width: 100%;bottom: 163px;}
#about .timeline .slick-dots li{ width: calc(100%/5); display: inline-block; height: 40px; padding: 0;}
#about .timeline .slick-dots li button{ width: 100%; line-height: 40px; height: 40px; background: transparent; border-radius: 0; border-top: 1px solid #fff }
#about .timeline .slick-dots li.slick-active button{ border-top: 1px solid #dc5e5d;}

@media (max-width: 1366px) {
	#about .timeline .slick-dots{ bottom: 0px;}
#about .timeline .slick-dots li{ width: calc(100%/4);}
}
@media (max-width: 1199px) {
#about .timeline .slick-dots li{ width: calc(100%/3);}
}

@media (max-width:991px) {
#about .timeline .slick-dots{bottom: 80px;}
}
 */



#i-product .slick-arrow { width: 30px; height: 30px; border-radius: 30px; top: 50%; left: 0; }
#i-product .slick-arrow:before { top: 8px; left: 10px; }
#i-product .slick-arrow.slick-next { left: auto; right: 10px; }
#i-product .slick-arrow.slick-next:before { left: 5px; }
#i-product .slick-arrow.slick-prev { right: auto; left: 10px; }


#i-group .slick-arrow { position: absolute; outline: none; z-index: 999; cursor: pointer; padding: 0; top: auto; bottom: 0; width: 60px; height: 100%; border-radius: 0px; background: #b51632; -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); border: 0; margin-top: -50px; background: #868997; border: 0; overflow: hidden; }
#i-group .slick-arrow.slick-prev:before { border-width: 6px 13px 6px 0px; top: 50%; border-color: transparent #fff transparent transparent; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); margin-top: -5px; }
#i-group .slick-arrow.slick-prev:after { content: ''; width: 25px; height: 2px; position: absolute; left: 43%; top: 50%; background: #fff; }
#i-group .slick-arrow.slick-prev { left: 0; }
#i-group .slick-arrow.slick-next:before { border-width: 6px 0px 6px 13px; top: 50%; left: auto; right: 15px; border-color: transparent transparent transparent #fff; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); margin-top: -5px; }
#i-group .slick-arrow.slick-next:after { content: ''; width: 25px; height: 2px; position: absolute; left: auto; right: 43%; top: 50%; background: #fff; }
#i-group .slick-arrow.slick-next { left: auto; right: 0; }
@media (min-width:992px) {
	#i-group .slick-arrow:hover{ background: #333; }
}
@media (max-width:991px) {
#i-group .slick-arrow{ width: 40px }
}



.extened .slick-arrow.slick-prev { right: auto; left: 0; top: 0 }
.extened .slick-arrow.slick-next { right: auto; left:52px; top: 0;}
@media (max-width: 565px) {
.extened .slick-arrow.slick-prev { right:auto; left: 0; top: 50% }
.extened .slick-arrow.slick-next { right:0; left: auto; top: 50% }	
}

.timeline .slick-arrow.slick-prev{right: auto; top: 10px; background: #666;}
.timeline .slick-arrow.slick-next{ top: 10px; background: #666;}

@media (max-width: 991px) {
.timeline .slick-arrow.slick-prev{ top: 30px; left: 10px;}
.timeline .slick-arrow.slick-next{ top: 30px; right: 10px}
}