﻿
/*
--- form-check -------------------*/
.giveBack {
    flex-wrap: wrap;
    justify-content: center;
}

.giveBack input[type="radio"] {
    margin-top: 0.5rem;
    width: 1rem;
    height: 1rem;
}

.giveBack .form-check {
    margin-bottom: 2rem;
}

.giveBack .form-check:first-of-type {
    display: inline-block;
}

.giveBack .form-check input {
    display: inline;
}

.giveBack .form-check select {
    display: inline;
}

.giveBack h4 {
    padding-top: 0;
    margin-right: 10px;
}

@media screen and (max-width: 560px) {
    .giveBack {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .giveBack h4 {
        margin-right: 0;
    }

    .giveBack .form-check {
        margin-bottom: 1rem;
    }
}

/*
---- remind -------------------*/
.remind {
    background-color: #eeeeee;
    padding: 15px 20px;
}

.remind label{
    font-size: 15px;
}

.remind p span {
    color: #009999;
    font-size: 1.2rem;
    font-weight: bold;
    padding-left: 5px;
    padding-right: 5px;
}

/*
---- checkPage -------------------*/
.checkPage input[type="checkbox"] {
    margin-top: 0.5rem;
    width: 1rem;
    height: 1rem;
}

.checkPage .btn {
    margin-left: 5px;
    margin-right: 5px;
}

/*
---- form-control ---------------*/
.form-control {
    border-radius: 0;
    font-size: 1.25rem;
}
.form-control {
    color: #333333;
    font-size: 1.25rem;
    border-radius: 0;
    padding: 0 0 0 3px;
    border: 1px solid #a9a9a9; }
/*
---- 表單 ---------------*/
.formList {
    display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.formList li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 2rem;
}

.formList label {
    /* min-width: 12rem; */
    font-size: 1.25rem;
    text-align: right;
    margin-right: .75rem;
    margin-bottom: 0;
    color: #009999;
    font-weight: bold; }


/* .formList li label { */
    /* text-align: left; */
    /* margin-right: 5px; */
    /* margin-bottom: 0; */
/* } */

.formList select {
    margin-left: 10px;
    margin-right: 5px;
    min-width: 60px;
}

/* 新增formList項目 */
.formList select:first-of-type {
      margin-left: 0;
      min-width: 92px;
      max-width: 192px; }
  .formList a {
    display: inline-block;
    line-height: 1rem; }
  .formList .btn-modal {
    background: none;
    border: 0;
    padding: 0; }
  .formList i {
    font-size: 1.25rem;
    color: #9e9e9e;
    padding-left: 5px; }
  .formList .form-control {
    padding: .37rem .3rem;
    width: auto; }

.checkboxW{
    width: 50px;
}

@media screen and (max-width: 768px) {
    .formList li {
        display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-bottom: 2rem;
    }

    .formList li label {
        text-align: left;
    }

    .formList li select:first-of-type {
        margin-left: 0;
        min-width: 95px;
    }

    .formList li select {
        /* margin-left: 5px; */
        /* margin-right: 3px; */
    }

    .formList .form-control {
        padding: 0.37rem 0.3rem;
    }
}

/*
--- 綁定紀錄 ---*/
.record-list {
    list-style: none;
    padding: 0;
    border: 1px solid #d8d8d8;
    margin-bottom: 2rem;
}

.record-list li {
    display: flex;
    border-bottom: 1px solid #d8d8d8;
    padding-left: 1.3em;
    line-height: 3rem;
}

.record-list li:last-child {
    border-bottom: 0;
    background-color: #e0f1f1;
}

.record-list li::before {
    content: "\f0da";
    /* FontAwesome Unicode */
    font-family: FontAwesome;
    display: inline-block;
    /*margin-left: -1.3em;*/
    /* same as padding-left set on li */
    width: 1.3em;
    /* same as padding-left set on li */
    color: #41b7b7;
}

.record-list li p {
    margin-right: 3rem;
}

@media screen and (max-width: 991px) {
    .record-list li p {
        margin-right: 2rem;
    }
}

@media screen and (max-width: 768px) {
    .record-list li {
        flex-direction: column;
        line-height: 2rem;
        padding: 0.5rem 3px;
    }

    .record-list li::before {
        content: '';
    }

    .record-list li p {
        margin-right: 0;
        text-align: left;
    }
}

/*
--- quota 名額綁定 ---*/
.quotaBG {
    background: url(../images/bg_quota.gif) no-repeat bottom center;
}

.quota {
    height: 30vh;
    font-size: 1.5rem;
}

.quota ul {
    justify-content: center;
    padding: 0;
}

.quota .item {
    list-style: none;
    padding: 30px 5px;
    margin: 30px 10px;
    min-height: 150px;

    text-align: center;
    font-weight: bold;
    background-color: #FFFFFF;
    /*border: 3px solid #66cccc;*/
    border-radius: 10px;
    /*max-width: 500px;*/
}

.quota .item h3 {
    color: #009999;
    font-size: 1.5rem;
}

.quota .record-list {
    max-width: 600px;
    margin: 0 auto 2rem;
    background-color: #fff;
}

.record-list li:last-child {
    background-color: #fff;
}

.quota .record-list li p {
    margin-right: 0;
}

.quota .record-list span {
    margin-right: 3px;
    margin-left: 3px;
}

.quota .record-list .reward {
    color: #009999;
    font-weight: bold;
}

@media screen and (max-width: 768px) {
    .quota {
        height: auto;
    }

    .quota ul {
        flex-wrap: wrap;
    }

    .quota .item {
        /*padding: 10px;*/
        margin: 10px 10px 5px;
        min-height: auto;
    }

    .quota .item h3 {
        font-size: 1.25rem;
    }

    .quota .record-list li p:nth-of-type(1)::before {
        content: "\f0da";
        font-family: FontAwesome;
        display: inline-block;
        /*margin-left: -1.3em;*/
        /* same as padding-left set on li */
        width: 1.3em;
        /* same as padding-left set on li */
        color: #41b7b7;
    }

    .quota .record-list li p {
        text-align: center;
    }
}

/*
--- searchTable 查詢結果表格 ---*/

.searchTable {
    width: 100%;
    box-shadow: none;
    border: 1px solid #d8d8d8;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    margin-top: 2.5rem;
    table-layout: fixed;
}

.searchTable tr {
    border-bottom: 1px solid #d8d8d8;
}

.searchTable th,
.searchTable td {
    border: none;
    padding: 10px 3px;
    text-align: center;
}

.searchTable th {
    color: #fff;
    background-color: #009999;
}

.searchTable td.tal {
    text-align: left;
}

.searchTable td.tar {
    text-align: right;
}

.searchTable i {
    margin-right: 5px;
}

/* .searchTable tbody td:last-child { */
    /*交易金額*/
    /* text-align: right; */
    /* padding-right: 20px; */
/* } */

.searchTable tfoot td {
    color: #009999;
    font-weight: bold;
    background-color: #e0f1f1;

    text-align: right;
    padding-right: 20px;
}

.searchTable .total {
    font-weight: bolder;
    padding-left: 5px;
}

@media screen and (max-width: 991px) {

    /*交易金額*/
    .searchTable tbody td:last-child,
    .searchTable tfoot td {
        padding-right: 10px;
    }
}

/* 
rwd-table */
@media screen and (max-width: 768px) {
    .rwd-table thead {
        display: none;
    }

    .rwd-table tbody td {
        display: block;
        text-align: left;
        padding: 0px 3px 3px;
        padding-left: 5.8em;
        text-indent: -5em;
    }

    .rwd-table tbody td::before {
        content: attr(data-title)'：';
        /*color: #009999;*/
        /*font-weight: bold;*/
        padding-right: 6px;
        width: 5em;
        display: inline-block;
        text-align: right;
    }

    .rwd-table tbody td:first-child {
        background-color: #009999;
        color: #FFFFFF;
        text-align: center;
        padding: 8px;
        padding-left: 0;
        text-indent: 0;
        margin-bottom: 0.25rem;
    }

    .rwd-table tbody td:first-child::before {
        content: '';
        color: #FFFFFF;
        width: auto;
    }

    .rwd-table tbody td:last-child {
        margin-bottom: 0.25rem;
    }

    .rwd-table tfoot td {
        display: block;
        font-weight: bold;
        text-align: center;

        padding-right: 0;
        /*background-color: #009999;
        color: #FFFFFF;*/
    }

    .searchTable tbody td:last-child {
        /*交易金額*/
        text-align: left;
        padding-right: 0;
    }

    .searchTable .total {
        font-size: 1.25rem;
    }
}
/*-------辦卡補件------------------*/
.RaiseCreditLimit h3{
	color: #ff0000;
	font-size: 0.95rem;
	text-align: center;
}
.form-control_2{
	width: 80%;
	margin-right: 10px;
}
.input_group {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}
.input_item{
    width: 50px;
    text-align: center;
}
.input_item input{
	width: 1rem;
    height: 1rem;
}
.input_item span{	
}
@media screen and (max-width: 768px) {
.input_item{
    width: 30px;
}
.input_item input{
	/* width: 1.3rem; */
    /* height: 1.3rem; */
}
}

.timeNote{
    color: #009999;
    font-weight: 600;
}

/*-------上傳資料-----------------*/
.upload_note{
	widows: 90%;
	color: #ff0000;
	padding: 0 0 25px;
}
.upload_note_1{
	widows: 90%;
	color: #ff0000;
	padding: 0 0 10px;
}
.upload_note_2{
	display: inline-block;
	color: #ff0000;
	padding: 20px 15px 5px;
}
.upload_note_3{
	display: inline-block;
	color: #323232;
	padding: 20px 15px 5px;
}
.upload_group{
	border-radius: 10px;
    border: 2px solid #CECECE;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: auto;
	
}
.prove{
	width: 100%;
	margin: 20px auto;
	text-align: center;
	padding: 0 5px;
}
.prove_border{
	position: relative;
	border-radius: 7px;
    border: 2px solid #118da2;
}
.prove_border a{
	display: block;
}
.prove_border img{
	 vertical-align:middle;
    text-align:center;
	}
.prove span{
	color: #969696;
	display: inline-block;
	padding: 10px;
}
.prove_note{
	position: absolute;
	color: #323232;
	top:0;
	left: 0;
	right: 0;
	margin: auto;
	padding: 10px;
	font-size: 0.8rem;
}
.opt{
	height: 44px;
}
.opt img{
	margin: 0;
}			
@media screen and (max-width: 768px) {
	.upload_note{
	padding: 0 0 15px;
	margin-left : 0.95rem;
    text-indent : -0.95rem;
}
.upload_note_1{
	padding: 0px;
	margin-left : 0.95rem;
    text-indent : -0.95rem;
	margin-bottom: -20px;
}
    .upload_group{
	 display: block;
    } 
.prove_note{
	padding: 5px;
}
}

.formStyle{
    border-top: #eeeeee 1px solid;
    padding-top: 25px;
}

.formTitle{
    text-align: left;
    background-color: #009999;
    color: #fff;
    margin-bottom: 0 !important;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: 600;
}

.activeTitle{
    color: #009999;
    font-weight: 600;
    text-align: left !important;
}

@media screen and (max-width: 768px){
    .formStyle{
        font-size: 17px;
    }
    .activeTitle{
        font-size: 20px;
    }
    .input_group{
        margin-bottom: 10px;
    }
    .input_item{
        margin-top: 4px;
    }
}


/*formLogin*/
.formLogin {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; 
      padding-left: 0px;
  }
    .formLogin label {
      width: 6.25rem; }
    .formLogin .form-group > .form-control {
      min-width: 18.2rem; }
    .formLogin .inDate {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      min-width: 18.2rem;
      margin-left: -2px;}
  /*---------補寄帳單-----------------------*/
    .formLogin .repair_send{
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      min-width: 18.2rem;
      margin-left: -2px;}
  @media all and (min-width: 320px) and (max-width: 576px) {
      .formLogin .repair_send{
       flex-wrap: wrap;
       min-width: 14rem;	
       justify-content: center}
      .repair_send label{
          padding-bottom: 15px;
      }
      .formLogin .repair_send select:nth-of-type(1){
        width: 15rem;
        }	
      .formLogin .repair_send select:nth-of-type(2){
        width: 15rem;
       }	
      .repair_send_txt{
        display: block;
        width: 100%;
        text-align: center;
        padding: 5px;
      }
          
      }
  /*---------補寄帳單-----------------------*/
  
    .formLogin .inCaptcha .form-control {
      min-width: 5rem;
      max-width: 10.6rem; }
     .formLogin .inOpt .form-control {
      min-width: 5rem;
      max-width: 9rem; }
    .formLogin .id_code {
      max-width: 120px;
      height: 44px;
      padding-left: 3px;
      margin: 0px;}
    .formLogin .staff {
      min-width: 18.2rem;
      font-size: 1.25rem;
      color: #333333; }
  
  .form-group :nth-child(3){
      margin-left: 3px;
  }
  
  .inOpt button{
      display: inline-block;
      text-align: center;
      background-color: #1f6aa0;
      border-radius: 5px;
      margin: 10px;
      width: 130px;
      height: 44px;
      line-height: 44px;
      font-size: 16px;
      color: #ffffff;
      border:0px;
  }
  .inOpt button:focus {
      outline: 0px }
  .inOpt button:hover {
      background-color: #145686;
  }
  /*
  .ResendOpt {
      display: inline-block;
      width: 130px;
      height: 44px;
      line-height: 44px;
      font-size: 16px;
      color: #ffffff;
  }
  */
   .formLogin .in_message .form-control {
      min-width: 18.2rem;}
  
  @media all and (min-width: 320px) and (max-width: 576px) {
    .formLogin,
    .formLogin li {
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
            }
    .formLogin label {
      text-align: left;
      width: 100%; }
    .formLogin .inDate select:first-of-type {
      width: 90px; }
    .formLogin .inCaptcha label {
      width: 100%; }
    .formLogin .inOpt label {
      width: 100%; 
      text-align: center;
      padding-bottom: 15px;}
    .formLogin .inOpt label {
      width: 100%; }
    .formLogin .inOpt .form-control {
      margin-right: 10px; }
    .formLogin .staff {
      min-width: unset; } 
    .formLogin .inDate {
      margin-left: 0px;}
  
    .form-group :nth-child(3){
      margin-left: 0px;
    }
  
    .formLogin .in_message .form-control {
      width: 100%;
      min-width: 8rem;
     }
    .formLogin .in_message label{
      margin-right: 0rem;
      text-align: center;
      }
  }
  
  /*-----------opt-------------*/
  .ResendOpt_note{
      padding-left: 3.1rem;
      text-indent:-3.1rem;
  }
  .text-DarkRed{
      color: #cc0e43;
  }

  .actCtnlist{
    padding-inline-start:0;
  }
  .actCtnlist li{
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: start;
        
  }