:root{
      --primary:#0d4b8f;
      --primary-dark:#08386c;
      --secondary:#1f6ecb;
      --light:#f5f8fc;
      --light-blue:#eef5fd;
      --line:#d7e1ee;
      --text:#1f2937;
      --sub:#667085;
      --white:#fff;
      --shadow:0 10px 30px rgba(15, 40, 80, .08);
      --radius:20px;
      --container:1280px;
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:'Noto Sans KR', sans-serif;
      color:var(--text);
      background:#fff;
    }
    a{text-decoration:none;color:inherit}
    ul{list-style:none;padding:0;margin:0}
    .container-xxxl{
      max-width:var(--container);
      margin:0 auto;
      padding:0 20px;
    }

    /* topbar */
    .topbar{
      background:#f7f9fc;
      border-bottom:1px solid #e5edf6;
      font-size:14px;
    }
    
	
	
	
	.topbar-inner{
  min-height:42px;
  display:flex;
  justify-content:space-between; /* 핵심 */
  align-items:center;
}

/* 좌측 */
.topbar-left{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:#44556c;
}

.topbar-left i{
  font-size:14px;
  color:var(--primary);
}

/* 우측 */
.topbar-right{
  display:flex;
  align-items:center;
  gap:18px;
}

.topbar-right a{
  color:#44556c;
}

.topbar-right a:hover{
  color:var(--primary);
}




    /* header */
    .site-header{
      position:sticky;
      top:0;
      z-index:1000;
      background:#fff;
      box-shadow:0 2px 12px rgba(0,0,0,.03);
    }
    .header-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      min-height:88px;
      gap:24px;
    }
    .logo{
      display:flex;
      align-items:center;
      gap:12px;
      font-weight:800;
      font-size:24px;
      color:var(--primary-dark);
      flex-shrink:0;
    }
    .logo-mark{
      width:46px;
      height:46px;
      border-radius:14px;
      background:linear-gradient(135deg,var(--primary),var(--secondary));
      display:flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      font-size:22px;
      box-shadow:var(--shadow);
    }

    .gnb{
      display:flex;
      align-items:center;
      gap:38px;
      margin-left:auto;
    }
    .gnb-item{ position:relative; }
    .gnb-link{
      display:block;
      padding:32px 0;
      font-size:18px;
      font-weight:700;
      color:#1f2f46;
      white-space:nowrap;
    }
    .gnb-link:hover{ color:var(--primary); }

    .submenu{
      position:absolute;
      top:100%;
      left:50%;
      transform:translateX(-50%);
      min-width:220px;
      background:#fff;
      border:1px solid var(--line);
      border-radius:18px;
      box-shadow:0 18px 40px rgba(16, 41, 77, .14);
      padding:10px 0;
      opacity:0;
      visibility:hidden;
      transition:.22s ease;
      z-index:1000;
    }
    .gnb-item:hover .submenu{
      opacity:1;
      visibility:visible;
    }

    .submenu a {
		display: block;
		padding: 12px 18px;
		font-size: 15px;
		font-weight: 700; /* 글씨 굵게 */
		color: #425166;
	}

	.submenu a:hover {
		background: #f3f7fc;
		color: var(--primary);
		font-weight: 700;
	}

    .menu-toggle{
      display:none;
      width:46px;
      height:46px;
      border:none;
      border-radius:12px;
      background:#eef4fb;
      color:var(--primary-dark);
      font-size:22px;
      align-items:center;
      justify-content:center;
    }

    /* hero slider */





    .hero-slider-wrap{
      position:relative;
    }

    .hero-slider {
		position: relative;
		width: 100%;
		overflow: hidden;
	}

	.hero-slide {
		height: 420px;
		min-height: 0;
		display: flex !important;
		align-items: center;
		position: relative;
		color: #fff;

		/* 이미지 높이에 맞춰 자동 조절 */
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
	}
    .hero-slide::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(90deg, rgba(10,38,74,.74) 0%, rgba(10,38,74,.55) 40%, rgba(10,38,74,.25) 100%);
      z-index:1;
    }
    .hero-inner {
		position: relative;
		z-index: 2;
		width: 100%;
		padding: 40px 0;
	}


    .hero-content{
      max-width:720px;
    }
    .hero-sub{
      display:inline-block;
      padding:10px 16px;
      border-radius:999px;
      background:rgba(255,255,255,.14);
      border:1px solid rgba(255,255,255,.2);
      font-size:14px;
      font-weight:600;
      margin-bottom:18px;
    }
    .hero-content h1{
      font-size:54px;
      line-height:1.22;
      font-weight:800;
      margin:0 0 18px;
      word-break:keep-all;
    }
    .hero-content p{
      font-size:18px;
      line-height:1.8;
      color:rgba(255,255,255,.92);
      margin:0 0 28px;
    }
    .hero-btns{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
    }
    .btn-main{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:14px 22px;
      border-radius:999px;
      font-weight:700;
      border:1px solid transparent;
      transition:.2s ease;
    }
    .btn-main.primary{
      background:#fff;
      color:var(--primary-dark);
    }
    .btn-main.outline{
      color:#fff;
      border-color:rgba(255,255,255,.5);
      background:transparent;
    }
    .btn-main.outline:hover{
      background:rgba(255,255,255,.1);
    }

    .carousel-control-prev,
    .carousel-control-next{
      width:58px;
      height:58px;
      top:50%;
      transform:translateY(-50%);
      background:rgba(255,255,255,.18);
      border:1px solid rgba(255,255,255,.22);
      border-radius:50%;
      opacity:1;
      backdrop-filter:blur(4px);
    }
    .carousel-control-prev{ left:28px; }
    .carousel-control-next{ right:28px; }

    .carousel-indicators{
      margin-bottom:34px;
      gap:10px;
    }
    .carousel-indicators [data-bs-target]{
      width:12px;
      height:12px;
      border-radius:50%;
      border:none;
      margin:0;
      opacity:.6;
    }
    .carousel-indicators .active{
      opacity:1;
      transform:scale(1.15);
    }

    /* quick */
    .quick-wrap{
  margin-top:-54px;
  position:relative;
  z-index:20;
}

.quick-box{
  background:#fff;
  border-radius:28px;
  box-shadow:0 20px 45px rgba(15, 40, 80, .12);
  overflow:hidden;
}

.quick-grid{
  display:grid;
  grid-template-columns:repeat(8, 1fr);
}

.quick-item{
  padding:20px 10px;
  border-right:1px solid #edf2f8;
  text-align:center;
  transition:.2s ease;
  min-height:145px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.quick-item:last-child{
  border-right:none;
}

.quick-item:hover{
  background:#f8fbff;
}

.quick-icon{
  width:54px;
  height:54px;
  border-radius:16px;
  background:linear-gradient(135deg,#edf5ff,#dcecff);
  color:var(--primary);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 10px;
  font-size:22px;
}

.quick-item h3{
  font-size:15px;
  font-weight:800;
  margin:0 0 6px;
  color:#15385f;
  line-height:1.3;
  word-break:keep-all;
}

.quick-item p{
  margin:0;
  color:#627287;
  font-size:12px;
  line-height:1.45;
  word-break:keep-all;
}

    /* section */
    .section{ padding:40px 0; }
    .section-light{ background:var(--light); }
    .section-head{
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:20px;
      margin-bottom:28px;
      flex-wrap:wrap;
    }
    .section-title{
      margin:0;
      font-size:34px;
      font-weight:800;
      color:#16375c;
    }
    .section-desc{
      margin:8px 0 0;
      color:#6a7a90;
      font-size:16px;
    }
    .more-link{
      color:var(--primary);
      font-weight:700;
      white-space:nowrap;
    }

    /* content */
    .content-grid{
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:26px;
    }
    .card-box{
      background:#fff;
      border:1px solid #e7eef6;
      border-radius:24px;
      box-shadow:var(--shadow);
      overflow:hidden;
	  
    }
    .card-inner{ padding:28px; }

    
   
    .board-tabs{
	  display:flex;
	  gap:10px;
	  margin-bottom:22px;
	  flex-wrap:wrap;
	}

	.board-tabs button{
	  border:none;
	  background:#eef4fb;
	  color:#3e5470;
	  font-weight:700;
	  padding:10px 16px;
	  border-radius:999px;
	  transition:.2s ease;
	}

	.board-tabs button.active{
	  background:var(--primary);
	  color:#fff;
	}

	.board-tab-content .tab-pane{
	  display:none;
	}

	.board-tab-content .tab-pane.active{
	  display:block;
	}
		
	.tab-pane{
	  display:none;
	}

	.tab-pane.active{
	  display:block;
	}
	
	
	
	.board-head{
	  display:flex;
	  justify-content:space-between;
	  align-items:center;
	  margin-bottom:18px;
	  gap:12px;
	  flex-wrap:wrap;
	}

	/* 더보기 버튼 */
	.board-more{
	  font-size:14px;
	  font-weight:700;
	  color:var(--primary);
	  display:flex;
	  align-items:center;
	  gap:6px;
	  transition:.2s;
	}

	.board-more i{
	  font-size:13px;
	}

	.board-more:hover{
	  color:var(--primary-dark);
	  transform:translateX(2px);
	}




    .news-list li{ border-top:1px solid #eef2f7; }
    .news-list li:first-child{ border-top:none; }
    .news-list a{
      display:flex;
      gap:18px;
      justify-content:space-between;
      align-items:center;
      padding:16px 0;
    }
    .news-title{
      min-width:0;
      font-size:16px;
      color:#24364a;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .news-date{
      flex-shrink:0;
      color:#7b8aa0;
      font-size:14px;
    }

    .calendar-box{
      background:linear-gradient(180deg, #f7fbff 0%, #eef5fd 100%);
    }
    .month-head{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-bottom:18px;
    }
    .month-title{
      font-size:24px;
      font-weight:800;
      color:#17395f;
      margin:0;
    }
    .month-nav{ display:flex; gap:8px; }
    .month-btn{
      width:38px;
      height:38px;
      border:none;
      border-radius:10px;
      background:#fff;
      color:var(--primary);
      box-shadow:0 6px 16px rgba(0,0,0,.06);
    }

    .calendar{
      display:grid;
      grid-template-columns:repeat(7, 1fr);
      gap:8px;
      margin-bottom:20px;
    }
    .calendar .day-name,
    .calendar .day{
      text-align:center;
      border-radius:12px;
      padding:12px 0;
      font-size:14px;
    }
    .calendar .day-name{
      background:#dfeefe;
      color:#35506f;
      font-weight:700;
    }
    .calendar .day{
      background:#fff;
      min-height:52px;
      display:flex;
      align-items:center;
      justify-content:center;
      color:#23384f;
      border:1px solid #e5edf6;
    }
    .calendar .active{
      background:var(--primary);
      color:#fff;
      font-weight:800;
      border-color:var(--primary);
    }

    .edu-list{
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .edu-item{
      background:#fff;
      border-radius:16px;
      padding:16px 18px;
      border:1px solid #e7eef6;
    }
    .edu-badge{
      display:inline-block;
      font-size:12px;
      font-weight:700;
      color:var(--primary);
      background:#eaf3ff;
      padding:5px 10px;
      border-radius:999px;
      margin-bottom:8px;
    }
    .edu-item h4{
      font-size:16px;
      font-weight:800;
      margin:0 0 6px;
      color:#1d3552;
    }
    .edu-meta{
      font-size:14px;
      color:#6c7b90;
    }

    /* info cards */
    .info-grid{
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      gap:24px;
    }
    .info-card{
      background:#fff;
      border-radius:24px;
      border:1px solid #e6eef7;
      box-shadow:var(--shadow);
      padding:30px;
      height:100%;
    }
    .info-card .icon{
      width:62px;
      height:62px;
      border-radius:18px;
      background:#eef5fd;
      color:var(--primary);
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:28px;
      margin-bottom:18px;
    }
    .info-card h3{
      font-size:22px;
      font-weight:800;
      margin:0 0 12px;
      color:#17385d;
    }
    .info-card p{
      font-size:15px;
      line-height:1.75;
      color:#66788d;
      margin:0 0 18px;
    }
    .info-card a{
      color:var(--primary);
      font-weight:800;
    }

    /* footer */
    .footer{
      background:#0f2340;
      color:rgba(255,255,255,.82);
      padding:50px 0;
    }
    .footer-top{
      display:flex;
      justify-content:space-between;
      gap:30px;
      flex-wrap:wrap;
      padding-bottom:24px;
      border-bottom:1px solid rgba(255,255,255,.12);
    }
    .footer-logo{
      font-size:24px;
      font-weight:800;
      color:#fff;
      margin-bottom:12px;
    }
    .footer-links{
      display:flex;
      gap:18px;
      flex-wrap:wrap;
    }
    .footer-links a{ color:rgba(255,255,255,.85); }
    .footer-bottom{
      padding-top:22px;
      font-size:14px;
      color:rgba(255,255,255,.6);
      line-height:1.8;
    }

    /* responsive */
    @media (max-width: 1100px){
      .gnb{ gap:26px; }
      .gnb-link{ font-size:16px; }
      .hero-content h1{ font-size:44px; }
	  
	  .quick-grid{
		grid-template-columns:repeat(4, 1fr);
	  }
	  .quick-item{
		border-bottom:1px solid #edf2f8;
	  }
	  .quick-item:nth-child(4n){
		border-right:none;
	  }
	  .quick-item:nth-last-child(-n+4){
		border-bottom:none;
	  }
    }

    @media (max-width: 991.98px){
      .menu-toggle{ display:flex; }

      .gnb{
        display:none;
        position:absolute;
        top:100%;
        left:0;
        right:0;
        background:#fff;
        border-top:1px solid #e8eef6;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        padding:10px 20px 18px;
      }
      .gnb.active{ display:flex; }

      .gnb-item{ border-bottom:1px solid #eef2f7; }
      .gnb-link{ padding:16px 0; }

      .submenu{
        position:static;
        transform:none;
        opacity:1;
        visibility:visible;
        display:none;
        box-shadow:none;
        border:none;
        border-radius:0;
        padding:0 0 10px 12px;
        min-width:auto;
      }
      .gnb-item.open .submenu{ display:block; }

      .hero-slide{ min-height:520px; }
      .hero-inner{ padding:70px 0 110px; }
      .hero-content h1{ font-size:36px; }

      .content-grid,
      .info-grid{
        grid-template-columns:1fr;
      }

      .quick-grid{
        grid-template-columns:repeat(4, 1fr);
      }
      .quick-item:nth-child(4n){ border-right:1px solid #edf2f8; }
      .quick-item:nth-last-child(-n+4){ border-bottom:1px solid #edf2f8; }

      .quick-item:nth-child(2n){ border-right:none; }
      .quick-item:nth-last-child(-n+2){ border-bottom:none; }
    }

    @media (max-width: 767.98px){
      .topbar{ display:none; }
      .header-inner{ min-height:74px; }
      .logo{ font-size:20px; }
      .logo-mark{
        width:40px;
        height:40px;
        font-size:19px;
      }

      .hero-slide{ min-height:460px; }
      .hero-inner{ padding:60px 0 100px; }
      .hero-content h1{ font-size:30px; }
      .hero-content p{ font-size:16px; }

      .carousel-control-prev,
      .carousel-control-next{
        width:46px;
        height:46px;
      }
      .carousel-control-prev{ left:14px; }
      .carousel-control-next{ right:14px; }

      .section{ padding:30px 0; }
      .section-title{ font-size:28px; }

      .card-inner,
      .info-card{ padding:22px; }

      .quick-grid{
		grid-template-columns:repeat(3, 1fr);
	  }
	  .quick-item{
		min-height:140px;
		padding:18px 10px;
		border-right:1px solid #edf2f8;
		border-bottom:1px solid #edf2f8;
	  }
	  .quick-item:nth-child(2n){
		border-right:none;
	  }
	  .quick-item:nth-last-child(-n+2){
		border-bottom:none;
	  }

      .calendar{
        gap:6px;
      }
      .calendar .day-name,
      .calendar .day{
        font-size:13px;
        min-height:44px;
      }
    }

    @media (max-width: 480px){
      .hero-btns{
        flex-direction:column;
        align-items:flex-start;
      }
      .btn-main{
        width:100%;
        justify-content:center;
      }

      .quick-icon{
		width:48px;
		height:48px;
		font-size:20px;
	  }

	  .quick-item h3{
		font-size:14px;
	  }

	  .quick-item p{
		font-size:11px;
	  }
	}

/* 태블릿 */
@media (max-width: 991.98px) {
    .hero-slide {
        height: 380px;
        min-height: 0;
    }

    .hero-inner {
        padding: 30px 0;
    }
}

/* 모바일 */
@media (max-width: 767.98px) {
    .hero-slide {
        height: 320px;
        min-height: 0;
        background-position: center center;
    }

    .hero-inner {
        padding: 20px 0;
    }

    .hero-content h1 {
        font-size: 25px;
    }

    .hero-content p {
        font-size: 14px;
        line-height: 1.5;
    }
}


@media (max-width: 767.98px) {
    .hero-content {
        position: relative;
        top: -20px;
    }
}