@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: 520px; margin: 0 auto; position: relative;}
.kv .kv_tit{width: 35%; position: absolute; top: 20%; left: 12%;}
.kv .storecard{width: 62%; position: absolute; top: 25%; left: 43%;}
.kv .girl{width: 20%; position: absolute; top: 8%; left: 55.5%; z-index: 1;animation: headShake 2s ease-in infinite alternate;}
.kv .boy{width: 28%; position: absolute; top: 8.7%; left: 65%;z-index: 10;animation: headShake 2s ease-in infinite alternate;}
.mobOnly{display: none;}
.webOnly{display: block;}
.three{width:7.6%;z-index: 3;position: absolute;top: 36.3%;left: 28.3%;animation-name:bounceIn;animation-duration: 1s;}
/* content */
.content{width: 100%; margin: 0 auto; background-color: #00AFD8 ;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;}
.kv_logo{width: 25%; margin: 0 auto; padding-top: 4%;}
/* event */
.coupon{width:30%;margin: 0 auto;margin-top: 3%;}
.s_txt{font-size: 14px;margin-top: 4%;font-weight: 400;color: #5E5E5E;width: 89%; text-align: left; margin: 3% auto 0%;}
.tit2{font-size: 28px;font-weight: bold;color: #000000;background-color: #FFD100;border-radius: 30px; margin:2% auto 2%;width: 23%;}
.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: 59px auto; padding: 1% 0% 2%; text-align: center; line-height: 1.5;background: #ffffff; border: #000000 solid 3px;border-radius: 16px;}
.event_date{font-size: 22px;color: #124c8c; font-weight: bold;}
.event_txt{font-size: 22px;color: #00000c; }
.event_txt2{font-size: 22px;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%;}
/* 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;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_wrap 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;}
.btn_wrap{display: flex;flex-direction: column;align-items: center;gap: 20px;}
/* notice */
.notice_container{background: #FFF3BD ;}
.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: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(#FFF3BD ));
    background-image: -webkit-linear-gradient(top,rgba(254,239,212,0),#FFF3BD );
    background-image: linear-gradient(-180deg,rgba(254,239,212,0),#FFF3BD );
    height: 90px;
    position: absolute;
    left: 0;
    top: -80px;
    width: 100%;
}
#contTab:checked ~  .content-more .readmore{
    display: inline-block;
    background: #00AFD8;
    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 .boy {width: 25%; position: absolute; top: 18.4%; left: 66%;}
.kv .girl {width: 18%; position: absolute; top: 17.5%; left: 57.5%;}
.three { width: 8.2%;z-index: 3; position: absolute; top: 36.3%; left: 31.3%; animation-name: bounceIn; animation-duration: 1s;}

/* content */
.content{width: 100%; margin: 0 auto; background-color: #00AFD8 ;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: 40%;}
/* event */
.event{width:74%;}
.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: 33%;}
.coupon {width: 40%;margin:3% auto;}
.event_txt2{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: 40%;  top: 16%;  left: 11%;}
.kv .boy {width: 28%;  position: absolute;  top: 8.33%;  left: 68%;}
.kv .girl { width: 19%; position: absolute;  top: 13%;  left: 54%;}

/* content */
.content{width: 100%; max-width: 960px;}
.kv_logo{width: 44%;}
/* 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: 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%;}
/* 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{padding: 0 5% 4%;}
.action-item{width: 270px;margin: 3% auto;}
/* 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: 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 .boy {width: 43%;top: 55.36%;left: 48%;}
.kv .girl {width: 31%;position: absolute;top: 54.6%;left: 23%;}
.three {width: 15.6%; top: 20.3%; left: 48.3%;}
/* event */
.event{margin: 30px auto; padding: 4% 2%;}
.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: 45%;}
.tit{width: 90%;}
.coupon { width: 54%;}

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

/* 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-top: 8%;}
/* 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: 56%;font-size: 21px;
    }
        .tit3 {
        width: 92%;font-size: 22px;
    }
        .event_txt2 {
        width: 90%;
        font-size: 20px;
    }
        .coupon {width: 80%;margin: 6% auto;}
        .s_txt{width: 80%;}

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