/*! Fri Sep 07 2018 | www.citibank.com.tw | www.citibank.com.tw is a company website design by Wunderman. | Shimin */
/*! 注意!此份檔案有Source檔, 如欲修改請詢問前端Source檔案, 或告知詳細修改細項, 切勿在未告知下自行修改。
    This file had Source file, Please contact Front-End to get the Source or inform them what you do before edit this file, Don't just edit it by yourself. */

.top-banner {
  position: relative;
  width: 100%;
  height: 120px;
  color: #004785;
  padding: 5px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-image: -webkit-linear-gradient(left, #0c5a9e 0, #004785 100%);
  background-image: -o-linear-gradient(left, #0c5a9e 0, #004785 100%);
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#0c5a9e),
    to(#004785)
  );
  background-image: -moz-linear-gradient(left, #0c5a9e 0, #004785 100%);
  background-image: linear-gradient(to right, #0c5a9e 0, #004785 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0C5A9E', endColorstr='#FF004785', GradientType=1);
}
.top-banner:after,
.top-banner:before {
  width: 60%;
  background-repeat: no-repeat;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0C5A9E', endColorstr='#FF004785', GradientType=1);
}
@media (min-width: 768px) {
  .top-banner {
    height: 90px;
  }
}
.top-banner * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.top-banner .visible-sm {
  display: none !important;
}
@media (min-width: 768px) and (max-width: 991px) {
  .top-banner .visible-sm {
    display: block !important;
  }
}
@media (min-width: 992px) {
  .top-banner .visible-md {
    display: block !important;
  }
}
.top-banner .visible-sm-inline-block {
  display: none !important;
}
@media (min-width: 768px) and (max-width: 991px) {
  .top-banner .visible-sm-inline-block {
    display: inline-block !important;
  }
}
.top-banner .visible-xs {
  display: none !important;
}

@media (max-width: 767px) {
  .top-banner .visible-xs {
    display: block !important;
    margin: 0 auto;
  }
}
.top-banner .visible-xs-inline-block {
  display: none !important;
}
@media (max-width: 767px) {
  .top-banner .visible-xs-inline-block {
    display: inline-block !important;
    margin-bottom: 5px;
  }
  .top-banner .hidden-xs {
    display: none !important;
  }
  .mbstyle{
    padding-left: 20px!important;
    padding-left: 15px!important;
    padding-right: 20px!important;
    background: #eaeaea;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .top-banner .hidden-sm {
    display: none !important;
  }
}
.top-banner:after,
.top-banner:before {
  content: "";
  position: absolute;
  height: 5px;
}
.top-banner:before {
  top: 0;
  left: 0;
  background-image: -webkit-linear-gradient(
    left,
    #0c5a9e,
    #01baf0 40%,
    #004785
  );
  background-image: -o-linear-gradient(left, #0c5a9e, #01baf0 40%, #004785);
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#0c5a9e),
    color-stop(40%, #01baf0),
    color-stop(40%, #004785)
  );
  background-image: -moz-linear-gradient(left, #0c5a9e, #01baf0 40%, #004785);
  background-image: linear-gradient(to right, #0c5a9e, #01baf0 40%, #004785);
}
.top-banner:after {
  bottom: 0;
  right: 0;
  background-image: -webkit-linear-gradient(
    left,
    #0c5a9e,
    #01baf0 40%,
    #004785
  );
  background-image: -o-linear-gradient(left, #0c5a9e, #01baf0 40%, #004785);
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#0c5a9e),
    color-stop(40%, #01baf0),
    color-stop(40%, #004785)
  );
  background-image: -moz-linear-gradient(left, #0c5a9e, #01baf0 40%, #004785);
  background-image: linear-gradient(to right, #0c5a9e, #01baf0 40%, #004785);
}
.top-banner .row {
  margin-left: -15px;
  margin-right: -15px;
}
.top-banner .row:after,
.top-banner .row:before {
  content: " ";
  display: table;
}
.top-banner .row:after {
  clear: both;
}
.top-banner .row--table {
  display: table;
  table-layout: fixed;
  margin: 0;
}
.top-banner .row--table:after,
.top-banner .row--table:before {
  display: none;
}
.top-banner .row--table > [class^="col-"] {
  display: table-cell;
  float: none;
}
.top-banner .row--10 {
  margin-left: -10px;
  margin-right: -10px;
}
.top-banner .row--10 > [class^="col-"] {
  padding: 0 10px;
}
.top-banner .col-xs-1,
.top-banner .col-xs-10,
.top-banner .col-xs-11,
.top-banner .col-xs-12,
.top-banner .col-xs-2,
.top-banner .col-xs-3,
.top-banner .col-xs-4,
.top-banner .col-xs-5,
.top-banner .col-xs-7,
.top-banner .col-xs-8,
.top-banner .col-xs-9 {
  position: relative;
  float: left;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
.top-banner .col-xs-1 {
  width: 8.33333%;
}
.top-banner .col-xs-2 {
  width: 16.66667%;
}
.top-banner .col-xs-3 {
  width: 25%;
}
.top-banner .col-xs-4 {
  width: 33.33333%;
}
.top-banner .col-xs-5 {
  width: 41.66667%;
}
.top-banner .col-xs-6 {
  position: relative;
  float: left;
  width: 50%;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
.top-banner .col-xs-7 {
  width: 58.33333%;
}
.top-banner .col-xs-8 {
  width: 66.66667%;
}
.top-banner .col-xs-9 {
  width: 75%;
}
.top-banner .col-xs-10 {
  width: 83.33333%;
}
.top-banner .col-xs-11 {
  width: 91.66667%;
}
.top-banner .col-xs-12 {
  width: 100%;
}
@media (min-width: 768px) {
  .top-banner .col-sm-1,
  .top-banner .col-sm-10,
  .top-banner .col-sm-11,
  .top-banner .col-sm-12,
  .top-banner .col-sm-2,
  .top-banner .col-sm-3,
  .top-banner .col-sm-4,
  .top-banner .col-sm-5,
  .top-banner .col-sm-6,
  .top-banner .col-sm-7,
  .top-banner .col-sm-8,
  .top-banner .col-sm-9 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
  }
  .banner_btn {
    display: block;
    float: right;
    /* margin-top: 25px; */
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .top-banner .col-sm-1 {
    float: left;
    width: 8.33333%;
  }
  .top-banner .col-sm-2 {
    float: left;
    width: 16.66667%;
  }
  .top-banner .col-sm-3 {
    float: left;
    width: 25%;
  }
  .top-banner .col-sm-4 {
    float: left;
    width: 33.33333%;
  }
  .top-banner .col-sm-5 {
    float: left;
    width: 41.66667%;
  }
  .top-banner .col-sm-6 {
    float: left;
    width: 50%;
  }
  .top-banner .col-sm-7 {
    float: left;
    width: 58.33333%;
  }
  .top-banner .col-sm-8 {
    float: left;
    width: 66.66667%;
  }
  .top-banner .col-sm-9 {
    float: left;
    width: 75%;
  }
  .top-banner .col-sm-10 {
    float: left;
    width: 83.33333%;
  }
  .top-banner .col-sm-11 {
    float: left;
    width: 91.66667%;
  }
  .top-banner .col-sm-12 {
    float: left;
    width: 100%;
  }
}
@media (min-width: 992px) {
  .top-banner .col-md-1,
  .top-banner .col-md-10,
  .top-banner .col-md-11,
  .top-banner .col-md-12,
  .top-banner .col-md-2,
  .top-banner .col-md-3,
  .top-banner .col-md-4,
  .top-banner .col-md-5,
  .top-banner .col-md-6,
  .top-banner .col-md-7,
  .top-banner .col-md-8,
  .top-banner .col-md-9 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (min-width: 992px) and (min-width: 992px) {
  .top-banner .col-md-1 {
    float: left;
    width: 8.33333%;
  }
  .top-banner .col-md-2 {
    float: left;
    width: 16.66667%;
  }
  .top-banner .col-md-3 {
    float: left;
    width: 25%;
  }
  .top-banner .col-md-4 {
    float: left;
    width: 33.33333%;
  }
  .top-banner .col-md-5 {
    float: left;
    width: 41.66667%;
  }
  .top-banner .col-md-6 {
    float: left;
    width: 50%;
  }
  .top-banner .col-md-7 {
    float: left;
    width: 58.33333%;
  }
  .top-banner .col-md-8 {
    float: left;
    width: 66.66667%;
  }
  .top-banner .col-md-9 {
    float: left;
    width: 75%;
  }
  .top-banner .col-md-10 {
    float: left;
    width: 83.33333%;
  }
  .top-banner .col-md-11 {
    float: left;
    width: 91.66667%;
  }
  .top-banner .col-md-12 {
    float: left;
    width: 100%;
  }
}
@media (min-width: 1024px) {
  .top-banner .col-lg-1,
  .top-banner .col-lg-10,
  .top-banner .col-lg-11,
  .top-banner .col-lg-12,
  .top-banner .col-lg-2,
  .top-banner .col-lg-3,
  .top-banner .col-lg-4,
  .top-banner .col-lg-5,
  .top-banner .col-lg-6,
  .top-banner .col-lg-7,
  .top-banner .col-lg-8,
  .top-banner .col-lg-9 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (min-width: 1024px) and (min-width: 1200px) {
  .top-banner .col-lg-1 {
    float: left;
    width: 8.33333%;
  }
  .top-banner .col-lg-2 {
    float: left;
    width: 16.66667%;
  }
  .top-banner .col-lg-3 {
    float: left;
    width: 25%;
  }
  .top-banner .col-lg-4 {
    float: left;
    width: 33.33333%;
  }
  .top-banner .col-lg-5 {
    float: left;
    width: 41.66667%;
  }
  .top-banner .col-lg-6 {
    float: left;
    width: 50%;
  }
  .top-banner .col-lg-7 {
    float: left;
    width: 58.33333%;
  }
  .top-banner .col-lg-8 {
    float: left;
    width: 66.66667%;
  }
  .top-banner .col-lg-9 {
    float: left;
    width: 75%;
  }
  .top-banner .col-lg-10 {
    float: left;
    width: 83.33333%;
  }
  .top-banner .col-lg-11 {
    float: left;
    width: 91.66667%;
  }
  .top-banner .col-lg-12 {
    float: left;
    width: 100%;
  }
}
.top-banner .top-banner__wrapper {
  height: 100%;
  background-image: -webkit-linear-gradient(top, #fff 0, #ddd 300%);
  background-image: -o-linear-gradient(top, #fff 0, #ddd 300%);
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#fff),
    color-stop(300%, #ddd)
  );
  background-image: -moz-linear-gradient(top, #fff 0, #ddd 300%);
  background-image: linear-gradient(to bottom, #fff 0, #ddd 300%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFDDDDDD', GradientType=0);
  font-size: 14px;
}
.top-banner .top-banner__wrapper > .row,
.top-banner .top-banner__wrapper > .row > * {
  height: 100%;
}
.top-banner .top-banner__wrapper__close {
  cursor: pointer;
  z-index: 1;
  position: absolute;
  top: 10px;
  right: 10px;
}
.top-banner .top-banner__wrapper__inner {
  width: 100%;
  height: 100%;
}
.top-banner .top-banner__wrapper__inner > * {
  height: 100%;
  vertical-align: middle;
  padding-left: 0;
  padding-right: 0;
  width: auto;
}
.top-banner .top-banner__wrapper__inner .col-xs-2 {
  width: 75px;
  padding-left: 8px;
}
@media screen and (min-width: 360px) {
  .top-banner .top-banner__wrapper__inner .col-xs-2 {
    padding: 5px 10px 0px;
    width: 120px;
    text-align: center;
  }
}
@media (min-width: 768px) {
  .top-banner .top-banner__wrapper__inner .col-xs-2 {
    padding-left: 15px;
    width: 25%;
  }
}
/* @media (min-width: 992px) {
  .top-banner .top-banner__wrapper__inner .col-xs-2 {
    padding-left: 30px;
    width: 17%;
  }
} */
.top-banner .top-banner__wrapper__inner--qrcode {
  padding-left: 0;
  width: 100%;
}
.top-banner .top-banner__wrapper__inner--qrcode img {
  display: block;
}
@media (min-width: 768px) {
  .top-banner .top-banner__wrapper__inner--qrcode .col-xs-2 {
    width: 45%;
    padding-left: 6px;
  }
}
@media (min-width: 992px) {
  .top-banner .top-banner__wrapper__inner--qrcode .col-xs-2 {
    position: relative;
    padding-left: 15px;
    width: 40%;
  }
}
.top-banner .top-banner__wrapper span.gd-line {
  position: absolute;
  left: 0;
  top: 10%;
  background-image: url(/sim/zh-tw/images/top-banner/gd-line.png);
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 80%;
  width: 2px;
}
.top-banner .top-banner__wrapper__title {
  margin-top: 0px;
  line-height: 160%;
  font-size: 14px;
  display: inline-block;
}
.top-banner .top-banner__wrapper__qrtitle {
  font-size: 14px;
}
.top-banner__txt {
  display: inline-block;
  padding: 0 2px;
  color: #004875;
  text-decoration: underline;
  font-size: 14px;
}
.openCardLink {
  padding: 0 15px;
}
@media (min-width: 768px) {
  .top-banner__txt {
    margin-top: -23px;
  }
}