@charset "UTF-8";
/*
* Copyright (c) 2023 EVERONESOFT. All rights reserved.
* 
* This software is the confidential and proprietary information of EVERONESOFT.
* You shall not disclose such Confidential Information and shall use it only in
* accordance with the terms of the license agreement you entered into with EVERONESOFT.
* 
* 본 소스는 (주)에버원소프트의 자산입니다, 
* 무단 복제 배포시 정보통신법에 의해 제제를 받을수 있습니다.
* 
* file path : public\css\cupid-app-loader.css
* author : 한태호
* date : 2024.01.23
* version : 1.0
* desc : Vue Loading 애니메이션 css
*/
.cupid-app-loader {
  height: 100vh;
}

.cupid-app-loader .loader {
  width: 200px;
  height: 140px;
  background: #979794;
  box-sizing: border-box;
  border-radius:8px;
  perspective: 1000px;
}

.cupid-app-loader .loader:before{
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  bottom: 10px;
  border-radius:8px;
  background: #f5f5f5  no-repeat;
  background-size: 60px 10px;
  background-image: 	linear-gradient(#ddd 100px, transparent 0) ,
            linear-gradient(#ddd 100px, transparent 0), 
            linear-gradient(#ddd 100px, transparent 0), 
            linear-gradient(#ddd 100px, transparent 0), 
            linear-gradient(#ddd 100px, transparent 0), 
            linear-gradient(#ddd 100px, transparent 0);
  
  background-position: 15px 30px , 15px 60px , 15px 90px, 
            105px 30px , 105px 60px , 105px 90px;
  box-shadow: 0 0 10px rgba(0,0,0,0.25);
}
.cupid-app-loader .loader:after {
  content: '';
  position: absolute;
  width: calc(50% - 10px);
  right: 10px;
  top: 10px;
  bottom: 10px;
  border-radius: 8px;
  background: #fff no-repeat;
  background-size: 60px 10px;
  background-image: linear-gradient(#ddd 100px, transparent 0), 
          linear-gradient(#ddd 100px, transparent 0), 
          linear-gradient(#ddd 100px, transparent 0);
  background-position: 50% 30px ,50% 60px , 50%  90px;
  transform: rotateY(0deg );
  transform-origin: left center;
  animation: cupid-app-paging 1s linear infinite;
}


@keyframes cupid-app-paging {
  to {
    transform: rotateY( -180deg );
  }
}