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

* {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; }
a,a:hover,a:active,a:visited {display: inline-block;text-decoration: none;}
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:#333333; padding-top: 80px; font-size: 12px;}
.section{width: 100%; max-width: 1920px; margin: 0 auto;}

/* 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: 1400px; height: 520px; margin: 0 auto; position: relative;}
.kv .kv_tit{width: 35%; position: absolute; top: 20%; left: 12%;}
.kv .people{width: 38%; position: absolute; top: 36%; left: 52%; z-index: 6;}
.kv .deco{width: 36%; position: absolute; top: 27%; left: 54%; opacity: 0; animation: slide-fwd-top 1s forwards;}
.mobOnly{display: none;}
.webOnly{display: block;}
.fifty{width:9.9%;z-index: 3;position: absolute;top: 35.3%;left: 30.3%;animation-name:bounceIn;animation-duration: 1s;}
/* content */
.content{width: 100%; margin: 0 auto; background-color: #F6F6F6 ;}
.kv_logo{width: 25%; margin: 0 auto; padding-top: 4%;}
/* event */
.coupon{width:40%;margin: 0 auto;margin-top: 3%;}
.coupon2{width:100%;}
.s_txt{font-size: 14px;margin-top: 4%;font-weight: 400;color: #5E5E5E;width: 100%; text-align: center; margin: 3% 0;}
.tit{font-size: 28px;font-weight: bold;color: #000000; text-align: center; margin:2% auto;}
.event{position: relative; width: 850px;margin: 0 auto 2% ; text-align: center; line-height: 1.5;background: #ffffff; border: #000000 solid 3px;border-radius: 16px;}
.event_date{font-size: 20px;color: #00000c; background-color: #ffffff; padding:6px;width: 850px; text-align: center;margin:0 auto;border-radius: 15px;border:#000000 solid 3px;}
.event_txt{font-size: 20px;color: #00000c;text-align: center; margin: 3% auto;font-weight: bold;}
.icon{width:49%;margin: 12% auto 0;}
.blue{color: #0c61bf;}
.orange{color: #f55f24;}
.stit{width:62%;margin: 0% auto 7%;}
.boy{width: 15%;position: absolute;top:42%;right:2%;animation: floating 3s ease-in-out infinite;transform-origin: bottom right;}
.girl{width: 20%;position: absolute;top:63%;left:-6%;animation: floating 3s ease-in-out infinite;transform-origin: bottom left;}
/* card */
.card{display: flex;gap:20px;padding: 2% 4%;align-items: stretch;}
/* .card_item{background-color: #FFF7E2;padding: 3%;border-radius: 20px;} */
.card_item {
  flex: 1;            /* 讓卡片平分寬度 */
  min-width: 300px;   /* 設定最小寬度，避免手機版太擠 */
  display: flex;
  flex-direction: column; /* 讓內容由上往下排 */
  
  /* 以下是你原本的卡片樣式預設值 (請根據實際需求調整) */
  background: #FFFBE6; 
  padding: 26px;
  border-radius: 20px;
  text-align: center; /* 讓內容預設置中 */
}

.btn-cta {
  /* 這行會把按鈕上方的所有空間填滿，將按鈕推向底部 */
  margin-top: auto; 
  
  /* 確保按鈕在垂直排列中依然水平置中 */
  align-self: center; 
  
  /* 加上你之前設定的樣式 */
  display: inline-block;
  padding: 12px 35px;
  border: 2px solid #000;
  border-radius: 50px;
  text-decoration: none;
  color: #000;
  font-weight: bold;
  font-size: 16px;
}

/* (選用) 滑鼠移到按鈕整體時，背景變色 */
.btn-cta:hover {
  background-color: #FDD300; 
}

/* --- 箭頭動畫設定 (重點在這裡!) --- */
.btn-cta .arrow {
  display: inline-block;    /* 必須設定才能位移 */
  margin-left: 8px;         /* 箭頭跟文字的距離 */
  transition: transform 0.3s ease-out; /* 設定平滑過渡動畫 */
}

/* 當滑鼠移到 .btn-cta 上時，裡面的 .arrow 要做什麼 */
.btn-cta:hover .arrow {
  transform: translateX(6px); /* 往右移動 6px */
}


/* pxpay */
.pxpay{padding:1% 1% 5%; position: relative; background: #FFDE48;}
.account{width: 70%; max-width: 900px; height: auto; margin: 0 auto ;background-color: #ffffff;padding: 2% 3%;border-radius: 16px;border: #000000 solid 3px;}
.step{position:relative;display:-webkit-flex;display:flex;}
.step-title{position:absolute;top:0;right:16%;max-width:50%;}
.step-img{-webkit-flex:0 0 auto;flex:0 0 auto;max-width:28%;}
.step-img img{width:100%;}
.step-content{-webkit-flex:1;flex:1;margin:10% 0 0 6%;}
.step-content .subTitle{max-width:400px;padding-top:8%;}
.step-content .subTitle img{width:85%;}
.stepList{display:-webkit-flex;display:flex;margin-top:10px;}
.stepList-num{-webkit-flex:0 0 40px;flex:0 0 40px;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center;background-color:#ffd100}
.stepList-num img{width:24px}
.stepList-text{-webkit-flex:1;flex:1;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;box-sizing:border-box;min-height:74px;padding:12px 10px;font-size:18px;color:#1e334e;background-color:#fef8e1; text-align: left;}
.stepList-text p{width:100%;}
.stepList-num-w,.stepList-text-w{background-color: #ffffff;}
.moreInfo{text-align:center;margin-top: 2%;}
.moreInfo a{display:inline-block;font-size:20px; font-weight: bold; color:#4c94e4; text-decoration:none; border-bottom:1px solid #4c94e4;margin:3% 0 0;}

/* action */
.action{width: 100%;display:-webkit-flex;display:flex;-webkit-justify-content:center;align-items: center;padding:0 0 4%;gap:10px;}
.action-item{-webkit-flex:0 1 270px;flex:0 1 270px;max-width:270px;}
.action-item a{display: block;}
.btn{position:relative;display:block;border-radius:45px;cursor:pointer;}
.bbtn{position:relative;display:block;border-radius:45px;cursor:pointer;}
.btn::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;display:block;border-radius:17px;-webkit-transform:translateY(6px);transform:translateY(6px);}
.bbtn::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;display:block;border-radius:17px;-webkit-transform:translateY(6px);transform:translateY(6px);}
.btn img{position:relative;width:100%;z-index:1;transition:.2s;}
.bbtn img{position:relative;width:100%;z-index:1;transition:.2s;}
.btn.red::after{background-color:#000000;}
.btn.blue::after{background-color:#000000;}
.btn.yellow::after{background-color:#000000;}
.bbtn.red::after{background-color:#000000;}
.btn:hover img{-webkit-transform:translateY(6px);transform:translateY(6px);}
.bbtn:hover img{-webkit-transform:translateY(6px);transform:translateY(6px);}
.bbtn{max-width:820px;}
/* notice */
.notice_container{background: #F6F6F6 ;}
.notice{width: 100%; max-width: 1600px; margin: 0 auto; font-size: 15px; line-height: 2; color: #000; padding: 3% 5%;}
.notice_all{padding: 2%; /* text-align: justify; */}
.notice_all a{/* font-weight: bold; */ text-decoration: underline; color: #005bac;}
.notice_all span.font-b{font-weight: bold; color: #fef9d9;}
.notice_all ul{margin: 0; padding-left: 18px; list-style-type: cjk-ideographic;}
.notice_all ul>li>ol>li{list-style-type: decimal;} 
.notice_all ul>li>ol>li>ol>li{position: relative; counter-increment:section;left: 1%;}
.notice_all ul>li>ol>li>ol>li::before{content:"(" counter(section,decimal) ")";position:absolute;top:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}
.notice_all ul>li>ol>li>ol>li>ul{list-style-type: disc;}
.notice_tit{width:170px;margin: 0 auto}

.footerCont .footer-item a {
  color: #ffffff;
  text-decoration: underline;
}
#contTab{display: none;}
.content-more{display: none;
}
#contTab:checked ~ #cont{
    max-height: 250px;
    overflow: hidden;
}
#contTab:checked ~  .content-more{
    display: block;
    position: relative;
    padding-top: 20px;
    padding-bottom: 30px;
    text-align: center;
}
#contTab:checked ~  .content-more .gradient{
    background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(254,239,212,0)),to(#F6F6F6 ));
    background-image: -webkit-linear-gradient(top,rgba(254,239,212,0),#F6F6F6 );
    background-image: linear-gradient(-180deg,rgba(254,239,212,0),#F6F6F6 );
    height: 90px;
    position: absolute;
    left: 0;
    top: -80px;
    width: 100%;
}
#contTab:checked ~  .content-more .readmore{
    display: inline-block;
    background: #000000;
    color: #ffffff;
    width: 175px;
    height: 42px;
    border-radius: 42px;
    line-height: 42px;
    font-size: 16px;
    cursor: pointer;
    opacity: 0.8;
	transition: 0.3s;
}
#contTab:checked ~  .content-more .readmore:hover{opacity: 1}

@media screen and (max-width: 1400px) {
/* kv */
.kv_container{background: none}
.kv{width: 100%; max-width: 1400px; height: 0; padding-bottom: 37.142857%; background:url("../images/kv_bg-1400.png") center top no-repeat; background-size: 100% auto;}
.kv .kv_tit {width: 37%;position: absolute;top: 19%;left: 14%;}
.kv .people {width: 33%; position: absolute; top: 40.5%; left: 55.5%;}
.fifty { width: 10.2%;z-index: 3; position: absolute; top: 35.3%; left: 33.6%; animation-name: bounceIn; animation-duration: 1s;}

/* content */
.content{width: 100%; margin: 0 auto; background-color: #F6F6F6 ;background-image: none; }
/* .content{background-image: url("../images/part1_bg.png");  background-repeat: no-repeat,no-repeat; background-position: center center; background-size: 100% auto,100% auto;} */
.kv_logo{width: 30%;padding: 5% 0% 3%;}
/* event */
.event_date{font-size: 20px;}
.event_txt{font-size: 20px;}
.kv .deco{top: 34%;}
/* pxpay */
.account{ padding: 6% 5%;width:80%;}
}

@media screen and (max-width: 1200px) {
/* event */
.dis_item_all .dis_txt{height: 140px;}
.coupon {width: 40%;margin:3% auto;}
/* pxpay */
.account{height: auto; margin: 0% auto 3%; padding: 5% 5%;}
.icon{width: 65%;}
.stit{width:64%;} 
.action-item{width: 200px;}
}
@media screen and (max-width: 1024px) {
.main{padding-top: 76px;}
.event {width: 83%;}

}
@media screen and (max-width: 960px) {
/* kv */
.kv .kv_tit { width: 42%;top: 21%;left: 12%;}
.kv .people { width: 35%; position: absolute;  top: 40%;  left: 59%;}
.fifty{width: 12.2%;top: 38.3%;left: 33.8%;}
.kv .deco{top:43%;left: 59%;}
.mobOnly{display: block;}
/* content */
.content{width: 100%; max-width: 960px;}
.kv_logo{width: 44%;}
/* event */
.event{width: 90%;}
.event_tit{width: 200px; margin: 1% auto 5%;}
.coupon {width: 45%;}
.event_date{font-size: 24px;}
.display-none{display: none;}
.eaves{top: -1.5%;}
.man{width: 40%; top: -7%; left: -3%;}
.boy{display: none;}
.girl{display: none;}
/* pxpay */
.pxpay{padding:8% 1% 2%;}
.account{ height: auto; margin: 8% auto;padding: 5% 19% 6%;}
.step{display:block;}
.step-title{position:static;box-sizing:border-box;max-width:100%;margin:auto;}
.step-img{box-sizing:border-box;max-width:50%;margin:8% auto 5%;}
.step-content{margin-top:40px;margin:5% 0 0;}
.step-content .subTitle{max-width:100%;padding-top: 5%;}
.step-content .subTitle img{max-width:400px;margin:0 auto;}
.stepList-text{font-size: 20px;}
.moreInfo a{font-size:24px; margin-top: 5%;}

/* action */
.action{padding: 0 16% 4%;}
.action-item{width: 270px;margin: 3% auto;}
/* notice */
.notice{width: 92%; padding: 2% 5% 5%;}
}
.notice_tit{width: 150px;}
@media screen and (max-width:890px) {
.bbtn{width: 90%; margin: 0 auto;}
}

@media screen and (max-width:768px) {
.main{padding-top: 58px;}
/* kv */
.kv{width: 100%; max-width: 960px; height: 0; padding-bottom: 117%; background: url("../images/kv_bg_m.png") center top no-repeat; background-size: 100% auto;position: relative;}
.kv_container{width: 100%; margin: 0 auto; background: url("../images/kv_bg_m.png") center top no-repeat; background-size: cover;}
.kv .kv_tit {width: 72%;top: 9%;left: 14%;}
.kv .people {width: 61%;position: absolute;top: 69.6%;left: 20%;}
.kv .deco {width: 72%;top: 64%;left: 15%;}
.fifty {width: 19.6%;top: 19.3%;left: 52.3%;}
/* event */
.event{margin: 30px auto; padding: 2% 4%;}
.event_date{font-size: 20px;}
.event_txt{font-size: 20px;}
.man{top: -6%;}
.account{width: 90%;padding:5% 20% 6%;}
.tit{width: 45%;}
.tit{width: 90%;}
.coupon{ width: 54%;}
.coupon2{width:80%;margin: 0 auto;}
.tag{width:80%;margin: 0 auto;}
.card{display: flex;flex-wrap: wrap;padding: 0;}

/* action */
.action{display:block;}
.action-item{max-width:300px;margin:8% auto;}
.bbtn {width: 270px;}

/* pxpay */
.step-content .subTitle img{width:100%;}
.stepList-text{font-size: 18px;}
.stepList-text p{padding-bottom: 0;}
.moreInfo a{font-size:20px; margin-top: 5%;}
.step-title{width:100%;}
/* notice */
.notice{padding:5% 2% 8%;}
.notice_all ul{font-size:14px;padding-left:20px}
#contTab:checked ~ #cont{
    max-height: 48vw;
    overflow: hidden;
}
#contTab:checked ~  .content-more .readmore{
    width: 65vw;
    height: 8vw;
    border-radius: 4vw;
    line-height: 8vw;
    font-size: 1em;
}
}
@media screen and (max-width:600px) {
  .kv_logo{width: 65%; padding: 8% 0% 3%;}
  .webOnly{display: none;}
/* event */
.event_txt {font-size: 19px;margin: 2% auto 2%;text-align: center;}
.event_tit{width: 70%;}
.event_date{font-size: 18px;}
.man{display: none;}
.event_point{font-size: 15px;}
.account{width: 90%;padding:5% 6% 6%;margin-top:8%;}
.tit {width: 65%;font-size: 21px;}
.coupon {width: 80%;margin: 6% auto;}
.coupon2{width:100%;margin: 0 auto;}
.card_item {padding: 10px;}
.tag {width: 96%;}

/* pxpay */
.notice_tit {
  width: 140px;
  margin: 5% auto;
}
.stepList-text{font-size: 16px; height: auto; padding: 5px 10px;}
.moreInfo a{font-size: 18px;}
/* action */
.btn::after{-webkit-transform:translateY(4px);transform:translateY(4px);}
.btn:hover img{-webkit-transform:none;transform:none;}
}
@media screen and (max-width:500px) {
.kv .deco {top:71%;}
.event{border: #000000 solid 2px;}

}