@layer reset, var, header, footer, contents-header;

@import url('config.css');
@import url('article.css') layer(contents-header);

.page-wrapper {
  overflow: hidden;  
} /* end of .page-wrapper */

.index {
  width: 100%;
  height: 18.75rem;
  background-image: url('../css/img/signup.jpg');
  background-position: center;
  background-size: cover;
  padding-top: 17.155rem;
} /* end of .index */

.index .spotNav {
  width: 17rem;
  background-color: #000;
  padding: 0 10px;
} /* end of .index .spotNav */

.index .spotNav span {
  color: var(--bg-color5);
  font-weight: 600;
  font-size: var(--font-size5);
} /* end of .index .spotNav span */

.terms {
  padding-top: 3.75rem;
  text-align: center;
  height: 77rem;
} /* end of .terms */ 

.terms .text{
  width: 100%;
  margin-top: 4rem;
  height: 15rem;
} /* end of .terms  */

.terms .term textarea {
  background-color: #f7f7f7;
  resize: none;
  border: none;
  border-bottom: 2px solid #0000007e;
  outline: none;
} /* end of .terms .term textarea */

.terms .term .checkbox {
  margin: 3rem 0;
} /* end of .terms .term .checkbox */

.terms .term .checkbox .check-label {
  margin-right: 0.5rem;
} /* end of .terms .term .checkbox .check-label */

.terms .term .box {
  display: flex;
  justify-content: flex-end;
} /* end of .terms .term .box */

.terms .btn-normal {
  margin-top: 2rem;
  padding: 1.5rem 5rem;
  background-color: var(--color-primary);
  color: #fff;
  font-weight: 700;
  font-size: 1.3rem;
  border: none;
  border: 0.19rem solid var(--color-primary);
  transition: all .3s ease-in-out;
} /* end of .btn-normal */

.terms .btn-normal:hover {
  background-color: #fff;
  border: 0.19rem solid var(--color-primary);
  color: var(--color-primary);
} /* end of .terms .btn-normal */

/* ========== Responsive ========== */
/* 테블릿 가로 */
@media (max-width: 992px) {
  .container {
    padding: 0 0.9375rem;
  } /* end of .container */
}