@charset "UTF-8";
@font-face {
    font-family: 'Noto Sans TC';
    font-style: normal;
    font-weight: 300;
    src: url("https://www.yuantabank.com.tw/bankwebIMG/event/fonts/NotoSansTC-Light.otf") format("opentype");
    font-display: swap;
}
@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;
}
@font-face {
    font-family: 'Noto Sans TC';
    font-style: normal;
    font-weight: 900;
    src: url("https://www.yuantabank.com.tw/bankwebIMG/event/fonts/NotoSansTC-Black.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: #303030; padding-top: 80px; font-size: 12px; background: #E1E8FF;}
.section{width: 100%; max-width: 1920px; margin: 0 auto;}
.red{color: #EF5842; font-weight: 700;}
.blue{color: #394C91;}
@media only screen and (max-width: 960px) {
  .pc-none {display: none;}
}
@media only screen and (max-width: 820px) {
  .pad-none{display: none;}
}
/* kv */
.kv_container{width: 100%; margin: 0 auto; background: url("../images/kv_bg.png") center top no-repeat; background-size: cover; overflow: hidden; position: relative;}
.kv_container::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1920px;
    height: 212px;
    background: url("../images/kv_bg_up.png") no-repeat center bottom / cover;}
.kv{width: 100%; max-width: 1600px; height: 600px; margin: 0 auto; position: relative;}
.kv .kv_tit{width: 620px; position: absolute; top: 17%; left: 13%; animation-duration: 1.5s;}
.kv .coin1{width: 85px; position: absolute; top: 22%; left: -1%; animation: coin 1s ease-in-out infinite alternate;}
.kv .coin2{width: 95px; position: absolute; top: 10%; right: -2%; animation: coin 1s ease-in-out infinite alternate-reverse;}
.kv .people{width: 34%; height: 0; padding-bottom: 36%; position: absolute; top: 6%; right: 9.5%;}
.kv .people .shine{width: 15%; position: absolute; top: 15%; left: 27%; animation: flash 5s ease-in infinite ;}
.kv .people .man{width: 100%; position: absolute; bottom: 0; left: 0;}
/* content */
.content_container{width: 100%; margin: 0 auto; background: url("../images/deco.png") no-repeat center top; background-size: 1920px;}
.content{width: 100%; max-width: 1540px; margin: 0 auto; padding: 2% 5% 4%; display: flex; flex-direction: column; gap: 50px;}
/* info */
.info{width: 100%; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; gap: 80px; padding: 80px 100px; border-radius: 15px; background: #FFFFFF; text-align: center;}
.info-wrap{display: flex; flex-direction: column; justify-content: center; gap: 30px;}
.info-title{display: flex; align-items: center; justify-content: center; gap: 15px;}
.info-title::before, .info-title::after {content: ''; flex: 0 0 auto; width: 30px; height: 24px; margin-top: 2px; background: url("../images/crown.svg") no-repeat center/contain;}
.info-title span{flex: 0 0 auto; padding-left: 0.08em; font-size: 40px; font-weight: 700; text-align: center; line-height: 1.4; letter-spacing: 0.08em; color: #394C91;}
.info-textb{font-size: 24px; font-weight: 700; line-height: 1.8;}
.info-textm{font-size: 20px; font-weight: 400; line-height: 1.8;}
/* discount */
.discount_container{display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; gap: 4%;}
.discount{width: 48%; background-color: #FFEFE7; border-radius: 30px;}
.discount1{background-color: #FFF8F5; border: 1px solid #FD734E;}
.discount2{background-color: #FFFAEB; border: 1px solid #F28F00;}
.discount3{background-color: #F2F8FF; border: 1px solid #76B6FE;}
.dis_tit{width: 100%; height: 80px; margin: 0 auto; display: flex; align-items: center; justify-content: center;  background-color: #FD734E; color: #FFFFFF; font-size: 30px; font-weight: 700; text-align: center; border-radius: 28px 28px 0 0 ;}
.dis_tit1{background-color: #FD734E;}
.dis_tit2{background-color: #F28F00;}
.dis_tit3{background-color: #76B6FE;}
.dis_cont{padding: 6% 4%; display: flex; flex-direction: column; gap: 20px;}
.dis_pic{width: 100%; max-width: 240px; margin: 0 auto;}
.dis_pic img{width: 100%; margin: 0 auto;}
.dis_txt{font-size: 28px; font-weight: 700; color: #EF5842;}
.dis_txts{font-size: 18px; font-weight: 400;}
.dis_ttbox{display: flex; flex-direction: column; gap: 20px; justify-content: center; align-items: center;}
.dis_ttbox .exchangebox{width:100%; display: flex; flex-direction: column; align-content: center; align-items: center;}
.dis_ttbox .exchangebox .exchange{width: 60%; display: flex; justify-content: space-between;}
.exchange + .exchange {border-top: 1px solid #303030;}
.dis_tt{font-size: 22px; line-height: 1.8;}
.dis_tt_bold{font-weight: bold;}
.dis_ttb{font-size: 26px; line-height: 1.2; font-weight: 700; color: #EF5842;}
.dis_cta{display: inline-block; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;}
.cta_item{padding: 14px 50px; border-radius: 10px; background: #76B6FE; font-size: 18px; line-height: 24px; font-weight: 700; color: #FFFFFF; transition: all 0.3s ease-in-out;}
.cta_tt{display: flex; justify-content: center;}
.cta_tt::after{content: ''; display: inline-block; width: 18px; height: 24px; background: url("../images/cta-arrow-w.svg"); margin-left: 5px; transition: all 0.3s ease-in-out;}
.cta_item img{width: 18px;}
.dis_note{font-size: 18px; line-height: 1.6;}
/* notice */
.notice_container{width: 100%; margin: 0 auto 3%; position: relative;}
.notice_list{width: 100%; padding: 30px 50px; display: flex; flex-direction: column; text-align: left; background: #FFFFFF; border-radius: 15px;}
.notice_tit{width: 100%; display: flex; align-items: center; gap: 20px; cursor: pointer;}
.notice_tit::after{content: ''; display: block; width: 24px; height: 40px; background: url("../images/arrow.svg") no-repeat center / contain; transform: rotate(0deg); transition: all 0.3s;}
.notice_tit.-open{/*變化*/}
.notice_tit.-open::after{transform: rotateX(180deg);/*變化*/}
.notice_tit h4{flex: 1; font-size: 22px; font-weight: 700;}
.notice_txt{font-size: 16px; margin-top: 2%; border-top: 1px solid #303030; display: none;/*先隱藏*/}
.notice_txt>p{font-size: 16px; line-height: 2; margin-top: 20px;}
.notice_txt>a{color: #1E71E4;}
.notice_txt>ul{margin-top: 2%; list-style-type: cjk-ideographic;  padding-left: 36px;}
.notice_txt>ul>li{}
.notice_txt>ul>li>ol{list-style-type: decimal; padding-left: 20px;}
.notice_txt>ul>li>ol>li{}
.notice_txt>ol{margin-top: 2%; list-style-type: decimal; padding-left: 36px;}
.notice_txt>ol>li{}
.notice_txt>ol>li>span{font-weight: 700; text-decoration: underline;}
.fund_notice_list{margin-top: 2%;}

@media screen and (max-width: 1600px) {
    /* kv */
    .kv_container::after{
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      height: 0;
      padding-bottom: 11.04%;
      background: url("../images/kv_bg_up.png") no-repeat center bottom / 100% auto;}
    .kv{width: 100%; max-width: 1600px; height: 0; padding-bottom: 37.5%;}
    .kv .kv_tit{width: 38%;}
    .kv .coin1{width: 5.5%;}
    .kv .coin2{width: 6%;}
}
@media screen and (max-width: 1440px) {
    .info{padding: 6% 6%;}
    .dis_tt{font-size: 20px;}
}
@media only screen and (max-width: 1240px) {
    .content{padding: 2% 4% 6%; gap: 30px;}
    /* info */
    .info-title{gap: 8px;}
    .info-title span{font-size: 36px;}
    .info-textb{font-size: 20px;}
    .info-textm{font-size: 16px;}
}
@media screen and (max-width: 1024px) {
    .main{padding-top: 76px;}
    /* content */
    .content_container{background: none;}
    /* info */
    .info{gap: 60px;}
    .info-title span{font-size: 32px;}
    .dis_tit{height: 60px; font-size: 26px;}
    .dis_txt{font-size: 24px;}
    .dis_tt{font-size: 18px;}
    /* 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_container::after{
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      height: 0;
      padding-bottom: 29.658%;
      background: url("../images/kv_bg_up_m.png") no-repeat center bottom / 100% auto;}
    .kv{width: 100%; max-width: 767px; height: 0; padding-bottom: 138.46153846%; background: url("../images/kv_bg_m.png") center top no-repeat; background-size: 100% auto; position: relative;}
    .kv .kv_tit{position: static; width: 80%; margin: 0 auto; padding-top: 10%;}
    .kv .coin1{width: 11%; top: 65%; left: 4%;}
    .kv .coin2{width: 12%; top: 59%; right: -2%;}
    .kv .people{width: 68%; height: 0; padding-bottom: 76.5%; position: absolute; top: 37%; right: 15%;}
    /* info */
    .info{padding: 12% 6%;}
    .info-wrap{gap: 20px;}
    .discount_container{flex-direction: column; gap: 30px;}
    .discount{width: 100%; border-radius: 20px;}
    .dis_tit{border-radius: 18px 18px 0 0;}
    .dis_ttbox .exchangebox .exchange{width: 80%;}
    /* notice */
    .notice_container{margin: 0 auto 6%;}
    .notice_list{padding: 20px;}
    .notice_tit h4{font-size: 20px; line-height: 30px;}
    .notice_tit::after{width: 18px; height: 30px;}
    .notice_txt{font-size: 15px; margin-top: 3%;}
    .fund_notice_list{margin-top: 4%;}
}
@media screen and (max-width:480px) {
    /* info */
    .info-title span{font-size: 28px;}
    .info-textb{font-size: 18px;}
    .info-textm{font-size: 15px;}
    .dis_cont{padding: 6%;}
    .dis_tit{font-size: 22px;}
    .dis_pic{max-width: 200px;}
    .dis_note{font-size: 16px;}
    /* notice */
    .notice {padding: 8% 6%;}
    .notice-content {font-size: 14px;}
}


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


@keyframes flash {
  0%, 50%, 100% {opacity: 1;}
  25%, 75% {opacity: 0;}
}
@-webkit-keyframes flash {
  0%, 50%, 100% {opacity: 1;}
  25%, 75% {opacity: 0;}
}