/*網頁全共用設定*/
html,body {
	font-family:Microsoft JhengHei,'微軟正黑體',Helvetica, Arial, sans-serif;
	color: #303030;
	position: relative;
	width: 100%;
	min-height: 101vh;
	overflow-x: visible;
	font-size: 100%;
	}
/*font-size:100%是為將網頁字體設定成16px，這個文字大小設定會連動到下面的body的字體設定唷*/

body {
	font-size: 62.5%;		
	background: #F5F5F5;
	}						
/*將全部網頁字體設定成10px大小*/
/*我們的CSS設定無法蓋過使用者自己的瀏覽器小字體大小，但實質上仍是有被改成功!*/
/*加入上面的設定，未來每個區塊的字型大小就可以把px除以10，就可得到em單位*/
/*em單位可讓整體網站較合無障礙，且可變動性較大*/

/*標題*/
h1,h2,h3,h4,h5,h6{
	font-size:1em;
	color:#333333;
	font-weight: 700;
    margin-top: 10px;
    margin-bottom: 10px;
}

p{
	font-weight: 300;
	padding: 0;
	margin: 0;
}

a:hover, a:focus {
	text-decoration: none;
	}

img{
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	}	/*圖片更銳利化*/

/* 应用于GIF和PNG图片; 防止边缘模糊 */
img[src$=".gif"], img[src$=".png"] {
	/*image-rendering: -moz-crisp-edges;	圖片像素化*/
	}

button, a, input:focus,button:focus{
	outline: none !important;
	}	/*不顯示外虛線*/

hr {
	border-top: 1px solid #DEDEDE;
	clear: both;
	float: none;
	width: 100%;
	margin: 20px 0;
}

.new-hr {
	border-top: 8px solid black;
	clear: both;
	float: none;
	width: 100%;
	margin: 10px 0;
}

.hr-noborder{
	border:none;
	padding:0;
	margin:10px auto;
	}

.WIDTH-5{width:5%;}
.WIDTH-10{width:10%;}
.WIDTH-15{width:15%;}
.WIDTH-20{width:20%;}
.WIDTH-25{width:25%;}
.WIDTH-30{width:30%;}
.WIDTH-35{width:35%;}
.WIDTH-40{width:40%;}
.WIDTH-45{width:45%;}
.WIDTH-50{width:50%;}
.WIDTH-55{width:55%;}
.WIDTH-60{width:60%;}
.WIDTH-65{width:65%;}
.WIDTH-70{width:70%;}
.WIDTH-75{width:75%;}
.WIDTH-80{width:80%;}
.WIDTH-85{width:85%;}
.WIDTH-90{width:90%;}
.WIDTH-100{width:100%;}

[class*=WIDTH]{
	float:left;
	display: block;
	overflow: hidden;
}

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

.WIDTH-5,.WIDTH-10,.WIDTH-15,.WIDTH-20,.WIDTH-25,.WIDTH-30,.WIDTH-35,.WIDTH-40,
.WIDTH-45,.WIDTH-50,.WIDTH-55,.WIDTH-60,.WIDTH-65,.WIDTH-70,.WIDTH-75,
.WIDTH-80,.WIDTH-85,.WIDTH-90,.WIDTH-100
{
	width:100%;	
	}
	
	}

.no-padding-margin{
	padding:0;
	margin:0;
	}

.no-padding{
	padding:0;
	}

.no-margin{
	margin:0;
	}

.textover-hidde {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	display: block !important;
	}	/*區塊文字超出時隱藏*/

.inline-father{
	font-size:0px;
	white-space:discard;
	display:inline-block;
	}	/*區塊垂直置中必加的父層屬性*/

.div-inline-block{
	display:inline-block;
	vertical-align:middle;
	float:none;
	zoom:1;
	font-size:16px;
	}	/*區塊垂直置中*/

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

.textover-hidde {
	overflow: initial;
	white-space: initial;
	text-overflow: initial;
	display: block !important;
	}	/*區塊文字超出時隱藏*/

.textover-hidde-xs {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	display: block !important;
	}	/*區塊文字超出時隱藏*/

.div-inline-block{
	display:block;
	vertical-align:middle;
	float:none;
	}	/*手機時 區塊不需垂直置中*/
	
.div-inline-block-xs{
	display:inline-block;
	vertical-align:middle;
	float:none;
	zoom:1;
	}	/*區塊垂直置中*/
}

/*當網頁未載完時動畫，載完移除*/
.full-Wait{
	position:fixed;
	background:#fff;
	opacity:1;
	z-index:100000;
	transition:all 0.8s;
	width:100%;
	height:100%;
	left:0;
	top:0;
	}

.full-Wait img {
	position:absolute;
	display: block;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

.full-Wait.full-stop{
	transition:all 0.8s;
	z-index:-100;
	opacity:0;
	}

/*---跨瀏覽器---*/
/*針對IE8以下的提示設定*/
.full-all{
	position:fixed;
	top:0;
	left:0;
	z-index:10000;
	width:100%;
	height:100%;
	text-align:center;
	padding:0;
	margin:0;
	background:white;
	}

.noie8 {
    background:gray;
    color:white; /*字體顏色*/
    display: block; /*顯示方式*/
    font-size: 20px; /*字體大小*/
    letter-spacing: 1px; /*字體間距*/
    padding:20px; /*內邊距*/
    text-align: center; /*文字置中*/
    width:500px; /*寬度*/
    height:500px; /*高度*/
	margin:0 auto;
}

/*wow*/
.wow{
	visibility: hidden;
}

/*動畫*/
@keyframes hue {
  0% {
    filter: hue-rotate(0deg);
	 text-shadow: 0 0 5px rgba(255,255,0,1);
}

  50% {
    filter: hue-rotate(-180deg);
	 text-shadow: 0 0 5px rgba(255,255,0,0);
}
	
100% {
    filter: hue-rotate(-360deg);
	text-shadow: 0 0 5px rgba(255,255,0,1);
}
}

.minbright-play { 
	-webkit-animation:minbright-play 1s linear infinite alternate;
	animation:minbright-play 1s linear infinite alternate ;
}

@-webkit-keyframes minbright-play {
  0% { filter:brightness(360%);  }
  50% { filter:brightness(100%);  }
  100% { filter:brightness(360%);  }
}

@keyframes minbright-play {
  0% { filter:brightness(360%);  }
  50% { filter:brightness(100%);  }
  100% { filter:brightness(360%);  }
}

@keyframes new-nope {
  0% {
    transform: translateX(0);
  }

  3.5% {
    transform: translateX(-7px) rotateY(-10deg);
  }

  12.5% {
    transform: translateX(6px) rotateY(8deg);
  }

  25.5% {
    transform: translateX(-4px) rotateY(-6deg);
  }

  35.5% {
    transform: translateX(3px) rotateY(4deg);
  }

  43%,
	100%{
    transform: translateX(0);
  }
}

.nope {
  animation-name: nope;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
}

/*light-body光暈外框*/
@keyframes light-body-b {
  0% { 
	box-shadow: inset 0 0 11px rgba(143,172,255,1),
		inset 0 0 11px rgba(143,172,255,0.5);  
	}
  100% { 
	box-shadow: inset 0 0 11px rgba(255,255,255,1),
		inset 0 0 11px rgba(255,255,255,0.5);  
	}
}

@keyframes light-body-r {
  0% { 
	box-shadow: inset 0 0 11px rgba(255,123,123,1),
		inset 0 0 11px rgba(255,123,123,0.5);
	}
  100% { 
	box-shadow: inset 0 0 11px rgba(255,255,255,1),
		inset 0 0 11px rgba(255,255,255,0.5);  
	}
}
/*網頁全共用設定 END*/

/*更改原生樣式
input[type="radio"]{
	appearance:checkbox;
	-moz-appearance:checkbox; /* Firefox
	-webkit-appearance:checkbox; /* Safari and Chrome
}*/

/*特殊共用樣式 UI KIT*/
/*錨點解決頁面跳轉時選單遮住，當錨點被點選中時，用偽元素產生一個新的區塊高度*/
:target:before {
content: "";
display: block;
height: 140px; 
}

@media(max-width:767px){
	:target:before {
	height: 60px; 
	}
	
	[id="guess-2"]:target:before,
	[id="guess-3"]:target:before,
	[id="allgrade-1"]:target:before{
	height: 140px; 
	}
}

/*更改bootstraps設定*/
.d-none {
    display: none !important;
}

.new-row{
	margin: 0 auto;
}

@media(min-width:768px){
.d-md-block {
    display: inline-block !important;
}
}
	
/*表格*/
/*表格本體*/
.table-responsive > .table > tbody > tr > td,
.table-responsive > .table > tbody > tr > th,
.table-responsive > .table > tfoot > tr > td,
.table-responsive > .table > tfoot > tr > th,
.table-responsive > .table > thead > tr > td,
.table-responsive > .table > thead > tr > th {
	white-space:normal;
}/*如果要把表格客製化成自己喜歡的模樣，一定要加入這段*/

table.tableborder{
	color:white;
	text-align: center;
	vertical-align: middle;
	word-break: break-all;
	table-layout: fixed;
}

table.tableborder.nofix{
	table-layout:auto;
}

table.tableborder thead th{
	text-align: center;
	vertical-align: middle;
	background-color: #fff;
	border: 1px solid white;
	color:black;
	font-size: 19px;
	padding: 15px 5px;
}

table.tableborder thead th:first-child{
	width: 16%;
}

table.tableborder tbody td{
	border: 1px dashed white;
	font-size: 19px;
	padding: 15px 5px;
	vertical-align: middle;
}

table.tableborder tbody td,
table.tableborder thead th{
	min-width: 60px;
}

table.tableborder th a,
table.tableborder td a{
	color:yellow;
	transition: all 0.8s;
}

table.tableborder th a:hover,
table.tableborder th a:focus,
table.tableborder td a:hover,
table.tableborder td a:focus{
	color:#ffffa0;
}

.table th {
    padding: 0.75rem;
    vertical-align: middle;
    border-top: 1px solid #dee2e6;
    text-align: center;
}
@media(max-width:767px){
table.tableborder{
	table-layout: auto;
}

table.tableborder thead th{
	font-size: 14px;
}

table.tableborder thead th:first-child{
	width: 25%;
}
	
table.tableborder tbody td{
	font-size: 14px;
}


}

/*表格開頭白底*/
table.table-title tbody tr td:first-child{
	background-color: rgba(255,255,255,0.2);
}

table.tableborder [src*="bage"]{
	max-width: 140px;
	width: 100%;
	vertical-align: middle;
	margin: 0 auto;
	display: block;
}

/*回頂部按鈕*/
.scroll-top {
	z-index: 1049;
	position: fixed;
	right: 2%;
	bottom: 2%;
	width: 50px;
	height: 50px;
	display: none;
	transition: all 0.8s;
	opacity: 0;
}

.scroll-top .btn {
	width: 50px;
	height: 50px;
	border-radius: 100%;
	font-size: 20px;
	line-height: 28px;
}

.mybtn-top {
	color: #fff;
	background-color: #ff5a52;
	opacity: 0.8;
}

.page-scroll{
	display: block;
	opacity: 1;
	transition: all 0.8s;
}

/*airticle*/
 ul {
	 list-style: none;
	margin-left: -40px;
}
.col ul {
	list-style: none;
	margin-left: -40px;
}

.col ul li ul {
	list-style: none;
	margin-left: 0;
}

/*nav*/
.new-nav{
	
}

.new-nav .navlist-btn li[class*=fz-]:before{
	content: "字";
	display: block;
	position: absolute;
	font-size: 1em;
	top: 6px;
	left: 6px;
	color: white;
}

.new-nav .navlist-btn,
.new-nav .navlist-btn li{
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
}

.new-nav .navlist-btn li a{
	color:white;
	background-color: #A70003;
	padding: 15px;
	text-align: center;
	font-size: 1.6em;
	transition: all 0.8s;
	list-style: none;
	display: block;
}

.new-nav .navlist-btn a.active{
	background-color: #DF2528;
}

.new-nav .navlist-btn a:hover{
	background-color: #ce0004;
}

/*header*/
.new-head{
	background-color: #DF2528;
	padding: 30px 0;
}

.new-head .row{
	align-items: center;
}

.new-head .form-big-name,
.new-head .form-big-name li{
	padding: 0 15px;
	margin: 0;
	list-style: none;
	display: flex;
    align-items: center;
}

.new-head .form-big-name li{
	padding: 0;
}

.new-head .form-big-name li::after {
	font-family: FontAwesome;
	content: " \f054 ";
	padding: 3px 8px 0;
	display: flex;
	font-size: 14px;
}

.new-head  .form-big-name li:last-child:after{
	display: none;
}

.new-head  .form-big-name{
	font-size: 2.2em;
	color:white;
	font-weight: bold;
}

.new-head  .form-big-name h1{
	font-size: 1em;
	color:white;
}

.new-head  .form-big-name i{
	padding-right: 5px;
}

.new-head .form-date{
	display: flex;
	justify-content: flex-end;
	font-size: 1.6em;
	align-items: center;
	color:white;
}

.new-head .form-date i{
	padding-top: 4px;
	padding-right: 5px;
}

.new-head .form-date span{
	padding-left: 4px;
}

@media(max-width:575px){
.new-head .form-date{
	justify-content:flex-start;
}
}

/*tablink*/
.tab-block{
	position: sticky;
	top:0;
	z-index: 100;
	background-color: rgba(255,255,255,0.95);
}

.tab-block ul{
	list-style: none;
	padding: 15px 0;
	flex-wrap: nowrap;
	overflow-x:auto;
	margin-bottom: 0;
}

.tab-block ul li{
	padding: 0 15px;
}

.tab-block ul a{
	color:#ED7700;
	font-size: 1.8em;
	font-weight: bold;
	display: block;
	padding: 15px 0;
	text-align: center;
	transition: all 0.8s;
	word-break: keep-all;
}

.tab-block ul a.active{
	color:white;
	background-color: #ED7700;
}

.tab-block ul a:hover{
	color:white;
	background-color:#ff9d39;
}

@media(max-width:767px){
.tab-block ul li{
	padding: 0;
}
}

@media(max-width:565px){
.tab-block ul a{
	font-size: 1.4em;
}
}
/*特殊共用樣式 UI KIT end*/

/*login頁面*/
.login-head{
	position: absolute;
	padding: 0;
	top: 0;
}

.head-logo{
	width: 33%;
	max-width: 300px;
	position: absolute;
	height: auto;
	top:26%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.login-form{
	position: relative;
	height: 100vh;
}

.login-form-body{
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%,-50%);
	max-width: 430px;
	width: 100%;
	height: auto;
	display: flex;
	flex-flow: column;
	padding: 15px;
	background-color: #F5F5F5;
	border-radius: 10px;
}

.login-form h1{
	text-shadow: 0 0 5px #fff,0 0 12px #fff;
}


.login-form label{
	border-bottom: 1px solid #434343;
}

.login-form span{
	min-width:100px;
}

.login-form i{
	margin-left: 15px;
	margin-right: 10px;
}

.login-form input{
	border: 0;
	flex-grow: 1;
	background-color: transparent;
}

.login-form button{
	border: 0;
	box-shadow: none;
	background-color: #EA6000;
	border-radius: 0;
	color: #fff;
}

.login-footer{
	background-color: #DF2528;
	padding: 30px;
	text-align: center;
	position: absolute;
	bottom: 0;
}

.login-footer a{
	display: block;
}

.login-footer h4{
	color:white;
	font-weight: 400;
	padding: 0;
	margin: 0;
}

/*form*/
/*必填欄位星號*/
.must-write:before{
	content: "*";
	display: inline-block;
}

/*form 結構外觀樣式*/
div.form-body{
	padding: 15px 0;
}

.form-body{
	padding: 15px;
	color: #303030;
}

.form-body + .form-body{
	margin-top: -0.5rem;
}

.no-open{
	display: none;
}

.form-body input[type="checkbox"],
.form-body input[type="radio"]{
	width:18px;
	height:18px;
	margin: 0;
}

.form-body input,
.form-body select,
.form-body label{
	padding: 0;
	margin: 0 3px 3px;
	display: inline-block;
	vertical-align: middle;
	align-items: center;
}

.form-body label{
	min-width: auto;
	margin: 0;
}

.form-body label input{
	min-width: unset;
}

.form-body label span{
	display: inline-block;
	padding-bottom: 4px;
}

.form-body input,
.form-body select{
	padding: 5px;
	text-align: left;
	/*background-color: #fff;
	border: 1px solid #333333;*/
	height: 40px;
}

.form-body input[type=text]{

}

.form-body > .d-flex,
.form-body > .row{
	border-bottom: 1px solid #DEDEDE;
	padding-top: 15px;
	padding-bottom: 15px;
	position: relative;
	flex-wrap:wrap;	
    display: block;
}

.form-body .d-flex [class*=col]{
	padding: 0 10px 0 5px;
	position: relative;
	line-height: 40px;
}

.form-body .d-flex > [class*=col]:last-child{

}

.form-body [class*=col]{

}

.form-body [class*=col],
.form-body [class*=col] .d-flex,
.form-body .d-inline-block{
	flex-wrap: wrap;
	vertical-align: middle;
}

/*IE11跑版解法，空格不能省略*/
*::-ms-backdrop, .form-body [class*=col],
*::-ms-backdrop, .form-body [class*=col] .d-flex{
	display: block;
}

/*CHROME 萬一真的有需要時*/
/*.form-body [class*=col]:not(*:root),
.form-body [class*=col] .d-flex:not(*:root) {
	display: none;
}*/

.form-body > .d-flex:last-child{

}

.form-body .client-signing,
.form-body .signing{
	background-color: #fff;
	border: 1px solid #999;
	text-align: center;
	margin: 0 auto;
	display: block;
	vertical-align: middle;
	min-height: 250px;
	max-height: 40vh;
	overflow-y: auto;
}

.form-body .client-signing{
	min-height: 100px;
	max-height: 10vh;
	overflow-y: auto;
}

.vertical-colmb,
.vertical-colmb [class*=col]{
	margin-bottom: 10px;
}

@media(max-width:991px){
.form-body input,
.form-body select,
.form-body label{
	padding: 0;
	margin: 0 3px 3px;
	flex-grow: 1;
}
	
.form-body input[type=text]{
	width: 30%;
}

.form-body [class*=col],
.form-body [class*=col] .d-flex,
.form-body .d-inline-block{
	flex-wrap: wrap;
	/*display: flex;*/
}
	
.form-body select{

}
}

@media(max-width:565px){
.form-body input[type=text]{

}
}

/*form 主標題外觀樣式*/
.form-title-body,
.form-title-body-l{
	font-weight: bold;
	color: #303030;
	font-size: 2.2em;
	position: relative;
}

.form-title-body-l{
	font-size: 2em;
}

.form-title-body i,
.form-title-body-l i{
	padding-right: 5px;
}

.form-title-body-l:before,
.form-title-body-l:after,
.form-title-body:before,
.form-title-body:after{
	display: block;
	position: absolute;
	content: "";
	bottom:-5px;
	left: -0px;
	width: 10px;
	height: 10px;
	border-radius: 10px;
	background-color: #DEDEDE;
}

.form-title-body:after,
.form-title-body-l:after{
	bottom:-5px;
	left: auto;
	right: 0px;
}

/*form 字體與排版*/
.form-row-title{
	padding: 10px 0;
	font-weight: bold;
}

.form-text-w-b,
.form-text-b{
	font-size: 2.2em;
}

.form-text-w-m,
.form-text-m{
	font-size: 1.8em;
}

.form-text-w-s,
.form-text-s{
	font-size: 1.5em;
}

.form-text-w-ls,
.form-text-ls{
	font-size: 1.3em;
}

[class*=form-text-w]{
	font-weight: bold;
}

@media(max-width:575px){
.form-text-w-b,
.form-text-b,
.form-text-w-m,
.form-text-m,
.form-text-w-s,
.form-text-s,
.form-text-w-ls,
.form-text-ls{
	letter-spacing: -1px;
}
}

/*form按鈕*/
.modal button[class*=btn],
.form-body button{
	align-self:flex-start;
	height: 46px;
	min-width: 80px;
	width: auto;
	padding: 0 10px;
	border-radius: 5px;
	margin:0 5px 0 4px;
	color:white;
	transition: all 0.8s;
	text-align: center;
	vertical-align: middle;
	box-shadow: none;
	border: none;
	background-color: #ED7700;
	line-height: 30px;
}

.modal button:hover,
.modal button:active,
.form-body button:hover,
.form-body button:active{
	opacity: 0.5;
}

.form-body button,
.form-body button + button{
	margin-bottom: 2px;
}


.form-body [class*=btn] i{
	padding-right: 2px;
}

.modal button.btn-b,
.form-body .btn-b{
	background-color: #007BFF;	
}

.modal button.btn-g,
.form-body .btn-g{
	background-color: #6C757D;
}

.modal button.btn-o,
.form-body .btn-o{
	background-color: #ED7700;
}

.form-body .btn-o-l{
	padding: 0 8px;
	height: auto;
	min-height: auto;
	background-color: #ED7700;
}

/*footer*/
.webform-footer{
	background-color: #DF2528;
	padding: 30px;
	text-align: center;
}

.webform-footer a{
	display: block;
}

.webform-footer h4{
	color:white;
	font-weight: 400;
	padding: 0;
	margin: 0;
}