@charset "utf-8";

::-webkit-scrollbar { width: 8px; height: 3px; background: rgba(0,0,0,0.1); }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.3); border-radius: 5px; }
::selection { color: #fff; background: #000; }
::placeholder { color: #ccc; }


body { background: #eee; overflow-x: hidden; font-family: 'GmarketSans', sans-serif; font-size: 1.6rem; line-height: 1.5; color: #000; }


#container { max-width: 1200px; padding: 5vw 20px; margin: 0 auto; }
#container h2 { font-size: 5rem; color: #ee2c3c; padding: 0 0 20px; }
#container .request { background: #fff; padding: 100px; box-shadow: 2px 2px 10px rgba(0,0,0,0.1); }
#container .request_form h3 { font-size: 2.5rem; padding: 0 0 20px; }
#container .request_form div[class^="field"] { padding: 0 0 50px; }

@media (max-width:800px) {
  #container h2 { font-size: 3rem; color: #ee2c3c; padding: 0 0 20px; }
  #container .request { font-size: 1.4rem; padding: 50px 20px; }
  #container .request_form h3 { font-size: 1.8rem; }
}


/* field_01 */
.field_01 ul { display: flex; gap: 20px 40px; flex-wrap: wrap; }
.field_01 input[type="checkbox"] { appearance: none; display: none; }
.field_01 input[type="checkbox"] + label { position: relative; padding: 0 0 0 30px; cursor: pointer; }
.field_01 input[type="checkbox"] + label::before { content: ''; display: inline-block; border-radius: 50%; width: 20px; height: 20px; background: #eee url('../images/checkbox.png') no-repeat center; position: absolute; left: 0; top: -2px; transition: all 0.3s; }
.field_01 input[type="checkbox"]:checked + label::before { background: #eee url('../images/checkbox_checked.png') no-repeat center; }

@media (max-width:800px) {
  .field_01 ul { gap: 20px; }
}


/* field_02 */
.field_02 ul { display: flex; gap: 10px; flex-wrap: wrap; }
.field_02 input[type="radio"] { appearance: none; display: none; }
.field_02 label { border: 1px solid #ddd; border-radius: 50px; padding: 12px 50px 8px; display: inline-block; cursor: pointer; transition: 0.3s; text-align: center; }
.field_02 input[type="radio"]:checked + label { background: #ee2c3c; color: #fff; border: 1px solid #ee2c3c; }

@media (max-width:800px) {
  .field_02 label { padding: 12px 20px 8px; }
}

/* field_03 */
.field_03 { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.field_03 select { appearance: none; color: #000; width: 100%; background: url('../images/arrow_down.png') no-repeat right 10px center; border-bottom: 1px solid #ccc; height: 50px; padding: 0 10px; }

@media (max-width:800px) {
  .field_03 { grid-template-columns: 1fr; }
}


/* field_04 */
.field_04 input[type="text"] { width: 100%; border-bottom: 1px solid #ccc; height: 40px; padding: 10px; }
.field_04 textarea { margin: 20px 0; width: 100%; height: 300px; border: 1px solid #ccc; padding: 20px; }
.field_04 input[type="file"] { appearance: none; width: 100%; border: 1px solid #ccc; padding: 12px 20px; height: 50px; position: relative; text-align: left; }
.field_04 input[type="file"]::file-selector-button { font-family: 'GmarketSans', sans-serif; position: absolute; top: 0px; right: -4px; cursor: pointer; height: 100%; padding: 0px 20px; display: block; border: 0px; background: #ccc; color: #fff; border-radius: 0; }


/* privacy */
.privacy_txt { border: 1px solid #ddd; padding: 20px; height: 200px; overflow: auto; color: #999; }
.privacy_txt p { padding: 0 0 20px; }
.privacy_txt ul { list-style: decimal; padding: 20px 40px; }

.privacy .agree { padding: 20px 0; }
.privacy input[type="radio"] { appearance: none; display: none; }
.privacy input[type="radio"] + label { position: relative; padding: 0 0 0 30px; margin: 0 20px 0 0; }
.privacy input[type="radio"] + label:before { content: ''; display: inline-block; width: 20px; height: 20px; background: #eee url('../images/checkbox.png') no-repeat center; position: absolute; left: 0; top: -2px; transition: all .3s; }
.privacy input[type="radio"]:checked + label:before { background: #eee url('../images/checkbox_checked.png') no-repeat center; }


/* btn */
.btn { display: flex; justify-content: center; gap: 10px; padding: 50px 0 0; }
.btn input[type="submit"] { cursor: pointer; background: #ee2c3c; color: #fff; height: 50px; border-radius: 100px; max-width: 200px; padding: 5px 40px 0; }
.btn input[type="reset"] { cursor: pointer; background: #333; color: #fff; height: 50px; border-radius: 100px; max-width: 200px; padding: 5px 40px 0; }



@media (max-width:1500px) {

}

@media (max-width:1200px) {

}