.form-area {max-width: 400px; width: 100%; height: auto; margin: 153px auto 0;}
.form-area.form-area2 {max-width: 700px;}
.form-area .login_tab {display: flex; align-items: center; margin-bottom: 49px;}
.form-area .login_tab a {position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 45px; border: 1px solid var(--gray_dc); border-right: 0; background: var(--wt_f9); font-size: 15px; font-weight: 400; line-height: 1.2; color: var(--gray_8d); box-sizing: border-box;}
.form-area .login_tab a:last-child {border-right: 1px solid var(--gray_dc);}
.form-area .login_tab a.active {border-bottom: 0; background: var(--wt); font-weight: bold; color: var(--black_1b);}
.form-area .login_tab a img {animation: move_img 1s linear alternate infinite; position: absolute; top: -29px; left: 50%; transform: translateX(-50%); width: 109px; height: auto;}
@keyframes move_img {
  0% {top: -35px;}
  100% {top: -29px;}
}

.input-box {width: 100%; height: auto; margin-bottom: 30px;}
.input-box .d-flex {display: flex; align-items: center; gap: 20px; width: 100%; height: auto;}
.input-box .tit {margin-bottom: 15px; font-size: 14px; font-weight: bold; line-height: 1.14; color: var(--black_1b);}
.input-box .tit small {font-size: 14px; font-weight: 400; line-height: 1.14; color: var(--gray_8d);}
.input-box .tit span {color: var(--red);}
.input-box input {width: 100%; height: auto; padding-bottom: 12px; margin-bottom: 15px; border-bottom: 1px solid var(--gray_dc); font-size: 15px; font-weight: 300; line-height: 1.2; color: var(--black_1b); box-sizing: border-box; outline: none;}
.input-box .d-flex input {margin: 0;}
.input-box input:last-of-type {margin-bottom: 0;}
.input-box input::placeholder {color: var(--gray_c7);}
.input-box select {width: 100%; height: auto; padding-bottom: 12px; border-bottom: 1px solid var(--gray_dc); font-size: 15px; font-weight: 300; line-height: 1.2; color: var(--black_1b); box-sizing: border-box; appearance: none; background: url(./../img/select_icon.png)no-repeat calc(100% - 20px) calc(100% - 17px); background-size: 8.7px 4.96px; outline: none;}
.input-box textarea {width: 100%; height: 150px; padding: 15px; border: 1px solid var(--gray_dc); border-radius: 5px; font-size: 15px; font-weight: 300; line-height: 1.2; color: var(--black_1b); box-sizing: border-box; outline: none; resize: none;}
.input-box textarea::placeholder {color: var(--gray_c7);}

.form_btn {display: flex; flex-flow: column; gap: 10px; margin-bottom: 50px;}
.form_btn3 {margin-top: 30px;}
.form_btn a {display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 45px; border-radius: 5px; font-size: 15px; font-weight: 400; line-height: 1.2;}
.form_btn button {display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 45px; border-radius: 5px; font-size: 15px; font-weight: 400; line-height: 1.2;}
.form_btn a img {width: 19.7px; height: auto;}
.form_btn .line {display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 12px; font-weight: 400; line-height: 1.17; color: var(--gray_b0); white-space: nowrap;}
.form_btn .line::before {content: ''; display: block; width: 100%; height: 1px; background: var(--gray_e5);}
.form_btn .line::after {content: ''; display: block; width: 100%; height: 1px; background: var(--gray_e5);}

/* form_member_join_btn */
.form_member_join_btn {display: flex; flex-flow: column; gap: 10px; padding: 30px 25px; margin-top: 30px; box-sizing: border-box; background: var(--wt_f9);}
.form_member_join_btn p {font-size: 14px; font-weight: 400; line-height: 1.14; color: var(--gray_8d);}
.form_member_join_btn p a {font-weight: bold; color: var(--pr);}

/* ckd-box */
.ckd-box {display: flex; flex-flow: column; gap: 10px; width: 100%; height: auto;}
.ckd-box2 {padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--gray_c7);}
.ckd-box input {display: none;}
.ckd-box label {display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 400; line-height: 1.14; color: var(--gray_8d);}
.ckd-box label:before {content: ''; display: block; width: 21px; height: auto; aspect-ratio: 1; background: url(./../img/ckd_off.png)no-repeat 50% 50%; background-size: cover;}
.ckd-box input:checked + label:before {content: ''; display: block; width: 21px; height: auto; aspect-ratio: 1; background: url(./../img/ckd_on.png)no-repeat 50% 50%; background-size: cover;}

/* ckd_box2 */
.ckd_box2 {display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; margin: 0 -10px; width: 100%; height: auto;}
.ckd_box2 input {display: none;}
.ckd_box2 label {width: calc(100% / 2); padding: 0 10px; box-sizing: border-box;}

.ckd_box2 label span {display: flex; align-items: center; gap: 10px; width: 100%; height: auto; padding: 12px 15px; box-sizing: border-box; border: 1px solid var(--gray_dc); border-radius: 5px; font-size: 15px; font-weight: 400; line-height: 1.2; color: var(--gray_c7);}
.ckd_box2 label span:before {content: ''; display: block; width: 21px; height: auto; aspect-ratio: 1; background: url(./../img/ckd_off.png)no-repeat 50% 50%; background-size: cover;}

.ckd_box2 input:checked + label span {border-color: var(--pr); color: var(--pr);}
.ckd_box2 input:checked + label span:before {content: ''; display: block; width: 21px; height: auto; aspect-ratio: 1; background: url(./../img/ckd_on.png)no-repeat 50% 50%; background-size: cover;}

/* file-upload */
.file-upload {width: 100%; height: auto;}
.file-upload ul {display: flex; align-items: center; gap: 15px;}
/* .file-upload ul .file_btn {width: 128px; height: auto; aspect-ratio: 1;}
.file-upload ul .file_btn .file_box {position: relative; width: 100%; height: 100%;}
.file-upload ul .file_btn .file_box > img {width: 100%; height: 100%; object-fit: cover; border-radius: 5px;}
.file-upload ul .file_btn .file_box input[type="file"] {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; opacity: 0;} */

.file-upload ul li {width: 100%; height: auto;}
.file-upload ul li .file_box {position: relative; width: 128px; height: auto; aspect-ratio: 1;}
.file-upload ul li .file_box > img {width: 100%; height: 100%; object-fit: cover; border-radius: 5px;}
.file-upload ul li .file_box input[type="file"] {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; opacity: 0; cursor: pointer;}

.file-upload ul li {display: flex; flex-flow: row-reverse; align-items: center; justify-content: flex-end; gap: 15px;}
.file-upload ul li .img_item {position: relative; width: 128px; height: auto; aspect-ratio: 1;}
.file-upload ul li .img_item > img {width: 100%; height: 100%; object-fit: cover; border-radius: 5px;}
.file-upload ul li .img_item .close_btn {position: absolute; top: 8px; right: 8px; width: 20px; height: auto; aspect-ratio: 1; z-index: 2; cursor: pointer;}
.file-upload ul li .img_item .close_btn img {width: 100%; height: 100%; border-radius: 100%;}