/* op-animation */
#opload {
  position: relative;
}

.op-anim {
  position: fixed;
  inset: 0;
  margin: auto;
  width: 288px;
  height: 288px;
  z-index: 1002;
  opacity: 1;
}

.opload-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #00b2cd;
  z-index: 1001;
  opacity: 1;
  pointer-events: none;
  transform: scale(30);
  border-radius: 100%;
}

/* load-animation */
#change {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100vh;
  background: #00b2cd;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  transform: scale(10) translateX(-100vw);
  border-radius: 100%;
}

#change.c-on {
  opacity: 1;
  transform-origin: left;
  transform: scale(60) translateX(0vw);
  transition: transform 1.6s cubic-bezier(0.36, 0, 0.72, 1), opacity 1.6s cubic-bezier(0.36, 0, 0.72, 1);
}

#change.c-off {
  opacity: 1;
  transform-origin: right;
  animation: changeanim 1.6s cubic-bezier(0.36, 1, 0.72, 1);
}

@keyframes changeanim {
	0% {
	  transform: scale(60);
	}
	100% {
    transform: scale(10) translateX(100vw);
	}
}


/* top-k-visual-animation  ============================================ */
#home .l-header,
#home .main-side-bar,
#home .news-info {
  opacity: 0;
}

#home .fs-view {
  opacity: 1;
  transition: opacity .4s ease;
}

.main-ttl-anim {
  display: flex;
  visibility: hidden;
}

.main-txt-anim {
  visibility: hidden;
}

.ttl-split {
  opacity: 0;
  transform: translateY(40px);
  animation: TopMaintitle .4s forwards;
}

@keyframes TopMaintitle {
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}

.main-sub-anim1 {
  opacity: 0;
  transform: translateY(40px);
}

.main-sub-anim2 {
  opacity: 0;
  transform: translateX(40px);
}

.anim-on .main-sub-anim1 {
  animation: TopMainsubtitle1 .4s both;
}

@keyframes TopMainsubtitle1 {
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}

.anim-on .main-sub-anim2 {
  animation: TopMainsubtitle2 .6s both;
}

@keyframes TopMainsubtitle2 {
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

.anim-on {
  visibility: visible;
}


/* scroll-animation  ============================================ */
.scroll {
  opacity: 0;
  transform: translateY(1rem) scale(0);
  transition: 0.6s 0.3s cubic-bezier(0.34, 1.63, 0.64, 1);
}

.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.scroll.trans-y {
  transform: translateY(2rem) scale(0) rotate(-20deg);
  transition: 0.8s 0.6s cubic-bezier(0.34, 1.63, 0.64, 1);
}

.visible.trans-y {
  transform: translateY(0) scale(1) rotate(0deg);
}

.scroll.trans-x {
  transform: translateX(2rem) scale(0) rotate(-20deg);
  transition: 0.8s 0.6s cubic-bezier(0.34, 1.63, 0.64, 1);
}

.visible.trans-x {
  transform: translateX(0) scale(1) rotate(0deg);
}

.visible.bg-circle:before {
  transition: 3s cubic-bezier(0.34, 1.63, 0.64, 1);
  transform: scale(1.2);
}

.scroll.tool-bar {
  transform: translateX(0);
  transition: 0.8s 0.4s cubic-bezier(0.34, 1.63, 0.64, 1);
}

.tool-bar.visible {
  opacity: 1;
  transform: translateX(0);
}

.tool-bar.visible:before,
.t-bar01.visible:before,
.t-bar02.visible:before,
.t-bar03.visible:before {
  content: "";
  display: block;
  width: 100%;
  height: 0.5rem;
  background-color: #00b2cd;
  border-radius: 100vmax;
  animation: 1.6s cubic-bezier(1, -0.32, 0.64, 1) running tool-bar;
}

.t-bar01.visible:before {
  width: 80%;
  animation: 1.6s cubic-bezier(1, -0.32, 0.64, 1) running tool-bar1;
}

.t-bar02.visible:before {
  width: 70%;
  animation: 1.6s cubic-bezier(1, -0.32, 0.64, 1) running tool-bar2;
}

.t-bar03.visible:before {
  width: 55%;
  animation: 1.6s cubic-bezier(1, -0.32, 0.64, 1) running tool-bar3;
}

@keyframes tool-bar {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

@keyframes tool-bar1 {
  0% {
    width: 0;
  }
  100% {
    width: 80%;
  }
}

@keyframes tool-bar2 {
  0% {
    width: 0;
  }
  100% {
    width: 70%;
  }
}

@keyframes tool-bar3 {
  0% {
    width: 0;
  }
  100% {
    width: 55%;
  }
}


/* swiper-content-item  ============================================ */
.history-scrollbar {
  position: relative;
  margin-inline: auto;
  margin-top: 3rem;
  top: 0;
  left: 0;
  z-index: 2;
  height: 4px;
  width: calc(100% - 6rem);
  max-width: 1280px;
  border-radius: 100vmax;
  touch-action: none;
  background: var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1));
}

.history-scrollbar > * {
  height: 100%;
  width: 100%;
  position: relative;
  background: #00b2cd;
  border-radius: 100vmax;
  left: 0;
  top: 0;
}


/* simplebar-content  ============================================ */
.scroll-box {
  overflow: scroll;
}

.web-device.scroll-box {
  position: relative;
  padding: 10px;
  aspect-ratio: 9/16;
  background: rgb(140 235 240 / 1);
  border-radius: 28px;
}

.web-device.scroll-box:before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  display: block;
  box-shadow: 0px 0px 0px 11px rgb(140 235 240 / 1) inset;
  border-radius: 28px;
  pointer-events: none;
  z-index: 1;
}
.scroll-box::-webkit-scrollbar {
  display: none;
}

.simplebar-placeholder {
  height: auto!important;
}

.simplebar-track.simplebar-horizontal {
  height: 8px;
}

.simplebar-track.simplebar-vertical {
  width: 10px;
  top: 16px;
  right: 12px;
  bottom: 16px;
}

.simplebar-scrollbar.simplebar-visible:before {
  background: #102938;
}

@media screen and (min-width:560px){
  .web-device.scroll-box {
    aspect-ratio: 16/9;
  }
}