@charset "utf-8"; 
@import url("reset.css");
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

html, body {
  font-family: 'Pretendard', sans-serif;
  box-sizing: border-box;
  background-color: #fff;
  line-height: 1.7;
  overscroll-behavior: none;
  touch-action: pan-x pan-y;
}
.container {  overscroll-behavior: contain;}
.br-pc {display: block;}
.br-mo {display: none;}

.footer {background-color: #383E48;text-align: center; padding:20px; position:relative;}
.footer small {color:#ffffffda;  font-size: 14px; font-weight: 400;}

input[type=radio] {
  margin: 0;
  padding: 0;
  opacity: 0;
  display: none;
}

input{-webkit-appearance: none;-moz-appearance:none;appearance:none;-webkit-border-radius:0;}

input[type=radio] + label {  
  height: 60px;
  background: url('../images/radio.svg') 0 50% no-repeat;
  background-size: 28px;
  padding-left: 30px;
  line-height: 60px;
  color: #555;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;

}

input[type=radio]:checked + label {
  background: url('../images/radio-on.svg') 0 50% no-repeat;
  background-size: 28px;
  padding-left: 30px;
  font-size: 16px;
  font-weight: 400;
}

.radio-style2 input[type=radio] + label { background: url('../images/check.svg')  no-repeat 0 50%/ 30px; padding-left:34px;}
.radio-style2 input[type=radio]:checked + label {background: url('../images/check-on.svg') no-repeat 0 50% / 30px;}
.radio-style2 {
  justify-content: flex-end;
}

.form-area {width: 100%; height: 100%; position: relative;background-color: #fff; z-index: 15;border-radius: 10vw;transition: .5s;}
.form-area.active {border-radius: 0; transition: .5s;}
.form-wrap{ padding-top:150px; padding-bottom:200px; max-width: 1000px; margin: auto; margin-top: 100vh; z-index: 5;}
.form-tit {font-size: 60px; line-height: 1.2; font-weight: 600; padding:0 20px; margin-bottom:150px;}

.form-section {font-size: 15px; padding-bottom:30px; padding-left:20px; padding-right:20px;}

.form-section .stext{font-size: 14px; font-weight:400;}

.photo-section-wrap {position: relative;}
.photo-section-wrap .form-group {width: calc(100% - 194px);}
.photo-section {
  position: absolute; 
  right: 0;
  top:0;
  width: 174px;
  height: 236px;
  background-color: #f7f7f7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.photo-section.uploaded h3, 
.photo-section.uploaded p {display: none;}

h2 {
  font-size: 22px;
  line-height: 1;
  margin-bottom: 10px;
  font-weight: 600;
}

.required-text{
  color: #EC2129;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
}
.ref-info .form-group  {margin-bottom: 0;}

.form-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 30px;
  gap: 5px;
  align-items: flex-start;
}

.form-group label {
  width: 110px;
  font-weight: bold;
  color: #111;
  font-size:16px;
  line-height: 60px;
}


.form-group input[type=text],
.form-group select {
  flex: 1;
  padding: 10px 8px;
  margin: 5px 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box;
}

.form-group .sp{line-height: 50px; margin:5px 0;}

.radio-wrap {
  display: flex;
  gap: 10px;
}

.email-wrap {
  flex:1;
  display: flex;
  gap: 5px;
  flex-wrap: wrap
}
.address-wrap {flex:1}

.safe-key-btn,
.zipcode-btn {
  margin:5px 0;
  padding: 8px 10px;
  background: #444;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 15px;
}
.add-btn-wrap {display: flex;justify-content: flex-end;margin-top: 10px;}
.career-btn { position: relative;width: 100px; height: 50px; background: #333 ; color:#fff; border-radius: 4px; padding-left:20px;}
.career-btn:after {content: '';position: absolute;top:14px; left:10px;width: 20px; height: 20px; background: url(../images/ico_add.svg) no-repeat center / 100%;}
.training input { width:100%;}

.photo-section h3 {
  margin-bottom: 10px;
  font-size: 18px;
}

.photo-section p {
  color: #EC2129;
  font-size: 14px;
  text-align: center;
  margin-bottom: 10px;
}


.career-wrap{position: relative; flex:1; display: flex; flex-direction: column; gap: 8px;}
.photo-section button {
  background: #444;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 15px;
}

.btn-row-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.btn-row-delete { color:transparent; text-indent: -999px; background: #ccc url(../images/ico_remove.svg) no-repeat center/24px; width: 50px; height: 50px; border-radius: 5px;}
.photo-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.upload-btn {
  background: #444;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 15px;
}

.photo-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.photo-preview img {
  max-width: 174px;
  max-height: 236px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.photo-section button.remove-photo {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    padding:0;
    background: #444 url(../images/ico_close.svg) no-repeat center / 20px;
 }
 .one-line{display: flex; gap: 5px; flex-wrap: wrap; align-items: center;}
.date-line{display: flex; gap: 5px; flex-wrap: wrap; align-items: center;}
.divider{ border-bottom:1px dotted #ddd;padding:10px 0; }
.radio-group label {
  display: inline-block; padding-right:20px; width: auto;
}

.one-row {display:flex; gap: 5px; flex-wrap: wrap;}
.safe-key-btn, .zipcode-btn { max-width: 130px;}


.flex-other {
  align-items: center;
  gap: 4px;
}

.other-input {
  width: calc(100% - 160px);
  max-width: 300px;
  min-width: 150px;
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.textarea-wrap > textarea {width:100%;height:100px; border: 1px solid #ddd; resize: none; padding: 10px; box-sizing: border-box;}
.textarea-wrap > p{padding-top:5px;  margin-left: auto; display: block; color:#999}
#career-container > .divider + .divider {padding-top:10px}
#certifi-container > .divider + .divider {padding-top:10px}
.privacy {border:1px solid #ddd;  height: 100px; font-size: 14px; padding:10px; overflow-y: auto; overflow-x: hidden; color:#777; line-height: 1.6;}
.privacy-agree {padding-top:10px;font-size: 16px;line-height: 1.7;}

.button-group {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
  margin-top: 50px;
  flex-wrap: wrap;
}

.submit-row {
  display: flex;
  justify-content: center;
}

.secondary-row {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.submit-btn {
  background: #EC2129;
  color: white;
  border: none;
  width: 160px;
  height: 60px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
}

.rewrite-btn {
  background: white;
  color: #EC2129;
  border: 1px solid #EC2129;
  width: 160px;
  height: 60px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
}

.cancel-btn {
  background: white;
  color: #666;
  border: 1px solid #999;
  width: 160px;
  height: 60px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
}
.confirm-text {font-size: 18px;text-align: center;}
.confirm-text > strong {color:#E9151F}

/* 메인비주얼 */
.header {position: fixed; top:30px; left:10vw;z-index: 10;}
.logo {width: 120px;}
.visual-wrap {position: fixed; top:0; left:0; right:0; max-width: 100%;  height: 100svh;; }
.visual-text {position: absolute; left:10vw; bottom:26vh; color:#fff; z-index: 9;}
.visual-tit {font-size: 70px; line-height: 1.2; text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);}
.visual-stit {font-size: 20px; padding-top:30px;}
.visual-box { width: 100%;padding-top: 100svh; background: rgba(0,0,0,0.2);}
.visual-box img {position: absolute;top: 0;left: 0;width: 100vw;height: 100svh;object-fit: cover;z-index: -1;}
.btn-apply {position: absolute; bottom:5%; left:50%; transform: translate(-50%); display: flex; justify-content:center; align-items: center; width: 150px; font-size: 18px; color:#fff; border:1px solid #fff; border-radius :30px;font-weight: 600; z-index: 1;}
.ico-down {display: inline-block; width: 24px; height:24px; background: url(../images/ico_down.svg) no-repeat center / 100%; animation: updown 0.8s infinite;}
/* updown 애니메이션 */
@keyframes updown {
  0% { transform: translateY(-2px); }
  50% { transform: translateY(2px); }
  100% { transform: translateY(-2px); }
}
/* =============================================1400px============================================ */

  @media (max-width: 1400px) {
    /* 메인비주얼 */
    .header{left:5vw;}
    .logo {width: 100px;}
    .visual-text {left:5vw;}
    .visual-tit {font-size: 50px;}
    .visual-stit {padding-top:16px;}
    .form-wrap{ padding-top:70px; padding-bottom: 100px;}
    .form-tit {margin-bottom: 70px;}
  }
/* =============================================768px=========================================== */
    @media (max-width: 768px) {
      .br-pc {display: none;}
      .br-mo {display: block;}
      input[type=radio] + label {  height: 32px;line-height: 32px;}
      .container {
        width:100%;
      }
    .form-wrap{ padding-top:50px; padding-bottom: 50px;}

    .form-tit {font-size: 30px; margin-bottom: 30px;}
    .form-section {
      font-size: 14px;
      padding: 16px 20px;
        }

    .form-section .stext{font-size: 13px;}
    h2 {
      font-size: 18px;
      margin-bottom: 6px;
    }

    .required-text {
      font-size: 13px;
    }
      .form-group label { 
        width: 100%;
        font-size: 14px;
        line-height: 14px;
        padding-top:16px;
      }
      
     .form-group input[type=radio] + label {  padding-top:0;}
      .form-group {       
        margin-bottom:0px;
      }

      .radio-group label {width:100px;}
      .radio-group label.flex-other {width:100%}
      
      .photo-section-wrap {padding-top:260px;}
      .photo-section-wrap .form-group {width: 100%;}
      .photo-section {top:10px; right: 50%; transform: translate(50%);}
      .photo-section h3 {font-size: 13px;}

      /* 추천인 입력 필드를 한 줄로 배치 */
      .email-wrap,
      .safe-Key {
        flex-direction: row;
        gap: 5px;
        flex-wrap: wrap;
      }
      
      .email-wrap input,
      .email-wrap select,
      .safe-Key input
      {
        flex: 1;
        min-width: 120px;
      }
      
      /* 경력 입력 필드를 두 줄로 배치 */
      .date-line.career {
        flex-direction: row;
        gap: 5px;
        flex-wrap: wrap
      }
      
      .date-line.career input {
        flex: 1;
        min-width: 150px;
      }
      
      /* 버튼 그룹 반응형 */
      .button-group {
        flex-direction: column;
        align-items: center;
        gap: 15px;
      }
      
      .submit-row {
        width: 100%;
      }
      
      .secondary-row {
        width: 100%;
        flex-direction: row;
        justify-content: center;
        gap: 10px;
      }
      
      .submit-btn,
      .rewrite-btn,
      .cancel-btn {
        width: 100%;
        padding: 12px 20px;
      }
      
      .confirm-text {
        font-size: 16px;
        padding: 0 20px;
      }

      .career-wrap {gap: 0;}
      .form-group .career-wrap.type1 input[type=text], .form-group .career-wrap.type1 select {flex: none;}
      .form-group .career-wrap.type1 select[name="high_school_year"] , 
      .form-group .career-wrap.type1 select[name="high_school_month"],  
      .form-group .career-wrap.type1 input[name="high_school_name"], 
      .form-group .career-wrap.type1 select[name="high_school_status"] { width: calc(50% - 3px);margin-bottom:0;}
      .form-group .career-wrap.type1 select[name="university_year"] , 
      .form-group .career-wrap.type1 select[name="university_month"]{ width: calc(50% - 3px);margin-bottom:0;}  
      .form-group .career-wrap.type1 input[name="university_name"], 
      .form-group .career-wrap.type1 input[name="university_major"] ,
      .form-group .career-wrap.type1 select[name="university_status"]  { width: calc(33% - 3px);margin-bottom:0;} 
      .form-group .career-wrap.type1 select[name="graduate_year"] , 
      .form-group .career-wrap.type1 select[name="graduate_month"]{ width: calc(50% - 3px);margin-bottom:0;}  
      .form-group .career-wrap.type1 input[name="graduate_name"], 
      .form-group .career-wrap.type1 input[name="graduate_major"] ,
      .form-group .career-wrap.type1 select[name="graduate_status"]  { width: calc(33% - 3px);margin-bottom:0;} 
      .form-group .certification input[type=text]{min-width: 150px;}
      .form-group .certification select {min-width: 80px;}

      /* 메인비주얼 */
      .header{top:10px; left:20px;}
      .visual-text {left:20px; bottom: 21vh;}
      .visual-tit {font-size: 8vw; line-height: 1.2;}
      .visual-stit {padding-top:6px; font-size:14px;}
      .mousewheel {display: none;}
      
  }