﻿@charset "UTF-8";
/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */
/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
html,
button,
input,
select,
textarea {
  color: #666666;
}

body {
  font-size: 1em;
  line-height: 1.4;
  overflow-y: scroll;
  height: 100%;
}

a {
  color: #00e;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */
img {
  vertical-align: bottom;
}

/*
 * Remove default fieldset styles.
 */
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */
textarea {
  resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: "微軟正黑體","Microsoft JhengHei","黑體","SimHei",Helvetica,Arial,Sans;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

html, body {
  background-color: #fff;
}

html, body, p, div, span, a {
  font-family: "微軟正黑體","Microsoft JhengHei","黑體","SimHei",Helvetica,Arial,Sans;
  font-size: 18px;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  margin: 0;
  padding: 0;
  text-decoration: none;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #e5e5e5;
  margin: 20px 0;
  padding: 0;
}

a {
  color: #555555;
  text-decoration: none;
}

img {
  max-width: 100%;
  vertical-align: bottom;
}

small {
  font-size: 12px;
}

h2 {
  font-size: 23px;
}

.block {
  display: block;
}

/*-------- 共用寬度設定 ----------*/
.half {
  width: 50%;
  text-align: center;
}

.half-space {
  width: 49%;
  text-align: center;
  display: inline-block;
}

.three-space {
  width: 32%;
  text-align: center;
  display: inline-block;
}

.whole {
  width: 100%;
}

.w5pct {
  width: 5% !important;
}

.w18pct {
  width: 18% !important;
}

.w25pct {
  width: 25%;
}

.w24pct {
  width: 24%;
}

.w33pct {
  width: 33.33333%;
}

.w49pct {
  width: 49%;
}

.w77pct {
  width: 77% !important;
}

.w85pct {
  width: 85% !important;
}

.w90pct {
  width: 90%;
}

.w95pct {
  width: 95%;
}

.w220 {
  width: 220px;
}

.w45 {
  width: 45px;
}

/*-------- font size ----------*/
.f-18 {
  font-size: 18px !important;
}

/*-------- padding  ----------*/
.pv-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.pv-25 {
  padding-top: 25px;
  padding-bottom: 25px;
}

.ph-16 {
  padding-left: 16px;
  padding-right: 16px;
}

/*-------- background ----------*/
.bg-grayLight {
  background: #f7f7f7;
}

.bg-white {
  background: #fff !important;
}

/*-------- margin ----------*/
.mv-7 {
  margin-top: 7px;
  margin-bottom: 7px;
}

.mv-10 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.mv-20 {
  margin-top: 20px;
  margin-bottom: 20px;
}

.mv-30 {
  margin-top: 30px;
  margin-bottom: 30px;
}

.mh-1pct {
  margin-left: 1%;
  margin-right: 1%;
}

.mh-5pct {
  margin-left: 5%;
  margin-right: 5%;
}

.mh-10 {
  margin-left: 10px;
  margin-right: 10px;
}

.mh-16 {
  margin-left: 16px;
  margin-right: 16px;
}

.mh-15 {
  margin-left: 15px;
  margin-right: 15px;
}

.mt-20 {
  margin-top: 20px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mb-50 {
  margin-bottom: 50px;
}

.mb-90 {
  margin-bottom: 90px !important;
}

.mb-7pct {
  margin-bottom: 7%;
}

.ml-10 {
  margin-left: 10px;
}

/*-------- float ----------*/
.fl {
  float: left;
}

.fr {
  float: right;
}

/*-------- 共用字形設定 ----------*/
.f-14 {
  font-size: 14px;
  line-height: 14px;
}

.f-16 {
  font-size: 16px;
}

.f-17 {
  font-size: 17px;
}

.f-18 {
  font-size: 18px;
}

.f-20 {
  font-size: 20px;
}

.f-23 {
  font-size: 23px;
}

.f-bold {
  font-weight: bold;
}

.f-red {
  color: #ff3300;
}

.f-gray {
  color: #666666;
}

.f-green {
  color: #009d98;
}

.f-orange {
  color: #fe9426;
}

.f-block {
  color: #333333;
}

.f-blue {
  color: #28a5e5;
}

.underline {
  text-decoration: underline;
}

/*-------- 表單類共用設定 ----------*/
input {
  outline: none;
}

::-webkit-input-placeholder {
  font-weight: normal;
}

::-moz-placeholder {
  font-weight: normal;
}

/* firefox 19+ */
:-ms-input-placeholder {
  font-weight: normal;
}

/* ie */
input:-moz-placeholder {
  font-weight: normal;
}

input[type=text], input[type=number], input[type=password], input[type=email], input[type=tel] {
  -moz-appearance: none;
  -webkit-appearance: none;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  line-height: 48px;
  height: 48px;
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid #c0c0c0;
  font-size: 20px;
}
input[type=text].blue, input[type=number].blue, input[type=password].blue, input[type=email].blue, input[type=tel].blue {
  border: 1px solid #7fb4cf;
  color: #fe9426;
  font-weight: bold;
}

textarea {
  -moz-appearance: none;
  -webkit-appearance: none;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  line-height: 48px;
  height: 170px;
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid #c0c0c0;
  font-size: 20px;
}

label[for] {
  cursor: pointer;
}

.radio-group label {
  border: 1px solid #bababa;
  background-color: #eeeeee;
  padding: 15px 0;
  text-align: center;
  line-height: 18px;
  display: inline-block;
  border-radius: 4px;
  margin: 0 -1px !important;
}
.radio-group label.active {
  font-weight: bold;
  color: #fff;
  background-color: #009d98;
}

.list-two-switch {
  display: block;
  border-radius: 4px;
  background-color: #fff;
  border: 1px solid #bababa;
}
.list-two-switch label {
  width: 50%;
  display: inline-block;
  float: left;
  text-align: center;
  padding: 15px 0;
  line-height: 18px;
  position: relative;
}
.list-two-switch label.active {
  font-weight: bold;
  color: #fff;
  background-color: #009d98;
}
.list-two-switch label.active:after {
  content: '';
  height: 100%;
  width: 5px;
  background-size: 5px 100%;
  position: absolute;
  top: 0;
}
.list-two-switch label.first-child {
  border-radius: 4px 0 0 4px;
}
.list-two-switch label.first-child.active:after {
  background: url("/holding/images/esunfhc_m/shadow-switch-first.png") repeat-y top;
  right: -5px;
}
.list-two-switch label.last-child {
  border-radius: 0 4px 4px 0;
}
.list-two-switch label.last-child.active:after {
  background: url("/holding/images/esunfhc_m/shadow-switch-last.png") repeat-y top;
  left: -5px;
}
.list-two-switch.blue {
  border: 1px solid #7fb4cf;
}
.list-two-switch.blue label.active {
  background-color: #28a5e5;
}

/*-------- text-align ----------*/
.vat {
  vertical-align: top;
}

/*-------- text-align ----------*/
.tal {
  text-align: left;
}

.tar {
  text-align: right;
}

.tac {
  text-align: center;
}

/*--------table---------*/
table {
  width: 100%;
  font-size: 17px;
  color: #333333;
}
table .bg-light-blue {
  background-color: #e5effb;
}
table th, table td {
  border: 1px solid #e0e0e0;
  padding: 10px 7px;
  line-height: 20px;
}
table th {
  background-color: #7fb0ec;
  color: #fff;
}
table tfoot td {
  border: none;
  padding: 7px;
  color: #666666;
}

/*-------- icons ----------*/
.icon-errorWhite, .icon-infoBlue, .icon-clock, .icon-menu, .icon-menuClose, .icon-close, .icon-location, .icon-search, .icon-computer, .icon-download, .icon-back {
  display: inline-block;
  width: 26.6666666667px;
  height: 26.6666666667px;
  background-size: 26.6666666667px;
  background-repeat: no-repeat;
  vertical-align: middle;
}

.icon-errorWhite {
  background-image: url(/holding/images/esunfhc_m/icon-error-white.png);
  position: relative;
  top: -3px;
}

.icon-infoBlue {
  background-image: url(/holding/images/esunfhc_m/icon-info-blue.png);
  position: relative;
  top: 15px;
}

/* 中文 icon 開始 */
.icon-atmRate {
  width: 41.6666666667px;
  height: 41.6666666667px;
  background-size: 41.6666666667px;
  float: left;
  background-image: url(/holding/images/esunfhc_m/atms/icon-atmRate.png);
  background-repeat: no-repeat;
}

.icon-atmForeign {
  width: 41.6666666667px;
  height: 41.6666666667px;
  background-size: 41.6666666667px;
  float: left;
  background-image: url(/holding/images/esunfhc_m/atms/icon-atmForeign.png);
  background-repeat: no-repeat;
}

.icon-atmDeposit {
  width: 41.6666666667px;
  height: 41.6666666667px;
  background-size: 41.6666666667px;
  float: left;
  background-image: url(/holding/images/esunfhc_m/atms/icon-atmDeposit.png);
  background-repeat: no-repeat;
}

.icon-atmInvest {
  width: 41.6666666667px;
  height: 41.6666666667px;
  background-size: 41.6666666667px;
  float: left;
  background-image: url(/holding/images/esunfhc_m/atms/icon-atmInvest.png);
  background-repeat: no-repeat;
}

.icon-atmSave {
  width: 41.6666666667px;
  height: 41.6666666667px;
  background-size: 41.6666666667px;
  float: left;
  background-image: url(/holding/images/esunfhc_m/atms/icon-atmSave.png);
  background-repeat: no-repeat;
}

/* 中文 icon 結束 */
.icon-locationGreen {
  width: 41.6666666667px;
  height: 41.6666666667px;
  background-size: 41.6666666667px;
  display: inline-block;
  background-image: url(/holding/images/esunfhc_m/icon-locationGreen.png);
  background-repeat: no-repeat;
  position: absolute;
  top: 12%;
  left: 26%;
}

.icon-mailBoxGreen {
  width: 66.6666666667px;
  height: 66.6666666667px;
  background-size: 66.6666666667px;
  background-image: url(/holding/images/esunfhc_m/icon-mailBox-green.png);
  background-repeat: no-repeat;
  display: inline-block;
}

.icon-phoneGreen {
  width: 66.6666666667px;
  height: 66.6666666667px;
  background-size: 66.6666666667px;
  background-image: url(/holding/images/esunfhc_m/icon-phone-green.png);
  background-repeat: no-repeat;
  display: inline-block;
}

.icon-calenderGray {
  width: 26.6666666667px;
  height: 26.6666666667px;
  background-size: 26.6666666667px;
  display: inline-block;
  background-image: url(/holding/images/esunfhc_m/icon-calenderGray.png);
  background-repeat: no-repeat;
}

.icon-distanceGreen {
  width: 26.6666666667px;
  height: 26.6666666667px;
  background-size: 26.6666666667px;
  display: inline-block;
  background-image: url(/holding/images/esunfhc_m/icon-distanceGreen.png);
  background-repeat: no-repeat;
  float: left;
}

.icon-cardGreen {
  width: 47px;
  height: 47px;
  background: url(/holding/images/esunfhc_m/icon-card-green.png) no-repeat;
  background-size: 47px;
  display: block;
  margin: 0 auto;
  position: relative;
  top: 5px;
}

.icon-loanGreen {
  width: 47px;
  height: 47px;
  background: url(/holding/images/esunfhc_m/icon-loan-green.png) no-repeat;
  background-size: 47px;
  display: block;
  margin: 0 auto;
  position: relative;
  top: 5px;
}

.icon-registerGreen {
  width: 47px;
  height: 47px;
  background: url(/holding/images/esunfhc_m/icon-register-online.png) no-repeat;
  background-size: 47px;
  display: block;
  margin: 0 auto;
}

.icon-checkGreen {
  width: 47px;
  height: 47px;
  background: url(/holding/images/esunfhc_m/icon-step-green.png) no-repeat;
  background-size: 47px;
  display: block;
  margin: 0 auto;
}

.icon-unlockGreen {
  width: 47px;
  height: 47px;
  background: url(/holding/images/esunfhc_m/icon-unlock-green.png) no-repeat;
  background-size: 47px;
  display: block;
  margin: 0 auto;
}

.icon-payGreen {
  width: 47px;
  height: 47px;
  background: url(/holding/images/esunfhc_m/icon-pay-green.png) no-repeat;
  background-size: 47px;
  display: block;
  margin: 0 auto;
}

.icon-rateGray {
  width: 47px;
  height: 47px;
  background: url(/holding/images/esunfhc_m/icon-rate-gray.png) no-repeat;
  background-size: 47px;
  display: block;
  margin: 0 auto;
}

.icon-calGray {
  width: 47px;
  height: 47px;
  background: url(/holding/images/esunfhc_m/icon-caluate-gray.png) no-repeat;
  background-size: 47px;
  display: block;
  margin: 0 auto;
}

.icon-headphoneGray {
  width: 47px;
  height: 47px;
  background: url(/holding/images/esunfhc_m/icon-headphone-gray.png) no-repeat;
  background-size: 47px;
  display: block;
  margin: 0 auto;
}

.icon-phoneGray {
  width: 47px;
  height: 47px;
  background: url(/holding/images/esunfhc_m/icon-phone-gray.png) no-repeat;
  background-size: 47px;
  display: block;
  margin: 0 auto;
}

.icon-plus {
  background: url(/holding/images/esunfhc_m/icon-plus.png) no-repeat;
  width: 17px;
  height: 17px;
  background-size: 17px;
  display: inline-block;
  position: relative;
  top: 1px;
  right: 10px;
}

.icon-clock {
  vertical-align: top;
  background-image: url(/holding/images/esunfhc_m/icon-clock.png);
}

.icon-menu {
  background-image: url(/holding/images/esunfhc_m/icon-menu.png);
}

.icon-menuClose {
  background-image: url(/holding/images/esunfhc_m/icon-menu-close.png);
}

.icon-close {
  background-image: url(/holding/images/esunfhc_m/icon-close.png);
}

.icon-location {
  background-image: url(/holding/images/esunfhc_m/icon-language.png);
}

.icon-search {
  background-image: url(/holding/images/esunfhc_m/icon-search.png);
}

.icon-computer {
  background-image: url(/holding/images/esunfhc_m/icon-computer.png);
}

.icon-download {
  background-image: url(/holding/images/esunfhc_m/icon-download.png);
}

.icon-back {
  background-image: url(/holding/images/esunfhc_m/icon-back.png);
}

.icon-footer-home, .icon-footer-download, .icon-footer-computer, .icon-footer-call {
  display: inline-block;
  width: 26.6666666667px;
  height: 26.6666666667px;
  background-size: 26.6666666667px;
  background-repeat: no-repeat;
  vertical-align: bottom;
  background-image: url(/holding/images/esunfhc_m/icon-footer.png);
}

.icon-footer-home {
  background-position: 0 0;
}

.icon-footer-download {
  background-position: 0 -26.6666666667px;
}

.icon-footer-computer {
  background-position: 0 -53.3333333333px;
}

.icon-footer-call {
  background-position: 0 -80px;
}

.icon-online-rate, .icon-online-loan, .icon-online-creditcard, .icon-online-service, .icon-online-tool, .icon-online-new {
  display: inline-block;
  width: 47px;
  height: 47px;
  background-size: 47px;
  background-repeat: no-repeat;
  vertical-align: bottom;
  background-image: url(/holding/images/esunfhc_m/icon-service.png);
}

.icon-online-rate {
  background-position: 0 0;
}

.icon-online-loan {
  background-position: 0 -47px;
}

.icon-online-creditcard {
  background-position: 0 -94px;
}

.icon-online-service {
  background-position: 0 -141px;
}

.icon-online-tool {
  background-position: 0 -188px;
}

.icon-online-new {
  background-position: 0 -235px;
}

.icon-rate-piggybank, .icon-rate-coin, .icon-rate-linechart, .icon-rate-gold {
  display: inline-block;
  width: 47px;
  height: 47px;
  background-size: 47px;
  background-repeat: no-repeat;
  vertical-align: bottom;
  background-image: url(/holding/images/esunfhc_m/icon-rate-index.png);
}

.icon-rate-piggybank {
  background-position: 0 0;
}

.icon-rate-coin {
  background-position: 0 -47px;
  position: relative;
  top: 5px;
}

.icon-rate-linechart {
  background-position: 0 -94px;
}

.icon-rate-gold {
  background-position: 0 -141px;
  position: relative;
  top: 5px;
}

/*-------- 共用按鈕 ----------*/
.btn-green-line {
  display: block;
  padding: 10px 0;
  border: 1px solid #009d98;
  color: #009d98;
  font-weight: bold;
  text-align: center;
  position: relative;
}
.btn-green-line .i-arrowUp {
  width: 20px;
  height: 13px;
  background: url(/holding/images/esunfhc_m/arrowUp-greenLine.png) no-repeat;
  background-size: 20px 13px;
  display: block;
  position: absolute;
  top: -10px;
  left: 45%;
  right: 45%;
}

.btn-reload:before {
  content: "";
  background: url(/holding/images/esunfhc_m/icon-reload.png) no-repeat center center;
  background-size: 27px;
  display: inline-block;
  width: 27px;
  height: 18px;
  margin-right: 5px;
  vertical-align: middle;
  position: relative;
  top: -2px;
}

.btn-green-top-arrow:before, .btn-green-top-arrow:after {
  content: "";
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 11px solid #009d98;
  margin: 0 auto 0;
  position: absolute;
  right: 50%;
  top: -11px;
}
.btn-green-top-arrow:after {
  border-bottom-color: #fff;
  top: -9px;
}

.btn-green-top-arrow-gray:before, .btn-green-top-arrow-gray:after {
  content: "";
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 11px solid #009d98;
  margin: 0 auto 0;
  position: absolute;
  right: 50%;
  top: -11px;
}
.btn-green-top-arrow-gray:after {
  border-bottom-color: #f2f2f2;
  top: -9px;
}

.btn-green {
  width: 100%;
  padding: 16px 0;
  background: #009d98;
  text-align: center;
  color: #fff;
  display: block;
  font-size: 20px;
  font-weight: bold;
}

.btn-green-register {
  width: 100%;
  padding: 16px 0;
  background: #009d98;
  text-align: center;
  color: #fff;
  display: block;
  font-size: 20px;
  font-weight: bold;
  position: relative;
}
.btn-green-register .i-arrow-green {
  width: 20px;
  height: 13px;
  background: url(/holding/images/esunfhc_m/icon-green-arrow.png) no-repeat;
  background-size: 20px 13px;
  display: block;
  position: absolute;
  top: -10px;
  left: 45%;
  right: 45%;
}
.btn-green-register .i-hand {
  width: 27px;
  height: 27px;
  background: url(/holding/images/esunfhc_m/icon-hand.png) no-repeat;
  background-size: 27px;
  display: inline-block;
  position: absolute;
  left: 33%;
  top: 23%;
}
.btn-green-register .i-save {
  width: 27px;
  height: 27px;
  background: url(/holding/images/esunfhc_m/icon-saveWhite.png) no-repeat;
  background-size: 27px;
  display: inline-block;
  position: absolute;
  left: 33%;
  top: 23%;
}

.btn-orange {
  width: 100%;
  padding: 16px 0;
  background: #fe9426;
  text-align: center;
  color: #fff;
  display: block;
  font-size: 20px;
  font-weight: bold;
  position: relative;
}
.btn-orange .i-arrow-orange {
  width: 20px;
  height: 13px;
  background: url(/holding/images/esunfhc_m/icon-orange-arrow.png) no-repeat;
  background-size: 20px 13px;
  display: block;
  position: absolute;
  top: -10px;
  left: 48%;
}
.btn-orange .i-contectWhite {
  width: 27px;
  height: 27px;
  background: url(/holding/images/esunfhc_m/icon-contect-white.png) no-repeat;
  background-size: 27px;
  display: inline-block;
  position: absolute;
  left: 28%;
  top: 23%;
}

.btn-gray {
  width: 100%;
  padding: 16px 0;
  background: #f5f5f5;
  text-align: center;
  color: #009d98;
  display: block;
  font-size: 18px;
  position: relative;
}

.btn-blue {
  background-color: #28a5e5;
  border: 1px solid #28a5e5;
  color: #fff;
  font-weight: bold;
  line-height: 18px;
  padding: 14px 0;
  display: inline-block;
  text-align: center;
}

.btn-green-send {
  background-color: #009d98;
  border: 1px solid #009d98;
  color: #fff;
  font-weight: bold;
  line-height: 18px;
  padding: 14px 0;
  display: inline-block;
  text-align: center;
}

.btn-blue-line {
  background-color: #fff;
  border: 1px solid #28a5e5;
  color: #28a5e5;
  font-weight: bold;
  line-height: 18px;
  padding: 14px 0;
  display: inline-block;
  text-align: center;
}

.btn-change:before {
  content: "";
  background: url(/holding/images/esunfhc_m/icon-change.png) no-repeat center center;
  background-size: 27px;
  display: inline-block;
  width: 27px;
  height: 18px;
  margin-right: 5px;
  vertical-align: middle;
  position: relative;
  top: -2px;
}

.btn-contectBlue {
  width: 100%;
  padding: 16px 0;
  background: #28a5e5;
  text-align: center;
  color: #fff;
  display: block;
  font-size: 20px;
  font-weight: bold;
  position: relative;
}
.btn-contectBlue .i-arrow-blue {
  width: 20px;
  height: 13px;
  background: url(/holding/images/esunfhc_m/icon-blue-arrow.png) no-repeat;
  background-size: 20px 13px;
  display: block;
  position: absolute;
  top: -10px;
  left: 45%;
  right: 45%;
}
.btn-contectBlue .i-contectWhite {
  width: 27px;
  height: 27px;
  background: url(/holding/images/esunfhc_m/icon-contect-white.png) no-repeat;
  background-size: 27px;
  display: inline-block;
  position: absolute;
  left: 28%;
  top: 23%;
}

/*-------- float ----------*/
.put-left {
  float: left;
}

.put-right {
  float: right;
}

/*-------- 其他共用class ----------*/
.hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.hide {
  display: none;
}

.label-orange {
  background-color: #fe9426;
  color: #fff;
  padding: 4px 10px;
}

.label-yellow {
  background-color: #feb80f;
  color: #fff;
  padding: 4px 10px;
}

.label-red {
  background-color: #d5544e;
  color: #fff;
  padding: 4px 10px;
}

.unit-title {
  background-color: #eeeeee;
  text-align: center;
  border-bottom: 1px solid #009d98;
  padding: 15px 0;
}
.unit-title h2 {
  margin: 5px 0;
  line-height: 23px;
}
.unit-title .back {
  position: absolute;
  top: 17px;
  right: 16px;
  height: 33px;
  padding-left: 16px;
  border-left: 1px solid #cccccc;
}

.list-group {
  padding: 13.3333333333px 16px;
  border-bottom: 1px solid #eeeeee;
}
.list-group .list-group-list {
  margin: 0;
  padding: 0;
  list-style: none;
  margin-left: 28px;
}
.list-group .list-group-list li {
  line-height: 60px;
}
.list-group .list-group-list h3 {
  margin: 0;
}

.control-group {
  padding: 26.6666666667px;
  border-bottom: 1px solid #eeeeee;
}
.control-group a .pic {
  float: left;
}
.control-group a .pic img {
  width: 100px;
  height: 100px;
}
.control-group a .control-field {
  float: left;
  margin-left: 15px;
  margin-top: 10px;
  font-size: 18px;
  font-weight: bold;
  width: 65%;
}
.control-group a .control-field h3 {
  color: #009d98;
  margin-top: 0;
  margin-bottom: 10px;
}

.tab-block .tabs {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  position: relative;
  z-index: 100;
}
.tab-block .tabs li {
  float: left;
}
.tab-block .tabs li.active {
  height: 53px;
  padding: 0;
}
.tab-block .tabs li.active:after {
  content: "";
  height: 0;
  width: 0;
  margin: -6px auto 0;
  display: block;
}
.tab-block .tabs li.active a {
  font-weight: bold;
  color: #fff;
  line-height: 31px;
}
.tab-block .tabs li a {
  padding: 11px 0;
  display: block;
  font-size: 20px;
  line-height: 24px;
}
.tab-block .tabs li.green {
  background-color: #e5f5f4;
}
.tab-block .tabs li.green.active {
  background: #009d98;
}
.tab-block .tabs li.green.active:after {
  /*width: 0;
  height: 0;*/
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 14px solid #009d98;
  border-bottom: none;
}
.tab-block .tabs li.green a {
  border-right: 1px solid #44b7b3;
}
.tab-block .tabs li.blue {
  background-color: #ebf5fa;
}
.tab-block .tabs li.blue.active {
  background: #28a5e5;
}
.tab-block .tabs li.blue.active:after {
  /*width: 0;
  height: 0;*/
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 14px solid #28a5e5;
  border-bottom: none;
}
.tab-block .tabs li.blue a {
  border-right: 1px solid #9dd5f2;
}
.tab-block .tab_content {
  width: 100%;
}
.tab-block .tab_content.addPd {
  padding: 25px 16px 33px 16px;
}

.tb-amort {
  width: 100%;
}
.tb-amort thead tr th {
  width: 23%;
  font-size: 16px;
  background: #79bae9;
  border: 1px solid #e5e5e5;
  text-align: center;
}
.tb-amort thead tr th:first-child {
  width: 8%;
}
.tb-amort tbody tr td {
  text-align: right;
}
.tb-amort tbody tr td:first-child {
  text-align: center;
  background: #e3f1fa;
}

.tips {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
  color: #333333;
}
.tips li {
  margin: 10px 0;
  padding-left: 10px;
  position: relative;
}
.tips li .asterisk {
  position: absolute;
  left: 1px;
  font-size: 16px;
}

.sub {
  width: 100%;
  border: 1px solid #bababa;
  border-radius: 5px;
  padding-bottom: 3px;
}
.sub .filter_title {
  width: 100%;
  text-align: center;
  font-size: 18px;
  padding: 15px 0;
  color: #333333;
  position: relative;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
}
.sub .filter_title .i-arrow {
  content: '';
  width: 26.6666666667px;
  height: 26.6666666667px;
  background-image: url(/holding/images/esunfhc_m/arrowDown-gray.png);
  background-repeat: no-repeat;
  background-size: 26.6666666667px;
  display: inline-block;
  position: absolute;
  top: 24%;
  right: 32%;
}
.sub .filter_title.active {
  background: #009d98;
  color: #fff;
}
.sub .filter_title.active .i-arrow {
  background-image: url(/holding/images/esunfhc_m/arrowUp-white.png);
}
.sub .filter_content {
  padding: 2px 3px;
  background: #fff;
  margin-top: 3px;
  display: none;
}
.sub .filter_content.active {
  display: block;
}
.sub .filter_content ul {
  padding: 0;
  margin: 0;
  list-style: none;
  width: 100%;
}
.sub .filter_content ul li {
  margin-bottom: 3px;
}
.sub .filter_content ul li .categoryAtm {
  padding: 10px 20px;
  background: #f5f5f5;
  width: 100%;
  margin-top: 0;
}
.sub .filter_content ul li .categoryAtm.active {
  background: #e5f5f4;
}

.fancyform-checkbox {
  float: left;
  vertical-align: top;
  margin-top: 7px;
  width: 87%;
}
.fancyform-checkbox img {
  vertical-align: middle;
  cursor: pointer;
}
.fancyform-checkbox .trans-element-checkbox {
  cursor: pointer;
  display: inline-block;
  width: 26.6666666667px;
  height: 26.6666666667px;
  float: right;
}
.fancyform-checkbox .trans-element-checkbox.unchecked {
  background: url("/holding/images/esunfhc_m/checkbox.png") no-repeat center center;
  background-size: 26.6666666667px;
  border: none;
  margin: 5px;
}
.fancyform-checkbox .trans-element-checkbox.checked {
  background: url("/holding/images/esunfhc_m/checkbox-checked.png") no-repeat center center;
  border: none;
  background-size: 26.6666666667px;
  margin: 5px;
}
.fancyform-checkbox label {
  vertical-align: middle;
  font-size: 20px;
  color: #565a5a;
  cursor: pointer;
  margin-left: 20px !important;
  margin-top: 8px !important;
}

.fancyform-checkbox2 {
  float: left;
  vertical-align: top;
  margin-top: 7px;
  width: 87%;
}
.fancyform-checkbox2 img {
  vertical-align: middle;
  cursor: pointer;
}
.fancyform-checkbox2 .trans-element-checkbox {
  cursor: pointer;
  display: inline-block;
  width: 26.6666666667px;
  height: 26.6666666667px;
  float: left;
}
.fancyform-checkbox2 .trans-element-checkbox.unchecked {
  background: url("/holding/images/esunfhc_m/checkbox.png") no-repeat center center;
  background-size: 26.6666666667px;
  border: none;
  margin: 5px;
}
.fancyform-checkbox2 .trans-element-checkbox.checked {
  background: url("/holding/images/esunfhc_m/checkbox-checked.png") no-repeat center center;
  border: none;
  background-size: 26.6666666667px;
  margin: 5px;
}
.fancyform-checkbox2 label {
  vertical-align: middle;
  font-size: 18px;
  font-weight: bold;
  color: #333333;
  cursor: pointer;
  margin-top: 7px !important;
}

.location-group {
  border-bottom: 1px solid #eeeeee;
}
.location-group .inner {
  padding: 20px 15px;
}
.location-group .inner .title {
  font-size: 20px;
  padding: 5px 0;
  font-weight: bold;
  color: #009d98;
}
.location-group .inner .title .name {
  float: left;
  margin-top: 10px;
}
.location-group .inner .title .distance {
  background: #f5f5f5;
  padding: 5px 15px 5px 5px;
  float: right;
}
.location-group .inner .title .distance .total {
  float: left;
  margin-top: 2px;
  color: #009d98;
}
.location-group .inner .typePic {
  padding: 5px 0;
}
.location-group .inner .location-field {
  font-size: 18px;
  padding: 5px 0;
  color: #333333;
  line-height: 30px;
}

.map-area {
  width: 95%;
  margin: 0 auto 70px auto;
}

.event-group .inner {
  padding: 20px 15px 50px 15px;
}
.event-group .inner .assorted {
  margin-bottom: 12px;
}
.event-group .inner .assorted .rotation-time {
  float: right;
}
.event-group .inner .assorted .rotation-time span {
  font-size: 17px;
  position: relative;
  top: -5px;
}

.faq-group:last-child {
  border-bottom: 1px solid #e5e5e5;
}
.faq-group .faq-title {
  font-size: 18px;
  padding: 15px 15px 8px 15px;
  color: #333333;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-bottom: none;
}
.faq-group .faq-title .i-arrow {
  content: '';
  width: 10%;
  height: 26.6666666667px;
  background-size: 26.6666666667px;
  background-image: url(/holding/images/esunfhc_m/arrowDown-green.png);
  background-repeat: no-repeat;
  display: inline-block;
  position: relative;
  float: left;
}
.faq-group .faq-title span {
  vertical-align: top;
  float: left;
  width: 90%;
}
.faq-group .faq-title.active {
  border-bottom: 1px solid #e5e5e5;
  box-shadow: 0 1px 0 0;
  background: #e5f5f4;
}
.faq-group .faq-title.active .i-arrow {
  content: '';
  width: 10%;
  height: 26.6666666667px;
  background-size: 26.6666666667px;
  background-image: url(/holding/images/esunfhc_m/arrowUp-green.png);
  background-repeat: no-repeat;
  display: inline-block;
  position: relative;
  float: left;
}
.faq-group .faq-title.active span {
  vertical-align: top;
  float: left;
  width: 90%;
}
.faq-group .faq-content {
  background: #f7f7f7;
  border: 1px solid #e5e5e5;
  border-top: none;
  border-bottom: none;
  padding: 15px;
  display: none;
  font-size: 18px;
  color: #333333;
  word-break: break-all;
}
.faq-group .faq-content.active {
  display: block;
}
.faq-group .faq-content .i-boxGreen {
  width: 10px;
  height: 10px;
  background: url(/holding/images/esunfhc_m/icon-boxGreen.png) no-repeat;
  background-size: 10px;
  display: inline-block;
  position: relative;
  top: 5px;
}

.service-group {
  padding: 24px 17px 40px 17px;
  border-bottom: 1px solid #e5e5e5;
}
.service-group .pic {
  float: left;
  width: 15%;
}
.service-group .descript {
  width: 85%;
  float: left;
  padding-left: 7%;
  padding-top: 10px;
}

.message-content {
  background: #dfefee;
  padding: 27px 17px;
}
.message-content .input-area {
  margin-bottom: 30px;
}
.message-content .verification {
  border-top: 1px solid #bababa;
}
.message-content .verification .agree {
  padding: 0 20px;
  margin-bottom: 25px;
}
.message-content .verification .verification-group label {
  color: #666666;
}
.message-content .verification .verification-group .field {
  margin: 10px 0;
}
.message-content .verification .verification-group .field input {
  width: 60%;
}
.message-content .verification .verification-group .field img {
  width: 38%;
  margin-top: 5px;
}

.credit .btn-area {
  padding: 10px 18px;
  list-style: none;
  margin-bottom: 0;
}
.credit .btn-area li {
  margin-bottom: 25px;
}
.credit .btn-area li:nth-child(odd) {
  float: left;
}
.credit .btn-area li:nth-child(even) {
  float: right;
}
.credit .btn-area .btn-credit {
  width: 95%;
  border: 1px solid #009d98;
  color: #009d98;
  display: block;
  padding: 13px 0;
  text-align: center;
}

.inner-content .inner-kv img {
  width: 100%;
}
.inner-content .inner {
  padding: 27px 18px;
}
.inner-content .btn-area {
  padding: 33px 18px;
  background: #f5f5f5;
  list-style: none;
}
.inner-content .btn-area li {
  margin-bottom: 20px;
}
.inner-content .btn-area li:nth-child(even) {
  float: left;
}
.inner-content .btn-area li:nth-child(odd) {
  float: right;
}
.inner-content .btn-area .btn-loan {
  width: 95%;
  border: 1px solid #666666;
  display: block;
  padding: 13px 0;
  text-align: center;
}

.error input {
  border: 1px solid #fe9426;
}
.error .error-notice {
  margin: 10px 0;
  color: #fe9426;
  font-weight: bold;
}

/*-------- 特殊用途class ----------*/
.content-block {
  background-color: #000;
  opacity: 0;
}

.online-credit {
  background: #f2f2f2;
  padding: 22px 17px;
}

.search-keyword {
  width: 100%;
  position: relative;
}
.search-keyword .searchInput {
  width: 100%;
}
.search-keyword .btn-search {
  width: 48px;
  height: 48px;
  background-size: 26.6666666667px;
  background-image: url(/holding/images/esunfhc_m/icon-search-white.png);
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  background-color: #009d98;
  background-position: center center;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
}

.shadow {
  position: relative;
}
.shadow:after {
  content: '';
  width: 100%;
  height: 6px;
  background: url("/holding/images/esunfhc_m/shadow-index-content.png") repeat-x top;
  background-size: 100% 6px;
  position: absolute;
  left: 0;
  bottom: -6px;
  z-index: 150;
}

.filter-gray, .filter-blue {
  margin-bottom: 50px;
  min-height: 55px;
  position: relative;
}
.withTab.filter-gray, .withTab.filter-blue {
  top: -7px;
  z-index: 1;
}
.filter-gray:after, .filter-blue:after {
  content: '';
  width: 100%;
  height: 42px;
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100% 42px;
  position: absolute;
  left: 0;
  bottom: -35px;
  z-index: 100;
}

.filter-gray {
  background: url("/holding/images/esunfhc_m/bg-result-gray.png") #f7f7f7 repeat-x top left;
  background-size: 100% 71px;
}
.filter-gray:after {
  background-image: url("/holding/images/esunfhc_m/bg-result-arrow-gray-.png");
}

.filter-blue {
  background: url("/holding/images/esunfhc_m/bg-result-blue.png") #ebf5fa repeat-x top left;
  background-size: 100% 71px;
}
.filter-blue:after {
  background-image: url("/holding/images/esunfhc_m/bg-result-arrow-blue-.png");
}

.filter-result .filter-title {
  font-size: 23px;
  font-weight: bold;
  display: block;
  text-align: center;
  color: #28a5e5;
}

.blue-box {
  border: 1px solid #28a5e5;
  padding: 20px 0;
  color: #333333;
}

.select-blue .transformSelect span, .select-blue .transformSelect input[type=text] {
  border: 1px solid #7fb4cf;
}
.select-blue .transformSelect > li > span:after, .select-blue .transformSelect input[type=text]:after {
  background-color: #28a5e5;
}

.select-green .transformSelect span, .select-green .transformSelect input[type=text] {
  border: 1px solid #bababa;
}
.select-green .transformSelect > li > span:after, .select-green .transformSelect input[type=text]:after {
  background-color: #009d98;
}

/*-------- scroll處理 ----------*/
.menu-scroll, .pop-scroll {
  overflow: hidden;
}
.menu-scroll > .ui-page, .pop-scroll > .ui-page {
  min-height: 0 !important;
  height: 100%;
}
.menu-scroll > .ui-page #panelMenu, .pop-scroll > .ui-page #panelMenu {
  overflow: hidden;
  height: 100%;
}
.menu-scroll > .ui-page .sidebar, .pop-scroll > .ui-page .sidebar {
  overflow-y: auto;
  height: 100%;
  width: 310px;
}
.menu-scroll > .ui-page .ui-panel-wrapper, .pop-scroll > .ui-page .ui-panel-wrapper {
  height: 100%;
  overflow: hidden;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */
/* Prevent callout */
.nocallout {
  -webkit-touch-callout: none;
}

.pressed {
  background-color: rgba(0, 0, 0, 0.7);
}

/* A hack for HTML5 contenteditable attribute on mobile */
textarea[contenteditable] {
  -webkit-appearance: none;
}

/* A workaround for S60 3.x and 5.0 devices which do not animated gif images if
   they have been set as display: none */
.gifhidden {
  position: absolute;
  left: -100%;
}

/*
 * Image replacement
 */
.ir {
  background-color: transparent;
  background-repeat: no-repeat;
  border: 0;
  direction: ltr;
  display: block;
  overflow: hidden;
  text-align: left;
  text-indent: -999em;
}

.ir br {
  display: none;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */
.hidden {
  display: none !important;
  visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */
.invisible {
  visibility: hidden;
}

.clear {
  clear: both;
  /*text-align: center;*/
  margin: 0 auto;
}

/**
 * Clearfix helper
 * Used to contain floats: h5bp.com/q
 */
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
@media only screen and (min-width: 800px) {
  /* Style adjustments for viewports that meet the condition */
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {
  /* Style adjustments for viewports that meet the condition */
}
/*ESI補充之css*/
.blueTxt {
    color: #007799;
}

.BlueTxt {
    color: #24a9ee;
}
.disc {
    margin-left: 15px;
}

.disc > li:before {
        content: '\2022';
        color: #009d99;
        margin-left: -14px;
        float: left;
    }

.bxslider .bx-tab-pager {
    width: 100%;
    text-align: center;
    margin: 0 auto 12px auto;
    padding-top: 7px;
}

.bxslider .bx-tab-pager li {
        float: left;
        display: block;
    }

.bxslider .bx-tab-pager li a {
            display: block;
            color: #666;
            font-size: 16px;
            line-height: 24px;
            padding-bottom: 4px;
            border-bottom: 2px solid #e3e3e3;
            outline: none;
            cursor: pointer;
        }

.bxslider .bx-tab-pager li a.active {
                border-color: #009d99;
            }

.bxslider .bx-tab-pager.row-2 li {
        width: 50%;
    }

.bxslider .bx-tab-pager.row-3 li {
        width: 33.333%;
    }

.bxslider .bx-tab-pager.row-4 li {
        width: 25%;
    }

.bxslider .bx-tab-pager.row-5 li {
        width: 20%;
    }

.bxslider .bx-wrapper .bx-pager {
    padding-bottom: 0px;
}

.bxslider .bx-tab-control {
    text-align: center;
}

.bxslider .bx-tab-control ul {
        margin: 0 auto;
        text-align: center;
        padding-bottom: 8px;
    }

.bxslider .bx-tab-control li {
        display: inline-block;
    }

.bxslider .bx-tab-control li a {
            display: block;
            background-color: #666;
            width: 10px;
            height: 10px;
            margin: 0 2px;
            outline: 0;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            -o-border-radius: 5px;
            border-radius: 5px;
        }

.bxslider .bx-tab-control li a.active {
                background-color: #009d99;
            }

.bxslider .bx-tab-container.js-nocontrol li {
    padding-bottom: 8px;
}

.bx-wrapper {
    position: relative;
    margin: 0 auto;
    padding: 0;
    *zoom: 1;
}

.bx-wrapper img {
        max-width: 100%;
        width: 100%;
        display: block;
    }

    /** THEME
===================================*/
.bx-wrapper .bx-viewport {
        /*-moz-box-shadow: 0 0 5px #ccc;
	-webkit-box-shadow: 0 0 5px #ccc;
	box-shadow: 0 0 5px #ccc;
	border:  5px solid #fff;
	left: -5px;*/
        background: #fff;
        /*fix other elements on the page moving (on Chrome)*/
        -webkit-transform: translatez(0);
        -moz-transform: translatez(0);
        -ms-transform: translatez(0);
        -o-transform: translatez(0);
        transform: translatez(0);
    }

.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
        position: absolute;
        bottom: 0px;
        width: 100%;
    }

/* LOADER */
.bx-wrapper .bx-loading {
        min-height: 50px;
        background: url(/bank/images/esunbank_m2/bxslider/bx_loader.gif) center center no-repeat #fff;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2000;
    }

/* PAGER */
.bx-wrapper .bx-pager {
        text-align: center;
        font-size: .85em;
        font-family: Arial;
        font-weight: bold;
        color: #666;
        padding-top: 20px;
    }

.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
            display: inline-block;
            *zoom: 1;
            *display: inline;
        }

.bx-wrapper .bx-pager.bx-default-pager a {
            background-color: #666;
            text-indent: -9999px;
            display: block;
            width: 10px;
            height: 10px;
            margin: 0 5px;
            outline: 0;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
        }

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
                background-color: #009d99;
            }

/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev {
        left: 10px;
        background: url(/bank/images/esunbank_m2/bxslider/controls.png) no-repeat 0 -32px;
    }

.bx-wrapper .bx-next {
        right: 10px;
        background: url(/bank/images/esunbank_m2/bxslider/controls.png) no-repeat -43px -32px;
    }

.bx-wrapper .bx-prev:hover {
        background-position: 0 0;
    }

.bx-wrapper .bx-next:hover {
        background-position: -43px 0;
    }

.bx-wrapper .bx-controls-direction a {
        position: absolute;
        margin-top: -16px;
        outline: 0;
        width: 32px;
        height: 32px;
        text-indent: -9999px;
        z-index: 9999;
        display: none;
        /*暫時隱藏箭頭*/
    }

.bx-wrapper .bx-controls-direction a.disabled {
            display: none;
        }

/* AUTO CONTROLS (START / STOP) */
.bx-wrapper .bx-controls-auto {
        text-align: center;
    }

.bx-wrapper .bx-controls-auto .bx-start {
            display: block;
            text-indent: -9999px;
            width: 10px;
            height: 11px;
            outline: 0;
            background: url(/bank/images/esunbank_m2/bxslider/controls.png) -86px -11px no-repeat;
            margin: 0 3px;
        }

.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active {
                background-position: -86px 0;
            }

.bx-wrapper .bx-controls-auto .bx-stop {
            display: block;
            text-indent: -9999px;
            width: 9px;
            height: 11px;
            outline: 0;
            background: url(/bank/images/esunbank_m2/bxslider/controls.png) -86px -44px no-repeat;
            margin: 0 3px;
        }

.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active {
                background-position: -86px -33px;
            }

/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
        text-align: left;
        width: 80%;
    }

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
        right: 0;
        width: 35px;
    }

/* IMAGE CAPTIONS */
.bx-wrapper .bx-caption {
        position: absolute;
        bottom: 0;
        left: 0;
        background: #666\9;
        background: rgba(80, 80, 80, 0.75);
        width: 100%;
    }

.bx-wrapper .bx-caption span {
            color: #fff;
            font-family: Arial;
            display: block;
            font-size: .85em;
            padding: 10px;
        }