@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: #303030; padding-top: 80px; font-size: 12px; background: #D4E9E2;}
.section{width: 100%; max-width: 1920px; margin: 0 auto;}
.web-only{display: inline-block;}
.mob-only{display: none;}
.-web-pad{display: inline-block;}
.-mob{display: none;}
/* kv */
.kv_container{width: 100%; margin: 0 auto; background: url("../images/kv_bg.png") center top no-repeat; background-size: cover; overflow: hidden; position: relative;}
.kv_container::after{
    content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      height: 0;
      padding-bottom: 11.45833333333%;
      background: url("../images/kv_bg_up.png") no-repeat center bottom / 100% auto;}
.kv{width: 100%; max-width: 1920px; height: 0; padding-bottom: 39.0625%; margin: 0 auto; position: relative;}
.kv .kv_tit{width: 50%; margin: 0 auto; padding-top: 6.5%; animation-duration: 1.5s;}
.kv .kv_text{font-size: 1.5vw; font-weight: 700; line-height: 1.6; letter-spacing: 1px; text-align: center; color: #3C282A; padding-top: 1.5%;}
.kv p.kv_text_date{color: #267359;}
.kv .kv_text span{color: #7C3C12;}
.kv .coin1{width: 4.4%; position: absolute; top: 11%; left: 2%; animation: coin 1s ease-in-out infinite alternate;}
.kv .coin2{width: 4.94%; position: absolute; top: 10%; right: 1%; animation: coin 1s ease-in-out infinite alternate-reverse;}
.kv .man{width: 17.8125%; position: absolute; top: 10%; right: 5%; transform-origin: center bottom; animation: people 4s linear infinite alternate-reverse;}
.kv .woman{width: 21.354167%; position: absolute; top: 11%; left: 2.3%; transform-origin: center bottom; animation: people 4s linear infinite alternate;}
/* content */
.content_container{width: 100%; margin: 0 auto; background: url("../images/deco.png") no-repeat center top; background-size: 1920px;}
.content{width: 100%; max-width: 1540px; margin: 0 auto; padding: 0 6% 6%; display: flex; flex-direction: column; gap: 50px;}
/* info */
.info{width: 100%; margin: 0 auto; padding: 100px 0 0;}
.info-wrap{display: flex; flex-direction: column; justify-content: center; gap: 60px; padding: 100px 100px 60px; border-radius: 15px; background: #FFFFFF; text-align: center; position: relative;}
.info-text-wrap{display: flex; flex-direction: column; gap: 5px; justify-content: center; position: relative;}
.info-tit{position: absolute; top: -50px; left: 50%; transform: translateX(-50%); width: 460px;}
.info-text{font-size: 56px; font-weight: 700; letter-spacing: 3px; line-height: 1.6; color: #267359;}
.info-note span{font-size: 18px; line-height: 1.6; color: #3C282A; display: inline-block; padding: 5px 15px; border: 1px solid #3C282A;}
.info-icon{width: 150px; position: absolute; right: 20px; top: 0;}
.info-num {position: absolute; top: -10px; right: -5px; width: 50px; font-size: 18px; font-weight: 700; line-height: 50px; color: #FFF;}
.info-num span {position: relative;}
.info-num::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../images/badge.svg) no-repeat center / contain;
    -webkit-animation: cycle 6s linear infinite;
    animation: cycle 6s linear infinite;
}
/* event */
.event{display: flex; gap: 30px;}
.event-wrap{display: flex; flex-direction: column; gap: 15px; flex: 1;}
.event-tit{font-size: 26px; font-weight: 700; line-height: 1.6; letter-spacing: 1px; color: #FFFFFF; background-color: #6B4C26; display: inline-block; width: 320px; margin: 0 auto; padding: 12px; border-radius: 50px;}
.event-text{font-size: 20px; font-weight: 700; line-height: 1.6; color: #6B4C26;}
/* form */
.form {border-radius: 15px; overflow: hidden; border: 1px solid #DBC6B2; }
.form table{width: 100%; font-size: 18px; background: #FFF9F2; height: 400px;}
.form table th{height: 80px; font-size: 20px; font-weight: 700; color: #FFF; background: #B59161;}
.form table th,.form table td{vertical-align: middle; text-align: center; border: 1px solid #DBC6B2; padding: 10px;}
.form .border-t{border-top: none;}
.form .border-l{border-left: none;}
.form .border-r{border-right: none;}
.form .border-b{border-bottom: none;}
.form .table-txtxl{font-size: 36px; line-height: 1.6;}
.form .table-txtl{font-size: 24px;}
.form .table-txtm{font-size: 18px;}
.form .table-txtb{font-weight: 700;}
.form .table-lb{background: #F2E3D6;}
.form .table-txtc{color: #CE6700;}
.form .table-txto{color: #F7613E;}
.form .table-txtdb{color: #936537;}
.form .table-txtbk{color: #303030;}
.form .table-txtleft{text-align: left;}
.form ol.table-list{list-style-type: decimal; padding-left: 22px;}
/* award */
.info-text2{font-size: 40px;}
.mob-block{display: none;}
.award-wrap{display: flex; justify-content: space-evenly;}
.award-item{display: flex; flex-direction: column; gap: 10px; align-items: center;}
.award-icon{width: 150px; position: relative;}
.award-num {position: absolute; top: -10px; right: -5px; width: 50px; font-size: 18px; font-weight: 700; line-height: 50px; color: #FFF;}
.award-num span {position: relative;}
.award-num::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../images/badge.svg) no-repeat center / contain;
    -webkit-animation: cycle 6s linear infinite;
    animation: cycle 6s linear infinite;
}
.award-text{font-size: 18px; font-weight: 700; line-height: 1.6;}
/* notice */
.notice_container{width: 100%; margin: 0 auto;}
.notice_list{width: 100%; padding: 30px 50px; display: flex; flex-direction: column; text-align: left; background: #FFFFFF; border-radius: 15px;}
.notice_tit{width: 100%; display: flex; align-items: flex-start; gap: 20px; cursor: pointer;}
.notice_tit::after{content: ''; display: block; width: 24px; height: 28px; background: url("../images/arrow.svg") no-repeat center / contain; transform: rotate(0deg); transition: all 0.3s;}
.notice_tit.-open{/*變化*/}
.notice_tit.-open::after{transform: rotateX(180deg);/*變化*/}
.notice_tit h4{flex: 1; font-size: 20px; font-weight: 700;}
.notice_txt{font-size: 16px; margin-top: 2%; border-top: 1px solid #303030; display: none;/*先隱藏*/}
.notice_txt span{color: #007FE0;}
.notice_txt>ul{margin-top: 2%; list-style-type: cjk-ideographic; padding-left: 36px; line-height: 2; text-align: justify;}
.notice_txt>ul>li{font-weight: 400;}
.notice_txt>ul>li>p{font-weight: 700;}
.notice_txt>ul>li>ol{list-style-type: decimal; padding-left: 20px;}
.notice_txt>ul>li>ol>li{}
.notice_txt>ul>li>ol>li>ol{padding-left: 20px;}
.notice_txt>ul>li>ol>li>ol>li{}
.notice_txt>ul>li>ol>li>ol>li>ul{list-style-type: disc; padding-left: 20px;}
.notice_txt>ul>li>ol>li>ol>li>ul>li{}
ol.brackets {
    list-style-type: none; }
    ol.brackets > li {
      position: relative;
      counter-increment: section; }
      ol.brackets > li::before {
        content: "(" counter(section, decimal) ")";
        position: absolute;
        top: 0;
        left: -0.3125em;
        transform: translateX(-100%);
        min-width: 1.25em;
        text-align: center; }

@media screen and (max-width: 1440px) {
    .info-wrap{padding: 100px 60px 60px;}
    .info{padding: 60px 0 0;}
    .info-tit{position: absolute; top: -42px; width: 400px;}
}
@media only screen and (max-width: 1240px) {
    .content{padding: 0 4% 6%;}
    /* info */
    .info-wrap{padding: 100px 30px 60px;}
    .info-text{font-size: 48px;}
    /* event */
    .event{display: flex; gap: 30px;}
    .event-wrap{display: flex; flex-direction: column; gap: 15px; flex: 1;}
    .event-tit{font-size: 22px; width: 280px; padding: 10px;}
    .event-text{font-size: 18px;}
    /* form */
    .form table{font-size: 16px; height: 400px;}
    .form table th{font-size: 18px;}
    .form .table-txtxl{font-size: 36px;}
    .form .table-txtl{font-size: 24px;}
    .form .table-txtm{font-size: 18px;}
    .form ol.table-list{list-style-type: decimal; padding-left: 22px;}
    /* award */
    .info-text2{font-size: 32px;}
}
@media screen and (max-width: 1024px) {
    .main{padding-top: 76px;}
    /* content */
    .content_container{background: none;}
    /* info */
    .info{padding: 60px 0 0;}
    .info-tit{position: absolute; top: -38px; width: 360px;}
    .info-text{font-size: 38px;}
    .info-icon{width: 120px;}
    .info-num {width: 45px; font-size: 16px; line-height: 45px;}
    /* event */
    .event{flex-direction: column; gap: 40px;}
    .br-none{display: none;}
    /* form */
    .form table{height: auto; min-height: 360px;}
    /* award */
    .info-text2{font-size: 28px;}
    .award-icon{width: 130px; position: relative;}
    .award-num {width: 45px; font-size: 16px; line-height: 45px;}
    .award-text{font-size: 16px;}
}

@media screen and (max-width: 820px) {
    .web-only{display: none;}
    .mob-only{display: inline-block;}
    /* kv */
    .kv_container{width: 100%; background: none;}
    .kv_container::after{
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      height: 0;
      padding-bottom: 24.871794871%;
      background: url("../images/kv_bg_up_m.png") no-repeat center bottom / 100% auto;}
    .kv{width: 100%; max-width: 820px; height: 0; padding-bottom: 138.46153846%; background: url("../images/kv_bg_m.png") center top no-repeat; background-size: 100% auto; position: relative;}
    .kv .kv_tit{width: 90%; margin: 0 auto; padding-top: 9.5%;}
    .kv .kv_text{font-size: 3.5vw; color: #FFFFFF; padding-top: 4%;}
    .kv p.kv_text_date{display: none;}
    .kv .kv_text span{color: #FFD561;}
    .kv .coin1{width: 9.8%; top: 58%; left: 4%;}
    .kv .coin2{width: 10.9%; top: 39%; right: 2%;}
    .kv .man{width: 31.88034188%; position: absolute; top: 55%; right: 16%;}
    .kv .woman{width: 38.205128205%; position: absolute; top: 56%; left: 14.5%;}
}  
@media screen and (max-width: 767px) {
    .main{padding-top: 58px;}
    .-web-pad{display: none;}
    .-mob{display: inline-block;}
    /* info */
    .info{padding: 30px 0 0;}
    .info-tit{position: absolute; top: -35px; width: 320px;}
    .info-text{font-size: 28px;}
    .info-icon{width: 130px; position: relative; right: 0; margin: 30px auto 0;}
    /* form */
    .form table th{font-size: 16px;}
    /* award */
    .award-wrap{flex-wrap: wrap; gap: 20px;}
    .award-item{width: 40%;}
    /* notice */
    .notice_container{margin: 0 auto 6%;}
    .notice_list{padding: 20px;}
    .notice_tit h4{font-size: 20px; line-height: 30px;}
    .notice_tit::after{width: 18px; height: 30px;}
    .notice_txt{font-size: 15px; margin-top: 3%;}
}
@media screen and (max-width: 520px) {
    /* info */
    .info-wrap{padding: 60px 20px 40px; gap: 30px;}
    .info-tit{position: absolute; top: -22px; width: 230px;}
    .info-note span{font-size: 14px;}
    .event-tit{font-size: 20px; width: 220px; padding: 8px;}
    /*form*/
    .form table{font-size: 15px;}
    .form table th{font-size: 14px; height: 60px;}
    .form .table-txtxl{font-size: 28px;}
    .form .table-txtl{font-size: 20px;}
    /* award */
    .info-text2{font-size: 20px;}
}


@keyframes coin {
    0% {transform: translateY(-8%); }
  100% {transform: translateY(8%); } 
}
@-webkit-keyframes coin {
    0% {transform: translateY(-8%); }
  100% {transform: translateY(8%); } 
}


@-webkit-keyframes people {
  0% {
    transform: skewX(0); }
  25% {
    transform: skewX(1.2deg); }
  50% {
    transform: skewX(0); }
  75% {
    transform: skewX(-1.2deg); }
  100% {
    transform: skewX(0); } 
}

@keyframes people {
  0% {
    transform: skewX(0); }
  25% {
    transform: skewX(1.2deg); }
  50% {
    transform: skewX(0); }
  75% {
    transform: skewX(-1.2deg); }
  100% {
    transform: skewX(0); } 
}

@-webkit-keyframes cycle {
  0% {
    transform: rotate(0); }
  100% {
    transform: rotate(360deg); } 
}

@keyframes cycle {
  0% {
    transform: rotate(0); }
  100% {
    transform: rotate(360deg); } 
}