/*
 * SEEK
 * Copyright (C) 2025 placelink
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program. If not, see <https://www.gnu.org/licenses/>.
 *
 * =========================================================================
 *
 * 상업적 이용 또는 AGPL-3.0의 공개 의무를 면제받기
 * 위해서는, placelink로부터 별도의 상업용 라이선스(Commercial License)를 구매해야 합니다.
 * For commercial use or to obtain an exemption from the AGPL-3.0 license
 * requirements, please purchase a commercial license from placelink.
 * *** 문의처: help@placelink.shop (README.md 참조)
 */

/* ===================================================================================================
    Loading
=================================================================================================== */
#s2-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 7777777;
  width: 100%;
  height: 100%;
  box-sizing: content-box;
}
#s2-loading-overlay.background {
  background-color: rgba(0, 0, 0, 0.7);
}
#s2-loading-overlay .loader-container {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1060;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: 0;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
#s2-loading-overlay .hexagon-wrap {
  display: flex;
  height: 15%;
  width: 15%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: rotate(-30deg);
  opacity: 1;
}
#s2-loading-overlay .loader-container .hexagon {
  position: relative;
  width: 1.9375rem;
  height: 1.6625rem;
  background-color: rgba(255, 255, 255, 0);
  margin: 0.83125rem 0;
  border-left: solid 0.5rem #b4b1b8;
  border-right: solid 0.5rem #b4b1b8;
  float: left;
  transition: all 0.3s ease-in-out;
}

#s2-loading-overlay .loader-container .hexagon.gray .inner-line:before,
#s2-loading-overlay .loader-container .hexagon.blue .inner-line:before {
  content: '';
  position: absolute;
  z-index: 1;
  width: 0.28125rem;
  height: 0.39375rem;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: rgba(255, 255, 255, 0);
  border-radius: 0.3125rem;
  opacity: 0.6;
}

#s2-loading-overlay .loader-container .hexagon.gray .inner-line:before {
  bottom: 0.0625rem;
  left: 0.61875rem;
  border-bottom: solid 0.5rem #e8e6eb;
  border-left: solid 0.5rem #e8e6eb;
}
#s2-loading-overlay .loader-container .hexagon.blue .inner-line:before {
  top: 0.0625rem;
  left: 0.61875rem;
  border-top: solid 0.5rem #e8e6eb;
  border-right: solid 0.5rem #e8e6eb;
}

#s2-loading-overlay .loader-container .hexagon .hexagon-line {
  position: absolute;
  background-color: #b4b1b8;
  border-radius: 0.3125rem;
}
#s2-loading-overlay .loader-container .hexagon.hex2 .hexagon-line {
  width: 0.5625rem;
  height: 1.1875rem;
  left: -0.875rem;
  bottom: -0.6875rem;
  transform: rotate(59deg);
}
#s2-loading-overlay .loader-container .hexagon.hex3 .hexagon-line {
  width: 0.5625rem;
  height: 1.1875rem;
  bottom: -0.6875rem;
  left: -0.875rem;
  transform: rotate(60deg);
}
#s2-loading-overlay .loader-container .hexagon.hex4 .hexagon-line.line1 {
  width: 0.5625rem;
  height: 1.1875rem;
  bottom: -1.5625rem;
  left: 0.625rem;
}
#s2-loading-overlay .loader-container .hexagon.hex4 .hexagon-line.line2 {
  width: 1.1875rem;
  height: 0.5625rem;
  top: 1.4375rem;
  right: -1.1875rem;
  transform: rotate(30deg);
}
#s2-loading-overlay .loader-container .hexagon.hex4 .hexagon-line.line3 {
  width: 1.1875rem;
  height: 0.5625rem;
  bottom: -0.375rem;
  left: -1.25rem;
  transform: rotate(-30deg);
}
#s2-loading-overlay .loader-container .hexagon .hexagon-line.blue {
  background-color: #3488fc;
}

#s2-loading-overlay .loader-container .hexagon:before,
#s2-loading-overlay .loader-container .hexagon:after {
  content: '';
  position: absolute;
  z-index: 1;
  width: 1.34375rem;
  height: 1.33125rem;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: rgba(255, 255, 255, 0);
  left: -0.06875rem;
}

#s2-loading-overlay .loader-container .hexagon:before {
  top: -1.0625rem;
  border-top: solid 0.75rem #b4b1b8;
  border-right: solid 0.75rem #b4b1b8;
}
#s2-loading-overlay .loader-container .hexagon:after {
  bottom: -1.0625rem;
  border-bottom: solid 0.75rem #b4b1b8;
  border-left: solid 0.75rem #b4b1b8;
}

#s2-loading-overlay .loader-container .hexagon.blue {
  border-left: solid 0.5rem #3488fc;
  border-right: solid 0.5rem #3488fc;
  z-index: 2;
}
#s2-loading-overlay .loader-container .hexagon.blue:before {
  border-top: solid 0.75rem #3488fc;
  border-right: solid 0.75rem #3488fc;
}
#s2-loading-overlay .loader-container .hexagon.blue:after {
  border-bottom: solid 0.75rem #3488fc;
  border-left: solid 0.75rem #3488fc;
}

#s2-loading-overlay .loader-container .hexagon.hex1 {
  -webkit-animation: hex1 4s ease 1.5s infinite both;
  animation: hex1 4s ease 1.5s infinite;
  opacity: 0;
}
#s2-loading-overlay .loader-container .hexagon.hex2 {
  -webkit-animation: hex2 4s ease 0s infinite both;
  animation: hex2 4s ease 0s infinite;
  transform: rotate(60deg);
  opacity: 0;
}
#s2-loading-overlay .loader-container .hexagon.hex3 {
  margin-left: 1.25rem;
  -webkit-animation: hex3 4s ease 1s infinite both;
  animation: hex3 4s ease 1s infinite;
  transform: rotate(-120deg);
}
#s2-loading-overlay .loader-container .hexagon.hex4 {
  -webkit-animation: hex4 4s ease 0.5s infinite both;
  animation: hex4 4s ease 0.5s infinite;
  opacity: 0;
}

@keyframes hex1 {
  0%,
  100% {
    transform: translateY(-0.3125rem);
    opacity: 0;
  }
  40%,
  60% {
    transform: translateY(1.25rem);
    opacity: 1;
  }
}

@keyframes hex2 {
  0%,
  100% {
    transform: translateX(-0.625rem) rotate(60deg);
    opacity: 0;
  }
  40.5%,
  72.5% {
    transform: translateX(0.8125rem) rotate(60deg);
    opacity: 1;
  }
}

@keyframes hex3 {
  0%,
  100% {
    transform: translateX(0) rotate(-120deg);
  }
  30%,
  65% {
    transform: translateX(-0.8125rem) rotate(-120deg);
  }
}

@keyframes hex4 {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0;
  }
  26%,
  67% {
    transform: translateY(-1.25rem);
    opacity: 1;
  }
}

#s2-loading-overlay .loader-container .progress-wrap {
  position: relative;
  width: 15.625rem;
  height: 1.125rem;
  margin-top: 2.1875rem;
  background-color: #b4b1b8;
  border-radius: 0.625rem;
  overflow: hidden;
  text-align: center;
  color: #fff;
  font-size: 0.6875rem;
  line-height: 1.125rem;
}
#s2-loading-overlay .loader-container .progress-wrap .progress-text {
  position: absolute;
  right: 0.5625rem;
  /*top: 50%;*/
  /*left: 50%;*/
  /*transform: translate(-50%, -50%);*/
}
#s2-loading-overlay .loader-container .progress-wrap .progress-bar {
  width: 0;
  height: 100%;
  background-color: #33d0ad;
  /*animation: loading 10s infinite;*/
}
/*@keyframes loading {*/
/*  0% { width: 0; }*/
/*  100% { width: 100%; }*/
/*}*/