.loading {
	position: absolute; 
	z-index: 101; 
	top: 90px;
    left: 0px;
    bottom: 40px;
    right: 0px;
	background-color: rgba(255, 255, 255, 0.8); 
	animation: loading 2s ease-out;
}

.loader-container {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  filter: url('#goo');
  -webkit-animation: rotate-move 2s ease-in-out infinite;
          animation: rotate-move 2s ease-in-out infinite;
}

.dot { 
  width: 50px;
  height: 50px;
  border-radius: 80%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.dot-3 {
  background-color: #00ab4e;
  -webkit-animation: dot-3-move 2s ease infinite;
          animation: dot-3-move 2s ease infinite;
}

.dot-2 {
  background-color: #d22229;
  -webkit-animation: dot-2-move 2s ease infinite;
          animation: dot-2-move 2s ease infinite;
}

.dot-1 {
  background-color: #16469e;
  -webkit-animation: dot-1-move 2s ease infinite;
          animation: dot-1-move 2s ease infinite;
}

@-webkit-keyframes dot-3-move {
  20% {transform: scale(1)}
  45% {transform: translateY(-10px) scale(.45)}
  60% {transform: translateY(-20px) scale(.45)}
  80% {transform: translateY(-20px) scale(.45)}
  100% {transform: translateY(0px) scale(1)}
}

@keyframes dot-3-move {
  20% {transform: scale(1)}
  45% {transform: translateY(-10px) scale(.45)}
  60% {transform: translateY(-20px) scale(.45)}
  80% {transform: translateY(-20px) scale(.45)}
  100% {transform: translateY(0px) scale(1)}
}

@-webkit-keyframes dot-2-move {
  20% {transform: scale(1)}
  45% {transform: translate(-10px, 10px) scale(.45)}
  60% {transform: translate(-20px, 20px) scale(.45)}
  80% {transform: translate(-20px, 20px) scale(.45)}
  100% {transform: translateY(0px) scale(1)}
}

@keyframes dot-2-move {
  20% {transform: scale(1)}
  45% {transform: translate(-10px, 10px) scale(.45)}
  60% {transform: translate(-20px, 20px) scale(.45)}
  80% {transform: translate(-20px, 20px) scale(.45)}
  100% {transform: translateY(0px) scale(1)}
}

@-webkit-keyframes dot-1-move {
  20% {transform: scale(1)}
  45% {transform: translate(10px, 10px) scale(.45)}
  60% {transform: translate(20px, 20px) scale(.45)}
  80% {transform: translate(20px, 20px) scale(.45)}
  100% {transform: translateY(0px) scale(1)}
}

@keyframes dot-1-move {
  20% {transform: scale(1)}
  45% {transform: translate(10px, 10px) scale(.45)}
  60% {transform: translate(20px, 20px) scale(.45)}
  80% {transform: translate(20px, 20px) scale(.45)}
  100% {transform: translateY(0px) scale(1)}
}

@-webkit-keyframes rotate-move {
  55% {transform: rotate(0deg)}
  80% {transform: rotate(360deg)}
  100% {transform: rotate(360deg)}
}

@keyframes rotate-move {
  55% {transform: rotate(0deg)}
  80% {transform: rotate(360deg)}
  100% {transform: rotate(360deg)}
}


/*다운로드 진행률 프로그래스 바*/
.progressbar-container {
	position: absolute;
	width: 100%;
	
	top: 50%;
	transform: translatey(-50%);
}
.progressbar-container .tt {
	text-align:center;
	font-weight: 700;
    line-height: 30px;
	text-shadow: 0 0 10px rgba(255, 255, 255, 0.8) ;
}
.progressbar-container > .progressbar-back {
	position: relative;
	background-color: #fff;
	width: 80%;
	height: 20px;
	/* top: 50%; */
	left: 50%;
	transform: translatex(-50%);
	float: left;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 0 20px rgba(44, 51, 73, 0.5);
	border: 5px solid #fff;
}
.progressbar-container .progressbar {
	position: absolute;
	width: 0%;
	height: 10px;
	background-color: #67c36f;
	top: 0;
	left: 0;
	border-radius: 5px;
	animation: progressbar 2s ease-out;
}
.progressbar-container .progress-value {
	width: 0%;
	position: relative;
	float: left;
	font-size: 11px;
	line-height: 20px;
}

/*다운로드 진행률 프로그래스 바 끝*/