@charset "UTF-8";

/*==============================================
  cursor
================================================*/
@media screen and (max-width: 800px) {
#cursor, 
#cursor *{ display: none;}
}
#cursor{ opacity: 1; z-index: 10000001000000; position: fixed; pointer-events: none;}
#cursor div{ width:10px; height:10px; position: absolute; left: 0%; top: 0%; pointer-events: none;  border-radius: 100%; margin: -5px 0 0 -5px; background:rgba(204,204,204,0.5);}
/**/
#cursor div::after{ width:10px; height:10px; border-radius: 100%; position: absolute; left: 50%; top: 50%; margin: 30px 0 0 30px; pointer-events: none; content: ""; -webkit-transition:0.0s ease-in; -moz-transition: 0.2s ease-in; -o-transition:0.2s ease-in; transition: 0.2s ease-in; opacity: 0; mix-blend-mode: hard-light; }
#cursor div.act::after{ opacity: 1; width:60px; height:60px; margin: 0;}
/**/
#cursor div.active{opacity: 0; background: none; margin: 0;}
#cursor div.act, 
#cursor div.actF{ background: none}
#cursor.act{ display: block; border-radius: 100%; margin: -30px 0 0 -30px; mix-blend-mode: hard-light;}
#cursor div.act .l1{ border: solid 1px #666; width: 20px; height: 20px; content: ""; position: absolute; left: 25px; top: 25px; border-radius: 100%; animation: cursorAct 1.4s ease-in infinite forwards; opacity: 0;}
@keyframes cursorAct{
0%{transform:scale(1,1); opacity: 0;}
30%{transform:scale(1.1,1.1); opacity: 1;}
80%{transform:scale(1.8,1.8); opacity: 0;}
100%{transform:scale(1.8,1.8); opacity: 0;}
}