@charset "utf-8";
/*
------------------------------------------------------------------------------------------------------------------------
폼메일 쓰기 스타일
------------------------------------------------------------------------------------------------------------------------
*/
#formmail-write { position:relative;max-width: 760px; font-size:18px }
#formmail-write .form-group { display:flex;flex-direction: column; gap:8px ; justify-content: start; margin-bottom:32px; align-items: start }
#formmail-write .form-group>label { width:100%;color: #333; font-size: 2rem; font-weight: 600; }
#formmail-write .form-group>div { width:100% }
#formmail-write .form-group.col4>label { width:100% }
#formmail-write .form-group.col4>div { width:100% }
#formmail-write .form-group .form-control { width:100%;border-radius: 8px;
border: 1px solid #E5E5EC;height: 60px;
padding: 17px 24px;
background: #FFF;}
#formmail-write .form-footer { padding-top:50px; text-align: right; }
#formmail-write .btn_submit { font-size:1.8rem; font-weight: 600;}
#formmail-write .check-list { position:absolute; right:0; top:-30px }
#formmail-write .privacy-of-use {border-radius: 6px;
border: 1px solid #E5E5EC;padding: 10px 20px 0 20px;
background: #FFF;  font-size:1.6rem;color: #999; font-weight: 500; padding:15px; border-top:1px solid #e0dedf; border-bottom:1px solid #e0dedf; height:150px; overflow-y:scroll ;line-height: 150%;}
#formmail-write .privacy-of-use h2{color: #111; font-weight: 600; margin-bottom: 2rem;}
#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 .privacy-of-use-check {margin-top: 12px; color:#505050;font-weight: 500; }
.required_mark{color: #C00; font-weight: 600;}
.phone_input{display: flex; justify-content: space-between; align-items: center;gap: 12px;}
.phone_input input{width: 30% !important;}
.phone_input span{display: block; width: 12px;height: 1px; background-color: #767676;}

.select_wrap {
  position: relative; display: flex; justify-content: space-between; align-items: center;
  width: 100%;gap: 2rem;
}
.select_wrap .select_box{width: 50%;position: relative;}
.select_wrap select {
  width: 100%;
  height: 60px;
  padding: 0 40px 0 16px; /* 왼쪽은 16px, 오른쪽은 화살표 들어갈 공간 확보 */
  border-radius: 8px;
  border: 1px solid #E5E5EC;
  background: #FFF;
  font-size: 16px;
  appearance: none;   /* 기본 브라우저 화살표 제거 */
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  line-height: 60px;
}

/* 화살표 이콘 삽입 */
.select_box::after {
  content: "";
  background: url(../../../img/arrow.png)no-repeat center/auto;
  width: 16px; height: 16px;
  color: #555;
  position: absolute;
  right: 16px;
  top: 50%;display: block;
  transform: translateY(-50%);
  pointer-events: none; /* 화살표 클릭해도 select 동작되게 */
}

.select_wrap input{width: 50% !important;}

#wr_7 {
    min-height: 160px; /* 원하는 높이 */
    width: 100%;   /* 가로도 맞추기 */
    resize: none;  /* 사용자가 크기 조절 못하게 막기 */overflow: hidden; /* 스크롤바 숨김 */
}


.hidden_file {
  display: none;
}

/* 파일명 표시 */
.file_name {
  font-size: 16px;
  color: #505050; font-weight: 500;width: 73%;border-radius: 8px;display: block;height: 60px;
padding: 17px 24px;
border: 1px solid #E5E5EC;
background: #FFF;
}

/* 커스텀 버튼 */
.file_upload {
    border-radius: 8px;
background: #111;
  display: inline-block;
  width: 120px;
height: 60px; color: #fff; font-weight: 600;
padding: 17px 24px;
  cursor: pointer;height: 6rem; 
  font-size: 1.8rem; font-weight: 600;
}
.file_box button{border: none;}
.write_box{margin-top: 8px;display: flex; justify-content: start; align-items: start; gap: 10px;}
.write_box .btn_wrap{display: flex; justify-content: start; align-items: center; gap: 10px;}
.file_info p{margin-top: 4px; color: #505050; font-weight: 600;margin-left: 4px;}
.form-footer button{border-radius: 100px;width: 180px;
height: 60px;display: inline-flex; justify-content: center; align-items: center;gap: 12px;
padding: 0 28px;
background: #00854A;}
.form-footer button p{color: #fff; font-size: 1.8rem; font-weight: 600;}
.form-footer button span{font-family: "SUIT" ;  color: #fff;font-size: 1.6rem; }

.form-footer button{transition: all 0.3s;}
.form-footer button:hover{box-shadow: 3px 3px 15px #00000059;}
.form-footer button:hover span{transform: translateX(10px);}
.form-footer span{transition:  all 0.3s;}
      .control-container {
    display: flex;
    position: relative; margin-top: 12px;
}
.control-container + .control-container {
    margin-top: 0.7em;
}
.screen-reader { /* 스크린 리더를 고려해서 체크박스를 화면에서 숨김 */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    margin: -1px;
    clip-path: inset(50%);
}
.label-box {
    position: relative;display: flex;justify-content: start; align-items: center;gap: 8px;
}
.check-icon {
    width: 1.4em;
    height: 1.4em; display: block; 
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid gray;
    position: relative;
}
.check-icon::before {
    content: "";
    position: absolute;
    box-sizing: border-box;
    width: 35%;
    height: 50%;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-70%) rotateZ(40deg);
    border-right: 2px solid gray;
    border-bottom: 2px solid gray;
}
label {
    position: relative;
    cursor: pointer;
}
[type="checkbox"]:checked + .label-box .check-icon {
    border-color:  #fff;
    background-color: #00854A;
}
[type="checkbox"]:checked + .label-box .check-icon::before {
    border-color: #fff;
}
.file-group>label{color: #333; font-size: 2rem; font-weight: 600;}

.privacy_text{color: #333 !important; font-size: 2rem ; font-weight: 600 !important; margin-bottom:8px ;}

.file-group>label b{font-size: 1.8rem; font-weight: 600;}

@media screen and (max-width:1400px) {
    #formmail-write{max-width: 600px;}
}

@media screen and (max-width:1024px) {
     #formmail-write{max-width: 500px;}
}