@charset "UTF-8";
@font-face { font-family: 'Glyphicons Halflings'; src: url("../fonts/glyphicons-halflings-regular.eot"); src: url("../fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/glyphicons-halflings-regular.woff2") format("woff2"), url("../fonts/glyphicons-halflings-regular.woff") format("woff"), url("../fonts/glyphicons-halflings-regular.ttf") format("truetype"), url("../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg"); }
@font-face { font-family: "webfont"; src: url("../fonts/webfont.eot"); src: url("../fonts/webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/webfont.woff") format("woff"), url("../fonts/webfont.ttf") format("truetype"), url("../fonts/webfont.svg#webfont") format("svg"); font-weight: normal; font-style: normal; }
@font-face { font-family: "NotoSans"; src: local("NotoSans"), local("NotoSans-Regular"), url("../fonts/NotoSans-Regular.ttf"); }
body { font: normal 100% Open Sans, 微軟正黑體, NotoSans, Helvetica, Arial, sans-serif; }
.btn-renew{height:54px;width:54px;font-size: 20px;}
/*共用*/
.panel-body {padding: 10px 25px;}
.panel {margin-bottom:0px;}
.p-right10{padding-right: 10px;}
.m-bottom10{margin-bottom:10px;}
.m-top10{margin-bottom:10px;}

.text-green{color:#40a25b!important;}

.bt-for-phone{display:none;}


/* 數位存款帳戶 */
/****************** header ******************/
.header-fcb {background-color: #FFFFFF; width:100%; height: 70px; padding: 10px 5%; border-bottom: 1px solid #DEDEDE; box-shadow: 2px 2px 1px rgba(36,37,38,0.13);position:fixed; top:0px; z-index:100}
.header-fcb h1 { margin: 0px; padding-right:10px; float:left; width: auto; }
.header-fcb h1 img { width: auto; height: 50px}
.header-fcb b {float:left; margin: 0px 0px 0px 20px}

.header-fcb span { float:left;  padding:0px; margin: 0px 0px 0px 20px; font:bold 22px/50px 微軟正黑體; text-align:center; color:#4DB369;  }
.header-fcb span::after { display: inline-block; content: ''; background-color: #bfbfbf; width: 1.5px; 
height: 24px; position: relative; left: -103px; top: 4px; }	
.header-fcb button { font-size: 15px; float:right; padding: 8px 30px; border-radius: 20px; margin: 10px 15px}	
.header-fcb button img { height: 40px; ; width: auto}


/****************** 外框 ******************/
/*  外框  */
body {background-color: #FFFFFF;} 
#content-container{background-color: #FFFFFF;} 
#navbar {background-color: #FFFFFF;}
#page-content { padding: 0px}
body, 
#content-container {color: #4a4a4a;}
/****************** page-content ******************/
/*  page-content  */
#page-content .row { background: #FFFFFF;}
#content-container::before { background: #0A896D}

/****************** stepArea ******************/
.step-wrapper { padding: 40px 0px 0px 0px;  background-color: #ffffff}
.step-page { margin:0px 14% 0px 15%; width:70%; }
.step-page ul { margin:0px 0px 0px 30px; padding:0px; width:100%; list-style:none; display:inline-block; vertical-align:top; }
.step-page ul li { float:left; width:32%; height:2px; background:#ccc; position:relative; }
.step-page ul li b { width:25px; height:25px; background-color:#ccc; border: 2px solid #ccc; border-radius:25px; text-align: center;  font:bold 15px/20px 微軟正黑體; position:absolute; top:-10px; right: 0px}
.step-page ul li:first-child  { width: 2px; }
.step-page li span { display:inline-block; width:80px; height:30px; font:15px/30px 微軟正黑體; text-align:center; color:#b5b5b5;  position:absolute; top:20px; right:-30px}
.step-page p { padding: 20px 0px 0px 20px;  font-size: 22px; font-weight: bold; text-align:center; color:#F9A62D;}	
.step-page li.selected { background:#F9A62D;}	
.step-page li.selected b { background:#F9A62D; border: 2px solid #F9A62D;}
.step-page li.selected span { color:#F9A62D;}
.step-page li.finish { background:#F9A62D;}
.step-page li.finish b { background:#F9A62D; border: 2px solid #F9A62D;}
.step-page li.finish b i { color:#ffffff; font-size: 16px; line-height: 20px }

/****************** form-group ******************/	
/*  form-group  */
.form-horizontal .form-group { margin-bottom: 30px}
.form-horizontal .bank-bg { padding: 10px 0px 20px 0px; margin-bottom: 15px; position: relative; }
.form-horizontal .bank-bg::before { content: " "; display: inline-block; width: 63%; height: 103px; background: #f3f3f3; border-radius: 6px; position: absolute; top: -16px; left: 13%}
.form-horizontal .form-group .control-label { font-size: 18px; line-height:20px;  font-weight: bold; color: #4a4a4a; padding: 15px 5px 10px 8px}
.form-horizontal .form-group .control-label span { display:inline-block; width:100%}
.form-horizontal .form-group .green-label { color:#4DB369;}
.form-horizontal .form-group input[type="text"] {color: #4a4a4a;}
.form-horizontal .form-group .form-control { height: 54px; border: 1px solid rgba(0,0,0,0.38);}
.form-horizontal .form-group .form-control:focus { border: 1px solid #4DB369}
.input-lg { height: 54px}
.check-list .form-group .control-label { font-size: 18px; line-height: 2;  font-weight: bold; color: #4DB369;}
/*  select  */	
.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) { width:100%; height: 54px; }
.bootstrap-select > .btn.btn-default.dropdown-toggle, 
.bootstrap-select > .btn.btn-default.dropdown-toggle:hover	{ height: 54px; font-size: 16px; color: #313131; border-color: rgba(0,0,0,0.38) !important;}

.btn-default,
.btn-default:focus { border-color: rgba(0,0,0,0.26) !important;}
.bootstrap-select.btn-group .dropdown-toggle .filter-option { color: #000;}
/*  dropdown-menu  */	
.dropdown-menu { font-size: 16px;}
.dropdown-menu li a { height: 50px; line-height: 42px}
.dropdown-menu li:not(.active) a:not(:hover) { color: #4a4a4a;}
/*  radio + checkbox  */
.form-horizontal .checkboxs-group,
.form-horizontal .radios-group { margin-bottom: 40px; }
.form-horizontal .checkbox, 
.form-horizontal .radio { min-height: 50px;}
/*  checkbox  */
.form-horizontal .checkboxs-group .checkbox { float: left; width: 32%; margin: 5px 0px 5px 0px; }
.magic-checkbox + label b { font-size: 16px; line-height: 17px;  display: block;  padding-left: 40px; color: #4a4a4a; position: relative; top: 4px}
.magic-checkbox + label::before { width: 30px; height: 30px; background: #ffffff; border: 1px solid rgba(0,0,0,0.38); } 
.magic-checkbox + label:not(:empty) { text-indent: 0px; }
.magic-checkbox + label::after { width: 10px; height: 18px; left: 10px; top: 2px;}	
.magic-checkbox:checked + label:before { background: #4DB369; border-color: #4DB369;}
/*  radio  */
.form-horizontal .radios-group .radio { float: left; width: 32%; margin: 5px 0px 5px 0px; }
.magic-radio  + label b { font-size: 16px; line-height: 17px;  display: block;  padding-left: 40px; color: #4a4a4a; position: relative; top: 4px}
.magic-radio + label::before { width: 30px; height: 30px;  background: #ffffff; border: 1px solid rgba(0,0,0,0.38); } 
.magic-radio:checked + label:before { border-color: #4DB369;}
.magic-radio + label:not(:empty){ text-indent: 0px; margin: 0px 5px 6px 0px}
.magic-radio + label::after { width: 20px; height: 20px; left: 5px; top: 5px; background: #4DB369;}
/*  radio + checkbox input 共用  */
.form-horizontal .checkboxs-group .checkbox .checkbox-input,
.form-horizontal .radios-group .radio .radios-input {position: absolute; top: -7px; left: 90px; width: 400px;  height: 50px; font-size: 16px;}
.form-horizontal .radios-group .radio .radios-input-2 { left: 190px; }
.form-horizontal .checkboxs-group .whole-checkbox,
.form-horizontal .radios-group .whole-radio { width: 90%;}

/*  個人收入  */
.form-horizontal .myincome {}
.form-horizontal .myincome input { float: left; width: 220px; height: 44px}
.form-horizontal .myincome span { float: left; font-size: 16px; line-height: 54px; color: #4a4a4a;  margin-left: 10px;}

/*  同意條款  */				
.form-horizontal .rule-box { margin-top: 20px; padding-top: 30px;  border-top: 1px dashed #dedede }
.rule-box .checkbox .btn-default, 
.rule-box .checkbox .btn-default:focus { font-size: 18px; font-weight: bold; color: #4A4A4A; text-align: left; margin: 0px 5px 5px 5px; padding: 5px 20px; width: auto; min-width: 260px; border-radius: 25px;}	
.rule-box p { padding: 5px 0px; font-size: 18px; font-weight: bold; color: #4A4A4A;}
.checkbox .btn-download { font-size: 18px;  padding: 5px 10px;  position: relative; top: 7px; left: -5px; }
.checkbox .btn-download b {  font-family: Microsoft JhengHei }

/*  信用卡  */	
.form-horizontal .check-cardbox { border-top: 1px dashed #F9A62D; padding:40px 0px 0px 0px }
.form-horizontal .check-cardbox b {font-size: 22px; font-weight: bold; color:  #4a4a4a;}

/*  按鈕  */	
.form-group	.text-title { padding:10px 0px 20px 0px; font-size: 1.4em; line-height: 1.5; color: #4a4a4a;  text-align: center}
/*  按鈕-信用卡  */
.btn-card { color: #4a4a4a; padding: 20px 0px 10px 0px; width: 47%; margin: 0px 1% 10px 1%; box-sizing: border-box; box-sizing:content-box}
.btn-card .fa { font-size: 20px; }
.btn-card b {font-size: 18px; line-height: 3;  display: block; text-align: center}
.btn-card-selected { color: #ffffff}

/*  按鈕-上傳檔案  */	
.id-upload { text-align: center}
.btn-id{ padding: 110px 0px; width: 96%; max-width:600px;  margin: 0px auto 30px; box-sizing: border-box; box-sizing:content-box}
.btn-id b {font-size: 18px; line-height: 3;  display: block; text-align: center}
.btn-id .fa-camera{ font-size: 3em;}
.btn-healthid  { padding: 100px 0px; }

/*  step01  */
/*  身分證  */
.id-check { width: 80px; position: absolute; right: 10px; top: 0px}
.id-check .id-input-2 { float: right;  width: 50px; text-align: center}

/*  簡訊驗證碼  */	
.pincode-box {}
.pincode-box .form-control { float: left; width: 160px; margin-right: 10px}
.pincode-box .pinimg { float: left; height: 54px; width: auto; border: 1px solid #aaa; background: #ffffff; margin-right: 10px; border-radius: 4px}
.pincode-box .pinimg img { height: 46px; width: auto; margin:4px 2px}
.pincode-box a.btn { float: left; width: 60px; height: 54px; background: #4DB369}
.pincode-box a.btn i { font-size: 2em; padding: 8px 5px;}
.middle-line { height: 10px; border-bottom: 1px dashed #4DB369}

/*  step07/08文字  */	
.finish-head { text-align: center; width: 100%; position: relative }
.finish-head b { display: block; padding:20px 0px 10px 0px; font-size:30px; color: #f59100}
.finish-head ul {list-style: none;display: inline-block; vertical-align: top;  padding: 0px 40px;}
.finish-head ul li { float: left; width: 100%; font-size:20px; line-height: 1.5; color: #333333; text-align:center; margin-bottom: 15px}
.finish-head ul li span {display: inline-block; width: 100%; padding: 0px 5px; color: #F9A62D; }
.finish-panel-body {border-top: 2px dotted #4DB369 }
.finish-head span { display: block; margin: 0px auto; width:250px; height:250px;margin-top:10px;animation: jellyIn 0.8s ease 0s 1 normal none running;}
.finish-head span img {width:250px; height:250px;}

/*  step08  */	
.form-horizontal .emailcheck  { position: relative; top: -20px; margin-bottom: 5px}
.form-horizontal .address-radios .radio { width: 130px}
.add-more-btn { float: right; margin-right: 20px; background: transparent; border: 0px; font-size: 18px; font-weight: bold; color: #F9A62D; text-decoration: underline}
.add-more-btn:hover { background: #F9A62D; color: #ffffff}
/*  按鈕  */	
.btn-two button { border-radius: 40px;  font-size: 20px; line-height: 40px;}
.demo-nifty-btn .btn-block { max-width: 480px; height: 60px; margin: 20px auto}
.demo-nifty-btn .btn-next { border-radius: 40px; font-size: 20px; line-height: 40px; color: #ffffff; background: #4DB369}
.demo-nifty-btn .btn-pre {border-radius: 40px; font-size: 20px; line-height: 40px; color: #4DB369; }
.demo-nifty-btn .btn-pre, 
.demo-nifty-btn .btn-pre:focus {background-color: #fff; border-color:  #4DB369 !important;}

/************************************************** 查詢/開卡/掛失 **************************************************/	
/* 查詢 */
.inquire-title {}
.inquire-title p { font-size: 25px; line-height: 1.5; font-weight: bold; color:#f59100; text-align: center;}
.inquire-title b  {display: block; padding:0px 0px 15px 0px; font-size: 20px; line-height: 1.5; 
	font-weight:normal; color:#4a4a4a; text-align: center;}
.panel .inquire-panel-body {  width: 40%; margin: 0px 30%; }
.panel .inquire-panel-body .form-group { border-bottom: 1px dashed #dedede}
.panel .inquire-panel-body .form-group .control-label { text-align: left}
.panel .inquire-panel-body .form-group .form-check-text { font-size: 18px; line-height: 2;  font-weight: normal; color: #4a4a4a;  text-align: left; }
.panel .inquire-panel-body .form-group .form-check-text b { color:#4DB369}



/*********************************** footer ***********************************/	
/*  footer  */	
.footer-fcb	{ background-color: #ffffff;  }
.footer-fcb .footer-bg { }	
.footer-fcb .text-green{font-size:18px;}
.footer-fcb p { padding: 30px 20px; font-size: 14px; line-height: 1.35; color:#888; text-align: center; background-color: #ffffff; position: relative; z-index: 2; border-top: 2px solid #96E6A1}

/****************************************** 背景測試 ******************************************/
#content-container { background:#f9f9f9 url(../img/digit_img/bg.png) no-repeat right 20px;  }
.step-wrapper,
#page-content .row,
.panel{ background:transparent}
#content-container::before {background: transparent;}



/******************************************************************* mobile *******************************************************************/
@media (min-width: 1201px){
	.check-panel-body { width: 60%; margin: 0px 20%; }
}
@media (max-width: 1200px) {
  .btn-card { width: 43%; margin: 0px 10px 10px 0px;  }
  .btn-card b { font-size: 16px; padding: 0px 0px 0px 10px;}	
   /*  輪播  */	
  .crad-box .cardimg {padding: 0px 5%}
}
@media (max-width: 981px) {
  .form-horizontal .bank-bg::before { width: 100%; height: 110px;  left: 0px}
  .crad-box .cardimg b {left: 15%; }
 
}
@media (max-width: 768px) {
  .header-fcb button { display: none}
  .step-page { margin:0px 10% 0px 9%; width:75%; }
  .form-horizontal .form-group .control-label span { display:inline; width:auto; }
  .form-horizontal .control-label-left { text-align:left}
  .form-horizontal .bank-bg::before { width: 100%;  height: 160px;  left: 0px; top: -5px; }
  /*  radio + checkbox  */
  .form-horizontal .checkboxs-group .checkbox,
  .form-horizontal .radios-group .radio { width: 50%; }
  .form-horizontal .checkboxs-group .checkbox .checkbox-input,
  .form-horizontal .radios-group .radio .radios-input { width: 180px;}
  .form-horizontal .checkboxs-group .whole-checkbox,
  .form-horizontal .radios-group .whole-radio { width: 90%;}
  
  .crad-box ul { width: 90%;} 
  .form-horizontal .address-radios .radio { width: 33%; margin: 0px 0px 0px;}
	
  /*  step04  */
  .boxed-step4-3 .form-horizontal .checkboxs-group::after,
  .boxed-step4-3 .form-horizontal .radios-group::after {width: 100%; background: #dedede;}

   /*  查詢  */
  .panel .inquire-panel-body { width: 80%; margin: 0px 10%; }
	
   /* 開卡 */
   .note-text,
   .note-text p { width: 95%;}
   .note-text span { right: 30px; bottom: 30px; transform:rotate(12deg);} 

   .form-horizontal .form-group .control-label { padding:0px 5px 10px 8px}
   .form-horizontal .form-group {margin-bottom:15px;}
	.bt-for-phone{display:block;}
}

@media (max-width: 480px) {  
	.header-fcb h1 img { width: auto; height: 40px}
    .header-fcb b {float:left; margin: 0px 0px 0px 20px}	
    /*  背景  */	
    #content-container { background: #f9f9f9 url(../img/digit_img/bg.png) no-repeat right 40px; background-size: 200% auto; }
    /*  簡訊驗證碼  */	
    .pincode-box .form-control { width: 120px; margin-right: 5px}
    .pincode-box .input-lg { padding: 10px 5px 10px 16px;}
    .pincode-box .pinimg {  margin-right: 5px}
    .otp-box b { font-size:2em; padding: 40px 0px;} 
    .btn-card { width: 45%; }
     /*  radio + checkbox  */
    .form-horizontal .checkboxs-group .checkbox .checkbox-input,
    .form-horizontal .radios-group .radio .radios-input { width: 130px;}
    .form-horizontal .radios-group .radio .radios-input-2 { width: 200px; left: 42px; top:36px}
    /*  確認  */
    .check-panel-body { background: #fff; width: 98%; margin: 0px 1%; box-shadow:5px 12px 20px rgba(36,37,38,0.13); }

    /*  信用卡輪播  */
    .crad-box .cardimg { padding: 0px 5%}
    .crad-box .cardimg img { width: 100%;}
    .carousel-control.right {  right: -20px;}
    .carousel-control.left {  left: -20px;}
    .crad-box .cardimg b { left: 10%; top: -6px;}
    .finish-head { padding: 0px 0px}
	/* 查詢-彈跳視窗 */
	.inquire-modal-content .modal-body {  width: 100%; margin: 0px 0%}
	.inquire-modal-content .modal-body img { width: 130px;}
	
/* 辦卡進度表格 */
#customers {
    border-collapse: collapse;width:80%;margin:0 auto;}
	
}

@media (max-width: 415px) { 
	/****************** header ******************/
	.header-fcb span {font: bold 20px/50px 微軟正黑體;}
	/*  身分證  */

	/****************** demo-nifty-btn ******************/
	.demo-nifty-btn .btn-pre,
    .demo-nifty-btn .btn-next { width: 280px}
	/* 開卡 */
	.card-data { width: 300px; margin: 0px auto; }
	.card-data img { width: 300px; height: auto;}
    .card-number { font-size: 15px; left: 20px; top: 110px; }
    .card-number span { font-size: 18px; }
    .card-number input { width: 60px; margin: 0px 5px 0px 0px; } 
    .form-horizontal .card-number .form-control { font-size: 15px;  padding: 4px 2px; height: 40px; }
	.note-text,
	.note-text p { width: 98%;}
	.note-text p {  padding: 20px 20px 40px 20px;}
    .note-text span { right: -20px; bottom: 0px; transform:rotate(6deg);}
	
	/* 辦卡進度表格 */
#customers {
    border-collapse: collapse;width:95%;margin:0 auto;}
	
/* 信用卡開卡 */
  .card-number-card input { width: 68px; margin: 0px 5px 0px 0px; } 
	
}
@media (max-width: 360px) { 

    /*  簡訊驗證碼  */	
    .pincode-box .form-control { width: 105px; margin-right: 0px }
    .pincode-box .input-lg { padding: 10px 3px 10px 10px;}
    .pincode-box .pinimg { margin-right: 0px;}
    .pincode-box .pinimg img { margin:4px 0px;}
    .pincode-box button  { width: 50px; } 
    /*  radio + checkbox  */
    .form-horizontal .checkboxs-group .checkbox .checkbox-input,
    .form-horizontal .radios-group .radio .radios-input { width: 180px;  min-width: 180px; }
	
    /*  條款  */
    .magic-checkbox + label b { padding-left: 35px}
    .magic-checkbox + label:not(:empty) { margin: 0px 0px 10px 0px;}
    .checkbox .btn-download {margin-left: 0px;}

/* 辦卡進度表格 */
#customers {
    border-collapse: collapse;width:95%;margin:0 auto;}

/* 信用卡開卡 */
  .card-number-card input { width: 68px; margin: 0px 5px 0px 0px; }

}

@media (max-width: 325px) {

	.note-text, 
	.note-text p { width: 310px; margin: 0px -15px;}
	
	/* 辦卡進度表格 */
#customers {
    border-collapse: collapse;width:95%;margin:0 auto;}
	
	/* 信用卡開卡 */
  .card-number-card input { width: 68px; margin: 0px 5px 0px 0px; }

}