/*
 * 程式版本異動記錄
 * =======================
 * 2024/08/07：SDLCSR-8531（SDLCSR-8402）
 *
 */

.clearfix {
  zoom: 1;
}
.clearfix:before {
  content: "";
  display: table;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/*
 * Retina Backgrounds for Compass
 * by:              Gaya Kessler
 * last update:     03/11/14
 *
 * Usage:
 * 1. create background image for pixel ratio 1 screens and put it somewhere in your images folder.
 * 2. create background image for pixel ratio 2 screens and put it somewhere in your images folder.
 * 3. include the background-image property in your Sass/Scss using: '@include background-retina(<ratio-1-imagefile>, <ratio-2-imagefile>)'
 */
.page-login .page-banner {
  height: 250px;
  padding: 56px 0 60px 60px;
  background-image: url('../img/login/page-banner-personal.jpg?1500626336');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover !important;
  background-position: center;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .page-login .page-banner {
    background-image: url('../img/login/page-banner-personal@2x.jpg?1500626324');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 640px 160px;
  }
}
.page-login .page-banner h1 {
  font-size: 36px;
}
.page-login.login-business .page-banner {
  background-image: url('../img/login/page-banner-group.jpg?1499845440');
  background-repeat: no-repeat;
  background-position: center;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .page-login.login-business .page-banner {
    background-image: url('../img/login/page-banner-group@2x.jpg?1499312091');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1280px 320px;
  }
}
.page-login .page-content {
  padding-top: 10px;
  background: var(--bg-white);
}
.page-login .page-content .icon-qr-code-android {
  margin: 0 auto;
  display: block;
  height: 147px;
  width: 147px;
  background-image: url('../img/login/qr-code-android.png?1494837281');
  background-repeat: no-repeat;
  background-position: center;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .page-login .page-content .icon-qr-code-android {
    background-image: url('../img/login/qr-code-android@2x.png?1494837281');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 147px 147px;
  }
}
.page-login .page-content .icon-qr-code-ios {
  margin: 0 auto;
  display: block;
  height: 135px;
  width: 135px;
  background-image: url('../img/login/qr-code-ios.png?1494837311');
  background-repeat: no-repeat;
  background-position: center;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .page-login .page-content .icon-qr-code-ios {
    background-image: url('../img/login/qr-code-ios@2x.png?1494837311');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 135px 135px;
  }
}
.page-login .page-content .content-wrap {
  margin-top: -145px;
}
.page-login .page-content .left-section,
.page-login .page-content .right-section {
  min-height: 620px;
  -webkit-box-shadow: 0 0px 6px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0px 6px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0px 6px 0px rgba(0, 0, 0, 0.2);
}
.page-login .page-content .left-section {
  padding: 30px 20px;
  -webkit-border-radius: 4px 0 0 4px;
  -moz-border-radius: 4px 0 0 4px;
  border-radius: 4px 0 0 4px;
  background-clip: padding-box;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U2MDEyYyIgc3RvcC1vcGFjaXR5PSIwLjg0Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZjE2NTFhIiBzdG9wLW9wYWNpdHk9IjAuODQiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(230, 41, 120, 0.84)), color-stop(100%, rgba(0, 161, 155, 0.84)));
  background-image: -moz-linear-gradient(left, rgba(230, 41, 120, 0.84), rgba(0, 161, 155, 0.84));
  background-image: -webkit-linear-gradient(left, rgba(230, 41, 120, 0.84), rgba(0, 161, 155, 0.84));
  background-image: linear-gradient(to right, rgba(230, 41, 120, 0.84), rgba(0, 161, 155, 0.84));
}
.page-login .page-content .left-section .icon {
  margin-bottom: 30px;
}
.page-login .page-content .left-section .border-bottom {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.page-login .page-content .left-section .desc {
  margin: 0 15px;
}
.page-login .page-content .left-section .desc p {
  line-height: 2;
}
.page-login .page-content .left-section .desc .btn-white:hover {
  font-weight: 600 !important;
}
.page-login .page-content .left-section .btn {
  margin: 0 10px;
}
.page-login .page-content .left-section .btn-auto-width {
  padding-left: 10px;
  padding-right: 10px;
}
.page-login .page-content .right-section {
  padding: 30px 20px;
  background: var(--bg-white);
  -webkit-border-radius: 0 4px 4px 0;
  -moz-border-radius: 0 4px 4px 0;
  border-radius: 0 4px 4px 0;
  background-clip: padding-box;
}
.page-login .page-content .right-section h2 {
  margin-bottom: 20px;
}
.page-login .page-content .right-section .desc {
  margin-top: 20px;
}
.page-login .page-content .right-section .desc p {
  margin-bottom: 0;
  color: var(--text-body);
}
.page-login .page-content .right-section .desc p:first-child {
  margin-bottom: 20px;
  color: var(--text-aux);
}
.page-login .page-content .captcha-group {
  width: 100%;
}
.page-login .page-content .captcha-group .input-group {
  width: 100%;
}
.page-login .page-content .captcha-group .input-group input {
  width: 60%;
  -webkit-border-radius: 4px 0 0 4px;
  -moz-border-radius: 4px 0 0 4px;
  border-radius: 4px 0 0 4px;
  background-clip: padding-box;
}
.page-login .page-content .captcha-group .captcha {
  width: 40%;
  height: 41px;
  line-height: 40px;
  display: inline-block;
  text-align: center;
  color: var(--bg-white);
  background: var(--text-secondary);
  -webkit-border-radius: 0 4px 4px 0;
  -moz-border-radius: 0 4px 4px 0;
  border-radius: 0 4px 4px 0;
  background-clip: padding-box;
}
.page-login .page-content .login-bottom-panel {
  margin-top: 30px;
  font-size: 18px;
  color: var(--text-body);
  background: var(--bg-white);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background-clip: padding-box;
  -webkit-box-shadow: 0 0px 6px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0px 6px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0px 6px 0px rgba(0, 0, 0, 0.2);
}
.page-login .page-content .login-bottom-panel > div {
  padding: 20px;
}
.page-login .page-content .login-bottom-panel .highlight {
  margin: 0 5px;
  font-size: 26px;
}
.page-login .page-content .login-bottom-panel .see-more-trigger i {
  margin-top: 10px;
  margin-right: 20px;
}
.page-login .page-content .login-bottom-panel .see-more-trigger .icon-arrow-up-orange.closed {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.page-login .page-content .login-bottom-panel .see-more-target {
  padding: 0;
}
.page-login .page-content .login-bottom-panel .see-more-target .list {
  padding: 20px;
  font-size: 15px;
  color: var(--text-body);
  background: var(--bg-brand-mid);
  border-bottom: 1px solid var(--border-light);
}
.page-login .page-content .login-bottom-panel .see-more-target .list:first-child {
  border-top: 1px solid var(--border-default);
}
.page-login .page-content .qr-code {
  margin-top: 20px;
  margin-bottom: 20px;
}
.page-login .page-content .qr-code .qr-code-img img {
  margin-bottom: 10px;
  border: 1px solid var(--border-default);
  width: 135px;
}
.page-login .panel.panel-default.final {
  background: var(--bg-subtle);
  border: 1px solid var(--border-default);
  padding: 60px 20px 46px;
  text-align: center;
}
.page-login .panel.panel-default.final .icon {
  margin-bottom: 40px;
}
.page-login .panel.panel-default.final .content {
  padding-top: 28px;
  margin-bottom: 30px;
  background: none;
}
.page-login.login-index .content {
  background: var(--bg-muted);
}
.page-login.login-index .page-content {
  background: var(--bg-muted);
}
.page-login.login-index .main-content {
  margin-top: -160px;
}
.page-login.has-tabs .page-content .right-section {
  padding: 0;
}
.page-login.has-tabs .page-content .nav-tabs {
  border-bottom: 3px solid var(--border-light);
}
.page-login.has-tabs .page-content .nav-tabs > li {
  width: 50%;
}
.page-login.has-tabs .page-content .nav-tabs > li > a {
  padding: 10px 0;
  line-height: 38px;
  color: var(--text-aux);
  font-size: 20px;
  text-align: center;
}
.page-login.has-tabs .page-content .nav-tabs > li:first-child a {
  border-right: 1px solid var(--border-default);
}
.page-login.has-tabs .page-content .nav-tabs > li:hover a, .page-login.has-tabs .page-content .nav-tabs > li:focus a {
  border-bottom: 0;
}
.page-login.has-tabs .page-content .nav-tabs > li.active a {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-primary);
  border-bottom: 0;
}
.page-login.has-tabs .page-content .nav-tabs > li.active a:after {
  content: "";
  height: 2px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -1px;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U2MDEyYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2YyNjQxOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, var(--color-secondary-dark)), color-stop(100%, var(--color-primary-light)));
  background-image: -moz-linear-gradient(left, var(--color-secondary-dark), var(--color-primary-light));
  background-image: -webkit-linear-gradient(left, var(--color-secondary-dark), var(--color-primary-light));
  background-image: linear-gradient(to right, var(--color-secondary-dark), var(--color-primary-light));
}
.page-login.has-tabs .page-content .tab-content {
  padding: 30px 20px;
}
.page-login.login-company .page-banner {
  background-image: url('../img/login/page-banner-company.jpg?1499845583');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover !important;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .page-login.login-company .page-banner {
    background-image: url('../img/login/page-banner-company@2x.jpg?1499313837');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1280px 320px;
  }
}
.page-login.login-bank .page-banner {
  background-image: url('../img/login/page-banner-bank.jpg?1499768180');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover !important;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .page-login.login-bank .page-banner {
    background-image: url('../img/login/page-banner-bank@2x.jpg?1499313923');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1280px 320px;
  }
}
.page-login.login-group .page-banner {
  background-image: url('../img/login/page-banner-group.jpg?1499845440');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover !important;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .page-login.login-group .page-banner {
    background-image: url('../img/login/page-banner-group@2x.jpg?1499312091');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1280px 320px;
  }
}

@media (max-width: 992px) {
  .page-login .page-content .content-wrap {
    margin-top: -120px;
  }
  .page-login .page-content .left-section,
  .page-login .page-content .right-section {
    min-height: auto;
  }
}

@media (max-width: 991px) {
  .m-container-fluid, .xs-full {
    padding-left: 0;
    padding-right: 0;
  }
  .page-login .page-banner {
    height: 140px !important;
    padding-left: 0;
    background-position: center;
  }
  .page-login .page-banner h1 {
    font-size: 30px;
  }
  .page-login .page-content .login-bottom-panel .see-more-target .list > div {
    padding: 0;
    text-align: left !important;
  }
  .page-login .page-content .qr-code {
    margin-top: 0;
  }
  .page-login .notice-list-xs {
    margin-top: 30px;
    border-top: 1px solid var(--border-default);
  }
  .page-login .notice-list-xs .list {
    padding: 15px 0;
    border-bottom: 1px solid var(--border-default);
  }
  .page-login .notice-list-xs .list > a {
    display: block;
  }
  .page-login .notice-list-xs .list > a:hover, .page-login .notice-list-xs .list > a:focus {
    text-decoration: none;
  }
  .page-login .notice-list-xs .list:last-child {
    border-bottom: 0;
  }
  .page-login .panel.panel-default.final {
    padding: 30px 20px 20px;
  }
  .page-login .panel.panel-default.final .content {
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .page-login.login-index .content {
    background: var(--bg-white);
  }
  .page-login.login-index .page-content {
    padding-bottom: 20px;
    background: var(--bg-white);
  }
  .page-login.login-index .page-content .left-section {
    margin-top: -150px;
    padding: 5px 10px 5px;
    text-align: center;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    background-clip: padding-box;
  }
  .page-login.login-index .page-content .left-section .icon {
    margin-top: 5px;
    margin-bottom: 5px;
  }
  .page-login.login-index .page-content .left-section .border-bottom {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .page-login.login-index .page-content .left-section .desc {
    display: none;
  }
  .page-login.login-index .page-content .right-section {
    padding-bottom: 20px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    background-clip: padding-box;
    -webkit-box-shadow: 0 0px 0px 0px transparent;
    -moz-box-shadow: 0 0px 0px 0px transparent;
    box-shadow: 0 0px 0px 0px transparent;
  }
  .page-login.login-index .main-content {
    margin-top: 0;
  }
  .page-login.has-tabs .page-content .nav-tabs > li > a {
    line-height: normal;
  }
}
/* ----------- iPhone 5 and 5S ----------- */
/* Portrait and Landscape */
/* Portrait */
/* Landscape */
/* ----------- iPhone 6 ----------- */
/* Portrait and Landscape */
/* Portrait */
/* Landscape */
/* ----------- iPhone 6+ ----------- */
/* Portrait and Landscape */
/* Portrait */
/* Landscape */
/* ----------- iPad mini ----------- */
/* Portrait and Landscape */
/* Portrait */
/* Landscape */
/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
  .page-login .page-banner {
    height: 240px;
  }
  .page-login.login-index .page-content .container {
    width: auto;
  }
  .page-login.login-index .page-content .left-section {
    /*margin-top: -250px;*/
  }
}
/* Portrait */
/* Landscape */
/* ----------- iPad pro ----------- */
/* Portrait and Landscape */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 1.5) {
  .page-login.login-index .page-content .container {
    width: auto;
  }
  .page-login.login-index .page-content .left-section {
    margin-top: 0;
  }
}
/* Portrait */
/* Landscape */
/* ----------- Apple Watch ----------- */