@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;
}
@font-face {
    font-family: 'SweiGothicCJKtc';
    font-style: normal;
    font-weight: 300;
    src: url('https://www.yuantabank.com.tw/bankwebIMG/event/fonts/SweiGothicCJKtc-Light.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'SweiGothicCJKtc';
    font-style: normal;
    font-weight: 400;
    src: url('https://www.yuantabank.com.tw/bankwebIMG/event/fonts/SweiGothicCJKtc-Regular.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'SweiGothicCJKtc';
    font-style: normal;
    font-weight: 500;
    src: url('https://www.yuantabank.com.tw/bankwebIMG/event/fonts/SweiGothicCJKtc-Medium.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'SweiGothicCJKtc';
    font-style: normal;
    font-weight: 700;
    src: url('https://www.yuantabank.com.tw/bankwebIMG/event/fonts/SweiGothicCJKtc-Bold.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'SweiGothicCJKtc';
    font-style: normal;
    font-weight: 900;
    src: url('https://www.yuantabank.com.tw/bankwebIMG/event/fonts/SweiGothicCJKtc-Black.ttf') format('truetype');
    font-display: swap;
}

/* ------------------------------- main ------------------------------- */
* {margin: 0; padding: 0;/* box-sizing: border-box; */}
body{width: 100%; height: 100%; font-family: 'SweiGothicCJKtc','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: #3D2F25; padding-top: 80px; font-size: 12px; background: #FFDF8E;}
.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: 100% auto; position: relative;}
.kv{width: 100%; max-width: 1920px; height: 0; padding-bottom: 41.6666667%; margin: 0 auto; position: relative;}
.kv .kv_tit{width: 30%; position: absolute; top: 19%; left: 14.8%;}
.kv .people{width: 38%; height: 0; padding-bottom: 28.5%; position: absolute; top: 10%; right: 12.2%;}
.kv .people .girl-red{width: 42.9%; position: absolute; top: 0; right: 0.8%; transform-origin: center bottom; animation: girl 1s linear infinite alternate-reverse;}
.kv .people .girl-green{width: 47.9%; position: absolute; top: 0.6%; left: 0.2%; transform-origin: center bottom; animation: girl 1s linear infinite alternate;}
.kv .people .man{width: 96%; position: absolute; bottom: 0; left: 2%;}
.kv .people .man::before{display: inline-block;
    content: '';
    background: url("../images/smoke.png") center top no-repeat;
    background-size: 100% auto;
    width: 35%;
    height: 0;
    padding-bottom: 35%;
    position: absolute;
    top: 30%;
    left: 30%;
    z-index: 1;
    opacity: 0;
    animation: smoke 4s infinite;}
/* content */
.content_container{width: 100%; margin: 0 auto; color: #282828; background-size: 1920px; padding: 4% 4% 8%; position: relative;}
.content{width: 100%; max-width: 1480px; background: url("../images/check-bg.png") center top repeat-y; background-size: 100% auto; margin: 0 auto; padding: 6.5%;}
.lefthand{width: 32.23958%; position: absolute; left: -9.5%; top: 17%; animation: hand 1s linear infinite alternate-reverse;}
.righthand{width: 33.3854%; position: absolute; right: -9.5%; top: 17%; animation: hand 1s linear infinite alternate;}
/* event */
.event{width: 100%; background: rgba(255, 255, 255, 0.9); margin: 0 auto; padding: 5% 10%; text-align: center; line-height: 1.8; display: flex; flex-direction: column; gap: 60px;}
.event_part{display: flex; flex-direction: column; letter-spacing: 2px; background: rgba(255, 255, 255, 0.3);}
.event_box{display: flex; flex-direction: column; align-items: center; gap: 20px;}
.event_cont{display: flex; flex-direction: column; align-items: center; gap: 10px;}
.event_icon{width: 100px;}
.event_tit{display: flex; font-size: 36px; justify-content: center; align-items: center; font-weight: 700; line-height: 1.8; letter-spacing: 3px; color: #F66D0D; text-align: center;}
.event_txt_cont{text-align: left; flex: 1;}
.event_txt{font-size: 24px; font-weight: 700; line-height: 1.8; letter-spacing: 2px;}
.tt-bold{font-weight: bold;}
.blue{color: #3D5CBF;}
.red{color: #EC3333;}
.mobOnly{display: none;}
/* discount */
.discount-cont{width: 100%; display: flex; flex-direction: column; align-items: center; gap: 40px;}
.discount{width: 100%; height: 100%; display: flex; justify-content: center; margin-top: 4%; gap: 30px;}
.discount-item{width: 48%; height: auto; padding: 8% 4% 4%; background: #ffffff; border: solid 3px #3D2F25; border-radius: 15px; text-align: center; position: relative;}
.dis_tit{width: 60%; height: 0; padding-bottom: 14.16%; position: absolute; left: 20%; top: -8%;}
.dis_tit img{display: inline-block; width: 100%;}
.dis_cont{display: flex; flex-direction: column; gap: 30px; align-items: center;}
.dis_cont .dis_txt{font-size: 24px; font-weight: 700; line-height: 1.6;}
.dis_cont .dis_txts{font-size: 16px; color: #656565; font-family: 'Noto Sans TC';}
.dis_cont .dis_percent{width: 100%; max-width: 240px;}
.dis-cta {}
.dis-cta a {
    width: 240px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    font-family: 'Noto Sans TC';
    font-size: 20px;
    color: #3D2F25;
    background: #FFDF8E;
    border-radius: 50px;
    padding: 8px 50px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dis-cta a:hover {transform: translateY(6px); box-shadow: 0 0 0 #282828;}
.dis-cta a::after {
    display: inline-block;
    content: "";
    width: 24px;
    height: 8px;
    background: url("../images/arrow.svg") no-repeat center;
    background-size: contain;
}
.dis-cta a:hover::after {animation: ArrowMove 0.8s ease-in-out infinite;}
@keyframes ArrowMove {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(8px);
    }
    100% {
        transform: translateX(0);
    }
}
/* action */
.action{display:-webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center;}
.action-item{-webkit-flex: 0 1 324px; flex: 0 1 324px; max-width: 324px;}
.action-item a{display: block;}
.action-item+.action-item{margin-left: 25px;}
.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: 45px; -webkit-transform:translateY(7px); transform:translateY(7px);}
.btn img{position:relative;width:100%; z-index: 5; transition:.2s;}
.btn.blue::after{background-color: #282828;}
.btn.red::after{background-color: #282828;}
.btn:hover img{-webkit-transform:translateY(6px); transform:translateY(6px);}
/* easywallet */
.easywallet_container{width: 100%; margin: 0 auto; color: #282828; background: #FFECC2; padding: 8% 4%; position: relative;}
.easywallet_container::before{
 content:"";
 background-image: url("../images/wave.png");
 background-repeat:no-repeat;
 background-position:center bottom;
 background-size:100% auto;
 background-color:#FFDF8E;
 display:block;
 width:100%;
 height:0;
 padding-bottom: 2.6%;
 position: absolute;
 top:0;
 left:0;
}
.easywallet{width: 100%; max-width: 1200px; margin: 0 auto; padding: 4%; background-color: #ffffff; border-radius: 30px; position: relative;}
.pay{width: 19%; position: absolute; right: 4.5%; top: 18%;}
.muffin{width: 13%; position: absolute; left: 5.5%; bottom: 8%;}
.account{width: 100%; max-width: 1040px; margin: 0 auto; padding: 6% 4% 2%; position: relative; font-family: 'Noto Sans TC';}
.step{position:relative;display:-webkit-flex;display:flex;}
.step-title{position:absolute;top:0;right:16%;width:100%;max-width:50%;}
.step-title img{width:100%;}
.step-img{-webkit-flex:0 0 auto;flex:0 0 auto;max-width:30%;}
.step-img img{width:100%;}
.step-content{-webkit-flex:1;flex:1;margin:10% 0 0 6%;}
.step-content .subTitle{max-width:558px;padding-top:10%;}
.step-content .subTitle img{width:60%;}
.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:#FAB238}
.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:#FFF4DB; 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:#1361B9; text-decoration:none; border-bottom:1px solid #1361B9;margin:3% 0 0;}
/* notice */
.notice_container{background: #FFECC2;}
.notice{width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 6% 6%;}
.notice_tit{font-size: 28px; line-height: 1.8; text-align: center; color: #282828;}
.notice_all{font-family: 'Noto Sans TC'; font-size: 15px; line-height: 2; color: #282828;}
.notice_all a{text-decoration: underline; color: #005EC4; z-index:5;}
.notice_all ul{list-style-type: disc; padding-left: 24px;}
.notice_all ul>li{}
.notice_all ul>li>ol{margin: 0; padding-left: 18px; list-style-type: decimal;}
.notice_all ul>li>ol>li{}
.notice_all ul>li>ol>li>span{font-weight: 500; text-decoration: underline;}
.notice_all ul>li>ol>li>ol{padding-left: 24px;}
.notice_all ul>li>ol>li>ol>li{list-style: none; position: relative; counter-increment: section 1;}
.notice_all ul>li>ol>li>ol>li::before {
    content: "(" counter(section) ")";
    position: absolute;
    top: 0px;
    left: -5px;
    transform: translateX(-100%);
}
.notice_all ul>li>ol>li>ol>li>ol{padding-left: 18px;}
.notice_all ul>li>ol>li>ol>li>ol>li{list-style-type: upper-alpha;}

#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(#FFECC2));
    background-image: -webkit-linear-gradient(top,rgba(254,239,212,0),#FFECC2);
    background-image: linear-gradient(-180deg,rgba(254,239,212,0),#FFECC2);
    height: 80px;
    position: absolute;
    left: 0;
    top: -80px;
    width: 100%;
}
#contTab:checked ~  .content-more .readmore{
    display: inline-block;
    background: #428AF0;
    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: 1440px) {
    /*kv*/
    .kv .kv_tit{width: 34%; top: 19%; left: 12.8%;}
    /* event */
    .event_icon{width: 80px;}
    .event_tit{font-size: 32px;}
    .event_txt{font-size: 20px;}
    /* easywallet */
    .pay{display: none;}
    .muffin{display: none;}
}

@media screen and (max-width: 1200px) {
    /* event */
    .event_tit{font-size: 28px;}
    .location{font-size: 18px;}
    /* content */
    .content{padding: 4.5%;}
    /* event */
    .event{padding: 5%;}
    /* discount */
    .dis_cont .dis_txt{font-size: 18px;}
    .dis_cont .dis_txts{font-size: 14px;}
    .dis_cont .dis_percent{width: 90%; max-width: 180px;}
}
@media screen and (max-width: 1024px) {
    .main{padding-top: 76px;}
    /* event */
    .br-none{display: none;}
    /* action */
    .dis-cta a {width: 200px; padding: 8px 30px; font-size: 18px;}
    /* action */
    .action-item{max-width: 200px; margin:auto;}
}
@media screen and (max-width: 767px) {
    .main{padding-top: 58px;}
    /* kv */
    .webOnly{display: none;}
    .mobOnly{display: block;}
    .kv_container{width: 100%; background: url("../images/kv_bg-m.png") center top no-repeat; background-size: cover;}
    .kv{width: 100%; height: 0; padding-bottom: 146.153846153%;}
    .kv .kv_tit{width: 80%; position: static; margin: 0 auto; padding-top: 11%;}
    .kv .people{width: 79%; height: 0; padding-bottom: 59.5%; position: absolute; top: 48%; right: 9%;}
    /* content */
    .content{background: none; padding: 0;}
    .lefthand{display: none;}
    .righthand{display: none;}
    /* event */
    .event{background: #FFFFFF; border-radius: 30px; padding: 12% 10%; gap: 60px;}
    /* discount */
    .discount{flex-direction: column; gap: 80px;}
    .discount-item{width: 100%; padding: 16% 4% 8%; }
    /* action */
    .action{display:block;}
    .action-item{max-width:288px;margin:auto;}
    .action-item+.action-item{margin-top:30px;margin-left:auto;}
    /* easywallet */
    .easywallet_container{padding: 16% 4% 8%;}
    .easywallet_container::before{
         content:"";
         background-image: url("../images/wave-m.png");
         background-repeat:no-repeat;
         background-position:center bottom;
         background-size:100% auto;
         background-color:#FFDF8E;
         display:block;
         width:100%;
         height:0;
         padding-bottom: 6.666667%;
         position: absolute;
         top:0;
         left:0;
    }
    .easywallet{padding: 8% 6%;}
    .account{padding: 6% 4%;}
    .step{display:block;}
    .step-title{position:static;box-sizing:border-box;max-width:90%;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{width:70%;margin:0 auto;}
    .stepList-text{font-size: 18px;}
    .stepList-text p{padding-bottom: 0;}
    .moreInfo a{font-size:20px; margin-top: 5%;}
    /* notice */
    .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: 2.5vw;
    }
}

@media screen and (max-width:480px) {
    /* content */
    .content_container{padding: 10% 4% 12%;}
    /* event */
    .event_icon{width: 60px;}
    .event{gap: 40px; padding: 10% 6%;}
    .event_part{padding: 3%;}
    .event_tit{font-size: 24px; letter-spacing: 1px;}
    .event_txt{font-size: 18px;}
    /* discount */
    .dis_tit{font-size: 20px; line-height: 2.2; border-radius: 10px;}
    .discount{gap: 50px;}
    .discount-item{padding: 16% 4% 10%; border: solid 2px #3D2F25;}
    .location{font-size: 16px;}
    /* easywallet */
    .step-img{max-width:70%;}
    .step-content .subTitle img{width:80%;}
    .stepList-text{font-size: 16px; height: auto; padding: 5px 10px;}
    .moreInfo a{font-size: 18px;}
    /* action */
    .action-item{max-width:240px;margin:auto;}
    .action-item+.action-item{margin-top:20px;margin-left:auto;}
    .btn::after{-webkit-transform:translateY(4px);transform:translateY(4px);}
    .btn:hover img{-webkit-transform:none;transform:none;}
    /* notice */
    .notice_tit{font-size: 20px;}
}

/* animation */
@keyframes bf {
    0% {transform: rotate(-2deg);}
  100% {transform: rotate(2deg);}
}


/* float */
.float {position: fixed; top: 250px; right: 20px; width: 50px; z-index: 50; opacity: 0; transition: opacity 0.3s ease; /* 增加淡入效果比較優雅 */}
.float.show {opacity: 1}
.float-item {display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 20px 10px; border-radius: 50px; background-color: #ED3333; font-size: 18px;}
.float-item img {width: 22px; }
.float-item div {color: #FFF; letter-spacing: 1px; -webkit-writing-mode: vertical-lr; -ms-writing-mode: tb-lr; writing-mode: vertical-lr;}
.float-item.-blue {margin-top: 16px; background-color: #3D5CBF;}

@media only screen and (max-width: 1239px) {
    .float {right: 12px; width: 40px;}
    .float-item {padding: 20px 10px; font-size: 16px;}
    .float-item img {width: 18px;}
}

@media screen and (max-width: 767px) {
    .float {display: flex; width: 100%; top: auto; bottom: 0; right: 0;}
    .float-item {flex: 1; flex-direction: row; justify-content: center; padding: 15px 10px;  border-radius: 0; font-size: 15px; line-height: 18px;}
    .float-item div {
          -webkit-writing-mode: initial;
              -ms-writing-mode: initial;
                  writing-mode: initial; }
    .float-item.-blue {margin-top: 0;}
}

/* animation */
@keyframes girl {
    0% {transform: skewX(0);}
  100% {transform: skewX(2deg);}
}
@keyframes smoke {
  0% {top: 30%; opacity: 1;}
100% {top: 10%; opacity: 0;}
}
@keyframes hand {
  0% {transform: rotate(0deg);}
100% {transform: rotate(3deg);}
}