@charset "utf-8";

main{
  height: 100%;
}
main .visual{
  width: 100%;
  height: 100%;
  position: relative;
  background: url('../../img/mobile/intro/08.jpg') center no-repeat;
  background-size: cover;
}
main .visual .rg{
  width: 100%;
  position: absolute;
  bottom: 80px;
}
main .visual .rg svg{
  width: 200px;
  margin: 0 auto;
}
main .visual .rg svg .club-box{
  fill: rgba(255, 255, 255, .6);
}
main .visual .rg svg .club-icon{
  fill: #b44c97;
}
main .visual .rg .exp-1{
  text-align: center;
  margin-top: 75px;
}
main .visual .rg .exp-1 img{
  display: inline;
  width: 30px;
  height: 30px;
  margin-top: -5px;
}
main .visual .rg .exp-1 p{
  display: inline;
  color: #fff;
  font-size: 1.15rem;
  margin-left: 2px;
}
main .btn-grp{
  position: absolute;
  bottom: 0;
  max-width: 768px;
  width: 100%;
  border-top: 2px solid #e46075;
  padding: 20px;
}
main .btn-grp button{
  font-weight: bold;
  font-size: 1.1rem;
  padding: 8px 0;
}
main .btn-grp .btn-login{
  background-color: #b44c97;
}
main .btn-grp .btn-join{
  background-color: #e46075;
}


/*********************** Desktop ***********************/

@media screen and (min-width: 768px){
  main .visual .rg{
    bottom: 120px;
  }
  main .visual .rg svg{
    width: 350px;
  }
  main .visual .rg .exp-1{
    margin-top: 130px;
  }
  main .visual .rg .exp-1 img{
    width: 40px;
    height: 40px;
    margin-top: -9px;
  }
  main .visual .rg .exp-1 p{
    font-size: 1.35rem;
    margin-left: 6px;
  }
  main .btn-grp button{
    font-weight: bold;
    font-size: 1.6rem;
    padding: 23px 0;
  }
}