html{
	font-size: 16px;
}


body{

	font-family: "Microsoft JhengHei";padding-right: 15px;
    padding-left: 15px;
	font-size: 16px;
	line-height: 1.5;
	position:relative;
}


*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.btn{
	display: inline-block;
    /*display:block;*/
	position: relative;
	left:50%;
	transform: translate(-50%,0);
	margin-top:10px;
}



h3{
	color:#0d9cfd;
	font-size: 1.07rem;
	font-weight: bold;
}

.clearfix:after{
	content: "";
	display: table;
	clear: both;
}


ul{
	list-style-type:none; 
	display: inline-block;
	padding-left: 0px;
	margin: 0;
}

li{
	float:left;

}

.row:after{
	content: "";
	display: table;
	clear: both;
}

.boundary:after {
    content: "/";
    padding: 0px 10px;
    color: #d6b161;
}

.col-4{
	float:left;
	width:33%;
}

.col-3{
	float:left;
	width:25%;
}


.col-2{
	float:left;
	width:16%;
}


.col-6{
	float:left;
	width:50%;
}

.col-10{
	float:left;
	width:84%;
}

.col-7{
	float:left;
	width:59%;
}


.col-8{
	float:left;
	width:67%;
}

.container{
	/*max-width: 1000px;*/
	max-width: 1170px;
	display: block;
	margin: 0 auto;
	padding-right: 0;
    padding-left: 0;w
}





#header{

}


#header a{
	text-decoration: none;
	font-size: 1.1rem;
	color: #070707;
	/*color: #333;*/
}


#header a:hover{
	color:#FFF;
}


/* 2026-10-13 banner image only on the header's first-level container (path bar moved out, same as forgotL.htm) */
#header > .container{
	background-color: #fff;
	background-image: url(/img/ioh44.png);
	opacity: 1;
	-webkit-background-size: contain;
	background-size: contain;
	background-position: center center; 
	background-repeat: no-repeat;
 	width: 100%;
    z-index: 888;
  	/*overflow: hidden;		*/
  	overflow:visible;

}

#banner{
	float:left;

}

#banner img{
	display: block;
}




#welcome{
	float:right;
	text-transform: uppercase;
	font-size: 1rem;
	margin-right: 30px;
	background: rgba(0, 0, 0, 0.5);
	margin-right: 50px;
	font-weight: bold;
	color:#FFF;

}

#welcome a {
	font-weight: bold;
	color:#FFF;
}

#welcome a:hover {
	color: #d6b161;
	background-color: rgba(0, 0, 0, 1);

}

.hpath{
  	background-color: #fff;
  	opacity: 0.8;
}

#mpath{
	float:left;
	position:relative;
	padding: 0px 20px 0px 20px;
	color: #5d5d5d;
}

#mpath a{
	color: #5d5d5d;	
}

#mpath a:hover {
	color: #070707;
}


#imenu{
	/*border: 2px solid #2a9cc8;*/
	border: 2px solid;
	position:absolute; 
	right:10px;
	padding:1px;
	display:none;
}




#path{
	float:right;
	position: relative;
	padding: 5px 20px 5px 20px;	
	display: block;
}

#path.show{
		display: block;
}


#path .menu li {
	content:"";
	padding:0px 5px;
	color: #5d5d5d;
    cursor: pointer;
}



#path .menu .mfirst ul{
	display: none;
	width:150px;
	position: absolute;
	transform: translate(0,15%);
	background-color: #a0a0a0;
	opacity:0.8;
	z-index: 999;
	color: #5d5d5d;

}



#path .menu .mfirst ul :hover{
	color:#FFF;
}





.condition{
}



.condition .col-12{
	text-align: center;

}

.condition .col-4{
	text-align: right;
	padding-top:5px;
}

.condition .col-8{
	padding-top:5px;
	padding-left:5%;

}

.condition .col-6{
	text-align: right;	
	padding-top:5px;
	padding-left:5%;

}

.condition table{
	display: inline-block;
	position: relative;
	top:0;
	transform: translate(0,40%);	
	border:none;
}


.condition select{
	height: 2.375em;
	margin: 5px 0;
}

.condition button {
	background-color: #008CBA;

	height: 2.375em;	  
    border: none;
   	padding: 10px 10px;
    text-align: center;
    text-decoration: none;
    cursor:pointer;
    font-size: 1.07rem;
}




.minfo{
    margin:20px auto 0 auto;
    color: #333;
    padding:0;
    max-width: 1170px;
}

.minfo .title {
	border-bottom: 2px solid #266380;
	color:#fff;
	font-size: 1.2rem;	
	font-weight: bold;
	padding: 20px 0;
	margin-bottom: 10px;
	background-color: #d6b161;
		background: #004da1;

}




.minfo .news{
	float:left;
	margin: 0 50px;
	letter-spacing: 3px;	
}


.minfo .social-media {
  float:right;
  margin: 0 80px;
}

.minfo .social-media ul {
}

.minfo .social-media li {
  float: left;
}

.minfo .social-media a {
	color:#fff;
	font-size: 1.07rem;
	font-weight: bold;
    margin: 5px;
    border: 1px dotted #266380;
    text-align: center;
    text-decoration: none;
}

.minfo .info{
	width: 95%;
	margin:0 auto;
}

.minfo .info ul{
	width:100%;
}

.minfo .info li{
	border-bottom: 1px dotted #ccc;
	padding: 10px 0;

}

.minfo .info a{
	text-decoration: none;
	color: #333;
	font-size: 1em;

}


.minfo .info a:hover{
	color : #266380;
}



.minfo .btn a{
	text-decoration: none;
	color:#266380;
	font-size: 1.07rem;
	font-weight: bold;
}


.minfo .btn a:hover{
	color:#266380;
}




.msg{
	background-color: white;
}

#content{
	/*position: relative;
	top:140px;*/
	/*margin-top: 140px;
	margin-bottom: : 40px;*/
}

#content > .container > div{
	padding: 0px 0px;
}

.items{
	float:left;
	width:25%;
	padding:10px 10px ;
	position: relative;
}

.item{
	text-align: center;
	border:5px #266380 solid;
	padding:10px;
	background-color: #f7fbfc;
}

.item li{
	float:none;
	padding: 10px 0;
}

.item a{
    text-decoration: none;
    color:#333;
    font-size: 1.03em;
}


.item a:hover{
	color:#2a9cc8;
}


.items{
	float:left;
	width:25%;
	padding:10px 10px ;
	position: relative;
}

.item{
	text-align: center;
	border:5px #e5f1ff solid;
	padding:10px;
}

.item li{
	float:none;
	padding: 10px 0;
}

.item a{
    text-decoration: none;
    color:#333;
    font-size: 1.03em;
}

.item a:hover{
	color:#2a9cc8;
}


/* ===== 新卡片樣式：放在 media 外面 ===== */
.mform {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.mform .items {
    float: none;
    width: calc(33.333% - 16px);
    padding: 0;
}

.mform .items .item {
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    padding: 12px 20px;
    min-height: 100px;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: all 0.25s ease;
}

.mform .items .item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.10);
}

/*
.mform .items .item::before {
    content: "";
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background-color: #eef3fb;
    background-image: url("/img/icon-cap.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40px;

    display: block;
    margin-bottom: 20px;
}*/

.mform .items .item h3 {
    margin: 0 0 12px 0;
    color: #1f2b46;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.3;
    border: none;
    background: none;
    text-align: left;
}

.mform .items .item ul {
    margin: 0;
    padding: 0;
    list-style: none;
    /* margin-top: auto; */
    display: block;
}

.mform .items .item ul li {
    float: none;
    padding: 0;
    display: block;
}

.mform .items .item ul li a {
    display: inline-flex;
    align-items: center;
    color: #0a8a6a;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
}

.mform .items .item ul li a::after {
    content: "";
    margin-left: 8px;
    font-size: 1.1rem;
}

.mform .items .item ul li a:hover {
    color: #066f56;
}








#footer{
	/*position: relative;*/
}

#footer .container{
	background-color: #f7fbfc;
    z-index: 888;
    padding: 10px 0;
    color: #7e7e7e;	
}


#footer ul{
	list-style-type:none; 
	display: inline-block;
	padding-left: 0px;
	position: relative;
	margin:0px;
	left:50%;
	transform: translate(-50%,0);
}


#footer li{
	float:left;
	padding: 0 0;
}


#footer .boundary:after {
    content: "|";
    padding: 10px;
}


#footer a{
	text-decoration: none;
	color: #7e7e7e;
	font-size: 1em;
}


#footer a:hover{
	color:#266380;
}



/*#go-top {
	position: absolute;
    width: 30px;
    height: 30px;
    background: #333;
    color: #f5f5f5;
    line-height: 30px;
    text-align: center;
    top: -10px;
    -webkit-transition: all .5s;
    transition: all .8s;
    font-size: 1.2rem;
    right: 60px;
}
*/

#go-top{
	 position: fixed;
     right: 50px;
     bottom: 30px;
     width: 30px;
     height: 30px;
     font-size: 1.2rem;
     /*background: #333;     */
     background: rgba(0, 3, 51, 0.25);
     color: #f5f5f5;
     cursor: pointer;
     z-index: 1000;
}

#flogin{
	display: none;
	position:absolute;
	padding:0px;
	top:0px;
	left:0px;
	height: 100%;
	width:100%;	
}

#flogin.fshow{
	display: block;
}


@media (max-width: 1170px){
	.container{
		max-width: 900px;

	}
	#welcome{
		margin-top:10px;
	}	

	#header{
		background-image: none;	
		position: relative;
	}

	#mpath{
		width:100%;

	}

	#imenu{
		display:inline-block;
	}

	#path{
		width:100%;
		display: none;
	}
				

	#footer{
		background-image: none;
		background-color: transparent;
	}



	#content{
		margin-top: 0;
	}

	.items{
		width:100%;
	}	

}

@media (max-width: 900px){
	.container{
		max-width: 600px;

	}
}



@media (max-width: 600px){
	.container{
		max-width: 320px;

	}

	#header{
		background-image: none;
		position: relative;

	}

	#mpath{
		width:100%;

	}

	#imenu{
		display:inline-block;
	}	

	#path{
		width:100%;
		display: none;
	}	



	#footer{
		background-image: none;
		background-color: transparent;
	}



	#banner img{
	display: block;
	width:100%;
	height: auto;
	}

/*	#path,#fun{
		display: none;
	}*/

	.items{
		width:100%;
	}

	.social-media{
		display: none;
	}

	#content{
		margin-top: 0;
		margin-bottom:  0;
	}

	#content .col-8{
		width:100%;
		text-align: left;
		padding-left:0px;
	}


	#content .col-4{
		width:100%;
		text-align: center;
		padding-left:0px;
	}

	#content .col-2{
		width:100%;
		text-align: center;
		padding-left:0px;
	}

	#content .col-3{
		width:100%;
		text-align: center;
		padding-left:0px;
	}

	#content .col-7{
		width:100%;
		text-align: center;
		padding-left:0px;
	}		

	#content .col-6{
		width:100%;
		text-align: center;
		padding-left:0px;
	}			

	#footer li{
		width:100%;
		text-align: center;
	}





	
}

/* 2026-10-13 banner image same size as the original index header (container 192px incl. the old path bar); desktop only */
@media (min-width: 1171px){
	#header > .container{ min-height: 192px; }
}