body {
  font-size: 18px;
}
.wrap {
  max-width: 860px;
  margin: 0 auto;
}
.wrap img {
  max-width: 100%;
  width:100%;
}
.cont02 {
  position: relative;
}
.cont02 > div {
  max-width: 860px;
  margin: 0 auto;
  width: 100%;
  padding: 23px;
  padding-bottom: 0;
  position: relative;
  padding-bottom: 60px;
}
.cont02 > div > ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.cont02 > div > ul > li {
  width: 100%;
}
.cont02 > div > ul > li:nth-of-type(2) {
  align-items: center;
  width: 32%;
  max-width: 260px; 
  font-size: 3.5rem;
  font-weight: 700;
  color: #fff;
  border-radius: 11px;
  display: flex;
  justify-content: center;
  letter-spacing: -3.45px;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  line-height: 100%;
  padding: 30px 0;
}

.cont02 > div > ul ul > li {
  width: 100% !important;
  height: 40px;
  margin-bottom: 10px;
  position: relative;
  border-width: 2px 6px;
}
.cont02 > div > ul ul > li:last-of-type {
  height: 60px;
}
.cont02 > div label {
  position: absolute;
  top: 50%;
  left: 13px;
  transform: translateY(-50%);
  font-size: 1.6rem;
  color: #fff;
  font-weight: 500;
}
.cont02 > div input {
  width: 60%;
  height: 100%;
  position: absolute;
  right: 0;
  border: none;
  padding-left: 10px;
  width: calC(100% - 10px);
}
.cont02 > div input::placeholder {
  color: #777;
  opacity: 1;
  font-weight: 700;
}
.cont02 > div > ul ul > li:last-of-type label {
  top: 10px;
  transform: translateY(0);
}
.show_m {
  display: none;
}
.formBox{    
  background: #f9f9f9;
  padding: 10px 0 50px 0;
}
.formBox ul{
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  height:100%;
  flex-direction: column;
}
.formBox ul:not(.inputSpace) > li:not(.btn){
  height: -webkit-fill-available;
  max-height: 238px;
  width:100%;
}

/* »ó´ã½Åû¶õ */
ul.inputSpace{display:flex;flex-wrap:wrap;display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* height: 30px; */
    grid-template-rows: repeat(2, 70px);}
.formBox .inputSpace li{
  width: 100%;
/*  height: calc(33.333% - 10px);*/
height:100%;
}
.inputSpace li input{
  width: 100%;
  border: 8px solid #000;
  border-width: 5px 8px;
  padding: 10px;
  font-weight: 600;
  max-height: 80px;
  height: 100%;
}

.inputSpace li input::placeholder{
  color:#000;
}

/* »ó´ã½Åû¹öÆ° */
.btn{
  height: 100%;
  width: 100%;
  max-width: 298px;
/*  max-height: 298px; */
}
.btn a {
  background: url(../img/btn.png) no-repeat 0 0 / contain;
  display: inline-block;
  width: 100%;
  aspect-ratio: 355/ 163;
}
/* °³ÀÎÁ¤º¸ ¼öÁý ¹× È°¿ë µ¿ÀÇ º¸±â */
.agree {
  display: flex;
  align-items: center;
  margin: 0 auto;
  width: 100%;
  max-width: 820px;
}
.cont02 .agree input {
  width: auto;
  height: auto;
  position: unset;
  border: none;
}
.cont02 .agree label {
  position: unset;
  transform: translateY(0);
  color: #000;
  font-size: 1.1rem;
  cursor: pointer;
}
.agree label span {
  text-decoration: underline;
}
.agree input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border: none;
  margin-right: 10px;
  background: #fff;
  border: 1px solid #000;
}
.agree input[type="checkbox"]::after {
  content: "\2713";
  text-align: center;
  color: #fff;
  font-weight:800;
}
.agree input[type="checkbox"]:checked {
  background: #2c80ff;
}
.agree input[type="checkbox"]:checked::after {
  display: block;
}

.privacy {
  height: 0;
  overflow-y: scroll;
  background: #f9f9f9;
  transition: all 0.3s ease 0s;
}
.privacy.open {
  height: 300px;
  padding: 1rem;
}

@media (max-width: 860px) {
  body{font-size:14px;letter-spacing: -2px;}
  .formBox{
    padding: 10px 10px 30px 10px;
  }
  .cont02 > div {
    grid-template-columns: repeat(1, 1fr);
    display: grid;
    justify-content: center;
    align-items: center;
    display: grid;
    row-gap: 10px;
  }
  .formBox ul{
    flex-direction: column;
  }
  .formBox ul:not(.inputSpace) > li:not(.btn){
    width:100%;
  }
   ul.inputSpace{
     grid-template-columns: repeat(1, 1fr);
     grid-template-rows: unset;

   }
  .btn a{
    background-size: 60%;
    background-position: center 0;

  }
  .agree {
    margin-top: unset;
    position: unset;
    width: 100%;
    margin-top:10px;
  }
  .cont02 img {
    margin-bottom: -2px;
  }
  .cont02 h4 {
    text-align: center;
  }
  .cont02 > div > ul {
    align-items: center;
    display: grid;
    grid-template-columns: 70% 30%;
    gap: 10px;
  }
  .cont02 > div > ul > li {
    width: 100%;
  }
  .cont02 > div > ul > li:nth-of-type(2) {
    width: 100%;
    font-size: 2rem;
  }
  .cont02 > div > ul > li:nth-of-type(2) div {
    width: 100%;
  }
  .cont02 > div label {
    font-size: 1.1rem;
  }
  .show_m {
    display: block;
    margin-bottom: -2px;
  }
  .cont02 img:nth-of-type(3) {
    display: none;
  }
  .cont02 > div > ul > li:nth-of-type(2) a {
    width: 100%;
  }
  @media (max-width: 693px) {
    .cont02 img:nth-of-type(3) {
      display: block;
    }
  }
  @media (max-width: 425px) {
    .cont02 > div label {
      font-size: 1rem;
    }
  }
}