@import url("all.min.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap'); 
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&family=Roboto&display=swap'); 
/*共用*/
/* 移除預設CSS */
html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
	font-family: 'Noto Sans TC', sans-serif,'Roboto';
}
html{
	font-size: 12pt;
	color: var(--basic-font-color);
	min-height: 100vh;
}
body {
	font-family: 'Noto Sans TC', sans-serif,'Roboto';
	font-size: 12pt;
	line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;

}
content{
	display: flex;
	flex-direction: column;
	flex:1;
}

/*自訂*/
:root{
	--bg-color:#f9f8f6;
	--gray-bg-color:#eee3d0;
	--main-font-color:#393F4C;
	--hight-font-color:#5f8d9a;
    --basic-font-color:#545555;
    --theme-color:#9ac5e5;
    --second-color:#edce7a;
    --theme-ok:#5f8d9a;
    --theme-warning:#c4673c;
    --dark-green:#2c615c;
	--active-green:#4fb19d;
    --highlight-color:#c98c9a;
	--light-gray:#959797;
    --bg-gray:#F5F6F6;
    --light-yellow:#e5c6c3;
	--light-bg-yellow:#fbe7ab;
    --theme-font:'Microsoft JhengHei','Arial','Bahnschrift';
	--font-xs:1rem;
    --font-small:1.2rem;
    --font-basic:1.5rem;
	--font-h4:2rem;
    --font-h3:2.5rem;
    --font-h2:3rem;
    --font-h1:4rem;
	--shadow-m:rgba(60,60,60, 0.45) 0px 5px 15px;
	--shadow-s:rgba(60,60,60, 0.45) 0px 3px 10px;
	--shadow-in:inset 0px 3px 10px rgba(60,60,60, 0.45);;
	--theme-border:1px solid var(--theme-color);
	--light-border:1px solid var(--bg-gray);
	--green-border:1px solid var(--dark-green);
}

.font-1{
	font-size: var(--font-h1);
}
.font-2{
	font-size: var(--font-h2);
}
.font-3{
	font-size: var(--font-h3);
}
.font-4{
	font-size: var(--font-h4);
}
.font-b{
	font-size: var(--font-basic);
}
.font-s{
	font-size: var(--font-small)!important;
}
.font-xs{
	font-size: var(--font-xs)!important;
}
.heighLight{
	color: var(--highlight-color);
	margin-top: 10px;
}
.theme-color{
	color: var(--theme-color);
}
.dark-green{
	color: var(--dark-green);
}
.wrong-color{
	color: var(--theme-warning);
}
.light-gary{
	color: var(--light-gray);
}

.bg-light-bg{
	background-color: var(--gray-bg-color);
}
.bg-theme{
	background-color: var(--theme-color);
}
.bg-gray{
	background-color: var(--bg-gray);
}

header {
	line-height: 1;
    background-color: var(--bg-color);
    padding-bottom: 1rem;
}
input[type="text"]{
	border-radius: 5px;
	border: 1px solid var(--theme-color);
	padding: 5px 10px;
}
input[type="text"]:focus-visible {
    /* 自訂樣式 */
	outline:auto 1px var(--theme-ok);
}
.btns{
	gap: 1rem;
}



.btn{
	background-color: var(--dark-green);	
	/*display: flex;*/
	width: fit-content;
	padding:0.5rem 1rem;
	border-radius: 10px;
	cursor: pointer;
	color: white;
	text-decoration:none;
	align-items:center;
	min-width: 100px;
	line-height: 1.5rem;
	text-align: center;
}
.btn:hover{
	background-color: var(--theme-ok);
	color: white;	
}
.btnDropDown{
	background-color: var(--white);	
	color: var(--basic-font-color);
	border: none;
}
.btnDropDown:focus,.btnDropDown:not(:disabled):not(.disabled):active,.show>.btn-primary.dropdown-toggle{
	background-color: var(--theme-ok);	
	color: white;
	border: none;
}
.nav-btn{
	background-color: var(--bg-gray);	
	display: flex;
	width: fit-content;
	padding: 5px 10px;
	border-radius: 10px;
	cursor: pointer;
	color: var(--basic-font-color);
	text-decoration:none;
}
.nav-btn:hover{
	background-color: var(--theme-ok);
	color: white;
}
.nav-btn-active{
	background-color: var(--dark-green);
	color: white;
}
.smallBtn{
	background-color: var(--bg-gray);	
	display: flex;
	width: fit-content;
	padding: 5px 10px;
	border-radius: 5px;
	cursor: pointer;
	color: var(--main-font-color);
	font-size: var(--font-small);
	text-decoration:none;
}
.smallBtn:hover{
	background-color: var(--active-green);	
	color: white;
}
.line-btn{
	font-size: var(--font-small);
	text-decoration:underline;
	cursor: pointer;
	margin-left: 1rem;
}
.line-btn:hover{
	color: var(--hight-font-color);
	text-decoration:underline;
}
.line-btn-h4{
	font-size: var(--font-h4);
	text-decoration:none;
	cursor: pointer;
	color: var(--dark-green);
	border-bottom: 1px solid var(--main-font-color);
}
.line-btn-h4:hover{
	color: var(--hight-font-color);
	text-decoration:none;
	border-bottom: 1px solid var(--theme-color);
}
.dropdown-menu-scrollable {
	max-height: 300px; /* Set your desired max height */
	overflow-y: auto;
  }
.note{
	font-size: var(--font-small);
}

select option,select input,.strokList,.strokList option{
	border-radius: 0;         /* 設定邊角為無圓角 */
}
/*天區塊*/
.topMenu{
	display: flex;
	flex-direction: row;
	gap: 1rem;
	justify-content: space-between;
}
.topMenu img{
    height: 2.5rem;
    padding: 0 0.5rem;
	margin: 1rem;
}
.menu {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
}
.menu a {
	color: var(--main-font-color);
	text-decoration: none;
	padding: 0.5rem 1rem;
}
.menu a:hover {
	color: var(--theme-ok);
}
.menu .menu-button {
	display: none;
	font-size: 30px;
	cursor: pointer;
	color: var(--light-gray);
}
.menu-items {
	display: flex;
	font-size:var(--font-basic);
	font-size: var(--font-small);
}
#logo{
	display: flex;
	justify-content:center;
	align-items: center;
	width: auto;
	height: fit-content;
	padding-top:3rem;
}
#logo > a {
	width: auto;
	height: 100%;
	display: flex;
	justify-content:center;
	align-items: center;
} 
#logo > a > img{
	width: auto;
}    
#pageTitle{
	font-size: var(--font-h1);
	color: var(--dark-green);
	margin: 0rem auto;
	text-align: center;
	padding:1rem;
	background-image: url("../images/logo_s.png");
	background-repeat: no-repeat;
	background-position: top;
	height: fit-content;
	min-height:130px;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 1rem;
	
}
.pageIntro{
	font-size: var(--font-basic);
	color: var(--main-font-color);
	margin: 0rem auto;
	text-align: center;
	padding:1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.inputDiscription{
	font-size: var(--font-small);
	color: var(--basic-font-color);
}
.introSec{
	padding: 2rem;
}
.pageImgSec{
    display: flex;
    flex-direction: row;
    padding: 1rem 2rem;
    gap: 1rem;
    height: fit-content;
    width: fit-content;
    margin: 0 auto;
	
}
.pageImgSec img{
	height: 280px;
}
.pageImgDes{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: var(--font-small);
	padding: 1rem;
}
/*Footer */
footer{
	height: auto;
	background-color: var(--bg-color);
	color: var(--basic-font-color);
	padding: 2rem 1rem;
	position: relative;
	bottom: 0px;
}
footer .info{
	display: flex;
	margin: 1rem;
	justify-content:center;
}
footer .info li{
	font-size: var(--font-xs);
}
.info ul{
	list-style-type:circle;
	font-size: var(--font-small);
}
footer label{
    display: flex;
    width: 100%;
    justify-content: flex-end;
    font-size: var(--font-xs);
}

.companyInfo{
	display: inline-block;
	width: 60%;
}
.companyInfo >ul{
	font-size: var(--font-basic);
}
.companyInfo >ul>li{
	margin: 0.2rem 0rem;
}
.serviceInfo{
	display: inline-block;
	width: 30%;
}
.serviceInfo label{
	font-size: var(--font-small);
}

input[type="checkbox" i]{
	width: 16px;
}

.flex-r{
	display: flex;
	flex-direction: row;
}
.flex-c{
	display: flex;
	flex-direction: column!important;
}
.flex-align-center{
	align-items:center!important;
	justify-content:center!important;
}
.w-full{
	width: 100%;
}
.flex-gap-basic{
	gap: 0.5rem;
}
.flex-left{
	display: flex;
	align-items: flex-start;
	text-align: left!important;
}
.flex-center{
	display: flex;
	justify-items: center;
	align-items: center;
	justify-content:center!important;
}
.func{
	display: flex;
	justify-content:center;
	gap: 1rem;
}
.m-basic{
	margin: 0.5rem;
}
.m-1{
	margin: 1rem;
}
.m-2{
	margin: 2rem;
}
.pconly{
	display: flex;
}
.mobileonly{
	display: none;
}

.onoffItem{
	max-height: 400px;
    display: flex;
    flex-direction: row;
    overflow-y: auto;
    height: 60%;
    box-shadow: var(--shadow-in);
    padding: 1rem 0;
    margin: 1rem 0;
    background-color:var(--bg-color);
    width: 100%;
    justify-content: center;
}
#mask{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(247, 247, 247, 0.74);
	display: none;
}
.loadingText{
	position: fixed;
	top: 50%;
	left: 50%;
	width: 100%;
	text-align: center;
	transform: translate(-50%, -50%);
	background-color: var(--bg-color);
	color: var(--main-font-color);
	padding: 1rem;
	border-radius: 5px;
	box-shadow: var(--shadow-m);
}
.article{
	display: flex;
	flex-direction: column;
	padding: 1rem;
	gap: 1rem;
	width: 70%;
	line-height: 2rem;
}
.hideArticle{
	display: flex;
	flex-direction: column;
	padding: 1rem;
	width: fit-content;
	line-height: 2rem;
	align-items:center;
}
.articleNote {
	gap: 0.5rem;
	font-size: var(--font-xs);
}
.articleNote label {
	text-align: center;
	line-height: 2.5rem;
}
.article img{
	max-height: 300;
	display: flex;
	margin: 5px auto 10px auto;
	max-width: 300px;
	border:1px solid var(--bg-gray);
}
.article p{
	font-size: var(--font-small);
}
.noBg{
	background-image: none!important;
}

/* XLarge */
@media screen and (max-width: 1920px) {


}

/* XLarge */
@media screen and (max-width: 540px) {
	.pconly{
		display: none;
	}
	.mobileonly{
		display: flex;
	}
	html{
		font-size: 10pt;
		color: var(--basic-font-color);
		min-height: 100vh;
		width: 100%;
		padding: 0;
		margin: 0;
	}
	.topMenu{
		justify-content:space-between;
		position: absolute;
		width: 100%;
	}
	.menu .menu-button {
		display: flex;
	}
	.menu{
		align-items:end;
		flex-direction: column;
		gap: 0.5rem;
	}
	.menu a:hover{
		color: white;
	}
	.menu-items {
		display: none;
		flex-direction: column;
		width: 100%;
		font-size: var(--font-basic);
	}
	.menu-items a {
		text-align: center;
		padding: 1rem;
		border-bottom: 1px solid var(--gray-bg-color);
		color: white;
	}
	.menu-items.active {
		display: flex;
		background-color: var(--theme-ok);
		box-shadow: var(--shadow-s);
		
	}
	body {
		font-family: 'Noto Sans TC', sans-serif,'Roboto';
		font-size: 10pt;
		line-height: 1.6;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: 0;
		margin: 0;
	}
	content{
		display: flex;
		flex-direction: column;
		flex:1;
	}
	#pageTitle{
		font-size: var(--font-h3);
		color: var(--dark-green);
		margin: 0rem auto;
		text-align: center;
		padding:1rem 1rem 0 1rem;
		background-image: url("../images/logo_s.png");
		background-repeat: no-repeat;
		background-position: top;
		height: 145px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top:3rem;
	}
	.pageIntro{
		padding:0 1rem 1rem 1rem;
		font-size: var(--font-small);
	}
	.pageIntro label{
		line-height: 2rem;	
	}
	
	.introSec{
		padding: 2rem 1rem;
	}
	.pageImgSec{
		padding: 0;
		flex-direction:column;
		width: 100%;
		align-items:center;
	}
	.pageImgSec img{
		width: 50%;
		height: auto;
	}
	.pageImgDes{
		padding: 0.5rem;
		width: 95%;
		gap: 0.5rem;
	}
	.pageImgDes label{
		line-height: 2rem;
	}
	.article{
		width: 90%;
	}
	.article img{
    	max-height: 30%;
    	display: flex;
    	margin: 5px auto 10px auto;
    	max-width: 80%;
		border:1px solid var(--bg-gray);
	}
	.article p{
    	font-size: var(--font-small);
	}
	.charCol{
		margin-top: 1.5rem;
	}
	.charCol .colName{
		font-size: var(--font-basic);
	}
	footer label{
		justify-content:center;
	}
}