@charset "utf-8";
/*
------------------------------------------------------------------------------------------------------------------------
폼메일 쓰기 스타일
------------------------------------------------------------------------------------------------------------------------
*/
#formmail-write { position:relative;  margin-bottom:100px; font-size:18px;z-index: 9; }
#formmail-write .form-group { display:flex; margin-bottom:20px; align-items: start }
#formmail-write .form-group>label { padding:0 20px; width:20% }
#formmail-write .form-group>div { width:80% }
#formmail-write .form-group.col4>label { width:30% ;font-size: 2rem;font-weight: 600; color: #111;padding: 18px 0;}
/* #formmail-write .form-group.col4>div { width:30% } */
#formmail-write .form-group .form-control { width:100%; padding:18px 20px; border:1px solid #E5E5EC;  }
#formmail-write .form-footer { padding-top:4.2rem; text-align: center;  }
#formmail-write .btn_submit { border-radius: 100px; height: 64px; padding: 15px 35px; color: #fff;
background: #CCC;width: 18rem;transition: all 0.3s; }
#formmail-write .btn_submit:hover{background-color: #3460CA; color: #fff;}
#formmail-write .check-list { position:absolute; right:0; top:-30px }
#formmail-write .privacy-of-use {font-size:14px;padding:15px; border-top:1px solid #e0dedf; border-bottom:1px solid #e0dedf; height:150px; overflow-y:scroll }
#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 {  color:#8a8a8a; font-size:2rem;margin-top: 8.2rem; }
/* #formmail-write .privacy-of-use-check input{margin-top:  } */

.required_mark{color: #DC0000 !important; font-size: 1.4rem !important;  }
#formmail-write .form-group.col4 input::placeholder{color: #999;}

.address_input_btn{border: 1px solid #111; padding: 6px 24px; height: 59px;text-align: center; color: #111; font-weight: 500;background-color: #fff;}
.addr_input .full_input{border: 1px solid #E5E5EC;padding:18px 20px;
background: #FFF;}
.addr_input .address_padding{margin: 2rem 0;}
.addr_input input:first-child{border: 1px solid #E5E5EC;padding:18px 20px;
background: #FFF; margin-right: 1.2rem;}

#formmail-write textarea{width: 100%; border:1px solid #E5E5EC; padding: 18px 20px; height: 168px; resize: none; }


.pop_wrap {display: none;position: fixed;top: 0;left: 0;background: rgb(0, 0, 0, 0.3);width: 100%;  height: 100%;  z-index: 9999;}
.pop_wrap .pop-inner {position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  width: 90%;  max-width: 650px;  height: 50vh;  max-height: 600px;  padding: 50px 20px;  background: #fff;  border-radius: 20px;}
.pop_wrap .pop-inner h3{text-align: center;margin-bottom: 3rem;font-size: 2rem;}
.pop-close {  position: absolute;  top: 5px;  right: 5px;  width: 30px;  height: 30px;  cursor: pointer;line-height: 30px; font-size: 20px;}
.pop-close i{font-size: 24px;}
.pop-text{overflow-y: scroll; height: 100%;}
#formmail-write .pop-text p span{color: #111;}

.pop-btn1 {  font-weight: 500; font-size: 1.6rem;text-decoration: none;text-decoration: underline;}

.control-container{display: flex; justify-content: center; align-items: center; }

.screen-reader { /* 스크린 리더를 고려해서 체크박스를 화면에서 숨김 */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    margin: -1px;
    clip-path: inset(50%);
}
.label-box {
    position: relative;
}
.label-box label{
    margin-left: 3rem;
}
.check-icon {
    width: 1.4em;
    height: 1.4em;
    border-radius: 50%;
    background-color: #E5E5EC;
    border: 1px solid #E5E5EC;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.check-icon::before {
    content: "";
    position: absolute;
    box-sizing: border-box;
    width: 30%;
    height: 55%;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-70%) rotateZ(40deg);
    border-right: 1.7px solid #fff;
    border-bottom: 1.7px solid #fff;
}

[type="checkbox"]:checked + .label-box .check-icon {
    border-color:  #fff;
    background-color: #3460CA;
}
[type="checkbox"]:checked + .label-box .check-icon::before {
    border-color: #fff;
}




#formmail-write .radio_wrap{display: flex; gap: 7px 2%;margin-top: 0.8rem;}
#formmail-write .radio_wrap .box{width: 50%;}
#formmail-write .radio_wrap input[type=radio]{display: none;}
#formmail-write .radio_wrap label{font-size: 1.8rem; color: #a3a3a3; border: 1px solid #cbcbcb; height: 50px; border-radius: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-weight: 400; gap: 0px 4px}
#formmail-write .radio_wrap label i{display: none;}
#formmail-write .radio_wrap input[type=radio]:checked + label{border: 1px solid #3460CA; color:#3460CA; font-weight: 500;}
#formmail-write .radio_wrap input[type=radio]:checked + label i{display: block;}


#formmail-write .form-group:last-of-type{margin-bottom: 0;}

.checkbox_wrap{padding: 18px 0;}
.checkbox_wrap input{padding: 18px 0;}
/* 기본 라디오 숨김 */
.checkbox_wrap input[type="radio"] {
  display: none;
}

/* 라벨 스타일 */
.checkbox_wrap label {
  position: relative;
  padding-left: 28px;
  margin-right: 20px;
  cursor: pointer;font-weight: 500;
  font-size: 1.8rem; color: #505050;
  user-select: none;
}

/* 라디오 버튼 모양 */
.checkbox_wrap label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 20px;
  height: 20px;
  border: 1px solid #E5E5EC;
  border-radius: 50%;
  transform: translateY(-50%);
  background: #fff;
}

/* 선택됐을 때 안쪽 동그라미 */
.checkbox_wrap input[type="radio"] + label::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  width: 10px;
  height: 10px;
  background: #E5E5EC; /* 파란색 */
  border-radius: 50%;
  transform: translateY(-50%);
}

.checkbox_wrap input[type="radio"]:checked + label::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  width: 10px;
  height: 10px;
  background: #3460CA; /* 파란색 */
  border-radius: 50%;
  transform: translateY(-50%);
}

.checkbox_wrap input[type="radio"]:checked + label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 20px;
  height: 20px;
  border: 1px solid #3460CA;
  border-radius: 50%;
  transform: translateY(-50%);
  background: #fff;
}
.form-group select{border: 1px solid #E5E5EC; padding: 0 2rem;height: 60px;width: 80%;
background: #FFF;}

.select-box {
  position: relative;
  display: inline-block;
  width: 200px;
}

.select-box select {
  width: 100%;
  padding: 8px 30px 8px 10px; /* 오른쪽 공간 확보 */

  appearance: none;       /* 기본 화살표 제거 */
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #fff;
  background-image: url(../../../img/arrow_2.png);background-repeat: no-repeat; background-position: right 20px center; background-size: 16px;
}

/* 커스텀 화살표 추가 */
.select-box::after {
  content: ""; /* 화살표 기호 */
  font-size: 12px;
  color: #666;
  position: absolute;
  right: 10px;   /* select 안쪽 */
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* 클릭 막기 */
}