.festival-logo{
	/*width: 197px !important;
    height: 58px !important;*/
}
.festival-logo-a{
	line-height: 64px !important;
}


/*登入框*/
.homepage_login_left{
    width: 50%;
    position: absolute;
    z-index: -1;
    left: -16%;
    top: -10%;
}
.homepage_login_right{
    width: 100%;
    position: absolute;
    left: 75%;
    bottom: -2%;
    z-index: 98;
}
.homepage_login_bottom{
	width: 140%;
    position: absolute;
    right: 97px;
    bottom: -56px;
}
.homepage_login_bg {
	background: #fff7eb;
    border-radius: 10px;
    border-color: #ff4e00;
    border-style: solid;
    border-width: 4px;
    background-size: cover;
}

.bookmark_type {
	background-color: #6c1431!important;
    color: #FFFF !important;
    z-index: 999;
}
.login-input {
	background-color: #FFFF !important;
    color: #461413 !important;
}
.christmas-i-color{
	color: #6c1431 !important;
}
.mobile-eye {
  color: #6c1431 !important;
}
/* webkit 瀏覽器*/
.login-input::-webkit-input-placeholder {
	color: #6c1431 !important;
}
/* 火狐瀏覽器 */
.login-input::-moz-placeholder {
	color: #6c1431 !important;
}
.homepage_login_bg .nav-tabs>li>a.active{
	background-color: #ff2b1a!important;
    color: #FFFF !important;
}
.homepage_login_bg .tab-content{
	background-color: #ff2b1a !important;
}
.festival-span-color{
	color: #FFFF!important;
}
.login-btn{
	background-color: #6c1431;
    border-color: #6c1431;
    color: #ffc000;
}
.dragon-span-color{
	color: #6c1431 !important;
}
.modal-footer-m{
	color: rgb(64 46 94);
}
.checkbox i{
	background-color: white;
}
.prompt{
	background-color: #6c1431;
    border-color: #6c1431;
}
.btn-primary:hover{
	background-color: #503754ed;
    border-color: #503754ed;
}

/*手機登入頁*/
.festival-indexRwd-bg{
	background: url(../images/midAutumnFestival/bg-texture.jpg);
	background-repeat: no-repeat; /* 防止背景图像重复 */
  	background-size: cover; /* 缩放背景图像以适应容器 */
  	background-position: center center; /* 将背景图像水平和垂直置中 */
}
.loginPage-circle{
	display: none;
}
.loginPage-logo{
	border: 0;
  box-shadow: none;
  background-color: transparent;
  top: 75px;
  height: 106px;
  width: 106px;
  left: 51%;
}
.loginPage-logo img{
    left: 13%;
    top: 12px;
    width: 76%;
}
.loginPage-bg_2{
	box-shadow: none;
	background: rgb(255 255 255 / 0%);
	border: none;
	padding-top: 69px;
}
.festival-titile-color{
    /* 设置描边宽度及颜色 */
    text-stroke: 3px #0a4078;
    /* 兼容Webkit(Chrome/Safari)内核浏览器的写法 */
    -webkit-text-stroke: 3px #0a4078;
  }
  [data-content]::before {
    content: attr(data-content);
    position: absolute;
    -webkit-text-stroke: 0;
    background: #fff;
    background: #fff;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    }
.loginPage-icon-1{
	color: #fff;
}
.dragon-span-color-rwd{
	color: #0a4078 !important;
      text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF;
}
.loginPage-span-2, .loginPage-span-2 a{
	color: #0a4078  !important;
    text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF;
}
.mobil-eye{
    color: #0a4078 !important;
}
.login_div_lock{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#6e70cc+0,9894ec+36,423da5+69,2d2c64+100 */
	background: #330d69  ;
    background: -moz-linear-gradient(to bottom, #00c0fa 0%, #015eea 99%);
    background: -webkit-linear-gradient(to bottom, #00c0fa 0%, #015eea 99%);
    background: linear-gradient(to bottom, #00c0fa 0%, #015eea 99%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00c0fa', endColorstr='#015eea  ',GradientType=0 );

	color: #fff;
}
.login_div_no_lock{
	background-color: #fff;
	color: #366e95;
}

/* webkit 瀏覽器*/
.loginPage_input::-webkit-input-placeholder {
	color: #0a4078;
	letter-spacing: 1px;
	font-size: 16px;
}
/* 火狐瀏覽器 */
.loginPage_input::-moz-placeholder {
	color: #0a4078;
	letter-spacing: 1px;
	font-size: 16px;
}
.loginPage_login_btn{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#6e70cc+0,9894ec+36,423da5+69,2d2c64+100 */
	background: #330d69   !important;
    background: -moz-linear-gradient(to bottom, #00c0fa 0%, #015eea 99%) !important;
    background: -webkit-linear-gradient(to bottom, #00c0fa 0%, #015eea 99%) !important;
    background: linear-gradient(to bottom, #00c0fa 0%, #015eea 99%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00c0fa', endColorstr='#015eea  ',GradientType=0 ) !important;

	color: #fff;
}
.service-div{
	width: 204px;
}
.service-div .row{
	margin: auto;
}
#aboutMeLogoImg{
	width: 31%;
}

.demo_logo {
    width: 16%;
    height: auto;
    position: absolute;
    top: 215%;
    left: 50%;
    transform: translate(-50%, 0%);
}
.demo {
    top: 175%;
    left: 50%;
    transform: translate(-50%, 0%);
    position: absolute;
}

.demo_moon{
	width: 23%;
    height: auto;
    position: absolute;
    top: 135%;
    left: 50%;
    transform: translate(-50%, 0%);
}
.loading_animation{
	position: absolute;
    left: 509px;
    top: 445px;
}
.loading_animation_list {
    position: absolute;
    top: 245%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.loading_special span {
    display: inline-block;
    vertical-align: middle;
    width: 1.2em;
    height: 1.2em;
    margin: 0.4em;
    background: #f60e0e;
    border-radius: .6em;
    animation: loading-special 1s infinite alternate;
    border-color: #fff;
    border-style: solid;
    border-width: 2px;
  }
  /*
 * Dots Colors
 * Smarter targeting vs nth-of-type?
 */
.loading_special span:nth-of-type(2) {
    background: #ff8400;
    animation-delay: 0.4s;
  }
  .loading_special span:nth-of-type(3) {
    background: #f60e0e;
    animation-delay: 0.2s;
  }
  .loading_special span:nth-of-type(4) {
    background: #ff8400;
    animation-delay: 0.6s;
  }
  .loading_special span:nth-of-type(5) {
    background: #f60e0e;
    animation-delay: 0.8s;
  }
  
  /*
   * Animation keyframes
   * Use transition opacity instead of keyframes?
   */
  @keyframes loading-special {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(0.5);
    }
  }

.demo_rabbit{
	width: 153px;
    height: 120px;
    position: absolute;
    top: 372px;
    left: 437px;
    transform: rotate(-15deg);
}
.demo_lattern{
    width: 5%;
    height: auto;
    position: absolute;
    top: 150%;
    left: 42%;
    transform: translate(-50%, 0%);
}

.demo_lattern2 {
    width: 4%;
    height: auto;
    position: absolute;
    top: 185%;
    left: 58%;
    transform: translate(-50%, 0%);
}

@keyframes rotateImage {
	0% {
		transform: rotate(-15deg);
	}
	50% {
		transform: rotate(15deg);
	}
	100% {
		transform: rotate(-15deg);
	}
  }
  
  .rabbit_go {
	animation: rotateImage 2s linear infinite;
	/* 2s表示动画持续时间，可以根据需要调整 */
  }

  @keyframes rotateImage_lattern {
    0% {
      transform: translate(-50%, 0%) rotate(-15deg);
    }
    50% {
      transform: translate(-50%, 0%) rotate(15deg);
    }
    100% {
      transform: translate(-50%, 0%) rotate(-15deg);
    }
  }
    @keyframes rotateImage_lattern2 {
    0% {
      transform: translate(-50%, 0%) rotate(15deg);
    }
    50% {
      transform: translate(-50%, 0%) rotate(-15deg);
    }
    100% {
      transform: translate(-50%, 0%) rotate(15deg);
    }
  }
  .lattern_go{
	transform-origin: top center;
  animation: rotateImage_lattern 2s ease-in-out infinite;
  }

  .lattern_go2 {
    transform-origin: top center;
    animation-delay: 0.8s;
	  animation: rotateImage_lattern2 2s linear infinite;
  }

  /*飄元寶特效*/
.drop {
	width: 100px;
	height: 100px;
	position: absolute;
	top: -200px;
	z-index: 5;
}
.drop img{
	width: 100%;
    height: auto;
}
/*開場動畫*/
.opening-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    overflow: hidden;
    position: fixed;
    background: rgb(7 7 7 / 70%);
  
  }
  #opening {
    height: 100%;
    overflow: hidden;
    position: relative;
  }
  /*電腦版*/
  .img-building {
    width: 100%;
    height: auto;
  }
  
  .demo-building {
	opacity: 0;
    width: 30%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 20%);
    animation: go-building 1s ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    z-index: 9;
  }
  @keyframes go-building {
  0% {  
		  opacity: 0;
      transform: translate(-50%, 20%) scale(0);
    }
  100% {
        transform: translate(-50%, 20%) scale(1);
		opacity: 1;
    }
  }
  .demo-boat {
	    opacity: 0;
    width: 23%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 120%);
    opacity: 0;
    z-index: 999;
    animation: go-building2 1s ease-in-out;
    animation-delay: 0.8s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
    @keyframes go-building2 {
    0% {  
        opacity: 0;
        transform: translate(-50%, 120%) scale(0);
      }
    100% {
          transform: translate(-50%, 120%) scale(1);
      opacity: 1;
      }
  }


.demo-duanwu{
    width: 21%;
    height: auto;
    position: absolute;
    top: 350%;
    left: 50%;
    transform: translate(-50%, 115%);
    z-index: 999;
    opacity: 0;
    animation-name: go-building3;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-delay: 1.2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;	
}
@keyframes go-building3 {
0% {  
    opacity: 0;
    transform: translate(-50%, 115%) scale(0);
  }
100% {
      transform: translate(-50%, 115%) scale(1);
  opacity: 1;
  }
}
/*手機版*/
.demo-building-rwd{
    width: 100%;
    height: 60%;
    position: absolute;
    top: 0px;
    left: 11px;
  }
  .img-building-rwd{
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    right: 0;
    bottom: 0;
    left: 50%;
    margin: auto;
    animation: go-building-rwd 1s ease-in-out;
    animation-fill-mode: forwards;
    z-index: 9;
    transform: translate(-50%, 0%);
  }
  @keyframes go-building-rwd {
    0% {  
          opacity: 0;
          transform: translate(-50%, 0%) scale(0);
      }
    100% {
          opacity: 1;
          transform: translate(-50%, 0%) scale(1);
      }
    }
  .img-boat-rwd{
    opacity: 0;
    width: 85%;
    height: auto;
    position: absolute;
    top: -86%;
    right: 0%;
    bottom: 0;
    left: 50%;
    margin: auto;
    animation: go-building-rwd2 1s ease-in-out;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
    transform: translate(-50%, 0%);
    z-index: 99;
  }
  @keyframes go-building-rwd2 {
    0% {  
          opacity: 0;
          transform: translate(-50%, 0%) scale(0);
      }
    100% {
          opacity: 1;
          transform: translate(-50%, 0%) scale(1);
      }
    }
 
	.img-duanwu-rwd{
    width: 80%;
    height: auto;
    position: absolute;
    top: 135%;
    right: 0;
    bottom: 0;
    left: 50%;
    margin: auto;
    opacity: 0;
    animation: go-building-rwd3 0.4s ease-in-out;
    animation-delay: 1s;
    animation-fill-mode: forwards;
    transform: translate(-50%, 0%);
    z-index: 99;
	}
	@keyframes go-building-rwd3 {
    0% {  
          opacity: 0;
          transform: translate(-50%, 0%) scale(0);
      }
    100% {
          opacity: 1;
          transform: translate(-50%, 0%) scale(1);
      }
  }

/*loading手機板*/
.an1.img {
    width: 48px;
    height: 48px;
    position: absolute;
    top: -11px;
    right: -9px;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 1;
}
.img_moon{
    width: 173px;
    height: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
.demo1_span {
    width: 100%;
    height: 73%;
    position: absolute;
    top: 11px;
    left: 0;
}

.img_rabbit{
	width: 84px;
    height: auto;
    position: absolute;
    top: 40px;
    right: 87px;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 1;
}
.img_lattern{
    width: 12%;
    height: auto;
    position: absolute;
    top: -15%;
    right: 0;
    bottom: 0;
    left: -30%;
    margin: auto;
    z-index: 1;
    animation: rotateImage_lattern_rwd 2s ease-in-out infinite;
    transform-origin: top center;
    transform: translate(-50%, 0%);
}

.img_lattern2 {
    width: 11%;
    height: auto;
    position: absolute;
    top: -13%;
    right: 0;
    bottom: 0;
    left: 60%;
    margin: auto;
    z-index: 1;
    animation: rotateImage_lattern_rwd2 2s ease-in-out infinite;
    transform-origin: top center;
    /* animation-delay: 0.s; */
    transform: translate(-50%, 0%);
}

@keyframes rotateImage_lattern_rwd {
	    0% {
      transform: translate(-50%, 0%) rotate(-15deg);
    }
    50% {
      transform: translate(-50%, 0%) rotate(15deg);
    }
    100% {
      transform: translate(-50%, 0%) rotate(-15deg);
    }
  }
  
@keyframes rotateImage_lattern_rwd2 {
	    0% {
      transform: translate(-50%, 0%) rotate(15deg);
    }
    50% {
      transform: translate(-50%, 0%) rotate(-15deg);
    }
    100% {
      transform: translate(-50%, 0%) rotate(15deg);
    }
  }
  

  @media only screen and (max-width: 768px) {
    /* 在這裡添加你的手機樣式 */
    .loading_special span {
        display: inline-block;
        vertical-align: middle;
        width: 1em;
        height: 1em;
        margin: 0.25em;
        background: #f60e0e;
        border-radius: .6em;
        animation: loading-special 1s infinite alternate;
        border-color: #ffd800;
        border-style: solid;
        border-width: 1px;
    }
  }
  .demo1_loading_list {
    width: 100%;
    height: 25px;
    position: absolute;
    top: 123px;
    right: 0;
    bottom: 0;
    left: 2px;
    margin: auto;
}
.demo_ncows{
  width: 125px;
    height: auto;
    position: absolute;
    top: 322px;
    left: 522px;
}

.loading_animation_rwd > div, .demo1_loading_list > div {
  width: 45%;
}