@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; }

/* ------------------------------- main ------------------------------- */
* {margin: 0; padding: 0;}
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; padding-top: 80px; color: #222222; background: #FFFFFF;}
.section{width: 100%; max-width: 1920px; margin: 0 auto;}

.block{width: 100%; max-width: 1440px; margin: 0 auto; text-align: center; line-height: 1.8; padding: 3% 0;}
@media screen and (max-width: 1200px) {.block {padding: 3% 4%;}}
@media screen and (max-width: 767px) {.block {padding: 6%;}}

.blue{color: #1E71E4;}
.persimmon{color: #FD734E;}
.tt_bold{font-weight: 700;}
.header{box-shadow: 0 0 20px rgb(153 194 255 / 30%);}
@media only screen and (max-width: 960px) {
  .pc-none {display: none;}
}
@media only screen and (max-width: 767px) {
  .pad-none{display: none;}
}
/* kv */
.kv_container{width: 100%; margin: 0 auto; position: relative;}
.kv{width: 100%; max-width: 1920px; height: 0; padding-bottom: 30.833333333333%; background: url("../images/kv_bg.png") center top no-repeat; background-size: cover; overflow: hidden; position: relative;}
.bg_icon {width: 100%; height: 0; padding-bottom: 30.833333333333%; background-image: url("../images/icon_bg.png"); background-size: cover; animation: slide 15s infinite linear;}
.kv_man{width: 18.5%; position: absolute; top: 9%; right: 16.5%; animation: people 1.8s ease-in-out infinite alternate;}
.kv_woman{width: 25%; position: absolute; top: 9%; left: 7%; animation: people 1.5s ease-in-out infinite alternate-reverse;}
.kv_tit{width: 33%; position: absolute; top: 11%; left: 32%;}
/* content */
.content{position: relative;}
/* event */
.event_container{width: 100%; margin: 3% auto 0; position: relative;}
/* block */
.block h1{font-size: 48px; font-weight: 700; line-height: 1.6; color: #1E71E4; font-style: italic; text-decoration-line: underline;
    -webkit-text-decoration-color: #1E71E4; text-decoration-color: #1E71E4; text-decoration-thickness: 3px; text-underline-offset: 12px;}
.block h3{font-size: 24px; font-weight: 700; margin-top: 2%;}
.block p{font-size: 20px;}
/* discount */
.discount_container{width: 100%; max-width: 1140px; margin: 4% auto 0; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; gap: 4%;}
.discount{display: flex; width: 48%; flex-direction: column; align-content: flex-start; gap: 10px; background-color: #FFEFE7; border-radius: 30px; padding: 0 2% 3%; margin-top: 3%;}
.discount1{background-color: #FFEFE7; position: relative;}
.discount2{background-color: #FFF6DB;}
.discount3{background-color: #EBF3FE;}
.discount4{background-color: #F8F0FD;}
.dis_crown{width: 18%; position: absolute; right: -5%; top: -11%;}
.dis_tit{width: 80%; height: 60px; 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: 0 0 30px 30px;}
.dis_tit1{background-color: #FD734E;}
.dis_tit2{background-color: #F28F00;}
.dis_tit3{background-color: #76B6FE;}
.dis_tit4{background-color: #C38FDA;}
.dis_pic{width: 100%; max-width: 300px; margin: 4% auto 0;}
.dis_pic img{width: 100%; margin: 0 auto;}
.dis_txt{font-size: 26px; font-weight: 700; color: #EF5842;}
.dis_txts{font-size: 18px;}
.dis_ttbox{height: 70px; display: flex; justify-content: center; align-items: center;}
.dis_ttbox .exchangebox{width:100%; display: flex; align-content: center; align-items: center;}
.dis_ttbox .exchangebox .exchange{display: flex; flex-direction: column; padding: 0 10px; flex: 1;}
.exchange + .exchange {border-left: 1px solid #303030;}
.dis_tt{font-size: 18px;}
.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: #FFFFFF; border: 2px solid #76B6FE; font-size: 18px; line-height: 24px; font-weight: 700; color: #76B6FE; 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-b.svg"); margin-left: 5px; transition: all 0.3s ease-in-out;}
.cta_item img{width: 18px;}
.cta_item:hover{background: #76B6FE; color: #FFFFFF;}
.cta_item:hover .cta_tt::after{content: ''; display: inline-block; width: 18px; height: 24px; background: url("../images/cta-arrow-w.svg"); margin-left: 5px;}
.cta_item_p{border: 2px solid #C38FDA; color: #C38FDA;}
.cta_tt_p::after{content: ''; display: inline-block; width: 18px; height: 24px; background: url("../images/cta-arrow-p.svg"); margin-left: 5px; transition: all 0.3s ease-in-out;}
.cta_item_p:hover{background: #C38FDA; color: #FFFFFF;}
.dis_note{font-size: 18px; line-height: 1.6; margin-top: 3%;}
/* notice */
.notice_container{width: 100%; margin: 0 auto 3%; position: relative;}
.notice_list{width: 100%; max-width: 1140px; margin: 0 auto; padding: 30px 50px; display: flex; flex-direction: column; text-align: left; background: #F2F2F2; border-radius: 15px;}
.notice_tit{width: 100%; display: flex; align-items: flex-start; 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: 1440px) {
  /* kv */
  .kv{width: 100%; height: 0; padding-bottom: 36%;}
  .bg_icon {width: 100%; height: 0; padding-bottom: 36%;}
  .kv_man{width: 21.5%; top: 9%; right: 10%;}
  .kv_woman{width: 29%; top: 9%; left: 2%;}
  .kv_tit{width: 37%; top: 14%; left: 31.5%;}
  /* block */
  .block h1{font-size: 40px;}
}

@media screen and (max-width: 1024px) {
  .main{padding-top: 76px;}
  /* block */
  .block h1{font-size: 36px;}
  .block h3{font-size: 20px; margin-top: 4%;}
  .block p{font-size: 18px;}
  /* discount */
  .discount_container{width: 100%; max-width: 1140px; margin: 4% auto 0; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; gap: 4%;}
  .discount{gap: 20px;}
  .dis_crown{position: absolute; right: -5%; top: -8%;}
  .dis_ttbox{height: auto;}
  .dis_tit{font-size: 24px;}
  .dis_pic img{width: 80%;}
  .dis_txt{font-size: 24px;}
  .dis_txts{font-size: 18px;}
  .dis_tt{font-size: 16px;}
  .dis_ttb{font-size: 18px;}
  .dis_note{font-size: 16px;}
}

@media screen and (max-width:767px) {
  .main{padding-top: 58px;}
  /* kv */
  .kv{width: 100%; height: 0; padding-bottom: 130%; background: url("../images/kv_bg-m.png") center top no-repeat; background-size: 100% auto;}
  .bg_icon {display: none;}
  .kv_man{width: 43%; top: 50.5%; right: 7.5%;}
  .kv_woman{width: 54%; top: 50.5%; left: 1.5%;}
  .kv_tit{width: 75%; top: 7.2%; left: 12%;}
  /* event */
  .event_container{margin: 6% auto 0;}
  /* block */
  .block h1{font-size: 28px;}
  .block h3{font-size: 18px; margin-top: 4%;}
  .block h3.text-left{text-align: left;}
  .block p{font-size: 16px;}
  /* discount */
  .discount_container{flex-direction: column; gap: 4%;}
  .discount{width: 100%; border-radius: 20px; padding: 0 3% 8%; margin-top: 8%;}
  .dis_crown{width: 15%; position: absolute; right: 3%; top: -10%;}
  .dis_tit{font-size: 22px;}
  .dis_tt{font-size: 18px;}
  .dis_ttb{font-size: 20px;}
  .dis_note{text-align: left; margin-top: 6%;}
  /* 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) {
  /* discount */
  .dis_crown{width: 20%; position: absolute; right: 3%; top: -8%;}
}


/* animation */
@-webkit-keyframes people {
  0% {
    transform: skewX(0); }
  100% {
    transform: skewX(-2deg); } }
@keyframes people {
  0% {
    transform: skewX(0); }
  100% {
    transform: skewX(-2deg); } }

@-webkit-keyframes slide {
  0% {
    background-position: 0 0; }
  100% {
    background-position: 100% 0; } }
@keyframes slide {
  0% {
    background-position: 0 0; }
  100% {
    background-position: 100% 0; } }