/* 로딩 효과 */
#load { max-width:450px; width:100%; height:100%; top:0; left:50%; transform:translateX(-50%); position:fixed; display:block; /*background: #fff;*/
color:#000; z-index: 99; text-align: center; background-image: url(../img/result/w-bg.jpg); }
/* 다크모드일 때 */
/* @media (prefers-color-scheme: dark) {
  #load {
    background-color: #fff;
    color: #000;
  }
} */
#load > img { position: absolute; top:40%; left:50%; transform:translateX(-50%); z-index:100; }
#load .load_ment { position: absolute; top: 30%; left:50%; transform:translateX(-50%); z-index:100; font-size:1.6rem; }

#load .loading_div { position: absolute; top:40%; left:50%; transform:translateX(-50%); z-index:100; }
.loading_txt.fc_red { color: #E21919; }

.load {
  height:100%;
  justify-content: center;
}

/* ** new 버전 251223 ** */
.load {
  height: 100%;
  justify-content: center;
  display: flex;
  align-items: center;
}
.loader {
  position: relative;
  width: 60px;
  height: 60px;
}
.load_left, .load_right {
  width: 50%;
}
.loading1 {
  height: 80px;
}

.loader span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 12px;
  /* background: #000; */
  border-radius: 10px;
  transform-origin: center 6px;
  animation: fade 1s linear infinite;
}
.loader span:nth-child(1) {
  transform: rotate(0deg) translateY(-20px);
  animation-delay: 0s;
  background: #f2f2f2;
}

.loader span:nth-child(2) {
  transform: rotate(45deg) translateY(-20px);
  animation-delay: 0.125s;
  background: #dcdcdc;
}

.loader span:nth-child(3) {
  transform: rotate(90deg) translateY(-20px);
  animation-delay: 0.25s;
  background: #c6c6c6;
}

.loader span:nth-child(4) {
  transform: rotate(135deg) translateY(-20px);
  animation-delay: 0.375s;
  background: #a8a8a8;
}

.loader span:nth-child(5) {
  transform: rotate(180deg) translateY(-20px);
  animation-delay: 0.5s;
  background: #8a8a8a;
}

.loader span:nth-child(6) {
  transform: rotate(225deg) translateY(-20px);
  animation-delay: 0.625s;
  background: #6c6c6c;
}

.loader span:nth-child(7) {
  transform: rotate(270deg) translateY(-20px);
  animation-delay: 0.75s;
  background: #4e4e4e;
}

.loader span:nth-child(8) {
  transform: rotate(315deg) translateY(-20px);
  animation-delay: 0.875s;
  background: #2f2f2f;
}
@keyframes fade {
  0%   { opacity: 1; }
  100% { opacity: 0.2; }
}
/* // new 버전 251223 // */



.loading {
  display: flex;
  align-items: center;
  padding-top:1.5rem;
  height:10rem;
}

.loading span { /* 230511  */
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  animation: loading 1s linear infinite;
  /*background-color: black; */background-color: white;
}

.loading_img1 { width:60%; margin-left:20%; }

.loading span:nth-child(1) {
  animation-delay: 0s;
}

.loading span:nth-child(2) {
  animation-delay: 0.2s;
  margin: 0px 1rem
}

.loading span:nth-child(3) {
  animation-delay: 0.4s;
}

.loading_ment {
  font-size: 1.4rem;
  margin-bottom: 4rem;
  margin-top: 4rem;
}

.loading_info { display:flex; font-size:1.2rem; font-weight: 400; padding: 0 0 1.4rem 3rem; gap: .3rem; text-align: left; }
.stress { color: #2e3d86; font-weight: 500; }

@keyframes loading {
  0%, 100% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}



@-webkit-keyframes scaling-circle {
  0%, 30%, 50%, 100% {
    -webkit-transform: rotate(calc(var(--angle) * 1deg)) translate(0, calc(var(--radius) * 1px)) scale(1);
            transform: rotate(calc(var(--angle) * 1deg)) translate(0, calc(var(--radius) * 1px)) scale(1); }
  40% {
    -webkit-transform: rotate(calc(var(--angle) * 1deg)) translate(0, calc(var(--radius) * 1px)) scale(0);
            transform: rotate(calc(var(--angle) * 1deg)) translate(0, calc(var(--radius) * 1px)) scale(0); } }
@keyframes scaling-circle {
  0%, 30%, 50%, 100% {
    -webkit-transform: rotate(calc(var(--angle) * 1deg)) translate(0, calc(var(--radius) * 1px)) scale(1);
            transform: rotate(calc(var(--angle) * 1deg)) translate(0, calc(var(--radius) * 1px)) scale(1); }
  40% {
    -webkit-transform: rotate(calc(var(--angle) * 1deg)) translate(0, calc(var(--radius) * 1px)) scale(0);
            transform: rotate(calc(var(--angle) * 1deg)) translate(0, calc(var(--radius) * 1px)) scale(0); } }

.scaling-circle {
  /* --radius: 25;
  --size: 10; */
  --radius: 10;
  --size: 4;
  height: calc(var(--size) * 1px);
  width: calc(var(--size) * 1px);
  position: absolute; }
.scaling-circle div {
height: 100%;
width: 100%;
position: absolute;
border-radius: 100%;
/* background: var(--primary); */
/* background: white; */
/* background: #aaa; */
background: #000;
-webkit-animation: scaling-circle 0.8s calc(var(--delay) * 1s) infinite ease;
        animation: scaling-circle 0.8s calc(var(--delay) * 1s) infinite ease;
-webkit-transform: rotate(calc(var(--angle) * 1deg)) translate(0, calc(var(--radius) * 1px));
        transform: rotate(calc(var(--angle) * 1deg)) translate(0, calc(var(--radius) * 1px)); }
.scaling-circle div:nth-child(1) {
  --angle: 45;
  --delay: 0.1; }
.scaling-circle div:nth-child(2) {
  --angle: 90;
  --delay: 0.2; }
.scaling-circle div:nth-child(3) {
  --angle: 135;
  --delay: 0.3; }
.scaling-circle div:nth-child(4) {
  --angle: 180;
  --delay: 0.4; }
.scaling-circle div:nth-child(5) {
  --angle: 225;
  --delay: 0.5; }
.scaling-circle div:nth-child(6) {
  --angle: 270;
  --delay: 0.6; }
.scaling-circle div:nth-child(7) {
  --angle: 315;
  --delay: 0.7; }
.scaling-circle div:nth-child(8) {
  --angle: 360;
  --delay: 0.8; }