@charset "utf-8";

.line-wrap{position:absolute;width:100%;height:100%;bottom:0;left:0;z-index:100}
.line-box span.line{position:absolute;background-color:var(--color-m);border:none;z-index:1}
.line-box span.line-top{width:0;height:3px;top:0;right:0}
.line-box span.line-right{width:3px;height:0;bottom:0;right:0}
.line-box span.line-bottom{width:0;height:3px;bottom:0;left:0}
.line-box span.line-left{width:3px;height:0;top:0;left:0}
.line--item{position:relative}
.line--item:hover .line-box span.line-top,
.line--item:hover .line-box span.line-bottom{animation: keyframes-width-box .8s cubic-bezier(0.345, 0.005, 0.07, 1) 1;animation-fill-mode: forwards}
.line--item:hover .line-box span.line-right,
.line--item:hover  .line-box span.line-left{animation: keyframes-height-line 0.8s cubic-bezier(0.345, 0.005, 0.07, 1) 1;animation-fill-mode: forwards}

@keyframes line{
0% {width:0}
100% {width:100%}
}

@keyframes toUp {
	0% {transform:translateY(0);}
	50% {transform:translateY(-10px);}
	100% {transform:translateY(0);}
}

/* animation */
@-webkit-keyframes keyframes-width-box {
	form {
	  width: 0%;
	} to {
	  width: 100%;
	}
  }
  @-moz-keyframes keyframes-width-box {
	form {
	  width: 0%;
	} to {
	  width: 100%;
	}
  }
  @keyframes keyframes-width-box {
	form {
	  width: 0%;
	} to {
	  width: 100%;
	}
  }

  /* animation */
  @-webkit-keyframes keyframes-height-line {
	form {
	  height: 0%;
	} to {
	  height: 100%;
	}
  }
  @-moz-keyframes keyframes-height-line {
	form {
	  height: 0%;
	} to {
	  height: 100%;
	}
  }
  @keyframes keyframes-height-line {
	form {
	  height: 0%;
	} to {
	  height: 100%;
	}
  }

/* text logo rotate */
@-moz-keyframes spin{ 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

/* main wave */
@keyframes wave {
	0% {margin-left: 0;}
	100% {margin-left:-1200px}
}
@-webkit-keyframes wave {
	0% {margin-left: 0;}
	100% {margin-left:-1200px}
}

/* sub visual */
@-webkit-keyframes zoomout {
	0% {transform:scale(1.1)}
	100% {transform:scale(1)}
}
@keyframes zoomout {
	0% {transform:scale(1.1)}
	100% {transform:scale(1)}
}

@keyframes scrollUp {
	0% {transform:translateY(0);}
	50% {transform:translateY(-10px);}
	100% {transform:translateY(0);}
}