@charset "UTF-8";
.contents .titleWrap {
  margin-bottom: 40rem;
}
.contents .more-btn-wrap {
  width: 100%;
  text-align: center;
  margin-top: 60rem;
}
.contents .more-btn-wrap p {
  color: var(--edm-color-text-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contents .more-btn-wrap p i {
  margin-left: 4rem;
}
.contents .more-btn-wrap .shortcut {
  margin-top: 16rem;
}
.contents .more-btn-open {
  margin-top: 24rem;
}
.contents .more-btn-open .shortcut {
  font: var(--edm-f-h5);
  letter-spacing: var(--edm-f-h5-ls);
  font-weight: 400;
  line-height: 40rem;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-color: var(--edm-color-text-3);
  color: var(--edm-color-text-3);
}
.contents .more-btn-open .shortcut::before {
  content: "더보기";
}
.contents .open-wrap-area.show .more-btn-open .shortcut::before {
  content: "접기";
}
.contents .open-wrap-area.show .more-btn-open .shortcut svg {
  transform: rotate(180deg);
}

.why-abroad .reason-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24rem;
}
.why-abroad .card {
  background: #fff;
  border: 1px solid var(--edm-color-border-blue);
  border-radius: var(--edm-radius3);
  isolation: isolate;
  box-shadow: var(--edm-sd-blue-1);
  padding: 24rem;
  display: flex;
  gap: 12rem;
  align-items: flex-start;
  word-break: keep-all;
}
.why-abroad .card .icon {
  flex: 0 0 auto;
  width: 56rem;
  height: 56rem;
}
.why-abroad .card .text .tit {
  font: var(--edm-f-h5);
  letter-spacing: var(--edm-f-h5-ls);
  font-weight: 600;
  margin-bottom: 8rem;
}
.why-abroad .card .text .desc {
  font: var(--edm-f-body2);
  letter-spacing: var(--edm-f-body2-ls);
  font-weight: 400;
  color: var(--edm-color-text-2);
}

/************************************
	portfolio-example (전공·포트폴리오 클래스 공통 슬라이드)
************************************/
.portfolio-example, .recommended-schools {
  overflow: hidden;
  margin-bottom: -20rem;
}
.portfolio-example .slideWrap, .recommended-schools .slideWrap {
  padding-bottom: 20rem;
}
.portfolio-example .slideWrap .slide, .recommended-schools .slideWrap .slide {
  position: relative;
  overflow: visible;
}
.portfolio-example .slideWrap .slide::before, .recommended-schools .slideWrap .slide::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -100%;
  width: 100%;
  height: calc(100% + 40rem);
  background: linear-gradient(90deg, #fff 99%, transparent 100%);
  z-index: 3;
  touch-action: none;
  pointer-events: none;
}
.portfolio-example .slideWrap .slide::after, .recommended-schools .slideWrap .slide::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -100%;
  width: 100%;
  height: calc(100% + 40rem);
  background: linear-gradient(-90deg, #fff 80%, transparent 100%);
  z-index: 3;
  touch-action: none;
  pointer-events: none;
}
.portfolio-example .slideWrap .slide .swiper-slide, .recommended-schools .slideWrap .slide .swiper-slide {
  background: #fff;
  border: 1px solid var(--edm-color-border-blue);
  border-radius: var(--edm-radius4);
  isolation: isolate;
  box-shadow: var(--edm-sd-blue-1);
  overflow: hidden;
  height: auto !important;
}
.portfolio-example .slideWrap .slide .swiper-slide .pic, .recommended-schools .slideWrap .slide .swiper-slide .pic {
  height: auto;
  padding-top: 82.1%;
  position: relative;
}
.portfolio-example .slideWrap .slide .swiper-slide .pic img, .recommended-schools .slideWrap .slide .swiper-slide .pic img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.portfolio-example .slideWrap .slide .swiper-slide .textWrap .meta, .recommended-schools .slideWrap .slide .swiper-slide .textWrap .meta {
  display: flex;
  align-items: flex-end;
  padding: 12rem 16rem 0;
}
.portfolio-example .slideWrap .slide .swiper-slide .textWrap .meta .logo, .recommended-schools .slideWrap .slide .swiper-slide .textWrap .meta .logo {
  height: 42rem;
}
.portfolio-example .slideWrap .slide .swiper-slide .textWrap .meta .logo img, .recommended-schools .slideWrap .slide .swiper-slide .textWrap .meta .logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.portfolio-example .slideWrap .slide .swiper-slide .textWrap .meta .user, .recommended-schools .slideWrap .slide .swiper-slide .textWrap .meta .user {
  margin: 0 0 8rem auto;
  font: var(--edm-f-detail);
  letter-spacing: var(--edm-f-detail-ls);
  color: var(--edm-color-text-3);
  display: inline-flex;
  align-items: center;
}
.portfolio-example .slideWrap .slide .swiper-slide .textWrap .meta .user-icon, .recommended-schools .slideWrap .slide .swiper-slide .textWrap .meta .user-icon {
  width: 20rem;
  height: 20rem;
  margin-right: 8rem;
  background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/renewal/common/person-20.svg") center/contain no-repeat;
}
.portfolio-example .slideWrap .slide .swiper-slide .textWrap .text, .recommended-schools .slideWrap .slide .swiper-slide .textWrap .text {
  padding: 12rem 16rem 24rem;
}
.portfolio-example .slideWrap .slide .swiper-slide .textWrap .text .tit, .recommended-schools .slideWrap .slide .swiper-slide .textWrap .text .tit {
  font: var(--edm-f-h5);
  letter-spacing: var(--edm-f-h5-ls);
  margin-bottom: 4rem;
}
.portfolio-example .slideWrap .slide .swiper-slide .textWrap .text .desc, .recommended-schools .slideWrap .slide .swiper-slide .textWrap .text .desc {
  font: var(--edm-f-body2);
  letter-spacing: var(--edm-f-body2-ls);
  color: var(--edm-color-text-3);
  font-weight: 400;
}
.portfolio-example.recommended-schools:has(.swiper-pagination-lock) .titleWrap, .recommended-schools.recommended-schools:has(.swiper-pagination-lock) .titleWrap {
  margin-bottom: 40rem;
}
.portfolio-example.recommended-schools .titleWrap, .recommended-schools.recommended-schools .titleWrap {
  margin-bottom: 4rem;
}
.portfolio-example.recommended-schools .slide-navigation, .recommended-schools.recommended-schools .slide-navigation {
  justify-content: flex-end;
  width: 100%;
  margin-bottom: 28rem;
}
.portfolio-example.recommended-schools .slideWrap .slide .swiper-slide, .recommended-schools.recommended-schools .slideWrap .slide .swiper-slide {
  border-radius: var(--edm-radius3);
  box-shadow: var(--edm-sd-blue-1);
  padding: 24rem;
  font: var(--edm-f-body2);
  letter-spacing: var(--edm-f-body2-ls);
  font-weight: 400;
  color: var(--edm-color-text-2);
}
.portfolio-example.recommended-schools .slideWrap .slide .swiper-slide .portfolio-school-card__logo, .recommended-schools.recommended-schools .slideWrap .slide .swiper-slide .portfolio-school-card__logo {
  height: 90rem;
  width: 100%;
  margin-bottom: 8rem;
}
.portfolio-example.recommended-schools .slideWrap .slide .swiper-slide .portfolio-school-card__logo img, .recommended-schools.recommended-schools .slideWrap .slide .swiper-slide .portfolio-school-card__logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.portfolio-example.recommended-schools .slideWrap .slide .swiper-slide .portfolio-school-card__body, .recommended-schools.recommended-schools .slideWrap .slide .swiper-slide .portfolio-school-card__body {
  display: flex;
  flex-direction: column;
  gap: 24rem;
}
.portfolio-example.recommended-schools .slideWrap .slide .swiper-slide .portfolio-school-card__body .portfolio-school-card__name-en, .recommended-schools.recommended-schools .slideWrap .slide .swiper-slide .portfolio-school-card__body .portfolio-school-card__name-en {
  font: var(--edm-f-h5);
  letter-spacing: var(--edm-f-h5-ls);
  color: var(--edm-color-text-1);
  font-weight: 600;
  margin-bottom: 2rem;
}
.portfolio-example.recommended-schools .slideWrap .slide .swiper-slide .portfolio-school-card__body .portfolio-school-card__sections, .recommended-schools.recommended-schools .slideWrap .slide .swiper-slide .portfolio-school-card__body .portfolio-school-card__sections {
  display: flex;
  flex-direction: column;
  gap: 12rem;
}
.portfolio-example.recommended-schools .slideWrap .slide .swiper-slide .portfolio-school-card__body .portfolio-school-card__sections .portfolio-school-card__badge, .recommended-schools.recommended-schools .slideWrap .slide .swiper-slide .portfolio-school-card__body .portfolio-school-card__sections .portfolio-school-card__badge {
  font: var(--edm-f-detail);
  letter-spacing: var(--edm-f-detail-ls);
  color: var(--edm-brand-blue);
  font-weight: 600;
  padding: 0 4rem;
  border: 1px solid var(--edm-brand-blue);
  border-radius: var(--edm-radius1);
  height: 22rem;
  line-height: 22rem;
  margin-bottom: 4rem;
  display: inline-block;
}
.portfolio-example.lock .slide-navigation, .recommended-schools.lock .slide-navigation {
  display: none;
}

@media screen and (max-width: 991px) {
  .contents .titleWrap {
    margin-bottom: 24rem;
  }
  .contents .more-btn-wrap {
    margin-top: 40rem;
  }
  .contents .more-btn-wrap .shortcut {
    font: var(--edm-f-h5);
    letter-spacing: var(--edm-f-h5-ls);
    height: 40rem;
    line-height: 40rem;
    margin-top: 12rem;
    font-weight: 400;
  }
  .why-abroad .reason-list {
    grid-template-columns: 1fr;
    gap: 16rem;
  }
  .why-abroad .card {
    padding: 16rem;
  }
  .why-abroad .card .icon {
    width: 40rem;
    height: 40rem;
  }
  .portfolio-example, .recommended-schools {
    margin-bottom: 0;
  }
  .portfolio-example .slideWrap, .recommended-schools .slideWrap {
    padding-bottom: 16rem;
  }
  .portfolio-example .slideWrap .slide, .recommended-schools .slideWrap .slide {
    width: calc(100% + 16rem);
    padding-right: 16rem;
  }
  .portfolio-example .slideWrap .slide::after, .recommended-schools .slideWrap .slide::after {
    background: #fff;
  }
  .portfolio-example .slideWrap .slide .swiper-slide, .recommended-schools .slideWrap .slide .swiper-slide {
    border-radius: var(--edm-radius3);
  }
  .portfolio-example .slideWrap .slide .swiper-slide .pic, .recommended-schools .slideWrap .slide .swiper-slide .pic {
    padding-top: 75.7%;
  }
  .portfolio-example .slideWrap .slide .swiper-slide .textWrap .meta, .recommended-schools .slideWrap .slide .swiper-slide .textWrap .meta {
    padding: 16rem 16rem 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 8rem;
  }
  .portfolio-example .slideWrap .slide .swiper-slide .textWrap .meta .logo, .recommended-schools .slideWrap .slide .swiper-slide .textWrap .meta .logo {
    height: 44rem;
    margin: 0;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
  }
  .portfolio-example .slideWrap .slide .swiper-slide .textWrap .meta .user, .recommended-schools .slideWrap .slide .swiper-slide .textWrap .meta .user {
    margin: 0;
  }
  .portfolio-example .slideWrap .slide .swiper-slide .textWrap .meta .user-icon, .recommended-schools .slideWrap .slide .swiper-slide .textWrap .meta .user-icon {
    display: none;
  }
  .portfolio-example .slideWrap .slide .swiper-slide .textWrap .text, .recommended-schools .slideWrap .slide .swiper-slide .textWrap .text {
    padding: 8rem 16rem 16rem;
  }
  .portfolio-example .slideWrap .slide .swiper-slide .textWrap .text .tit, .recommended-schools .slideWrap .slide .swiper-slide .textWrap .text .tit {
    font: var(--edm-f-body1);
    letter-spacing: var(--edm-f-body1-ls);
  }
  .portfolio-example .slide-navigation, .recommended-schools .slide-navigation {
    margin-top: 0;
  }
  .portfolio-example.recommended-schools .max-width, .recommended-schools.recommended-schools .max-width {
    display: flex;
    flex-wrap: wrap;
  }
  .portfolio-example.recommended-schools .titleWrap, .recommended-schools.recommended-schools .titleWrap {
    order: 1;
    width: 100%;
    margin-bottom: 24rem;
  }
  .portfolio-example.recommended-schools .slideWrap, .recommended-schools.recommended-schools .slideWrap {
    order: 2;
    width: 100%;
  }
  .portfolio-example.recommended-schools .slideWrap .slide .swiper-slide, .recommended-schools.recommended-schools .slideWrap .slide .swiper-slide {
    padding: 16rem;
  }
  .portfolio-example.recommended-schools .slideWrap .slide .swiper-slide .portfolio-school-card, .recommended-schools.recommended-schools .slideWrap .slide .swiper-slide .portfolio-school-card {
    position: relative;
  }
  .portfolio-example.recommended-schools .slideWrap .slide .swiper-slide .portfolio-school-card .portfolio-school-card__logo, .recommended-schools.recommended-schools .slideWrap .slide .swiper-slide .portfolio-school-card .portfolio-school-card__logo {
    width: 70rem;
    height: 42rem;
    position: absolute;
    top: 0;
    left: 0;
  }
  .portfolio-example.recommended-schools .slideWrap .slide .swiper-slide .portfolio-school-card .portfolio-school-card__body, .recommended-schools.recommended-schools .slideWrap .slide .swiper-slide .portfolio-school-card .portfolio-school-card__body {
    gap: 16rem;
  }
  .portfolio-example.recommended-schools .slideWrap .slide .swiper-slide .portfolio-school-card .portfolio-school-card__body .portfolio-school-card__names, .recommended-schools.recommended-schools .slideWrap .slide .swiper-slide .portfolio-school-card .portfolio-school-card__body .portfolio-school-card__names {
    padding-left: 82rem;
  }
  .portfolio-example.recommended-schools .slideWrap .slide .swiper-slide .portfolio-school-card .portfolio-school-card__body .portfolio-school-card__names .portfolio-school-card__name-en, .recommended-schools.recommended-schools .slideWrap .slide .swiper-slide .portfolio-school-card .portfolio-school-card__body .portfolio-school-card__names .portfolio-school-card__name-en {
    font: var(--edm-f-h4);
    letter-spacing: var(--edm-f-h4-ls);
    font-weight: 600;
  }
  .portfolio-example.recommended-schools .slideWrap .slide .swiper-slide .portfolio-school-card .portfolio-school-card__body .portfolio-school-card__sections, .recommended-schools.recommended-schools .slideWrap .slide .swiper-slide .portfolio-school-card .portfolio-school-card__body .portfolio-school-card__sections {
    background-color: var(--edm-bg-neutral);
    padding: 12rem;
    border-radius: var(--edm-radius2);
  }
  .portfolio-example.recommended-schools .slideWrap .slide .swiper-slide .portfolio-school-card .portfolio-school-card__body .portfolio-school-card__sections .portfolio-school-card__section, .recommended-schools.recommended-schools .slideWrap .slide .swiper-slide .portfolio-school-card .portfolio-school-card__body .portfolio-school-card__sections .portfolio-school-card__section {
    display: flex;
    gap: 8rem;
  }
  .portfolio-example.recommended-schools .slideWrap .slide .swiper-slide .portfolio-school-card .portfolio-school-card__body .portfolio-school-card__sections .portfolio-school-card__section .portfolio-school-card__badge, .recommended-schools.recommended-schools .slideWrap .slide .swiper-slide .portfolio-school-card .portfolio-school-card__body .portfolio-school-card__sections .portfolio-school-card__section .portfolio-school-card__badge {
    font: 600 12rem/20rem Pretendard;
    letter-spacing: -0.12rem;
    height: 20rem;
    padding: 0;
    width: 50rem;
    text-align: center;
  }
  .portfolio-example.recommended-schools .slide-navigation, .recommended-schools.recommended-schools .slide-navigation {
    margin: 0 0 0 auto;
    order: 3;
    width: auto;
  }
}