@charset "utf-8";

/* JQM Demos custom CSS */

/*
font-family: 'Open Sans';
預設字體
*/



button, a, input{

outline:none !important;

}
/* brand system css*/

body::-webkit-scrollbar {
    width: 0.3em;
}
body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
 
body::-webkit-scrollbar-thumb {
  background-color: #353942;
  outline: 1px solid slategrey; /*bar 底色*/
  background-image: -webkit-linear-gradient(45deg, /*情角*/
  rgba(46, 32, 38, 1) 50%, /*第一段上方間變 25%*/
  transparent 25%, transparent 50%, /*第一段下方間變*/
  rgba(46, 32, 38, 1) 25%, /*第二段上方間變*/
  rgba(46, 32, 38, 1) 25%, transparent 25%, transparent 50%)/*第二段下方間變*/

}

#NewMenu:not(.mm-menu) {
	display: none;
}
.input-switch label strong {
  background-color: #ea68a3;
  color: #fff;
  font-size: 0.8em;
  padding: 0.2em 0.8em;
  margin: 0 0.5em;
  font-family: 'Open Sans', sans-serif, Microsoft JhengHei;
  border-radius: 3px;
  font-weight: 300;
}
#Loader {
  width: 150px;
  height: 150px;
  margin: -30px 0 0 -30px;
  border: 1px solid #fff;
  border-radius: 50%;
  border-top: 1px solid #fcb040;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
#LoaderPic {
  background:url(../images/loading_logo.svg) no-repeat;
  background-size: 8em auto; margin-top: 1em; margin-left: 1em;
}

#LoaderBG {
   background-color:rgba(92,62,129,1);
   background: linear-gradient(to bottom right,#000,#000);
    
}	
		

body ,.loginBg{
    background:rgba(225,225,225,1);
    background:rgba(255,255,255,1);
}


.title{
	background:url(../images/.svg) 0em top no-repeat;
	background-size:10em auto;
	background-position:center 0em;
	color:#fff; text-align:right; 
	padding-top:6.6em; color:#000;
	height:2.25em; font-size:2em; margin-top:1.5em;
	}
.login{
	background-color:#fff;
	margin-top:1em;}
	.login h2{
		text-align:center; margin:0.8em; 
		font-size:1.3em; color:#aaa; font-weight: 400; line-height:0em; padding-top:0.2em; padding-bottom: 0.5em;}
		.login .g-recaptcha *{ width:100%;}
		.loginBg2{width:80%; }

.login .input-text input{
	background:rgba(255,255,255,1); border: none; box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0); color:#000; font-size:2em;
    border-bottom: 1px solid #ccc;
	padding:1.2em; margin:0.3em auto;
    border-radius: 0;
    text-align: center;
}

.login .input-text input:focus{
    background-color: #f2f2f2; color: #000;
}


.login-submit-area{margin:0; padding:0; margin-top:0em;}
.login-submit-area .g-recaptcha{
	
	font-size:1.2em; margin-bottom:2em; margin-left:-0.2em;}
	
.login-submit-area .submit{ margin:0; margin-right:0;}
.login-submit-area .submit input[type=submit]{
	background-color: #000;
	padding:0.4em; font-size:1.8em; color:#fff; margin-top:1em; 
}
.login .submit input[type=submit]{
    background:#9e94ab;
	padding:0.4em; font-size:1.4em; color:#fff;
	margin-bottom:0.8em;
}
.loginBg2 .phone-login input[type=button]{
	background-color: #fff;
	color:#d56700; font-size:1.2em; margin-bottom:1.5em; font-weight: 900;}

.loginBg .mobile-logo{background-position:62%;}
.loginBg2 .phone-login strong{text-align: center; font-size: 1.3em;  margin-top: -1em; color:#d56700;}

/*newMenu*/
.new-navbar {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Noto Sans CJK TC Light";
    background-color: #000;
}

/* Links inside the navbar */
.new-navbar a {
  float: left;
  font-size: 12px;
  color: #fff;
  text-align: center;
  padding: 12px 12px;
  text-decoration: none;
}.new-navbar a:hover{
  color: #fff;
}

.menu-class-down{background-color: #fff !important; color: #000 !important; font-weight: 300;}

/* The dropdown container */
.new-dropdown {
  float: left;
  z-index: 999;  
}

/* Dropdown button */
.new-dropdown .dropbtn {
  font-size: 16px; 
  border: none;
  outline: none;
  color: #fff;
  padding: 6px 12px;
  padding-bottom: 0.3em;
  background-color: transparent;
  margin-top: 8px; margin-right: 0.5em;
  font-size: 1.8em; z-index: 9; 
   cursor: pointer; 
}.new-dropdown .dropbtn:hover {
  color: #000; 
}


/* Add a red background color to navbar links on hover */
.new-navbar a:hover, .new-dropdown:hover .dropbtn {
  background-color: rgba(255,255,255,1);
   color: #000; 
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  position: absolute; 
  background-color: rgba(255,255,255,0.97);
  width: 100%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
  z-index: 3;
  margin-top: -1px;
}

/* Mega Menu header, if needed */
.dropdown-content .header {
  background-color: rgba(255,255,255,0.8);
  padding: 16px;
  color: #646464;
  text-align: center;
}
.dropdown-content .header h2{
  color: #666;
  text-align: center;
}

/* select style */
select {
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
}

.select-moon select {
  color: #e38700;
  background-color: rgba(252,176,64,1) !important;
  
  height: 2.1em;
  width: 100%;
  text-align-last: center;
  border: #fcb040 1px solid;
  background-image: url("../images/select_appearance.svg");
  background-size: 1em auto;
  background-repeat: no-repeat;
  background-position: right 0.8em;
}
.select-moon select:after {}
.select-moon select:focus {
  color: #fff;
  background-color: rgba(0,0,0,0.8);
}
.select-moon select option {
}
.select > .input-group-addon {
  font-size: 2em;
}
/*select style*/

/*switch*/
.switch-field {
  display: flex;
  margin-bottom: 0em;
  overflow: hidden;
}
.switch-field input {
  position: absolute !important;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  width: 1px;
  border: 0;
  overflow: hidden;
}
.switch-field label {
  background-color: #fff;
  color: rgba(50, 50, 50, 1);
  font-size: 0.8em;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  padding: 6px 1px;
  margin-right: -1px;
  border: 2px solid rgba(190, 190, 190, 1);
  transition: all 0.1s ease-in-out;
  
}
    
.switch-field label:hover {
  cursor: pointer;
}
.switch-field input:checked + label {
  background-color: #ea68a3;
  color: #fff;
  box-shadow: none;
}
.switch-field input:checked + label:nth-last-child(2) {
  background-color: #452b60;
}
.switch-field input:checked + label:nth-last-child(4) {
  background-color: #aaa;
}
    
/*指定switch-field範圍內全物件的第幾個物件要被改變*/
/*
.switch-field input:checked + label:nth-of-type(2) ,.switch-field input:checked + label:nth-of-type(3){
   background-color: #aaa;
}
指定switch-field範圍內第幾個input物件要被改變*/
.switch-field label:first-of-type {
  border-radius: 4px 0 0 4px;
}
.switch-field label:last-of-type {
  border-radius: 0 4px 4px 0;
}
.switch-field span {
  color: #ccb2e3;
  padding-top: 0.2em;
  padding: 0.2em;
  height: 3.45em;
  padding-left: 0.3em;
  width: 1.6em;
  background-color: rgba(62, 41, 99, 0.5);
}
.switch-field label {
  background-color: #fff;
  color: #32204b;
  font-size: 1.5em;
  font-weight: 300;
  line-height: 1;
  text-align: center;
  padding: 6px 2px;
  margin-right: -1px;
  border: 1px solid rgba(207, 207, 207, 1);
  transition: all 0.1s ease-in-out;
}
.switch-field label:hover {
  cursor: pointer;
}
.switch-field input:checked + label {
  background-color: #32204b;
  color: #fff;
  box-shadow: none;
}
.input-select label { margin-left: 1em;}
/*switch*/

/*table*/
.trwd {
  overflow: auto;
  padding: 0;
}
.trwd table {
  width: 100%;
}

.trwd th, .trwd td {
  padding: 0.3em;
  font-size: 1.6em;
  
 font-weight: 300;
}
.trwd th {
   background-color: #ccc;
    color: #32204b;
    font-size: 1.3em;
}
 .trwd .tb-item input[type=button]{
  font-size: 0.8em;
  background-color: #ea68a3;
    color: #fff;
    margin: 0.4em;
    padding: 0.5em 0.5em;
    width: 80%;
} 
/*table*/


/* Show the dropdown menu on hover */
.new-dropdown:hover .dropdown-content {
  display: block;
}

/* Create three equal columns that floats next to each other */
.all-column{display: flex; justify-content: center; align-items: center; }
.column {
  padding: 10px;
  height: 240px;
}
.column h3{
font-size: 1.5em; text-align: center; color: #8b8b8b; padding: 0.2em; border-radius: 8px; background-color: rgba(237,237,237,0.7);}
/* Style links inside the columns */
.column a {
  float: none;
  color: #000;
  padding: 16px 8px ;
  text-decoration: none;
  display: block;
  text-align: center;
  font-size: 1.5em;
}
.column a:hover {
  background-color: #f2f2f2;
  color: #000;
}
.column a i{margin-right: 0.5em; }
/* Add a background color on hover */
.column i{display: none;}

.menu-d2 .menu-header .user-info{right: 2%; top: 4em; width: auto;}
.menu-d2 .menu-header .user-info a img{border: 3px solid #b5b5b5;}
.menu-d2 .menu-header .user-info h1{
	font-size:1.5em; white-space:nowrap;
	line-height:0;
	margin-top:0.7em; 
	}
	.menu-d2 .menu-header .user-info h1:first-letter{
	font-weight: 600; 
}.menu-d2 .menu-header .user-info img{margin-right: 0.5em; width:56px; height:56px;}
.menu-d2 .syscg{
 position:absolute; justify-content: center; text-align: center;
 width:180px; height:40px; top:0.8%; left:20%;
 margin-left:-90px; margin-top:0px; 
}
.menu-d2 .syscg .icon-recruit a ,.menu-d2 .syscg .icon-accounting a ,.menu-d2 .syscg .icon-holiday a{border: none;}
.menu-d2 .breadcrumb .active span{font-weight: 300 !important; font-family: "Noto Sans CJK TC Light" !important;}
.menu-d2 .breadcrumb li:nth-child(1){height: 50px;}
.menu-d2 .breadcrumb li:nth-child(3){
 position:absolute; justify-content: center; text-align: center;
 width:1366px; height:50px; top:0%; left:40%;
 margin-left:-580px; margin-top:0px;}

.menu-d2 .breadcrumb li:nth-child(2) a{color: #000;}
.menu-d2 .breadcrumb li:nth-child(3){font-size: 2em; }
.menu-d2 .breadcrumb li:nth-child(2) i{ color: #000;}
.menu-d2 .breadcrumb li:nth-child(3) i{font-size: 0.6em; margin-right: 0; color: #000;}
.menu-d2 .breadcrumb li:nth-child(3) span i{font-size: 1em; color: #FFF; margin-right: 0.5em;}


.new-dropdown-bgimg img{
    position: absolute; z-index: 0; right: 0;
    max-height: 620px; width: 100%;
    filter: blur(4px);
    -webkit-filter: blur(4px);
    opacity:0.5;
}
/*newMenu*/


nav.navbar {
  background-color: rgba(255,255,255,1.00);
  border-radius: 0;
}
nav.wMenu .infobar div {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #5c4779;
}


nav.wMenu .infobar div a {
  height: 5em;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  margin-top: -1em;
  padding: 0;
  background-color: rgba(255,255,255,1.00);
  color: #32204b;
  font-size: 1.3em;
  text-decoration-line: none;
  font-weight: 100;
}

nav.wMenu .infobar div a:hover, nav.wMenu .infobar div.ative a {
  color: rgba(255,255,255,1.00);
  background-color: #32204b;
  
}
nav.wMenu .infobar div a strong ,nav.wMenu .infobar div.ative a strong{
  position: absolute;
  margin-top: 1.8em;
  font-size: 0.8em;
  text-transform: uppercase;
  padding: 0.1em;
  border-radius: 4px;
  background-color: transparent;
  color: #472272;
}
nav.wMenu .infobar div.ative a strong ,nav.wMenu .infobar div a:hover strong{
  background-color: #fff;
  color: #472272;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-fill-mode: both;
  animation-name: flash;
}
nav.wMenu .infobar div a:hover strong{
  animation-iteration-count: 1;
  animation-duration: 5s;
  animation-fill-mode: none;
  animation-name: none;
}
nav.wMenu .infobar div a i{ font-size: 1.6em; margin-left: 0.3em;}

nav.wMenu .infobar div a.stepEven{ color: #979797;}




.privacy-main {
  overflow: auto;
  overflow-x: hidden;
  height: 360px;
  background-color: rgba(255,255,255,1.00);
  padding-top: 1em;
}


/*select style*/
.select-moon select{
	font-size:2em; color:#fff; background-color:rgba(0,0,0,1);
	height:2.1em;  width:100%; text-align: center;
    text-align-last: center;
	}.select-moon select:focus {
	color:#fff; background-color:rgba(0,0,0,1);
	}.select-moon select option{}
	.select > .input-group-addon{font-size:1.5em;}
/*select style*/


.infobar{margin-top:1.5em;}

.infobar .feelback ,.infobar .logout{ padding:0;}
.infobar .feelback ,.infobar .homepage{margin-bottom:0.5em;}
.infobar .feelback span{
	width:1.35em; height:1.35em; font-size:1.5em; 
	border-radius:50%; 
	position:absolute; right:-10px; top:-10px;
	background-color:rgba(0,158,145,1);
	color:#fff;
	}
	
.infobar .homepage button[type=button]{
	background-image:url(../images/homepage.svg);
	background-repeat:no-repeat;
	background-size:2em auto;
	background-position: center 0.9em;
	background-color:transparent;
	display:block;
	height:3em; width:5.5em;
	}


.infobar .feelback button[type=button] ,.infobar .logout button[type=button] ,.infobar .pay-info button[type=button] 
,.infobar .passcg button[type=button]{
	font-size:2em; color:#000; border:none; font-weight:300;
	padding:0.33em 0.8em;
	}.infobar .pay-info button[type=button]{
        padding:0.33em 0.5em; margin:0; background-color: #fff; 
        box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0);
} 


.pay-title h1{ color:#000; font-weight:300; font-size:2.5em; text-align: center;}
.pay-title h1 strong{ margin-right:0.5em;}
.pay-title cite{
	text-align: center;
	font-style: normal;
	color:#000;
	font-size:22px;
	margin: 0.8em 0;
	}

.pay-title .user-title{
	font-size:1.5em;
	background-color:rgba(0,0,0,1);
    background-color:rgba(255,255,255,1);
	padding-top:1em;
	padding-bottom:1em;
	color:#000;
	text-align:center;
	}
	.pay-title .user-title h1{
		text-align:center; border-right:#d56700 solid 1px;
		font-size:2em; font-weight:300; }
	
.pay-title .user-title span{
	font-weight:300;
	font-size:24px;
	margin-top:0.5em;
	}
.pay-title .user-title span p{
	color:#9c9c9c;
	font-size:16px;
	font-weight:normal;
	}


.nline{border:none;}
.nl-line{border-left:none;}
.nr-line{border-right:none;}
.nt-line{border-top:none;}
.nb-line{border-bottom:none;}


.list-abc ,.list-def ,.list-all ,.list-ps{background-color:rgba(255,255,255,1); padding:0; margin:0;}
.list-all ,.list-ps{background-color:rgba(255,255,255,0);}
.list-def{clear: left;} 
.pay-detail{
	 padding:0; margin-top: 1.4em;
		background-color:rgba(255,255,255,1);
	}
.table th{
	background-color:#d56700; background-color:#f2f2f2; color:#d56700; display:block; 
	font-size:1.24em; font-weight:600;}
.table th strong ,.table td strong{
	float:right; font-weight:300;}
.table td{font-size:1.12em; }
.table td strong{color:#000; font-weight:300; font-size:1.24em;}
.table td b{ margin-right:0.5em; color:#d56700;}

.totle{
	 font-weight:300;  text-align:right; 
	border-bottom:none; 
     
	}
.totle table th{background-color: #f3ac43 !important; color: #fff; }
.totle table td {height: 3.5em;}
.totle table td strong{ font-size:1.5em; padding-bottom: 1em !important; font-weight:600; }

.advance-title input[type=text] ,.ip-txt input[type=text]{
    padding: 1em 0.5em; color: #000; text-align: center;
    font-size: 2.5em; box-shadow: 0 0 0px rgba(170,170,170,1); 
    border-radius:0; border: none; border-bottom: 3px solid #ccc;
}
.advance-title input[type=text]:focus ,.ip-txt input[type=text]:focus{background-color: #f2f2f2; border-bottom: 3px solid #000;}
.advance-title div:nth-child(3){font-size: 1.4em; text-align: center; margin-top: 0.5em; color: #000;}
.advance-title input[type=submit]{
    background-color: #fff; border: 2px solid #bdbdbd; box-shadow: 0 0 0px rgba(170,170,170,1); 
    font-size: 2.5em; padding: 0.3em 0em; color: #000;
}

.mtb1{margin: 1em 0;}

.pedt-btn input[type=button]{
    background-color: #fff; border: 2px solid #bdbdbd; box-shadow: 0 0 0px rgba(170,170,170,1); 
    font-size: 2em; padding: 0.3em 0em; color: #000;
}

.ip-txt{padding: 1em;}
.ip-txt label strong{
	font-size: 1.3em;
}



.paytable-ps{ margin-bottom:1.5em;}

.panel-group{ padding:0;}
.panel-group .panel-default .panel-heading ,.panel-group .panel-default .panel-body{ border-radius:0;}
.panel-group .panel-default .panel-heading{background-color:rgba(170,187,203,1);}
.panel-group .panel-default .panel-heading img{ width:40px; height:40px;}
	
.panel-group .panel-default .panel-heading a{color:#fff; font-size:1.2em;}
.panel-group .panel-default .panel-body{color:#999; font-size:1.2em; margin-left:1em;}
.panel-group .panel-default .active{background-color:rgba(0,158,145,1);}


.add-info span{ display:none;}
.add-info{
	position: fixed; 
	top:90%; left:50%; font-style:normal;
	transform:translate(-50%,-50%);
	z-index:998;
	bottom:-2em;}
.add-info button[type=button]{
	width:0.96em; height:0.96em;
	background-color:rgba(255,255,255,1);
	font-size:7em; color:#019e91; border-radius:50%;}
	.add-info i{ position:absolute; left:0.01em; top:-0.02em;}
	


.lightbox {
	background-color:rgba(255,255,255,1); 
	padding:2em;
	box-shadow:4px 4px 16px 16px rgba(215,215,215,0.4);
	height:auto;
	}
.lightbox-title{height:6em; margin:0; padding:0; margin-top:-3em;}
.lightbox .lightbox-title h1{
	font-size:2.5em; font-weight:300; color:#000;
	background-color: transparent;
	}
	.lightbox textarea{
	font-size:1.4em; font-weight:300; color:#000; border-radius:0;
	height:11em; box-shadow:inset 3px 3px 5px 3px rgba(215,215,215,0.4);
	border:2px #e7e7e7 solid;
	}
	.lightbox .sub button[type=submit]{
		background:#000; color:#fff; border:none; 
		font-weight:300; font-size:1.6em;}

.moon-select{padding:0;}


.contract-title{background-color: #f2f2f2; margin-top: 2.5em;}
.contract-title h2{
	font-size: 1.5em;
	padding: 1em; margin-bottom: 0; 
	text-align: center;
}
.mt0{margin: 0;}


/* moblie style */
.moblie-style{padding:0; margin-bottom:0.5em;}

.moblie-menu{
	padding:0;
	position:absolute; z-index:999;
	background-color:#f3ac43;}
.moblie-style .infobar{
	padding:0; margin:0; }
	.moblie-style .infobar .pay-info{
	margin-top:1em;
}
	
	.moblie-menu li{
		padding:1.2em;
		text-align:center;
		border-bottom:1px solid #fff;
	}
		.moblie-menu a{
			color:#fff;
			font-size:1.5em;
	}

.moblie-menu .mobileleave{
	animation-name: flash;
	 animation-duration: 3s;
  animation-fill-mode: both;
		animation-iteration-count: infinite;
}


/* moblie style */
/* select style */ /* reset */

select {
  margin: 0;      
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* select style */
	
.container-fluid ,.infobar ,.pay-title{padding:0;}


.basic-lightbox{
	box-shadow: 0 0 10px rgba(170,170,170,1); border-radius:0;
	background-color:#000; color:#f3ac43; color:#;
	background-size:23em auto;
	padding:2.54em; margin:0;
	text-align:center; 
	}
.basic-lightbox a{
	font-size:1.5em;
	padding:0.3em 3em; margin-top:0.8em;
	border-radius:0px;
	}
.basic-lightbox .btn-success{
	background-color:rgba(255,255,255,1);
	color:#000; border:1px solid #fff;}
	.basic-lightbox .btn-success:hover{
	background-color:#fff;
	color:#000; }
	
		.basic-lightbox .btn-danger:hover{
	background-color:rgba(92,61,129,1);
	color:#fff; border:2px solid #fff;
}
.basic-lightbox h2{font-size: 1.4em;}
	
.form-control {
  font-size: 16px;
  line-height: 1.42857143;
  color: #81511c;
  background-color: #fff;
  border: 1px solid #ccc;
}
.form-control:focus {
  border:2px solid #fff;
  background-color: #fff;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(223, 223, 223, .9);
          box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(223, 223, 223, .9);
}
.nav-tabs{ margin-top:1em; border-bottom: 2px solid #8b73a9;}
.nav-tabs .to-list a{ color:#8b73a9; font-size:150%; padding:0.3em 0.5em;}　
	.nav-tabs > li > a{
		color:#fff; font-size:120%; font-weight:900;
		border-color: #f1f3f2 #f1f3f2 #f1f3f2;
	  border-radius:5px 5px 0 0;
	  background-color: #f1f3f2;
	  color: #8b73a9;
		}
	.nav-tabs > li.active > a,
	.nav-tabs > li.active > a:hover,
	.nav-tabs > li.active > a:focus {
	  color: #fff;
	  cursor: default;
	  background-color: #8b73a9;
	  border: 2px solid #8b73a9;
	  border-bottom-color: transparent;
	  border-radius:5px 5px 0 0;
	}
	.nav-tabs > li > a:hover {
	  border-color: #f1f3f2 #f1f3f2 #f1f3f2;
	  border-radius:5px 5px 0 0;
	  background-color: #f1f3f2;
	  color: #8b73a9;
	}
.sub button[type=submit]{
	margin:1em 0em; margin-top:0em;
	font-weight:900;
	font-size:140%;
	background-color:rgba(225,225,225,0.8);
	color:#1c1f26;
	border:1px #ccc solid;
	border-radius:3px; height:2.5em; line-height:2.5em; padding:0;
	}
.sub button[type=submit]:focus {
	background:#9d8bb3;
	color:#fff;
	}
.sub button[type=submit]:hover {
	background:#000;
	background-color:rgba(92,61,129,0.6);
	color:#fff; border:1px #d3c5e3 solid;
	}
	.classBg{
	background-color:rgba(234,104,162,0.8); 
	box-shadow: 0 0 0.5em rgba(0,0,0,0.2); 
	color:#fff; font-weight:900; font-size:120%;}	
.classBg .form-group { height:3em; margin:0;}

.form-group textarea{ height:4.5em;}

					
	.basic-title ,.form-data-title{
	background-color:rgba(0,0,0,0.4); color:#fff; font-weight:900; margin-top:0.5em; font-size:120%; border-radius:3px 3px 0 0;}
	.form-data-title{ border-bottom:none; padding-top:0.5em; }
	.form-data-title i ,.form-data-title h3{ margin-left:1.5em; margin-top:1.2em;}
	.form-data-title h3 ,.day-sv h3 ,.year-sv h3{display:inline; font-size:100%; font-weight:900;  margin-left:0.5em; margin-right:0.5em;}
	.form-main{ background-color:rgba(245,245,245,0.9); margin:0 0.1em; padding:0em 0em; margin-bottom:1em;}

.lightbox-title h1{ background:#353942; color:#fff;}	
.add-title ,.mod-title{
	background:#c18d66; padding:1em 0em; margin-bottom:0; top:-1em; position:relative;}


.input-group-btn button[type=submit]{width:18em; font-size:11.1px; left:-2.5em;}
.search-bar input[type=text]{ font-size:1.35em; margin:0;}
.search-bar button[type=submit]{}
.search-bar button[type=submit] i{}
.search-bar button[type=submit]:hover{background:#fbc5e3; color:#fff; border:1px solid #fddff0;}
.search-bar select{font-size:1.35em;} 
.search-bar button i{ font-size:1.7em; margin:0 !important;}
.dbox{ width: 100%; height:1px; display:inline-block; background-color: transparent;}
.ds-title{background:#f5f5f5;}
.form-textarea textarea{background-color:rgba(255,255,255,0.9);}


.advance-title input[type=Int]{
    padding: 1em 0.5em; color: #000; text-align: center;
    font-size: 2.5em; box-shadow: 0 0 0px rgba(170,170,170,1); 
    border-radius:0; border: none; border-bottom: 3px solid #ccc;
}
.advance-title input[type=Int]:focus{background-color: #f2f2f2; border-bottom: 3px solid #000;}
.advance-title div:nth-child(3){font-size: 1.4em; text-align: center; margin-top: 0.5em; color: #000;}
.advance-title input[type=submit]{
    background-color: #fff; border: 2px solid #bdbdbd; box-shadow: 0 0 0px rgba(170,170,170,1); 
    font-size: 2.5em; padding: 0.3em 0em; color: #000;
}

.privacy-title {
  text-align: center;
}
.privacy-title h1{
  font-size: 2em;
}
.sign .signature {
  border: 5px #ccc solid;
  height: 23em;
}
.sign .signature-btn input[type=submit]{
    margin-bottom: 1em;
    
}
.sign .signature-btn input[type=button]{
    font-size: 1.3em; border: 2px #603192 solid; padding: 0.5em; border-radius: 4px;
    margin-top: -2em;  color: #fff; background-color: rgba(72,36,115,0.9);
    font-family: 'Noto Sans CJK TC Thin'; 
}

.leave-form{margin: 0; padding: 1em; background-color: #fff;}
.leave-form .leave-form-input {padding: 0;}
.leave-ti{margin: 0; padding: 0;}
.leave-ti h2{
	font-size: 1.2em; 
	background-color: #fff; text-align: center; padding: 1em;
	
}

.debt-con h1{
    margin: 0; padding: 0; text-align: center; color: #fff; font-size: 2em; line-height: 1.5em; 
    padding-top: 0.5em; padding-bottom: 0.5em; background-color: #aa9ded;}
.debt-con input[type=submit]{
    background-color: rgba(255,255,255,1);
  background-image: url("../images/submit.png");
  background-position: right;
  background-repeat: no-repeat;
  font-size: 2em;
  color: #5a4381;
  font-weight: 300;
  width: 100%;
  margin-top: 1em;
  margin-bottom: 1em;
  border-radius: 6px;
  border: 2px solid #9677a7;
}


.ip-button input[type=button] ,.ip-button input[type=submit] {
  background-color: rgba(255,255,255,1);
  background-image: url("../images/submit.png");
  background-position: right;
  background-repeat: no-repeat;
  font-size: 2em;
  color: #5a4381;
  font-weight: 300;
  width: 100%;
  margin-top: 1em;
  margin-bottom: 1em;
  border-radius: 6px;
  border: 2px solid #9677a7;
}
/*checkbox Style*/
.check-style {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1em;
  padding: 0em 1.5em;
}
.check-style label {
  font-size: 1.3em;
  font-weight: 300;
}
.span_pseudo ,.chiller-cb span:before ,.chiller-cb span:after {
  content: "";
  display: inline-block;
  background: #fff;
  width: 0;
  height: 0.3em;
  position: absolute;
  transform-origin: 0% 0%;
}
.chiller-cb {
  position: relative;
  display: flex;
  align-items: center;
}
.chiller-cb input {
  display: none; 
}
.chiller-cb input:checked ~ span {
  background: #fd2727;
  border-color: #fd2727;
}
.chiller-cb input:checked ~ span:before {
  width: 1.5em;
  height: 0.225em;
  transition: width 0.1s;
  transition-delay: 0.3s; 
}
.chiller-cb input:checked ~ span:after {
  width: 0.6em;
  height: 0.225em;
  transition: width 0.1s;
  transition-delay: 0.2s;
}
.chiller-cb input:disabled ~ span {
  background: #ececec;
  border-color: #dcdcdc;
}
.chiller-cb input:disabled ~ label {
  color: #dcdcdc;
}
.chiller-cb input:disabled ~ label:hover {
  cursor: default;
}
.chiller-cb label {
  padding-left: 2em;
  z-index: 2;
  cursor: pointer;
  margin-bottom: 0;
  text-align: center;
  font-size: 1.2em;
}.chiller-cb h2{white-space:nowrap; font-size: 1em;}
.chiller-cb span {
  display: inline-block;
  width: 1.8em;
  height: 1.8em;
  border: 2px solid #ccc;
  border-radius: 4px;
  position: absolute;
  left: 0;
  transition: all 0.2s;
  z-index: 1;
  box-sizing: content-box;
}
.chiller-cb span:before {
  transform: rotate(-55deg);
  top: 1.4em;
  left: 0.6em;
}
.chiller-cb span:after {
  transform: rotate(35deg);
  bottom: 0.6em;
  left: 0.35em;
}


.main-contact{margin:0;}

	
.add-menubg{background:none;}
.page-pag{
	background-color:rgba(255,255,255,0.5); 
	border-radius: 0 0 3px 3px; margin:0;}
.tablelist .ioe th{ background:#f1f3f2; color:#1c1f26; border-bottom:2px #353942 solid;}
.page-pag .pagination{
	display:flex; 
	align-items:center;
 justify-content:center;}
.page-pag .pagination .active a{
		background-color: #f1f3f2; color:#000; 
		font-size:150%; border:1px #000 solid; border-left:1px #fff solid; border-right:1px #fff solid;  
		padding:2px 1em; top:0em;}
	
.comiss strong{ border:1px solid #369; color:#fff; background-color:#a970f5; padding:0.5em;}
.btn-info2{
  color: #666;
  background-color: #fff;
  border-color: #ccc;
}
.btn-info2:focus,
.btn-info2.focus {
  color: #fff;
  background-color: #b28850;
  border-color: #926747;
}
.btn-info2:hover {
  color: #fff;
  background-color: #b28850;
  border-color: #926747;
}
.btn-info2:active,
.btn-info2.active,
.open > .dropdown-toggle.btn-info {
  color: #fff;
  background-color: #b28850;
  border-color: #926747;
}
.btn-info2:active:hover,
.btn-info2.active:hover,
.open > .dropdown-toggle.btn-info2:hover,
.btn-info:active:focus,
.btn-info.active:focus,
.open > .dropdown-toggle.btn-info2:focus,
.btn-info:active.focus,
.btn-info.active.focus,
.open > .dropdown-toggle.btn-info2.focus {
  color: #fff;
  background-color: #269abc;
  border-color: #1b6d85;
}
.btn-info2:active,
.btn-info2.active,
.open > .dropdown-toggle.btn-info2 {
  background-image: none;
		}
.btn-info2.disabled:hover,
.btn-info2[disabled]:hover,
fieldset[disabled] .btn-info2:hover,
.btn-info2.disabled:focus,
.btn-info2[disabled]:focus,
fieldset[disabled] .btn-info2:focus,
.btn-info2.disabled.focus,
.btn-info2[disabled].focus,
fieldset[disabled] .btn-info2.focus {
  background-color: #5bc0de;
  border-color: #46b8da;
}
.btn-info2 .badge {
  color: #5bc0de;
  background-color: #fff;
}
.form-control-feedback{
	font-size:2em;
	margin-top:1.1em; margin-right:0.5em;}

.no-data{
	top:50%; left:50%;
	transform:translate(-50%,-50%);
	font-size:200%;
	}

.infobar .but-none button[type=button]{
	background-color:transparent;
	height:2em;
	margin-left:-0.2em;
	font-size:1.8em; color:#000; border:none;
	padding:0.33em 0.8em; margin-bottom:0.5em;
	font-style:normal;
	font-weight:300;
	}
.infobar .but-none button[type=button]:hover{
		background-color:rgba(255,255,255,1); 
	}
.infobar .d-ative button[type=button]{
	background-color:rgba(255,255,255,1);  
	margin-left:-0.2em;
	font-size:1.8em; color:#000; border:none;
	padding:0.33em 0.8em; margin-bottom:0.5em;
	font-style:normal;
	font-weight:300;
	}

.container .title-help div{margin: 0; padding: 0;}
.container .title-help h1{
	font-size: 1.5em;
	background-color:#fff;
	color: #000;
	padding: 1em ; padding-bottom: 1.3em;
	line-height: 1.5em;
	
}

.advance-detail{padding: 0; margin: 0;}
.advance-detail table{ width: 100%; }
.advance-detail table th ,.advance-detail table td{ 
	text-align: center;
	font-size: 1.2em;
	padding: 0.5em;
}
.advance-detail table td{ 

	font-size: 1.1em;
}
.advance-detail table th{ color: #fff; background-color: #777;} 
.advance-detail table td{  background-color: #fff;} 
.advance-detail table td:nth-child(4){ color: #ff0000; font-weight: 900;}

.file-dl{ text-align:center; margin-bottom: 1em; color: #fff; background: #000; margin: 1em;}
.file-dl a{  padding: 0.8em; font-size: 1.5em; color: #fff; font-weight: 900;}
.os-main h2{text-align: center;}
.os-file div:nth-child(2){ float: right;}
.os-file div{padding: 0; margin-bottom: 1em;}
.os-file a{
	border: 1px solid #fff; color: #fff; padding: 0.5em; background-color: #57367e; text-align: center;
	font-size: 2em; text-decoration: none;
}
.os-file a:hover{ color: #57367e; background-color: #fff; border: 1px solid #57367e;}
.os-file .andApp a ,.os-file .iosApp a{
	background-color: #93c01d;
	background-image:url(../images/android.png);
	background-repeat:no-repeat;
	background-size:3em auto;
	background-position: 3% 50%;
}
.os-file .iosApp a{
	background-color: #989898;
	background-image:url(../images/ios.png);
}
.os-file .andApp a:hover{ color: #93c01d; background-color: #fff; border: 1px solid #93c01d;}
.os-file .iosApp a:hover{ color: #989898; background-color: #fff; border: 1px solid #989898;}




	@keyframes flash {
  from, 50%, to {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0.25;
  }
}
@media (min-width: 736px){
 .pay-detail{padding:0 ;}
	.table-rwd{margin:0;}
	.list-abc{margin:0;}
}

@media (max-width: 768px) { /*pad mode*/
.pay-title .user-title h1{
		border: none;
		border-bottom:1px #d9d9d9 solid;
		padding-bottom:0.5em;}
.infobar .feelback button[type=button] 
,.infobar .logout button[type=button]{
	 font-size:1.3em; height:3em; width:90%;
}
.infobar .logout button[type=button]{ float:right;}
.infobar .homepage button[type=button]{width:2.5em;}
	
.upimg {padding: 0;}
.upimg .btn-update {padding: 0;}
.upimg .tsimg{text-align: center; position: absolute; display: flex; top: -0.1em; justify-content:flex-end;text-transform:uppercase;}
.upimg .tsimg span{padding: 0.3em; border-radius: 3px; background-color: rgba(184,184,184,0);}
.upimg label.input-file{height: 5em;}
.upimg .input-file span {
  width: 92.5vw;  padding: 0.5em;
  background-color:rgba(51,27,75,1);
  color:#fff;  border: none;
  font-size: 1.2em; 
}
.upimg div:nth-child(4){color:rgba(51,27,75,1);text-align: center;}
.upimg label.control-label {font-weight: 300; margin-left: 1em;}
.upimg {height: 4em;}
.pedt-title span input[type=button] ,.ip-txt input[type=button] ,.input-file input[type=file] {
    background-color: #fff;
    color: #32204b;
    font-size: 1.5em;
    margin: 0; 
    margin-bottom: 1em;
}
.img-view a, .img-del a {
  width: 100%;
  margin-top: 1.5em;
  font-size: 1.5em;
}
}
/*最小 980px (含) 以上*/ /*pad 橫式*/
@media screen and (min-width: 980px) {
.advance-title .adva-tb ,.advance-title .adva-sub{border: 1px # solid;  margin-top: 0.5em;}
.advance-title .help{text-align: center; font-size: 1.5em; padding-bottom: 1em;}	

.advance-title input[type=text]{margin-top: 0.5em; margin-bottom: 0.5em;}
.advance-title input[type=submit]{padding: 0.1em 0em; margin-top: 0.2em;}
.advance-title div:nth-child(3){margin-bottom: 1em; margin-top: 1em;}
}
.debt-con{margin-top: 1.5em;}


@media screen and (max-width: 767px){ /*phone mode*/
    .advance-title{padding-top: 0.5em;}
textarea.form-control {
    height: 10em;
    border-radius: 0; 
    border: 3px #ccc solid;
  
    }
textarea:focus{
    border-radius: 0;
    border: 1px solid #ba68c8;
    box-shadow: 0 0 0 0.2rem rgba(186, 104, 200, .25);}
   
.upimg {padding: 0; border-bottom: 0px #ccc solid; display: table-cell; padding-bottom: 0em;}
.upimg .btn-update {padding: 0;}
.upimg label.input-file{ height: 3em; margin: 0;}
.upimg .input-file span {
  width: 85vw;  padding: 0.5em; margin: 0; margin-left: -1.2em;
  background-color:rgba(51,27,75,1);
  color:#fff;  border: none; font-size: 24px; 
}

.upimg label.control-label {font-weight: 300; font-size: 1.5em; padding-top: 1em; text-align: center;}
.upimg input:nth-child(1){}
.upimg div:nth-child(4){}

.upimg input[type=text] {display: none;}
.upimg .input-file input[type=file] {
    background-color: #fff;
    color: #32204b;
    font-size: 1.5em;
    margin: 0; 
}
.upimg .img-view a ,.upimg .img-del a {
  margin: 0; 
  margin-top: 1em;
  font-size: 1.2em;
}
.upimg .img-del a{}	
.upimg .img-view a{ margin-top: em;
}	
	
.trwd table {width: 800px;}
.table-rwd{min-width: 100%;}
  /*針對tr去做隱藏*/
		 tr.tr-only-hide {/*display: none  !important;*/}
  /*讓tr變成區塊主要讓他有個區塊*/
.table-rwd tr{
    display: block;
				border-bottom: 1px solid #ddd;
}
.table-rwd td {
    font-size: 18px;
    overflow: hidden;
    width: 100%;
    display: block;
}
.table-rwd td:before {
    /*最重要的就是這串*/
    content: attr(data-th) " ";
    /*最重要的就是這串*/
    display: inline-block;
    text-transform: uppercase;
}
    
    .table-rwd td strong{
    font-size: 17px;
        font-weight: 600;
}

/*當RWD縮小的時候.table-bordered 會有兩條線，所以針對.table-bordered去做修正*/
.table-rwd.table-bordered td,.table-rwd.table-bordered th,.table-rwd.table-bordered{border:0;}
.table th strong ,.table td strong{  position:absolute; right:1em;} 
.pay-title h1{  border: none;}
.infobar .dl-execl button[type=button]{
	background-position: center 0.2em;
	height:4em; width: 100%;
}
.infobar .logout button[type=button]{
	position:absolute; top:-10.5em; right:-9em; width: 5em;
}
.infobar .back button[type=button]{
	background-color:rgba(255,255,255,1);  
	margin-left:-0.2em;
	font-size:1.8em; color:#000; border:none;
	padding:0.33em 0.8em; margin-bottom:0.5em;
	font-style:normal;
	font-weight:300;}
.infobar .feelback button[type=button]{
	background-color:transparent; box-shadow:none;}
    .moblie-style{
        background-color:rgba(255,255,255,0.9) !important; 
        position: -webkit-sticky;
    position: sticky;
    top: -1px; z-index: 3;
        
    }
    .pay-content{padding-top: em !important;}
    .pay-content .pay-title .user-title{background-color: #;}
.pay-title .user-title span{
	margin-top:0em;
	}
.infobar .homepage button[type=button]{width:5em;}
.loginBg2 .container{ padding-left:0;}
.paytable-ps{ margin-bottom:0em;}

.advance-detail{padding: 0; margin: 0;}
.advance-detail table{ width: 100%; }
.advance-detail table th ,.advance-detail table td{ 
	text-align: center;
	font-size: 1.1em;
	padding: 0.5em;
}
.advance-detail table td{ font-size: 1.1em;}
.advance-detail table th{ color: #fff; background-color: #777;} 
.advance-detail table td{ background-color: #fff;} 
.advance-detail table td:nth-child(4){ color: #ff0000; font-weight: 900;}

.advance-title input[type=text]{margin-top: 0.5em; margin-bottom: 0.5em; font-size: 1.8em;}
.advance-title input[type=submit]{padding: 0.1em 0em; margin-top: -0.5em;}
.advance-title div:nth-child(3){margin-bottom: 1em; margin-top: 1em;} 
.advance-title .help{text-align: center; font-size: 1.5em; padding: 1em;}
.advance-title label{text-align: center; padding: 0.5em; font-size: 1.5em; color: #000;}


.add-info{
	top:88%; left:50%;
	transform:translate(-50%,-50%);}
.infobar .feelback span{
	width:1.35em; height:1.35em; font-size:1.5em; 
	right:0px; top:10px;
	line-height:1.2em;
	}
.infobar .pay-info span{
	position:absolute; color:#000;
	font-size:2em;
	left:-0.1em; top:-0.2em;
	border-radius:50%;
	background-color:rgba(255,255,255,1);
	animation-name: flash;
	 animation-duration: 3s;
  animation-fill-mode: both;
		animation-iteration-count: infinite;
	}

.mobile-login-logo{
	background-image:url(../images/login_m.svg);
	background-repeat:no-repeat;
	background-size:5em auto;
	background-position: 28% 60%;
	padding-top:0em;
	margin-top:5em;
	height:5em;
}
.select-moon select{
	text-align: center;
    text-align-last: center;
	}


.container .title-help div{margin: 0; padding: 0;}
.container .title-help h1{
	font-size: 1.5em; 
	background-color:#4dbea7;
	color: #fff;
	padding: 1em ; padding-bottom: 1.3em;
	text-align: center;
	
}
    .mm-navbar{background-color: #fff !important;}

}

@media screen and (-webkit-min-device-pixel-ratio:1.1) {}

@media screen and (max-width: 767px) {
.container{margin:0; padding:0;}
.loginBg2{ width:96%; margin-top:0em; margin-bottom:5.5em;}
.login{margin-top:0em;}
.login .input-text input{
	font-size:2em; 
	padding:1em 0.5em; margin:0.1em auto;
	}
.title{
	padding:0;
	padding-top:0.4em;
	margin-top:0.2em; line-height:1.8em; text-indent:;
	text-align:center;
	background-image:none;
}
.infobar .mlogo{
	background-image:url(../images/logo_login2_m.svg); /*手機左上logo*/
	background-repeat:no-repeat;
	background-size:4.5em auto;
	background-position:1em 0.9em;
	padding:0;
	padding-top:0em;
	margin-top:0.2em;
	height:5em;
	padding:0;
}
.login-submit-area .submit{margin:0; padding-right:0;}
.login-submit-area .submit input[type=submit]{
	background-color: #000; color: #fff;
	padding:0.5em; font-size:1.3 em; 
}	
.panel-group{ padding:0.5em;}
.moon-select{padding:0em 1em;}
.page-down input[type=submit]{ width:99%;}
.lightbox textarea{margin-left:0.65em; }
.form-control-feedback{
	font-size:2em;
	margin-top:0.4em; margin-right:0.5em;
    }
}
@media screen and (min-width: 1023px) { /*web mode*/
.pay-title .user-title h1{ padding:0;}
.loginBg2{width:500px;}
    .loginBg2 .title{
        background-image:url(../images/login_m.svg);
	background-repeat:no-repeat;
	background-size:4em auto;
	background-position: 50% 80%;
	padding-top:0em;
	margin-top:0.2em;
	height:5em;
    }
.login-submit-area .submit{margin:0; padding-right:0;}
.advance-title label{ font-size: 1.5em; color: #000;}


.advance-title{padding-top: 0.5em;}
textarea.form-control {
    height: 10em;
    border-radius: 0; 
    border: 3px #ccc solid;
  
    }
textarea:focus{
    border-radius: 0;
    border: 1px solid #ba68c8;
    box-shadow: 0 0 0 0.2rem rgba(186, 104, 200, .25);
}
    
.upimg {padding: 0; border-bottom: 0px #ccc solid; display: table-cell; padding-bottom: 0em;}
.upimg label.input-file{
    margin: 0; position: absolute; top: 23px; left: 0.4em; 
    display: flex;
    justify-content: center;
    align-items: center; }
.upimg .input-file span {
  margin: 0; margin-left: 0; 
  background-color:rgba(51,27,75,1);
  color:#fff;  border: none; font-size: 24px; 
}

.upimg div {padding: 0;}
.upimg input[type=text] {font-size: 24px; width: 56vw; text-align: left; padding: 1.4em;}
    
    .pay-select {
        position: absolute; top: 0.5em; left: 19.5%;
        background-image:url(../images/logo_login2_m.svg); /*手機左上logo*/
	background-repeat:no-repeat;
	background-size:4em auto;
	background-position: 1.5em 0em;
	padding:0;
	padding-top:0.2em;
        padding-left: 7.5em;
	height:5em;
    }
    .pay-content{margin-top: 1em;}
    .select-moon select {
  font-size: 1.3em !important;
  color: #e38700;
  background-color: rgba(252,176,64,1);
  background-color: #fff !important;
  text-align-last: left;
  border: #fcb040 0px solid;
  background-size: 1em auto;
}


.select-moon select:after {}
.select-moon select:focus {
  color: #e38700;
  text-align-last: left;
    
}
     .pay-title .user-title h1{
		text-align:center; border-right:#d56700 solid 1px;
		font-size:2em; font-weight:300; width: 24.3%;}
    
    .table-rwd td {
    font-size: 18px;
    overflow: hidden;
    width: 100%;
    display: block;
}
.table-rwd td:before {
    /*最重要的就是這串*/
    content: attr(data-th) " ";
    /*最重要的就是這串*/
    display: inline-block;
    text-transform: uppercase;
}
    
    .table-rwd td strong{
    font-size: 17px;
        font-weight: 600;
}
    
}

@media screen and (max-width: 1366px) { /*web mode*/
    .pay-select {left: 7%;}
}

.table{ margin-bottom: 0px; margin-top:-20px;}




