@charset "utf-8";

@font-face {
  font-family: 'Pretendard-Regular';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #fff;
  font-family: "Pretendard-Regular";
  text-decoration: none;
}

.container{
  max-width: 500px;
  width: 100%;
  margin: auto;
  padding-top: 35px;
  background: url(/assets/img/bg-test.png) no-repeat center -240px / cover #FF5F00;
  overflow: auto;
}

.vh-100{
  max-height: 100vh;
}

.logo{
  width: 92px;
  margin: auto;
}

.logo img{width: 100%;}

.title-box{
  text-align: center;
  margin: 37px auto 41px;
}

.title-sm{
  font-size: 20px;
  letter-spacing: -1px;
}
.title-lg{
  font-size: 50px;
  letter-spacing: -0.4px;
}

.button-box{
  display: flex;
  flex-direction: column;
  gap: 7px;
  justify-content: center;
  align-items: center;
}

.btn{
  display: flex;
  align-items: center;
  width: 189px;
  height: 44px;
  font-size: 12px;
  background-color: #000;
  border-radius: 44px;
}

.btn > div{
  display: flex;
  align-items: center;
}

.btn:nth-child(1) .btn-icon{margin: 0 21.5px 0 18px;}
.btn:nth-child(2) .btn-icon{margin: 0 20px;}

.phone-box{
  position: relative;
  width: 100%;
  margin-top: 50px;
  height: 396px;
}
.phone{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  max-width: 505px;
  min-width: 264px;
  height: 396px;
  width: 100%;
  background: url(/assets/img/phone.png) no-repeat center bottom / cover;
}
.phone > img{
  display: block;
  width: 100%;
}