@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: #1C2C4C; padding-top: 80px; font-size: 12px; background: #F7F4EC;}
.section{width: 100%; max-width: 1920px; margin: 0 auto;}
.web-only{display: inline-block;}
.mob-only{display: none;}
.-web-pad{display: inline-block;}
.-mob{display: none;}
/* kv */
.kv_container{width: 100%; margin: 0 auto; background: url("../images/kv_bg.png") center top no-repeat; background-size: cover;}
.kv{width: 100%; max-width: 1920px; height: 0; padding-bottom: 33.85416666%; margin: 0 auto; position: relative;}
.kv .kv_tit_area{display: flex; flex-direction: column; gap: 0.6vw; justify-content: left; position: absolute; left: 14%; top: 15%;}
.kv .kv_label{display: flex; gap: 1vw; align-items: center;}
.kv .kv_new{display: inline-block; font-size: 2vw; font-weight: 700; line-height: 1.2; color: #2C4576; padding: 0.3vw 1.4vw; border-radius: 5vw; background: linear-gradient(to right, #FFEDC1, #EED19D);}
.kv .kv_date {display: flex; align-items: center; gap: 1vw; font-size: 1.4vw; font-weight: 500; line-height: 1.5; color: #fff; white-space: nowrap;}
.kv .kv_date::after {content: ""; display: block; width: 100px; height: 1px; background-color: #fff;}
.kv .kv_tit{font-size: 3.6vw; font-weight: 700; letter-spacing: 2px; line-height: 1.2; color: #fff;}
.kv .kv_sub{font-size: 1.9vw; font-weight: 700; line-height: 1.2; background: linear-gradient(to right, #FFEDC1, #EED19D); webkit-background-clip: text; background-clip: text; color: transparent;}
.kv .kv_sub_main{font-size: 2.4vw;}
.kv .kv_text{font-size: 1.2vw; font-weight: 400; line-height: 1.4; letter-spacing: 1px; color: #fff;}
.kv .kv_pic{width: 29%; position: absolute; top: 24%; right: 11%;}
.kv .kv_coin1{width: 6.2%; position: absolute; top: 39%; left: 2.8%;
-webkit-animation:coinjump 1s ease-in-out infinite alternate;
        animation:coinjump 1s ease-in-out infinite alternate;}
.kv .kv_coin2{width: 6.5%; position: absolute; top: 74%; left: 41%;
-webkit-animation:coinjump 0.8s ease-in-out infinite alternate;
        animation:coinjump 0.8s ease-in-out infinite alternate;}
/* content */
.content_container{width: 100%; max-width: 1200px; margin: 0 auto; padding: 80px 0 140px;}
.content{display: flex; flex-direction: column; gap: 120px;}
/* ========================= 共用設定 ========================= */
.info_wrap{width: 100%; max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px;}
/* ========================= 標題區 ========================= */
.info_title{display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 30px; border-bottom: 2px solid #202E50;}
.info_tit{display: flex; align-items: center; gap: 18px; min-width: 0;}
.info_label{flex-shrink: 0; padding: 6px 20px; background: #BC8A58; color: #fff; font-size: 36px; font-weight: 500; line-height: 1.4; white-space: nowrap;}
.info_maintit{font-size: 54px; font-weight: 700; line-height: 1.3; letter-spacing: 1px; color: #202E50;}
.info_sub{flex-shrink: 0; color: #2865D9; font-size: 30px; font-weight: 500; white-space: nowrap;}
/* ========================= 好禮 1：活動說明 ========================= */
.info_text{display: flex; align-items: center; gap: 20px;}
.info_icon{width: 80px; height: 80px; object-fit: contain;}
.info_icon img{width: 100%;}
.info_maintext{flex: 1; font-size: 30px; font-weight: 500; line-height: 1.4; letter-spacing: 2px;}
.info_maintext u{text-underline-offset: 6px; text-decoration-thickness: 2px;}
.text_orange{color: #EF5D14;}
/* ========================= 好禮 1：活動卡片 ========================= */
.info_event_wrap{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px;}
.info_event{position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 24px; padding: 2vw; border: 3px solid #BC8A58; border-radius: 24px; background: #fff; text-align: center;}
/* 活動 A / B 緞帶 */
.event_label{position: absolute; top: -1px; left: 2.5vw; z-index: 2; width: 72px; height: 110px; padding: 12px 8px; background: linear-gradient(to bottom, #216AFF, #5D92FE); color: #FFFFFF; 
	font-size: 22px; font-weight: 500; letter-spacing: 2px; line-height: 1.2; text-align: center;
/* 底部倒 V 字 */
clip-path: polygon( 0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);}
/* A / B 字母 */
.event_label span {display: block; font-size: 36px; font-weight: 700; line-height: 1.1;}
.event_pic{width: 100%; max-width: 205px; margin: 0 auto; object-fit: contain; object-position: center center;}
.event_text{color: #202E50; font-size: 24px; font-weight: 500; line-height: 1.6; min-height: 70px;}
.event_text p{font-size: 18px; font-weight: 400; line-height: 1.6;}
.event_cta{display: flex; align-items: center; justify-content: center; width: 68%; padding: 12px; border-radius: 10px; background: #19C518; color: #fff; font-size: 20px; font-weight: 700; line-height: 1.4; text-decoration: none; cursor: pointer; transition: filter 0.25s ease;}
.info_event:nth-child(2) .event_cta{background: #3A6ED1;}
.event_cta:hover{filter: brightness(1.05);}
/* ========================= 好禮 2：金融優惠卡片 ========================= */
.info_discount_wrap{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px;}
.info_discount{display: flex; align-items: center; gap: 20px; padding: 2vw; border: 3px solid #BC8A58; border-radius: 24px; background: #fff;}
.info_discount > img {flex: 0 0 80px; width: 80px; height: 80px; object-fit: contain;}
.info_distit{display: flex; flex-direction: column;}
.dis_text{color: #202E50; font-size: 22px; line-height: 1.4; white-space: nowrap;}
.dis_maintext{color: #F15A24; font-size: 48px; font-weight: 700; line-height: 1.4; white-space: nowrap;}
/* notice */
.notice_container{width: 100%; margin: 0 auto; padding: 4% 6%; background: #FFFFFF;}
.notice_tit{font-size: 24px; font-weight: 700; text-align: center;}
.notice_txt{font-size: 18px; margin-top: 2%;}
.notice_txt span{color: #007FE0;}
.notice_txt b{font-weight: 700;}
.notice_txt>ul{margin-top: 2%; list-style-type: cjk-ideographic; padding-left: 36px; line-height: 2; text-align: justify;}
.notice_txt>ul>li{font-weight: 400;}
.notice_txt>ul>li>ol{padding-left: 28px;}
.notice_txt>ul>li>ol>li{}
.notice_txt>ul>li>ol>li>ol{list-style-type: decimal; padding-left: 20px;}
.notice_txt>ul>li>ol>li>ol>li{}
.notice_txt>ul>li>ol>li>ol>li>ol{padding-left: 20px;}
.notice_txt>ul>li>ol>li>ol>li>ol>li{}
ol.chinese {
    list-style-type: none;
    padding-left: 2em;}
    ol.chinese > li {
      position: relative; }
      ol.chinese > li::before {
        content: "(" attr(data-num) ")";
        position: absolute;
        top: 0;
        left: -0.3125em;
        transform: translateX(-100%); }
ol.brackets {
    list-style-type: none; }
    ol.brackets > li {
      position: relative;
      counter-increment: section; }
      ol.brackets > li::before {
        content: "(" counter(section, decimal) ")";
        position: absolute;
        top: 0;
        left: -0.3125em;
        transform: translateX(-100%);
        min-width: 1.25em;
        text-align: center; }

@media screen and (max-width: 1440px) {
	/* content */
	.info_title{padding-bottom: 2vw;}
	.info_label{padding: 0.5vw 1.2vw; font-size: 30px;}
	.info_maintit{font-size: 48px;}
	.info_sub{font-size: 24px;}
	.info_maintext{font-size: 26px;}
    /* notice */
    .notice_container{padding: 6%;}
}
@media only screen and (max-width: 1200px) {
	/* kv */
	.kv_container{width: 100%; margin: 0 auto; background: url("../images/kv_bg_1200.png") center top no-repeat; background-size: cover;}
	.kv{width: 100%; max-width: 1200px; height: 0; padding-bottom: 51.6666667%; margin: 0 auto; position: relative;}
	.kv .kv_tit_area{left: 6.5%; top: 11%;}
	.kv .kv_new{font-size: 2.8vw; padding: 0.4vw 1.6vw;}
	.kv .kv_date {font-size: 2vw; gap: 1vw;}
	.kv .kv_tit{font-size: 5.1vw;}
	.kv .kv_sub{font-size: 2.8vw;}
	.kv .kv_sub_main{font-size: 3.4vw;}
	.kv .kv_text{font-size: 1.7vw;}
	.kv .kv_pic{width: 37%; top: 45%; right: 9%;}
	.kv .kv_coin1{width: 9.2%; top: 69%; left: 7.8%;}
	.kv .kv_coin2{width: 10.5%; top: 76%; left: 41%;}
	/* content */
    .content_container{padding: 5% 6% 8%;}
    .content{gap: 8vw;}
    .info_discount_wrap{gap: 20px;}
}
@media screen and (max-width: 1024px) {
    .main{padding-top: 76px;}
}

@media screen and (max-width: 960px) {
    /* content */
    .info_event_wrap{gap: 20px;}
    .info_wrap{gap: 3vw;}
    .info_event{gap: 2vw; padding: 3vw 1vw; border: 2px solid #BC8A58;}
	.info_label{font-size: 24px;}
	.info_maintit{font-size: 36px;}
	.info_sub{font-size: 20px;}
	.info_maintext{font-size: 20px; letter-spacing: 1px;}
	.info_maintext u{text-decoration-thickness: 1px;}
	.info_icon{width: 60px; height: 60px;}
	.event_label{width: 60px; height: 90px; padding: 8px 4px; font-size: 18px;}
	.event_label span{font-size: 30px;}
	.event_pic{max-width: 160px;}
	.event_text{font-size: 20px; min-height: 60px;}
	.event_text p{font-size: 14px;}
	.event_cta{width: 68%; padding: 12px; font-size: 18px;}
	.info_discount_wrap{gap: 10px;}
	.info_discount{border: 2px solid #BC8A58; gap: 10px;}
	.info_discount > img {flex: 0 0 60px; width: 60px; height: 60px;}
	.dis_text{font-size: 18px;}
	.dis_maintext{font-size: 36px;}
}  
@media screen and (max-width: 767px) {
    .main{padding-top: 58px;}
    .web-only{display: none;}
    .mob-only{display: inline-block;}
    .-web-pad{display: none;}
    .-mob{display: inline-block;}
    /* kv */
    .kv_container{width: 100%; margin: 0 auto; background: url("../images/kv_bg_m.png") center top no-repeat; background-size: 100% auto;}
	.kv{width: 100%; max-width: 768px; height: 0; padding-bottom: 141.025641%; margin: 0 auto; position: relative;}
	.kv .kv_tit_area{gap: 3vw; left: 8.5%; top: 9.5%;}
	.kv .kv_new{font-size: 5.8vw; padding: 0.5vw 4vw;}
	.kv .kv_date {font-size: 3.3vw;}
	.kv .kv_date::after {width: 10vw;}
	.kv .kv_tit{font-size: 10.1vw;}
	.kv .kv_sub{font-size: 4vw; line-height: 1.4;}
	.kv .kv_sub_main{font-size: 6.7vw;}
	.kv .kv_text{font-size: 3vw;}
	.kv .kv_pic{width: 71%; top: 60%; right: 15%;}
	.kv .kv_coin1{width: 13.2%; top: 84%; left: 7.8%;}
	.kv .kv_coin2{width: 13.5%; top: 65%; left: 82%;}
	/* content */
	.info_event_wrap{display: flex; flex-direction: column; gap: 20px;}
	.info_discount_wrap{display: flex; flex-direction: column; gap: 20px;}
	.info_sub{text-align: center;}
    /* notice */
    .notice_container{padding: 6% 3%;}
    .notice_tit{font-size: 20px; line-height: 30px;}
    .notice_txt{font-size: 15px; margin-top: 3%;}
}
@media screen and (max-width: 520px) {
    /* content */
    .content_container{padding: 10% 6% 12%;}
    .content{gap: 10vw;}
    .info_wrap{gap: 6vw;}
    .info_event{padding: 5vw 1vw; gap: 4vw;}
    .info_title{padding-bottom: 4vw;}
	.info_label{font-size: 20px; padding: 4px 12px;}
	.info_maintit{font-size: 28px;}
	.info_sub{font-size: 18px;}
	.info_maintext{font-size: 18px;}
	.info_icon{width: 50px; height: 50px;}
	.event_label{left: 5vw; width: 50px; height: 80px; padding: 8px 4px; font-size: 16px;}
	.event_label span{font-size: 26px;}
	.event_text{font-size: 18px; min-height: 0; height: auto;}
	.info_discount_wrap{gap: 20px;}
	.info_discount{padding: 5vw 6vw; gap: 4vw;}
	.dis_maintext{font-size: 32px;}

}

@-webkit-keyframes coinjump {
  0% {
    transform: translateY(0); }
  100% {
    transform: translateY(15%); } }

@keyframes coinjump {
  0% {
    transform: translateY(0); }
  100% {
    transform: translateY(15%); } }