/*20261012*/

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,300,400,500,700,900&display=swap'); /*Google Fonts 繁中-黑體*/
@import url('https://fonts.googleapis.com/css?family=Gothic+A1:200,300,400,500,600,700,800,900&display=swap'); /*Google Fonts 英文數字*/

/* 取消新版chrome搞出來的黑框bug */
*, *:focus {
	outline: none;
}
button:active, button.active, button:focus, button.focus {
	outline: none;
	border: none;
	box-shadow: none !important;
}


@media (max-width: 767.98px) {
    .container {
        width:95%;
    }
}

@media (min-width: 768px) {
    .container {
        width: 680px;
    }
}

@media (min-width: 992px) {
    .container {
        width: 900px;
    }
}

@media (min-width: 1200px) {
    .container {
        width: 1100px;
    }
}





body {
	margin:0 auto;
	/*padding-top:50px; 配合固定式置頂nav*/
	--white: #fff;
	--deep: #000; 
	--light-grey: #f4f3f1;
	--deep-green: #01352e; /*深青綠*/
	--green: #00695c; /*青綠*/
	--light-greygreen: #7cb8b5; /*灰青*/
	--red: #d92729;
	--color1: #0fa06e; /*主色標題字*/
}
.white {
	color:var(--white);
}
.deep {
	color:var(--deep);
}
.red {
	color:var(--red);
}
.green {
	color:var(--green);
}
.color1 {
	color:var(--color1);
}

body, th, td {
	/*font-family: -apple-system, Segoe UI, Roboto, "微軟正黑體", "Helvetica Neue", Arial, sans-serif;*/
	font-family: 'Noto Sans TC', sans-serif; /*Google Fonts 思源中文字型-黑體*/
	font-size:16px;
	font-weight:400;
	/*font-weight:bold;*/
	color:#555;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Noto Sans TC', sans-serif; /*Google Fonts 思源中文字型-黑體*/
}
.h1 .small, .h1 small, .h2 .small, .h2 small, .h3 .small, .h3 small, .h4 .small, .h4 small, .h5 .small, .h5 small, .h6 .small, .h6 small, h1 .small, h1 small, h2 .small, h2 small, h3 .small, h3 small, h4 .small, h4 small, h5 .small, h5 small, h6 .small, h6 small {
    font-weight: 400;
    line-height: 1;
}
h2 {
	font-size:2.75em;
	font-weight:300;
	color: var(--green);
	display:block;
	line-height: 1.1;
	margin-top: 0;
	xxxtext-shadow:4px 2px 0px var(--white);  /*暈染效果*/
}
h2 small,
h3 small {
	display:block;
	font-family: 'Gothic A1', sans-serif;  /*Google Fonts 英文數字字型*/
	font-size:18.5px;
	font-weight:600;
	line-height: 1.35;
}
h2 small {
	font-size:20px;
	margin-top:1.75rem;
	color: var(--light-greygreen);
}
h3 {
	font-size:2.25em;
	line-height:1.15;
	margin-top:1em;
	margin-bottom: 1em;
	color: var(--green);
}
h3 small {
	margin-top:0.5em;
	color: var(--light-greygreen);
}
h4 {
	font-size:2.25em;
	font-weight:300;
	color:var(--green);
	line-height: 1.4;
}
h5 {
	font-size:1.15em;
	font-weight:600;
}
h5 small {
	display:block;
	font-size:0.85em;
	font-weight:400;
	margin-top:0.5em;
	margin-bottom:-0.25em;
}
h6 {
	font-size:17px;
	font-weight:400;
	margin-top:8px;
	color:var(--deep);
}
h6 b {
	font-weight:600;
}
.table h6 {
	margin-top:0;
	margin-bottom:0;
	line-height:1.45;
}
p {
	font-size:17px;
	font-family: 'Noto Sans TC', sans-serif; /*Google Fonts 思源中文字型-黑體*/
	font-weight:400;
	line-height:1.65;
	margin-bottom:20px;
}
.fontBig {
	font-size:20px;
	font-weight:400;
	font-family: 'Noto Sans TC', sans-serif; /*Google Fonts 思源中文字型-黑體*/
}
.fontBig strong {
	font-weight:700;
}
.fontBig.number {
	font-size:22px;
	font-weight:500;
	font-family: 'Gothic A1', sans-serif;  /*Google Fonts 英文數字字型*/
}
.number {
	font-family: 'Gothic A1', sans-serif;  /*Google Fonts 英文數字字型*/
	font-weight:500;
}
.number strong {
	font-weight:900;
}

a {
	color: var(--deep);
	text-decoration:underline;
	word-wrap:break-word; /*若一個單字過長，超過畫面的寬度，則將單字換行(不切斷單字)*/
}
a:hover {
	color: var(--color1);
	text-decoration: none;
}

hr {
    border-top: 10px solid var(--light-greygreen);
	height: 10px;
	margin-top: 4em;
	clear: both;
}
.mt-0 {
	margin-top: 0 !important;
}
.mt-less {
	margin-top: 1.25rem;
}
.mt-1 {
	margin-top: 2rem;
}
.mt-2 {
	margin-top: 4.5rem;
}
.mb-1 {
	margin-bottom: 2rem;
}
.mb-3 {
	margin-bottom: 5.5rem;
}
.mb-4 {
	margin-bottom: 8rem;
}


/*互動式外擴散光*/
.btn-tech,
.btn-tech:active,
.btn-tech:focus,
.btn-tech.focus {
	position:absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index:9;
	right:1.15rem;
	bottom:1.15rem;
	font-family: 'Noto Sans TC', sans-serif; /*Google Fonts 思源中文字型-黑體*/
	color: var(--white);
	/*font-size: 1.15em;*/
	font-size:2rem;
	font-weight:500;
	text-decoration:none;
	line-height:1.25;
	width: 110px;
	height: 110px;
	box-sizing: border-box;
	/*overflow:hidden;  圓角用塞圖時才不會影響圓角美觀 */
	background-color: var(--red);
	/*background-image: linear-gradient(to bottom, #ff6a6a 0, #d23232 300%);*/
	box-shadow:0 0 0 1em rgba(245, 165, 135, 0.5);
	animation: btnGlow 1.5s ease-out 0.2s infinite alternate; /*動畫btnGlow,alternate會反轉播*/
	outline: none;
	border: none;
}
.btn-tech:hover {
	color: #fcded3;
	animation-play-state: paused; /*暫停*/
	/*animation-play-state: running; 繼續跑*/
}
.btn-tech i {
	font-size: 85%;
	font-style: normal;
}

.btn-cta {
	font-size:15px;
	color:var(--white);
	background-color:var(--light-greygreen);
	padding: 3px 12px 5px;
	border-radius: 50px;
	display: inline-block;
	margin-top: 7px;
	text-decoration: none;
	border: none !important;
	outline: none !important;
}
.btn-cta:hover,
.btn-cta:focus {
	filter: brightness(110%);
	color:var(--white);
	border: none !important;
	outline: none !important;
	text-decoration: none;
}

/* 強制固定在.sticky外層（ main ）範圍內*/
.sticky {
	position: sticky;
	bottom:0;
}

@keyframes btnGlow {
	 from {
	 	box-shadow:none;
		border-radius: 50%;
	 	/*border-radius: 25%; for ie*/
	}
	to {
		border-radius: 50%; /*for ie*/
		xxxtransform:scale(0.95);
	}
}

@media (min-width: 1600px) {
	body, th, td {
		font-size:18.5px;
	}
	p {
	font-size:18.5px;
`	}
}

@media (min-width: 992px) and (max-width: 1199px) {  /*md*/
	h2 {
    	font-size: 2.5em;
	}	
	h3 {
    	font-size: 2.15em;
	}
	h4 {
		font-size:2em;
	}
}

@media (min-width: 768px) and (max-width: 991px) {  /*sm*/
	h2 {
    	font-size: 2em;
	}	
	h3 {
    	font-size: 1.55em;
	}
	h4 {
		font-size:1.55em;
	}
	img.map {
		margin-bottom: 2.5em;
	}
}


@media (max-width: 767.98px) {  /*xs*/
	h2 {
		font-size:1.35em;
		font-weight: 400;
		white-space: nowrap;
	}
	h2 small{
		margin-top: 1rem;
	}
	h2 small, 
	h3 small {
		font-size:15px;
		white-space:normal !important;
	}
	h3, h4 {
    	font-size: 20px;
	}
	#location h4 small {
		font-size:19px;
	}
	h4 small,
	h5 {
		font-size: 16.5px;
		font-weight: 500;
	}
	h6 {
		font-size:15.5px;
	}
	p {
		font-size:15.5px;
	}
	.btn-cta {
		font-size:14px;
	}
	.fontBig.number,
	.fontBig {
		font-size:16px;
	}
	img.map {
		margin-bottom: 2.5em;
	}
	.btn-tech,
	.btn-tech:focus,
	.btn-tech:active,
	.btn-tech.focus {
		font-size: 1.4rem;
		line-height:1.35;
		width: 80px;
		height: 80px;
		right: 0rem;
    	bottom: 0rem;
	}
}





/* ==================================================
   自定css
================================================== */
.nowrap {
	white-space:nowrap; /*強制不折行*/
}
.week {
	color:var(--white);
	xxxbackground-color: var(--deep);
	background-color: var(--red);
	border-radius: 50%;
	font-size: 11px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	padding: 2px 4px;
	margin: 0 3px 2px;
	text-align: center;
	display: inline-block;
	vertical-align:middle;
}
xxx.txt-gradient {
    background: linear-gradient(to left, #d92729 25%, #d1ba74 40%, #75d872 60%, #0a8c2c 75%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    box-shadow: none !important;
    display: inline-block;
}
xxx.colorbar {
    background: linear-gradient(to left, #d92729 25%, #d1ba74 40%, #75d872 60%, #009844 75%);
	height:7px;
}

.photoBox .col {
	margin-bottom:3em;
}
.photoBox .col img {
	width:250px;
	margin-bottom:0.75em;
	filter: grayscale(100%); /*黑白*/
}
.photoBox h6 {
	color:var(--green);
	border-top: var(--light-greygreen) solid 2px;
	margin-top: 1.5rem;
	padding-top: 1rem;
}
.info {
	margin-top:2em;
	margin-bottom:3em;
}
.icon_service {
	xxxxwidth:35px;
	width:70px;
	display:inline-block;
}
.icon-s {
	width:22px;
	height: auto;
	aspect-ratio:1;/*圖寬除以高*/
}
.icon-user {
	width:15px;
	height: auto;
	aspect-ratio:1;/*圖寬除以高*/
}
.icon {
	width:25px;
}
dl.dl-horizontal {
    margin-top: 0;
    margin-bottom:0;
	display: inline-block;
	text-align: left;
}
dl.dl-horizontal dt {
	width:25px;
	float: left;
	clear: left;
	text-align: right;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.dl-horizontal dd {
	margin-left:35px !important;
	line-height: 1.35;
}


@media (min-width: 992px)  {
  .site {
		text-align: right;
	}
}


@media (min-width: 768px) and (max-width: 991.98px) {
	.icon {
		width:20px;
	}
	dl.dl-horizontal dt {
		width:20px;
	}
	.dl-horizontal dd {
		margin-left:30px !important;
	}
}

@media (max-width: 767.98px) {  /*xs*/
	.info {
		margin-top: 0.25em;
		margin-bottom: 1.5em;
	}
	.photoBox .col {
		margin-bottom:2em;
	}
	.icon_service {
		width:45px;
	}
	.icon {
		width:17px;
	}
	dl.dl-horizontal dt {
		width:17px;
	}
	.dl-horizontal dd {
		margin-left:25px !important;
	}
}


/* ==================================================
   nth變數換行效果
================================================== */
@media (max-width: 767.98px) {  /*xs*/
	.photoBox .col:nth-child(2n+1) { /*限變數規定2個為組,下一個則重新起頭另排一行*/
	 clear:both;
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {  /*sm*/
	.photoBox .col:nth-child(3n+1) { /*限變數規定3個為組,下一個則重新起頭另排一行*/
	 clear:both;
	}
}

@media (min-width:992px) {  /*md, lg*/
	.photoBox .col:nth-child(4n+1) { /*限變數規定4個為組,下一個則重新起頭另排一行*/
	 clear:both;
	}
}


/* ==================================================
   kv + footer
================================================== */
xxx.kv {
    background-image: url(../imgs/kv.png);
    background-repeat: no-repeat;
    background-position: right top;
    background-size:48%;
    position: relative;
}

.heroVD,
.footerVD {
    background-image: url(../imgs/heroVD.jpg);
	xxxbackground-position:left top; /*左右 上下*/
    background-size: cover;
    background-repeat: no-repeat;
	height: 100vh;
	margin-bottom:1rem;
	xxxvertical-align: top;
	display: flex;
	flex-direction: column;
	XXXjustify-content: center;
	justify-content: top;
	align-items: center;
}
.heroVD {
	background-position:left top !important; /*左右 上下*/
}
.footerVD {
	height: auto;
	margin-bottom:0;
	background-position:left bottom !important; /*左右 上下*/
}

.heroBox {
	background-color: var(--white);
	xxxborder-radius: 1.5rem;
	border-bottom-left-radius: 1.5rem;
	border-bottom-right-radius: 1.5rem;
	padding:3rem 4rem;
	padding-bottom:3rem;
	xxxpadding-top:2.25rem;
	position: relative;
}
.heroBox .kvlogo {
    position:absolute;
	right: 3rem;
    top: 1.5em;
    width:30%;
}
.heroBox hgroup {
	border-bottom: var(--light-greygreen) solid 2px;
    margin-bottom: 2.25rem;
    padding-bottom: 0.75rem;
}
.heroVD .container {
	width:70%;
	max-width: 1100px;
}
xxxmain {
	padding-bottom:10rem;
}
footer {
	padding-top:6rem;
	xxxmargin-top:10rem;
	vertical-align: bottom;
}
.footerBox {
	background-color: var(--white);
	border-top-left-radius: 1.5rem;
	border-top-right-radius: 1.5rem;
	padding:3.5rem 4rem 2.75rem;
}

@media (min-width: 992px) and (max-width: 1199px) {  /*md*/
	.heroVD .container {
		width: 80%;
	}
	.kvlogo {
		top:1em;
		width:25%;
	}
	.heroVD {
		background-position:15% top !important; /*左右 上下*/
	}
}

@media (min-width: 768px) and (max-width: 991px) {  /*sm*/
	.heroVD {
		background-position:10% top !important; /*左右 上下*/
	}
	.heroVD .container {
		width:68%;
	}
	.heroBox .kvlogo {
		top:0.85em;
		right: 2rem;
		width:45%;
	}
	.heroBox {
		padding-top: 8rem;
	}
	footer {
		padding-top: 5rem;
		xxxmargin-top: 6rem;
	}
	.footerBox {
		padding: 1.75rem 2.5rem 2rem;
	}
}


@media (max-width: 767.98px) {  /*xs*/
	.heroVD {
		height:85vh;
		background-position:10.5% 0% !important; /*左右 上下*/
	}
	.heroVD .container {
		width:90%;
	}
	.heroBox .kvlogo {
		top:0.85em;
		right: 2rem;
		width:65%;
		max-width:240px;
	}
	.heroBox {
		padding:2rem;
		padding-top: 7.75rem;
	}
	.heroBox hgroup {
		margin-bottom: 1.5rem;
		padding-bottom: 0.25rem;
	}
	xxx.kvlogo {
		position: absolute;
		right: 0.9em;
		top: 0.75em;
		width: 65%;
		max-width:280px;
	}
	footer {
		padding-top: 4.5rem;
		xxxmargin-top: 5rem;
	}
	.footerBox {
		padding: 2rem 1.5rem 2rem;
	}	
}


/* ==================================================
   表格
================================================== */
.table {
    width: 100%;
    margin-bottom:0;
    background-color: transparent;
	border-top:var(--light-greygreen) solid 10px;
	border-bottom:var(--light-greygreen) solid 10px;
}
xxxx.titlebar {
	background-color:var(--light-greygreen);
	border-radius: 50px;
	padding: 0.25rem;
	padding-left: 2em;
	margin-bottom: 0.75rem;
}
.table td.time {
    padding-top: 1em;
	padding-left: 0.75em;
	white-space: nowrap;
}
.table>thead>tr>th {
    vertical-align: bottom;
    xxxxborder-bottom: 3px solid #009844;
}
.table>tbody>tr>td, 
.table>tbody>tr>th, 
.table>tfoot>tr>td, 
.table>tfoot>tr>th, 
.table>thead>tr>td, 
.table>thead>tr>th {
    padding:  0.85em 0.5em;
    line-height: 1.35;
    vertical-align: top;
    border-top:none;
}

.table-striped tbody tr:nth-of-type(odd) ,
.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #eaf8f0;
}

.table-hover tbody tr:hover {
    background-color: rgba(0,0,0,.025);
}
.table-striped tbody tr:nth-of-type(odd):hover ,
.table-striped>tbody>tr:nth-of-type(odd):hover {
    background-color: #e6f8ee; /*微加深*/
}

@media (max-width: 767.98px) {  /*xs*/
	.table>tbody>tr>td, 
	.table>tbody>tr>th, 
	.table>tfoot>tr>td, 
	.table>tfoot>tr>th, 
	.table>thead>tr>td, 
	.table>thead>tr>th {
		font-size: 15px;
		padding:  1.25em 0.25em;
	}
}



/* ==================================================
   進場動畫 .highlight
================================================== */
/*自動播放-進場動畫*/
.animation-fadeIndown {
    animation:fadeIndown 2s both;
}

/* fadeInup-下往上淡入進場 */
@keyframes fadeInup{ /*@keyframes對應動畫名fadeInup*/
	0% {
		opacity:0;
		/*transform:translateY(13%); Y負數是往上偏移*/
		transform:translateY(20px); /*Y負數是往上偏移*/
	}
	100%{
		opacity:1;
	}
}

/* fadeIndown-上往下淡入進場 */
@keyframes fadeIndown{ /*@keyframes對應動畫名fadeInup*/
	0% {
		opacity:0;
		/*transform:translateY(13%); Y負數是往上偏移*/
		transform:translateY(-20px); /*Y負數是往上偏移*/
	}
	100%{
		opacity:1;
	}
}


/*偵測捲軸-淡入進場動畫*/
.fadein-Top {
    transition: all 1.25s ease-in-out;
	opacity:0;
	transform:translateY(10%);
}
.fadein-Top.highlight {
	opacity:1;
	transform:translateY(0);
}