/**
  @file       animate.ottocity.css
  @brief      APP CSS 動畫 共用樣式
  @date       2020-07-02: Ys      + 191001009, Create
  @date       2020-07-21: Chihuua + 191001009, 新增 播放次數 樣式
  @date       2020-07-21: Chihuua + 191001009, 新增 單次循環秒數 樣式
  @date       2020-07-21: Chihuua + 191001009, 新增 閃爍 - 基本
  @date       2022-07-07: Chiuhua + 220700575, 新增 跑馬燈動畫樣式
  @date       2023-04-13: Ys      + 230401039, 新增 動畫 : zoomInBox / zoomOutBox
  @date       2024-06-11: Chiuhua + 240600368, 新增 扭蛋機動畫樣式 (NISSAN 抽獎網頁求, 列入上優標準 lib)
  @date       2024-07-19: Chiuhua # 240701520, 扭蛋樣式防呆處理, 在 flex box 樣式內加 text-align 避免被有瑕疵的父層語法影響樣式正確性
  @date       2024-08-06: Chiuhua + 240800571, 新增 扭蛋機動畫狀態樣式 .gacha_machine.ends 已結束
  @date       2025-01-21: Ys      + 241000155, 新增 ani_fadeInDown, ani_fadeOutUp
*/
/* 播放次數, 2020-07-21: Chiuhua + 191001009 */
.ani_ct3 {-webkit-animation-iteration-count:3 !important;animation-iteration-count:3 !important;}
.ani_ct5 {-webkit-animation-iteration-count:5 !important;animation-iteration-count:5 !important;}
/* 單次循環秒數 (命名用毫秒), 2020-07-21: Chiuhua + 191001009 */
.ani_300ms {-webkit-animation-duration:0.3s !important;animation-duration:0.3s !important;}
.ani_500ms {-webkit-animation-duration:0.5s !important;animation-duration:0.5s !important;}
.ani_1000ms {-webkit-animation-duration:1s !important;animation-duration:1s !important;}
.ani_1500ms {-webkit-animation-duration:1.5s !important;animation-duration:1.5s !important;}
.ani_2000ms {-webkit-animation-duration:2s !important;animation-duration:2s !important;}
.ani_2500ms {-webkit-animation-duration:2.5s !important;animation-duration:2.5s !important;}
.ani_3000ms {-webkit-animation-duration:3s !important;animation-duration:3s !important;}

/* 閃爍 - 基本, 2020-07-21: Chiuhua + 191001009 */
.ani_flash {-webkit-animation:ani_flash 2s infinite ease-in-out;animation:ani_flash 2s infinite ease-in-out;}
@-webkit-keyframes ani_flash {
0%, 80% {opacity:1;}
81%, 100% {opacity:0.2;}
}
@keyframes ani_flash {
0%, 80% {opacity:1;}
81%, 100% {opacity:0.2;}
}

/* 跑馬燈動畫 */
/* 2022-07-07: Chiuhua + 220700575, 新增 跑馬燈動畫樣式 */
/* 預設 1段, 可搭配讀取動態文字 */
.ani_mq_up {display:inline-flex;flex-wrap:wrap;align-items:center;width:100%;height:inherit;padding:0px 0.5em;overflow:hidden;position:absolute\0;}
.ani_mq_up p {display:inline-flex;align-items:flex-start;justify-content:center;overflow:hidden;width:100%;line-height:1.3em;max-height:2.55em;/* 數值縮小 0.05em 以修正 SF retina 不足 1px 的誤差 */text-align:center;position:relative;animation:ani_mq_up 5s linear infinite;}
.ani_mq_up p > * {line-height:inherit;margin:0px 0.15em;}
.ani_mq_up p > i {height:1.5em;}
.ani_mq_up p > i > img {height:inherit;vertical-align:top;}
@keyframes ani_mq_up {
0% {top:100%;}
10%, 90% {top:0%;}
100% {top:-100%;}
}
/* 2段, 繼承加套 */
.ani_mq_up.ani_2stage {padding-top:0px;padding-bottom:0px;}
.ani_mq_up.ani_2stage p {display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;height:inherit;max-height:unset;animation:10s linear infinite;}
.ani_mq_up.ani_2stage p:nth-child(1) {animation-name:ani_mq_up_stage1;}
.ani_mq_up.ani_2stage p:nth-child(2) {animation-name:ani_mq_up_stage2;}
@keyframes ani_mq_up_stage1 {
0% {top:100%;}
5%, 45% {top:0%;}
50%, 100% {top:-100%;}
}
@keyframes ani_mq_up_stage2 {
0%, 50% {top:0%;}
55%, 95% {top:-100%;}
100% {top:-200%;}
}

/* 扭蛋機動畫 */
/* 2024-06-11: Chiuhua + 240600368, 新增 扭蛋機動畫樣式 (NISSAN 抽獎網頁求, 列入上優標準 lib) */
/* 2024-07-19: Chiuhua # 240701520, 扭蛋樣式防呆處理, 在 flex box 樣式內加 text-align 避免被有瑕疵的父層語法影響樣式正確性 */
.gacha_machine {display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:15em;height:calc(15em * 1.44);margin:0.5em;overflow:hidden;position:relative;text-align:left/* 在 flex box 樣式內加 text-align 是為了防呆, 詳 # 240701520 */;}
.gacha_machine * {font-size:inherit;}
.gacha_machine > * {position:absolute;overflow:hidden;}
.gacha_machine > *[class*="gm_shape_"] {display:inline-flex;flex-wrap:wrap;}
.gacha_machine > .gm_shape_top, .gacha_machine > .gm_shape_btm {width:calc(100% - 1.5em);border-radius:6.75em;box-shadow:0px 0px 1em 0.5em hsla(0,0%,0%,0.25) inset;z-index:2;}
.gacha_machine > .gm_shape_mid, .gacha_machine > .gm_shape_btm {background-color:hsl(220,10%,50%);}
.gacha_machine > .gm_shape_top {top:0px;height:60%;background-color:hsl(220,10%,70%);border-bottom-left-radius:0px;border-bottom-right-radius:0px;justify-content:space-around;align-content:flex-start;flex-flow:wrap-reverse;padding:1em 0.5em;}
.gacha_machine > .gm_shape_top:before {content:'';position:absolute;top:0px;left:-6%;width:inherit;height:100%;border-radius:inherit;background:radial-gradient(ellipse,transparent,hsla(0,0%,100%,0.35)) right bottom / 150% 100%;z-index:3;}
.gacha_machine > .gm_shape_mid {top:55%;width:100%;height:1.2em;border-radius:0.6em;filter:brightness(0.85);box-shadow:0px 1px 1px hsla(0,0%,0%,0.5);z-index:3;}
.gacha_machine > .gm_shape_btm {bottom:0px;height:40%;border-top-left-radius:0px;border-top-right-radius:0px;justify-content:center;align-content:flex-end;padding-bottom:0.25em;}
.gacha_machine > .gm_shape_btm:before, .gacha_machine > .gm_shape_btm:after {content:'';position:absolute;bottom:0px;left:0px;right:0px;margin:auto;width:4em;border-bottom-left-radius:0px !important;border-bottom-right-radius:0px !important;background-color:inherit;}
.gacha_machine > .gm_shape_btm:before {height:4em;border-radius:2em;filter:brightness(0.5);}
.gacha_machine > .gm_shape_btm:after {height:1em;border-radius:50%;filter:contrast(0.5);transform:scale(0.95);}
.gacha_machine > button {top:51.25%;min-width:6.6em;max-width:85%;line-height:2.2em;border:0.1em solid #FFF;z-index:9;}
.gacha_machine > button:not([class*="btn_die"]):active {transform:scale(0.95);}
.gacha_machine .btn_die {opacity:1;font-weight:bold;}
/* 扭蛋 - 尺寸, 顏色 */
.gacha_machine > * > i {width:3em;height:3em;border-radius:50%;background-color:#FFF;border:0.05em solid #FFF;box-shadow:0px 0px 0.8em 0.2em hsla(0,100%,50%,0.35) inset;position:relative;overflow:hidden;z-index:2;}
.gacha_machine > * > i:before, .gacha_machine > * > i:after {content:'';position:absolute;border-radius:inherit;}
.gacha_machine > * > i:before {top:0px;width:100%;height:75%;background-color:hsl(0,100%,50%);box-shadow:inherit;}
.gacha_machine > * > i:after {top:20%;right:20%;width:15%;height:15%;background-color:#FFF;filter:blur(0.2em);}
.gacha_machine > * > i:nth-of-type(3n+1) {filter:hue-rotate(220deg);}
.gacha_machine > * > i:nth-of-type(3n-1) {filter:hue-rotate(120deg);}
.gacha_machine > * > i:nth-of-type(3n), .gacha_machine > .gm_shape_btm > i {box-shadow:0px 0px 0.8em 0.2em hsla(40,100%,50%,0.65) inset;}
.gacha_machine > * > i:nth-of-type(3n):before, .gacha_machine > .gm_shape_btm > i:before {background-color:hsl(40,100%,50%);}
/* 扭蛋 - 角度, 位置 */
.gacha_machine > * > i:nth-of-type(1) {transform:rotate(35deg) translate(10%,5%);}
.gacha_machine > * > i:nth-of-type(2) {transform:rotate(-135deg) translate(5%,5%);}
.gacha_machine > * > i:nth-of-type(3) {transform:rotate(45deg) translate(10%,15%);}
.gacha_machine > * > i:nth-of-type(4) {transform:rotate(135deg) translate(10%,-5%);}
.gacha_machine > * > i:nth-of-type(5) {transform:rotate(-45deg) translate(10%,30%);}
.gacha_machine > * > i:nth-of-type(6) {transform:rotate(15deg) translate(30%,15%);}
.gacha_machine > * > i:nth-of-type(7) {transform:rotate(-135deg) translate(-45%,-20%);}
.gacha_machine > * > i:nth-of-type(8) {transform:rotate(45deg) translate(15%,10%);}
.gacha_machine > * > i:nth-of-type(9) {transform:rotate(-35deg) translate(5%,80%);}
.gacha_machine > .gm_shape_btm > i {display:none;filter:none;transform:rotate(-30deg);}

/* 狀態 - 預設 */
.gacha_machine:not([class*="spin"]):not([class*="win"]) > button {animation:gm_def_btn 2s infinite ease-in-out;animation-delay:0.1s;}
@keyframes gm_def_btn {
0%, 9%, 36% {transform:none;}
10%, 25% {transform:scale(1.1);}
20%, 35% {transform:scale(0.9);}
}

/* 狀態 - 轉動 */
.gacha_machine.spin {}
.gacha_machine.spin > .gm_shape_top {animation:gm_spin 2.2s infinite linear;animation-delay:0.1s;}
@keyframes gm_spin {
0%, 100% {}
50% {align-content:space-around;}
}
.gacha_machine.spin > * > i {animation:2.2s infinite linear;animation-delay:0.1s;position:relative;top:0px;right:0px;}
.gacha_machine.spin > * > i:nth-of-type(1) {animation-name:gm_spin_1;}
.gacha_machine.spin > * > i:nth-of-type(2) {animation-name:gm_spin_2;}
.gacha_machine.spin > * > i:nth-of-type(3) {animation-name:gm_spin_3;}
.gacha_machine.spin > * > i:nth-of-type(4) {animation-name:gm_spin_4;}
.gacha_machine.spin > * > i:nth-of-type(5) {animation-name:gm_spin_5;}
.gacha_machine.spin > * > i:nth-of-type(6) {animation-name:gm_spin_6;}
.gacha_machine.spin > * > i:nth-of-type(7) {animation-name:gm_spin_7;}
.gacha_machine.spin > * > i:nth-of-type(8) {animation-name:gm_spin_8;}
.gacha_machine.spin > * > i:nth-of-type(9) {animation-name:gm_spin_9;}
@keyframes gm_spin_1 {
0%, 100% {transform:rotate(10deg);}
50% {transform:rotate(-710deg);top:-5%;right:-2.5%;}
}
@keyframes gm_spin_2 {
0%, 100% {transform:rotate(-180deg);}
50% {transform:rotate(540deg);top:-10%;right:5%;}
}
@keyframes gm_spin_3 {
0%, 100% {transform:rotate(90deg);}
50% {transform:rotate(-630deg);top:-20%;right:-10%;}
}
@keyframes gm_spin_4 {
0%, 100% {transform:rotate(-60deg);}
50% {transform:rotate(660deg);top:-10%;right:5%;}
}
@keyframes gm_spin_5 {
0%, 100% {transform:rotate(-270deg);}
50% {transform:rotate(450deg);top:-5%;right:-15%;}
}
@keyframes gm_spin_6 {
0%, 100% {transform:rotate(-90deg);}
50% {transform:rotate(630deg);top:10%;right:-10%;}
}
@keyframes gm_spin_7 {
0%, 100% {transform:rotate(60deg);}
50% {transform:rotate(-660deg);top:-10%;right:5%;}
}
@keyframes gm_spin_8 {
0%, 100% {transform:rotate(-30deg);}
50% {transform:rotate(690deg);top:-15%;right:10%;}
}
@keyframes gm_spin_9 {
0%, 100% {transform:rotate(-180deg);}
50% {transform:rotate(540deg);top:-5%;right:2.5%;}
}

/* 狀態 - 中獎 */
.gacha_machine.win {}
/*
.gacha_machine.win > button {animation:gm_win_btn 2s infinite ease-in-out;animation-delay:0.1s;}
@keyframes gm_win_btn {
0%, 51%, 100% {transform:none;}
10%, 25%, 40% {transform:translateX(0.25em);}
20%, 35%, 50% {transform:translateX(-0.25em);}
}
*/
.gacha_machine.win > * > i:nth-of-type(9) {display:none;}
.gacha_machine.win > .gm_shape_btm > i {display:block;animation:gm_win_i 2s infinite ease-in-out;animation-delay:0.1s;transform-origin:bottom;cursor:pointer;}
@keyframes gm_win_i {
0%, 51%, 100% {transform:none;}
10%, 25%, 40% {transform:rotate(7.5deg);}
20%, 35%, 50% {transform:rotate(-2.5deg);}
}

/* 狀態 - 已結束 */
/* 2024-08-06: Chiuhua + 240800571, 新增 扭蛋機動畫狀態樣式 .gacha_machine.ends 已結束 */
.gacha_machine.ends {}
.gacha_machine.ends > * > i:nth-of-type(9) {display:none;}
.gacha_machine.ends > button {animation:none !important;}




/*=== 注意, 以下語法不符上優規範, 勿學 (問題點： 複製自外部的語法未整理換行及空格) ===*/
/*=== 2020-07-02: YS + 191001009 Start ===*/
/* 啟動動畫 */
.animated {-webkit-animation-fill-mode:both;animation-fill-mode:both;}

/* 單次循環秒數 (命名用毫秒) */
/*.ani_1000ms {-webkit-animation-duration:1s !important;animation-duration:1s !important;}*/

/* 右方淡入 */
.ani_fadeInRight {-webkit-animation-name:fadeInRight;animation-name:fadeInRight;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;}
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  70% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  70% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

/* 淡入 */
.ani_fadeIn {-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/* 淡出 */
.ani_fadeOut {-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;}
@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* 由上到下淡入 */
.ani_fadeInDown {-webkit-animation-name:fadeInDown;animation-name:fadeInDown;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;}
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

/* 由下到上淡出 */
.ani_fadeOutUp {-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;}
@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}


/* 圖片上方移入 */
.ani_zoomInBox {-webkit-animation-name:zoomInBox;animation-name:zoomInBox;-webkit-animation-timing-function:cubic-bezier(0.1, 0.1, 0.4, 1);animation-timing-function:cubic-bezier(0.1, 0.1, 0.4, 1);}
@keyframes zoomInBox {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/* 圖片上方移出 */
.ani_zoomOutBox {-webkit-animation-name:zoomOutBox;animation-name:zoomOutBox;-webkit-animation-timing-function:ease;animation-timing-function:ease;}
@keyframes zoomOutBox {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}

/* 圖片右方移入 */
.ani_zoomInBoxRight {-webkit-animation-name:zoomInBoxRight;animation-name:zoomInBoxRight;-webkit-animation-timing-function:ease;animation-timing-function:ease;}
@keyframes zoomInBoxRight {
  from {
    transform: translateX(180%);
  }
  to {
    transform: translateX(0);
  }
}

/* 圖片右方移出 */
.ani_zoomOutBoxRight {-webkit-animation-name:zoomOutBoxRight;animation-name:zoomOutBoxRight;-webkit-animation-timing-function:ease;animation-timing-function:ease;}
@keyframes zoomOutBoxRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(180%);
  }
}

/* 圖片左方移入 */
.ani_zoomInBoxLeft {-webkit-animation-name:zoomInBoxLeft;animation-name:zoomInBoxLeft;-webkit-animation-timing-function:ease;animation-timing-function:ease;}
@keyframes zoomInBoxLeft {
  from {
    transform: translateX(-180%);
  }
  to {
    transform: translateX(0);
  }
}

/* 圖片左方移出 */
.ani_zoomOutBoxLeft {-webkit-animation-name:zoomOutBoxLeft;animation-name:zoomOutBoxLeft;-webkit-animation-timing-function:ease;animation-timing-function:ease;}
@keyframes zoomOutBoxLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-180%);
  }
}
/*=== 2020-07-02, YS + 191001009 End ===*/