@charset "utf-8";
/*
------------------------------------------------------------------------------------------------------------------------
폼메일 쓰기 스타일
------------------------------------------------------------------------------------------------------------------------
*/
#formmail-write { position:relative; border-top:2px solid #242424; padding-top:3rem; margin-bottom:100px; font-size:18px }
#formmail-write .form-group { display:flex; margin-bottom:28px; align-items: center;width: 100%; }
#formmail-write .align{display:flex; margin-bottom:28px; align-items: start;width: 100%; }
#formmail-write .align h2{font-size:1.6rem; font-weight:600; margin-bottom:1.5rem;color:#505050;}
#formmail-write .form-group>label { padding:0 30px; width:20% }
#formmail-write .form-group>div { width:80% }
#formmail-write .form-group.col4>label { width:20%;font-size: 1.8rem; font-weight: 500; color: #021212; }
.franapply .form-group.col4>div { width:80% }
#formmail-write .form-group.col4 .fcol4{display: flex; align-items: center; gap: 6px 1%; width: 80%;}
#formmail-write .form-group.col4 .fcol4 select{width: 100%; max-width: 300px; color: #b6b6b6;}
#formmail-write .form-group .form-control { width:100%; padding:15px; border:1px solid #d4d4d4 ;font-size: 1.5rem; max-width: 300px;}
#formmail-write .form-footer { padding-top:7rem; text-align: center;  }
#formmail-write .btn_submit { padding:1.2rem 7rem; font-size:1.8rem; height:auto;border-radius:0 ;background-color:#f7c913 ;font-weight: 500;}
#formmail-write .btn_cancle { padding:1.2rem 7rem; font-size:1.8rem; height:auto;border-radius:0 ;background-color:#767676 ;outline:none; border: none; color: #fff; font-weight: 500;}
#formmail-write .check-list { position:absolute; right:0; top:-30px }
#formmail-write .privacy-of-use {font-size:1.6rem; font-weight: 300; padding:2.5rem; border-top:1px solid #cecece; border-bottom:1px solid #cecece; height:26rem; overflow-y:scroll ;background-color: #f4f4f4;color: #666;line-height: 160%;}
#formmail-write .privacy-of-use .cont {margin-bottom:15px;}
#formmail-write .privacy-of-use h4 {margin-bottom: 5px}
#formmail-write .privacy-of-use dl { padding:10px 0}
#formmail-write .privacy-of-use dl dt { font-weight: 600}
#formmail-write .privacy-of-use dl dd { margin-left: 20px}
#formmail-write .privacy-of-use ul { margin-left:20px }
#formmail-write .privacy-of-use ul li { margin-top:5px }
#formmail-write .privacy-of-use table { width:100%; border-collapse: collapse }
#formmail-write .privacy-of-use table th,
#formmail-write .privacy-of-use table td { border:1px solid rgb(226,226,226); padding:5px }
#formmail-write .privacy-of-use table th { background:rgb(245,245,247) }
#formmail-write .form-group.col4 input[type=date]{color: #b6b6b6;}

#formmail-write .privacy-of-use-check { text-align: left; padding:3rem 0; color:#021212; font-size:1.8rem; font-weight: 700;border-top: 2px solid #242424;margin-top: 11rem;}

#formmail-write .privacy-of-use-check label{color:#021212; font-size:1.8rem; font-weight: 600;padding-left: 3rem;}
#formmail-write .privacy-of-use-check label input[type="checkbox"]{appearance: none;width: 20px;height: 20px;border: 1px solid #ddd;border-radius: 3px;outline: none;cursor: pointer;position: relative;margin-right: 10px;}
#formmail-write .privacy-of-use-check label input[type="checkbox"]:checked {background-color: var(--color);border-color: var(--color);}
#formmail-write .privacy-of-use-check label input[type="checkbox"]:checked::after {content: '✓';color: white;font-size: 14px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);line-height: 1; /* 필요에 따라 추가 */}
.required_mark{color:#ba0d0d ; font-size: 1.8rem; font-weight: 500;}
#formmail-write .memo{align-items: start; }
#formmail-write .memo label{margin-top: 10px;font-weight: 500; color: #021212;}
#formmail-write input::placeholder{color: #b6b6b6;}
#formmail-write textarea::placeholder{color: #b6b6b6;}
#formmail-write textarea{ width:100%; padding:15px; border:1px solid #d4d4d4 ;font-size: 1.5rem; resize: none;}
#formmail-write .radio{display: flex; align-items: center; gap: 0px 30px;margin-bottom:2rem;}
#formmail-write .radio input[type="radio"] {-webkit-appearance: none; /* 브라우저 기본 스타일 제거 */-moz-appearance: none;appearance: none;width: 18px;height: 18px;border: 1px solid #d0d0d0;border-radius: 0px; /* 모서리를 살짝 둥글게 */display: inline-block;vertical-align: middle;margin-right: 5px;position: relative; background: #fff;}
#formmail-write .radio input[type="radio"]:checked::after {content: '✓'; /* 체크 표시 */color: white; /* 체크 표시 색상 */font-size: 14px; /* 체크 표시 크기 */position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); /* 가운데 정렬 */line-height: 1; /* 체크 모양이 정렬될 때 필요한 값 */}
/* 선택된 라디오 버튼의 스타일 */
#formmail-write .radio input[type="radio"]:checked {background-color: var(--color); border: 1px solid var(--color);}
#formmail-write .radio label{display: flex; align-items: center; font-size: 1.5rem; color: #b6b6b6;}


.file-group .hidden_file{position: absolute;margin-left:500px;}
.file-group .file_text{overflow: hidden;}
.file-group .file_upload{background: transparent;width: 100px;height: 100%;display: flex;align-items:center;justify-content:start;color:#000;}
.file-group  input[name = 'wr_8_del']{display: none;}
.file-group .file_delx2{width: 100px; height: 100%; background: #eee; font-size: 1.6rem; display: flex; justify-content: center; align-items: center;}

.file-group .file_del{position: relative;display: inline-flex;align-items:center;}
.file-group .file_del input{display: none;}
.file-group .file_del span{display: inline-block;width: 17px;height: 17px;border: 1px solid #c8ccd4;background: #fff;border-radius:3px;transition:background 0.2s ease;position: absolute;left:0;top:50%;transform:translateY(-50%);}
.file-group .file_del span::after{content:"";position: absolute;top:1px;left:5px;width: 5px;height: 11px;border-right: 2px solid #fff;border-bottom: 2px solid #fff;transform:rotate(45deg) scale(0);transition:all 0.3s ease 0.15s;opacity:0;}
.file-group .file_del label{cursor:pointer;padding-left: 23px;position: relative;z-index: 1;word-break:break-all;display: inline-block;line-height: 1em;}
.file-group .file_del label.sound_only{width: 17px;height: 17px;}
.file-group .file_del label.sound_only .sch_word{display: none !important;}
.file-group .file_del input:checked ~ span{border-color: transparent;background: #1c54a7;animation: checkbox-jelly 0.6s ease;}
.file-group .file_del input:checked ~ span:after{opacity:1;transform:rotate(45deg) scale(1);}

.file-group{width: 100%;}
.file_wrap{display: flex; align-items: center;width: 100%;}
.file-group .write_box{display: flex; background: transparent; position: relative;   width: 100%;}
.file-group .write_box input{background: transparent; width: 100%;width: 31%; border: 1px solid #e0dedf;}
.file_upload{width: 100%!important;position: absolute;top: 0; left: 0;}
.file_box{width: 100%;}
#formmail-write .form-group .content_box2 .file_name{width: 100%;}
.file_btn{margin-left: 350px;background-color: #2f333e; color: #fff; text-align: center;padding: 1.5rem 4rem;border: none;font-size: 1.5rem; margin-right: 15px;}
.file_btn_plus{background-color: #0d5bb2;color: #fff; text-align: center;padding: 1.5rem 5rem;border: none;display: inline-block;position: absolute; top: 18px ; right: 34%;}

#formmail-write .form-group .file_wrap {display: flex;position: relative;width: 80% !important;} 
.file_wrap label{width: 20%; font-size: 2rem; font-weight: 500; color: #000022;padding: 0 20px;}


#formmail-write .form-group .form-control-width{width: 35%;  background-color: #eeeeee; /* 기본 회색 */}
#formmail-write .margin{margin-top: 10rem;padding-bottom: 35px;border-bottom: 1px solid #cecece;}
#formmail-write .form-group p{font-size: 1.5rem;color: #666;margin-top: 1rem;}

select{padding: 15px ; border: 1px solid #d4d4d4; font-size:1.4rem ;width: 100%;}
select option{font-size:1.4rem ;}