html{
	font-size: 16px;

}

body{

	font-family:"Microsoft JhengHei";
	font-size: 16px;
	line-height: 1.5;
	/*background-color: #e7e2cf;*/
	
}

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




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



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

li{
	float:left;

}


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

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

.container{
	max-width: 1170px;
	/*background-color: #d7ecf3;*/
	display: block;
	margin: 0px auto;
}


#header{
 	width: 100%;
    z-index: 888;
    position:fixed;
   	top: 0px;
   	left:0px;
   	overflow: hidden;
    /*height: 140px;*/

}


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


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

/* 2026-10-13 same as index.css: banner image on the header container (contain), not the whole header */
#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.3);
	margin-right: 50px;
	/*letter-spacing: 2px;*/
	font-weight: bold;
	color:#FFF;

}

#welcome a {
/*	padding: 0px 30px;*/
	/*letter-spacing: 2px;*/
	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: 5px 20px 5px 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;
	background-color: #fff;
  	opacity: 0.8;	
}

#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;

}




.msg{
	background-color: white;
	width:50%;
	margin: 0 auto;	
	color:red;	
}


.btn{
	display: block;
	margin-top:10px;
}

#content{
	margin-top: 240px;
	margin-bottom: 40px;

}

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

.title{
	border-bottom: 2px solid #2a9cc8;
	color:#0d9cfd;
	font-size: 1.2rem;	
	font-weight: bold;
	padding: 20px 0;
	width:50%;
	margin: 0 auto;
	text-align: center;

 }

 
.rows{
	width:50%;
	margin: 0 auto;	
	padding-left: 11%;
	box-sizing: border-box;
}

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


.row{
	padding:10px;
}

input[name="_CD_ACCOUNTNO"]{
	width: 12em;
	vertical-align: middle;
}

.mform .fieldlabel{
	display:inline-block;
	font-size:14px;
	color:#555555;
	margin-right:8px;
	vertical-align:middle;
}
.mform .hint{
	display:block;
	font-size:12px;
	color:#888888;
	line-height:1.5;
	margin-top:4px;
}
.mform input[type="text"]{
	border:#cccccc 1px solid;
	border-radius:4px;
	box-sizing:border-box;
}

.col-3{
	float:left;
	width:25%;
	font-weight:bold;
	letter-spacing:2px;
	/*padding-left: 5%;*/
	font-size: 1.07em;
}

input[type="text"] ,input[type="password"] {
		height: 2.375em;
}

#mypic{
	display: inline-block;
	height: 2.375em;
	vertical-align: bottom;
	cursor: pointer;
	margin-right: 8px;
}
input[name="checkCode"]{
	vertical-align: bottom;
	width: 8em;
	height: 2.375em;
	display: inline-block;
}

.col-9{
	float:left;
	width:75%;

}


.conclusion{
	background-color: #e9e6e6;
	border-radius: 0px 0px 10px 10px;
	padding:20px;	
}


.mnav{
/*	background-color: #e9e6e6;
	border-radius: 0px 0px 10px 10px;		
*/
}





.mform table{
	display: inline-block;
	margin-top:4px;
	border:none;
}




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

	/*height: 2.375em;	  */
    border: none;
   	padding: 10px 10px;
    text-align: center;
    text-decoration: none;
	cursor: pointer;
    /*color: white;*/
    /*color: #0d9cfd;*/
    font-size: 1.07rem;

}

.mform .al{
	text-align: left;
}




#footer{
	/*background-image: url(https://dcetest.kmu.edu.tw/img/bg1.jpg);*/
	/*background-color: #99BBFF;*/
	background: rgba(175, 223, 229, 0.3);
	-webkit-background-size: cover;
	background-size: cover;
	 background-position: center center; 
	 background-repeat: no-repeat;
 	width: 100%;
    z-index: 888;
    color: #7e7e7e;
    padding: 5px 0;

}

#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;
}



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


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


#footer a:hover{
	color:#2a9cc8;
}


#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;

}


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

	}

	#header{
		/*background-image: none;	*/
		position: relative;
		-webkit-background-size: auto;
		background-size: auto;
	}


	#mpath{
		width:100%;
	}

	#imenu{
		display:inline-block;
	}

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


	#content{
		margin-top: 20px;
		margin-bottom:20px;
	}

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


	/* 下面的css使input的寬度不會超過div */
	input[type="text"] {
  		display:inline-block;
  		width:100%;
	}
	.col-3{
		padding-left: 0px;
	}	

}


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

	}
}


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

	}

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

	#header{
		/*background-image: none;	*/
		position: relative;
		-webkit-background-size: auto;
		background-size: auto;
	}


	#mpath{
		width:100%;
	}

	#imenu{
		display:inline-block;
	}

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


	#content{
		margin-top: 20px;
		margin-bottom:20px;
	}


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

	.footer .boundary:after {
    	content: "";
    	padding: 0px;
	}		

	.footer .col-12{
		text-align: center;
	}

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


	/* 下面的css使input的寬度不會超過div */
	input[type="text"] {
  		display:inline-block;
  		width:100%;
	}

	.col-3{
		width:100%;
		text-align: left;
		background-color: #d7ecf3;
	}	
	.col-9{
		width:100%;
		text-align: left;
	}

	

}

/* 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; }
	#header > .hpath{ position: relative; margin-top: -54px; }	/* path bar overlays the banner bottom, same look as inext.php */
	#content{ margin-top: 230px; }	/* fixed header = 192px banner (path bar overlaid) */
}

/* 2026-10-23 home look for the forgot-password form (forgoth.htm .fg): narrow centered column,
   label above field, full-width inputs and button, notes in an info box. */
.mform .fg{ max-width: 480px; margin: 0 auto; text-align: left; }
.fg-lead{ margin: 0 0 18px; color: var(--hc-muted, #3f526a); line-height: 1.7; }
.fg-field{ margin-bottom: 12px; }
.fg-label{ display: block; margin-bottom: 6px; font-weight: bold; color: var(--hc-fg, #101d2e); }
.mform .fg input[type="text"]{ width: 100%; height: 2.6em; padding: 0 12px; border: 1px solid #b6cde6; border-radius: 8px; font: inherit; vertical-align: middle; }
.mform .fg input[type="text"]:focus{ outline: 2px solid var(--hc-d-gr, #6cc4f0); outline-offset: 1px; border-color: var(--hc-brand, #0349a7); }
.fg-cap{ display: flex; align-items: center; gap: 10px; }
.mform .fg #mypic{ flex: none; height: 2.6em; margin: 0; border-radius: 6px; border: 1px solid #b6cde6; }
.mform .fg .fg-cap input[name="checkCode"]{ flex: 1; width: auto; height: 2.6em; }
.mform .fg .hint{ margin-top: 6px; }
.fg-submit{ margin: 16px 0 14px; }
.fg-submit table, .fg-submit tbody, .fg-submit tr, .fg-submit td{ display: block; width: 100%; border: 0; padding: 0; }
/* messages use SweetAlert, so the template's .msg / .mnav rows are empty: no padding (forgotL.htm) */
#content > .container > .msg, #content > .container > .mnav{ display: none; }
.mform .fg-submit button{ width: 100%; padding: 11px 16px; font-size: 1rem; }
.fg-note{ padding: 10px 16px; border-radius: 10px; background: var(--hc-soft, #e3f3fd); color: var(--hc-fg, #101d2e); font-size: .92rem; line-height: 1.6; }
.fg-note strong{ color: var(--hc-brand, #0349a7); }
.fg-note ol{ display: block; margin: 4px 0 0; padding-left: 1.4em; list-style: decimal; }
.fg-note li{ float: none; }