body {
  font-family: sans-serif, Microsoft JhengHei;
}

.popupWrap {
  background-color: #47b2aa;
  width: 500px;
  position: relative;
  margin: 20px;
}

.popupWrap .butclose {
  height: 24px;
  width: 24px;
  position: absolute;
  right: 15px;
  top: 4px;
}

.popupWrap .poptit {
  float: left;
  height: 35px;
  width: 475px;
  font-size: 16px;
  line-height: 35px;
  padding-left: 25px;
  color: #fff;
  background-color: #47b2aa;
}

.popupWrap .popcon {
  width: 458px;
  background-color: #f6f6f6;
  padding: 10px 20px;
  float: left;
  border: 1px solid #47b2aa;
  border-bottom: 4px solid #47b2aa;

}

h3 {
  font-size: 24px;
  line-height: 33px;
}

h5 {
  font-size: 18px;
  /* line-height: 33px; */
  color: #333;
  font-weight: normal;
  
}

.text12 {
  font-size: 12px;
  line-height: 20px;
}

.text16 {
  font-size: 16px;
  line-height: 26px;
  text-align: left;
}


.text-blue {
  /* font-size: 16px; */
  color: #0101bd;
}

.text-gray {
	font-family: Arial, Helvetica, sans-serif, 敺株�迤暺��, Microsoft JhengHei;
	color: #414566;
  }


p {
  font-size: 16px;
  line-height: 26px;
  color: #333;
  /* border-bottom: 1px solid #999999; */
  margin-bottom: 10px;
}


.form-row {
    display: flex;
    display: -webkit-flex;
    margin: 0 -15px;
}

/* label {
  font-size: 12px;
} */





/*table ����*/
table {
	font-size: 120%;
	width: 100%;
	border-collapse: collapse;
	color: #333;
}

td {
	line-height: 20px;
	margin: 0px;
	padding-top: 4px;
	padding-right: 1px;
	padding-bottom: 4px;
	padding-left: 1px;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 13px;
	text-align: left;
	vertical-align: top;
}

th {
	font: 13px verdana, arial, helvetica, sans-serif;
	line-height: 14px;
	padding: 4px 1px;
	vertical-align: top;
	margin: 0px;
	color: #666;
	font-size: 14px;
	line-height: 17px;
	padding: 2px 4px;
	background-color: #999999;
}

table.list {
	width: 96%;
	margin: 0;
	padding: 0;
	border-collapse: collapse;
	border-top-width: 4px;
	border-bottom-width: 4px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #47B2AA;
	border-bottom-color: #47B2AA;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #47B2AA;
	border-left-color: #47B2AA;
	float: left;
	font-size: 12px;
	line-height: 20px;
	vertical-align: top;
}



table.list th{
	padding: 5px;
	margin: 0px;
	font-family: Arial;
	font-size: 13px;
	line-height: 20px;
	color: #333333;
	text-decoration: none;
	text-align: center;
	background-color: #a4ddd9;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFF;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #47B2AA;
	border-left-color: #47B2AA;
}

table.list td {
	margin: 0px;
	text-align: center;
	padding: 4px 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #CCC;
	border-bottom-color: #CCC;
	border-left-color: #CCC;
	vertical-align: middle;
}

table.list p {
	font-size: 12px;
	line-height: 0;

}

th a:link,th a:visited,th a:hover {
	color: #333;
	display: block;
	font-size: 14px;
	text-decoration: none;
	width: 100%;
}

table.list th a:link,table.list th a:link {
	color: #4F3500;
}

table.list td a:hover{
	/* color: #1D699B; */
	text-decoration: none;
	font-weight: bold;
}
table.list td a:link,td a:visited{
	/* color: #1D699B; */
	text-decoration: none;
}


input,
select {
  border: 1px solid rgb(202, 202, 202);
  padding: 4px 8px;
  box-sizing: border-box;
  font-size: 12px;
  border-radius: 4px;
}
input:focus,
select:focus {
  border: 2px solid #579ed7;
}

.text {
	background-color: #F6F6F6;
	text-align: center;
	vertical-align: top;
	padding: 0em 2px;
	text-indent: 0px;
}

.odd {
	background: #F2F2F2;
	border: 1px solid #CCC;
	padding-left: 15px;
	font-size: 13px;
	line-height: 20px;

}


.even {
	background-color: #E7E7E7;
	padding-left: 15px;
	height: 12px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
	font-size: 13px;
	line-height: 20px;

}

.form-submit {
	text-align: center;
	padding: 8px 0;
	clear: both;
	margin-top: 50px;
  }
  .submit {
	width: 100px;
	display: inline-block;
	font-weight: 400;
	font-size: 16px;
	padding: 4px 10px;
	border: none;
	cursor: pointer;
	border-radius:30px
	
  }

  #reset {
	background: #f8f8f8;
	color: rgb(54, 54, 54);
	margin-right: 8px;
	border:1px solid #b8b8b8;
  }
  
  #reset:hover {
	background: #ff6801;
	color: #fff;
  }
  
  #submit {
	background: #00afa1;
	color: #fff;
  }
  
  #submit:hover {
	background-color: #01857a;
  }

.butWrapS {
	margin: 4px auto 10px;

}

.butWrapS a:link,a:visited {
	font-size: 13px;
	color: #0082d4;
	text-align: center;	
	width: 80px;
	border:1px solid #0082d4;
	border-radius: 20px;
	margin: 0 auto;
	display:block;
}
.butWrapS a:hover,a:active {
	background-color:#0082d4;
	color: #fff;
	border:1px solid #0082d4;
}

.butWrapM {
	margin: 10px auto 10px;
	font-size:14px;
	line-height: 20px;
	color: #333;
	text-align: center;	
	width: 150px;
	border:1px solid #333;
	border-radius: 20px;
	padding: 8px 0;
	display:block;

}

.butWrapM:hover {
color: #fff;
background-color: #00afa1;
border:1px solid #00afa1;
}



.colorwrap{
	width: 16px;
	height: 16px;
	border-radius: 16px;
	border: 6px double #fff;
	margin: 0 auto;
}
.colorwrap a:link,a:visited {

}
.colorwrap a:hover,a:active {

}


.tit01 {
	font-family: Arial, Helvetica, sans-serif, 敺株�迤暺��, Microsoft JhengHei;
	font-size: 16px;
	font-weight: bold;
	color: #414566;
	background-image: url(../image/tit_icon.png);
	height: 25px;
	padding-left: 32px;
	padding-top: 10px;
	margin-top: 10px;
	width: 94%;
	background-repeat: no-repeat;
	background-position: left;
	border-bottom-width: 2px;
	border-bottom-style: dotted;
	border-bottom-color: #999;
	margin-bottom: 10px;
	float: left;
}


#breadcrumb {
	font-size: 12px;
	line-height: 20px;
	color: #666;
	width: 96%;
}

#breadcrumb a:link,a:visited {
	color: #999999;
	text-decoration: none;
	}
#breadcrumb a:hover,a:active {
	color: #333333;
	text-decoration: none;
}
.font10 {
	font-family: Arial, Helvetica, sans-serif, Microsoft JhengHei;
	font-size: 10px;
	color: #000000;
	/* line-height: 20px; */
}
.font12 {
	font-family: Arial, Helvetica, sans-serif, Microsoft JhengHei;
	font-size: 12px;
	color: #000000;
	line-height: 30px;
}
.font16 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #2B6C67;
	line-height: 30px;
}


/**
 * video popup modal
 * - 
 */

 .popup-modal {
	max-width: 540px;
	background: #FFFFFF;
	position: relative;
	margin: 0 auto;  /* close */
}

.popup-modal .close-popup {
	position: absolute;
	right: 0;
	top: -42px;
	cursor: pointer;
	display: block;
	width: 30px;
	height: 30px;
	color: rgba(255, 255, 255, 0.5);
	text-align: center;
	font: 0/0 a;
	text-shadow: none;
	color: transparent;
}
.popup-modal .close-popup::before {
	display: block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	
	font-family: "Ionicons";
	content: "\f2d7";
	font-size: 21px;
	color: rgba(255, 255, 255, 0.5);
}



/**transition effect for modal popup*/

 input[type="file"] {
    position: fixed;
    right: 100%;
    bottom: 100%;
}
.custom-file-upload {
    /* border: 1px solid #ccc; */
    display: inline-block;	
    cursor: pointer;
}



/* �Madal敺�ㄐ���� */

/* Set a style for all buttons */
button {
  border: none;
  cursor: pointer;
  width: 100%;
}


/* Float cancel and delete buttons and add an equal width */
.cancelbtn, .okbtn {
  /* float: left;
  width: 50%; */
}

/* Add a color to the cancel button */
.cancelbtn {
	width: 100px;
	display: inline-block;
	font-weight: 400;
	font-size: 16px;
	padding: 4px 10px;
	border: none;
	cursor: pointer;
	border-radius:30px;
	margin: 10px 5px;
	background: #f8f8f8;
	color: rgb(54, 54, 54);
	border:1px solid #b8b8b8;
}

.cancelbtn:hover {
	background-color: #ff6801;
	color: #fff;
	border:1px solid #ff6801;
}

/* Add a color to the delete button */
.okbtn {
	width: 100px;
	display: inline-block;
	font-weight: 400;
	font-size: 16px;
	padding: 4px 10px;
	border: none;
	cursor: pointer;
	border-radius:30px;
	margin: 20px 5px;
	color: #fff;
	background-color: #00afa1;
}

.okbtn:hover {
	background-color: #01857a;
	color: #fff;
}




/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  /* background-color: #474e5d; */
  background-color: rgba(71,78,93,0.9);
}

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

.container {
	padding: 16px; 
  }

.modal-content-wrap{
	padding: 15px;
	border: 1px solid #888;
}


/* Clear floats */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* Change styles for cancel button and delete button on extra small screens */
@media screen and (max-width: 300px) {
  .cancelbtn, .okbtn {
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
.modal-content {
	width: 80%; /* Could be more or less, depending on screen size */
  }
}

@media screen and (max-width: 1024px) {
	.modal-content {
		width: 80%; /* Could be more or less, depending on screen size */
	  }
	}

/* �Madal敺�ㄐ蝯�� */


/* ������ 敺�ㄐ���� */
.container2 {
	display: block;
	position: relative;
	/* padding-left: 35px; */
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 22px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;	
  }
  
  /* Hide the browser's default radio button */
  .container2 input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
  }
  
  /* Create a custom radio button */
  .checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 30px;
	width: 30px;
	background-color: #eee;
	border-radius: 50%;
  }
  
  /* On mouse-over, add a grey background color */
  .container2:hover input ~ .checkmark {
	background:url("../image/icon_OK2.svg");
	background-color: #2196F3;
  }
  
  /* When the radio button is checked, add a blue background */
  .container2 input:checked ~ .checkmark {
	background:url("../image/icon_OK2.svg");
	background-color: #2196F3;
  }
  
  /* Create the indicator (the dot/circle - hidden when not checked) */
  .checkmark:after {
	content: "";
	position: absolute;
	display: none;
  }
  
  /* Show the indicator (dot/circle) when checked */
  .container2 input:checked ~ .checkmark:after {
	display: block;
  }
  
  /* Style the indicator (dot/circle) */
  .container2 .checkmark:after {
	top: 6px;
	left: 6px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	/* background:#2196F3; */
  }
/* ������ 敺�ㄐ蝯�� */