@charset "UTF-8";
.page_ui .h1Tit_box {
  position: relative;
  padding-bottom: 14px;
  margin-bottom: 20px;
  border-bottom: 3px solid #4f4f4f;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.page_ui h1 {
  font-size: 24px;
  font-weight: 700;
  color: #222;
}

.headtxt {
  line-height: 30px;
  font-size: 18px;
  color: #555;
  margin-bottom: 20px;
}

@media (max-width: 1400px) {
  .headtxt {
    font-size: 20px;
    line-height: 32px;
  }
}
@media (max-width: 767px) {
  .headtxt {
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 24px;
  }
}
.headtxt.bdb {
  padding-top: 20px;
  border-top: 2px solid #1c2b43;
}

.boardSearch_g.curation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 50px 0 10px;
}

.boardSearch_g.curation .left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.boardSearch_g .selectg2 .chk_box {
  margin-left: 10px;
}

.boardSearch_g {
  position: relative;
  min-height: 50px;
  text-align: right;
  font-size: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.boardSearch_g label {
  font-size: 0;
  position: absolute;
  left: -10000px;
}

.boardSearch_g .label {
  position: static;
  margin: 0 20px;
  font-size: 22px;
  font-weight: 700;
}

.boardSearch_g select {
  width: 144px;
  height: 44px;
  margin-right: 7px;
  font-size: 18px;
  border: 1px solid #a6a6a6;
}

.boardSearch_g input:not([type=checkbox]) {
  width: 240px;
  height: 44px;
  font-size: 18px;
  border: 1px solid #a6a6a6;
}

/* 공통 버튼 스타일 */
.boardSearch_g .btn,
.mySearch_g.both .btnM2,
.mySearch_g.mob_col .btnM2 {
  width: 70px;
  height: 44px;
  margin-left: 7px;
  vertical-align: top;
  font-size: 18px;
  color: #fff;
  font-weight: 500;
  background: #666;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.boardSearch_g .btn:hover {
  background: #333;
}

.boardSearch_g .chk_box label {
  position: static;
  font-size: 14px;
}

.boardSearch_g .chk_box label:before {
  top: 2px;
}

.boardSearch_g .selectg select {
  width: 180px;
}

.boardSearch_g .selectg2 .btnM1 {
  margin: 0 60px 0 210px;
  vertical-align: middle;
}

.boardSearch_g .selectg2 .chk_box {
  margin-left: 10px;
}

.boardSearch_g .datepic {
  width: 160px !important;
}

.boardSearch_g .part {
  margin: 0 10px;
  vertical-align: middle;
  font-size: 16px;
}

.boardSearch_g.type {
  text-align: right;
}

.boardSearch_g.type select {
  width: 200px;
}

.boardSearch_g.curation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 50px 0 10px;
}

.boardSearch_g.curation .left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.headtxt + .boardSearch_g {
  margin-top: 74px;
}

.h1Tit_box + .boardSearch_g {
  margin-top: 20px;
}

/* title */
.hTit_g {
  position: relative;
}

.hTit_g .btng {
  position: absolute;
  top: 0;
  right: 0;
}

.tit_h3 {
  line-height: 44px;
  padding-left: 32px;
  margin: 20px 0;
  font-size: 30px;
  font-weight: 700;
  background: url("../images/icons/ico_arrow.svg") no-repeat 0 12px;
}

@media (max-width: 1400px) {
  .tit_h3 {
    line-height: 34px;
    margin-bottom: 12px;
    font-size: 20px;
    padding-left: 28px;
    background-size: 20px auto;
    background-position: 0 8px;
  }
}

@media (max-width: 767px) {
  .tit_h3 {
    line-height: 22px;
    padding-left: 22px;
    font-size: 16px;
    background-size: 16px auto;
    background-position: 0 4px;
    margin: 10px 0;
  }
}

/* button*/
.more_btn {
  text-align: center;
  background: #e9ebee;
  border: 1rem solid #e9ebee;
}

.more_btn button {
  width: 100%;
  height: 50px;
  font-size: 16px;
  -webkit-transition: all 0.1s;
  transition: all 0.1s;
}

@media (max-width: 767px) {
  .more_btn button {
    height: 38px;
    font-size: 14px;
  }
}

.more_btn button:after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 10px;
  background: url(../images/icons/ico_i_dropdown.png) no-repeat center/cover;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

@media (max-width: 767px) {
  .more_btn button:after {
    position: relative;
    top: -2px;
    width: 10px;
    height: 6px;
    margin-left: 4px;
  }
}

.more_btn button:hover {
  background-color: #fff;
}

.more_btn.close button:after {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

@media (max-width: 767px) {
  .more_btn.close button:after {
    position: relative;
    top: -2px;
    width: 10px;
    height: 6px;
    margin-left: 4px;
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
}
/* board */
.curatBook_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px 42px;
  padding-top: 30px;
  padding-bottom: 50px;
  margin-top: 20px;
  border-top: 1px solid #cacaca;
  border-bottom: 1px solid #a9a9a9;
}

@media (max-width: 767px) {
  .curatBook_list {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
@media (max-width: 480px) {
  .curatBook_list {
    grid-template-columns: repeat(1, 1fr);
  }
}
.curatBook_list .item {
  position: relative;
}

@media (max-width: 767px) {
  .curatBook_list .item {
    width: 100%;
  }
}
.curatBook_list .item a {
  display: block;
}

.curatBook_list .item a:hover .thum:before {
  opacity: 1;
}

.curatBook_list .item a:hover .dec {
  opacity: 1;
  top: 50%;
}

.curatBook_list .chk {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}

.curatBook_list .thum {
  position: relative;
}

.curatBook_list .thum:before {
  opacity: 0;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.curatBook_list .thum img {
  width: 100%;
}

.curatBook_list .thum img.single {
  width: 100%;
}

.curatBook_list .tit {
  margin-top: 14px;
  font-size: 18px;
  font-weight: 600;
}

@media (max-width: 767px) {
  .curatBook_list .tit {
    font-size: 14px;
  }
}
.curatBook_list .date {
  margin-top: 12px;
  font-size: 18px;
  color: #888;
}

@media (max-width: 767px) {
  .curatBook_list .date {
    margin-top: 4px;
    font-size: 12px;
  }
}
.curatBook_list .dec {
  opacity: 0;
  position: absolute;
  top: 55%;
  left: 0;
  right: 0;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media (max-width: 767px) {
  .curatBook_list .dec {
    font-size: 14px;
  }
}
.curatBook_view {
  margin-top: 80px;
}

@media (max-width: 767px) {
  .curatBook_view {
    margin-top: 0;
  }
}
.curatBook_view .mainimg {
  margin-bottom: 40px;
}

@media (max-width: 767px) {
  .curatBook_view .mainimg {
    margin-bottom: 25px;
  }
}

.curatBook_view .mainimg .thum {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.curatBook_view .mainimg .thum img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 1400px) {
  .curatBook_view .mainimg .thum img {
    width: 100%;
    height: auto;
  }
}

@media (max-width: 767px) {
  .curatBook_view .mainimg .thum img {
    width: 100%;
    height: auto;
  }
}

.curatBook_view .mainimg .tit {
  margin-top: 21px;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
}

.curatBook_view .mainimg .tit p {
  margin: 0;
  padding: 0;
  word-wrap: break-word;
  line-height: 1.5;
}

@media (max-width: 1400px) {
  .curatBook_view .mainimg .tit {
    font-size: 20px;
  }
  
  .curatBook_view .mainimg .tit p {
    line-height: 1.4;
  }
}

@media (max-width: 767px) {
  .curatBook_view .mainimg .tit {
    margin-top: 12px;
    font-size: 14px;
    padding: 0 10px;
  }
  
  .curatBook_view .mainimg .tit p {
    line-height: 1.4;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .curatBook_view .mainimg .tit {
    margin-top: 10px;
    font-size: 13px;
    padding: 0 8px;
  }
  
  .curatBook_view .mainimg .tit p {
    line-height: 1.3;
    font-size: 13px;
  }
}
.curatBook_view .hTit_g {
  margin-top: 65px;
}

@media (max-width: 767px) {
  .curatBook_view .hTit_g {
    margin-top: 30px;
  }
  
  .curatBook_view .hTit_g .btng {
    position: static;
    margin-top: 10px;
    text-align: left;
  }
}

.contList_sec {
  margin-bottom: 40px;
}

@media (max-width: 767px) {
  .contList_sec {
    margin-bottom: 30px;
  }
}

@media (max-width: 480px) {
  .contList_sec {
    margin-bottom: 25px;
  }
}

.curatBook_view .more_btn {
  position: relative;
  margin-top: -1px;
}

.contList {
  overflow: hidden;
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 200px));
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0 20px;
}

@media (max-width: 767px) {
  .contList {
    grid-template-columns: repeat(3, 1fr);
    gap: 0 15px;
  }
}
@media (max-width: 480px) {
  .contList {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 10px;
  }
}
.contList .item {
  position: relative;
  padding: 30px 0;
  width: 100%;
  min-width: 0;
}

@media (max-width: 767px) {
  .contList .item {
    padding: 20px 0;
  }
}

@media (max-width: 480px) {
  .contList .item {
    padding: 15px 0;
  }
}

.contList .item:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #dadada;
}

.contList .item .tit {
  height: 53px;
  line-height: 28px;
  margin-top: 15px;
  font-size: 20px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
}

@media (max-width: 767px) {
  .contList .item .tit {
    line-height: 20px;
    height: 40px;
    margin-top: 8px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .contList .item .tit {
    line-height: 18px;
    height: 36px;
    margin-top: 6px;
    font-size: 13px;
  }
}

.contList .item .date {
  margin-top: 8px;
  font-size: 14px;
  color: #666;
}

@media (max-width: 767px) {
  .contList .item .date {
    margin-top: 6px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .contList .item .date {
    margin-top: 4px;
    font-size: 11px;
  }
}

.contList .thum {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.contList .thum img {
  width: 100%;
  aspect-ratio: 200/298;
  -o-object-fit: cover;
  object-fit: cover;
  border: 1px solid #ccc;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (max-width: 767px) {
  .contList .thum img {
    border-width: 1px;
  }
}

@media (max-width: 480px) {
  .contList .thum img {
    border-width: 0.5px;
  }
}

.sub_slide_report {
  position: relative;
  overflow: hidden;
  padding: 0 60rem;
  background-color: #ebf5fd;
  border-radius: 10px;
}
.sub_slide_report .swiper-container {
  padding: 60rem 0;
}
.sub_slide_report .slide_report {
  display: block;
  position: relative;
  height: 420rem;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  background-size: cover;
  background-repeat: round;
}
.sub_slide_report .slide_report:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.sub_slide_report .slide_report:hover .report_info {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.sub_slide_report .slide_report:hover:before {
  visibility: visible;
  opacity: 1;
}
.sub_slide_report .slide_report:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(179.54deg, rgba(0, 0, 0, 0.260203) -0.95%, rgba(0, 0, 0, 0.7) -0.94%, rgba(0, 0, 0, 0.7) 34.69%, rgba(0, 0, 0, 0) 99.67%);
  z-index: 1;
  visibility: hidden;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 0;
}
.sub_slide_report .report_info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  position: relative;
  z-index: 2;
  padding: 30rem;
  height: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
}
.sub_slide_report .report_info .title {
  margin-top: 30rem;
  color: #fff;
  font-size: 24rem;
}
.sub_slide_report .report_info .txt {
  display: inline-block;
  padding: 5rem 0;
  font-size: 14rem;
  color: #fff;
  margin-bottom: 40rem;
}
.sub_slide_report .report_info .txt dl {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 5px 0;
}
.sub_slide_report .swiper-slide {
  width: 320rem;
  height: 420rem;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  -webkit-transition: 0.5s;
  transition: 0.5s;
  overflow: hidden;
  -webkit-box-shadow: 0rem 50rem 40rem -20rem rgba(0, 0, 0, 0.25);
          box-shadow: 0rem 50rem 40rem -20rem rgba(0, 0, 0, 0.25);
  z-index: -1;
}
.sub_slide_report .swiper-slide.swiper-slide-active, .sub_slide_report .swiper-slide.swiper-slide-duplicate-active {
  -webkit-transform: translateZ(0) scale(1) !important;
          transform: translateZ(0) scale(1) !important;
  z-index: 5;
}
.sub_slide_report .swiper-slide.swiper-slide-prev, .sub_slide_report .swiper-slide.swiper-slide-duplicate-prev {
  z-index: 1;
  -webkit-transform: translate3d(85px, 0, 0) scale(0.8) !important;
          transform: translate3d(85px, 0, 0) scale(0.8) !important;
}
.sub_slide_report .swiper-slide.swiper-slide-next, .sub_slide_report .swiper-slide.swiper-slide-duplicate-next {
  z-index: 1;
  -webkit-transform: translate3d(-85px, 0, 0) scale(0.8) !important;
          transform: translate3d(-85px, 0, 0) scale(0.8) !important;
}
.sub_slide_report .swiper-slide:nth-child(n+3) {
  -webkit-transform: translate3d(220px, 0, 0) scale(0.7);
          transform: translate3d(220px, 0, 0) scale(0.7);
}
.sub_slide_report .swiper-slide-next + .swiper-slide {
  -webkit-transform: translate3d(-220px, 0, 0) scale(0.7) !important;
          transform: translate3d(-220px, 0, 0) scale(0.7) !important;
}
.sub_slide_report .slide_report_next,
.sub_slide_report .slide_report_prev {
  background: #ffffff;
  border: 1rem solid #dadada;
  border-radius: 10rem;
  width: 50rem;
  height: 50rem;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: all 0.1s;
  transition: all 0.1s;
}
.sub_slide_report .slide_report_next i,
.sub_slide_report .slide_report_prev i {
  height: 24rem;
}
.sub_slide_report .slide_report_next:hover,
.sub_slide_report .slide_report_prev:hover {
  border: 1rem solid #222;
}
.sub_slide_report .slide_report_next {
  right: 20px;
}
.sub_slide_report .slide_report_next:hover .i_report_next:before {
  background: url("../images/icons/ico_i_report_next_on.png") no-repeat;
  width: 24px;
  height: 24px;
}
.sub_slide_report .slide_report_prev {
  left: 20px;
}
.sub_slide_report .slide_report_prev:hover .i_report_prev:before {
  background: url("../images/icons/ico_i_report_prev_on.png") no-repeat;
  width: 24px;
  height: 24px;
}

/* ========================================
   전문가 컬럼 (Expert Column) 스타일
   ======================================== */

/* 전문가 컬럼 목록 아이템 - 데스크탑 기준 반응형 */
.list-photo li {
  border-bottom: 1px solid #dadada;
  padding: 20px 20px;
  /* height: 250px; */ /* 데스크탑 기준 높이 250px */
  box-sizing: border-box;
  overflow: hidden;
}

/* 전문가 컬럼 아이템 그룹 레이아웃 */
.list-photo__item-group {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 40px;
  align-items: start;
  height: 100%; /* 부모 높이에 맞춤 */
  box-sizing: border-box;
}

/* 전문가 컬럼 아이템 그룹 반응형 레이아웃 */
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .list-photo__item-group {
    grid-template-columns: 1fr 180px; /* 250px -> 180px로 조정 */
    gap: 30px;
    height: 100%; /* 부모 높이에 맞춤 */
  }
}

@media screen and (max-width: 767px) {
  .list-photo__item-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%; /* 부모 높이에 맞춤 */
  }
}

@media screen and (max-width: 540px) {
  .list-photo__item-group {
    gap: 15px;
    height: 100%; /* 부모 높이에 맞춤 */
  }
}
/* 전문가 컬럼 제목 스타일 - 데스크탑 기준 반응형 */
.list-photo__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* 1줄 말줄임표는 이 방식이 더 안정적 */
  font-size: 20px; /* 데스크탑 기준 폰트 크기 */
  font-weight: bold;
  letter-spacing: -0.5px;
  color: #000;
  margin-bottom: 12px;
  line-height: 1.4; /* 줄 간격 조정 */
  max-height: 1.4em; /* 1줄 높이 제한 */
  word-break: break-word; /* 긴 단어 줄바꿈 */
  overflow-wrap: break-word; /* 긴 단어 처리 */
}

/* 대형 데스크탑 (1400px 이상) */
@media screen and (min-width: 1400px) {
  .list-photo__title {
    font-size: 22px; /* 대형 데스크탑 폰트 크기 */
    margin-bottom: 14px;
    max-height: 1.4em; /* 1줄 높이 제한 */
  }
}

/* 소형 데스크탑/대형 태블릿 (1024px ~ 1199px) */
@media screen and (min-width: 1024px) and (max-width: 1199px) {
  .list-photo__title {
    font-size: 18px; /* 소형 데스크탑 폰트 크기 */
    margin-bottom: 11px;
    max-height: 1.4em; /* 1줄 높이 제한 */
  }
}

/* 태블릿 (768px ~ 1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .list-photo__title {
    font-size: 17px; /* 태블릿 폰트 크기 */
    margin-bottom: 10px;
    max-height: 1.4em; /* 1줄 높이 제한 */
  }
}

/* 모바일 (481px ~ 767px) */
@media screen and (min-width: 481px) and (max-width: 767px) {
  .list-photo__title {
    font-size: 16px; /* 모바일 폰트 크기 */
    margin-bottom: 9px;
    line-height: 1.4;
    max-height: 1.4em; /* 1줄 높이 제한 */
  }
}

/* 소형 모바일 (320px ~ 480px) */
@media screen and (max-width: 480px) {
  .list-photo__title {
    font-size: 15px; /* 소형 모바일 폰트 크기 */
    margin-bottom: 8px;
    line-height: 1.4;
    max-height: 1.4em; /* 1줄 높이 제한 */
  }
}

/* 전문가 컬럼 텍스트 스타일 - 데스크탑 기준 반응형 */
.list-photo__txt {
  margin: 16px 0 18px;
  font-size: 16px; /* 데스크탑 기준 폰트 크기 */
  line-height: 1.5;
  letter-spacing: -0.4px;
  color: #333;
  word-break: break-word;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 4; /* 4줄로 제한 */
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1; /* 남은 공간을 차지하도록 설정 */
  min-height: 0; /* flex-grow가 제대로 작동하도록 설정 */
  max-height: 6em; /* 4줄 × 1.5 line-height = 6em */
  position: relative;
}

/* 대형 데스크탑 (1400px 이상) */
@media screen and (min-width: 1400px) {
  .list-photo__txt {
    font-size: 17px; /* 대형 데스크탑 폰트 크기 */
    margin: 18px 0 20px;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    max-height: 6.8em; /* 4줄 × 1.7 line-height */
  }
}

/* 소형 데스크탑/대형 태블릿 (1024px ~ 1199px) */
@media screen and (min-width: 1024px) and (max-width: 1199px) {
  .list-photo__txt {
    font-size: 15px; /* 소형 데스크탑 폰트 크기 */
    margin: 15px 0 17px;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    max-height: 6em; /* 4줄 × 1.5 line-height */
  }
}

/* 태블릿 (768px ~ 1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .list-photo__txt {
    font-size: 14px; /* 태블릿 폰트 크기 */
    margin: 10px 0 12px; /* 마진 조정 - 간격 줄임 */
    line-height: 1.4;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    max-height: 5.6em; /* 4줄 × 1.4 line-height */
  }
}

/* 모바일 (481px ~ 767px) */
@media screen and (min-width: 481px) and (max-width: 767px) {
  .list-photo__txt {
    font-size: 13px; /* 모바일 폰트 크기 */
    margin: 11px 0 13px;
    line-height: 1.3;
    -webkit-line-clamp: 3; /* 모바일에서는 3줄 */
    line-clamp: 3;
    max-height: 3.9em; /* 3줄 × 1.3 line-height */
  }
}

/* 소형 모바일 (320px ~ 480px) */
@media screen and (max-width: 480px) {
  .list-photo__txt {
    font-size: 12px; /* 소형 모바일 폰트 크기 */
    margin: 10px 0 12px;
    line-height: 1.2;
    -webkit-line-clamp: 3; /* 소형 모바일에서도 3줄 */
    line-clamp: 3;
    max-height: 3.6em; /* 3줄 × 1.2 line-height */
  }
}
/* 전문가 컬럼 작성자 정보 스타일 - 데스크탑 기준 반응형 */
.list-photo__name {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 18px; /* 데스크탑 기준 폰트 크기 */
  font-weight: bold;
  letter-spacing: -0.35px;
  color: #1c2a44;
  flex-shrink: 0; /* 축소되지 않도록 설정 */
  white-space: nowrap; /* 텍스트 줄바꿈 방지 */
  overflow: hidden; /* 넘치는 텍스트 숨김 */
  text-overflow: ellipsis; /* 넘치는 텍스트에 ... 표시 */
}

.small {
  font-size: 1.0em;
}

/* 대형 데스크탑 (1400px 이상) */
@media screen and (min-width: 1400px) {
  .list-photo__name {
    margin-top: 24px;
    font-size: 19px; /* 대형 데스크탑 폰트 크기 */
    gap: 10px;
  }
}

/* 소형 데스크탑/대형 태블릿 (1024px ~ 1199px) */
@media screen and (min-width: 1024px) and (max-width: 1199px) {
  .list-photo__name {
    margin-top: 20px;
    font-size: 16px; /* 소형 데스크탑 폰트 크기 */
    gap: 8px;
  }
}

/* 태블릿 (768px ~ 1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .list-photo__name {
    margin-top: 12px; /* 마진 조정 - 간격 줄임 */
    font-size: 15px; /* 태블릿 폰트 크기 */
    gap: 7px;
  }
}

/* 모바일 (481px ~ 767px) */
@media screen and (min-width: 481px) and (max-width: 767px) {
  .list-photo__name {
    margin-top: 16px;
    font-size: 14px; /* 모바일 폰트 크기 */
    gap: 6px;
  }
}

/* 소형 모바일 (320px ~ 480px) */
@media screen and (max-width: 480px) {
  .list-photo__name {
    margin-top: 14px;
    font-size: 13px; /* 소형 모바일 폰트 크기 */
    gap: 5px;
  }
}
/* 전문가 컬럼 작성자 아이콘 */
.list-photo__name::before {
  content: "";
  width: 22px;
  height: 19px;
  background: url(/images/icons/ico-book.svg) 0 center no-repeat;
  background-size: 22px 19px;
}

/* 전문가 컬럼 세부 정보 컨테이너 */
.list-photo__set {
  padding-right: 10px;
  box-sizing: border-box;
  background-color: inherit; /* 부모 요소의 배경색 상속 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 상단 정렬로 변경 */
  word-wrap: break-word; /* 긴 단어 줄바꿈 */
  overflow-wrap: break-word; /* 긴 단어 줄바꿈 (더 나은 브라우저 지원) */
  overflow: hidden; /* 넘치는 내용 숨김 */
}

/* list-photo__set 내부 요소들의 고정 높이 및 동일한 간격 설정 */
.list-photo__set .list-photo__title {
  height: 30px; /* 제목 영역 높이 조정 (60px -> 50px) */
  flex-shrink: 0; /* 축소 방지 */
  margin: 0 0 5px 0; /* 하단 간격 8px로 조정 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* 1줄 말줄임표 */
}

.list-photo__set .list-photo__txt {
  max-height: 6em; /* 4줄 × 1.5 line-height = 6em으로 정확히 제한 */
  height: auto; /* 자동 높이 */
  flex-shrink: 0; /* 축소 방지 */
  margin: 0 0 25px 0; /* 하단 간격 8px로 조정 */
  overflow: hidden !important; /* 넘치는 내용 확실히 숨김 */
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal; /* pre-line 대신 normal 사용 - line-clamp와 호환 */
  text-overflow: ellipsis; /* 텍스트 잘림 표시 */
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important; /* 최대 4줄까지 표시 - 확실히 적용 */
  -webkit-box-orient: vertical !important;
}

.list-photo__set .list-photo__name {
  height: 25px; /* 이름 영역 높이 조정 (30px -> 25px) */
  flex-shrink: 0; /* 축소 방지 */
  margin: 0 0 0 0; /* 하단 간격 8px로 조정 */
}

.list-photo__set .list-photo__date {
  height: 20px; /* 발행일 영역 고정 높이 */
  flex-shrink: 0; /* 축소 방지 */
  margin: 0 0 0 0; /* 하단 간격 8px로 조정 */
  font-size: 12px;
  color: #666;
  font-style: normal;
}

.list-photo__set .tag_box {
  height: 30px; /* 태그 영역 높이 조정 (50px -> 40px) */
  flex-shrink: 0; /* 축소 방지 */
  margin: 0; /* 마진 제거 (마지막 요소이므로) */
}

/* 빈 요소 숨김 처리 */
.list-photo__set .list-photo__title:empty,
.list-photo__set .list-photo__txt:empty,
.list-photo__set .list-photo__name:empty,
.list-photo__set .list-photo__date:empty,
.list-photo__set .tag_box:empty {
  display: none;
}

.tag_box .tag {
  display: inline-block;
  color: #183F7A;
  font-size: 14px;
  margin: 5px;
  font-weight: 500; /* 폰트 굵기 증가 */
}

/* 모바일에서 태그 폰트 크기 증가 */
@media screen and (max-width: 743px) {
  .tag_box .tag {
    font-size: 15px; /* 모바일에서 폰트 크기 증가 */
    margin: 6px; /* 마진 증가 */
  }
}

@media screen and (max-width: 540px) {
  .tag_box .tag {
    font-size: 14px; /* 중간 모바일에서 폰트 크기 */
    margin: 5px;
  }
}

@media screen and (max-width: 480px) {
  .tag_box .tag {
    font-size: 13px; /* 소형 모바일에서 폰트 크기 */
    margin: 4px;
  }
}

/* 모바일에서 날짜 폰트 크기 줄이기 */
@media screen and (max-width: 743px) {
  .list-photo__set .date {
    font-size: 11px !important; /* 모바일에서 날짜 폰트 크기 줄이기 */
    line-height: 1.2 !important;
    color: #888 !important;
  }
}

@media screen and (max-width: 540px) {
  .list-photo__set .date {
    font-size: 10px !important; /* 중간 모바일에서 날짜 폰트 크기 더 줄이기 */
    line-height: 1.2 !important;
  }
}

@media screen and (max-width: 480px) {
  .list-photo__set .date {
    font-size: 9px !important; /* 소형 모바일에서 날짜 폰트 크기 더 줄이기 */
    line-height: 1.2 !important;
  }
}

.tag_box .tag:hover {
  text-decoration: underline;
}

/* 공통 스크롤바 스타일 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.5);
}

/* 태그 박스 전용 스크롤바 (더 작게) */
.tag_box::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.tag_box::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 2px;
}

.tag_box::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 2px;
}

.tag_box::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.5);
}

/* 전문가 컬럼 날짜 스타일 */
.list-photo__set .list-photo__date {
  height: 20px; /* 발행일 영역 고정 높이 */
  flex-shrink: 0; /* 축소 방지 */
  margin: 0 0 10px 0; /* 하단 간격만 10px */
  font-size: 12px;
  color: #666;
  font-style: normal;
}

/* 전문가 컬럼 세부 정보 컨테이너 반응형 높이 조정 */
@media screen and (max-width: 1200px) {
  
  .list-photo__set .list-photo__title {
    height: 26px; /* 제목 영역 높이 조정 (30px -> 26px) */
    margin: 0 0 0 0; /* 하단 간격 제거 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* 1줄 말줄임표 */
  }
  
  .list-photo__set .list-photo__txt {
    max-height: 6em; /* 4줄 × 1.5 line-height = 6em으로 정확히 제한 */
    height: auto;
    margin: 0 0 5 0; /* 하단 간격 제거 */
    white-space: normal; /* pre-line 대신 normal 사용 - line-clamp와 호환 */
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important; /* 최대 4줄까지 표시 - 확실히 적용 */
    -webkit-box-orient: vertical !important;
  }
  
  .list-photo__set .list-photo__name {
    height: 22px; /* 이름 영역 높이 조정 (25px -> 22px) */
    margin: 0 0 0 0; /* 하단 간격 제거 */
  }
  
  .list-photo__set .list-photo__date {
    height: 18px; /* 발행일 영역 높이 조정 (20px -> 18px) */
    margin: 0 0 0 0; /* 하단 간격 제거 */
    font-size: 11px; /* 12px -> 11px */
  }
  
  .list-photo__set .tag_box {
    height: 26px; /* 태그 영역 높이 조정 (30px -> 26px) */
    margin: 0; /* 마진 제거 (마지막 요소이므로) */
  }
  
}

@media screen and (max-width: 960px) {  
  .list-photo__set .list-photo__title {
    height: 24px; /* 제목 영역 높이 조정 (30px -> 24px) */
    margin: 0 0 0 0; /* 하단 간격 제거 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* 1줄 말줄임표 */
  }
  
  .list-photo__set .list-photo__txt {
    height: auto;
    margin: 0 0 0 0; /* 하단 간격 제거 */
    white-space: normal; /* pre-line 대신 normal 사용 - line-clamp와 호환 */
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important; /* 최대 4줄까지 표시 - 확실히 적용 */
    -webkit-box-orient: vertical !important;
  }
  
  .list-photo__set .list-photo__name {
    height: 20px; /* 이름 영역 높이 조정 (25px -> 20px) */
    margin: 0 0 0 0; /* 하단 간격 제거 */
  }
  
  .list-photo__set .list-photo__date {
    height: 16px; /* 발행일 영역 높이 조정 (20px -> 16px) */
    margin: 0 0 0 0; /* 하단 간격 제거 */
    font-size: 10px; /* 12px -> 10px */
  }
  
  .list-photo__set .tag_box {
    height: 24px; /* 태그 영역 높이 조정 (30px -> 24px) */
    margin: 0; /* 마진 제거 (마지막 요소이므로) */
  }
  
}

@media screen and (max-width: 743px) {  
  .list-photo__set .list-photo__title {
    height: 30px; /* 제목 영역 높이 1줄로 조정 */
    margin: 0 0 15px 0; /* 하단 간격 추가 */
    font-size: 18px; /* 폰트 크기 대폭 증가 */
    line-height: 1.4; /* 줄 간격 조정 */
    font-weight: 600; /* 폰트 굵기 증가 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* 1줄 말줄임표 */
  }
  
  .list-photo__set .list-photo__txt {
    max-height: 6.4em; /* 4줄 × 1.6 line-height = 6.4em으로 정확히 제한 */
    height: auto;
    margin: 0 0 15px 0; /* 하단 간격 추가 */
    white-space: normal; /* pre-line 대신 normal 사용 - line-clamp와 호환 */
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important; /* 최대 4줄까지 표시 - 확실히 적용 */    
    -webkit-box-orient: vertical !important;
    font-size: 16px; /* 폰트 크기 대폭 증가 */
    line-height: 1.6; /* 줄 간격 조정 */
    color: #333; /* 텍스트 색상 진하게 */
  }
  
  .list-photo__set .list-photo__name {
    height: 55px; /* 이름 영역 높이 대폭 증가 */
    margin: 0 0 15px 0; /* 하단 간격 추가 */
    font-size: 16px; /* 폰트 크기 대폭 증가 */
    line-height: 1.4; /* 줄 간격 조정 */
    font-weight: 500; /* 폰트 굵기 증가 */
    color: #183F7A; /* 전문가 이름 색상 */
  }
  
  .list-photo__set .list-photo__date {
    height: 40px; /* 발행일 영역 높이 증가 */
    margin: 0 0 15px 0; /* 하단 간격 추가 */
    font-size: 14px; /* 폰트 크기 대폭 증가 */
    line-height: 1.4; /* 줄 간격 조정 */
    color: #666; /* 날짜 색상 */
  }
  
  .list-photo__set .tag_box {
    height: 50px; /* 태그 영역 높이 증가 */
    margin: 0; /* 마진 제거 (마지막 요소이므로) */
    overflow-y: auto; /* 스크롤 가능 */
  }
  
}

@media screen and (max-width: 540px) {  
  .list-photo__set .list-photo__title {
    height: 52px; /* 제목 영역 높이 대폭 증가 */
    margin: 0 0 12px 0; /* 하단 간격 추가 */
    font-size: 17px; /* 폰트 크기 대폭 증가 */
    line-height: 1.4; /* 줄 간격 조정 */
    font-weight: 600; /* 폰트 굵기 증가 */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 최대 3줄까지 표시 */
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .list-photo__set .list-photo__txt {
    max-height: 6.4em; /* 4줄 × 1.6 line-height = 6.4em으로 정확히 제한 */
    height: auto;
    margin: 0 0 12px 0; /* 하단 간격 추가 */
    white-space: normal; /* pre-line 대신 normal 사용 - line-clamp와 호환 */
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important; /* 최대 4줄까지 표시 - 확실히 적용 */
    line-clamp: 4;
    -webkit-box-orient: vertical !important;
    font-size: 15px; /* 폰트 크기 대폭 증가 */
    line-height: 1.6; /* 줄 간격 조정 */
    color: #333; /* 텍스트 색상 진하게 */
  }
  
  .list-photo__set .list-photo__name {
    height: 47px; /* 이름 영역 높이 대폭 증가 */
    margin: 0 0 12px 0; /* 하단 간격 추가 */
    font-size: 15px; /* 폰트 크기 대폭 증가 */
    line-height: 1.4; /* 줄 간격 조정 */
    font-weight: 500; /* 폰트 굵기 증가 */
    color: #183F7A; /* 전문가 이름 색상 */
  }
  
  .list-photo__set .list-photo__date {
    height: 32px; /* 발행일 영역 높이 증가 */
    margin: 0 0 12px 0; /* 하단 간격 추가 */
    font-size: 13px; /* 폰트 크기 대폭 증가 */
    line-height: 1.4; /* 줄 간격 조정 */
    color: #666; /* 날짜 색상 */
  }
  
  .list-photo__set .tag_box {
    height: 42px; /* 태그 영역 높이 증가 */
    margin: 0; /* 마진 제거 (마지막 요소이므로) */
    overflow-y: auto; /* 스크롤 가능 */
  }
  
}

/* 매우 작은 모바일 화면 (480px 이하) 최적화 */
@media screen and (max-width: 480px) {
   
  .list-photo__set .list-photo__title {
    height: 45px; /* 제목 영역 높이 대폭 증가 */
    margin: 0 0 10px 0; /* 하단 간격 조정 */
    font-size: 16px; /* 폰트 크기 대폭 증가 */
    line-height: 1.4; /* 줄 간격 조정 */
    font-weight: 600; /* 폰트 굵기 증가 */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 최대 3줄까지 표시 */
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .list-photo__set .list-photo__txt {
    max-height: 6.4em; /* 4줄 × 1.6 line-height = 6.4em으로 정확히 제한 */
    height: auto;
    margin: 0 0 10px 0; /* 하단 간격 조정 */
    white-space: normal; /* pre-line 대신 normal 사용 - line-clamp와 호환 */
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important; /* 최대 4줄까지 표시 - 확실히 적용 */
    line-clamp: 4;
    -webkit-box-orient: vertical !important;
    font-size: 14px; /* 폰트 크기 대폭 증가 */
    line-height: 1.6; /* 줄 간격 조정 */
    color: #333; /* 텍스트 색상 진하게 */
  }
  
  .list-photo__set .list-photo__name {
    height: 40px; /* 이름 영역 높이 대폭 증가 */
    margin: 0 0 10px 0; /* 하단 간격 조정 */
    font-size: 14px; /* 폰트 크기 대폭 증가 */
    line-height: 1.4; /* 줄 간격 조정 */
    font-weight: 500; /* 폰트 굵기 증가 */
    color: #183F7A; /* 전문가 이름 색상 */
  }
  
  .list-photo__set .list-photo__date {
    height: 28px; /* 발행일 영역 높이 증가 */
    margin: 0 0 10px 0; /* 하단 간격 조정 */
    font-size: 12px; /* 폰트 크기 대폭 증가 */
    line-height: 1.4; /* 줄 간격 조정 */
    color: #666; /* 날짜 색상 */
  }
  
  .list-photo__set .tag_box {
    height: 35px; /* 태그 영역 높이 증가 */
    margin: 0; /* 마진 제거 (마지막 요소이므로) */
    overflow-y: auto; /* 스크롤 가능 */
  }
  
}

/* 전문가 컬럼 이미지 영역 - 데스크탑 기준 반응형 */
.list-photo__image-area {
  position: relative;
  width: 200px; /* grid와 크기 일치 */
  min-height: 200px; /* 데스크탑 기준 높이 */
  overflow: hidden;
  border-radius: 8px;
  background-color: #f5f5f5; /* 이미지 로딩 전 배경색 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 미묘한 그림자 효과 */
}

/* 대형 데스크탑 (1400px 이상) */
@media screen and (min-width: 1400px) {
  .list-photo__image-area {
    width: 210px; /* 대형 데스크탑 너비 */
    height: 220px; /* 대형 데스크탑 높이 */
  }
}

/* 소형 데스크탑/대형 태블릿 (1024px ~ 1199px) */
@media screen and (min-width: 1024px) and (max-width: 1199px) {
  .list-photo__image-area {
    width: 180px; /* grid와 크기 일치 */
    height: 180px;
  }
}

/* 태블릿 (768px ~ 1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .list-photo__image-area {
    width: 180px; /* grid와 크기 일치 (768-1199px 범위 통일) */
    height: 160px;
  }
}

/* 모바일 (481px ~ 767px) */
@media screen and (min-width: 481px) and (max-width: 767px) {
  .list-photo__image-area {
    width: 130px; /* 모바일 너비 */
    height: 140px; /* 모바일 높이 */
    order: -1; /* 모바일에서 이미지를 위로 이동 */
    margin: 0 auto; /* 모바일에서 이미지 가운데 정렬 */
  }
}

/* 중간 모바일 (481px ~ 540px) */
@media screen and (min-width: 481px) and (max-width: 540px) {
  .list-photo__image-area {
    width: 120px; /* 중간 모바일 너비 */
    height: 130px; /* 중간 모바일 높이 */
    order: -1; /* 중간 모바일에서도 이미지를 위로 이동 */
    margin: 0 auto; /* 중간 모바일에서 이미지 가운데 정렬 */
  }
}

/* 소형 모바일 (320px ~ 480px) */
@media screen and (max-width: 480px) {
  .list-photo__image-area {
    width: 110px; /* 소형 모바일 너비 */
    height: 120px; /* 소형 모바일 높이 */
    order: -1; /* 소형 모바일에서도 이미지를 위로 이동 */
    margin: 0 auto; /* 소형 모바일에서 이미지 가운데 정렬 */
  }
}

/* 전문가 컬럼 이미지 스타일 */
.list-photo__image-area img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: block;
  object-fit: cover; /* 이미지 비율 유지하면서 컨테이너 꽉 채움 */
  object-position: center; /* 이미지 중앙 정렬 */
  transition: transform 0.3s ease; /* 부드러운 전환 효과 */
  background-color: #f5f5f5; /* 이미지 로딩 실패 시 배경색 */
  border-radius: 8px; /* 컨테이너와 동일한 모서리 둥글게 */
}

/* 전문가 컬럼 이미지 호버 효과 (데스크톱에서만) */
@media screen and (min-width: 768px) {
  .list-photo__image-area:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); /* 호버 시 그림자 강화 */
    transform: translateY(-2px); /* 살짝 위로 이동 */
    transition: all 0.3s ease;
  }
  
  .list-photo__image-area:hover img {
    transform: scale(1.05);
  }
}

/* ========================================
   전문가 프로필 (Expert Profile) 스타일
   ======================================== */

/* 전문가 프로필 컨테이너 - 데스크탑 기준 반응형 */
.profile-set {
  padding: 15px 30px;
  background: url(/images/icons/profile-bg.png) center center no-repeat;
  background-size: cover;
  border-radius: 15px;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin: 20rem 0;
}

/* 전문가 프로필 레이아웃 */
.profile {
  display: grid;
  grid-template-columns: 200px 1fr; /* 데스크탑 레이아웃 */
  gap: 30px;
  align-items: center; /* 이미지를 수직 가운데 정렬 */
  height: 100%;
  box-sizing: border-box;
}

/* 소형 데스크탑/대형 태블릿 (1024px ~ 1199px) */
@media screen and (min-width: 1024px) and (max-width: 1199px) {
  .profile {
    grid-template-columns: 180px 1fr; /* 이미지 크기 조정 */
    gap: 28px;
  }
}

/* 태블릿 (768px ~ 1023px) - 가로 레이아웃 유지하되 간격 조정 */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .profile {
    grid-template-columns: 160px 1fr; /* 이미지 크기 더 축소 */
    gap: 25px;
  }
}

/* 모바일 (767px 이하) - 세로 레이아웃으로 전환 */
@media screen and (max-width: 767px) {
  .profile {
    grid-template-columns: 1fr; /* 세로 레이아웃 */
    gap: 20px;
    text-align: center;
  }
}

@media screen and (max-width: 540px) {
  .profile {
    gap: 18px;
  }
}

@media screen and (max-width: 480px) {
  .profile {
    gap: 15px;
  }
}
/* 전문가 프로필 텍스트 영역 */
.profile__txt-set {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden; /* 내용이 영역을 벗어나지 않도록 */
}

/* 전문가 프로필 이미지 */
.profile__img {
  width: 200px; /* grid와 크기 일치 */
  height: 200px;
  overflow: hidden;
  border-radius: 15px;
  flex-shrink: 0;
  margin: 0 auto;
  position: relative;
}

.profile__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: top;
  max-width: 100%;
  max-height: 100%;
}

/* 전문가 프로필 이미지 반응형 스타일 */
/* 소형 데스크탑/대형 태블릿 (1024px ~ 1199px) */
@media screen and (min-width: 1024px) and (max-width: 1199px) {
  .profile__img {
    width: 180px; /* grid와 크기 일치 */
    height: 180px;
  }
}

/* 태블릿 (768px ~ 1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .profile__img {
    width: 160px; /* grid와 크기 일치 */
    height: 160px;
  }
}

/* 모바일 (481px ~ 767px) */
@media screen and (min-width: 481px) and (max-width: 767px) {
  .profile__img {
    width: 130px;
    height: 130px;
  }
}

/* 소형 모바일 (320px ~ 480px) */
@media screen and (max-width: 480px) {
  .profile__img {
    width: 100px;
    height: 100px;
  }
}
/* 전문가 프로필 이름 그룹 */
.profile__name-group {
  margin-bottom: 15px; /* 18px -> 15px로 조정 */
  padding: 15px 0; /* 18px -> 15px로 조정 */
  min-height: 50px; /* 고정 height -> min-height로 변경 */
  display: flex;
  align-items: flex-end;
  gap: 13px;
  color: #fff;
  line-height: 1.4; /* line-height 1 -> 1.4로 증가 */
  border-bottom: 1px solid #8ac3cb;
  word-break: break-word;
  box-sizing: border-box;
}

/* 전문가 프로필 이름 그룹 반응형 스타일 */
/* 소형 데스크탑/태블릿 (1024px 이하) - 태블릿 제외 */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .profile__name-group {
    flex-direction: row; /* 태블릿에서 가로 배치 유지 */
    align-items: flex-end; /* 하단 정렬 */
    padding: 12px 0;
    margin-bottom: 12px;
    min-height: 45px;
    gap: 10px; /* 이름과 직함 사이 간격 */
  }
}

/* 모바일 (767px 이하) - 중앙 정렬 */
@media screen and (max-width: 767px) {
  .profile__name-group {
    text-align: center;
    align-items: center;
    min-height: 55px; /* 모바일에서 여유 확보 */
  }
}

/* 소형 모바일 (540px 이하) */
@media screen and (max-width: 540px) {
  .profile__name-group {
    padding: 10px 0;
    margin-bottom: 10px;
    min-height: 60px; /* 소형 모바일에서 충분한 여유 */
  }
}
/* 전문가 프로필 이름 - 데스크탑 기준 반응형 */
.profile__name {
  font-size: 24px; /* 데스크탑 기준 폰트 크기 */
  font-weight: bold;
  letter-spacing: -0.75px;
  line-height: 1.4; /* 줄간격 추가 */
  text-align: left;
  word-break: keep-all;
  overflow-wrap: break-word;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 대형 데스크탑 (1400px 이상) */
@media screen and (min-width: 1400px) {
  .profile__name {
    font-size: 26px; /* 대형 데스크탑 폰트 크기 */
  }
}

/* 소형 데스크탑/대형 태블릿 (1024px ~ 1199px) */
@media screen and (min-width: 1024px) and (max-width: 1199px) {
  .profile__name {
    font-size: 22px; /* 소형 데스크탑 폰트 크기 */
  }
}

/* 태블릿 (768px ~ 1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .profile__name {
    font-size: 20px; /* 태블릿 폰트 크기 */
  }
}

/* 모바일 (481px ~ 767px) */
@media screen and (min-width: 481px) and (max-width: 767px) {
  .profile__name {
    font-size: 18px; /* 모바일 폰트 크기 */
    text-align: center;
  }
}

/* 소형 모바일 (320px ~ 480px) */
@media screen and (max-width: 480px) {
  .profile__name {
    font-size: 16px; /* 소형 모바일 폰트 크기 */
    text-align: center;
  }
}
/* 전문가 프로필 직책/소속 - 데스크탑 기준 반응형 */
.profile__deco {
  font-size: 20px; /* 데스크탑 기준 폰트 크기 */
  font-weight: bold;
  letter-spacing: -0.5px;
  line-height: 1.4; /* 줄간격 추가 */
  text-align: left;
  word-break: keep-all;
  overflow-wrap: break-word;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 대형 데스크탑 (1400px 이상) */
@media screen and (min-width: 1400px) {
  .profile__deco {
    font-size: 22px; /* 대형 데스크탑 폰트 크기 */
  }
}

/* 소형 데스크탑/대형 태블릿 (1024px ~ 1199px) */
@media screen and (min-width: 1024px) and (max-width: 1199px) {
  .profile__deco {
    font-size: 19px; /* 소형 데스크탑 폰트 크기 */
  }
}

/* 태블릿 (768px ~ 1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .profile__deco {
    font-size: 17px; /* 태블릿 폰트 크기 */
  }
}

/* 모바일 (481px ~ 767px) */
@media screen and (min-width: 481px) and (max-width: 767px) {
  .profile__deco {
    font-size: 15px; /* 모바일 폰트 크기 */
    text-align: center;
  }
}

/* 소형 모바일 (320px ~ 480px) */
@media screen and (max-width: 480px) {
  .profile__deco {
    font-size: 14px; /* 소형 모바일 폰트 크기 */
    text-align: center;
  }
}
/* 전문가 프로필 이력/경력 */
.profile__history {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  max-height: 160px; /* 전체 영역 높이 제한 */
  width: 100%; /* 450px -> 100%로 변경 (반응형 대응) */
  max-width: 450px; /* 최대 너비 제한 */
  overflow-y: auto;
  line-height: 1.5; /* 1.3 -> 1.5로 증가 */
  word-break: break-word;
  overflow-wrap: break-word;
  padding-right: 10px;
  box-sizing: border-box;
}

/* profile__history 전용 스크롤바 (밝은 배경용) */
.profile__history::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
}

.profile__history::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
}

.profile__history::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* 스크롤 안내 메시지 */
.history-scroll-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.history-scroll-notice .scroll-icon {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  display: inline-block;
}

.history-scroll-notice span {
  font-weight: 500;
  letter-spacing: -0.3px;
}

/* 스크롤 인디케이터 */
.history-scroll-indicator {
  position: relative;
  margin-top: 8px;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.scroll-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 30%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.6));
  border-radius: 2px;
  animation: scrollIndicator 2s ease-in-out infinite;
}

@keyframes scrollIndicator {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(0%); }
  100% { transform: translateX(100%); }
}

/* 반응형 스크롤 안내 */
@media screen and (max-width: 960px) {
  .history-scroll-notice {
    font-size: 12px;
    padding: 6px 10px;
    margin-bottom: 10px;
  }
  
  .history-scroll-notice .scroll-icon {
    font-size: 12px;
  }
}

@media screen and (max-width: 540px) {
  .history-scroll-notice {
    font-size: 11px;
    padding: 5px 8px;
    margin-bottom: 8px;
  }
  
  .history-scroll-notice .scroll-icon {
    font-size: 11px;
  }
  
  .history-scroll-indicator {
    height: 3px;
  }
}
/* 전문가 프로필 이력/경력 반응형 레이아웃 */
/* 소형 데스크탑 이하 (1200px 이하) - 1단 레이아웃 */
@media screen and (max-width: 1200px) {
  .profile__history {
    grid-template-columns: 1fr;
    gap: 15px;
    max-height: 130px; /* 160px -> 130px로 조정 */
  }
}

/* 소형 데스크탑/태블릿 (960px 이하) */
@media screen and (max-width: 960px) {
  .profile__history {
    gap: 12px;
    max-height: 110px; /* 추가 높이 조정 */
  }
}

/* 태블릿 (768px ~ 1023px) - 명시적 정의 */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .profile__history {
    max-width: 100%; /* 최대 너비 제한 없앰 */
    max-height: 120px;
  }
}

/* 모바일 (540px 이하) */
@media screen and (max-width: 540px) {
  .profile__history {
    gap: 10px;
    max-height: 90px; /* 추가 높이 조정 */
  }
}

.list-bu {
  color: #fff;
}
.list-bu li {
  position: relative;
  padding-left: 13px;
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 0px;
  font-size: 18px; /* 16px -> 18px로 증가 */
  line-height: 1.4; /* 1.2 -> 1.4로 증가 (가독성 향상) */
  word-break: keep-all;
  overflow-wrap: break-word;
}
/* 소형 데스크탑/대형 태블릿 (1024px ~ 1199px) */
@media screen and (min-width: 1024px) and (max-width: 1199px) {
  .list-bu li {
    font-size: 17px;
    line-height: 1.4;
  }
}

/* 태블릿 (768px ~ 1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .list-bu li {
    font-size: 16px;
    line-height: 1.4;
  }
}

/* 모바일 (481px ~ 767px) */
@media screen and (min-width: 481px) and (max-width: 767px) {
  .list-bu li {
    grid-template-columns: 1fr;
    font-size: 15px;
    line-height: 1.4;
  }
}

/* 소형 모바일 (320px ~ 480px) */
@media screen and (max-width: 480px) {
  .list-bu li {
    grid-template-columns: 1fr;
    font-size: 14px;
    line-height: 1.3;
  }
}
.list-bu li ~ li {
  margin-top: 10px;
}
.list-bu li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(0.5em + 1px);
  width: 3px;
  height: 3px;
  background: url(/images/icons/ilist-bu-dot.svg);
}
.list-bu .txt {
  letter-spacing: -0.4px;
  text-align: left;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 전문가 이력 그리드 레이아웃 */
.expert-history-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  width: 100%;
  max-width: 1100px;
  min-height: 140px;
}

.expert-history-column {
  width: 100%;
}

.expert-history-column .list-bu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.expert-history-column .list-bu li {
  display: flex;
  align-items: flex-start;
}

.expert-history-column .list-bu li:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.expert-history-column .time {
  width: 6px;
  height: 6px;
  margin-top: 6px;
  flex-shrink: 0;
}

.expert-history-column .txt {
  flex: 1;
  font-size: 16px;
  line-height: 1.1;
  color: #fff;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

/* 반응형 디자인 */
/* 태블릿 (768px ~ 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .expert-history-grid {
    gap: 20px; /* 데스크탑과 동일하게 */
    min-height: 0; /* 최소 높이 제거 */
  }
  
  .expert-history-column .list-bu li {
    min-height: 0; /* 최소 높이 제거 */
    margin-bottom: 8px; /* 간격 줄임 */
    padding: 0; /* 패딩 제거 */
  }
  
  .expert-history-column .txt {
    font-size: 15px; /* 폰트 크기 조정 */
    line-height: 1.4; /* 줄간격 데스크탑과 유사하게 */
  }
}

@media screen and (max-width: 768px) {
  .expert-history-grid {
    grid-template-columns: 1fr;
    gap: 15px; /* 간격 증가 */
    min-height: 200px; /* 높이 대폭 증가 */
  }
  
  .expert-history-column .txt {
    font-size: 15px;
    line-height: 1.2; /* 줄간격 증가 */
  }
  
}

@media screen and (max-width: 480px) {
  .expert-history-grid {
    gap: 12px; /* 간격 증가 */
    min-height: 180px; /* 높이 증가 */
  }
  
  .expert-history-column .txt {
    font-size: 14px;
    line-height: 1.3; /* 줄간격 증가 */
  }
  
  .expert-history-column .list-bu li {
    min-height: 10px; /* 높이 증가 */
    margin-bottom: 8px; /* 간격 증가 */
    padding: 0px 0; /* 패딩 증가 */
  }
  
  .expert-history-column .time {
    width: 5px;
    height: 5px;
    margin-right: 8px; /* 간격 증가 */
    margin-top: 4px; /* 간격 증가 */
  }
}

/* 전문가 프로필 상세 정보 박스 */
.profile-box {
  margin: 10px 0 15px;
  padding: 20rem 20rem;
  display: grid;
  grid-template-columns: 1fr 290px;
  gap: 20px; /* 간격 추가 */
  border-top: 1px solid #dadada;
  border-bottom: 2px solid #1C2B43;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  align-items: start; /* 상단 정렬 */
  max-height: 250px;
}

@media screen and (max-width: 1200px) {
  .profile-box {
    grid-template-columns: 1fr 250px;
    gap: 30px; /* 간격 조정 */
    padding: 24px 18px;
    min-height: 200px; /* 높이 증가 */
    max-height: none; /* 최대 높이 제거 */
  }
}

@media screen and (max-width: 960px) {
  .profile-box {
    grid-template-columns: 1fr;
    gap: 25px; /* 간격 증가 */
    padding: 20px 16px;
    margin: 10px 0 0;
    max-height: none; /* 최대 높이 제거 */
  }
}

@media screen and (max-width: 768px) {
  .profile-box {
    gap: 20px; /* 간격 조정 */
    padding: 18px 14px;
    margin: 10px 0 0;
    max-height: none; /* 최대 높이 제거 */
  }
}

@media screen and (max-width: 480px) {
  .profile-box {
    gap: 15px; /* 간격 조정 */
    padding: 15px 12px;
    margin: 20px 0 0;
    max-height: none; /* 최대 높이 제거 */
  }
}
/* 전문가 프로필 상세 정보 텍스트 */
.profile-box__txt {
  font-size: 16px;
  line-height: 1.0;
  letter-spacing: -0.4px;
  text-align: left;
  color: #333;
  word-break: keep-all;
  overflow-wrap: break-word;
  max-width: 100%;
  max-height: 200px;
  overflow-y: auto;
  padding-right: inherit;
  box-sizing: border-box;
}
.profile-box__txt p ~ p {
  margin-top: 1em;
}

/* profile-box__txt는 공통 스크롤바 스타일 사용 */
@media screen and (max-width: 960px) {
  .profile-box__txt {
    font-size: 15px;
    line-height: 1.0;
  }
}
@media screen and (max-width: 743px) {
  .profile-box__txt {
    font-size: 14px;
    line-height: 1.0;
  }
}
@media screen and (max-width: 480px) {
  .profile-box__txt {
    font-size: 13px;
    line-height: 1.0;
  }
}
/* 전문가 프로필 상세 정보 이미지 */
.profile-box__img {
  border: solid 1px #cccccc;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 350px; /* 데스크탑 기준 너비 */
  height: 200px; /* 데스크탑 기준 높이 */
  overflow: hidden;
  border-radius: 8px;
  margin-left: auto;
  margin-right: 0;
  max-width: 100%;
  flex-shrink: 0;
}

.profile-box__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: 100%;
  max-height: 100%;
}

@media screen and (max-width: 1200px) {
  .profile-box__img {
    width: 250px;
    height: 140px;
    margin-left: auto;
    margin-right: 0;
  }
}

@media screen and (max-width: 960px) {
  .profile-box__img {
    width: 100%; /* 모바일에서는 전체 너비 사용 */
    max-width: 300px; /* 최대 너비 제한 */
    height: 150px; /* 높이 증가 */
    margin: 0 auto; /* 중앙 정렬 */
  }
}

@media screen and (max-width: 768px) {
  .profile-box__img {
    width: 100%;
    max-width: 280px;
    height: 140px;
    margin: 0 auto;
  }
}

@media screen and (max-width: 480px) {
  .profile-box__img {
    width: 100%;
    max-width: 250px;
    height: 120px;
    margin: 0 auto;
  }
}


.section-title {
  margin: 46px 0 20px 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.section-title__tit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: -0.6px;
}
.section-title__tit span {
  display: inline-block;
  font-size: 18rem;
  letter-spacing: -0.45px;
  color: #183f7a;
}
.section-title__more {
  display: block;
  width: 50px;
  height: 30px;
  background: url(/images/icons/btn-more@2x.png) center center no-repeat;
  background-size: 30px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.mt0 {
  margin-top: 0 !important;
}

.mt15 {
  margin-top: 15px !important;
}/*# sourceMappingURL=2025add.css.map */