/**********************************************************
*  직업인 인터뷰 적응형  20251111 JYS
***********************************************************/
#wrap {overflow: hidden;}

/* 상단 */
.content {min-width: 360px;} /* 좌우여백 추가 */
.interview_head { position: relative; width: 100%; display: flex;flex-direction: column;  gap: 20px; border-radius: 20px; padding: 30px 50px; background: #F3F7FF;margin:30px 0;} 
.interview_head .interview-head-profile {flex-shrink: 0; display:flex; width: 320px; height: 320px; background-color: #fff; border-radius: 12px;position: absolute;top:30x; right:30px;overflow: hidden;}
.interview_head .interview-head-cont {position: relative; display: flex; gap: 50px; flex-direction: column;}
.interview_head .interview-head-cont .head-wrap {display: flex; gap:5px; align-items: center;flex-direction: column;align-items: start;padding-right: 340px;}
.interview_head .interview-head-cont .head-wrap .job {display: flex; align-items: center; font-size: 18px; color: #fff;background-color: #024BB3;padding:5px 20px;border-radius: 30px;margin-bottom: 5px;}
.interview_head .interview-head-cont .head-wrap .name_title {font-weight:700; font-size:40px;line-height: 1.1;}
.interview_head .interview-head-cont .head-wrap .name_info {display: flex; gap: 20px; flex-direction: row;}
.interview_head .interview-head-cont .head-wrap .name_info li{font-size:20px;color:#545454;position: relative;}
.interview_head .interview-head-cont .head-wrap .name_info li::after{content: ""; width: 1px; height: 10px; background-color:#AEAEAE;position: absolute;right:-10px;top:10px }
.interview_head .interview-head-cont .head-wrap .name_info li:last-child::after{display: none;}

.interview_head .interview-head-cont .info-wrap {display: flex; gap:10px; flex-direction: column;align-items: start;padding-right: 340px;}
.interview_head .interview-head-cont .info-wrap .info_title{font-size: 28px;font-weight: 600; line-height: 1.1;}
.interview_head .interview-head-cont .info-wrap .tag-list {display: flex;flex-direction: row; gap:5px;flex-wrap:wrap}
.interview_head .interview-head-cont .info-wrap .tag-list  span {padding:5px 15px; font-size: 15px; color: #565656; background-color: #fff; border: 1px solid #DFE0E1; border-radius: 26px;}
.interview_head .interview-head-cont .date-w {display: flex;flex-direction: row;gap:10px;font-size: 18px;}
.interview_head .interview-head-cont .date-w dt{color:var(--career--gray-70)}
.interview_head .interview-head-cont .date-w dd{color:var(--career--gray-80);font-weight: 600;}


@media (max-width:1024px) {
  .interview_head { padding: 20px 30px;}
  .interview_head .interview-head-cont {gap: 30px;}
  .interview_head .interview-head-cont .head-wrap {padding-right:300px;}
  .interview_head .interview-head-cont .head-wrap .job {font-size: 16px;}
  .interview_head .interview-head-cont .head-wrap .name_title {font-size:34px;}
  .interview_head .interview-head-cont .head-wrap .name_info li{font-size:17px;}

  .interview_head .interview-head-cont .info-wrap {padding-right:300px;}
  .interview_head .interview-head-cont .info-wrap .info_title{font-size: 26px;}
.interview_head .interview-head-profile {width: 270px; height: 270px;}

}
@media (max-width:750px) {
    .interview_head { padding:20px 15px;}
    .interview_head .interview-head-profile {position: relative;background-color:transparent;align-items: center;right: 0;width: 100%;justify-content: center;height: auto;}
    .interview_head .interview-head-profile img{width:auto; height:100%;border-radius: 12px;}
    .interview_head .interview-head-cont .head-wrap {padding-right:0px;}
    .interview_head .interview-head-cont .head-wrap .name_title {font-size:30px;}
    .interview_head .interview-head-cont .head-wrap .name_info li{font-size:16px;}
    .interview_head .interview-head-cont .date-w {font-size: 16px;}
    .interview_head .interview-head-cont .info-wrap {padding-right:0px;}
    .interview_head .interview-head-cont .info-wrap .info_title{word-break:break-all}
  }


  
.interview-cont {position: relative; width: 100%; display: flex;flex-direction: column;  gap: 20px;  padding: 20px 10px;line-height: 1.5;}
.interview-cont p{font-size: 20px;color:var(--career--gray-80)}
.interview-cont .qna-wrap{position: relative; width: 100%; display: flex;flex-direction: column;  gap:20px;}
.interview-cont .qna-wrap dt{color:#024BB3;font-size: 30px;font-weight: 700;margin-top: 30px;}
.interview-cont .qna-wrap dd{font-size: 20px;color:var(--career--gray-80);}
.interview-cont .qna-wrap dd p.txt_blue{color:#024BB3;margin-top: 20px;}
.interview-cont .qna-wrap dd.img-w{position: relative; width: 100%; display: flex;flex-direction: column;  gap: 10px; align-items: center;}
.interview-cont .qna-wrap dd.img-w img{width: 100%;height:auto}
.interview-cont .qna-wrap dd.img-w .img-txt{color: var(--career--gray-70);font-size: 16px;}

.interview-cont .link-wrap{display: flex;flex-direction: column;gap:10px}
.interview-cont .link-wrap h4::before {content: "";display: inline-block;width: 16px;height: 16px;background: url(../img/icon/icon_ji_h4.svg) no-repeat;vertical-align: middle;margin: 0 5px 2px 0;}
.interview-cont .link-wrap .link {display: flex;flex-direction: row; justify-content:space-between; padding:20px;border-radius: 12px;border:1px solid var(--career--gray-40);max-width: 550px;font-size: 17px;}
.interview-cont .link-wrap .link a{padding-right:40px; position: relative;}
.interview-cont .link-wrap .link a::after {content: ""; width: 25px; height: 17px; background: url("../img/icon/icon_arrow.svg") no-repeat; position: absolute; top:3px; right:5px}
.interview-cont .copyright-txt{width: 100%;text-align: right;font-size: 15px;color: var(--career--gray-60);}

@media (max-width:1024px) {
  .interview-cont{padding:0 10px}
  .interview-cont p{font-size: 18px;text-align: justify;word-break:break-word;}
  .interview-cont .qna-wrap dd{font-size: 18px;text-align: justify;word-break:keep-all}
  .interview-cont .qna-wrap dt{font-size: 24px;margin-top: 10px;word-break:break-all}
}

@media (max-width:750px) {
  .interview-cont{padding:0}
  .interview-cont .qna-wrap dd{font-size: 16px;text-align: justify;word-break:break-all}
  .interview-cont .qna-wrap dt{font-size: 20px;margin-top: 10px;word-break:break-all}
}

/**********************************************************
*  직업인 인터뷰_리스트  20251118 JYS
***********************************************************/
/*
.interview_list_w {position: relative;}
.interview_list_w .interest_wrap {position: absolute; }
.com-mob-brd-06 .interview_list_w .interest_wrap {position: absolute;left: 80px; top:15px;}
.interview_list_w .interest_wrap button{font-size: 0;border-radius: 30px;border: 1px solid #ddd;width:30px;height:30px;display: flex;align-items: center;justify-content: center;z-index: 10;}
.interview_list_w .interest_wrap .btn-interest:before {display: inline-block;content: '';  width: 15px;height: 15px;  background: url(../img/common/icon_interest.svg) no-repeat 0 0;  background-size: auto 15px;}
.interview_list_w .interest_wrap .btn-interest.active {border: 1px solid #1847bd !important; background-color: #f9fafc;}
.interview_list_w .interest_wrap .btn-interest.active:before {background-image: url(../img/common/icon_interest_active.svg);}

.com-mob-tail-item-list .interest::before { content: ""; flex-shrink: 0; width: 16px; height: 16px; background: url(../img/common/icon_interest.svg) no-repeat; background-size: 16px auto;}

@media (max-width:750px) {
  .com-mob-brd-06 > ul {padding:0 10px}
  .com-mob-brd-06 .ctt.type-01{line-height: 1.2;}
}
*/

/**********************************************************
*  직업인 인터뷰_리스트 및 추천, 관심 버튼 추가  20251216 RHD
***********************************************************/
.interview_list_w {position: relative;}
.interview_list_w .interest_wrap {position: absolute; right: 16px; z-index: 1; display: flex; align-items: center; gap: 5px;}
.com-mob-brd-06 .interview_list_w .interest_wrap {left: 55px; top:15px;}
.com-mob-brd-06 .interview_list_w .interest_wrap button {gap: 0; justify-content: center; width: 24px; height: 24px; padding: 0; text-indent: -9999px; font-size: 0; border-radius: 50%;}
.interview_list_w .interest_wrap button {display: flex; gap: 3px; align-items: center; height: 27.5px; padding:0 8px; font-size: 13px; color: #000; letter-spacing: -1px; background-color: #F0F4FC; border-radius: 24px;}
.interview_list_w .interest_wrap button::before {display: inline-block; width: 15px; height: 15px; background-size:auto 100%; background-position: center center; background-repeat: no-repeat; content: ''; }
.interview_list_w .interest_wrap .btn-recommend::before {background-image: url(/cloud/w/img/common/icon_recommendation.svg); }
.interview_list_w .interest_wrap .btn-interest::before {background-image: url(/cloud/w/img/common/icon_bookmark.svg); }
.interview_list_w .interest_wrap button:hover, .interview_list_w .interest_wrap button.active {color: #fff; background-color: var(--career--primary);}
.interview_list_w .interest_wrap button:hover::before, .interview_list_w .interest_wrap .active::before {filter: brightness(0) invert(1);}

.intv-upload-video {width: 100%;}

.com-mob-tail-item-list .interest::before { content: ""; flex-shrink: 0; width: 16px; height: 16px; background: url(../img/common/icon_interest.svg) no-repeat; background-size: 16px auto;}


/* 직업백과, 학과정보 관심 버튼 위치 조정 모바일 20251128 RHD */
.flex-box-auto > .interview_list_w {width: 100%;}
.flex-box-auto > .interview_list_w a {max-width: 100%;}
.flex-box-auto .interview_list_w .com-card + .interest_wrap {top: 354px; } /* 학과정보*/
.flex-box-auto .interview_list_w .com-card.img.type-03 + .interest_wrap {top: 374px; } /* 직업백과 */
.com-mob-brd-03 .interview_list_w .interest_wrap {right: 0; bottom: 13px} /* 전체동영상 */
.ced-brd-wrap-01 .com-mob-brd-01 .interview_list_w .interest_wrap {right: 0; top: 19px; bottom: auto; } /* 전체 자료게시판 */
.ced-brd-wrap-01 .com-mob-brd-01 .interview_list_w .tag-list {min-height: 27.5px; gap: 3px;}  /* 전체 자료게시판 학년 폰트 크기 조절 */
.ced-brd-wrap-01 .com-mob-brd-01 .interview_list_w .tag-list .com-badge.sm {padding: 4px 6px; font-size: 13px;}

@media (min-width:640px) {
  .flex-box-auto > .interview_list_w {max-width: calc(50% - 12px);}
}
@media (min-width:960px) {
  .flex-box-auto > .interview_list_w {max-width: calc(100% / 3 - 16px);}
}
@media (min-width:1480px) {
  .flex-box-auto > .interview_list_w {max-width: calc(25% - 18px);}
}
@media (max-width:360px) {
  .flex-box-auto .interview_list_w .com-card.img.type-02 .info-list .com-badge + .com-badge {margin-top: 0;} /* 고등학교, 대학교 info-list 마진 통일 학과정보*/
  .flex-box-auto .interview_list_w .com-card + .interest_wrap {top: 490px; } /* 학과정보*/
}