@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@700&display=swap');
/*@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Noto+Sans+TC&display=swap');
/** { font-family: 'Montserrat','Noto Sans TC', 'Noto Sans', Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", "標楷體", DFKai-SB, sans-serif; }*/
* { font-family: Montserrat, Noto Sans TC, Microsoft JhengHei, Roboto, Segoe UI, Helvetica Neue, Arial, sans-serif; }
.noto { font-family: 'Noto Serif TC', serif; }
:root { font-size: 1rem; }
body {font-size: 1.125rem; line-height: 1.7;color: #1A1A1A;}
a {outline : none;}
.btn-link { color: #ff6161; }
.navbar-light .navbar-nav .nav-link { color: #444444; font-weight: bold; }
.navbar { padding: 0rem 1rem; }
.navbar a:hover { text-decoration: underline; }
.custom-control { min-height: 1.80625rem; padding-left: 1.7rem; margin-top: 4px; margin-bottom: 4px; }
.custom-control-label::before { top: .2rem; left: -1.7rem; width: 1.4rem; height: 1.4rem; background-color: #fff; border: #adb5bd solid 1px; }
.custom-control-label::after { top: 0rem; left: -2rem; width: 2rem; height: 2rem; }
/**/

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 { line-height: 1.4; }
h1, .h1 { font-size: 3.5rem;/*font-size: 2.5rem;*/ }
h2, .h2 { font-size: 2.5rem;/* font-size: 2rem;*/ }
h3, .h3 { font-size: 2rem;/*font-size: 1.75rem;*/ }
h4, .h4 { /*font-size: 1.5rem;*/ }
h5, .h5 { /*font-size: 1.25rem;*/ }
h6, .h6 { /*font-size: 1rem;*/ }

@media all and (max-width: 576px) {
h1, .h1 { font-size: 2.0rem; }
h2, .h2 { font-size: 2.0rem; }
h3, .h3 { font-size: 1.5rem; }	
h5, .h5 { font-size: 1.1rem; }		
}
.rounded { border-radius: 1rem !important; }
.shadow { -webkit-box-shadow: 0px 3px 10px rgba(0,0,0,0.29)!important; box-shadow: 0px 3px 10px rgba(0,0,0,0.29)!important; }
/**/
.toTop-arrow { width: 2.5rem; height: 2.5rem; padding: 0; margin: 0; border: 1px solid #808080; border-radius: 50%; position: fixed; right: 1rem; bottom: 1rem; display: none; z-index: 99; background-color: rgba(0, 0, 0, 0.00); }
.toTop-arrow:hover { border: 1px solid #4E4E4E; }
.toTop-arrow:hover::before, .toTop-arrow:hover::after { background-color: #4E4E4E; }
.toTop-arrow::before, .toTop-arrow::after { width: 15px; height: 2px; border-radius: 3px; background-color: #808080; position: absolute; content: ""; }
.toTop-arrow::before { transform: rotate(-40deg) translate(0, -50%); left: 0.45rem; }
.toTop-arrow::after { transform: rotate(40deg) translate(0, -50%); right: 0.45rem; }
.toTop-arrow:focus { outline: none; }

/* /////////////////////////// */
/*@media only screen and (max-width: 600px) {
.single-hs-item { height: 550px; }
.hero-text h1 { font-size: 30px; }
.hero-text p { font-size: 15px; margin-bottom: 25px; }
.owl-carousel .owl-nav button.owl-next { top: auto; margin: 0; bottom: 0px; }
.owl-carousel .owl-nav button.owl-prev { top: auto; margin: 0; bottom: 0px; }
.owl-dots { bottom: 10px; left: 50px; right: 50px; }
}*/

/*swiper*/
.swiper, .slider-container { 
	--swiper-theme-color: #000000; /* 設置Swiper風格 */ 
	--swiper-navigation-color: #000000; /* 單獨設置按鈕顏色 */ 
	--swiper-navigation-size: 40px; /* 設置按鈕大小 */ }

@media (max-width: 767px) {
.swiper, .slider-container { 
	--swiper-theme-color: #000000; /* 設置Swiper風格 */
	--swiper-navigation-color: #000000; /* 單獨設置按鈕顏色 */ 
	--swiper-navigation-size: 30px; /* 設置按鈕大小 */ 
	--swiper-navigation-sides-offset: 0px; }
.swiper-button-next, .swiper-button-prev { z-index: 11; bottom: 0px; top: auto; }
}

@media (min-width: 576px) {
.outbtn .swiper-button-next {right: -10px;}
.outbtn .swiper-button-prev {left: -10px;}
}

.outbtn .swiper-button-prev, .outbtn .swiper-button-next { width: 18px; }
.outbtn .swiper-button-prev:focus, .outbtn .swiper-button-next:focus { 
outline: none; }
/* /////////////////////////// */

@media (min-width: 576px) {
.card-columns { column-count: 2; }
}

@media (min-width: 768px) {
.card-columns { column-count: 3; }
}

@media (min-width: 992px) {
.card-columns { column-count: 3; }
}

@media (min-width: 1200px) {
.card-columns { column-count: 4; }
}