@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: #FFD100; 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: 560px; margin: 0 auto; position: relative;}
.kv .kv_tit{width: 35%; position: absolute; top: 9%; left: 10%; animation: bounceInDown 1s;}
.kv .card{width: 16%; position: absolute; top: 9%; left: 50.5%; animation: tada 2s ease-in;}
.kv .five{width: 16%; position: absolute; top: 8%; left: 67.5%; animation: tada 2s ease-in 3s alternate;}
.kv .storecard{width: 62%; position: absolute; top: 25%; left: 43%;}
.kv .sushi{width: 38%; position: absolute; top: 30%; left: 50.5%; z-index: 1;}
.kv .fish{width: 20%; position: absolute; top: 27.4%; left: 68%;}
.kv .bubble01{width: 4%; position: absolute; top: 20%; left: 85%;animation: pulse 2s ease-in infinite alternate;}
.kv .bubble02{width: 3%; position: absolute; top: 35%; left: 48%;animation: pulse 2s ease-in infinite alternate;}
.mobOnly{display: none;}
.webOnly{display: block;}
/* content */
.content{width: 100%; margin: 0 auto; background-color: #255B90 ; padding: 5% 0% 0% 0%; background-image: url("../images/icon01.svg"),url("../images/icon02.svg"),url("../images/icon03.svg"),url("../images/icon04.svg");background-position:10% 60%,93% 62%,4% 17%,90% 25%;background-repeat: no-repeat,no-repeat,no-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{width: 60%;max-width: 1400px;margin: 0 auto; padding: 1% 0% 2%; text-align: center; line-height: 1.5;background: #ffffff; border-radius: 16px;}
.event_date{font-size: 22px;color: #124c8c; font-weight: bold;}
.event_txt{font-size: 20px;color: #00000c;width:80%;margin: 1% auto; }
.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: 80%; font-size: 15px; margin: 0 auto;color: #EC6D54; margin-top: 2%;}
/* pxpay */
.pxpay{padding:1% 1% 5%; position: relative; background: #FFF3BD;}
.account{width: 70%; max-width: 1200px; height: auto; margin: 0 auto ;background-color: #ffffff;padding: 5% 10%;border-radius: 0 0 10px 10px;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; margin: 2% 0% 6% 0%; gap: 15px;}
.action-item{-webkit-flex:0 1 270px;flex:0 1 270px;max-width:270px;}
.action-item a{display: block;}
.btn_wrap a{display: block; margin-top: 7%;}
.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:40px;-webkit-transform:translateY(6px);transform:translateY(6px);}
.btn::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;display:block;border-radius:40px;-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:#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: #255B90 ;}
.notice{width: 100%; max-width: 1600px; margin: 0 auto; font-size: 15px; line-height: 2; color: #ffffff; 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;} 
.notice_all ul>li>ol>li>ol>li{position: relative; counter-increment:section;left: 1%;}
.notice_all ul>li>ol>li>ol>li{list-style-type: disc;}
.notice_all ul>li>ol>li>ol>li>ul{list-style-type: disc;}
.notice_tit{width:200px;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(#255B90 ));
    background-image: -webkit-linear-gradient(top,rgba(254,239,212,0),#255B90 );
    background-image: linear-gradient(-180deg,rgba(254,239,212,0),#255B90 );
    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: 17%;}
.kv .fish {width: 18%; position: absolute; top: 27.4%; left: 67%;}
.kv .sushi {width: 35%; position: absolute; top: 30.5%; left: 53.5%;}
.kv .card {left: 53.5%;}

/* content */
.content{width: 100%; margin: 0 auto; background-color: #255B90 ;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;} */
/* event */
.event{width:74%;}
.event_date{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%;}
.event_txt{width: 90%;}
/* 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: 32%; top:9%; left:18%;}
.kv .fish {width: 19%;  position: absolute; top: 27%; left: 68%;}
.kv .sushi { width: 36%; position: absolute;  top: 30%;  left: 54%;}
.kv .card { width: 19%; position: absolute; top: 5%; left: 52.5%;}
.kv .five { width: 19%; position: absolute; top: 4%; left: 69.5%;}

/* content */
.content{width: 100%; max-width: 960px;}
/* event */
.event{width: 90%;}
.event_tit{width: 200px; margin: 1% auto 5%;}
.event_txt2{width: 89%;}
.coupon {width: 45%;}
.event_date{font-size: 24px;}
.event_txt{width: 89%; margin: 3% auto 0; font-size: 20px; 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%;}
/* pxpay */
.pxpay{padding:1% 1% 2%;}
.account{ height: auto; margin: 0 auto;padding: 5% 19% 6%;}
.tit3{width: 80%;  padding: 3% 0% 3%}
.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-item{width: 270px;}
/* notice */
.notice{width: 92%; padding: 2% 5% 5%;}
}
@media screen and (max-width:890px) {
.bbtn{width: 90%; margin: 0 auto;}
}

@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: 130%; background: none; 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: 78%;top: 5%;left: 12%;}
.kv .fish {width: 35%;top: 67.36%;left: 49%;}
.kv .sushi {width: 63%;position: absolute;top: 69%;left: 22%;}
.kv .card { width: 36%; position: absolute; top: 51%; left: 16.5%; }
.kv .five { width: 36%; position: absolute; top: 50%; left: 47.5%;}
.kv .bubble02 { width: 7%; position: absolute; top: 44%; left: 13%;}
.kv .bubble01 { width: 9%; position: absolute; top: 36%; left: 84%;}
/* event */
.event{padding: 4% 2%;}
.event_date{font-size: 20px;}
.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%;}

/* action */
.action{display:block;}
.action-item{max-width:300px;margin:5% auto;}
.bbtn {width: 270px;}
.btn_wrap{gap: 0;}
.list_btn{width: 32%;}

/* 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 .card { width: 40%; position: absolute; top: 50%; left: 13.5%;}
.kv .five { width: 40%; position: absolute; top: 50%; left: 46.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;}
.event_txt { font-size: 18px;width: 90%;}
.coupon {width: 80%;margin: 6% auto;}
.action-item { max-width: 220px;}
.list_btn{width: 45%; margin-top: 5%;}

/* 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;}
}