/* [設置 body style] 由 RD 加上，不用額外修改。 */
* { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-text-size-adjust: none; list-style: none;}
html, body { width: 100%; height: auto; font-size: 12px; line-height: 12px; font-family: "Century Gothic", "Helvetica Neue", "Open Sans", "Heiti TC", "Microsoft JhengHei", 'Microsoft JhengHei UI Regular', '微軟正黑體 Light', '微軟正黑體', sans-serif; color: #333;}
html { background-color: #FFFFFF;}
body { background-position: center 84px !important;}

/*
   為 User 素材中的 style 直接 copy 的內容 start
   RD 調整之處:
   1.圖片路徑
   2.[.wrap_akira_20260128 .wrap .kv .check_btn] 改成 [.wrap_akira_20260128 .wrap .kv .check_btn a]，因為點擊觸發點為<a>標籤
   3.[.wrap_akira_20260128 .wrap .kv .check_btn:hover] 改成 [.wrap_akira_20260128 .wrap .kv .check_btn a:hover]，因為點擊觸發點為<a>標籤
*/
/*-------------------以下活動頁CSS，請命名class name-------------------*/
.wrap_akira_20260128 {width: 100%;height: auto;margin: 0 auto;background: url(/public/images/eventsite/checkin/21/index_bg.jpg) center top no-repeat;}
.wrap_akira_20260128 .wrap{ width: 100%; max-width: 1200px; height: auto; margin: 0 auto;}
.wrap_akira_20260128 .wrap .kv{width: 100%;height: 0;padding-bottom: 50%;background: url(/public/images/eventsite/checkin/21/index_kv.jpg) center top no-repeat;-webkit-background-size: 100% auto;background-size: 100% auto;position: relative;}
.wrap_akira_20260128 .wrap .kv .title{transform: scale(0);position: absolute;top: 12%;left: 0%;right: 0%;margin: 0 auto;background: url(/public/images/eventsite/checkin/21/title.png) center top no-repeat;-webkit-background-size: 100% auto;background-size: 100% auto;width: 67%;height: 0;padding-bottom: 33%;animation: title-scale-d 1s ease-out forwards;}
.wrap_akira_20260128 .wrap .kv .check_btn a{display: block;width: 30%;height: 0;padding-bottom: 11.285714%;background: url(/public/images/eventsite/checkin/21/check-m_btn.png) center top no-repeat;-webkit-background-size: 100% auto;background-size: 100% auto;position: absolute;bottom: 4%;left: 0;right: 0;margin: 0 auto; transition:bottom .3s ease;}
.wrap_akira_20260128 .wrap .kv .check_btn a:hover{bottom: 3.5%;filter: brightness(1.1);cursor: pointer;}
.wrap_akira_20260128 .wrap .kv .firework_1{opacity: 0;position: absolute;top: 10%;left: 12%;background: url(/public/images/eventsite/checkin/21/firework.png) center top no-repeat;-webkit-background-size: 100% auto;background-size: 100% auto;width: 16%;height: 0;padding-bottom: 30%; animation: explode-scale-a 2s .5s ease-out infinite;}
.wrap_akira_20260128 .wrap .kv .firework_2{opacity: 0;position: absolute;top: 6%;left: 31%;background: url(/public/images/eventsite/checkin/21/firework.png) center top no-repeat;-webkit-background-size: 100% auto;background-size: 100% auto;width: 8%;height: 0;padding-bottom: 30%; animation: explode-scale-b 2s 2s ease-out infinite;}
.wrap_akira_20260128 .wrap .kv .firework_3{opacity: 0;position: absolute;top: 3%;left: 75%;background: url(/public/images/eventsite/checkin/21/firework.png) center top no-repeat;-webkit-background-size: 100% auto;background-size: 100% auto;width: 18%;height: 0;padding-bottom: 30%; animation: explode-scale-c 2s 3s ease-out infinite;}
.wrap_akira_20260128 .wrap .kv .firework_4{opacity: 0;position: absolute;top: 8%;left: 55%;background: url(/public/images/eventsite/checkin/21/firework.png) center top no-repeat;-webkit-background-size: 100% auto;background-size: 100% auto;width: 6%;height: 0;padding-bottom: 30%; animation: explode-scale-d 2s 3.5s ease-out infinite;}

.wrap_akira_20260128 .wrap .step {width: 100%;height: 0;padding-bottom: 161%;background: url(/public/images/eventsite/checkin/21/index_day0.jpg) center top no-repeat;-webkit-background-size: 100% auto;background-size: 100% auto;}
.wrap_akira_20260128 .wrap .step img{ display: block; width: 100%; height: auto;}

.wrap_akira_20260128 .wrap .note {width: 96%;margin: 0 auto;color: #000000;padding: 1px 40px 30px;font-size: 15px;line-height: 1.5em;background-color: #f8feff;border-radius: 45px;}
.wrap_akira_20260128 .wrap .note h1 {font-size: 32px;text-align: center;line-height: 120%;color: #001937;margin: 30px 0 20px 0;}
.wrap_akira_20260128 .wrap .note h3 { font-size: 20px; text-align: center; line-height: 110%; color: #ffffff; margin-bottom: 10px; }
.wrap_akira_20260128 .wrap .note span {display: inline-block;background-color: #023489;color: #ffffff;line-height: 110%;padding: 10px;font-weight: bold;font-size: 120%;text-align: center;border-radius: 20px;padding: 10px 30px;}
.wrap_akira_20260128 .wrap .note ol { margin: 0; text-align: justify; }
.wrap_akira_20260128 .wrap .note ol li { margin: 0 0 10px 0; }
.wrap_akira_20260128 .wrap .note ol li li { margin-left: 20px; margin-bottom: 10px; }
.wrap_akira_20260128 .wrap .note a{ color: #ff2b62; }
.wrap_akira_20260128 .wrap .note ol li table { text-align: center; line-height: 2em;}
.wrap_akira_20260128 .wrap .note ol li table tr, .wrap_akira_20260128 .wrap .note ol li table td { border: 1px solid #7d7d7d ;}
.wrap_akira_20260128 .wrap .note ol li table th {border: 1px solid #7d7d7d;background-color: #023489;color: #ffffff;font-size: 1.3em;line-height: 1.5em;}
.wrap_akira_20260128 .note_btn{width: 500px;max-width: 1200px;height: 0;margin: 0 auto;margin-top: 20px;padding-bottom: 9.1667%;background: url(/public/images/eventsite/checkin/21/note.png) center top no-repeat;-webkit-background-size: 100% auto;background-size: 100% auto;display: block;cursor: pointer;}
.wrap_akira_20260128 .note_btn a{display:block;width: 100%;height: 0;margin: 0 auto;margin-top: 20px;padding-bottom: 27%;/*border: 2px solid*/}
.wrap_akira_20260128 .wrap .close{ display: none; }

@keyframes title-scale-d {
    0% {transform: scale(0);}
    80% {transform: scale(1.2)}
    100% {transform: scale(1);}
}

@keyframes explode-scale-a {
    0% {transform: scale(0); /* 從點開始 */opacity: 0;}
    50% {transform: scale(1.2); /* 噴發瞬間稍微變大 */opacity: 1;filter: brightness(1.5) blur(1px); /* 增加亮度與朦朧感 */}
    100% {transform: scale(1.5); /* 緩慢擴散 */opacity: 0; /* 最終消失 */}
}
@keyframes explode-scale-b {
    0% {transform: scale(0); /* 從點開始 */opacity: 0;}
    50% {transform: scale(1.2); /* 噴發瞬間稍微變大 */opacity: 1;filter: brightness(1.5) blur(1px); /* 增加亮度與朦朧感 */}
    100% {transform: scale(1.5); /* 緩慢擴散 */opacity: 0; /* 最終消失 */}
}
@keyframes explode-scale-c {
    0% {transform: scale(0); /* 從點開始 */opacity: 0;}
    50% {transform: scale(1.2); /* 噴發瞬間稍微變大 */opacity: 1;filter: brightness(1.5) blur(1px); /* 增加亮度與朦朧感 */}
    100% {transform: scale(1.5); /* 緩慢擴散 */opacity: 0; /* 最終消失 */}
}
@keyframes explode-scale-d {
    0% {transform: scale(0); /* 從點開始 */opacity: 0;}
    50% {transform: scale(1.2); /* 噴發瞬間稍微變大 */opacity: 1;filter: brightness(1.5) blur(1px); /* 增加亮度與朦朧感 */}
    100% {transform: scale(1.5); /* 緩慢擴散 */opacity: 0; /* 最終消失 */}
}
@media screen and (min-width: 769px) and (max-width: 1200px) {
    .wrap_akira_20260128 .note_btn{width: 35%;height: 0;margin: 0 auto;margin-top: 20px;padding-bottom: 13.1667%;}
    .wrap_akira_20260128 .wrap .kv .title{top: 10%;width: 67%;height: 0;}
    .wrap_akira_20260128 .wrap .kv .check_btn a:hover{bottom: 3.5%;filter: brightness(1.1);cursor: pointer;}
}
/* MOBILE 圖片寬800px */
@media all and (max-width:768px), all and (max-device-width:768px) {
    .wrap_akira_20260128 {width: 100%;height: auto;margin: 0 auto;background: url(/public/images/eventsite/checkin/21/index_m_bg.jpg) center top repeat;}
    .wrap_akira_20260128 .wrap { width: 100%; height: auto; margin: 0 auto; background: none; }
    .wrap_akira_20260128 .wrap .wrap{ width: 100%; height: auto; margin: 0 auto; background: none; }
    .wrap_akira_20260128 .wrap .kv{display: block;margin: 0 auto;width: 100%;height: 0;padding-bottom: 66.5%;background: url(/public/images/eventsite/checkin/21/index_m_kv.jpg) center top no-repeat;-webkit-background-size: 100% auto;background-size: 100% auto;position: relative;}
    .wrap_akira_20260128 .wrap .kv .title{top: 10%;width: 77%;height: 0;padding-bottom: 35%;}
    .wrap_akira_20260128 .wrap .kv .check_btn a{display: block;width: 45%;height: 0;padding-bottom: 19.070028%;margin: 0 auto;background: url(/public/images/eventsite/checkin/21/check-m_btn.png) center top no-repeat;-webkit-background-size: 100% auto;background-size: 100% auto;position: absolute;bottom: 7%;left: 0;right:0;margin:0 auto;}
    .wrap_akira_20260128 .wrap .kv .check_btn a:hover{bottom: 6.9%;filter: brightness(1.1);cursor: pointer;}
    .wrap_akira_20260128 .wrap .step {width: 100%;height: 0;padding-bottom: 164.125%;background: url(/public/images/eventsite/checkin/21/index_day0.jpg) center top no-repeat;-webkit-background-size: 100% auto;background-size: 100% auto;}
    .wrap_akira_20260128 .wrap .step img{ display: block; width: 1002; height: auto;}
    .wrap_akira_20260128 .wrap .note{width: 96%;}
    .wrap_akira_20260128 .wrap .note ol li table {  line-height: 1.5em;}
    .wrap_akira_20260128 .wrap .note ol li table td {text-align: left;padding: .5em}
    .wrap_akira_20260128 .note_btn{width: 60%;margin: 0 auto;padding-bottom: 22.1667%;}
    .wrap_akira_20260128 .note_btn a{display: block;width: 100%;height: 0;margin: 0 auto;margin-top: 20px;padding-bottom: 28%;}
}
/* 為 User 素材中的 style 直接 copy 的內容 end */

/*
   [簽到狀態] 由 RD 加上。
   RD 調整之處:
   1.圖片路徑 (須注意 wrap_akira_20260128 class 名稱，每一版都不一樣)
   2.如果另有 mobile用的圖檔，就需要
     @media all and (max-width: 768px),all and (max-device-width: 768px) {
       .wrap_akira_20260128 .step.step1{background-image:url(/public/images/eventsite/checkin/21/index_m_day1.jpg)}
       ...
     }
*/
.wrap_akira_20260128 .step{-webkit-transition:background-image .5s linear}
.wrap_akira_20260128 .step.step1{background-image:url(/public/images/eventsite/checkin/21/index_day1.jpg)}
.wrap_akira_20260128 .step.step2{background-image:url(/public/images/eventsite/checkin/21/index_day2.jpg)}
.wrap_akira_20260128 .step.step3{background-image:url(/public/images/eventsite/checkin/21/index_day3.jpg)}
.wrap_akira_20260128 .step.step4{background-image:url(/public/images/eventsite/checkin/21/index_day4.jpg)}
.wrap_akira_20260128 .step.step5{background-image:url(/public/images/eventsite/checkin/21/index_day5.jpg)}
.wrap_akira_20260128 .step.step6{background-image:url(/public/images/eventsite/checkin/21/index_day6.jpg)}
.wrap_akira_20260128 .step.step7{background-image:url(/public/images/eventsite/checkin/21/index_day7.jpg)}
.wrap_akira_20260128 .step.step8{background-image:url(/public/images/eventsite/checkin/21/index_day8.jpg)}
.wrap_akira_20260128 .step.step9{background-image:url(/public/images/eventsite/checkin/21/index_day9.jpg)}
.wrap_akira_20260128 .step.step10{background-image:url(/public/images/eventsite/checkin/21/index_day10.jpg)}
.wrap_akira_20260128 .step.step11{background-image:url(/public/images/eventsite/checkin/21/index_day11.jpg)}
.wrap_akira_20260128 .step.step12{background-image:url(/public/images/eventsite/checkin/21/index_day12.jpg)}
.wrap_akira_20260128 .step.step13{background-image:url(/public/images/eventsite/checkin/21/index_day13.jpg)}
.wrap_akira_20260128 .step.step14{background-image:url(/public/images/eventsite/checkin/21/index_day14.jpg)}
.wrap_akira_20260128 .step.step15{background-image:url(/public/images/eventsite/checkin/21/index_day15.jpg)}
.wrap_akira_20260128 .step.step16{background-image:url(/public/images/eventsite/checkin/21/index_day16.jpg)}
.wrap_akira_20260128 .step.step17{background-image:url(/public/images/eventsite/checkin/21/index_day17.jpg)}
.wrap_akira_20260128 .step.step18{background-image:url(/public/images/eventsite/checkin/21/index_day18.jpg)}
.wrap_akira_20260128 .step.step19{background-image:url(/public/images/eventsite/checkin/21/index_day19.jpg)}
.wrap_akira_20260128 .step.step20{background-image:url(/public/images/eventsite/checkin/21/index_day20.jpg)}
.wrap_akira_20260128 .step.step21{background-image:url(/public/images/eventsite/checkin/21/index_day21.jpg)}
.wrap_akira_20260128 .step.step22{background-image:url(/public/images/eventsite/checkin/21/index_day22.jpg)}
.wrap_akira_20260128 .step.step23{background-image:url(/public/images/eventsite/checkin/21/index_day23.jpg)}
.wrap_akira_20260128 .step.step24{background-image:url(/public/images/eventsite/checkin/21/index_day24.jpg)}
.wrap_akira_20260128 .step.step25{background-image:url(/public/images/eventsite/checkin/21/index_day25.jpg)}
.wrap_akira_20260128 .step.step26{background-image:url(/public/images/eventsite/checkin/21/index_day26.jpg)}
.wrap_akira_20260128 .step.step27{background-image:url(/public/images/eventsite/checkin/21/index_day27.jpg)}
.wrap_akira_20260128 .step.step28{background-image:url(/public/images/eventsite/checkin/21/index_day28.jpg)}