@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;
}
/* ------------------------------- main ------------------------------- */
* {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; }
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: #303035; padding-top: 80px; font-size: 12px; background: #FFFFFF;}
.section{width: 100%; max-width: 1920px; margin: 0 auto;}
.web-only{display: inline-block;}
.mob-only{display: none;}
/* 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: 1440px; height: 845px; margin: 0 auto;}
.kv .title{width: 60%; margin: 0 auto; padding-top: 8%;}
.kv .tit_img{width: 100%; height: 0; padding-bottom: 71.398527865%; position: relative;}
.kv .tit{width: 100%; position: absolute; top: 0; left:0;}
.kv .hand{width: 26.5%; position: absolute; bottom: 10.8%; right: 21%; transform-origin: center right; animation: manhandShake 1s ease-in-out infinite alternate;}
.kv .man{width: 38%; position: absolute; bottom: 3.8%; right: 1%;}
.kv .earphone{width: 6.8%; position: absolute; bottom: 15%; right: 8.5%;}
.mobOnly{display: none;}
/* content */
.content_container{ width: 100%; margin: 0 auto; padding: 1% 4% 6%; background: url("../images/bg_bottom.png") center bottom no-repeat, linear-gradient(#e0f1f8 0%, #f9fbfd 40%, #ffffff 100%); background-size: 100% auto;}
.content{width: 100%; max-width: 1300px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 60px; color: #606060; font-weight: 500; line-height: 1.7; text-align: center;}
/* event */
.event{width: 100%; background: #ffffff; padding: 6%; border: 2px solid #9d9d9b; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; box-sizing: border-box;}
.event_tag{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(20px, 5vw, 36px);
    letter-spacing: 1px;
    color: #ffffff;
    text-align: center;
    padding: 8px clamp(20px, 5vw, 40px);
    background: #d53f15;
    border-radius: 10px;
    white-space: nowrap;
}
.event_content{display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 60px; padding-top: 4%;}
.event_part{display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; letter-spacing: 1px;}
.event_tit{
    font-size: clamp(18px, 2.5vw + 8px, 30px);
    color: #ffffff;
    text-align: center;
    padding: 8px clamp(40px, 6vw, 80px);
    background: #009fe8;
    border-radius: 50px;
    white-space: nowrap;
}
.event_txt{font-size: 26px;}
.event_notice{font-size: 22px;}
/* action */
.action{display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;}
.action-item{-webkit-flex:0 1 400px;flex:0 1 400px;max-width:400px;}
.action-item a{display: block;}
.action-item+.action-item{margin-left:25px;}
.btn{position:relative;display:block;border-radius:100px;cursor:pointer;}
.btn::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;display:block;border-radius:100px;-webkit-transform:translateY(8px);transform:translateY(8px);}
.btn img{position:relative;width:100%;z-index:1;transition:.2s;}
.btn::after{background-color:#3d3d3d;}
.btn:hover img{-webkit-transform:translateY(6px);transform:translateY(6px);}
/* logo */
.logo_container{width: 100%; padding: 60px 40px; background: #FFFFFF;}
.logo{width: 100%; max-width: 917px; margin: 0 auto;}
/* notice */
.notice_container{background: #eeeeef;}
.notice{width: 100%; max-width: 1600px; margin: 0 auto; padding: 5%;}
.notice_all{padding: 2%; font-size: 20px; line-height: 2; color: #606060; text-align: justify;}
.notice_all a{color: #e94c96; font-weight: bold; text-decoration: underline;}
.notice_all ul{margin: 0; padding-left: 18px; list-style-type: cjk-ideographic;}
.notice_all ul>li{}
.notice_all ul>li>ol{list-style-type: decimal; padding-left: 18px;}
.notice_all ul>li>ol>li>ul{list-style-type: disc; padding-left:22px;}
.notice_all ul>li>ol>li>ul>li{}
.notice_all ul>li>ol>li>ol{list-style-type: none; padding-left: 18px;}
.notice_all ul>li>ol>li>ol>li{position: relative; counter-increment:section;}
.notice_all ul>li>ol>li>ol>li::before{content:"(" counter(section,decimal) ")";position:absolute;top:0;left:-5px;-webkit-transform:translateX(-100%);transform:translateX(-100%)}
.notice_all ul>li>ol>li>ol>li>ul{list-style-type: circle;}
@media screen and (max-width: 1440px) {
.kv{width: 100%; height: 0; padding-bottom: 58.68055555555%;}
.event_txt{font-size: 22px;}
.event_notice{font-size: 18px;}
.action-item{-webkit-flex:0 1 340px;flex:0 1 340px;max-width:340px;}
.notice_all{font-size: 18px;}
}
@media screen and (max-width: 1024px) {
.main{padding-top: 76px;}
.web-only{display: none;}
.mob-only{display: inline-block;}
.kv .title{padding-top: 5.8%;}
.kv .tit_img{width: 100%; height: 0; padding-bottom: 77.917981%; position: relative;}
.kv .hand{bottom: 10%;}
.kv .man{bottom: 3.4%;}
.content_container {padding: 1% 4% 8%;}
.content {gap: 40px;}
.event_content{padding-top: 6%; gap: 30px;}
.event_tag {font-size: clamp(20px, 3.8vw, 32px); padding: 8px clamp(20px, 4.5vw, 36px);}
.notice_all{font-size: 16px;}
}
@media screen and (max-width:767px) {
.main{padding-top: 58px;}
/* kv */
.kv_container{background: none;}
.kv{width: 100%; height: 0; padding-bottom: 93.75%; margin: 0 auto; background: url("../images/kv_bg_m.png") center top no-repeat; background-size: 100% auto;}
.kv .title{width: 84%; padding-top: 16%;}
/* content */
.content_container{padding: 1% 4% 14%; background: url("../images/bg_bottom.png") center bottom no-repeat, linear-gradient(#e0f1f8 0%, #ffffff 40%, #ffffff 100%); background-size: 100% auto;}
/* event */
.event{padding: 6% 6% 10%;}
.event_content{padding-top: 12%;}
.event_tag{font-size: clamp(23px, 3.8vw, 32px); padding: 8px clamp(22px, 4.5vw, 36px);}
.event_tit{font-size: clamp(22px, 2.8vw + 8px, 34px); padding: 6px clamp(40px, 6vw, 80px);}
.event_txt{font-size: 18px;}
.event_notice{font-size: 16px;}
/* action */
.action{display:block;}
.action-item{max-width:300px;margin:auto;}
.action-item+.action-item{margin-top:30px;margin-left:auto;}
.logo_container{padding: 40px 25px;}
}
@media screen and (max-width:450px) {
.event_part{gap: 10px;}
.event_txt{font-size: 4.4vw; letter-spacing: 0px; line-height: 1.8;}
.event_notice{font-size: 3.4vw;}
/* action */
.action-item{max-width:240px;margin:auto;}
.action-item+.action-item{margin-top:30px;margin-left:auto;}
.btn::after{-webkit-transform:translateY(4px);transform:translateY(4px);}
.btn:hover img{-webkit-transform:none;transform:none;}
/* notice */
.notice{padding: 6%;}
.notice_all{font-size: 14px;}
}

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