@charset "utf-8";
body {
    font-size: 17px;
    font-weight: 400;
    line-height: 1.8;
    color: #777777;
    color: #323232;
    background-color: #fff;
    height: 100%;
    position: relative;
}

.redWord {
    color: #d60000;
}

.button_group {
    border-top: 1px solid #afafaf;
    padding-top: 15px;
}

.btn.btn-red {
    background: #af1212;
    color: #fff;
    /* border: none !important; */
    border: 2px solid transparent !important;
    display: inline-block;
    margin-top: 5px;
}


/*表單頁短的主視覺*/

.shortKv {
    height: 304px;
}

.fill-shortKv {
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: cover;
}


/*@media (max-width:1400px){    
	.shortKv {
        height: 250px;
    }
}*/

@media (max-width:992px) {
    .shortKv {
        height: 275px;
    }
}

@media (max-width:768px) {
    .shortKv {
        height: 225px;
    }
}

@media (max-width:560px) {
    .shortKv {
        height: 180px;
    }
}


/*--- 主視覺 ---*/

.topimg-activity-login {
    background-image: url(../images/activity-login.jpg) !important;
}

@media screen and (max-width: 576px) {
    .topimg-activity-login {
        background-image: url(../images/activity-login-m.jpg) !important;
    }
}


/*--紅利積點查詢與各項費用折抵--*/

.topimg-bonus-query {
    background-image: url(../images/bonus-query.jpg) !important;
}

@media screen and (max-width: 576px) {
    .topimg-bonus-query {
        background-image: url(../images/bonus-query-m.jpg) !important;
    }
}


/*--兌換hamipoint--*/

.topimg-HamiPoint {
    background-image: url(../images/hamiPoint.jpg) !important;
}

@media screen and (max-width: 576px) {
    .topimg-HamiPoint {
        background-image: url(../images/hamiPoint-m.jpg) !important;
    }
}


/*--高鐵tgo點數兌換--*/

.topimg-TGo {
    background-image: url(../images/TGo.jpg) !important;
}

@media screen and (max-width: 576px) {
    .topimg-TGo {
        background-image: url(../images/TGo-m.jpg) !important;
    }
}


/*--樂活鈦金卡回饋金查詢/折抵--*/

.topimg-lehuotj {
    background-image: url(../images/lehuotj.jpg) !important;
}

@media screen and (max-width: 576px) {
    .topimg-lehuotj {
        background-image: url(../images/lehuotj-m.jpg) !important;
    }
}


/*--各項事業費用代扣--*/

.topimg-utilitiespay {
    background-image: url(../images/utilitiespay.jpg) !important;
}

@media screen and (max-width: 576px) {
    .topimg-utilitiespay {
        background-image: url(../images/utilitiespay-m.jpg) !important;
    }
}


/*--線上申辦信用貸款--*/

.topimg-PersonalLoaApply {
    background-image: url(../images/PersonalLoaApply.jpg) !important;
}

@media screen and (max-width: 576px) {
    .topimg-PersonalLoaApply {
        background-image: url(../images/PersonalLoaApply-m.jpg) !important;
    }
}


/*--信用貸款電子帳單申請--*/

.topimg-EbillApply {
    background-image: url(../images/EbillApply.jpg) !important;
}

@media screen and (max-width: 576px) {
    .topimg-EbillApply {
        background-image: url(../images/EbillApply-m.jpg) !important;
    }
}


/*--滿心期貸費率試算--*/

.topimg-LoansHeartRate {
    background-image: url(../images/LoansHeartRate.jpg) !important;
}

@media screen and (max-width: 576px) {
    .topimg-LoansHeartRate {
        background-image: url(../images/LoansHeartRate-m.jpg) !important;
    }
}


/*--費率試算--*/

.topimg-rate {
    background-image: url(../images/rate.jpg) !important;
}

@media screen and (max-width: 576px) {
    .topimg-rate {
        background-image: url(../images/rate-m.jpg) !important;
    }
}


/*--我要開卡--*/

.topimg-dspPageContent {
    background-image: url(../images/dspPageContent.jpg) !important;
}

@media screen and (max-width: 576px) {
    .topimg-dspPageContent {
        background-image: url(../images/dspPageContent-m.jpg) !important;
    }
}


/*--帳單輕鬆付--*/

.topimg-payeasy {
    background-image: url(../images/payeasy.jpg) !important;
}

@media screen and (max-width: 576px) {
    .topimg-payeasy {
        background-image: url(../images/payeasy-m.jpg) !important;
    }
}


/*--想分就分--*/

.topimg-wsp {
    background-image: url(../images/wsp.jpg) !important;
}

@media screen and (max-width: 576px) {
    .topimg-wsp {
        background-image: url(../images/wsp-m.jpg) !important;
    }
}


/*----辦卡進度查詢--*/

.topimg-inquiry {
    background-image: url(../images/inquiry.jpg) !important;
}

@media screen and (max-width: 576px) {
    .topimg-inquiry {
        background-image: url(../images/inquiry-m.jpg) !important;
    }
}


/*----開運發財金--*/

.topimg-LuckyApply {
    background-image: url(../images/LuckyApply.jpg) !important;
}

@media screen and (max-width: 576px) {
    .topimg-LuckyApply {
        background-image: url(../images/LuckyApply-m.jpg) !important;
    }
}


/*-----------------------頁面主標題-----------------------------*/

.fill-shortKv .container {
    width: 100%;
    height: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*justify-content: flex-start;
    align-items: center;*/
    /*flex-wrap: wrap;*/
}


/*--shortKv-title-4標題總共4個字--*/

.fill-shortKv .shortKv-title-4 h2 {
    width: 165px;
    text-align: center;
    margin-left: 10%;
    font-size: 40px;
}

.fill-shortKv .shortKv-title-4 h2:after {
    content: '';
    display: block;
    width: 80%;
    height: 2px;
    background-color: #0ea9a1;
    margin: 3px auto 0px;
}

@media screen and (max-width: 1400px) {
    /*.fill-shortKv .container{
	 padding-top: 0px;
      }*/
    .fill-shortKv .shortKv-title-4 h2 {
        /*	  margin-top: -5%;*/
    }
}

@media screen and (max-width: 991px) {
    .fill-shortKv .shortKv-title-4 h2 {
        width: 150px;
        text-align: center;
        margin-left: 8%;
        font-size: 36px;
    }
}

@media screen and (max-width: 768px) {
    .fill-shortKv .shortKv-title-4 h2 {
        width: 145px;
        font-size: 30px;
    }
}

@media screen and (max-width: 560px) {
    .fill-shortKv .shortKv-title-4 h2 {
        margin-left: 1%;
    }
}


/*--shortKv-title-5標題總共5個字--*/

.fill-shortKv .shortKv-title-5 h2 {
    width: 200px;
    text-align: center;
    margin-left: 10%;
    font-size: 40px;
}

.fill-shortKv .shortKv-title-5 h2:after {
    content: '';
    display: block;
    width: 80%;
    height: 2px;
    background-color: #0ea9a1;
    margin: 3px auto 0px;
}

@media screen and (max-width: 1400px) {
    /*.fill-shortKv .container{
	 padding-top: 0px;
      }*/
    .fill-shortKv .shortKv-title-5 h2 {
        /*	  margin-top: -5%;*/
    }
}

@media screen and (max-width: 991px) {
    .fill-shortKv .shortKv-title-5 h2 {
        width: 180px;
        text-align: center;
        margin-left: 8%;
        font-size: 36px;
    }
}

@media screen and (max-width: 768px) {
    .fill-shortKv .shortKv-title-5 h2 {
        width: 150px;
        font-size: 30px;
    }
}

@media screen and (max-width: 560px) {
    .fill-shortKv .shortKv-title-5 h2 {
        margin-left: 1%;
    }
}


/*--shortKv-title-6標題總共6個字、4個字時斷行--*/

.fill-shortKv .shortKv-title-6 h2 {
    width: 260px;
    text-align: center;
    margin-left: 5%;
    font-size: 40px;
}

.fill-shortKv .shortKv-title-6 h2:after {
    content: '';
    display: block;
    width: 80%;
    height: 2px;
    background-color: #0ea9a1;
    margin: 3px auto 0px;
}

@media screen and (max-width: 1400px) {
    /*.fill-shortKv .container{
	 padding-top: 0px;
      }*/
    .fill-shortKv .shortKv-title-6 h2 {
        /*	  margin-top: -5%;*/
    }
}

@media screen and (max-width: 991px) {
    .fill-shortKv .shortKv-title-6 h2 {
        width: 150px;
        text-align: center;
        line-height: 50px;
        margin-left: 5%;
        font-size: 36px;
        margin-top: -50px;
    }
    .fill-shortKv .shortKv-title-6 h2:after {
        margin: -3.2rem auto 0px;
    }
}

@media screen and (max-width: 768px) {
    .fill-shortKv .shortKv-title-6 h2 {
        width: 145px;
        font-size: 30px;
        line-height: 45px;
    }
    .fill-shortKv .shortKv-title-6 h2:after {
        margin: -2.9rem auto 0px;
    }
}

@media screen and (max-width: 560px) {
    .fill-shortKv .shortKv-title-6 h2 {
        margin-top: -30px;
        margin-left: 1%;
    }
}


/*--shortKv-title-8標題總共8個字、4個字時斷行--*/

.fill-shortKv .shortKv-title-8 h2 {
    width: 320px;
    text-align: center;
    margin-left: 5%;
    font-size: 40px;
}

.fill-shortKv .shortKv-title-8 h2:after {
    content: '';
    display: block;
    width: 90%;
    height: 2px;
    background-color: #0ea9a1;
    margin: 3px auto 0px;
}

@media screen and (max-width: 1400px) {
    /*.fill-shortKv .container{
	 padding-top: 0px;
      }*/
    .fill-shortKv .shortKv-title-6 h2 {
        /*	  margin-top: -5%;*/
    }
}

@media screen and (max-width: 991px) {
    .fill-shortKv .shortKv-title-8 h2 {
        width: 150px;
        text-align: center;
        line-height: 50px;
        margin-left: 5%;
        font-size: 36px;
        margin-top: -50px;
    }
    .fill-shortKv .shortKv-title-8 h2:after {
        width: 80%;
        margin: -3.2rem auto 0px;
    }
}

@media screen and (max-width: 768px) {
    .fill-shortKv .shortKv-title-8 h2 {
        width: 125px;
        font-size: 30px;
        line-height: 45px;
    }
    .fill-shortKv .shortKv-title-8 h2:after {
        margin: -2.9rem auto 0px;
    }
}

@media screen and (max-width: 560px) {
    .fill-shortKv .shortKv-title-8 h2 {
        margin-top: -30px;
        margin-left: 1%;
    }
}


/*--shortKv-title-twoLines5標題兩行、5個字時斷行--*/

.fill-shortKv .shortKv-title-twoLines5 h2 {
    width: 200px;
    text-align: center;
    margin-left: 5%;
    font-size: 40px;
    line-height: 50px;
    margin-top: -45px;
}

.fill-shortKv .shortKv-title-twoLines5 h2:after {
    content: '';
    display: block;
    width: 80%;
    height: 2px;
    background-color: #0ea9a1;
    margin: -3.2rem auto 0px;
}

@media screen and (max-width: 1400px) {
    .fill-shortKv .shortKv-title-twoLines5 h2 {
        /*	  margin-top: -5%;*/
    }
}

@media screen and (max-width: 991px) {
    .fill-shortKv .shortKv-title-twoLines5 h2 {
        line-height: 50px;
        font-size: 36px;
        width: 180px;
    }
    .fill-shortKv .shortKv-title-twoLines5 h2:after {
        margin: -3.2rem auto 0px;
    }
}

@media screen and (max-width: 768px) {
    .fill-shortKv .shortKv-title-twoLines5 h2 {
        line-height: 45px;
        font-size: 30px;
        width: 150px;
        margin-top: -35px;
    }
    .fill-shortKv .shortKv-title-twoLines5 h2:after {
        margin: -2.9rem auto 0px;
    }
}

@media screen and (max-width: 560px) {
    .fill-shortKv .shortKv-title-twoLines5 h2 {
        margin-top: -30px;
        margin-left: 0%;
    }
}


/*--shortKv-title-twoLines64標題兩行、6個字時斷行--*/

.fill-shortKv .shortKv-title-twoLines64 h2 {
    width: 245px;
    text-align: center;
    margin-left: 5%;
    font-size: 40px;
    line-height: 50px;
    margin-top: -45px;
}

.fill-shortKv .shortKv-title-twoLines64 h2:after {
    content: '';
    display: block;
    width: 80%;
    height: 2px;
    background-color: #0ea9a1;
    margin: -3.2rem auto 0px;
}

@media screen and (max-width: 1400px) {
    .fill-shortKv .shortKv-title-twoLines64 h2 {
        /*	  margin-top: -5%;*/
    }
}

@media screen and (max-width: 991px) {
    .fill-shortKv .shortKv-title-twoLines64 h2 {
        line-height: 50px;
        font-size: 36px;
        width: 220px;
    }
    .fill-shortKv .shortKv-title-twoLines64 h2:after {
        margin: -3.2rem auto 0px;
    }
}

@media screen and (max-width: 768px) {
    .fill-shortKv .shortKv-title-twoLines64 h2 {
        line-height: 45px;
        font-size: 30px;
        width: 180px;
        margin-top: -35px;
    }
    .fill-shortKv .shortKv-title-twoLines64 h2:after {
        margin: -2.9rem auto 0px;
    }
}

@media screen and (max-width: 560px) {
    .fill-shortKv .shortKv-title-twoLines64 h2 {
        margin-top: -30px;
        margin-left: 0%;
    }
}


/*--shortKv-title-twoLines6標題兩行、6個字時斷行--*/

.fill-shortKv .shortKv-title-twoLines6 h2 {
    width: 245px;
    text-align: center;
    margin-left: 5%;
    font-size: 40px;
    line-height: 50px;
    margin-top: -45px;
}

.fill-shortKv .shortKv-title-twoLines6 h2:after {
    content: '';
    display: block;
    width: 80%;
    height: 2px;
    background-color: #0ea9a1;
    margin: -3.2rem auto 0px;
}

@media screen and (max-width: 1400px) {
    .fill-shortKv .shortKv-title-twoLines6 h2 {
        /*	  margin-top: -5%;*/
    }
}

@media screen and (max-width: 991px) {
    .fill-shortKv .shortKv-title-twoLines6 h2 {
        line-height: 50px;
        font-size: 36px;
        width: 260px;
    }
    .fill-shortKv .shortKv-title-twoLines6 h2:after {
        margin: -3.2rem auto 0px;
    }
}

@media screen and (max-width: 768px) {
    .fill-shortKv .shortKv-title-twoLines6 h2 {
        line-height: 45px;
        font-size: 30px;
        width: 180px;
        margin-top: -35px;
    }
    .fill-shortKv .shortKv-title-twoLines6 h2:after {
        margin: -2.9rem auto 0px;
    }
}

@media screen and (max-width: 560px) {
    .fill-shortKv .shortKv-title-twoLines6 h2 {
        margin-top: -30px;
        margin-left: 0%;
    }
}


/*--shortKv-title-twoLines7標題兩行、7個字時斷行--*/

.fill-shortKv .shortKv-title-twoLines7 h2 {
    width: 280px;
    text-align: center;
    margin-left: 5%;
    font-size: 40px;
    line-height: 50px;
    margin-top: -45px;
}

.fill-shortKv .shortKv-title-twoLines7 h2:after {
    content: '';
    display: block;
    width: 80%;
    height: 2px;
    background-color: #0ea9a1;
    margin: -3.2rem auto 0px;
}

@media screen and (max-width: 1400px) {
    .fill-shortKv .shortKv-title-twoLines7 h2 {
        /*	  margin-top: -5%;*/
    }
}

@media screen and (max-width: 991px) {
    .fill-shortKv .shortKv-title-twoLines7 h2 {
        line-height: 50px;
        font-size: 36px;
        width: 260px;
    }
    .fill-shortKv .shortKv-title-twoLines7 h2:after {
        margin: -3.2rem auto 0px;
    }
}

@media screen and (max-width: 768px) {
    .fill-shortKv .shortKv-title-twoLines7 h2 {
        line-height: 45px;
        font-size: 30px;
        width: 210px;
        margin-top: -35px;
    }
    .fill-shortKv .shortKv-title-twoLines7 h2:after {
        margin: -2.9rem auto 0px;
    }
}

@media screen and (max-width: 560px) {
    .fill-shortKv .shortKv-title-twoLines7 h2 {
        margin-top: -30px;
        margin-left: 0%;
    }
}


/*--shortKv-title-twoLines8標題兩行、8個字時斷行--*/

.fill-shortKv .shortKv-title-twoLines8 h2 {
    width: 320px;
    text-align: center;
    margin-left: 5%;
    font-size: 40px;
    line-height: 50px;
    margin-top: -45px;
}

.fill-shortKv .shortKv-title-twoLines8 h2:after {
    content: '';
    display: block;
    width: 90%;
    height: 2px;
    background-color: #0ea9a1;
    margin: -3.2rem auto 0px;
}

@media screen and (max-width: 1400px) {
    .fill-shortKv .shortKv-title-twoLines8 h2 {
        /*	  margin-top: -5%;*/
    }
}

@media screen and (max-width: 991px) {
    .fill-shortKv .shortKv-title-twoLines8 h2 {
        line-height: 50px;
        font-size: 36px;
        width: 290px;
    }
    .fill-shortKv .shortKv-title-twoLines8 h2:after {
        margin: -3.2rem auto 0px;
    }
}

@media screen and (max-width: 768px) {
    .fill-shortKv .shortKv-title-twoLines8 h2 {
        line-height: 45px;
        font-size: 30px;
        width: 240px;
        margin-top: -35px;
    }
    .fill-shortKv .shortKv-title-twoLines8 h2:after {
        margin: -2.9rem auto 0px;
    }
}

@media screen and (max-width: 560px) {
    .fill-shortKv .shortKv-title-twoLines8 h2 {
        margin-top: -30px;
        margin-left: 0%;
    }
}


/*-----------------------//頁面主標題-----------------------------*/


/*-----------------------表單用的備註/注意事項---------------------*/

.form_memo {
    font-size: 15px;
    list-style-type: none;
    padding: 15px 0px;
}

@media all and (min-width: 320px) and (max-width: 576px) {
    .memo {
        font-size: .8rem;
    }
}

.note_txt {
    /*	padding: 20px;*/
    font-size: 15px;
    /*	background-color:#f0f0f0; */
    color: #1b1b1b;
    /*
	border-top: 1px solid #c7c7c7;
	position: relative;	
*/
}


/*
.note_txt:after{
	content: "";
	height: 22px;
	width: 22px;
	background-image: url("../images/form_note_bg.gif");
	position: absolute;	
	bottom: 0;
	right:0;
} 
.note_txt:before{
	content: "";
	display: block;
	height: 3px;
	width: 100%;
	background-color:#dcdcdc;
	position: absolute;
	top:0;
	margin: 0 -20px;
}
*/

.inputNote {
    font-size: 14px;
    color: #323232;
    margin-top: -15px;
    margin-bottom: 16px;
    padding-left: 7.25rem;
    min-width: 25.5rem;
}

.inputNote span {
    color: #cc3366;
}

@media screen and (max-width: 576px) {
    .inputNote {
        padding-left: 0rem;
    }
}


/*-----------------------//表單用的備註/注意事項---------------------*/


/*
--- mainArea ---*/

.mainArea {
    padding-bottom: 1.8rem;
}


/*
--- 內文區塊 mainText ---*/

.mainText {
    font-size: 1.5rem;
    color: #545559;
    margin-top: 1rem;
    margin-bottom: 1rem;
    line-height: 3rem;
    border: 1px dotted #767272;
    background-color: #FFFFFF;
    padding: 1.8rem 1.25rem;
    text-align: center;
}

.mainText .title {
    text-align: center;
    font-weight: bold;
    color: #009999;
    padding-left: 10px;
    padding-right: 10px;
}

.mainText .item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    font-size: 1.25rem;
    line-height: 1.8;
}

.stepTitle h3 {
    color: #1b1b1b;
    font-size: 22px;
    font-weight: 600;
    padding-bottom: 10px;
    /*  border-bottom: 4px solid #00859a;*/
    margin-bottom: -1rem;
}

.stepTitle .ub_line img {
    width: 100%;
    height: 3px;
}

.stepTitle p {
    font-size: 1.2rem;
    text-align: left;
    margin-top: 4px;
    margin-bottom: 1.5em;
    color: #323232;
}

.reward {
    color: #d60000;
    margin-right: 3px;
    margin-left: 3px;
}


/*
--- 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 {
    /*padding: 15px 5px;*/
    font-size: 1rem;
}

.remind p span {
    color: #009999;
    font-size: 1rem;
    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 ---*/

.form-control {
    color: #333333;
    font-size: 1.25rem;
    border-radius: 0;
    padding: 0 0 0 3px;
    border: 1px solid #a9a9a9;
}

.form-bg {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 2rem 1.75rem;
}

.formTitle h4 {
    color: #009999;
    font-weight: bold;
    font-size: 1.5rem;
    background-color: #fff;
    border-radius: 50%;
    margin-bottom: 2rem;
}

.formTitle h4:after {
    content: '';
    display: block;
    border-bottom: 3px solid #dff3f3;
    padding-top: .5rem;
}

.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 #lbSID {
    width: 6.25rem;
}

.input-data {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: flex-start;
    -ms-flex-pack: flex-start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-width: 18.2rem;
    line-height: 44px;
}

.input-data p {
    display: inline;
    font-size: 20px;
    letter-spacing: 2px;
    color: #6c757d;
}

@media all and (min-width: 576px) and (max-width: 768px) {
    .formTitle h4 {
        padding-top: 1rem;
        margin-bottom: 1rem;
    }
    .formList {
        padding-left: 0px;
    }
    .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: 1rem; */
    }
    .formList li select:first-of-type {
        margin-left: 0;
        min-width: 102px;
    }
    .formList li label {
        text-align: left;
    }
    .formList li select {
        margin-left: 5px;
        margin-right: 3px;
    }
    .formList li .form-control {
        padding: 0.37rem 0.3rem;
    }
}

@media all and (min-width: 320px) and (max-width: 576px) {
    .formList {
        padding-left: 0px;
    }
    .form-bg {
        padding: 2rem 1rem;
    }
    .formList #lbSID {
        width: 100%;
    }
}


/*formLogin*/

.formLogin {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 0px;
}

.formLogin label {
    min-width: 6.5rem;
}

.formLogin .label {
    min-width: 5.5rem;
}

.formLogin .form-group>.form-control {
    min-width: 18.3rem;
}

.formLogin .inDate {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: left;
    -ms-flex-pack: left;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-width: 18.3rem;
    /*    margin-left: -2px;*/
}

.formLogin .inMMDD {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-width: 18.2rem;
    margin-left: -2px;
}

.formLogin .inMMDD select:first-of-type {
    min-width: 60px;
}

.formLogin .inCaptcha .form-control {
    min-width: 5rem;
    max-width: 10.8rem;
}

.formLogin .id_code {
    max-width: 120px;
    height: 44px;
    padding-left: 3px;
    margin: 0px;
}


/*
.form-group :nth-child(3){
	margin-left: 3px;
}
*/

.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 {
        width: 100%;
        text-align: left;
    }
    .formLogin .label {
        width: 100%;
        text-align: left;
    }
    /*
  .formLogin .inDate select:first-of-type {
    width: 96px; } 
*/
    .formLogin .inCaptcha label {
        width: 100%;
    }
    .formLogin .inCaptcha .label {
        width: 100%;
    }
    .formLogin .inDate {
        margin-left: 1px;
    }
    .formLogin .inMMDD {
        margin-left: 1px;
    }
    .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簡訊驗證碼-------------*/

.formLogin .inOpt .form-control {
    min-width: 5rem;
    max-width: 9rem;
}

.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;
}

.text-DarkRed {
    color: #cc0e43;
}

@media screen and (max-width: 576px) {
    .formLogin .inOpt label {
        width: 100%;
        text-align: center;
        padding-bottom: 15px;
    }
    .formLogin .inOpt label {
        width: 100%;
    }
    .formLogin .inOpt .form-control {
        margin-right: 10px;
    }
}


/*--------------備註-------------------*/

.memo {
    font-size: 0.95rem;
    list-style-type: none;
    padding: 15px 5px 0;
}

@media all and (min-width: 320px) and (max-width: 576px) {
    .memo {
        font-size: .8rem;
    }
}


/*---------------查詢結果+謝謝您--------------------*/

.result_message {
    padding: 50px 30px;
    font-size: 16px;
    background-color: #ffffff;
    color: #434343;
    /*
	border: 1px solid #dde1e1;
	box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
*/
}

.result_message .mark_txt {
    font-size: 24px;
    line-height: 60px;
    color: #009999;
    font-weight: 600;
}

.searchResult_txt {
    color: #009999;
    font-size: 22px;
    font-weight: 600;
}

.searchResult_txt span {
    color: #323232;
    font-size: 15px;
    font-weight: 400;
}

.searchResult_txt p {
    color: #e31c45;
    font-size: 15px;
    font-weight: 400;
    display: inline;
}

@media screen and (max-width: 768px) {
    .searchResult_txt span {
        display: block;
    }
    .searchResult_txt p {
        display: block;
        text-align: left;
    }
    .result_message {
        padding: 0px 0px;
    }
}

.points_red {
    color: #e31c45;
}

.under_result_message {
    /*---上面有其他物件的結果頁*/
    margin-top: -30px;
}

.result_message p {
    font-size: 18px;
    text-align: left;
}

.tks_message_end:before {
    content: "";
    display: block;
    width: 100%;
    height: 30px;
    background-image: url("../images/tks_message_line.gif");
    margin-top: 15px;
    margin-bottom: 15px;
}

@media screen and (max-width: 768px) {
    .under_result_message {
        /*---上面有其他物件的結果頁*/
        margin-top: -10px;
    }
}


/*
---活動查詢登錄---*/

.tab-content {
    margin-top: 2.5rem;
    padding-bottom: 1rem;
}

.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 {
    font-size: 1.25rem;
    text-align: right;
    margin-right: .75rem;
    margin-bottom: 0;
    color: #009999;
    font-weight: bold;
}

.formList .label {
    min-width: 16rem;
    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;
}


/*----------------活動登錄------------------------*/

.activity_bt01 {
    position: relative;
    display: inline-block;
    max-width: 465px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    /*	overflow: hidden;*/
}

.activity_bt02 {
    position: relative;
    display: inline-block;
    max-width: 465px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    /*	overflow: hidden;*/
}

.activity_bt01_text,
.activity_bt02_text {
    position: absolute;
    font-size: 24px;
    color: #ffffff;
    line-height: 50px;
    bottom: 22px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    padding-left: 90px;
}

.activity_bt01 img,
.activity_bt02 img {
    display: block;
    transform: scale(1) translate3d(0, 0, 0);
    transform-style: preserve-3d;
    transition: .4s;
}

.activity_bt01:hover img,
.activity_bt02:hover img {
    display: block;
    transform: scale(1.05);
}

@media screen and (max-width: 1200px) {
    .activity_bt01_text,
    .activity_bt02_text {
        bottom: 24px;
    }
}

@media screen and (max-width: 991px) {
    .activity_bt01_text,
    .activity_bt02_text {
        bottom: 22px;
    }
}

@media screen and (max-width: 576px) {
    .activity_bt01_text,
    .activity_bt02_text {
        bottom: 16px;
    }
}

@media screen and (max-width: 380px) {
    .activity_bt01 {
        width: 320px;
        margin-left: -15px;
        margin-right: -15px;
    }
    .activity_bt02 {
        width: 320px;
        margin-left: -15px;
        margin-right: -15px;
    }
    .activity_bt01_text,
    .activity_bt02_text {
        font-size: 22px;
        bottom: 8px;
    }
}

@media screen and (max-width: 320px) {
    .activity_bt01_text,
    .activity_bt02_text {
        font-size: 18px;
        bottom: 6px;
    }
}


/*--信用貸款電子帳單申請--*/

.formCardNo label {
    min-width: 14rem;
}


/*--信用貸款電子帳單申請--*/

.rate-month label {
    min-width: 9rem;
}


/* 新增formList項目 */

.formList select:first-of-type {
    margin-left: 0;
    min-width: 85px;
    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;
}

.select_birthday {
    margin-left: 10px!important;
}

.input-fill {
    width: 18.2rem!important;
    max-width: 18.2rem!important;
    margin-left: 0px!important;
}

@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: 0px;
        min-width: 90px;
    }
    .formList li select {
        /* margin-left: 5px; */
        /* margin-right: 3px; */
    }
    .formList .form-control {
        padding: 0.37rem 0.3rem;
    }
    .formList .label {
        text-align: left;
        width: 100%;
    }
}

@media screen and (max-width: 576px) {
    .formList li select:first-of-type {
        margin-left: -1px;
    }
}

.formStyle {
    border-bottom: #eeeeee 1px solid;
    padding-top: 25px;
    padding-bottom: 25px;
}

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
    .actCtnlist {
        margin-left: -40px;
    }
    .input_item {
        margin-left: 25px;
    }
}


/*針對ie*/

.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;
}

.SelectOffer {
    /*min-width: 15rem!important;
    max-width: 18rem!important;*/
    font-size: 17px;
}

@media screen and (max-width: 768px) {
    .formStyle {
        font-size: 17px;
    }
    .activeTitle {
        font-size: 20px;
    }
    .input_group {
        margin-bottom: 10px;
    }
    .input_item {
        margin-top: 4px;
    }
}

.fullWidth a {
    font-size: 20px;
    color: #fff;
    border: 2px solid rgb(255, 65, 65);
    background-color: rgb(255, 65, 65);
    padding-bottom: 2px;
    border-radius: 0 7px 0 7px;
    white-space: nowrap;
}

@media screen and (max-width: 576px) {
    .widthInphone {
        width: 400px !important;
    }
    .fullWidth {
        width: 40px;
        padding-right: 0px !important;
        text-align: center;
    }
    .fullWidth a {
        margin-left: -15px;
    }
}

@media screen and (max-width: 535px) {
    .widthInphone {
        width: 380px !important;
    }
}

@media screen and (max-width: 516px) {
    .widthInphone {
        width: 320px !important;
    }
}

@media screen and (max-width: 456px) {
    .widthInphone {
        width: 280px !important;
    }
}

@media screen and (max-width: 416px) {
    .widthInphone {
        width: 250px !important;
        padding-right: 0px;
    }
}

@media screen and (max-width: 576px) {
    .activeCtn {
        padding-left: 55px;
        display: none;
    }
    .phoneClick.active .activeCtn {
        display: block;
    }
    .activeTitle::after {
        content: url(../images/icon.png);
        display: inline-block;
        transform: rotate(-90deg);
    }
    .phoneClick.active .activeTitle::after {
        content: url(../images/icon.png);
        transform: rotate(0deg);
    }
}

@media screen and (max-width: 360px) {
    .activeCtn {
        padding-left: 55px;
        font-size: 17px;
    }
    .activeTitle {
        font-size: 17px !important;
    }
    .fullWidth a {
        font-size: 17px !important;
    }
    /* .widthInphone{
        width: 180px !important;
    } */
}

.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;
        margin-top: 4px;
    }
    .input_item input {
        width: 1.3rem;
        height: 1.3rem;
    }
}

.actCtnlist {
    padding-inline-start: 0;
}

.actCtnlist li {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
}


/*
--- 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 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;
    }
}


/* 
rwd-table-lehuotj */

.rwd-table-lehuotj {
    margin-top: 15px;
}

.rwd-table-lehuotj select {
    margin: 10px 0px;
}

@media screen and (max-width: 768px) {
    .rwd-table-lehuotj thead {
        display: none;
    }
    .rwd-table-lehuotj tbody td {
        display: block;
        text-align: left;
        padding: 10px 6px;
        padding-left: 5.8em;
        text-indent: -5em;
    }
    .rwd-table-lehuotj tbody td::before {
        content: attr(data-title)'：';
        font-size: 1.1rem;
        color: #009999;
        font-weight: bold;
        padding-right: 6px;
        width: 11em;
        display: inline-block;
        text-align: right;
    }
    .rwd-table-lehuotj td+td {
        border-top: 1px solid #d8d8d8;
    }
    .rwd-table-lehuotj select {
        margin: 0px 0px;
    }
}


/* 
rwd-table-utilitiespay */

.rwd-table-utilitiespay {
    margin-top: 15px;
}

.rwd-table-utilitiespay select {
    margin: 10px 0px;
    width: 80%;
    font-size: 20px;
    height: 30px;
    display: inline;
}

@media screen and (max-width: 768px) {
    .rwd-table-utilitiespay {
        border: none;
    }
    .rwd-table-utilitiespay thead {
        display: none;
    }
    .rwd-table-utilitiespay tbody td {
        display: block;
        text-align: left;
        padding: 10px 6px;
        padding-left: 5.8em;
        text-indent: -5em;
    }
    .rwd-table-utilitiespay tr {
        display: block;
        border: 1px solid #7f7c7c;
        margin-bottom: 20px;
    }
    .rwd-table-utilitiespay tbody td::before {
        content: attr(data-title)'：';
        font-size: 1.1rem;
        color: #009999;
        font-weight: bold;
        padding-right: 6px;
        width: 5em;
        display: inline-block;
        text-align: right;
    }
    .rwd-table-utilitiespay td+td {
        border-top: 1px solid #d8d8d8;
    }
    .rwd-table-utilitiespay select {
        margin: 0px 0px;
        width: 95%;
        font-size: 17px;
    }
}


/* 
rwd-table-payeasy */

.rwd-table-payeasy {
    margin-top: 15px;
}

.rwd-table-payeasy select {
    margin: 10px 0px;
    width: 75px;
    font-size: 20px;
    height: 30px;
    display: inline;
}

@media screen and (max-width: 768px) {
    .rwd-table-payeasy {
        border: none;
    }
    .rwd-table-payeasy thead {
        display: none;
    }
    .rwd-table-payeasy tbody td {
        display: block;
        text-align: left;
        padding: 10px 6px;
        padding-left: 5.8em;
        text-indent: -5em;
    }
    .rwd-table-payeasy tr {
        display: block;
        border: 1px solid #7f7c7c;
        margin-bottom: 20px;
    }
    .rwd-table-payeasy tbody td::before {
        content: attr(data-title)'：';
        font-size: 1.1rem;
        color: #009999;
        font-weight: bold;
        padding-right: 6px;
        width: 8em;
        display: inline-block;
        text-align: right;
    }
    .rwd-table-payeasy td+td {
        border-top: 1px solid #d8d8d8;
    }
    .rwd-table-payeasy select {
        margin: 0px 0px;
    }
}


/* 
rwd-table-wsp */

.searchTable.wsp_th th {
    color: #097171;
    background-color: #E9F4F4;
}

.rwd-table-wsp {
    margin-top: 15px;
}

.rwd-table-wsp select {
    margin: 10px 0px;
    width: 75px;
    font-size: 20px;
    height: 30px;
    display: inline;
}

.rwd-table-wsp input {
    width: 120px;
    font-size: 20px;
    height: 30px;
    display: inline;
    margin: 10px 0px;
}

@media screen and (max-width: 768px) {
    .rwd-table-wsp {
        border: none;
    }
    .rwd-table-wsp thead {
        display: none;
    }
    .rwd-table-wsp tbody td {
        display: block;
        text-align: left;
        padding: 10px 6px;
        padding-left: 5.8em;
        text-indent: -5em;
    }
    .rwd-table-wsp tr {
        display: block;
        border: 1px solid #7f7c7c;
        margin-bottom: 20px;
    }
    .rwd-table-wsp tbody td::before {
        content: attr(data-title)'：';
        font-size: 1.1rem;
        color: #009999;
        font-weight: bold;
        padding-right: 6px;
        width: 5em;
        display: inline-block;
        text-align: right;
    }
    .rwd-table-wsp.wsp-confirm tbody td {
        display: block;
        text-align: left;
        padding: 10px 6px;
        padding-left: 7.5em;
        text-indent: -6.7em;
    }
    .rwd-table-wsp.wsp-confirm tbody td::before {
        content: attr(data-title)'：';
        font-size: 1.1rem;
        color: #009999;
        font-weight: bold;
        padding-right: 6px;
        width: 6.5em;
        display: inline-block;
        text-align: right;
    }
    .rwd-table-wsp.wsp-confirm tbody tr:last-child td::before {
        display: none;
    }
    .rwd-table-wsp.wsp-confirm tbody tr:last-child td {
        display: none;
    }
    .rwd-table-wsp.wsp-confirm tbody tr td:first-child {
        display: block;
    }
    .rwd-table-wsp.wsp-confirm tbody tr td:last-child {
        display: block;
    }
    .rwd-table-wsp.wsp-qry tbody td {
        display: block;
        text-align: left;
        padding: 10px 6px;
        padding-left: 7.5em;
        text-indent: -6.7em;
    }
    .rwd-table-wsp.wsp-qry tbody td::before {
        content: attr(data-title)'：';
        font-size: 1.1rem;
        color: #009999;
        font-weight: bold;
        padding-right: 6px;
        width: 6.5em;
        display: inline-block;
        text-align: right;
    }
    .rwd-table-wsp td+td {
        border-top: 1px solid #d8d8d8;
    }
    .rwd-table-wsp select {
        margin: 0px 0px;
    }
    .rwd-table-wsp input {
        width: 115px;
        margin: 5px 0px;
    }
}


/* 
rwd-table-wspafter 事後分期 */

.rwd-table-wspAfter {
    margin-top: 15px;
}

.rwd-table-wspAfter select {
    margin: 10px 0px;
    width: 155px;
    font-size: 20px;
    height: 30px;
    display: inline;
}

.rwd-table-wspAfter input {
    width: 1.3rem;
    height: 1.3rem;
    position: relative;
    margin: auto;
}

@media (max-width:992px) {
    .rwd-table-wspAfter select {
        margin: 5px 0px;
        width: 125px;
        font-size: 16px;
        height: 30px;
        display: inline;
    }
}

@media screen and (max-width: 768px) {
    .rwd-table-wspAfter {
        border: none;
    }
    .rwd-table-wspAfter thead {
        display: none;
    }
    .rwd-table-wspAfter tbody td {
        display: block;
        width: 100%;
        text-align: left;
        padding: 10px 6px;
        padding-left: 7.5em;
        text-indent: -5.2em;
    }
    .rwd-table-wspAfter tr {
        display: flex;
        flex-flow: wrap;
        border: 1px solid #7f7c7c;
        margin-bottom: 20px;
    }
    .rwd-table-wspAfter tr td {
        order: 1;
    }
    .rwd-table-wspAfter tr td:first-child {
        order: -2;
    }
    .rwd-table-wspAfter tr td:last-child {
        order: -1;
    }
    .rwd-table-wspAfter tbody td::before {
        content: attr(data-title)'：';
        font-size: 1.1rem;
        color: #009999;
        font-weight: bold;
        padding-right: 6px;
        width: 5em;
        display: inline-block;
        text-align: right;
    }
    .rwd-table-wspAfter td+td {
        border-top: 1px solid #d8d8d8;
    }
    .rwd-table-wspAfter select {
        margin: 0px 0px;
    }
    .rwd-table-wspAfter input {
        margin: 5px 0px;
    }
}


/*-----表格內縮文字-----*/

.rwd-table-text {
    text-align: left;
    line-height: 2em;
}

.rwd-table-text p {
    font-size: 17px;
    text-align: left;
    padding-left: 17px;
    text-indent: -17px;
}

@media screen and (max-width: 768px) {
    .rwd-table-text {
        margin-top: -35px;
    }
}


/*
---- 已詳閱-------------------*/

.remind {
    /*    background-color: #eeeeee;*/
    padding: 15px 0px 2px;
}

.remind label {
    font-size: 15px;
}

.remind p span {
    color: #009999;
    font-size: 1.2rem;
    font-weight: bold;
    padding-left: 5px;
    padding-right: 5px;
}


/*-------------------4步驟--------------------------*/

.steps-progress {
    margin: 0 52px;
    height: 4px;
    top: 34px;
    position: relative;
    background: #cccccc;
}

.progress-indicator {
    background: #009999;
    height: 100%;
}

.Step_group {
    margin: 0 auto 40px;
    /*	width: 80%;	*/
}

.Step_item_group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    list-style: none;
    padding: 15px 0 0;
    width: 100%;
    font-size: 17px;
    text-align: justify;
}

.Step_item_group li {
    display: inline-block;
    vertical-align: top;
    min-width: 50px;
}

.Step-number {
    position: relative;
    display: block;
    font-size: 14px;
    padding: 55px 8px 0;
    color: #33333F;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    text-decoration: none;
}

.Step-number span {
    width: 60px;
    height: 60px;
    margin-top: -15px;
    margin-left: -30px;
    border-radius: 60px;
    line-height: 52px;
    font-size: 22px;
    border-width: 4px;
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    text-align: center;
    border: 3px solid #cccccc;
    background: #cccccc;
    color: #ffffff;
}

.Step-number.completed span {
    border-color: #009999;
    background: #009999;
}

.Step-number.active span {
    color: #009999;
    border-color: #009999;
    background: #ffffff;
}

@media screen and (max-width: 768px) {
    .Step_group {
        width: 100%;
    }
    .progress-indicator {
        display: none;
    }
    .steps-progress {
        margin: 0 0 55px;
    }
    .Step-number.completed {
        display: none;
    }
    .Step-number.active {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 20px;
    }
    .Step-number {
        display: none;
    }
}


/*-------------------//4步驟-----------------------------*/

.dash {
    width: 5px;
    height: 2px;
    background-color: #009999;
    margin-right: 2px;
}


/*-----------------資料小標題---------------------------------*/

.dataTitle {
    position: relative;
    margin-bottom: 45PX;
}

.dataTitle h3 {
    color: #009999;
    font-size: 22px;
    font-weight: 600;
    /*  padding-top: 2rem;*/
    padding-bottom: 10px;
    border-bottom: 3px solid #e4e2e2;
}

.dataTitle h3 span {
    padding-bottom: 8px;
    border-bottom: 3px solid #00859a;
}

.dataTitle p {
    padding-top: 2rem;
    margin-bottom: 0;
    font-size: 17px;
    line-height: 2rem;
    color: #323232;
}

@media screen and (max-width: 768px) {
    .dataTitle {
        margin-bottom: 25PX;
    }
    .dataTitle.Step-dataTitle {
        margin-bottom: 45PX
    }
}


/*------------------//資料標題---------------------------------*/


/*------------------信用卡卡號 效期----------------------------*/

.formLogin .input-data {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.in-card-number {
    margin: 0 2px 0 0;
    max-width: 4.12rem;
}

.cardValidity {
    margin-right: 5px;
    min-width: 119px!important;
}


/*-----------------//信用卡卡號 效期-------------------------*/


/*-----------------數字1縮排---------------------------------*/

.indentNote {
    font-size: 15px;
    padding-bottom: 15px;
    padding-top: 15px;
    text-align: left;
    line-height: 2.3em;
}

.indentNote p {
    font-size: 15px;
    text-align: left;
    padding-left: 15px;
    text-indent: -15px;
	margin-bottom: 0px;
}

.indentNote_2 {
    font-size: 15px;
    padding-bottom: 15px;
    padding-top: 15px;
    text-align: left;
    line-height: 2.3em;
}

.indentNote_2 p {
    font-size: 15px;
    text-align: left;
    padding-left: 40px;
    text-indent: -40px;
}

@media screen and (max-width: 768px) {
    .indentNote_2.payeasyNote {
        margin-top: -1.5em;
    }
}


/*-----------------//數字1縮排---------------------------------*/


/*--貸款試算--*/

.input-rate {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: flex-start;
    -ms-flex-pack: flex-start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-width: 19rem;
    height: 44px;
}

.input-rate p {
    display: inline;
    font-size: 20px;
    letter-spacing: 2px;
    color: #6c757d;
}

.input-rate span {
    margin-left: 3px;
    margin-right: 3px;
}

.input-rate select {
    width: 150px!important;
}

.input-rate-money {
    max-width: 150px;
    text-align: center;
    margin-left: 0!important;
}

.input-rate-month {
    max-width: 40px;
    text-align: center;
}

.input-rate-ratio {
    max-width: 70px;
    text-align: center;
}

.rate_text {
    font-size: 17px;
    letter-spacing: 3px;
    padding-left: 15px!important;
}

.rate_text_s {
    font-size: 15px;
    letter-spacing: 2px;
    padding: 3px!important;
}

.rateTable td+td {
    border: 1px solid #d8d8d8;
    padding: 3px 8px 3px 3px!important;
}

.rate_text_blue {
    color: #115b83;
}

.rate_text_red {
    color: #d62872;
    font-weight: 600;
}

.rate_text_gry {
    color: #434343;
    font-weight: 600;
}

@media screen and (max-width: 480px) {
    .rate_text {
        font-size: 15px;
        letter-spacing: 0px;
        padding-left: 3px!important;
    }
    .rate_text_s {
        font-size: 13px;
        letter-spacing: 0px;
        padding: 5px 3px!important;
    }
}


/*--* 號表示為必填欄位--*/

.asterisk {
    position: absolute;
    font-size: 15px;
    line-height: 24px;
    color: #ff0000;
    right: 15px;
    top: 5px;
}

.asterisk_relative {
    position: relative;
}

@media screen and (max-width: 768px) {
    .asterisk {
        position: relative;
        right: 0px;
        text-indent: -12px;
        padding-left: 12px;
    }
}

.red_mark {
    color: #d81d43;
}


/*--------帳單輕鬆付-----------*/

.Codename {
    display: flex;
    margin-bottom: 1.5rem;
    line-height: 44px;
}

.Codename label {
    text-align: left;
    width: 5rem;
}

.Codename input {
    width: 100px;
}

@media screen and (max-width: 768px) {
    .Codename {
        margin-top: -20px;
    }
}


/*--------想分就分-----------------*/

.wsp_main .item {
    text-align: center;
    background: #ffffff;
    border: 2px solid #88caca;
    border-radius: 20px;
    padding: 2rem 0 1.5rem;
    margin-bottom: .75rem;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

.wsp_main .item h3 {
    font-size: 30px;
    color: #04829a;
    font-weight: 800;
    line-height: 55px;
}

.wsp_main .item .btn {
    font-size: 24px;
    padding: 2px 20px;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

.wsp_main .item:hover {
    background-color: #f5fdfd;
    border: 2px solid #009999;
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
    -webkit-box-shadow: 10px 10px 0 0 rgba(136, 202, 202, 0.8);
    box-shadow: 10px 10px 0 0 rgba(136, 202, 202, 0.8);
}

.wsp_main .item:hover .btn {
    -webkit-box-shadow: 5px 5px 0 0 rgba(200, 200, 200, 0.8);
    box-shadow: 5px 5px 0 0 rgba(200, 200, 200, 0.8);
}

@media screen and (max-width: 576px) {
    .wsp_main .item h3 {
        font-size: 22px;
        line-height: 40px;
    }
    .wsp_main .item .btn {
        font-size: 18px;
        padding: 2px 20px;
    }
}


/*-------------事前事後------*/

.wsp_proj_txt {
    color: #226dbe;
    font-size: 22px;
    font-weight: 600;
}

.wsp_title {
    display: flex;
    justify-content: space-between;
}

.wsp_title_txt {
    color: #009999;
    font-size: 22px;
    font-weight: 600;
}

.wsp_proj_txt {
    color: #226dbe;
    font-size: 22px;
    font-weight: 600;
}

.wsp_table_txt {
    font-size: 15px;
    padding-top: 15px;
}

.wsp_title_txt span {
    color: #252525;
}

.wsp_options {
    color: #003b6a;
    font-size: 18px;
    font-weight: 600;
}

.wsp_options a {
    color: #696868;
    font-weight: 400;
    text-decoration: none;
}

.wsp_options .login {
    margin: 0 5px;
}

.wsp_options .login:hover {
    text-decoration: underline;
}

.wsp_options .wsp_btn {
    position: relative;
    display: inline-block;
    margin-left: 5px;
    padding: 2px 15px;
    background-color: #1c8395;
    border: 4px solid #99c7d0;
    border-radius: 50px;
    color: #fff;
    font: 18px 微軟正黑體;
}

.wsp_options .wsp_btn.active {
    background-image: linear-gradient(to top, #1c8395, #62b8c7);
}

.wsp_arrow {
    position: absolute;
    color: #1c8395;
    bottom: -16px;
    left: 40%;
    display: none;
}

.wsp_btn svg {
    width: 24px;
    height: 24px;
}

.wsp_btn.active svg {
    display: block;
}

.tab-content.wsptab-content {
    margin-top: 0rem;
    padding-bottom: 0rem;
}

.wsp_button {
    display: inline-block;
    margin: 0 0 0 10px;
    padding: 2px 10px;
    font-size: 15px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    background-image: linear-gradient(to top, #1c8395, #62b8c7);
    border: 1px solid #1c8395;
    border-radius: 8px;
    box-shadow: 0 4px #89898980;
}

.wsp_button:hover {
    color: #ffffff;
    background-image: linear-gradient(to top, #1c8395, #3496a6);
}

.wsp_button:focus {
    outline: 0px;
}

.wsp_button_grey {
    display: inline-block;
    margin: 0 0 0 10px;
    padding: 2px 10px;
    font-size: 15px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    background-image: linear-gradient(to top, #494a4a, #a9b0b1);
    border: 1px solid #525454;
    border-radius: 8px;
    box-shadow: 0 4px #89898980;
}

.wsp_button_grey:hover {
    color: #ffffff;
    background-image: linear-gradient(to top, #5c5f5f, #5c5f5f);
}

.wsp_button_grey:focus {
    outline: 0px;
}

.wsp_Note {
    font-size: 18px;
    padding-bottom: 15px;
    padding-top: 15px;
    text-align: left;
    line-height: 2.3em;
}

@media screen and (max-width: 768px) {
    .wsp_title {
        flex-wrap: wrap;
    }
    .wsp_title_txt {
        color: #009999;
        font-size: 22px;
        font-weight: 600;
        width: 100%;
    }
    .wsp_options {
        font-size: 15px;
        padding-top: 15px;
    }
    .wsp_options .wsp_btn {
        margin-left: 5px;
        padding: 2px 6px;
        font: 15px 微軟正黑體;
    }
    .wsp_arrow {
        bottom: -12px;
    }
    .wsp_btn svg {
        width: 20px;
        height: 20px;
    }
    .date- {
        display: none;
    }
    .to-date {
        padding-left: 3px;
    }
    .wsp_button {
        margin: 0 10px 0 0;
        padding: 2px 10px;
    }
}


/*----------------想分就分事後分期------------------------*/

.afterProj_bt {
    position: relative;
    display: inline-block;
    max-width: 320px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    /*	overflow: hidden;*/
}

.afterProj_bt_text {
    position: absolute;
    font-size: 24px;
    color: #009999;
    line-height: 5rem;
    bottom: 0px;
    left: 0;
    right: 0;
    top: 0px;
    margin-left: auto;
    margin-right: auto;
    padding-right: 40px;
    font-weight: 900;
}

.afterProj_bt img {
    display: block;
    transform: scale(1) translate3d(0, 0, 0);
    transform-style: preserve-3d;
    transition: .4s;
}

.afterProj_bt:hover img {
    display: block;
    transform: scale(1.05);
}

.afterProj_link a {
    color: #434343;
    text-decoration: underline;
    margin-bottom: 15px;
}

.afterProj_link a:hover {
    text-decoration: none;
}

.Star-red-letter {
    position: absolute;
    display: inline-block;
    color: #ff0000;
    right: 20px;
    bottom: 20px;
    font-size: 14px;
    line-height: 1.5;
}

@media screen and (max-width: 768px) {
    .Star-red-letter {
        position: absolute;
        display: inline-block;
        color: #ff0000;
        /*	right: 20px;*/
        left: 20px;
        bottom: -20px;
        font-size: 13px;
        line-height: 1.5;
    }
}
/*-----------------input下的說明文字---------------------*/
.notice-text {
    display: inline-block;
    color: #097171;
    right: 20px;
    bottom: 20px;
    font-size: 14px;
    line-height: 3;
}

@media screen and (max-width: 768px) {
    .notice-text {
        left: 20px;
        bottom: -20px;
        font-size: 13px;
		line-height: 2;
    }
}
/*-----------------//input下的說明文字---------------------*/
/*--------/---------表單中按鈕-----------------------------*/
.blue_button {
    display: inline-block;
    margin: 0 0 0 10px;
	min-width: 5em;
    padding: 2px 5px;
    font-size: 15px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    background-image: linear-gradient(to top, #4f84ba, #366ba1);
    border: 1px solid #366ba1;
    border-radius: 8px;
    box-shadow: 0 4px #89898980;
}

.blue_button:hover {
    color: #ffffff;
    background-image: linear-gradient(to top, #2063a7, #014589);
}

.blue_button:focus {
    outline: 0px;
}
@media screen and (max-width: 768px) {  
     .blue_button {
        font-size: 14px;
		 margin: 0 0 0 5px;
    }
	
}

/*-----------------//表單中按鈕---------------------*/
/*-----------------------雙排表單--------------------*/

.formList-even {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
}

.formList-even li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 2rem;
    flex-direction: column;
    padding-left: 40px;
    padding-right: 90px;
}

.formList-even label {
    font-size: 1.25rem;
    text-align: left;
    margin-right: .75rem;
    margin-bottom: 0;
    color: #009999;
    font-weight: bold;
}

.formList-even .label {
    min-width: 16rem;
    font-size: 1.25rem;
    text-align: right;
    margin-right: .75rem;
    margin-bottom: 0;
    color: #009999;
    font-weight: bold;
}

.formList-even .form-control {
    padding: .37rem .3rem;
}

@media screen and (max-width: 992px) {
    .formList-even li {
        padding-left: 0px;
        padding-right: 10px;
    }
}

@media screen and (max-width: 768px) {
    .formList-even {
        padding-left: 0px;
    }
    .formList-even 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;
        padding-left: 0px;
        padding-right: 0px;
    }
    .formList-even li label {
        text-align: left;
    }
    .formList-even .label {
        text-align: left;
        width: 100%;
    }
    .formList-even .form-control {
        padding: 0.37rem 0.3rem;
    }
}


/*-----------------------//雙排表單--------------------*/


/*-----------------------確認申請資料-----------------*/

.container_Confirm {
    background-color: #f3f3f3;
    padding-top: 45px;
    margin-top: -82px;
    padding-bottom: 1.8rem;
}

.label_confirm {
    min-width: 16rem;
    font-size: 1.25rem;
    text-align: left;
    letter-spacing: 3px;
    margin-right: .75rem;
    margin-bottom: 0;
    color: #009999;
    font-weight: bold;
}

.nostar {
    margin-left: 0.77rem;
}

.input-data_confirm {
    width: 100%;
    background-color: #ffffff;
    border-radius: 10px;
    line-height: 44px;
}

.input-data_confirm p {
    display: inline-block;
    font-size: 20px;
    letter-spacing: 2px;
    color: #6c757d;
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 0em;
}

@media screen and (max-width: 768px) {
    .label_confirm {
        letter-spacing: 0px;
        width: 100%;
    }
    .nostar {
        margin-left: 0rem;
    }
}
/*-------------親屬關係----------------*/
.form-group.label_family {
	align-items: flex-start;
}

.family_group {
	width: 100%;
	
}	
.family_group_item +.family_group_item {
	margin-top: 10px;
}
.family_group_item span {
    color: #6c757d;
    right: 20px;
    bottom: 20px;
    font-size: 18px;
	margin-left: 0.77rem;
    line-height: 2;
}

@media screen and (max-width: 768px) {
	.form-group.label_family {
	 align-items: center;
}
	.family_group_item span {    
	margin-left: 0rem;
}
}