

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

/* 상단 */
.content {padding: 20px 20px; 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;}
}

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

/* 직업백과, 학과정보 관심 버튼 위치 조정 모바일 20251128 RHD */
.flex-box-auto > .interview_list_w {width: 100%;}
.flex-box-auto > .interview_list_w a {max-width: 100%;}
.interview_list_w .com-card + .interest_wrap {top: 350px; left: calc(100% - 46px)} /* 학과정보*/
.interview_list_w .com-card.img.type-03 + .interest_wrap {top: 372px; } /* 직업백과 */
.com-mob-brd-03 .interview_list_w .interest_wrap {right: 0; bottom: 16px} /* 전체동영상 */

@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);}
}
