.box {width:100%;}

.cus_input{
	width: 15em;
    padding: 4px 4px 4px 10px;
    font-size: 15px;
    line-height: 1.5em;
    color: #555555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.cus_pos {
	background: #FFF;
    max-width: 600px;
    margin:0px auto 20px;
	}
	.Neu_progressbar li img {width: 50px;height: 50px;z-index:12;position:relative;}
	.Neu_progressbar li font {color: #5b76bb;display:block;}
	.Neu_progressbar {margin-left: -45px;}
	.Neu_progressbar li {
	    list-style-type: none;
	    width: 25%;
	    float: left;
	    font-size: 12px;
	    position: relative;
	    text-align: center;
	    text-transform: uppercase;
	}
	.Neu_progressbar li:before {
	    display: block;
	    text-align: center;
	    margin: 0 auto 10px auto;
	    border-radius: 50%;
	    position: relative;
	    z-index: 10;
	}
	.Neu_progressbar li:after{
	    width: 100%;
	    height: 3px;
	    content: '';
	    position: absolute;
	    background-color: #c3cbe0;
	    top: 22px;
	    z-index:10;
	}
	.Neu_progressbar li:before {
		width: 100%;
	    height: 3px;
	    content: '';
	    position: absolute;
	    background-color: #c3cbe0;
	    top: 22px;
	    left: -50%;
	    z-index: 10;
	}
	.Neu_progressbar li.active font {color: #007F33}
	.Neu_progressbar li.active:before {
	    background-color: #55b776;
	}
	.Neu_progressbar li.active:after {
	    background-color: #55b776;
	    z-index: 11;
	}


	.outside {
        position: relative;
        width: 100%;
        max-width: 800px;
        margin:20px auto;
        overflow: hidden;
	}

		

	.cus_panel {
    background-position: 25px 0;
    background-size: contain;
    height: 800px;
    width: 1000px;
    margin-left: 4%;
    background-repeat: no-repeat;
    padding-top: 90px;
	}
	.cus_panel .position {
		max-width: 700px;
	    margin: auto;
	}
	.cus_panel .position h2 {
		    text-align: center;
		    font-size: 2em;
		    padding-bottom: 0.5em;
		    border-bottom: 1px solid #aaafc0;
		        color: #044780;
	}
	.rwdTB th{text-align: right;}
	.rwdTB td{text-align: left;}

	.cus_panel_pos {
	    margin: auto;
	    display: table;
	    width: 100%;
	    max-width:900px;
	    padding-bottom:50px
	}
	.Neu_panel {
		border-radius: 35px;
		/*background: linear-gradient(145deg,#f0f2f8,  #e9effd, #e9effd);*/
		background: #e5e9f2;
		box-shadow: 18px  18px 48px #d6ddeb, 
		           -18px -18px 20px #ffffff;
	}
		.Neu_panel .position {
			max-width: 90%;
		    margin: auto;
		}
		.Neu_panel .position h2 {
			    text-align: center;
			    font-size: 2em;
			    padding:1em 0px 0.5em;
			    border-bottom: 1px solid #aaafc0;
			        color: #044780;
		}


	.Neu_btn1, .Neu_btn2 {
		cursor:pointer;
		font-size: 1.2em;
		font-weight: bold;
		letter-spacing: 0.1em;
		border: none;
		border-radius:5px;
	}
	.Neu_btn1 {
		height:50px;
		width: 100px;
		background:#f4f7ff;
		box-shadow: -9px 9px 27px #afb6ca, 
		             9px -9px 27px #fff;
	}
	.Neu_btn1:hover ,.Neu_btn1:active {background: linear-gradient(225deg, #f4f7ff, #dfe5f5);}
	.Neu_btn2:hover ,.Neu_btn2:active {background: linear-gradient(225deg, #49aa78, #57ca8e);}
	.Neu_btn2 {
		color: #FFF;
		height:50px;
		width: 100px;
        background: linear-gradient(225deg, #57ca8e, #49aa78);
		box-shadow: 9px 9px 27px #afb6ca, 
		            9px -9px 27px #fff;
	}
.footerimg {display:block;margin:auto;}
@media screen and (max-width: 1024px)  {
.footerimg {width:100%;}
}



/* 按鈕切換 */
.step { display: none;} 
.step.active { display: block;} 

.on {display:none;}
.off {display:inline-block;}
.active .on {display:inline-block;}
.active .off {display:none;}

/* 貸款條件 */
.confirm_TB th {text-align:right;white-space:nowrap}
.gr_thead {
background-color: #f5fdf4 !important;
color: #388e3c !important;
font-weight: bold;
border-top:none;
}
.gr_thead i {
    font-size: 1.5em;
    vertical-align: sub;
}
#accordionInfoConfirm #collapseTwoOfThree .card-body {min-height:270px}
/*  3.1 消費性無擔保借款契約重要內容說明書   */
#accordionAgreeContract {max-width: 858px;margin: auto;}
#accordionAgreeContract #collapseThreeOfOne .card-body {display: table;margin: auto;display: block;}
#accordionAgreeContract #collapseThreeOfOne .card-body.container {max-height: 600px;display: block;}

/* SVG 交易成功 */
.check_svg {text-align: center;margin: 20px auto;width: 120px;}
.circle {fill:none;stroke:#26a880;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
.circle-dash {fill:none;stroke:#26a880;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
.check {fill:none;stroke:#26a880;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.check-dash{fill:none;stroke:#26a880;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.check {
    stroke-dasharray: 60 100;
    animation: check 1.2s cubic-bezier(0.5, 0, 0.6, 1) forwards 0.15s; 
    -webkit-animation: check 1.2s cubic-bezier(0.5, 0, 0.6, 1) forwards 0.15s; 
    -moz-animation: check 1.2s cubic-bezier(0.5, 0, 0.6, 1) forwards 0.15s; 
    -o-animation: check 1.2s cubic-bezier(0.5, 0, 0.6, 1) forwards 0.15s; 
    opacity: 0;
}

@-webkit-keyframes check {
    from {stroke-dashoffset: 60;
    opacity: 1;}

    to {stroke-dashoffset: 00;
    opacity: 1;}
}

@-moz-keyframes check {
    from {stroke-dashoffset: 60;
    opacity: 1;}

    to {stroke-dashoffset: 00;
    opacity: 1;}
}

@keyframes check {
    from {stroke-dashoffset: 60;
    opacity: 1;}

    to {stroke-dashoffset: 00;
    opacity: 1;}
}

.check-dash {
    stroke-dasharray: 10 100;
    animation: check-dash 1.2s cubic-bezier(0.5, 0, 0.6, 1) forwards; 
    -webkit-animation: check-dash 1.2s cubic-bezier(0.5, 0, 0.6, 1) forwards; 
    -moz-animation: check-dash 1.2s cubic-bezier(0.5, 0, 0.6, 1) forwards; 
    -o-animation: check-dash 1.2s cubic-bezier(0.5, 0, 0.6, 1) forwards; 
}

@-webkit-keyframes check-dash {
    from {stroke-dashoffset: 120;}
    to {stroke-dashoffset: 45;}
}

@-moz-keyframes check-dash {
    from {stroke-dashoffset: 120;}
    to {stroke-dashoffset: 45;}
}

@keyframes check-dash {
    from {stroke-dashoffset: 120;}
    to {stroke-dashoffset: 45;}
}

.circle {
    stroke-dasharray: 300 300;
    animation: circle 1.5s cubic-bezier(0.5, 0, 0.5, 1) forwards 0.15s; 
    -webkit-animation: circle 1.5s cubic-bezier(0.5, 0, 0.5, 1) forwards 0.15s; 
    -moz-animation: circle 1.5s cubic-bezier(0.5, 0, 0.5, 1) forwards 0.15s; 
    -o-animation: circle 1.5s cubic-bezier(0.5, 0, 0.5, 1) forwards 0.15s; 
    opacity: 0;
}

@-webkit-keyframes circle {
    from {stroke-dashoffset:300;
    opacity: 1;}
    to {stroke-dashoffset:0;
    opacity: 1;}
}

@-moz-keyframes circle {
    from {stroke-dashoffset:300;
    opacity: 1;}
    to {stroke-dashoffset:0;
    opacity: 1;}
}

@keyframes circle {
    from {stroke-dashoffset:300;
    opacity: 1;}
    to {stroke-dashoffset:0;
    opacity: 1;}
}

.circle-dash {
    stroke-dasharray: 50 300;
    animation: circledash 1.5s cubic-bezier(0.5, 0, 0.5, 1) forwards 0.05s;
    -webkit-animation: circledash 1.5s cubic-bezier(0.5, 0, 0.5, 1) forwards 0.05s;
    -moz-animation: circledash 1.5s cubic-bezier(0.5, 0, 0.5, 1) forwards 0.05s;
    -o-animation: circledash 1.5s cubic-bezier(0.5, 0, 0.5, 1) forwards 0.05s;
    opacity: 0;
}

@-webkit-keyframes circledash {
    from {stroke-dashoffset:320;
    opacity: 1;}
    to {stroke-dashoffset: 20;
    opacity: 1;}
}

@-moz-keyframes circledash {
    from {stroke-dashoffset:320;
    opacity: 1;}
    to {stroke-dashoffset: 20;
    opacity: 1;}
}

@keyframes circledash {
    from {stroke-dashoffset:320;
    opacity: 1;}
    to {stroke-dashoffset: 20;
    opacity: 1;}
}

/* END -SVG 交易成功- END */