/* Generated by less 2.2.0 */
@charset "utf-8";


* {
  box-sizing: border-box;
}

/*瘜冽�譍�钅�撅閖��*/
#name {
	color: #c42605;
	border: #c42605 solid 2px;
	margin:0.15em 0 0 -0.1em;
	padding:0.5em 0;
	text-align:center;
	z-index: 999;
	width: 100%;
	display: block;
	background:white;
	cursor: pointer;
	font-size: 2em;
	font-weight:bold;
}
#name .icon-2down{margin-right: 0.1em;display: inline-block;}
#name .icon-2up{margin-right: 0.1em;display: none;}
.collapse-toggler[aria-expanded=false]> .icon-2down{display: inline-block;}
.collapse-toggler[aria-expanded=false]> .icon-2up{display: none;}
.p1-clock-img{height: 2em;margin-right: 0.1em;}

input.larger {
        width: 20px;
        height: 20px;
		background-color: green;
      }

.main {
       position: relative;
    padding: 0px 2px 0px !important;
    /* margin-bottom: 15px; */
    cursor: pointer;
    font-size: 20px;
      }
/* Hiding the initial checkbox */
      input[type=checkbox] {
        visibility: hidden;
      }
      /* Creating a custom checkbox based on demand */
      .w3docs {
        position: absolute;
            top: 4px;
        left: 0;
        height: 22px;
        width: 22px;
        background-color: white;
		border:1px solid gray;
		border-radius:4px;
      }
      /* Specify the background color to be shown when hovering over checkbox */
      /*.main:hover input ~ .w3docs {
        background-color:#CCC;
      }*/
      /* Specify the background color to be shown when checkbox is active */
      .main input:active ~ .w3docs {
        background-color: white;
      }
      /* Specify the background color to be shown when checkbox is checked */
      .main input:checked ~ .w3docs {
        background-color: orange;
      }
      /* Checkmark to be shown in checkbox */
      /* It is not be shown when not checked */
      .w3docs:after {
        content: "";
        position: absolute;
        display: none;
      }
      /* Display checkmark when checked */
      .main input:checked ~ .w3docs:after {
        display: block;
      }
      /* Styling the checkmark using webkit */
      /* Rotated the rectangle by 45 degree and 
      showing only two border to make it look
      like a tickmark */
      .main .w3docs:after {
        left: 6px;
        bottom: 5px;
        width: 8px;
        height: 15px;
        border: solid white;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
      }
	  
	  	
input[type=text], select, textarea {
  width: 100%;
  padding: 10px 2px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
  margin-right:10pt;
}

input[type=tel], select, textarea {
  width: 100%;
  padding: 10px 2px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
  margin-right:10pt;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}
.inputbox{
	display:contents;
	margin-left:20px;
}
/*input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

input[type=submit]:hover {
  background-color: #45a049;
}*/
#category{
	font-size:2em;
	margin-bottom:1.5em;
	font-weight:bold;
	color:#264043;
	background:url(icon_book.jpg) left no-repeat;
	padding-left:2em;
}
/*.agree{
text-align:center; margin:5px 0;font-family:"敺株��迤暺煾��", "�琿�𩡗ro"; font-size:1.1em;
}*/

.btnbar{
text-align:center;margin-right:10px;
margin-bottom:30px;font-family:"敺株��迤暺煾��", "�琿�𩡗ro"; 
font-size:12px;
 float: left;
  width: 100%;
  margin-top: 6px;
  margin-left:15px;
}

/*p3-1*/
#selterm{
margin: 2% auto;
max-width: 1120px;
    width: 87.34375%;
word-spacing:6px;
font-size:1.5em; 

}
#selterm table tr td{border: solid white 1px; cursor:unset;}
#selterm table tr:first-child td:first-child {border-top-left-radius:10px;/*border: solid white 1px;*/}
#selterm table tr:first-child td:last-child {
    border-top-right-radius: 10px;
   /* border: solid transparent 1px;*/
}
#selterm p.caption{
	font-size:1.2em; 
	
color:#424242;
	line-height:1.6em;
}
#selterm table caption {
	display: block;
    color: #595857;
    font-size: 0.8em;
}
#selterm table caption.red {
    color: #e73828;
}
#selterm div.caption ol li{
    color: #e73828;
    font-size: 0.8em;
    /* padding-top: .75rem; */
    padding-bottom: 1.4rem;
    list-style: decimal;
    margin-left: 4rem;
    margin-top: -.8rem;
}
/*#selterm div.caption::before{
	content: "瘜冽��:";
    position: absolute;
    font-size: 20px !important;
    margin-top: 10px;
}*/
#selterm div.caption{
	padding-top: 20px;
	font-size: 16px !important;
	color: red;
	display: table-cell;
}
#selterm div p.attention{
	font-size: 0.8em;
	
	width: fit-content;
}
/*p3*/
#cardblock{
	max-width: 1120px;
    width: 90%;
border-radius: 10px 10px; 
background-color:#ce3939; 
margin:2% auto;
word-spacing:6px;
color:white;
font-size:1.5em; 
padding:20px 20px;
}
#cardblock h2{
	width: 100%;
	color: white;
    font-size: 1.2em;
}
.container {
font-family:"敺株��迤暺煾��", "�琿�𩡗ro";
font-weight:700;
  border-radius: 5px;
  background-color: #dcedef;
  padding: 20px;
}
.container h2 {
	font-size:1.2em;
	font-weight:bold;
}
 p.enterbd{
	font-size:1em;
  float: left;
  margin-top:1em;
	color:#fff;
	}
	
#plan tr:nth-child(even) {
  background-color: #f0efec;
}
#plan tr:nth-child(odd) {
  background-color: #e5e3d2;
}

caption ol{
	margin-left: 73px;
    margin-top: -1.5em;
	}
caption ol li{
	list-style:outside;
	list-style-type:decimal;
}

/*p3 END*/
.col-25 {
	font-size:1.1em;
  float: left;
/*  width: 20%;
*/  margin-top: 6px;
  margin-left: 15px;
}
.col-15 {
  float: left;
  width: 15%;
  margin-top: 6px;
  margin-right:10pt;
}
.col-20 {
  float: left;
  width: 20%;
  margin-top: 6px;
  margin-right:10pt;
}
.col-40-pg1 {
  float: left;
  width: 40%;
}
.col-60-pg1 {
  float: left;
  width: 60%;
}

#page1 .left{
	text-align:left;
	padding-left:5px;
}
#page1 td.beige{
 vertical-align: middle;
 padding: 1% 0;
  background-color:#f0efec;
  border:solid 2pt #fff;
	text-align:center;
}

/*Page2*/
#plan td{ font-size:1.2em; border:1pt white solid;padding:10px 0 10px 15px; letter-spacing:1px;}
/*#plan{margin-left:100px;}*/
.planyellow{background-color:#f6ab00; color:white; font-weight:bold;}
.planblue{background-color:#ce3939; color:white;/* font-weight:bold;*/}
.plangrey{background-color:#dcedef; color:#6c6c6c;}

.redbtn{
font-family:"敺株��迤暺煾��", "�琿�𩡗ro";
font-size:1.3em; 
font-weight:bold;color:white; 
background-color: #7f492f; 
border:#e17063; 
border-radius: 15px 0px; 
letter-spacing:3px;
padding:10px 25px;
margin-left:10px; 
cursor:pointer; 
text-decoration:none;
}
.redbtn:hover{
background-color: #a86b4d;
}
.borderbtn{
font-family:"敺株��迤暺煾��", "�琿�𩡗ro";
font-size:1.3em;  
font-weight:bold; 
color:#7f492f; 
background-color:white; 
border:1px solid #7f492f; 
border-radius: 15px 0px; 
letter-spacing:3px;
padding:10px 25px;
margin-left:10px; 
cursor:pointer
}
.borderbtn:hover{background-color:#fbf1f0;}
.darkred{color:#bf3019;}


/*Page4*/
#OTPsend{
	font-family:"敺株��迤暺煾��", "�琿�𩡗ro";
	font-size:1.1em;  
	margin:0% 7% 1.5% 14%;
	font-size:1.5em; 
	color:#424242;
	line-height:1.6em;
	font-weight:900;
	color:#54525a;
}
.col-40-pg4 {
 /* float: left;*/
  margin:20px auto;
  width: 40%;
}	

#OTPsend .bluetext{
color:#bc2a0a; font-size:1.3em;font-weight:bold;
}
	
#OTPsend ul{
	list-style:disc inside;
}

#enterOTP img{
	padding-bottom:2em;}
#enterOTP span{
color:#bc2a0a; font-size:1.3em;font-weight:bold;}

#enterOTP,#cellpin,.OTPtime{
	text-align:center;
}
.OTPtime{
color:#bc2a0a; font-size:3.5em;font-weight:bold; padding:20px 0 0 0px;
}
.warn{
	color:#6c6c6c;
	padding:20px 0 0 0px;
}

@media screen and (max-width: 950px){
.col-40-pg1 {
  float: left;
  width: 100%;
}
.col-60-pg1 {
	margin-top:20px;
  float: left;
  width: 100%;
}

}
/*#page1 td{
	border:solid 1pt #FFFFFF;
	padding:15px 0;
	text-align:center;
}*/
#page1 td.red, #page1 td.blue, #page1 td.yellow, #page1 td.brown /*,#page1 input[type=form].term#page1 input[type=button].blue,  #page1 input[type=button].yellow */{
font-family:"敺株��迤暺煾��", "�琿�𩡗ro";
font-size:1em; 
 border-top:2px solid #fff;  /*border-right:2px solid #1a2021;  border-bottom:2px solid black;*/  border-left:2px solid #fff; 
outline-style: solid;
outline-color:#fff;
outline-width:thin;
height:20px;
text-align:center;
padding: 15px 0px;
/*cursor:unset;*/
}
#page1 td.red img,#page1 td.blue img,#page1 td.yellow img{

width:23px;
}
#page1 td.red{
background:#ff2300;
color:white; 
}
#page1 td.brown {

background:#7f492f;
color:white; 
}
#page1 td.blue, .blue {
background:#ce3939;
color:white; 
}
#page1 td.yellow {
background:#fdbe10;
color:black; 
}

#page1 .term{
	width:32%; 
	display:inline-block;
	cursor: pointer;
	}
	
.applybtn{
font-family:"敺株��迤暺煾��", "�琿�𩡗ro";
font-size:1.3em; 
width:30%;
font-weight:bold;color:white; 
background-color: #ce3939; 
border:#e17063; 
border-radius: 5px 5px; 
letter-spacing:3px;
    vertical-align:middle;
    padding: 8px 5px;
cursor:pointer; 
text-decoration:none;
}
.applybtn a, .applybtn a:hover{
	color:white;
	text-decoration:none;
}
.applybtn:hover{
background-color: #f6ab00;
}
/*#page1 input[type=button].blue {
background:url(scope.png) left no-repeat #264043;
}
#page1 input[type=button].yellow {
background:url(scope.png) left no-repeat #fdbe10;
}*/

.col-75 {font-size:1.1em;
  float: left;
  width: 75%;
  margin-top: 6px;
}
.col-100text {
max-width: 1120px;
width: 87%;
margin: 0% auto 1%;
background: white;
height:200px; 
border:1px solid #c99bc3;
font-size: 1.3em; 
font-family:"敺株��迤暺煾��", "�琿�𩡗ro"; 
overflow-y:scroll; 
padding:10px;
}


.bigwords {
	 font-family:"敺株��迤暺煾��", "�琿�𩡗ro";
	line-height:1.2em;
	font-weight:600;
	font-size:3.5em;
	padding:20px 0 20px 40px;
  float: left;
  width: 45%;
}

.smlwords{
	float:left;
	padding:20px 0 20px 0px;
	width:50%;
	height:auto;
}
	
/* Clear floats after the columns */

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

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-25, .col-75,{
    width: 100%;
    margin-top: 0;
  }

}



@keyframes MoveA {
  0% {
    background: #e60000;
  }
  25% {
    background: #24aea0;
  }
  50% {
    background: #24aea0;
  }
  75% {
    background: #e60000;
  }
  100% {
    background: #e60000;
  }
}
@keyframes MoveB {
  0% {
    background: #e60000;
  }
  25% {
    background: #ffc000;
  }
  50% {
    background: #ffc000;
  }
  75% {
    background: #e60000;
  }
  100% {
    background: #e60000;
  }
}

/*iPad in portrait*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1023px) and (orientation : portrait) {
 p.enterbd{
	font-size:0.7em;
	float: left;
	margin-top:1em;
	color:#000;
}
.col-25 {
    width: 20%;
}	
}

@media screen and (max-width: 768px){
	
#page1 td,#plan td,#page1 td.blue{
	font-size:1.5em;
}
#selterm table caption,#selterm table caption.red {
    font-size: 1.2em;
}
.inputbox {
    display:inline-block;
    margin-left: 15px;
}
.col-100text {
width: 82%;
}
	
@media screen and (max-width: 982px){


}
		
}
@media screen and (min-width: 851px) {

.bigwords {
	font-family:"敺株��迤暺煾��", "�琿�𩡗ro";
	line-height:1.2em;
	font-weight:600;
	font-size:3em;
	padding:20px 0 20px 40px;
	float: left;
	width: 30%;
}

.smlwords{
	float:left;
	padding:20px 0 20px 0px;
	width:50%;
	height:auto;
}
}

@media screen and (max-width: 710px){

.agree {
    text-align: initial;
	font-size: 1.25em;
}
.col-15 {
  float: left;
  width: 22%;
  margin-top: 6px;
  margin-right:3px;
}
.col-25{
    width: 100%;
    margin-top: 0;
  }
input[type=text], select, textarea {
  width: 100%;
  padding: 5px;
  margin-right:10pt;
}	
input[type=tel], select, textarea {
  width: 100%;
  padding: 5px;
  margin-right:10pt;
}	
	/*Page2*/
	

#selterm {
	margin: 5% auto;
    font-size: 0.7em;
	width: 93%;
}
label {
  font-size: 0.9em;
  padding: 12px 12px 12px 0;
  display: block;
}

#cardblock > .container p.enterbd{
	font-size:0.5em;
  margin-top:2em;
	}
#plan td{ font-size: 1.3em; }

.redbtn{
font-size:1.3em; 
font-weight:bold;color:white; 
background-color: #7f492f; 
border:#e17063; 
border-radius: 15px 0px; 
letter-spacing:3px;
padding:10px 25px;
margin-left:10px; 
cursor:pointer; 
text-decoration:none;
}
.redbtn:hover{
background-color: #a86b4d;
}
.borderbtn{
	font-family:"敺株��迤暺煾��", "�琿�𩡗ro";
	font-size:1.3em;  
	font-weight:bold; 
	color:#7f492f; 
	background-color:white; 
	border:1px solid #7f492f; 
	border-radius: 15px 0px; 
	letter-spacing:3px;
	padding:10px 25px;
	margin-left:10px; 
	cursor:pointer
}
#page1 .term{
	width:60px; 
	height:35px;
	float:left; 
	margin-left:10pt;
	display:inline-block;
}
.applybtn{
	background-color: #ce271d; 
	margin-top:0.5em;
	padding:5px 5px;
	cursor:pointer; 
}
	
#name {
	border: #c42605 solid 2px;
	/*margin:0.25em 1em 0 1em;*/
	padding:0.5em 0;
	text-align:center;
	z-index: 999;
	width: 100%;
	display: block;
	background:white;
	cursor: pointer;
	font-size: 1.6em;
	font-weight:bold;
}
#OTPsend{
	margin:0% 7% 1.5% 17%;
	font-size:1em; 
	line-height:1.6em;

	}

}

@media screen and (max-width: 414px) {


.applybtn{
	background-color: #ce271d; 
	margin-top:0.5em;
	    width: 70%;
	padding:5px 5px;
	cursor:pointer; 
}

  .bigwords {
	font-size:3.7em;
	margin-bottom:5px;
	padding:20px 0 5px 10px;
  width: 100%;
}
.smlwords{
	float:left;
	padding:0px 10px 0px 10px;
	width: 100%;
	height:auto;
}

}



/*
@media screen and (min-width: 1250px) and (max-width: 1449px) {
  
}
@media screen and (min-width: 1025px) and (max-width: 1249px) {
  
}
@media screen and (min-width: 851px) and (max-width: 1024px) {
  
}

@media screen and (min-width: 441px) and (max-width: 850px) {
 
}


*/