@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; color: #CA1C6E; 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: 600px; margin: 0 auto; position: relative;}
.kv .kv_tit{width: 34%; position: absolute; top: 11%; left: 33%; animation: bounceInDown 1s;}
.kv .deco01{width: 26%; position: absolute; top: 31%; left: 67.5%; animation: bounceInRight 2s ease-in;}
.kv .deco02{width: 16%; position: absolute; top: 17%; left: 12.5%; animation: bounceInLeft 2s ease-in;}
.kv .storedeco01{width: 62%; position: absolute; top: 25%; left: 43%;}
.kv .monster01{width: 11%; position: absolute; top: 36%; left: 20.5%; z-index: 1;animation: bounceInLeft 2s ease-in,bounce 2s ease-in-out infinite 2s;}
.kv .monster02{width: 17%; position: absolute; top: 37.4%; left: 70%;animation: bounceInRight 2s ease-in,bounce 3.5s ease-in-out infinite 2.2s;}
/* .hand{width: 5%; z-index: 10; right:20%; top:51%; position: absolute;animation: bounce 2s ease-in-out infinite 2.5s;} */
.mobOnly{display: none;}
.webOnly{display: block;}
/* content */
.content{width: 100%; margin: 0 auto; background-color: #378DF4 ; padding: 1% 0% 0% 0%; background-image: url("../images/bgdeco01.png");background-position:18% 20%;background-repeat: no-repeat;}
.content02{width: 100%; margin: 0 auto; background-color: #DEEFFF ; padding: 4% 0% 0% 0%; background-image: url("../images/bgdeco02.png");background-position:10% 60%;background-repeat: no-repeat;}
/* event */
.coupon{width:30%;margin: 0 auto;margin-top: 3%;}
.tit2{ margin:3% auto 2%; width: 20%;}
.tit3{font-size: 28px;font-weight: bold;color: #000000;margin:2% auto;max-width: 1200px;width: 70%;text-align: center;}
.event{position: relative; width: 60%;max-width: 1400px;margin: 26px auto; padding: 1% 0% 4%; text-align: center; line-height: 1.5;background: #ffffff; border-radius: 16px; margin-top: 2%;}
.event_date{font-size: 22px;color: #124c8c; font-weight: bold;}
.event_txt{font-size: 22px;color: #00000c; }
.event_txt2{font-size: 20px; color: #00000c; width:80%; text-align: center; margin: 0 auto;}
.icon{width:49%;margin: 12% auto 0;}
.line2{width:4px;}
.blue{color: #0c61bf;}
.orange{color: #f55f24;}
.stit{width:62%;margin: 0% auto 7%;}
.logo{width: 45%; margin: 0 auto;}
.list_btn{width: 18%; margin: 0 auto;margin-top:2%;}
.stxt{width: 52%; font-size: 15px; margin: 0 auto;color: #EC6D54; margin-top: 2%; background-color: #FFECEA;}
.stxt2{width: 52%; font-size: 15px; margin: 0 auto;color: #378DF4; margin-top: 1%;}
.chain{width: 4%; position: absolute;top: -5.5%;left: 2%;}
.chain02{width: 4%; position: absolute;top: -5.5%;right: 2%;}
/* use_event */
.use_event{width:50%; max-width: 1400px;margin: 0 auto; background: #ffffff; border-radius: 16px;position: relative;padding: 3%;}
.coupon_tit{width: 50%;position: absolute;top: -7%;left: 25%;}
.usetit{width: 20%;margin: 2% 0%;}
.monster03{ position: absolute; width: 20%; right: -8%; top: -13%;animation: bounce 3s ease-in-out infinite;}
.monster04{ position: absolute; width: 15%; left: -8.5%; top: 64%;}
/* card */
.card-container {display: flex;justify-content: center; gap: 40px; padding: 20px;}
.card{ width: 266px; border: #DEEFFF solid 3px ;border-radius: 10px; text-align: center;  padding: 16px;}
.title{font-size: 18px; border: #378DF4 solid 2px; border-radius: 30px; width: 45%; margin: 0 auto; margin: 6% auto 3% auto; color: #378DF4;}
.date{font-size: 18px;}
.limit{font-size: 14px; margin-top: 2%;}

/* action */
.action{width: 100%;display:-webkit-flex;display:flex; -webkit-justify-content:center;align-items: center; margin: 5% 0% 2% 0%; gap: 15px;}
.action-item{width: 30%;}
.action-item a{display: block;}
.btn_wrap a{display: block; margin-top: 7%;}
.btn{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:50px;-webkit-transform:translateY(6px);transform:translateY(6px);}
.btn img{position:relative;width:100%;z-index:1;transition:.2s;}
.btn.red::after{background-color:#CA1C6E;}
.btn.blue::after{background-color:#1F5CC5;}
.btn:hover img{-webkit-transform:translateY(6px);transform:translateY(6px);}
.list_btn:hover img{-webkit-transform:translateY(6px);transform:translateY(6px);transition:.2s;}
.btn_wrap{display: flex;flex-direction: column;align-items: center;gap: 10px;}
/* notice */
.notice_container{background: #DEEFFF ;}
.notice{width: 100%; max-width: 1600px; margin: 0 auto; font-size: 15px; line-height: 2; color: #313131; padding: 3% 5%;}
.notice_all{padding: 2%; /* text-align: justify; */}
.notice_all a{/* font-weight: bold; */ text-decoration: underline;}
.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;margin-left: 1.5em;} 
.notice_tit{width:200px;margin: 0 auto}
.bracket-counter {list-style: none;counter-reset: num; padding-left: -1.5em;}

.bracket-counter li {counter-increment: num;position: relative;padding-left: 1.6em;}

.bracket-counter li::before {content: "(" counter(num) ")";position: absolute;left: 0;color: #333; /* 可自訂顏色 */}

.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(#DEEFFF ));
    background-image: -webkit-linear-gradient(top,rgba(254,239,212,0),#DEEFFF );
    background-image: linear-gradient(-180deg,rgba(254,239,212,0),#DEEFFF );
    height: 90px;
    position: absolute;
    left: 0;
    top: -80px;
    width: 100%;
}
#contTab:checked ~  .content-more .readmore{
    display: inline-block;
    background: #5097D2;
    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: 32%;position: absolute;top: 10%;left: 35%;}
.kv .monster02 {width: 15%; position: absolute; top: 36.4%; left: 72%;}
.kv .monster01 {width: 11%; position: absolute; top: 37.4%; left: 19.5%;}

/* content */
.content{width: 100%; margin: 0 auto; background-color: #378DF4; }
/* .content{background-image: url("../images/part1_bg.png");  background-repeat: no-repeat,no-repeat; background-position: center center; background-size: 100% auto,100% auto;} */
/* event */
.event{width:80%;}
.use_event {width:70%;}
.usetit {width: 17%;}
.event_date{font-size: 20px;}
.event_txt{font-size: 20px;}
.dis_item_all .dis_no{font-size: 18px;}
.dis_item_all .dis_tit{width: 80%; max-width: 240px;}
.dis_item_all .dis_icon{width: 60%; max-width: 160px;}
.dis_item_all .dis_txt{width: 80%; height: 110px;}
.dis_item_all .dis_store{width: 44%; max-width: 140px;}
/* pxpay */
.account{ padding: 6% 5%;width:80%;}
.tit3{width: 80%;}
}
@media screen and (max-width: 1200px) {
/* event */
.dis_item_all .dis_txt{height: 140px;}
.tit2{width: 25%;}
.coupon {width: 40%;margin:3% auto;}
.event_txt2{width: 90%;}
.stit{width:64%;} 
.use_event {width: 65%;}
.chain{width: 4%; position: absolute; top: -4.5%; left: 5%;} 
.chain02{width: 4%; position: absolute; top: -4.5%; right: 5%;} 

}
@media screen and (max-width: 1024px) {
.main{padding-top: 76px;}
.event {width: 83%;}

}
@media screen and (max-width: 960px) {
/* kv */
.kv .kv_tit {width: 32%; top:9%; left:33%;}
.kv .monster02 {width: 19%; position: absolute; top: 27%; left: 68%;}
.kv .monster01 {width: 13%; position: absolute;  top: 30%;  left: 17%;}
.kv .deco01 {width: 29%; position: absolute; top: 23%; left: 63.5%;}
.kv .deco02 {width: 17%; position: absolute; top: 12%; left: 9.5%;}

/* content */
.card-container{gap:20px;}
.content{width: 100%; max-width: 960px;}
/* event */
.event{width: 90%;}
.use_event {width: 90%;padding: 8%;}
.event_tit{width: 200px; margin: 1% auto 5%;}
.event_txt2{width: 89%;}
.title{width: 59%;}
.coupon {width: 45%;}
.event_date{font-size: 24px;}
.event_txt{width: 90%; margin: 3% auto 0; font-size: 22px; text-align: center;}
.display-none{display: none;}
.eaves{top: -1.5%;}
.man{width: 40%; top: -7%; left: -3%;}
.dis_item_all .dis_no{width: 85%; font-size: 24px;}
.dis_item_all .dis_no::after{left: 48.5%;}
.dis_item_all .dis_tit{margin: 5% auto;}
.dis_item_all .dis_txt{width: 85%; font-size: 20px; height: auto; margin: 5% auto 8%;}
.chain{width: 4%; position: absolute; top: -4.5%; left: 5%;} 
.chain02{width: 4%; position: absolute; top: -4.5%; right: 5%;} 

.monster03{display: none;}
.monster04{display: none;}

/* action */
.action-item{width: 35%;}
/* notice */
.notice{width: 92%; padding: 2% 5% 5%;}
}

@media screen and (max-width:768px) {
.mobOnly{display: block;}
.webOnly{display: none;}
.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: 65%;top: 5%;left: 17%;}
.kv .monster02 {width: 33%;top: 60.36%;left: 49%;}
.kv .monster01 {width: 25%;position: absolute;top: 57.6%;left: 19%;}
.kv .deco01 { width: 40%; position: absolute; top: 56%; left: 46.5%; }
.kv .deco02 { width: 23%; position: absolute; top: 56%; left: 5.5%;}
.chain {width: 6%;position: absolute;top: -1.9%;left: 5%;}
.chain02 {width: 6%;position: absolute;top: -1.9%;right: 5%;}
/* event */
.event{padding: 1% 2% 8%;}
.event_date{font-size: 20px;}
.event_txt{font-size: 18px;}
.man{top: -6%;}
.dis_item_all .dis_no{font-size: 20px;}
.dis_item_all .dis_no::after{left: 48.5%;}
.dis_item_all .dis_tit{margin: 8% auto 5%;}
.dis_item_all .dis_txt{font-size: 18px;}
.account{width: 90%;padding:5% 20% 6%;}
.tit3{width: 90%;}
.tit2{width: 35%;}
.tit{width: 90%;}
.coupon { width: 54%;}
.logo{width:90%;}
.content02{padding: 11% 0% 0% 0%;}
.coupon_tit {width: 55%;position: absolute;top: -7%;left: 22%;}
.use_event {width: 90%;padding: 11% 6% 3%;}


/* action */
.action{display:block;}
.action-item{width: 56%;margin:5% auto;}
.btn_wrap{gap: 0;}
.list_btn{width: 32%;}

/* card */
.card-container{flex-direction: column;}
.card {width: 68%;margin: 0 auto;padding: 31px;}
.stxt{width: 80%;}
.stxt2{width: 100%;}
.usetit {width: 25%;}
/* 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 .deco01 { width: 40%; position: absolute; top: 55%; left: 49.5%;}
.kv .deco02 {width: 25%;position: absolute;top: 54%;left: 5.5%;}
.kv .bubble02{left: 9%;}
/* event */
.event_txt {font-size: 16px;margin: 2% auto 2%;text-align: center;}
.event_tit{width: 70%;}
.event_date{font-size: 18px;}
.dis_item_all .dis_tit{width: 65%; margin: 10% auto 6%;}
.dis_item_all .dis_txt{font-size: 16px;}
.dis_item_all .dis_icon{width: 35%;}
.dis_item_all .dis_store{width: 40%;}
.eaves{width: 114%; top: -1%; left: -7%;}
.man{display: none;}
.event_point{font-size: 15px;}
.account{width: 90%;padding:5% 6% 6%;}
.tit2 { width: 46%; margin-top: 7%;}
.tit3 { width: 92%;font-size: 22px;}
.event_txt2 { width: 90%; font-size: 18px;}
.coupon {width: 80%;margin: 6% auto;}
.action-item {width: 92%;margin-top: 8%;}
.list_btn{width: 45%; margin-top: 5%;}
.chain {width: 8%;position: absolute; top: -1.8%; left: 5%;}
.chain02 {width: 8%;position: absolute; top: -1.8%; right: 5%;}
.stxt{width: 99%;}
.card {width: 80%;}
.ticket-img{width: 75%;margin: 0 auto;}
.coupon_tit {width: 78%;position: absolute;top: -9%;left: 10%;}

/* pxpay */
.notice_tit {
  width: 188px;
  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) {
    .card {width: 95%;padding: 4%;}
    .usetit {width: 38%;}
    .coupon_tit{top: -6%;}
    .stxt2{width: 99%; font-size: 13px;}

}