@charset "utf-8";

.g-nav li {
  position: relative;
  margin: 0 10px;
}

.g-nav li::before,
.g-nav li::after {
  content: "";
  position: absolute;
  background: #0481A2;
  width: 0;
  height: 2px;
  transition: all 0.2s linear;
}

.g-nav li::before {
  right: 0;
  bottom: 0;
}

.g-nav li::after {
  left: 0;
  top: 0;
}

.g-nav li span {
  display: block;
}

.g-nav li span::before,
.g-nav li span::after {
  content: "";
  position: absolute;
  background: #0481A2;
  width: 2px;
  height: 0;
  transition: all 0.1s linear;
}

.g-nav li span::before {
  left: 0;
  bottom: 0;
}

.g-nav li span::after {
  right: 0;
  top: 0;
}

.g-nav li.current::before,
.g-nav li.current::after,
.g-nav li:hover::before,
.g-nav li :after {
  width: 100%;
}

.g-nav li:hover::after {
  transition-delay: 0s;
}

.g-nav li.current span::before,
.g-nav li.current span::after,
.g-nav li:hover span::before,
.g-nav li:hover span::after {
  height: 100%;
}

.g-nav li:hover span::before {
  transition-delay: 0.5s;
}

.g-nav li:hover span::after {
  transition-delay: 0.2s;
}