/*---Loading---*/
.loading_box {
	width: 100%;
	height: 100%;
	background: #fff2cb;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 99999;
  }
  
  /*自動水平垂直罝中：position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto;*/
  .loading_box .load_g {
	display: block;
	width: 50px;
	height: 50px;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	z-index: 3;
  }
  
  .loading_box .load_g i {
	display: block;
	float: left;
	width: 6px;
	height: 50px;
	background: #eda927;
	margin: 0 2px;
	transform: scaleY(0.4);
	animation: load 1.2s infinite;
  }
  
  @keyframes load {
	0%,
	40%,
	100% {
	  transform: scaleY(0.4);
	}
	20% {
	  transform: scaleY(1);
	}
  }
  
  .loading_box .load_g i:nth-child(2) {
	animation-delay: 0.1s;
  }
  
  .loading_box .load_g i:nth-child(3) {
	animation-delay: 0.2s;
  }
  
  .loading_box .load_g i:nth-child(4) {
	animation-delay: 0.3s;
  }
  
  .loading_box .load_g i:nth-child(5) {
	animation-delay: 0.4s;
  }


 /* gototop */
 /*****************************************************/
.gototop {
    display: none;
    -webkit-animation: hide 350ms ease-out forwards 1;
    animation: hide 350ms ease-out forwards 1;
    padding:0;
    border: 0;
    border-radius: 50%;
    text-align: center;
    /* background-color:#FD1472; */
    background:none;
    color: #fff;
    position: fixed;
    bottom: 16px;
    right: 48.5%;
    /* box-shadow: 0 2px 10px rgba(253, 20, 114,.5); */
    -webkit-transition: background-color 100ms ease-in-out;
	transition: background-color 100ms ease-in-out;
	z-index: 10;
}
@media (max-width: 768px) {
  .gototop {right: 45%;}
}
.gototop > span {
    display: inline-block;
    -webkit-transition: transform 100ms 100ms ease-in-out;
    transition: transform 100ms 100ms ease-in-out;
}
.gototop:hover,
.gototop:focus {
    /* background-color:#FD3D8A; */
    background:none;
}
.gototop:hover > span,
.gototop:focus > span {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
}
.isvisible {
    -webkit-animation: show 1s ease-out forwards 1;
    animation: show 1s ease-out forwards 1;
}

@-webkit-keyframes hide{
  0% {
    opacity: 1;
    -webkit-transform:translateY(0);
  }
  25%{
    opacity: .5;
    -webkit-transform: rotate(-3deg) translateY(-40px);
  }
  75%{
    -webkit-transform: rotate(3deg);
  }
  100%{
    opacity: 0;
    -webkit-transform:translateY(100px);
  }
}
@keyframes hide{
  0% {
    opacity: 1;
    transform:translateY(0);
  }
  25%{
    opacity: .5;
    transform: rotate(-3deg) translateY(-40px);
  }
  75%{
    transform: rotate(3deg);
  }
  100%{
    opacity: 0;
    transform:translateY(100px);
  }
}

@-webkit-keyframes show{
  0% {
    -webkit-transform: rotate(0deg);
  }
  25%{
    opacity: .5;
    -webkit-transform: rotate(-3deg) translateY(-40px);
  }
  75%{
    -webkit-transform: rotate(3deg);
  }
  100%{
    opacity: 1;
    -webkit-transform: rotate(0deg);
  }
}

@keyframes show{
  0% {
    transform: rotate(0deg);
  }
  25%{
    opacity: .5;
    transform: rotate(-3deg) translateY(-40px);
  }
  75%{
    transform: rotate(3deg);
  }
  100%{
    opacity: 1;
    transform: rotate(0deg);
  }
}