#green {
}
#green .wrap {
  max-width: 1200px;
}
#green .wrap h2 {
  margin-bottom: 80px;
  font-family: 'Titillium Web', sans-serif;
}
#green .wrap ul {
  gap: 20px;
}
#green .wrap ul li {
  width: calc(100% / 3);
}
#green .wrap ul li:nth-of-type(1)::before{
  background-image: url(../img/gr1.jpg);
}
#green .wrap ul li:nth-of-type(2)::before{
  background-image: url(../img/gr2.jpg);
}
#green .wrap ul li:nth-of-type(3)::before{
  background-image: url(../img/gr3.jpg);
}
#green .wrap ul li::before{
  content: "";
  display: block;
  width: 100%;
  height: 435px;
  background-size: cover;
}
#green .wrap ul li h3 {
  line-height: 3;
  transform: translateY(3px);
  font-weight: 500;
}
#green .wrap ul li p {
  line-height: 2;
  color: #666;
}
#green .wrap ul li p span {
}
#green .wrap a.siteview {
  font-family: 'Titillium Web', sans-serif;
  font-size: 14px;
  padding: 15px;
  width: 180px;
  border: 1px solid;
  box-sizing: border-box;
  margin-left: calc(100% / 3 * 2 + 15px);
  overflow: hidden;
  position: relative;
  transition: all .5s;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#green .wrap a.siteview:hover{ 
  background-color: transparent;
  color: white;
  border: 1px solid black;
}
#green .wrap a.siteview::before{
  content: "";
  width: 0;
  height: 100%;
  display: inline-block;
  background-color: black;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  transition: all .5s;
  transform: skewX(-30deg);
  z-index: -1;
}
#green .wrap a.siteview:hover::before{
  width: 120%;
}
#green .wrap a.siteview::after{
  content: "";
  width: 30px;
  height: 30px;
  display: inline-block;
  background-image: url(../img/login.svg);
  background-size: contain;
}
#green .wrap a.siteview:hover::after{
  width: 30px;
  height: 30px;
  display: inline-block;
  background-image: url(../img/login-white.svg);
  background-size: contain;
}
.current{
  border: 1px solid red;
}