@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;700&display=swap');

/* *{ transition:0.2s all;} */
/*html, body{ overflow-x: hidden; }*/
body{ margin:0; padding:0; font-family: 'Noto Sans TC', sans-serif; font-size: 1em; font-weight: 400; color:#333; background: #fff; box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -webkit-box-sizing:border-box;}

h1,h2,h3,h4,h5,h6{ margin:0; padding:0; font-weight: 400; line-height: 1em;}
h2{ font-size: 1.875em; }
h3{ font-size: 1.5em; }
h4{ font-size: 1.25em; }
h5{ font-size: 1.125em; }
h6{ font-size: 1.25em; }

p{ margin:0; padding:0; line-height: 1.625em; }

img{ max-width: 100% !important; height: auto !important; vertical-align: bottom; }

ul, li{ margin: 0; padding: 0; list-style: none; }

:focus, :active{ outline: none !important; box-shadow: none !important; }

::-webkit-input-placeholder { color:#bbb;}
::-moz-placeholder { color:#bbb;}
:-ms-input-placeholder { color:#bbb;}
:-moz-placeholder { color:#bbb;}

input:focus{ outline: 0; }
input{ width: 100%; padding:8px; border:1px solid #ccc; }
input:hover{ border:1px solid #ccc; }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus{
  -webkit-text-fill-color: #333;
  -webkit-box-shadow: 0 0 0px 1000px rgba(0,0,0,0) inset;
  transition: background-color 5000s ease-in-out 0s;
}

textarea:hover,
input[type="text"]:hover,input[type="email"]:hover,input[type="password"]:hover,
textarea:active,
input[type="text"]:active,input[type="email"]:active,input[type="password"]:active,
textarea:focus,
input[type="text"]:focus,input[type="email"]:focus,input[type="password"]:focus,
button:focus,
button:active,
button:hover,
label:focus,
.btn:active,
.btn.active{
  outline:0px !important; box-shadow:none !important; -webkit-appearance:none;
}

form input[type="text"], form input[type="email"], form input[type="url"], form input[type="password"], form input[type="file"], form input[type="date"], form input[type="time"], form input[type="number"], form select{ margin: 10px 0; }
input[type="text"],input[type="email"],input[type="url"],input[type="password"],input[type="file"],input[type="date"],input[type="time"],input[type="number"]{ width: 100%; min-height: 46px; padding:10px 10px; line-height: 1em; border-radius: 5px; }
input[type="text"],input[type="email"],input[type="url"],input[type="password"],input[type="file"],input[type="date"],input[type="time"],input[type="number"], select, textarea{ -moz-appearance: none; -webkit-appearance: none; appearance: none;}
input[type="text"]:hover,input[type="email"]:hover,input[type="url"]:hover,input[type="password"]:hover,input[type="file"]:hover,input[type="date"]:hover,input[type="time"]:hover,input[type="number"]:hover,select:hover,textarea:hover{ border-color:#ff9000; }
input[type="text"]:focus,input[type="email"]:focus,input[type="url"]:focus,input[type="password"]:focus,input[type="file"]:focus,input[type="date"]:focus,input[type="time"]:focus,input[type="number"]:focus,select:focus,textarea:focus{ border-color:#ff9000; }
input[type="text"]:disabled,input[type="email"]:disabled,input[type="url"]:disabled,input[type="password"]:disabled,input[type="file"]:disabled,input[type="date"]:disabled,input[type="time"]:disabled,input[type="number"]:disabled,select:disabled,textarea:disabled{ color: #fff; border-color:#ccc; }
input[type="radio"], input[type="checkbox"]{ width: auto; }
input[type="radio"]{ width: 20px; height: 20px; display: inline; margin-top: 5px; }
input[type="checkbox"]{ width: 20px; height: 20px; display: inline; margin-top: 5px; border-radius: 3px !important; }
input[type="file"]{ width: auto; overflow: hidden; position: absolute; /*left: -9999px;*/ z-index: -1; opacity: 0;}
select{ width: 100%; padding:10px 10px; border: 1px solid #ccc; border-radius: 5px; background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .75rem center; background-size:16px 12px; }
textarea{ width: 100%; height: 150px; margin-top: 10px; margin-bottom: 5px; padding:10px 10px; border:1px solid #ccc; border-radius: 5px; }
label{ margin: 0px !important; font-weight: bold; }

/* radio */
.ctr_radio { display: inline-block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 1em; line-height: 35px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.ctr_radio input { position: absolute; top: 4px; left: 4px; opacity: 0; cursor: pointer;}
.ctr_radio .radiomark { position: absolute; top: 5px; left: 0; height: 25px; width: 25px; background-color: #fff; border:1px solid #ccc; border-radius: 50%;}
.ctr_radio:hover input ~ .radiomark { background-color: #ff9000; border:1px solid #ccc;}
.ctr_radio input:checked ~ .radiomark { background-color: #fff;}
.ctr_radio .radiomark:after { content: ""; position: absolute; display: none;}
.ctr_radio input:checked ~ .radiomark:after { display: block;}
.ctr_radio .radiomark:after {	top: 5px;	left: 5px; width: 13px;	height: 13px;	border-radius: 50%;	background: #ff9000;}
/* /radio */

/* checkbox */
.ctr_check { float: left; width: auto; margin: 0 8px 8px 0 !important; display: block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: relative;}
.ctr_check:last-child{ margin-right: 0; }
.ctr_check input { position: absolute; left: 4px; top: 22px; opacity: 0; cursor: pointer; height: 20px; width: 20px;}
.ctr_check .checkmark { margin: 0; padding: 9px 15px 10px 15px; color: #000; font-weight: 400; background: #fff; border: 1px solid #ccc; border-radius: 5px; cursor: pointer; font-size: 1em; line-height: 25px; display: block;}
.ctr_check:hover input ~ .checkmark { background-color: #fff; border:1px solid #ccc;}
.ctr_check input:checked ~ .checkmark { background-color: #ff9000; border:1px solid #ff9000;}
.ctr_check .checkmark:after { content: ""; position: absolute; display: none;}
.ctr_check input:checked ~ .checkmark:after { display: block;}
/* .ctr_check .checkmark:after { left: 7px; top: 3px; width: 9px; height: 14px; border: solid #000; border-width: 0 4px 4px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);} */
/* /checkbox */

/* checkbox */
.container_check { display: block; position: relative; padding-left: 35px; margin:5px 0; cursor: pointer; font-size: 1em; line-height: 25px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.container_check input { width: 25px; height: 25px; position: absolute; left: 4px; top: -5px; opacity: 0; cursor: pointer;}
.container_check .checkmark { width: 25px; height: 25px; position: absolute; top: 0; left: 0; background-color: #fff; border:1px solid #ccc; border-radius: 5px;}
.container_check:hover input ~ .checkmark { background-color: #fff; border:1px solid #ccc;}
.container_check input:checked ~ .checkmark { background-color: #ff9000;}
.container_check .checkmark:after { content: ""; position: absolute; display: none;}
.container_check input:checked ~ .checkmark:after { display: block;}
.container_check .checkmark:after { left: 8px; top: 4px; width: 7px; height: 12px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}

.container_check.sm input { width: 16px; height: 16px; top: -13px;}
.container_check.sm .checkmark{ width: 16px; height: 16px; top: -8px;}
.container_check.sm .checkmark:after { left: 5px; top: 1px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
/* /checkbox */