@charset "utf-8";
/* CSS Document */
/* -表單-------------------------------------------------------------------------------------------------------*/
.styled-input {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0px 0px 0px 0px; padding:0; list-style:none;
}
.styled-input li {
	position: relative;
	width: 100%;
	margin: 30px 0px 0px 0px; padding:0; list-style:none;
	font-size: 16px; color:#666;  background:none;
}
.styled-input li.half02 {
	width: 100%;
}
.styled-input li.half02:after {
	content: '';
	display: block;
	width: 100%;
	height: 2px;
	background:#7BB241;
	margin: 27px 0px 0px 0px;
}
.styled-input input[type="text"],
.styled-input input[type="password"]{
	width:100%;
	padding: 17px 10px 26px 110px;
	height: 10px;
	color: #666;
	background-color: none;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	border: none;        
	border-bottom: 2px solid #7BB241;

	border-radius: 0;
-webkit-appearance: none;

}
.styled-input textarea {
	width:100%;
	padding: 23px 15px;
	height: 10px;
	font-size: 14px;
	color: #666;
	background-color: none;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	border: 2px solid #7BB241;

	border-radius: 0;
-webkit-appearance: none;

}
.styled-input input[type="text"].active,
.styled-input input[type="password"].active,
.styled-input textarea.active {
	padding: 23px 0px 20px 110px;
}
.styled-input textarea {
	resize: none;
	height: 150px;
	display: block;
}
.styled-input input[type="text"]:focus, .styled-input input[type="password"]:focus, .styled-input textarea:focus, .styled-input select:focus{
	border-bottom: 2px solid #0085ca;
	transition: 0.4s;
}

.styled-input label {
	position: absolute;
	font-size: 16px; color:#131313;
	top: 15px;
	left: 0;
}
.styled-input label:before {
	content: '*';
	display: inline-block;
	margin:0px 10px 0px 0px;
	font-size: 16px; color:#131313;
	font-family: 'Open Sans';
	font-weight: 700;
}
.styled-input label:after {
  content: "\f0da";
  display: inline-block;
  margin:0px 0px 0px 8px;
  font-size: 14px; color:#131313;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}
.styled-input label.active {
	visibility: visible;
	opacity: 1;
	margin-top:0px;
}
.styled-input label,
.styled-input label.active {
	-webkit-transition: all 0.3s ease-in-out;
       -moz-transition: all 0.3s ease-in-out;
	     -o-transition: all 0.3s ease-in-out;
	    -ms-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
}
.styled-input ::-webkit-input-placeholder { font-size: 16px; color:#131313; }
.styled-input ::-moz-placeholder { color: #888; }
.styled-input :-ms-input-placeholder { color: #888; }
.styled-input :-moz-placeholder { color: #888; }

@media only screen and (min-width: 0px) and (max-width: 500px){
.styled-input label {
	top: -10px;
}
.styled-input input[type="text"],
.styled-input input[type="password"]{
	width:100%;
	padding: 17px 10px 26px 0px;
}
.styled-input input[type="text"].active,
.styled-input input[type="password"].active,
.styled-input textarea.active {
	padding: 23px 0px 20px 0px;
}
}

.styled-input02 {	margin:0px 0px 0px 0px; padding:0; list-style:none; 
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;}
.styled-input02 li{ width:100%; margin:0px 0px 20px 0px; padding:0; list-style:none; height:auto; overflow: hidden; font-size: 16px; color:#666; }
.styled-input02 h2{ float:left; font-size: 16px; color:#fff; width:180px; padding:12px 20px; background: #7db343; height: 52px;
-webkit-border-top-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-bottomleft: 8px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;

display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: start; -ms-flex-pack: start; 
justify-content: flex-start; -ms-flex-line-pack: center; 	align-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; 
}
.styled-input02 h2 img{ margin:0px 10px 0px 0px; }
.styled-input02 input[type="text"], .styled-input02 input[type="password"], .styled-input02 select{ float:left; width:calc(100% - 180px) ;
	padding:12px 15px;
	font-size: 16px;
	color: #666;
	background:#FFF;
	border:none;
	height: 52px;

-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
.styled-input02 textarea {
    resize: none;
    height: 423px;
    width:100%;
    display: block;
    border-radius: 8px;
    background:#FFF;
	border:none;
	padding:20px 20px;
}
.styled-input02 input[type="text"]:focus, .styled-input02 input[type="password"]:focus, .styled-input02 textarea:focus, .styled-input02 select:focus{
	background: rgba(0, 0, 0, 0.1);
}
@media only screen and (min-width: 0px) and (max-width: 500px){
.styled-input02 h2{ width:100%; border-radius: 8px; margin:0px 0px 20px 0px;
}
.styled-input02 input[type="text"], .styled-input02 input[type="password"], .styled-input02 select{ width:100% ;border-radius: 8px;
}
}
@media only screen and (min-width: 1024px) and (max-width: 1250px){
.styled-input02 textarea {
	height: 495px;
}
}
@media only screen and (min-width: 0px) and (max-width: 1023px){
.styled-input02 textarea {
	height: 200px;
}
}

.styled-input03 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0px 0px 0px 0px; padding:0; list-style:none;
}
.styled-input03 li {
	position: relative;
	width: 100%;
	margin: 20px 0px 0px 0px; padding:0; list-style:none;
	font-size: 16px; color:#666;  background:none;
}
.styled-input03 li.half02 {
	width: 100%;
}
.styled-input03 li.half02:after {
	content: '';
	display: block;
	width: 100%;
	height: 2px;
	background: #00D69D;
	margin: 27px 0px 0px 0px;
}
.styled-input03 li.txt {
	width: 100%;
	margin: 10px 0px 0px 0px; padding:0; list-style:none;
	font-size: 0.875rem; color:#888; 
}
.styled-input03 li.no input, .styled-input03 li.no textarea {
	background: none;
	border-bottom: 2px solid #35819b; color: #008dd1;
}
.styled-input03 input[type="text"],
.styled-input03 input[type="password"]{
	width:100%;
	padding: 17px 10px 26px 110px;
	height: 10px;
	color: #666;
	background-color: none;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	border: none;        
	border-bottom: 2px solid #00D69D;

	border-radius: 0;
-webkit-appearance: none;

}
.styled-input03 input[type="text"].active,
.styled-input03 input[type="password"].active,
.styled-input03 textarea.active {
	padding: 17px 10px 26px 110px;
}
.styled-input03 textarea {
	resize: none;
	height: 150px;
	display: block;

	border-radius: 0;
-webkit-appearance: none;

}
.styled-input03 input[type="text"]:focus, .styled-input03 input[type="password"]:focus{
	border-bottom: 2px solid #35819b;
	transition: 0.4s;
}
.styled-input03 label {
	position: absolute;
	font-size: 16px; color:#131313;
	top: 10px;
	left: 0px;
}
.styled-input03 label:before {
	content: '*';
	display: inline-block;
	margin:0px 10px 0px 0px;
	font-size: 16px; color:#131313;
	font-family: 'Open Sans';
	font-weight: 700;
}
.styled-input03 label:after {
  content: "\f0da";
  display: inline-block;
  margin:0px 0px 0px 8px;
  font-size: 14px; color:#131313;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}
.styled-input03 label.active {
	visibility: visible;
	opacity: 1;
	margin-top:0px;
}
.styled-input03 label,
.styled-input03 label.active {
	-webkit-transition: all 0.3s ease-in-out;
       -moz-transition: all 0.3s ease-in-out;
	     -o-transition: all 0.3s ease-in-out;
	    -ms-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
}
.styled-input03 ::-webkit-input-placeholder { font-size: 16px; color:#131313; }
.styled-input03 ::-moz-placeholder { color: #888; }
.styled-input03 :-ms-input-placeholder { color: #888; }
.styled-input03 :-moz-placeholder { color: #888; }
@media only screen and (min-width: 0px) and (max-width: 500px){
.styled-input03 label {
	top: -10px;
}
.styled-input03 input[type="text"],
.styled-input03 input[type="password"]{
	width:100%;
	padding: 17px 10px 26px 0px;
}
.styled-input03 input[type="text"].active,
.styled-input03 input[type="password"].active,
.styled-input03 textarea.active {
	padding: 23px 0px 20px 0px;
}
}

.styled-input04 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0px 0px 0px 0px; padding:0; list-style:none;
}
.styled-input04 li {
	position: relative;
	width: 100%;
	margin: 0px 0px 30px 0px; padding:0; list-style:none;
	font-size: 16px; color:#666;  background:none; 
}
.styled-input04 input[type="text"],
.styled-input04 input[type="password"]{
	width:100%;
	padding: 25px 10px 25px 60px;
	height: 10px;
	font-size: 16px;
	color: #808080;
	border-radius: 8px; 
	background-color: none;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	border: none;      

	border-radius: 0;
-webkit-appearance: none;

}
.styled-input04 textarea {
	resize: none;
	height: 150px;
	display: block;
}
.styled-input04 input[type="text"]:focus, .styled-input04 input[type="password"]:focus, .styled-input04 textarea:focus, .styled-input04 select:focus{
	box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px;
	transition: 0.4s;
}

.styled-input04 label {
	position: absolute;
	top: 10px;
	left: 15px;
}
.styled-input04 label img{
	width: 25px;
}

.styled-input04 ::-webkit-input-placeholder { font-size: 16px; color: #808080;}
.styled-input04 ::-moz-placeholder { color: #808080; }
.styled-input04 :-ms-input-placeholder { color: #808080; }
.styled-input04 :-moz-placeholder { color: #808080; }

.styled-input05 {	margin:0px 0px 0px 0px; padding:0; list-style:none; 
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;}
.styled-input05 li{ width:100%; margin:0px 0px 0px 0px; padding:0; list-style:none; height:auto; overflow: hidden; font-size: 16px; color:#666; }
.styled-input05 h2{ float:left; font-size: 16px; color:#fff; width:40px; padding:5px 0px 0px 13px; background: #7db343; height: 52px; 
-webkit-border-top-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-bottomleft: 8px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;

display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: start; -ms-flex-pack: start; 
justify-content: flex-start; -ms-flex-line-pack: center; 	align-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; 
}
.styled-input05 h2 img{ margin:0px 10px 0px 0px; }
.styled-input05 input[type="text"], .styled-input05 input[type="password"], .styled-input05 select{ float:left; width:calc(100% - 40px) ;
	padding:11px 15px;
	font-size: 16px;
	color: #666;
	background:#FFF;
	border:none;
	height: 52px;

-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;

-webkit-appearance: none;
}
.styled-input05 textarea {
    resize: none;
    height: 480px;
    width:100%;
    display: block;
    border-radius: 10px;
    background:#FFF;
	border:none;
	padding:20px 20px;

-webkit-appearance: none;

}

/* The check_box */
.check_list_box {
  width:100%; margin: 0px 0px 0px 0px; font-family: 'Open Sans';
}
.check_list_box .forgot {
  font-size: 14px; color: #fff; float: right;
}
.check_list_box .forgot a{
  color: #fff;
}
.check_list_box .check_list {
  display: inline-block; 
}
.check_list_box .check_list h5{
  font-size: 14px; display: inline-block; 
  color: #fff; margin: 0px 0 0 0; padding: 0 0 3px 0; 
}
.check_list label {
	visibility: visible;
	opacity: 1;
	margin:0;
	position: static;
}
.check_list input[type="checkbox"] {
  display:none;
}
.check_list input[type="checkbox"] + label span {
  display          : inline-block;
  width            : 20px;
  height           : 20px;
  margin           : 0px 0.5em 0 0.25em; 
  border           : none;
  background       : #fff;
  vertical-align   : bottom;
  border: 1px solid #fff;
  border-radius: 3px; 
}
.check_list input[type="checkbox"]:checked + label span {
  background :#fff;
  border: 1px solid #fff;
}
.check_list input[type=checkbox]:checked + label > span:before{
  content     : '✓';
  display     : block;
  width       : 20px;
  color       : #4596B0;
  font-size   : 15px;
  line-height : 18px;
  text-align  : center;
  font-weight : bold;
}

.gender{
	width: calc(100% - 110px); margin:0 0 0px 110px; padding:0; list-style:none; 
}
.gender input[type="radio"] {
	display: none;
}
.gender .g_list {
	display: inline-block;
}
.gender label {
	width: auto; 
	padding:0px 0px 0px 30px; margin: 0px 15px 0 0px;
	font-size: 16px;
	color: #131313;
	cursor: pointer;
	display: inline-block; position:relative;
}
.gender label:after {
	display: block;
	width: 10px;
	height: 10px; background-color:#90a4ae;
	border-radius: 50%;
	content     : '';
	margin: -12px 0 0 -22px; position: absolute;
}
.gender label:before {
	content: '';
	display: block;
	width: 14px;
	height: 14px;
	border: 2px solid #90a4ae; 
	border-radius: 50%;
	background-color:#fff;
	margin: 0px 0 0 -26px;  position: absolute;
}
.gender label.checked:after {
	background-color:#4596b0;
}
.gender label.checked:before {
	border: 2px solid #7cb342; 
}
@media only screen and (min-width: 0px) and (max-width: 500px){
.gender{ width: 100%; margin:30px 0 -20px 0px; }
}
}