html {
    height: 100%
}

body {
    height: 100%;
    background-color: #333;
}

.container .reg {
    background-color: #fff;
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 40px
}

.reg .title {
    font-size: 24px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.form-tit {
    width: 100%;
    padding-top: 10px;
    flex: 1 1 100%;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 8px
}

.input-group {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    gap: 10px;
    width: 100%;
}

.form-group .form-conts {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.wfdsa-input:not(textarea):placeholder-shown {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
}

.input-group li {
    width: 100%;
    padding-left: 0px
}

.input-group li.mark {
    width: auto;
    padding: 0px 10px;
    background: none
}

.input-group li select {
    width: 100%;
    font-size: 20px;
    padding: 10px;
    height: auto;
}

.input-group input {
    font-size: 20px;
    padding: 10px 0px;
    height: auto;
}

.btn {
    width: 100%;
    margin: 0px;
    padding: 0px;
}

.btn a {
    font-size: 24px;
    font-weight: bold;
    background: rgba(56, 108, 207, 1);
    border-radius: 10px;
    padding: 10px 20px;
    color: #fff;
    width: 100%;
    display: block
}

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* 1. 감싸는 부모 요소: 여기서 화살표를 제어합니다. */
.wfdsa-select-wrap {
    position: relative;
    /* 화살표의 기준점 */
    width: 100%;
}

/* 2. 실제 Select 태그 */
.wfdsa-form-select {
    appearance: none;
    /* 중요: 브라우저 기본 화살표 제거 (크로스 브라우징 핵심) */
    -webkit-appearance: none;
    /* 사파리/크롬용 */
    -moz-appearance: none;
    /* 파이어폭스용 */

    width: 100%;
    height: 48px;
    padding: 0 40px 0 16px;
    /* 우측에 화살표 공간 확보 */
    font-size: 16px;
    color: #111;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    border-radius: 5px;
}

/* IE에서 기본 화살표 숨기기 */
.wfdsa-form-select::-ms-expand {
    display: none;
}

/* 3. 가상 요소로 화살표 만들기 (부모에 적용) */
.wfdsa-select-wrap::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    /* 정확히 수직 중앙 정렬 */
    pointer-events: none;
    /* 화살표를 클릭해도 아래 select가 클릭되도록 설정 (중요) */

    display: block;
    width: 16px;
    height: 8px;
    background: url(../img/icon_selectArrow.svg) no-repeat center center / 100% auto;
}

input::placeholder {
    font-size: 18px
}

.reg p {
    padding-top: 20px;
    color: rgba(56, 108, 207, 1);
    margin-bottom: 40px;
}

.fieldset.center {
    text-align: center
}

.reg .fieldset .btn.small {
    width: 300px;
}

.imgarea {
    text-align: center;
    padding: 50px;
}

.imgarea p {
    color: #222
}

.imgarea img {
    width: 200px;
}

.input-group input {
    margin: 0px;
}


@media (max-width: 1024px) {
    .container .reg {
        margin: 0 20px;
        padding: 20px
    }

}

@media (max-width: 767px) {
    .container p {
        font-size: 20px;
    }

    .imgarea {
        padding: 50px 0px
    }
}

.checkbox-group {
    margin-top: 30px;
    margin-bottom: 20px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    cursor: pointer;
    font-weight: bold;
}

.checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}