body {
  font-family: "Pretendard Variable", sans-serif;
  word-break: keep-all;
  padding-top: 80px;
  padding-bottom: 80px;
}
img {
  display: block; /*img태그는 인라인즉 글자요소로 되어있으므로 마진태그가 적용되지 않음 그러므로 블럭요소로 바꾸어줌*/
}
.page-title {
  font-size: 50px;
  font-weight: 800;
  line-height: 1.3;
  color: #13B491;
  text-align: center;
  margin-bottom: 20px;
}
.page-subtitle {
  width: 240px;
  height: 50px;
  border: 5px solid #FFA32D;
  border-radius: 30px;
  display: flex;
  justify-content: center;  /*수평정렬*/
  align-items: center;  /*수직정렬*/
  font-size: 24px;
  font-weight: 700;
  color: #FFA32D;
  margin-left: auto;
  margin-right: auto;  /* width라는 가로 요소의 넓이가 지정되어있으면 자동으로 여백 추가 가능*/
  margin-bottom: 20px;
}
.btn {
  max-width: 500px;
  height: 100px;
  display: flex; /*a태그는 글자태그므로 가로넓이나 세로넓이를 지정할수 없으므로(직업캐찾으러고) 요소가 화면에 보여지는 특성을 지정해주는 속성이다. 블럭엘리먼트들은 디스플레이스라는 것을 통해 플랙스라는 값을 넣어줌*/
  justify-content: center;
  align-items: center;
  font-size: 50px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border-radius: 20px;
  margin-bottom: 35px;
  margin-left: auto;
  margin-right: auto;
  transition: 0.1s;
}
.btn-orange { 
  background-color: #FFA32D;
  box-shadow: 0 14px 0 #E66000;
  color: white;
}
.btn-orange:active {
  box-shadow: 0 4px 0 #E66000;
  transform: translateY(10px); /*움직이게 만들어줌. 밑으로 내려가게 만들어줌 클릭하는 것처럼 보이게!*/
}
.btn-green {
  background-color: #32BFA1;
  box-shadow: 0 14px 0 #299A82;
  color: white;
}
.btn-green:active {
  box-shadow: 0 4px 0 #299A82;
  transform: translateY(10px);
}
.btn-gray {
  background-color: #F2F4F6;
  box-shadow: 0 14px 0 #DFE1E2;
  color: #444444;
}
.btn-gray:active {
  box-shadow: 0 14px 0 #DFE1E2;
  transform: translateY(10px);
}
.btn-small {
  max-width: 350px;
  height: 70px;
  font-size: 26px;
  margin-bottom: 30px;
}

@media (max-width: 640px) {
  body {
    padding-top: 50px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .page-title {
    font-size: 40px;
  }
  .btn {
    font-size: 34px;
  }
}