@charset "UTF-8";


/*==== 인트로 2025.12 =====*/
body {min-width:30rem;}
.intro {display:flex; min-width:30rem; min-height:100vh;}
.intro-main {flex:1; background:url('/share/portal/img/intro/intro_bg.jpg') center/cover; padding:6rem 8rem 0 10rem;}
.intro-header {margin-bottom:5rem;}
.intro-header .logo {width:20rem; height:4rem; margin-bottom:5rem; background:url('/share/portal/img/new/layout/logo.svg') no-repeat left top /contain;filter:brightness(0) invert(1);}
.intro-header .slogan {display:flex; align-items:center; gap:2rem; color:var(--color-text100); font-family: 'Libre Baskerville';font-style: italic; font-size:5.5rem;}
.intro-header .slogan .icon {width:7rem; height:7rem; background:url('/share/portal/img/intro/shape_pinwheel_y.svg') center/cover;}

.intro-card-grid {display:grid; grid-template-columns:repeat(4, 1fr); gap:3.2rem; max-width:132rem; max-height:55.2rem;  overflow-y:auto; padding-right:2rem;}
.intro-card-grid::-webkit-scrollbar {width:8px;}
.intro-card-grid::-webkit-scrollbar-thumb {background:var(--color-primary01); border-radius:4px;}
.intro-card-grid::-webkit-scrollbar-track {background:#d3d3d3; border-radius:4px;}
.intro-card-grid .card {min-height:26rem;}
.intro-card-grid .card a {display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; height:100%; background:var(--color-text100); padding:3rem; transition:0.2s all ease-in-out;}
.intro-card-grid .card a:hover,
.intro-card-grid .card a:focus {transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,0.3);}
.intro-card-grid .card .badge {display:inline-block; padding:0.7rem 1.5rem 0.5rem; border-radius:var(--radiusPill); font-family:var(--font-family01); font-size:1.8rem; font-weight:300; color:var(--color-text100); background:var(--color-primary01); margin-bottom:1.5rem;}
.intro-card-grid .card .card-cont {flex:1;}
.intro-card-grid .card .card-cont .year {font-size:1.8rem; color:var(--color-text40); font-weight:500; margin-bottom:.5rem;}
.intro-card-grid .card .card-cont .tit {font-size:2.4rem; font-weight:700; color:var(--color-text20); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; line-height:1.4;}
.intro-card-grid .card .card-btn {display:inline-flex; align-items:center; justify-content:center; padding:0 2rem; height:4rem; border-radius:3px; font-family:var(--font-family01); font-size:1.6rem; font-weight:300; color:var(--color-text100); text-align:center; transition:0.2s all ease-in-out; background:var(--color-primary01);}
.intro-card-grid .card a:hover .card-btn,
.intro-card-grid .card a:focus .card-btn {color:var(--color-primary01); border:1px solid var(--color-primary01); background:var(--color-text100);}

.intro-card-grid .card.jungsi .badge,
.intro-card-grid .card.jungsi .card-btn {background:var(--color-primary03);}
.intro-card-grid .card.jungsi a:hover .card-btn,
.intro-card-grid .card.jungsi a:focus .card-btn {color:var(--color-primary03); border:1px solid var(--color-primary03); background:var(--color-text100);}
.intro-card-grid .card.transfer .badge,
.intro-card-grid .card.transfer .card-btn {background:var(--color-primary02);}
.intro-card-grid .card.transfer a:hover .card-btn,
.intro-card-grid .card.transfer a:focus .card-btn {color:var(--color-primary02); border:1px solid var(--color-primary02); background:var(--color-text100);}
.intro-card-grid .card.grad .badge,
.intro-card-grid .card.grad .card-btn {background:var(--color-point03);}
.intro-card-grid .card.grad a:hover .card-btn,
.intro-card-grid .card.grad a:focus .card-btn {color:var(--color-point03); border:1px solid var(--color-point03); background:var(--color-text100);}

.intro-sidebar {position:sticky; top:0; display:flex; flex-direction:column; align-items:center; width:42rem; height:100vh; background:#fff; padding:15rem 8rem 5rem;}
.intro-sidebar .emblem {width:14rem; height:14rem; border-radius:var(--radiusPill); margin-bottom:3rem;}
.intro-sidebar .emblem img {width:100%; height:100%; object-fit:contain;}
.intro-sidebar .link-list {width:100%; display:flex; flex-direction:column; margin-bottom:auto;}
.intro-sidebar .link-item {display:flex; justify-content:space-between; align-items:center; height:8rem; border-bottom:1px solid var(--color-border02); font-family:var(--font-family01); font-size:2rem; font-weight:600; color:var(--color-text20); transition:all 0.2s;}
.intro-sidebar .arrow {width:1.4rem; height:1.4rem; background:url('/share/portal/img/intro/intro_arr.svg') center/cover; transition:transform 0.2s;}
.intro-sidebar .link-item:hover .arrow,
.intro-sidebar .link-item:focus .arrow {transform:rotate(45deg);}

.intro-sidebar .link-item:first-child {color:var(--color-primary01); border-color:var(--color-primary01);}
.intro-sidebar .link-item:first-child .arrow {background:var(--color-primary01); -webkit-mask:url('/share/portal/img/intro/intro_arr.svg') center/cover; mask:url('/share/portal/img/intro/intro_arr.svg') center/cover;}

.intro-sidebar .contact-info {width:100%; font-size:1.6rem; color:var(--color-text30); line-height:1.5; font-weight:500;}
.intro-sidebar .contact-info p + p {margin-top:5px;}
.intro-sidebar .copyright {margin-top:1.5rem; font-size:1.5rem; color:var(--color-text76); font-weight:300; line-height:1.3;}

/* 수강신청 관련 버튼 추가 */
.intro-linkbanner {width:100%;display:flex; gap:2rem;margin-top:4rem;margin-bottom:6rem;}
.intro-linkbanner a {flex:1;display:flex;align-items:center;flex-wrap:wrap;gap:1.5rem;min-height:12rem;padding:3rem;background:var(--color-primary01);}
.intro-linkbanner .btxt {font-size: 2.4rem;font-weight: 700;color: var(--color-text20);color:#fff;}
.intro-linkbanner .linktxt {flex:none;margin-left:auto;display:flex;align-items:center;gap:1rem;color:#fff;}
.intro-linkbanner .linktxt:after {flex:none;flex:none;content:"";display:block;width:1.4rem;height:1rem;background:url(/share/portal/img/intro/linkbanner_arrow.svg) no-repeat center center /100% 100%;}
.intro-linkbanner a:before {flex:none;content:"";display:block;width:3.2rem;height:3.1rem;background:url(/share/portal/img/intro/linkbanner.svg) no-repeat center center /100% 100%;}
.intro-linkbanner a,
.intro-linkbanner .linktxt:after {transition: all .3s;}
.intro-linkbanner a:hover,
.intro-linkbanner a:focus-visible {transform:translateY(-4px);}
.intro-linkbanner a:hover .linktxt:after,
.intro-linkbanner a:focus-visible .linktxt:after {transform:translateX(3px);}

  @media (max-width: 1899px) {
    .intro-main {padding:6rem 6rem 0 8rem;}
    .intro-sidebar {width:38rem; padding:6rem 6rem 5rem;}
    .intro-sidebar .emblem {margin-bottom:2rem;}
  }
  @media (max-width: 1599px) {
    .intro-header .slogan {font-size:5rem;}
    .intro-card-grid {grid-template-columns:repeat(3, 1fr);}
  }
  @media (max-width: 1399px) {
    .intro-main {padding:6rem 4rem 0 6rem;}
    .intro-header {margin-bottom:4rem;}
    .intro-header .logo {margin-bottom:4rem;}
    .intro-header .slogan {font-size:4rem;}
    .intro-header .slogan .icon {width:5.6rem; height:5.6rem;}
    .intro-card-grid {gap:2rem; max-height:50rem;}
    .intro-card-grid .card {min-height:24rem;}
    .intro-card-grid .card .badge {font-size:1.7rem;}
    .intro-card-grid {grid-template-columns:repeat(2, 1fr);}
    .intro-card-grid .card .badge {font-size:1.7rem;}
    .intro-card-grid .card .card-cont .tit {font-size:2.2rem; -webkit-line-clamp:1;}
    .intro-sidebar {width:32rem; padding:6rem 4rem 4rem;}
    .intro-sidebar .emblem {width:11rem; height:11rem;}
    .intro-sidebar .link-item {height:7.5rem;}
  }
  @media (max-width: 1099px) {
    .intro {flex-direction:column;}
    .intro-main {padding:5rem 4rem 5rem 6rem;}
    .intro-header .logo {width:16rem; height:3.2rem; margin-bottom:3rem;}
    .intro-card-grid {grid-template-columns:repeat(auto-fill, minmax(24rem, 1fr));}
    .intro-sidebar {width:100%; height:auto; padding:4rem 5rem;}
    .intro-sidebar .link-list {margin-bottom:3rem;}
    .intro-linkbanner  {margin-bottom:0;}
  }
  @media (max-width: 768px) {
    .intro-main {padding:4rem 2rem;}
    .intro-header .slogan {font-size:3rem;}
    .intro-card-grid {max-height:100%; overflow-y:visible; grid-template-columns:1fr;padding-right:0;}
    .intro-card-grid .card {min-height:auto;}
    .intro-card-grid .card a {gap:2rem;}
    .intro-card-grid .card .card-cont .tit {font-size:2rem;}
    .intro-card-grid .card .card-cont .year {font-size:1.7rem;}
    .intro-sidebar {padding:4rem 2rem;}
    .intro-sidebar .link-item {height:6rem; font-size:1.8rem;}
    .intro-sidebar .arrow {width:1.2rem; height:1.2rem;}
    .intro-linkbanner {flex-wrap:wrap;}
    .intro-linkbanner a {flex:none;width:100%;min-height:12rem;}
  }
  @media (max-width: 599px) {
    .intro-main {padding:3rem 2rem;}
    .intro-header {margin-bottom:2.5rem;}
    .intro-header .logo {margin-bottom:1rem;}
    .intro-header .slogan {flex-direction:column; align-items:center; gap:1rem; font-size:2.8rem; text-align:center;}
    .intro-header .slogan .icon {width:4.4rem; height:4.4rem;}
    .intro-card-grid {padding-right:0;}
    .intro-card-grid .card a {padding:2rem;}
    .intro-card-grid .card .badge {font-size:1.6rem;}
    .intro-card-grid .card .card-cont .year {font-size:1.6rem;}
    .intro-card-grid .card .card-cont .tit {font-size:1.8rem;}
    .intro-card-grid .card .card-btn {height:auto; padding:.8rem 1.5rem; font-size:1.5rem;}
    .intro-sidebar {padding:3rem 2rem;}
    .intro-sidebar .emblem {width:8rem; height:8rem;}
    .intro-sidebar .link-item {min-height:5rem; height:auto; padding:1.5rem 0;}
    .intro-sidebar .contact-info {font-size:1.5rem;}
    .intro-sidebar .copyright {font-size:1.4rem; margin-top:1rem;}
    .intro-linkbanner a {padding:2rem;min-height:8rem;}
    .intro-linkbanner a:before {width:2.8rem;height:2.7rem;}
    .intro-linkbanner .btxt {font-size:1.8rem;}
    .intro-linkbanner .linktxt {font-size:1.4rem;gap:0.8rem;}
    .intro-linkbanner .linktxt:after {width:1.2rem;height:0.8rem;}
  }