/* Opening artwork: 796 x 566; title: 479 x 162 at (159, 312). */
.opening-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    overflow: hidden;
    position: fixed;
    background: rgb(0 0 0 / 83%);
}
#opening {
    width: 100% !important;
    max-width: none;
    height: 100%;
    padding: 0;
    overflow: hidden;
    position: relative;
}
/* Desktop reference viewport: 1920 x 940. */
#opening > section {
    --opening-width: min(84.680851vh, 94vw);
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--opening-width);
    height: calc(var(--opening-width) * 566 / 796);
    margin: calc(var(--opening-width) * -283 / 796) 0 0 calc(var(--opening-width) / -2);
    padding: 0 !important;
    border: 0;
    overflow: visible;
    transform: scale(1);
    transform-origin: center;
}
#opening > section::before,
#opening > section::after {
    display: none;
}
/* Mobile reference excludes the browser and system navigation bars. */
#opening > section.main {
    --opening-width: min(87.85vw, 112vh);
    top: 49.26%;
}
#opening .box1-opening,
#opening .box1-opening > .container {
    position: static;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    padding: 0;
}
#opening .demo-building-opening,
#opening .demo-building-rwd {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    transform: scale(0);
    animation: zoomIn 0.2s ease-out forwards;
}
#opening .demo-building-opening2,
#opening .demo-building-rwd2 {
    position: absolute;
    top: 55.123675%;
    left: 19.974874%;
    width: 60.175879%;
    height: auto;
    transform: scale(0);
    animation: scaleUp 0.2s ease-out forwards;
    animation-delay: 0.01s;
}
#opening img {
    display: block;
    width: 100%;
    height: auto;
}
#opening .my-scale {
    animation: scaleDown 0.2s ease-out forwards;
    animation-delay: 2.1s;
}
@keyframes zoomIn {
    from { transform: scale(0); }
    to { transform: scale(1); }
}
@keyframes scaleUp {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
@keyframes scaleDown {
    from { transform: scale(1); }
    to { transform: scale(0); }
}

#aboutMeLogoImg{
    width: 184px;
}
.modal-body-m{
      z-index: 2 !important;
}
.homepage_login_bg .modal-footer{
  z-index: 99 !important;
}
.homepage_login_bg {
    border-radius: 0px;
    border-style: solid;
    border-width: 4px;

}
.homepage_login_cancel{
    position: absolute;
    top: -23px;
    right: -11px;
    cursor: pointer;
    z-index: 9000;
    width: 47px;
    height: 47px;
}

.homepage_login_span {
    position: absolute;
    top: -1px;
    right: -14px;
    cursor: pointer;
    z-index: 10;
    font-size: 33px;
    font-weight: 700;
    color: #fff;
    opacity: 1 !important;

    border-radius: 50%;
    width: 40px;
    height: 40px;
}

.homepage_login_bg .nav-tabs>li>a.active {

    border-color: transparent !important;

}

.login-input {
    background-color: #fff !important;
    border: none !important;
    color: #322413 !important;
}
/* webkit 瀏覽器*/ 
.login-input::-webkit-input-placeholder { 
	color: #322413 !important;
	letter-spacing: 1px;
	font-size: 16px;
}
/* 火狐瀏覽器 */ 
.login-input::-moz-placeholder { 
	color: #322413 !important;
	letter-spacing: 1px;
	font-size: 16px;
}

.mobile-eye {
    color: #322413;
}
.login-btn {
  border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    background-color: #f66b00;
    border-color: #f66b00;
    color: #ffff;
    
}
.festival-span-color{
    color: #010101 !important;
}

.login-checkbox {
    vertical-align: sub;
    border-width: 1px;
    border-style: solid;
    border-color: #000;
    padding: 0px;
    background: #fff!important;
}
.login-checkbox input+i:after {
    top: 1px;
    left: 2px;
    width: 15px;
    height: 15px;
}
.prompt {
    color: #ffff;
    background-color: #f66b00;
    
}

.festival-indexRwd-bg{
  background-image: url(../images/halloween/login_m.jpg?t=2025102101);
}
.loginPage-bg_2{
  background: none;
  border-width: 0px;
  padding-top: 64px;
  box-shadow: none;
}
.loginPage-circle{
  background: none;
}
.loginPage-logo{
  top: 114px;
  height: 143px;
  width: 130px;
  background-image: url(../images/halloween/pumpkin3.png?t=2025102101);
      background-color: #00000000;
  box-shadow: none;
  border-radius: 0;
  background-repeat: no-repeat;
  background-size: auto;
  background-position: left;
  z-index: revert-layer;
}
.general-titile-color{
  color:#f66b00;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
  font-size: 25px;
  margin-bottom: 20px;
  margin-top: 10px;
}

.login_div_lock{
  color: #fff;
  background: linear-gradient(to bottom, #fff200 0%, #f66b00 100%);
}
.login_div_no_lock{
  background-color: #fff;
  color: #f66b00;
}
.loginPage-logo img{
  top: 4px;
  width: 54%;
  left: 23%;
}
.loginPage-icon-1 {
  
  color: #d85e00;
}
.mobil-eye{
  color: #d85e00;
}
.dragon-span-color-rwd, .loginPage-span-2, .loginPage-span-2-a{
  color: #000000 !important;
}
.loginPage_login_btn{
  color: #fff !important;
  background: linear-gradient(to bottom, #fff200 0%, #f66b00 100%) !important;
}
.mainMenu2020 .col-3{
    z-index: 999;  
}

/* Halloween login and registration theme: colors and artwork only; keep the original layout. */
#loginModal .homepage_login_bg,
#registModal .homepage_login_bg {
    border-color: #fa5e00;
    border-image: none;
    background: linear-gradient(to bottom, #ffffff, #ffecec);
}
#loginModal .nav-tabs > li > a,
#registModal .nav-tabs > li > a {
    color: #fff !important;
    background-color: #fa5e00 !important;
}
#loginModal .nav-tabs > li > a.active,
#registModal .nav-tabs > li > a.active {
    color: #570a65 !important;
    background-color: #fcdfde !important;
}
#loginModal .tab-content,
#registModal .tab-content {
    background: #fcdfde !important;
}
#loginModal .login-input,
#registModal .login-input,
#loginModal .login-input::placeholder,
#registModal .login-input::placeholder,
#loginModal .christmas-i-color,
#registModal .christmas-i-color,
#loginModal .mobile-eye,
#registModal .mobile-eye,
#loginModal .festival-span-color,
#registModal .festival-span-color {
    color: #570a65 !important;
}
#loginModal .login-btn,
#registModal .login-btn {
    color: #fff;
    background-color: #812b90;
    border-color: #812b90;
}
#loginModal .dragon-span-color,
#registModal .dragon-span-color { color: #000 !important; }
#loginModal .login-checkbox input + i::after,
#registModal .login-checkbox input + i::after { color: #812b90; }
#loginModal .homepage_login_span,
#registModal .homepage_login_span { background-color: #812b90 !important; }
/* Position only the replacement decorative artwork around the existing dialog. */
#loginModal .halloween-login-top,
#registModal .halloween-login-top,
#loginModal .halloween-login-bottom,
#registModal .halloween-login-bottom {
    position: absolute;
    z-index: 3;
    pointer-events: none;
}
#loginModal .halloween-login-top,
#registModal .halloween-login-top {
    top: -100px;
    left: -25px;
    width: 174px;
}
#loginModal .halloween-login-bottom,
#registModal .halloween-login-bottom {
    right: -130px;
    bottom: -65px;
    width: 262px;
}
#loginModal .halloween-login-top img,
#registModal .halloween-login-top img,
#loginModal .halloween-login-bottom img,
#registModal .halloween-login-bottom img {
    display: block;
    width: 100%;
    height: auto;
}
@media (max-width: 640px) {
    #loginModal .halloween-login-bottom,
    #registModal .halloween-login-bottom { right: -20px; width: 180px; }
}

/* Registration status controls keep their original layout and validation colors. */
#registModal .login-msg-again {
    color: #fff;
    background-color: #812b90 !important;
    border-color: #812b90 !important;
}
#registModal #addPhoneLabel,
#registModal #addLineIdLabel,
#registModal #addAccountLabel,
#registModal #addPasswordLabel {
    color: #570a65 !important;
}

/* Mobile theme artwork is limited to the visible login panel. */
body:has(#login_div:not([style*="display: none"])) .festival-indexRwd-bg {
    background-image: url(../images/halloween/login/mobile-bg.webp);
}
body:has(#login_div:not([style*="display: none"])) .loginPage-logo {
    background-image: url(../images/halloween/login/hallow-balloon.webp);
}
.festival-indexRwd-bg #login_div .general-titile-color {
    color: #e15500;
}
.festival-indexRwd-bg #login_div .login_div_lock,
.festival-indexRwd-bg #login_div .loginPage_login_btn {
    color: #fff !important;
    background: linear-gradient(to bottom, #ff6000 0%, #5c0000 100%) !important;
}
.festival-indexRwd-bg #login_div .login_div_no_lock {
    color: #b64500;
    background-color: #fff;
}
.festival-indexRwd-bg #login_div .loginPage_input {
    background-color: #fff;
}
.festival-indexRwd-bg #login_div .loginPage_input::placeholder {
    color: #969696;
}
.festival-indexRwd-bg #login_div .loginPage-icon-1 {
    color: #fff;
}
.festival-indexRwd-bg #login_div .mobil-eye {
    color: #b64500;
}
.festival-indexRwd-bg #login_div .dragon-span-color-rwd,
.festival-indexRwd-bg #login_div .loginPage-span-2,
.festival-indexRwd-bg #login_div .loginPage-span-2-a,
.festival-indexRwd-bg #login_div .loginPage-span-2 a {
    color: #fff !important;
}
.festival-indexRwd-bg #login_div .login-checkbox-rwd input {
    accent-color: #e15500;
}
.festival-indexRwd-bg #login_div .login-checkbox-rwd input:checked + i {
    background-color: #e15500;
    border-color: #e15500;
}
.festival-indexRwd-bg #login_div .login-checkbox-rwd input + i::after {
    color: #fff;
}

/* Desktop loading logo; shared with the game loading page. */
.demo {
    width: 60px;
    height: auto;
    position: absolute;
    top: 24%;
}
.an.img {
    width: 100%;
    height: auto;
}
/*下面點點*/
  .loading_animation_list {
    position: absolute;
    top: 114%;
    left: -90px;
  }
  .loading_animation_list > div{
        width: 251%;
  }
  .dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px; /* 點點間距，調大讓它們分開 */
  }
  .dot {
    transform: scale(0.6);  /* 初始就設定為動畫起點 */
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    background-color: rgb(255 96 0 / 60%); /* PDF loading color; keep the original dot geometry. */
    animation: pulse 1.5s infinite ease-in-out;
    margin: 8% 4% 0 4%;
  }

  @keyframes pulse {
    0%, 100% {
      transform: scale(0.6);
      background-color: rgb(255 96 0 / 60%);
    }
    50% {
      transform: scale(1.5);
      background-color: #ff6000;
    }
  }
  /* 每個點依序延遲 */
  .delay1 { animation-delay: 0.3s; }
  .delay2 { animation-delay: 0.6s; }
  .delay3 { animation-delay: 0.9s; }
  .delay4 { animation-delay: 1.2s; }

/*手機板loading*/
.box1 {
    width: 80%;
    height: 40%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.loading_animation_rwd > div{
        width: 82%;
    margin: 6px 5px;
    display: inline-block;
}
.loading_animation_rwd {
    width: 100%;
    height: 28px;
    position: absolute;
    top: 99px;
    right: 0;
    bottom: 0;
    left: 3px;
    margin: auto;
}
.demo1_span {
    width: 100%;
    height: 73%;
    position: absolute;
    top: 0px;
    left: 0;
}
.demo1_loading_list {
    width: 100%;
    height: 36px;
    position: absolute;
    top: 124px;
    right: 0;
    bottom: 0;
    left: -6px;
    margin: auto;
}

/* Halloween artwork follows the video, relative to the existing wordmark.
   Keep the shared wordmark and dot geometry unchanged. */
#loader.halloween-loader-desktop .demo-building {
    position: absolute;
    width: 113.15px;
    height: auto;
    top: calc(85% - 121.0583px);
    left: calc(50% - 56.575px);
}
#loader.halloween-loader-desktop .demo-flag_s,
#loader.halloween-loader-desktop .demo-flag_s2 {
    position: absolute;
    height: auto;
    opacity: 0;
}
#loader.halloween-loader-desktop .demo-flag_s {
    width: 34.675px;
    top: calc(85% - 53.5333px);
    left: calc(50% - 101.5917px);
}
#loader.halloween-loader-desktop .demo-flag_s2 {
    width: 37.7167px;
    top: calc(85% - 90.0333px);
    left: calc(50% + 66.9167px);
}
#loader.halloween-loader-desktop .img-nationalDay {
    display: block;
    width: 100%;
    height: auto;
}
/* Mobile wordmark top is 30% + 35.9625px within the existing .content. */
#loader.halloween-loader-mobile .demo1-building,
#loader.halloween-loader-mobile .demo1-flag2,
#loader.halloween-loader-mobile .demo1-flag3 {
    position: absolute;
}
#loader.halloween-loader-mobile .demo1-building {
    width: 89.125px;
    top: calc(30% - 59.3917px);
    left: calc(50% - 44.5625px);
}
#loader.halloween-loader-mobile .demo1-flag2 {
    width: 27.3125px;
    top: calc(30% - 6.2042px);
    left: calc(50% - 80.0208px);
}
#loader.halloween-loader-mobile .demo1-flag3 {
    width: 29.7083px;
    top: calc(30% - 34.9542px);
    left: calc(50% + 52.7083px);
}
#loader.halloween-loader-mobile .img-building,
#loader.halloween-loader-mobile .img-flag2 {
    display: block;
    width: 100%;
    height: auto;
}
#loader.halloween-loader-mobile .img-flag2 {
    opacity: 0;
}
/* Both candies share the same swing clock; only their reveal times differ. */
#loader.halloween-loader-desktop .my-element.rotate,
#loader.halloween-loader-mobile .my-element-rwd.rotate {
    transform-origin: center;
    animation: halloween-candy-reveal 0s linear 0.3s forwards,
        halloween-candy-sway 0.5s linear 0s infinite;
}
#loader.halloween-loader-desktop .my-element2.rotate,
#loader.halloween-loader-mobile .my-element2-rwd.rotate {
    transform-origin: center;
    animation: halloween-candy-reveal 0s linear 0.4667s forwards,
        halloween-candy-sway 0.5s linear 0s infinite;
}
@keyframes halloween-candy-reveal {
    to { opacity: 1; }
}
@keyframes halloween-candy-sway {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-15deg); }
}