@charset "utf-8";
/* body ********************************************/
   html{
	   max-height:100%;
	   position:relative;
	   height:100%;
   }
	body {
	margin-left: 0;
	margin-top: 0;
	width: 100%;
	position: relative;
	font-family: "Noto Sans CJK JP Medium,微軟正黑體,新細明體,Arial, Helvetica, sans-serif";
	}



	.bg-m {
	background-color: #e1e1e1;
		}
		 /*---------- mainContent -------------------*/
        .mainContent {
          position: relative;
          width: 100%;
          height: 100%;
          z-index: 2;
          background-color: #ffffff; }
        /*-------------bodyContent-------------*/


	  /*mainbody*******************************************/

#mainbody {
	width: 1140px;
	padding-top: 3px;
	margin: 0 auto;

	background-color: #E7F3F3;
	position: relative;
	visibility: visible;
		/*
		top: 5px;
		display:flex;*/
}




		/*   ---------- Header -----------*/
    .header {
	width: 100%;
	background-color: #FF3366;
	display: inline-block;
	box-shadow: #666 0px 2px 3px;
	background-repeat: repeat-x;
	height: 50px;
	position: relative;
}

    .nav {
	width: 1140px;
	margin: 0 auto;
	position: relative;
	height: 50px;
}

	.navItems {
	padding: 5px 0px 2px 5px;
	display: inline-block;
	color: #FFF;
}
	.navLeft{
      position: relative;
          margin-left:3px;
		  padding: 8px 0px 2px 5px;
		  }
        .navLeft .navLogo {
	position: relative;
	margin-left:3px;
	position: absolute;
	color: #fff;
	left: 5px;
	z-index: 5;
	cursor: pointer;
	font: 28px Trebuchet MS, Arial, Helvetica, sans-serif;
	top: 5px;
		}

 .n-bold {
	font: bold 28px Verdana, Geneva, sans-serif;}

  .navRight {
          position: absolute;
          right: 19px;
          top: 10px; }

		.index-picture{
   		 width:100%;
   		 position:relative;
		}
		.index-picture img{
   		 width:100%;
		}

		#logotext {
	font-size: 26px;
	font-weight: bolder !important;
		}

/*logo*******************************************/

.Sign-in {
	color: #FFF;
	border: 1px solid #F2F2F2;
	background-color: #0E7BAF;
	padding: 3px;
}
.Sign-in:hover{
	color: #000;
	border: 1px solid #999;
	background-color: #CCC;
	cursor: pointer;
}

/*main Contents*******************************************/
#Contents {
	padding: 8px 100px;
	background-repeat: no-repeat;
	transition-duration: 0.55s;
}
#Contents2 {
	padding: 8px 0 10px 400px;
	height: 420px;
	background-image: url(../img/02.jpg);
	background-repeat: no-repeat;
	transition-duration: 0.55s;
}

/*index-Contents*******************************************/
#index-Contents {
	padding: 100px 40px 10px 700px;
	height: 600px;
	background-image: url(../img/03.jpg);
	background-repeat: no-repeat;
	transition-duration: 0.55s;
}

#index-Contents2 {
	padding: 100px 40px 10px 700px;
	height: 660px;
	background-image: url(../img/02.jpg);
	background-repeat: no-repeat;
	transition-duration: 0.55s;
}


/*text*******************************************/

#text {
	width: 98%;
	font-weight: bolder;
	display: inline;
	text-shadow: 3px 1px 5px #000;
	font-family: 微軟正黑體,新細明體;
	z-index: 300px;
	}

#apDiv2 {
	width: 98%;
	font-weight: bolder;
	display: inline;
	text-shadow: 3px 1px 5px #000;
	font-family: 微軟正黑體,新細明體;
	z-index: 300px;
	transition-duration: 0.55s;
	}

.big-tandard {
	font-size:50px;
	color:#FFF;

}
.text-g{
	width: 98%;
	font-weight: bold;
	color: #006666;
	font-family: 微軟正黑體,新細明體;
	font-size: 28px;
	clip: rect(auto,auto,auto,auto);
	/*padding: 0 0 2px 0px;
	text-align: center;*/

}

.text16 {
    width: 98%;
    margin-top: 4px;
    font-size: 16px;
    padding: 0 0 2px 0px;
    font-family:微軟正黑體,新細明體, Arial, Helvetica, sans-serif;
}

.text16-b {
	font-weight: bold;
	font-size: 16px;
}


.text18 {
    width: 98%;
    margin-top: 4px;
    font-size: 18px;
    padding: 0 0 2px 0px;
    font-family:微軟正黑體,新細明體, Arial, Helvetica, sans-serif;
}

.text20 {
    width: 98%;
    margin-top: 4px;
    font-size: 20px;
    padding: 0 0 2px 0px;
    font-family:微軟正黑體,新細明體, Arial, Helvetica, sans-serif;
}

.text20-b {
	font-weight: bold;
	font-size: 20px;
}

.padding-top8 {
	padding-top: 8px;
}

/*main Contents*******************************************/
#topic {
    height: auto;
    padding: 2px 100px;
    background-repeat: no-repeat;
}
.topic-box {
	margin-top: 20px;
	background-color: #EEEEEE;
	width: 98%;
	height: auto;
	display: inline-block;
	padding: 15px;
	border-image: initial;
	border-width: thin;
	border-style: dashed;
	border-color: #D4D4D4;
	margin-bottom: 10px;

}
.topic-text-box {
	border-radius:10px;
	margin: 10px 0 10px 0px;
	font-weight: bold;
	font-family:微軟正黑體,新細明體;
	color:	#333333;
	font-size: 19px;
	padding: 10px 0 10px 10px;
	background-color: #FFFFCC;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FFFFEA), to(#fff));
}

.left {
	width: 300px;
	padding-top: 5px;
	float: left;
	padding-left: 16px;
	color: #FF0033;
    font-size: 18px;
	height: auto;
	margin: 0px 22px 0px 0px;
}
.right {

	width: 300px;
	padding-top: 5px;
	float: right;
	color: #FF0033;
    font-size: 18px;
	height: 20px;
	margin: 0px;
}


.quiz-text{
	width: 99%;
	height: inherit;
	padding: 5px;
	display: inline-block;
	}


.quiz-box3
	{
	width: 30px;
	height:30px;
	display: inline-block;
	background: #DCF1FC;
	border: 1px dashed #0E7BAF;
	margin: 5px;
	padding: 5px 8px 5px 8px;
	border-radius: 50px;
	font-weight: bolder;
	text-align: center;
}


.quiz-box3:hover {
	background-color: #0E7BAF;
	border: 1px dashed #fff;
	opacity: 0.9;
	cursor: pointer;
	color:#FFFFFF;
}

.quiz-box3-active {
	background-color: #0E7BAF;
	border: 1px dashed #fff;
	opacity: 0.9;
	cursor: pointer;
	color:#FFFFFF;
}


#text-button, #Quiz-button {

	width:100%;
	padding-top:10px;
	text-align: center;
	margin: 0px auto;
	}
.text-button {
	font-family: 微軟正黑體,新細明體;
	width: 160px;
	color:#FFF;
	font-size: 18px;
	text-align: center;
	border: 2px solid #FFFFFF;
	background-color: #FF3366;
	padding: 5px 10px 5px 10px;
	border-radius:30px;
	display:inline-block;
	}
.text-button:hover{
	color: #FF3366;
	border: 2px solid #FF3366;
	background-color: #fff;
	cursor: pointer;}

/*footer*******************************************/
.footer {
 width: 100%;
 padding: 10px 0 10px 0;
 background: #CC6633;
 color: #FFF;
 font-size: 16px;
 line-height: 24px;
 display: inline-block;
}




.White {color: #fff !important;}
.w3-check,.w3-radio{width:24px;height:24px;position:relative;top:6px; margin: 10px 0 20PX 0; }
.w3-container{padding:0.01em 16px; background-color: rgba(255,255,255,0.8); border-radius:15px; padding:10px;  }
.w3-input{padding:6px;display:block;border:none;border-bottom:1px solid #ccc;width:96%;}
.w3-select{font-weight: bold; font-family: 微軟正黑體,新細明體; padding:6px 0;width:100%;border:none;border-bottom:1px solid #ccc; font-size: 16px;color:#630;}

.rb-tab-active .rb-spot {
  background: rgba(0,0,0,.35);
  border: 2px solid rgba(243,49,128,.6);
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

#sn{pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(/\s/g'').{20,}";}

#phone{pattern="[0-9]";}