@charset "UTF-8";
@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 400;
  src: url("https://www.yuantabank.com.tw/bankwebIMG/event/fonts/NotoSansTC-Regular.otf") format("opentype");
  font-display: swap; }

@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 500;
  src: url("https://www.yuantabank.com.tw/bankwebIMG/event/fonts/NotoSansTC-Medium.otf") format("opentype");
  font-display: swap; }

@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 700;
  src: url("https://www.yuantabank.com.tw/bankwebIMG/event/fonts/NotoSansTC-Bold.otf") format("opentype");
  font-display: swap; }

/* ------------------------------- main ------------------------------- */
* {margin: 0; padding: 0;/* box-sizing: border-box; */}
body{width: 100%; height: 100%; font-family: 'Noto Sans TC','微軟正黑體', 'MS UI Gothic',Arial, Helvetica, sans-serif; font-size: 12px; }
table{width: 100%; border-collapse: collapse; border-spacing: 0;}
table,tr,th,td{margin: 0; padding: 0;}
img{margin: 0; padding: 0; display: block;}

.main{width: 100%; max-width: 1920px; margin: 0 auto; overflow: hidden; color: #303035; padding-top: 80px; font-size: 12px; background: #6281D2;}
.section{width: 100%; max-width: 1920px; margin: 0 auto;}
/* kv */
.kv_container{width: 100%; margin: 0 auto; background: #FFEFE7 url("../images/kv_bg.png") center top no-repeat; background-size: cover;}
.kv{width: 100%; max-width: 1920px; height: 560px; margin: 0 auto; position: relative;}
.kv .kv_tit{width: 27%; position: absolute; top: 17%; left: 22%; animation-duration: 1.5s;}
.kv .arrow1{width: 100px; position: absolute; top: 62%; left: 15%;
      -webkit-animation: coin 2s ease-in-out infinite alternate;
              animation: coin 2s ease-in-out infinite alternate;}
.kv .arrow2{width: 80px; position: absolute; top: 25%; right: 25%;
      -webkit-animation: coin 2s ease-in-out infinite alternate-reverse;
              animation: coin 2s ease-in-out infinite alternate-reverse;}
/* content */
.content_container{width: 100%; margin: 0 auto; color: #333333;}
.content{width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 6%; background: #6281D2;}
/* info */
.info{width: 100%; margin: 0 auto; position: relative;}
.info-wrap{text-align: center; gap: 30px; padding: 30px; border-radius: 15px; background: #FFFFFF;margin: 3% 3%;}
.info-item{min-width: 300px; padding: 7px 0; text-align: center; margin-bottom:20px;}
.info-line{width: 1px; background: #EEF2FF;}
.info-title{display: inline-block; width: 200px; font-size: 20px; font-weight: 700; line-height: 2; color: #FFF; border-radius: 20px; background-color: #6281D2;}
.info-text{margin-top: 10px; font-size: 20px; line-height: 1.8;}
.add-txts{margin: 1% 1% 2%; font-size: 14px; line-height: 1.4;color: #005ec4; font-weight: 500;}
.info-txts ol {margin: 0; padding-left: 18px; list-style-type: decimal; padding-left: 24px;}
.info-note{display: inline-block; font-size: 16px; line-height: 1.8; color: #333333;margin: 0 auto;}
/* form */
.rate-header {
 border-radius: 20px 20px 0px 0px
}
.rate-item {
  padding: 20px 10px;
  text-align: center; /* 圖二：文字水平置中 */
  border-bottom: 1px solid #eee;
  display: flex;
  flex-direction: column; /* 圖二：垂直堆疊 */
}

.rate-item:last-child { border-bottom: none; }
.range {
  color: #333;
  font-size: 1.1rem;
}

.value {
  color: #333;
  font-size: 1rem;
}
.stext{font-size: 30px;}

.percent {
  color: #ff4d4f; /* 圖二：鮮艷紅色 */
  font-weight: bold;
  font-size: 1.6rem; /* 放大加碼數值 */
}
.cta-area{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  text-align: center;
  margin: 3% 5% 5%;
}
.cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #3552A7; /* 圖片紅色的近似值 */
  color: #ffffff;
  padding: 1% 5%;
  text-decoration: none;
  border-radius: 10px; 
  font-size: 20px;
  letter-spacing: 3px;
  transition: background-color 0.3s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  margin: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
  border-radius: 40px ;
  border: 2px solid #ffffff;
}
/* 滑鼠移入效果 */
.cta:hover {
  background-color: #fa4364; /* 圖片紅色的近似值 */
  cursor: pointer;
  transform: scale(1.05) translateY(-3px);
}
.arrow {
    /* 箭頭基礎樣式 */
    display: inline-block;
    margin-left: 5px; /* 與文字的間距 */
    transition: transform 0.3s ease-out; /* 動畫過渡 */
}
.cta:hover .arrow {
    /* 鼠標懸停時箭頭的變化 */
    transform: translateX(6px); /* 放大並向右移動 */
}
@media screen and (max-width:600px) {
  .cta:hover {
    background-color: #3552A7;
    cursor: default;
    transform: none;
  }
  .cta:hover .arrow {
    transform: none;
  }
}

/* block-action */
.block-action{display: flex; align-items: center; justify-content: center; gap: 20px 50px; padding-bottom: 6%;}
.btn{display: flex; align-items: center; justify-content: center; gap: 10px; width: 220px; height: 60px; font-size: 22px; font-weight: 700; line-height: 1; color: #FFF; border-radius: 10px; background-color: #F24541; text-decoration: none; cursor: pointer; }
.btn img{flex: 0 0 auto; width: 22px; }
.btn span{flex: 0 0 auto; padding-bottom: 2px; }
.btn.-bu{background-color: #005ec4;}

  @media only screen and (min-width: 1024px) {
    .btn{transition: .3s; }
      .btn:hover{transform: scale(1.1); } }
/* notice */
.notice_container{background: #F9F8F8;}
.notice {width: 100%; max-width: 1440px; margin: 0 auto; padding: 4% 9%;}
.notice-title {font-size: 22px; font-weight: 700; line-height: 1.8; text-align: center;}
.notice-content {margin-top: 20px; padding-top: 20px; font-size: 16px; line-height: 2; border-top: 1px solid #303030;}
.notice-content a{text-decoration: underline; color: #ed1c24; z-index:5;}
.notice-content ol{margin: 0; padding-left: 18px; list-style-type: decimal; padding-left: 24px;}
.notice-content ol>li{}
.notice-content ol>li>span{font-weight: 500; text-decoration: underline;}
.notice-content ol>li>ol{}
.notice-content ol>li>ol>li{list-style: none; position: relative; counter-increment: section 1;}
.notice-content ol>li>ol>li::before {
    content: "(" counter(section) ")";
    position: absolute;
    top: 0px;
    left: -5px;
    transform: translateX(-100%);
}
/* float */
.float {position: fixed; top: 200px; right: 0px; width: 60px; z-index: 50; display: flex; flex-direction: column; align-items: stretch; gap: 10px;}
.float-item {border-radius: 10px 0px 0px 10px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 16px 12px; min-height: 48px; background-color: #F94B4B; font-size: 16px; line-height: 1.5; width: 100%; box-sizing: border-box; transition: transform 0.2s ease;}
.float-item:hover {transform: scale(1.04);}
.float-item img {width: 22px; }
.float-item div {color: #FFF; letter-spacing: 6px; white-space: normal; text-align: center; line-height: 1.5; writing-mode: vertical-rl; text-orientation: mixed; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl;}
.float-item.-blue {margin-top: 0; background-color: #3552A7;}
.onlymob{display: none;}

@media screen and (max-width: 1670px) {
    /* kv */
    .kv{width: 100%; max-width: 1600px; height: 0; padding-bottom: 28.75%;}
    .kv .kv_tit{width: 25%;}
    .kv .arrow1{width: 7%;}
    .kv .arrow2{width: 7%;}
}
@media only screen and (max-width: 1293px) {
  .table-2{width: 410px;}

}
@media only screen and (max-width: 1239px) {
    /* info */
    .info-item{min-width: 220px;}
    .info-title{width: 160px; font-size: 18px;}
    .info-text{font-size: 18px;}
    .info-note{font-size: 16px;}
    /* float */
    .float-item {padding: 14px 10px; font-size: 15px;}
    .float-item img {width: 18px;}
}
@media screen and (max-width: 1024px) {
    .main{padding-top: 76px;}
    /* info */
    .info-wrap{gap: 15px; padding: 10px;}
    .info-item{min-width: 190px;}
    .info-title{font-size: 16px;}
    .info-text{font-size: 16px;}
    .info-note{margin-top: 10px; font-size: 14px;}
    .info-txts{width:100%;}
    .cta{padding:2% 7%;}
    /* notice */
    .notice-content {font-size: 15px; line-height: 1.8;}
    .notice-title {font-size: 18px;}
}
@media screen and (max-width: 767px) {
    .main{padding-top: 58px;}
    /* kv */
    .kv_container{width: 100%; background: none;}
    .kv{width: 100%; max-width: 767px; height: 0; padding-bottom: 146.1538461%; background: url("../images/kv_bg_m.png") center top no-repeat; background-size: 100% auto; position: relative;}
    .kv .kv_tit{position: static; width: 75%; margin: 0 auto; padding-top: 21%;}
    .kv .arrow1{width: 12%; top: 57%; left: 32%;}
    .kv .arrow2{width: 13%; top: 20%; right: 3%;}
    /* info */
    .info-wrap{flex-direction: column;}
    .info-line{display: none;}
    .info-item{min-width: 220px;}
    .info-title{width: 160px; font-size: 18px;}
    .info-text{font-size: 16px;}
    .info-note{font-size: 16px;}
     .cta{padding:3% 8%;}
     .cta-area { gap:10px;}
    /* block-action */
    .block-action{gap: 20px; padding-bottom: 8%;} 
    /* float*/
    .float {
      position: fixed;
      display: flex;
      align-items: center;
      width: 100%;
      top: auto;
      bottom: 0;
      right: 0;
      flex-direction: row;
      gap: 0;
      text-align: center;
      box-sizing: border-box;
    }
    .float-item {border-radius: 0px; flex: 1; flex-direction: row; justify-content: center; padding: 12px 10px; min-height: 48px; font-size: 15px; line-height: 18px; position: relative;}
  
    .float-item div {
          -webkit-writing-mode: initial;
              -ms-writing-mode: initial;
                  writing-mode: initial; }
    .float-item.-blue {margin-top: 0; background-color: #3552A7;}
    .float-close {
      position: absolute;
      right: 11px;
      top: 2%;
      transform: translateY(-50%);
      width: 25px;
      height: 25px;
      border: 1px solid #a4a4a4;
      background: #ffffff;
      color: #747474;
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }
    .float.is-hidden {display: none !important;}

    .cta-area{margin: 5% 15% 5% 15%;}
    .onlymob{display: block;}
}
@media screen and (max-width:600px) {
    /* block-action */
    .block-action{flex-direction: column; padding-top: 5%;} 
    .cta-area{
      flex-direction: column;
      gap: 20px;
      margin: 5% 8% 8%;
    }
    .cta{
      padding: 6% 9%;
      font-size: 18px;
      letter-spacing: 2px;
      width: 100%;
      max-width: 300px;
    }
    .stext{font-size: 24px;}
}
@media screen and (max-width:480px) {
    .content{padding: 2% 3% 2%;}
    /* form */

    /* block-action */
    .block-action{padding: 0 0 10%;}
    /* notice */
    .notice {padding: 8% 6%;}
    .notice-content {font-size: 14px;}
    .info-note{font-size: 12px;}
}

/* 表格 */
.rate-table-container {
  font-family: sans-serif;
  max-width: 700px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  margin-bottom: 3%;
}

.rate-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #fcfcfc;
}

.rate-table thead {
  background-color: #3552A7; /* 藍色表頭 */
  color: white;
}

.rate-table th, .rate-table td {
  padding: 16px;
  text-align: center;
  border: 1px solid #e0e0e0;
  font-size: 20px;
}

.rate-table th {
  font-weight:500;
  font-size: 18px;
}

.rate-highlight {
  color: #e91e63; /* 紅色利率 */
  font-weight: bold;
  vertical-align: middle;
}
.rate-highlight2 {
  color: #3552A7; /* 藍色利率 */
  font-weight: bold;
  vertical-align: middle;
}



/* 響應式調整 */
@media (max-width: 480px) {
  .rate-table th, .rate-table td {
    padding: 10px;
    font-size: 1.2em;
  }
}
/* popup */
.popup-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.popup-overlay.show{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.popup-modal{
  position: relative;
  width: min(92vw, 550px);
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 40px 28px 28px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
  text-align: center;
}
.popup-close{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: #f3f5ff;
  color: #3552A7;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.popup-title{
  margin-bottom: 12px;
  color: #3552A7;
  font-size: 24px;
  font-weight: 700;
}
.popup-text{
  margin-top: 12px;
  margin-bottom: 22px;
  color: #444;
  font-size: 18px;
  line-height: 1.8;
}
.popup-btn{
  display: inline-block;
  padding: 12px 40px;
  border-radius: 999px;
  background: #ff4d6d;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(255, 77, 109, 0.25);
  transition: background 0.2s ease, transform 0.2s ease;
  border: 0;
  cursor: pointer;
}
.popup-btn:hover{
  background: #f53d62;
  transform: translateY(-2px);
}

/* 網頁版 */
.desktop-float{
  position: fixed;
  right: 0px;
  bottom: 220px;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  min-width: 52px;
  height: 80px;
  min-height: 52px;
  padding: 10px 8px;
  background: #f53d62;
  color: #333;
  font-size: 15px;
  line-height: 1.5;
  text-decoration: none;
  border: 1px solid #c1c1c1;
  border-right: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(20px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease, width 0.25s ease, padding 0.25s ease;
}
.desktop-float.show{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}
.desktop-float:not(.is-collapsed){
  width: min(275px, calc(100vw));
  justify-content: flex-start;
  padding: 12px 14px;
  height: 80px;
}
.desktop-float:not(.is-collapsed) .desktop-float__toggle{
  order: -1;
  margin-right: 8px;
  margin-left: 0;
}
.desktop-float__text{
  flex: 0 0 200px;
  display: flex;
  align-items: center;
  min-width: 0;
  width: 240px;
  max-width: 240px;
  height: 50px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #ffffff;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.desktop-float:not(.is-collapsed) .desktop-float__text{
  opacity: 1;
  visibility: visible;
}
.desktop-float__toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-right: 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  vertical-align: middle;
}
.desktop-float__toggle svg{
  display: block;
  width: 28px;
  height: 28px;
  color: inherit;
}
.desktop-float.is-collapsed .desktop-float__toggle svg{
  transform: rotate(180deg);
}
.desktop-float.is-collapsed .desktop-float__text{
  max-width: 0;
  opacity: 0;
  visibility: hidden;
}

@keyframes desktopFloatIn {
  0% { opacity: 0; transform: translateX(20px); }
  100% { opacity: 1; transform: translateX(0); }
}
@media screen and (max-width: 767px) {
  .desktop-float{
    display: none !important;
  }
}





@-webkit-keyframes coin {
  0% {
    transform: translateY(-8%); }
  100% {
    transform: translateY(8%); } }

@keyframes coin {
  0% {
    transform: translateY(-8%); }
  100% {
    transform: translateY(8%); } }

@keyframes icon {
  0% {
    transform: scale(1); }
  100% {
    transform: scale(1.04); } }