/* 로딩 효과 */
#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;}
#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;
}


.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;
}

@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; }