@charset "utf-8";

/* type01 */
.echoss_loading_type01 { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: block; font-size: 0; line-height:0; text-align: center; background-color:transparent; z-index: 10000; opacity: 1; visibility: visible; }
.echoss_loading_type01:before { display: inline-block; overflow: hidden; width: 0; height: 100%; vertical-align: middle; content: ''; }
.echoss_loading_type01_wrap { position: relative; width: 23%; max-width: 110px; margin: 0 auto; display: inline-block; vertical-align: middle; border-radius: 50%; background-color: rgba(95,180,239,0.8);
  -webkit-animation: echoss_loading_type01_background 1s linear infinite 0s;
  -moz-animation: echoss_loading_type01_background 1s linear infinite 0s;
  -ms-animation: echoss_loading_type01_background 1s linear infinite 0s;
  animation: echoss_loading_type01_background 1s linear infinite 0s;
}
.echoss_loading_type01_gif_wrap { position: relative; }
.echoss_loading_type01_gif_frame { width: 100%; }
.echoss_loading_type01_gif { position: absolute; width: 100%; top: 0; left: 0;
  -webkit-transform:scale(0.5);
  -moz-transform:scale(0.5);
  -ms-transform:scale(0.5);
  transform:scale(0.5);
}
.echoss_loading_type01_wrap > img { position: absolute; width: 100%; top:0; left:0; }
.echoss_loading_type01_motion01 {
  -webkit-transform:scale(0.3);
  -moz-transform:scale(0.3);
  -ms-transform:scale(0.3);
  transform:scale(0.3);
  -webkit-animation: echoss_loading_type01_scale_up 0.9s linear infinite 0s;
  -moz-animation: echoss_loading_type01_scale_up 0.9s linear infinite 0s;
  -ms-animation: echoss_loading_type01_scale_up 0.9s linear infinite 0s;
  animation: echoss_loading_type01_scale_up 0.9s linear infinite 0s;
}

.echoss_loading_type01_motion02 {
  -webkit-transform:scale(0.3);
  -moz-transform:scale(0.3);
  -ms-transform:scale(0.3);
  transform:scale(0.3);
  -webkit-animation: echoss_loading_type01_scale_up 0.9s linear infinite 0.2s;
  -moz-animation: echoss_loading_type01_scale_up 0.9s linear infinite 0.2s;
  -ms-animation: echoss_loading_type01_scale_up 0.9s linear infinite 0.2s;
  animation: echoss_loading_type01_scale_up 0.9s linear infinite 0.2s;
}
.echoss_loading_type01_motion03 {
  -webkit-transform:scale(0.3);
  -moz-transform:scale(0.3);
  -ms-transform:scale(0.3);
  transform:scale(0.3);
  -webkit-animation: echoss_loading_type01_scale_up 0.9s linear infinite 0.4s;
  -moz-animation: echoss_loading_type01_scale_up 0.9s linear infinite 0.4s;
  -ms-animation: echoss_loading_type01_scale_up 0.9s linear infinite 0.4s;
  animation: echoss_loading_type01_scale_up 0.9s linear infinite 0.4s;
}

/* ANIMATION - echoss_loading_type01_background */
@-webkit-keyframes echoss_loading_type01_background {
  0% { background-color: rgba(95,180,239,0.8); }
  14.28% { background-color: rgba(91,136,233,0.8); }
  28.56% { background-color: rgba(229,211,12,0.8); }
  42.84% { background-color: rgba(242,76,76,0.8); }
  57.12% { background-color: rgba(183,141,82,0.8); }
  71.4% { background-color: rgba(77,214,118,0.8); }
  85.68% { background-color: rgba(94,110,161,0.8); }
  100% {}
}
@-moz-keyframes echoss_loading_type01_background {
  0% { background-color: rgba(95,180,239,0.8); }
  14.28% { background-color: rgba(91,136,233,0.8); }
  28.56% { background-color: rgba(229,211,12,0.8); }
  42.84% { background-color: rgba(242,76,76,0.8); }
  57.12% { background-color: rgba(183,141,82,0.8); }
  71.4% { background-color: rgba(77,214,118,0.8); }
  85.68% { background-color: rgba(94,110,161,0.8); }
  100% {}
}
@-ms-keyframes echoss_loading_type01_background {
  0% { background-color: rgba(95,180,239,0.8); }
  14.28% { background-color: rgba(91,136,233,0.8); }
  28.56% { background-color: rgba(229,211,12,0.8); }
  42.84% { background-color: rgba(242,76,76,0.8); }
  57.12% { background-color: rgba(183,141,82,0.8); }
  71.4% { background-color: rgba(77,214,118,0.8); }
  85.68% { background-color: rgba(94,110,161,0.8); }
  100% {}
}
@keyframes echoss_loading_type01_background {
  0% { background-color: rgba(95,180,239,0.8); }
  14.28% { background-color: rgba(91,136,233,0.8); }
  28.56% { background-color: rgba(229,211,12,0.8); }
  42.84% { background-color: rgba(242,76,76,0.8); }
  57.12% { background-color: rgba(183,141,82,0.8); }
  71.4% { background-color: rgba(77,214,118,0.8); }
  85.68% { background-color: rgba(94,110,161,0.8); }
  100% {}
}

/* ANIMATION - echoss_loading_type01_scale_up */
@-webkit-keyframes echoss_loading_type01_scale_up {
  0% { -webkit-transform: scale(0.3); opacity: 1; }
  50% { -webkit-transform: opacity(0.74);}
  100% { -webkit-transform: scale(2.30); opacity: 0.2; }
}
@-moz-keyframes echoss_loading_type01_scale_up {
  0% { -moz-transform: scale(0.3); opacity: 1; }
  50% { -moz-transform: opacity(0.74);}
  100% { -moz-transform: scale(2.30); opacity: 0.2; }
}
@-ms-keyframes echoss_loading_type01_scale_up {
  0% { -ms-transform: scale(0.3); opacity: 1; }
  50% { -ms-transform: opacity(0.74);}
  100% { -ms-transform: scale(2.30); opacity: 0.2; }
}
@keyframes echoss_loading_type01_scale_up {
  0% { transform: scale(0.3); opacity: 1; }
  50% { transform: opacity(0.74);}
  100% { transform: scale(2.30); opacity: 0.2; }
}

/* type02 */
.echoss_loading_type02 { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: block; font-size: 0; line-height:0; text-align: center; background-color:transparent; z-index: 10000; opacity: 1; visibility: visible; }
.echoss_loading_type02:before { display: inline-block; overflow: hidden; width: 0; height: 100%; vertical-align: middle; content: ''; }
.echoss_loading_type02_wrap { position: relative; width: 39%; max-width: 180px; margin: 0 auto; display: inline-block; vertical-align: middle; }
.echoss_loading_type02_frame_wrap { position: relative; }
.echoss_loading_type02_frame { width: 100%; }
.echoss_loading_type02_wrap > img { position: absolute; width: 100%; top:0; left:0; }
.echoss_loading_type02_motion01 {
	-webkit-animation: echoss_loading_type02_rotate 10s linear infinite 0s;
	-moz-animation: echoss_loading_type02_rotate 10s linear infinite 0s;
	-ms-animation: echoss_loading_type02_rotate 10s linear infinite 0s;
	animation: echoss_loading_type02_rotate 10s linear infinite 0s;
}
.echoss_loading_type02_motion02 {
	-webkit-animation: echoss_loading_type02_rotate_reverse 2s linear infinite 0s;
	-moz-animation: echoss_loading_type02_rotate_reverse 2s linear infinite 0s;
	-ms-animation: echoss_loading_type02_rotate_reverse 2s linear infinite 0s;
	animation: echoss_loading_type02_rotate_reverse 2s linear infinite 0s;
}
.echoss_loading_type02_motion03 {
	-webkit-animation: echoss_loading_type02_rotate 2s linear infinite 0s;
	-moz-animation: echoss_loading_type02_rotate 2s linear infinite 0s;
	-ms-animation: echoss_loading_type02_rotate 2s linear infinite 0s;
	animation: echoss_loading_type02_rotate 2s linear infinite 0s;
}
.echoss_loading_type02_motion05 {
	-webkit-animation: echoss_loading_type02_scale_up 1s linear infinite 0s;
	-moz-animation: echoss_loading_type02_scale_up 1s linear infinite 0s;
	-ms-animation: echoss_loading_type02_scale_up 1s linear infinite 0s;
	animation: echoss_loading_type02_scale_up 1s linear infinite 0s;
}

/* ANIMATION - echoss_loading_type02_rotate */
@-webkit-keyframes echoss_loading_type02_rotate {
 from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes echoss_loading_type02_rotate {
 from { -moz-transform: rotate(0deg); }
  to { -moz-transform: rotate(360deg); }
}
@-ms-keyframes echoss_loading_type02_rotate {
 from { -ms-transform: rotate(0deg); }
  to { -ms-transform: rotate(360deg); }
}
/* ANIMATION - echoss_loading_type02_rotate_reverse */
@-webkit-keyframes echoss_loading_type02_rotate_reverse {
 from { -webkit-transform: rotate(360deg); }
  to { -webkit-transform: rotate(0deg); }
}
@-moz-keyframes echoss_loading_type02_rotate_reverse {
 from { -moz-transform: rotate(360deg); }
  to { -moz-transform: rotate(0deg); }
}
@-ms-keyframes echoss_loading_type02_rotate_reverse {
 from { -ms-transform: rotate(360deg); }
  to { -ms-transform: rotate(0deg); }
}
/* ANIMATION - echoss_loading_type02_scale_up */
@-webkit-keyframes echoss_loading_type02_scale_up {
 from { -webkit-transform: scale(0.1); opacity: 1; }
  to { -webkit-transform: scale(2.0); opacity: 0; }
}
@-moz-keyframes echoss_loading_type02_scale_up {
 from { -moz-transform: scale(0.1); opacity: 1; }
  to { -moz-transform: scale(2.0); opacity: 0; }
}
@-ms-keyframes echoss_loading_type02_scale_up {
 from { -ms-transform: scale(0.1); opacity: 1; }
  to { -ms-transform: scale(2.0); opacity: 0; }
}

/* type03 */
.echoss_loading_type03 { position: fixed; width: 100%; height: 100%; z-index: 10000; top: 0; left: 0; text-align: center; font-size: 0; }
.echoss_loading_type03_wrap { width: 52px; height: 52px; display: inline-block; vertical-align: middle; position: absolute; top: 50%; left: 50%; margin-left: -26px; margin-top: -26px; }
.echoss_loading_type03_wrap > div { width: 12%; height: 26%; background: #fff; position: absolute; left: 44.5%; top: 37%; opacity: 0;
  -webkit-animation: echoss_loading_type03_fade 1s linear infinite;
  -moz-animation: echoss_loading_type03_fade 1s linear infinite;
  -o-animation: echoss_loading_type03_fade 1s linear infinite;
  animation: echoss_loading_type03_fade 1s linear infinite;
  border-top-left-radius:3px;
  border-top-right-radius:3px;
  border-bottom-left-radius:3px;
  border-bottom-right-radius:3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 0 3px rgba(0,0,0,0.2);
  -o-box-shadow: 0 0 3px rgba(0,0,0,0.2);
  box-shadow: 0 0 3px rgba(0,0,0,0.2);
}

.echoss_loading_type03_wrap .echoss_loading_type03_motion01 {
  -webkit-transform:rotate(0deg) translate(0, -142%);
  -moz-transform:rotate(0deg) translate(0, -142%);
  -o-transform:rotate(0deg) translate(0, -142%);
  transform:rotate(0deg) translate(0, -142%);
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -o-animation-delay: 0s;
  animation-delay: 0s;
}
.echoss_loading_type03_wrap .echoss_loading_type03_motion02 {
  -webkit-transform:rotate(30deg) translate(0, -142%);
  -moz-transform:rotate(30deg) translate(0, -142%);
  -o-transform:rotate(30deg) translate(0, -142%);
  transform:rotate(30deg) translate(0, -142%);
  -webkit-animation-delay: -0.9167s;
  -moz-animation-delay: -0.9167s;
  -o-animation-delay: -0.9167s;
  animation-delay: -0.9167s;
}
.echoss_loading_type03_wrap .echoss_loading_type03_motion03 {
  -webkit-transform:rotate(60deg) translate(0, -142%);
  -moz-transform:rotate(60deg) translate(0, -142%);
  -o-transform:rotate(60deg) translate(0, -142%);
  transform:rotate(60deg) translate(0, -142%);
  -webkit-animation-delay: -0.833s;
  -moz-animation-delay: -0.833s;
  -o-animation-delay: -0.833s;
  animation-delay: -0.833s;
}
.echoss_loading_type03_wrap .echoss_loading_type03_motion04 {
  -webkit-transform:rotate(90deg) translate(0, -142%);
  -moz-transform:rotate(90deg) translate(0, -142%);
  -o-transform:rotate(90deg) translate(0, -142%);
  transform:rotate(90deg) translate(0, -142%);
  -webkit-animation-delay: -0.75s;
  -moz-animation-delay: -0.75s;
  -o-animation-delay: -0.75s;
  animation-delay: -0.75s;
}
.echoss_loading_type03_wrap .echoss_loading_type03_motion05 {
  -webkit-transform:rotate(120deg) translate(0, -142%);
  -moz-transform:rotate(120deg) translate(0, -142%);
  -o-transform:rotate(120deg) translate(0, -142%);
  transform:rotate(120deg) translate(0, -142%);
  -webkit-animation-delay: -0.667s;
  -moz-animation-delay: -0.667s;
  -o-animation-delay: -0.667s;
  animation-delay: -0.667s;
}
.echoss_loading_type03_wrap .echoss_loading_type03_motion06 {
  -webkit-transform:rotate(150deg) translate(0, -142%);
  -moz-transform:rotate(150deg) translate(0, -142%);
  -o-transform:rotate(150deg) translate(0, -142%);
  transform:rotate(150deg) translate(0, -142%);
  -webkit-animation-delay: -0.5833s;
  -moz-animation-delay: -0.5833s;
  -o-animation-delay: -0.5833s;
  animation-delay: -0.5833s;
}
.echoss_loading_type03_wrap .echoss_loading_type03_motion07 {
  -webkit-transform:rotate(180deg) translate(0, -142%);
  -moz-transform:rotate(180deg) translate(0, -142%);
  -o-transform:rotate(180deg) translate(0, -142%);
  transform:rotate(180deg) translate(0, -142%);
  -webkit-animation-delay: -0.5s;
  -moz-animation-delay: -0.5s;
  -o-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
.echoss_loading_type03_wrap .echoss_loading_type03_motion08 {
  -webkit-transform:rotate(210deg) translate(0, -142%);
  -moz-transform:rotate(210deg) translate(0, -142%);
  -o-transform:rotate(210deg) translate(0, -142%);
  transform:rotate(210deg) translate(0, -142%);
  -webkit-animation-delay: -0.41667s;
  -moz-animation-delay: -0.41667s;
  -o-animation-delay: -0.41667s;
  animation-delay: -0.41667s;
}
.echoss_loading_type03_wrap .echoss_loading_type03_motion09 {
  -webkit-transform:rotate(240deg) translate(0, -142%);
  -moz-transform:rotate(240deg) translate(0, -142%);
  -o-transform:rotate(240deg) translate(0, -142%);
  transform:rotate(240deg) translate(0, -142%);
  -webkit-animation-delay: -0.333s;
  -moz-animation-delay: -0.333s;
  -o-animation-delay: -0.333s;
  animation-delay: -0.333s;
}
.echoss_loading_type03_wrap .echoss_loading_type03_motion10 {
  -webkit-transform:rotate(270deg) translate(0, -142%);
  -moz-transform:rotate(270deg) translate(0, -142%);
  -o-transform:rotate(270deg) translate(0, -142%);
  transform:rotate(270deg) translate(0, -142%);
  -webkit-animation-delay: -0.25s;
  -moz-animation-delay: -0.25s;
  -o-animation-delay: -0.25s;
  animation-delay: -0.25s;
}
.echoss_loading_type03_wrap .echoss_loading_type03_motion11 {
  -webkit-transform:rotate(300deg) translate(0, -142%);
  -moz-transform:rotate(300deg) translate(0, -142%);
  -o-transform:rotate(300deg) translate(0, -142%);
  transform:rotate(300deg) translate(0, -142%);
  -webkit-animation-delay: -0.1667s;
  -moz-animation-delay: -0.1667s;
  -o-animation-delay: -0.1667s;
  animation-delay: -0.1667s;
}
.echoss_loading_type03_wrap .echoss_loading_type03_motion12 {
  -webkit-transform:rotate(330deg) translate(0, -142%);
  -moz-transform:rotate(330deg) translate(0, -142%);
  -o-transform:rotate(330deg) translate(0, -142%);
  transform:rotate(330deg) translate(0, -142%);
  -webkit-animation-delay: -0.0833s;
  -moz-animation-delay: -0.0833s;
  -o-animation-delay: -0.0833s;
  animation-delay: -0.0833s;
}

/* ANIMATION - echoss_loading_type03_fade */
@-webkit-keyframes echoss_loading_type03_fade {
  from {opacity: 1;}
  to {opacity: 0.25;}
}
@-moz-keyframes echoss_loading_type03_fade {
  from {opacity: 1;}
  to {opacity: 0.25;}
}
@-o-keyframes echoss_loading_type03_fade {
  from {opacity: 1;}
  to {opacity: 0.25;}
}
@keyframes echoss_loading_type03_fade {
  from {opacity: 1;}
  to {opacity: 0.25;}
}

/* common */
.echoss_loading_dim { position: fixed; width: 100%; height: 100%; top: 0; left: 0; margin: 0; padding: 0; background-color: #000000; opacity: 0.4; z-index: 9999; }
