body { background-color:transparent; }
a:link { text-decoration: none;}
a:visited { text-decoration: none;}
a:hover { text-decoration: none; color: #CFF;}
a:active {text-decoration: none;}
a:hover, a:active, a:focus {  outline: 0; }
	
	h1 { font-size: 1.5em; line-height: 1em;}
	h2 { font-size: 1.375em; line-height: 1.091em;}
	h3 { font-size: 1.25em; line-height: 1.2em;}
	h4 { font-size: 1.125em; line-height: 1.333em;}
	h5 { font-size: 1em; line-height: 1.5em;}
	h6 { font-size: 1em; line-height: 1.5em;}
	p { font-size: 1em; line-height: 1.5em;}
	.copy h1, .copy h2, .copy h3, .copy h4, .copy h5, .copy h6, .copy p, .copy ul { margin-top:1.5em;}
	footer {color: #F0F0F0;}
	footer a {color: #F0F0F0;}
 
.w1 { padding:5px; background-color:rgba(255,255,255,.7); margin-top: 20px;  -webkit-border-radius: 10px; border-radius: 10px;  } 

/*-------------------------------------------------------------------------------------------
	LAYOUT
-------------------------------------------------------------------------------------------*/

    /* Header  		  	  -------------------------------------------------------*/
	header { background:url(../images/bg_header.jpg); width:100%; height:50px;}
	
	.sticky {box-shadow: -3px 0 3px rgba(45,175,235,.25);}
    /* Footer  			  -------------------------------------------------------*/

	
    /* Sections  	      	  -------------------------------------------------------*/
	section {position: relative;}


/*-------------------------------------------------------------------------------------------
font
-------------------------------------------------------------------------------------------*/
.title2 { background-color:rgba(34,34,34,.7); color:#fff; padding: 10px 20px; -webkit-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0; display:inline-block;
 font-size:18px;}
 .title3 { background-color:rgba(255,120,0,.7); color:#fff; padding: 10px 20px; -webkit-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0; display:inline-block;
 font-size:18px;}
.f1{ font-size: 17px; line-height: 30px; text-indent: 45px; margin: 5px 0px; text-shadow: 1px 1px #fff; color:#000;}
.f2{ font-size: 15px; line-height: 25px; margin: 5px 2px; color:#0046a9; font-weight:bold;}
.f2_red{ font-size: 15px; line-height: 25px; margin: 5px 2px; color:#900; font-weight:bold;}
.f2_red a{ font-size: 15px; line-height: 25px; margin: 5px 2px; color:#900; font-weight:bold;}
.f2_red a:hover{ font-size: 15px; line-height: 25px; margin: 5px 2px; color:#D50000; font-weight:bold;}
.title { background-color:rgba(0,51,153,.7); color:#fff; padding: 10px; -webkit-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0;}
.red { color:#C00;}
.red_del{	color:#C00; text-decoration: line-through;}	
.blue { color:#039;}
.green { color:#066;}
.blue_r { font-size: 15px; line-height: 28px; color:#fff; background-color:rgba(0,170,170,.8); padding: 3px 10px; margin: 5px 0px; display:inline-block; }
.green_r { font-size: 13px; line-height: 18px; color:#fff; background-color:rgba(0,170,85,.8); padding: 3px 8px; margin: 2px 5px; display:inline-block;
	-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;  }
.red_r { font-size: 15px; line-height: 28px; color:#fff; background-color:rgba(193,0,0,.8); padding: 3px 10px; margin: 5px 0px; display:inline-block; }
.yellow_r { font-size: 15px; line-height: 28px; color:#fff; background-color:rgba(224,165,0,.8); padding: 3px 10px; margin: 5px 0px; display:inline-block; }
.copyright {font-size: 12px; text-align:center; }
.note { font-size: 11px; color:#990000;	margin: 5px 0px 0px 30px; padding: 2px; background-color:rgba(255,255,255,.2);display:inline-block;  }
.black1 { font-size:15px; color:#222;}
.black2 { font-size:15px; color:#222; line-height:21px;}
.black3 { font-size:13px; color:#666; line-height:15px;}
.name { font-size: 21px; font-family: Georgia, Times, serif; }
.intro {font-size: 17px; font-family: Georgia, Times, serif; line-height: 25px; color:#555b62; font-style:italic;}
.orcal_c1{ background-image:url(../images/oral_class1.jpg); background-repeat:no-repeat; width: 100px; height:62px; 
  -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5); box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5); border: 1px solid #CCC; }
.orcal_c1:hover{margin: -2px 0px 0px -2px;}
.orcal_c2{ background-image:url(../images/oral_class2.jpg); background-repeat:no-repeat; width: 100px; height:62px;
  -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5); box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5); border: 1px solid #CCC; }
.orcal_c2:hover{margin: -2px 0px 0px -2px;}
.imageleft2{
	float: left;
	margin: 10px 20px 10px 5px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
  border: 1px solid #CCC;
  transition:width 0.5s; -webkit-transition:width 0.5s; -moz-transition:width 0.5s; -o-transition:width 0.5s; -ms-transition:width 0.5s;  
}

.teacherarea { height: 460px; overflow: auto; margin: 0px; }
.teacherarea::-webkit-scrollbar { width: 12px;}
.teacherarea::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #000;}
.teacherarea::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); background-color: #8a8a8a;}
/*-------------------------------------------------------------------------------------------
 btn
-------------------------------------------------------------------------------------------*/	

.btn_blue {
	float:right;
	font-size:15px;
	font-weight:normal;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	border:5px solid rgba(255, 255, 255, 0.8);
	padding:3px 18px;
	text-decoration:none;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #91ddf4), color-stop(100%, #08b2e7) );
	background:-moz-linear-gradient( center top, #91ddf4 5%, #08b2e7 100% );
	background:-ms-linear-gradient( top, #91ddf4 5%, #08b2e7 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#91ddf4', endColorstr='#08b2e7');
	background-color:#91ddf4;
	color:#ffffff;
	display:inline-block;
	text-shadow:1px 1px 0px #287ace;
	font-weight:bold;
}.btn_blue:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #08b2e7), color-stop(100%, #91ddf4) );
	background:-moz-linear-gradient( center top, #08b2e7 5%, #91ddf4 100% );
	background:-ms-linear-gradient( top, #08b2e7 5%, #91ddf4 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#08b2e7', endColorstr='#91ddf4');
	background-color:#08b2e7;
	color:#ffffff !important;
}.btn_blue:active {
	position:relative;
	top:1px;
}
.btn_orange {
    margin-left: 10px;	
	font-size:16px;
	font-weight:normal;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	border-radius:15px;
	border:5px solid rgba(255, 255, 255, 0.8);
	padding:9px 18px;
	text-decoration:none;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ffa443), color-stop(100%, #ff7400) );
	background:-moz-linear-gradient( center top, #ffa443 5%, #ff7400 100% );
	background:-ms-linear-gradient( top, #ffa443 5%, #ff7400 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa443', endColorstr='#ff7400');
	background-color:#ff7400;
	color:#ffffff;
	display:inline-block;
	text-shadow:1px 1px 0px #ff7400;
	font-weight:bold;
}.btn_orange:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ff7400), color-stop(100%, #ffa443) );
	background:-moz-linear-gradient( center top, #ff7400 5%, #ffa443 100% );
	background:-ms-linear-gradient( top, #ff7400 5%, #ffa443 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7400', endColorstr='#ffa443');
	background-color:#ffa443;
	color:#ffffff !important;
}.btn_orange:active {
	position:relative;
	top:1px;
}

.btn_pre {
    margin-left: 10px;	
	font-size:16px;
	font-weight:normal;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	border-radius:15px;
	border:5px solid rgba(255, 255, 255, 0.8);
	padding:9px 18px;
	text-decoration:none;
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	background:-ms-linear-gradient( top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ededed), color-stop(100%, #dfdfdf) );
	background-color:#ededed;
	color:#777777;
	display:inline-block;
	text-shadow:1px 1px 0px #ffffff;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #ffffff;
 	-moz-box-shadow:inset 1px 1px 0px 0px #ffffff;
 	box-shadow:inset 1px 1px 0px 0px #ffffff;
	font-weight:bold;
}.btn_pre:hover {
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	background:-ms-linear-gradient( top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #dfdfdf), color-stop(100%, #ededed) );
	background-color:#dfdfdf;
	color:#777777 !important;
}.btn_pre:active {
	position:relative;
	top:1px;
}

.btn_gray {
	font-size:16px;
	font-weight:normal;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	border:3px solid #dcdcdc;
	padding:6px;
	text-decoration:none;
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	background:-ms-linear-gradient( top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ededed), color-stop(100%, #dfdfdf) );
	background-color:#ededed;
	color:#777777;
	display:inline-block;
	text-shadow:1px 1px 0px #ffffff;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #ffffff;
 	-moz-box-shadow:inset 1px 1px 0px 0px #ffffff;
 	box-shadow:inset 1px 1px 0px 0px #ffffff;
}.btn_gray:hover {
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	background:-ms-linear-gradient( top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #dfdfdf), color-stop(100%, #ededed) );
	background-color:#dfdfdf;
	color:#ffffff !important;
}.btn_gray:active {
	position:relative;
	top:1px;
}

.btn_teacher {
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	border:1px solid #dcdcdc;
	width: 210px; height:168px;
	text-indent: -999px;
	padding:0px;
	margin-top:20px;
	text-decoration:none;
	background-image:url(../images/teacherpic.jpg);
	background-repeat:no-repeat;
	display:inline-block;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #ffffff;
 	-moz-box-shadow:inset 1px 1px 0px 0px #ffffff;
 	box-shadow:inset 1px 1px 0px 0px #ffffff;
}.btn_teacher:hover {
	background-image:url(../images/teacherpic_hover.jpg);
}.btn_teacher:active {
	position:relative;
	top:1px;
}

.btn_customer {
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	border:1px solid #dcdcdc;
	width: 210px; height:168px;
	text-indent: -999px;
	padding:0px;
	margin-top:20px;
	text-decoration:none;
	display:inline-block;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #ffffff;
 	-moz-box-shadow:inset 1px 1px 0px 0px #ffffff;
 	box-shadow:inset 1px 1px 0px 0px #ffffff;
}

/* ~~ step ~~ */
.step ul{ list-style:none; padding: 0px; margin:0px;}
.step ul li { display: inline-block; float:left; position:relative; margin: 5px 0 0 0; padding:3px; height:45px; width:210px;
             text-decoration: none;  outline-style:none;  -moz-border-radius  : 5px;  -webkit-border-radius: 5px; z-index:99; }	 
.step ul li.focus { color:#FFF; background: #EA8511; border: 1px solid #EA8511; cursor:text; margin: 0px 10px 0px 0px;
			 -moz-box-shadow: 5px 5px 8px #888;  -webkit-box-shadow: 5px 5px 8px #888;  box-shadow: 5px 5px 8px #888;}
.step ul li.disabled { color:#666; background: #ededed; border: 1px solid #999; cursor:text; margin: 0px 10px 0px 0px}	 	 
.step ul li a{ color:#FFF !important; }
.stepDesc{  position:relative; display:block;float:left; text-align: left;padding:2px 5px; font: bold 20px Verdana, Arial, Helvetica, sans-serif;}
.stepDesc small{ font: normal 15px Verdana, Arial, Helvetica, sans-serif;}
.clear { clear:both; margin-top: 20px; }

.iframe_v1{	border-radius:8px; border:10px solid rgba(255,255,255,.6); 	-webkit-box-shadow:inset 1px 1px 0px 0px #cae3fc;
 	-moz-box-shadow:inset 1px 1px 0px 0px #cae3fc;
 	box-shadow:inset 1px 1px 0px 0px #cae3fc;}

/* ~~ 表單按鈕 ~~ */
input.type1 {border:0; padding:2px; font-size:14px; color:#3b5835; border:solid 1px #ccc; margin:0 0 5px; font-family: 微軟正黑體;
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
-moz-box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5); -webkit-box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.5); box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);}
select.type1 {border:0; padding:2px; font-size:14px; color:#3b5835; border:solid 1px #ccc; margin:0 0 5px; width:206px; font-family: 微軟正黑體;
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; width: auto;
-moz-box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5); -webkit-box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.5); box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);}	

label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding-left: 25px;
    margin-right: 15px;
    font-size: 13px;
}
input[type=radio] {
    display: none;
}
label:before {
    content: "";
    display: inline-block;
 
    width: 16px;
    height: 16px;
 
    margin-right: 10px;
    position: absolute;
    left: 0;
    bottom: 1px;
    background-color: #989898;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
.radio label:before {
    border-radius: 8px;
}
input[type=radio]:checked + label:before {
    content: "\2022";
    color: #ff8800;
    font-size: 35px;
    text-align: center;
    line-height: 15px;
}

input[type=checkbox] {
    display: none;
}
.checkbox label:before {
    border-radius: 3px;
}
input[type=checkbox]:checked + label:before {
    content: "\2713";
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
    font-size: 16px;
    color: #ff8800;
    text-align: center;
    line-height: 18px;
	font-weight:bold;
}

table#a1 { width: 100%; margin: 0px; padding: 0px; border-collapse: collapse; border: 1px solid #c4c4c4; font-size:15px; }
table#a1 th { padding: 5px 2px;border-bottom: 1px solid #c4c4c4; background-color:#dadada; text-align:center;}
table#a1 td { padding: 5px;border-bottom: 1px solid #c4c4c4; }
table#a1 .icon{ text-align: right; padding-right:5px;}