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;
}
.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;}

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

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