@charset "utf-8";

@media screen and (min-width : 1025px) {

/* intro section */
    /* navigation bar */
    nav {
        max-width: 950px;
        height: 56px;
        display: flex;
        align-items: center; 
        justify-content: space-between; /* 양 끝에 배치 */
        margin: auto;
        font-family: sans-serif;
    }

    .mobile_menu {
      display: none;
    }

    .mobile_menu_2 {
      display: none;
    }

    /* 햄버거 메뉴 아이콘 */
    .hamburger {
        display: none; /* 데스크탑에서는 보이지 않도록 설정 */
        font-size: 30px;
        cursor: pointer;
        padding: 10px;
    }

    .nav_wrap {
        display: flex;
        font-weight: bold;
        justify-content: flex-end; 
      }
    
    .nav_menu {
      margin-left: 90px; /* 메뉴 간 여백 */
      position: relative; /* 하위 메뉴 위치 조정을 위해 relative 설정 */
    }
  
    /* 하위 메뉴 스타일 */     
  
    .information_sub_menu {
      display: none; /* 기본적으로 숨김 */
      position: absolute; /* 부모를 기준으로 위치 조정 */
      top: 100%; /* 부모 메뉴 아래에 위치 */
      padding: 10px 0;
      z-index: 10; /* 메뉴가 다른 요소 위로 올라오도록 설정 */
    }
  
  
    /* 하위 메뉴 항목 스타일 */
    .information_sub_menu .info_menu {
      padding: 8px;
      font-size: 14px;
    }
  
    /* 부모 메뉴에 hover 시 하위 메뉴 표시 */
    .nav_menu:hover .information_sub_menu {
      display: block; /* 하위 메뉴 표시 */
    }

    hr {
        background-color: rgb(183, 179, 179);
        border: none; /* 기본 경계선을 제거 */
        height: 1px;
        max-width: 950px;
        margin: auto;
      }

    .intro_section {
        max-width: 950px;
        display: block;
        margin: auto;
        margin-bottom: 80px;
    }

    /* 부모 요소로 이미지를 겹치기 위한 설정 */
    .main_img_container {
      position: relative; /* 자식 요소를 겹치기 위해 부모 요소를 relative로 설정 */
      margin-top: 15px;
      width: 100%;
      height: 80vh; /* 원하는 높이로 설정 */
      overflow: hidden; /* 이미지가 컨테이너를 벗어나지 않게 설정 */
    }
    
/* intro section 끝 */

/* story section */
    .story_section {
      max-width: 950px;
      display: block;
      margin: auto;
      margin-top: 30px;
    }

    .story_img_container {
        position: relative;
        width: 100%;
        height: 300px; /* 원하는 높이로 설정 */
        overflow: hidden; /* 이미지가 컨테이너를 벗어나지 않게 설정 */
    }
    
    /* slider: 이미지들이 한 줄로 정렬되도록 설정 */
    .slider {
      display: flex;
      width: max-content; /* 이미지 전체 길이에 맞춤 */
      animation: slideAnimation 25s linear forwards; /* 부드러운 슬라이딩 */
    }

    /* story_img: 개별 이미지 크기 설정 */
    .story_img {
      width: 400px;
      flex-shrink: 0;
    }

    /* 슬라이딩 애니메이션 */
    @keyframes slideAnimation {
      from {
        transform: translateX(0);
      }
      to {
        transform: translateX(-1080px);
      }
    }
    
    .story_content {
      margin-top: 100px;
    }

    .story_content_title {
      margin-top: 15px;
    }

    .story_content_text {
      margin-top: 28px;
      font-size: 16px;
      line-height: 1.6;
    }

    .story_content_image_1 {
      display: block;
      max-width: 950px;
      margin-top: 50px;
      margin-left: auto;
      margin-right: auto;
    }

    .story_content_sec {
      display: flex;
      justify-content:space-between;
      opacity: 0;  /* 처음에는 보이지 않게 */
      transform: translateX(-100px); /* 왼쪽에서 시작 */
      transition: opacity 1s ease-out, transform 1s ease-out; /* 부드럽게 이동 */
    }

    .story_content_sec.show {
      opacity: 1; 
      transform: translateX(0); /* 제자리로 이동 */
    }
  
    .story_content_text_sec {
      margin-top: 70px;
      max-width: 475px;
    }

    .story_content_sec_2 {
      display: flex;
      justify-content:space-between;
      opacity: 0;  /* 처음에는 보이지 않게 */
      transform: translateX(100px); /* 오른쪽에서 시작 */
      transition: opacity 1s ease-out, transform 1s ease-out; /* 부드럽게 이동 */
    }
  
    /* 화면에 보이면 활성화되는 클래스 */
    .story_content_sec_2.show {
      opacity: 1; 
      transform: translateX(0); /* 제자리로 이동 */
    }
  
    .text_sec_txt {
      margin-top: 15px;
    }

    .text_sec_txt_h {
      margin-top: 20px;
      font-weight: bold;
      color: #1343a8;
    }

    .story_content_img_container, .story_content_img_container_2 {
      position: relative;
      margin-top: 70px; 
      width: 420px;
      height: 300px; /* 원하는 높이로 설정 */
      overflow: hidden;
    }
  
    .story_content_img_slider {
      position: relative;
      width: 420px;
      height: 300px;
    }
  
    .story_content_img {
      position: absolute;
      width: 420px;
      height: 300px;
      opacity: 0; /* 기본적으로 보이지 않도록 설정 */
      transition: opacity 1s ease-in-out; /* 페이드 효과 */
    }

    .story_content_img_2 {
      width: 420px;
      height: 300px;
    }

    .story_content_sec_3 {
      opacity: 0; /* 처음에는 보이지 않도록 설정 */
      transform: translateX(-100px); /* 왼쪽에서 시작 */
      transition: opacity 1s ease-out, transform 1s ease-out;
    }

    .story_content_text_sec_3 {
      margin-top: 15px;
      font-family: GangwonEduAll;
    }

    .story_content_sec_3.show {
      opacity: 1;
      transform: translateX(0); /* 원래 위치로 이동 */
    }

    .story_content_img_3 {
      margin-top: 40px;
      margin-bottom: 40px;
      width: 620px;
      height: 100%;
      /* 이미지 아래로 갈수록 투명해지는 효과 */
      mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
      -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
    }

    /* brand section */
    .brand_section {
      max-width: 950px;
      margin: auto;
      margin-bottom: 80px;
      margin-top: 40px;
    }

    .brand_container {
        display: flex;
        margin-top: 40px;
    }
  
  
  /* 활성화된 이미지만 보이도록 */
    .brand_img_container {
    position: relative;
    width: 47%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    }

    .brand_img img {
    position: absolute; /* 모든 이미지를 겹치게 배치 */
    top: 0;
    left: 0;
    width: 100%;
    object-fit: cover; /* 이미지 비율 유지 */
    transition: opacity 1s ease-in-out; /* 부드러운 페이드 효과 */
    }

    /* 기본적으로 단일 이미지는 보이도록 설정 */
    .brand_img img:first-child {
      opacity: 1;
    }

    /* 여러 개의 이미지가 있을 경우, 기본적으로 숨김 */
    .brand_img img:not(:first-child) {
      opacity: 0;
    }

    .brand_img img.active {
    opacity: 1; /* 활성화된 이미지만 표시 */
    }

    .brand_contents_left {
    width: 53%;
    padding-right: 40px;
    }

    .brand_contents_right {
    width: 53%;
    padding-left: 40px;
    }

    /* 초기 상태: 투명하고 화면 바깥에 배치 */
    .brand_contents_left, 
    .brand_contents_right {
        opacity: 0;
        transition: opacity 1s ease-out, transform 1s ease-out;
    }

    /* 왼쪽에서 오른쪽으로 슬라이드 인 */
    .brand_contents_left {
        transform: translateX(-100px); /* 왼쪽에서 시작 */
    }

    /* 오른쪽에서 왼쪽으로 슬라이드 인 */
    .brand_contents_right {
        transform: translateX(100px); /* 오른쪽에서 시작 */
    }

    /* 화면에 나타날 때 애니메이션 실행 */
    .brand_contents_left.show, 
    .brand_contents_right.show {
        opacity: 1;
        transform: translateX(0);
    }

    .sec_contents {
    margin-top: 20px;
    }

    .sec_sub_contents {
    margin-top: 5px;
    }

    /* subdivision_map section */
    .subdivision_sub_menu {
      justify-content: center;
      display: flex;
      color: grey;
      gap: 10px;
    }
  
    .subdivision_map {
      display: block;
      width: 100%;
      margin-top: 34px;
    }

    .subdivision_section {
      max-width: 950px;
      margin: auto;
      margin-bottom: 80px;
      margin-top: 40px;
      text-align: center;
    }

    /* architecture_section */
    .architecture_section {
      text-align: center;
      width: 100%;
      margin-bottom: 80px;
      margin-top: 40px;
    }

    .architecture_section {
      text-align: center;
      width: 100%;
      margin-bottom: 80px;
      margin-top: 40px;
    }

    .type_menu_bar {
      display: flex;
      width: 50%;
      margin: 40px auto;
      justify-content: space-between;
      
    }

    .type_menu {
      display: inline-block; /* 각 요소를 네모 모양으로 유지 */
      padding: 5px 10px; /* 안쪽 여백을 추가해 보기 좋게 만듦 */
      border: 1px solid #000; /* 테두리를 검은색으로 설정 */
      text-align: center; /* 텍스트를 가운데 정렬 */
    }

    .type_detail {
      max-width: 1200px;
      margin: 70px auto;
      
    }

    .type_head {
      padding-left: 40px;
      display: flex;        
      justify-content: flex-start;
      gap: 20px;   
      margin-top: 70px;
    }

    .type_image_sec {
      display: flex;
      flex: 1 1 calc(33.33% - 10px); /* 3개 요소를 균등하게 배치 */
      gap: 10px;
      justify-content: space-between;
      margin-top: 50px;
      margin-bottom: 50px;
    }

    .type_image_block {
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    .type_image {
      width: 100%; /* 이미지가 부모 요소에 맞게 확장 */
      object-fit: cover; 
    }

    table {
      width: 100%;
      border-collapse: collapse;
      text-align: center;
    }
    th, td {
      border: 1px solid #ccc;
      padding: 10px;
    }
    th {
      background-color: #f4f4f4;
    }
    td {
      vertical-align: middle;
    }

}



@media screen and (max-width : 1024px) and (min-width : 600px) {
  /* navigation bar */
  nav {
    width: 90%;
    height: 56px;
    display: flex;
    align-items: center; 
    justify-content: space-between; /* 양 끝에 배치 */
    margin: auto;
  }


  /* 햄버거 메뉴 아이콘 */
  .hamburger {
      display: none; /* 태블릿에서는 보이지 않도록 설정 */
      font-size: 30px;
      cursor: pointer;
      padding: 10px;
  }

  .nav_wrap {
    display: flex;
    font-weight: bold;
    justify-content: flex-end; 
  }

  .nav_menu {
    margin-left: 45px; /* 메뉴 간 여백 */
    position: relative; /* 하위 메뉴 위치 조정을 위해 relative 설정 */
  }

  /* 하위 메뉴 스타일 */     

  .information_sub_menu {
    display: none; /* 기본적으로 숨김 */
    position: absolute; /* 부모를 기준으로 위치 조정 */
    top: 100%; /* 부모 메뉴 아래에 위치 */
    padding: 10px 0;
    z-index: 10; /* 메뉴가 다른 요소 위로 올라오도록 설정 */
  }


  /* 하위 메뉴 항목 스타일 */
  .information_sub_menu .info_menu {
    padding: 8px;
    font-size: 14px;
  }

  /* 부모 메뉴에 hover 시 하위 메뉴 표시 */
  .nav_menu:hover .information_sub_menu {
    display: block; /* 하위 메뉴 표시 */
  }

  .mobile_menu {
    display: none;
  }  

  .mobile_menu_2 {
    display: none;
  }

  hr {
    background-color: rgb(183, 179, 179);
    border: none; /* 기본 경계선을 제거 */
    height: 1px;
    width: 100%;
    margin: auto;
    margin-top: 10px;
  }

  /* intro sectin */
  .intro_section {
    width: 90%;
    display: block;
    margin: auto;
    margin-bottom: 80px;
  }

  /* 부모 요소로 이미지를 겹치기 위한 설정 */
  .main_img_container {
    position: relative; /* 자식 요소를 겹치기 위해 부모 요소를 relative로 설정 */
    margin-top: 15px;
    width: 100%;
    height: 75vh; /* 원하는 높이로 설정 */
    overflow: hidden; /* 이미지가 컨테이너를 벗어나지 않게 설정 */
  }
  
  /* story section */
  .story_section {
    max-width: 90%;
    display: block;
    margin: auto;
    margin-top: 30px;
  }

  .story_img_container {
    position: relative;
    width: 100%;
    height: 250px; /* 원하는 높이로 설정 */
    overflow: hidden; /* 이미지가 컨테이너를 벗어나지 않게 설정 */
  }

  /* slider: 이미지들이 한 줄로 정렬되도록 설정 */
  .slider {
    display: flex;
    width: max-content; /* 이미지 전체 길이에 맞춤 */
    animation: slideAnimation 25s linear forwards; /* 부드러운 슬라이딩 */
  }

  /* story_img: 개별 이미지 크기 설정 */
  .story_img {
    width: 300px;
    flex-shrink: 0;
  }

  /* 슬라이딩 애니메이션 */
  @keyframes slideAnimation {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-1000px);
    }
  }

  .story_content {
    margin-top: 100px;
  }

  .story_content_title {
    margin-top: 15px;
  }

  .story_content_text {
    margin-top: 28px;
    font-size: 16px;
    line-height: 1.6;
  }

  .story_content_image_1 {
    display: block;
    max-width: 100%;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
  }

  .story_content_sec {
    display: flex;
    justify-content:space-between;
    opacity: 0;  /* 처음에는 보이지 않게 */
    transform: translateX(-100px); /* 왼쪽에서 시작 */
    transition: opacity 1s ease-out, transform 1s ease-out; /* 부드럽게 이동 */
  }

  .story_content_sec.show {
    opacity: 1; 
    transform: translateX(0); /* 제자리로 이동 */
  }

  .story_content_text_sec {
    margin-top: 70px;
    max-width: 50%;
  }

  .story_content_sec_2 {
    display: flex;
    justify-content:space-between;
    opacity: 0;  /* 처음에는 보이지 않게 */
    transform: translateX(100px); /* 오른쪽에서 시작 */
    transition: opacity 1s ease-out, transform 1s ease-out; /* 부드럽게 이동 */
  }

  /* 화면에 보이면 활성화되는 클래스 */
  .story_content_sec_2.show {
    opacity: 1; 
    transform: translateX(0); /* 제자리로 이동 */
  }

  .text_sec_txt {
    margin-top: 15px;
  }

  .text_sec_txt_h {
    margin-top: 20px;
    font-weight: bold;
    color: #1343a8;
  }

  .story_content_img_container, .story_content_img_container_2 {
    position: relative;
    margin-top: 70px; 
    max-width: 47%;
    /* height: 300px; 원하는 높이로 설정 */
    overflow: hidden;
  }

  .story_content_img_slider {
    position: relative;
    width: 420px;
    height: 300px;
  }

  .story_content_img {
    position: absolute;
    opacity: 0; /* 기본적으로 보이지 않도록 설정 */
    transition: opacity 1s ease-in-out; /* 페이드 효과 */
  }

  .story_content_img,.story_content_img_2 {
    width: 100%;
    height: 100%;
  }

  .story_content_sec_3 {
    opacity: 0; /* 처음에는 보이지 않도록 설정 */
    transform: translateX(-100px); /* 왼쪽에서 시작 */
    transition: opacity 1s ease-out, transform 1s ease-out;
  }

  .story_content_text_sec_3 {
    margin-top: 15px;
    font-family: GangwonEduAll;
  }

  .story_content_sec_3.show {
    opacity: 1;
    transform: translateX(0); /* 원래 위치로 이동 */
  }

  .story_content_img_3 {
    margin-top: 40px;
    margin-bottom: 40px;
    width: 620px;
    height: 100%;
    /* 이미지 아래로 갈수록 투명해지는 효과 */
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
  }

  /* brand section */
  .brand_section {
    max-width: 90%;
    margin: auto;
    margin-bottom: 80px;
    margin-top: 40px;
  }

  .brand_container {
      display: flex;
      margin-top: 40px;
  }


/* 활성화된 이미지만 보이도록 */
  .brand_img_container {
  position: relative;
  width: 47%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  }

  .brand_img img {
  position: absolute; /* 모든 이미지를 겹치게 배치 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; 
  transition: opacity 1s ease-in-out; /* 부드러운 페이드 효과 */
  }

  /* 기본적으로 단일 이미지는 보이도록 설정 */
  .brand_img img:first-child {
    opacity: 1;
  }

  /* 여러 개의 이미지가 있을 경우, 기본적으로 숨김 */
  .brand_img img:not(:first-child) {
    opacity: 0;
  }

  .brand_img img.active {
  opacity: 1; /* 활성화된 이미지만 표시 */
  }

  .brand_contents_left {
  width: 53%;
  padding-right: 40px;
  }

  .brand_contents_right {
  width: 53%;
  padding-left: 40px;
  }

  /* 초기 상태: 투명하고 화면 바깥에 배치 */
  .brand_contents_left, 
  .brand_contents_right {
      opacity: 0;
      transition: opacity 1s ease-out, transform 1s ease-out;
  }

  /* 왼쪽에서 오른쪽으로 슬라이드 인 */
  .brand_contents_left {
      transform: translateX(-100px); /* 왼쪽에서 시작 */
  }

  /* 오른쪽에서 왼쪽으로 슬라이드 인 */
  .brand_contents_right {
      transform: translateX(100px); /* 오른쪽에서 시작 */
  }

  /* 화면에 나타날 때 애니메이션 실행 */
  .brand_contents_left.show, 
  .brand_contents_right.show {
      opacity: 1;
      transform: translateX(0);
  }

  .sec_contents {
  margin-top: 20px;
  }

  .sec_sub_contents {
  margin-top: 5px;
  }

  /* subdivision_map section */
  .subdivision_section {
    width: 90%;
    margin: auto;
    margin-bottom: 80px;
    margin-top: 40px;
    text-align: center;
  }

  /* architecture_section */
  .architecture_section {
    text-align: center;
    width: 100%;
    margin-bottom: 80px;
    margin-top: 40px;
  }

  /* inquiry_section */
  .inquiry_section {
    text-align: center;
    width: 100%;
    position: relative;
    margin-bottom: 80px;
    margin-top: 40px;
  }



}


@media screen and (max-width : 600px) {
  /* navigation bar */
   
  .nav_bar {
    max-width: 90%;
    height: 56px;
    display: flex;
    align-items: center; 
    justify-content: space-between; /* 양 끝에 배치 */
    margin: auto;
  }

.nav_logo {
  display: flex;
  align-items: center;
  margin-right: auto;
}

.menu_container {
    display: flex;
    align-items: center;
}

.hamburger {
    display: block;
    cursor: pointer;
    z-index: 100;
    margin-left: auto;
}


/* 기존 네비게이션 숨김 */
.nav_wrap {
  display: none;
}  

/* 네비게이션 메뉴 기본적으로 안보이게 */
.mobile_menu {
  display: none;
  margin: auto;
  max-width: 90%;
  flex-direction: row;  /* 가로 배열 */
  justify-content:space-between;
  gap: 15px;
  font-weight: bold;
  padding: 10px 0;
  transition: all 0.3s ease-in-out;
}



.mobile_menu_2 {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 2000;
  opacity: 0.7;
  margin-top: 10px;
  margin: auto;
  max-width: 90%;
  display: flex;
  flex-direction: row;  /* 가로 배열 */
  justify-content:space-between;
  font-weight: bold;
  padding: 10px 0;
}

/* 모바일 메뉴 활성화 시 */
.mobile_menu.show {
  display: flex;
}


/* 모바일 메뉴 스타일 */
.mobile_menu a, .mobile_menu .nav_btn {
  text-decoration: none;
  color: black;
  padding: 8px 12px;
}

/* 하위 메뉴 스타일 */     

.information_sub_menu {
  display: none; /* 기본적으로 숨김 */
  position: absolute; /* 부모를 기준으로 위치 조정 */
  padding: 5px;
  left: -60px;
  z-index: 10; /* 메뉴가 다른 요소 위로 올라오도록 설정 */
}

#mobileInformationMenu {
  position: relative; /* absolute 위치 기준 */
}

#mobileInformationMenu:hover .information_sub_menu {
    display: block !important; /* 강제 적용 */
}

  /* 단지정보 클릭 시 하위 메뉴 표시 */
  .mobile_submenu_show {
    display: block;
  }

  hr {
    background-color: rgb(183, 179, 179);
    border: none; /* 기본 경계선을 제거 */
    height: 1px;
    width: 100%;
    margin: auto;
    margin-top: 10px;
  }

  /* intro sectin */
  .intro_section {
    width: 90%;
    display: block;
    margin: auto;
    margin-bottom: 80px;
  }

  /* 부모 요소로 이미지를 겹치기 위한 설정 */
  .main_img_container {
    position: relative; /* 자식 요소를 겹치기 위해 부모 요소를 relative로 설정 */
    margin-top: 15px;
    width: 100%;
    height: 60vh; /* 원하는 높이로 설정 */
    overflow: hidden; /* 이미지가 컨테이너를 벗어나지 않게 설정 */
  }
  
  /* story section */
  .story_section {
    max-width: 90%;
    display: block;
    margin: auto;
    margin-top: 30px;
  }

  .story_img_container {
    position: relative;
    width: 100%;
    height: 250px; /* 원하는 높이로 설정 */
    overflow: hidden; /* 이미지가 컨테이너를 벗어나지 않게 설정 */
  }

  /* slider: 이미지들이 한 줄로 정렬되도록 설정 */
  .slider {
    display: flex;
    width: max-content; /* 이미지 전체 길이에 맞춤 */
    animation: slideAnimation 25s linear forwards; /* 부드러운 슬라이딩 */
  }

  /* story_img: 개별 이미지 크기 설정 */
  .story_img {
    width: 250px;
    flex-shrink: 0;
  }

  /* 슬라이딩 애니메이션 */
  @keyframes slideAnimation {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-1000px);
    }
  }

  hr {
    width: 100%;
    position: center;
  }
  .story_content {
    margin-top: 100px;
  }

  .story_content_title {
    margin-top: 15px;
  }

  .story_content_text {
    margin-top: 28px;
    font-size: 16px;
    line-height: 1.6;
  }

  .story_content_image_1 {
    display: block;
    max-width: 100%;
    height: 50vh;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
  }

  .story_content_sec {
    display: block;
    opacity: 0;  /* 처음에는 보이지 않게 */
    transform: translateX(-100px); /* 왼쪽에서 시작 */
    transition: opacity 1s ease-out, transform 1s ease-out; /* 부드럽게 이동 */
  }

  .story_content_sec.show {
    opacity: 1; 
    transform: translateX(0); /* 제자리로 이동 */
  }

  .story_content_text_sec {
    margin-top: 70px;
    max-width: 90%;
  }

  .story_content_sec_2 {
    display: block;
    opacity: 0;  /* 처음에는 보이지 않게 */
    transform: translateX(100px); /* 오른쪽에서 시작 */
    transition: opacity 1s ease-out, transform 1s ease-out; /* 부드럽게 이동 */
  }

  /* 화면에 보이면 활성화되는 클래스 */
  .story_content_sec_2.show {
    opacity: 1; 
    transform: translateX(0); /* 제자리로 이동 */
  }

  .text_sec_txt {
    margin-top: 15px;
  }

  .text_sec_txt_h {
    margin-top: 20px;
    font-weight: bold;
    color: #1343a8;
  }

  .story_content_img_container, .story_content_img_container_2 {
    position: relative;
    margin-top: 70px; 
    max-width: 90%;
    height: 300px; /* 원하는 높이로 설정 */
    overflow: hidden;
  }

  .story_content_img_slider {
    position: relative;
    width: 420px;
    height: 300px;
  }

  .story_content_img {
    position: absolute;
    opacity: 0; /* 기본적으로 보이지 않도록 설정 */
    transition: opacity 1s ease-in-out; /* 페이드 효과 */
  }

  .story_content_img,.story_content_img_2 {
    width: 100%;
    height: 300px;
  }

  .story_content_sec_3 {
    opacity: 0; /* 처음에는 보이지 않도록 설정 */
    transform: translateX(-100px); /* 왼쪽에서 시작 */
    transition: opacity 1s ease-out, transform 1s ease-out;
  }

  .story_content_text_sec_3 {
    margin-top: 15px;
    font-family: GangwonEduAll;
  }

  .story_content_sec_3.show {
    opacity: 1;
    transform: translateX(0); /* 원래 위치로 이동 */
  }

  .story_content_img_3 {
    margin-top: 40px;
    margin-bottom: 40px;
    width: 100%;
    height: 100%;
    /* 이미지 아래로 갈수록 투명해지는 효과 */
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
  }

  /* brand section */
  .brand_section {
    max-width: 90%;
    margin: auto;
    margin-bottom: 80px;
    margin-top: 40px;
  }

  .brand_container {
      display: block;
      width: 100%;
      margin-top: 40px;
  }


/* 활성화된 이미지만 보이도록 */
  .brand_img_container {
  position: relative;
  margin-top: 40px;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  }

  .brand_img img {
  position: absolute; /* 모든 이미지를 겹치게 배치 */
  top: 0;
  left: 0;
  width: 100%;
  object-fit: cover; /* 이미지 비율 유지 */
  transition: opacity 1s ease-in-out; /* 부드러운 페이드 효과 */
  }

  /* 기본적으로 단일 이미지는 보이도록 설정 */
  .brand_img img:first-child {
    opacity: 1;
  }

  /* 여러 개의 이미지가 있을 경우, 기본적으로 숨김 */
  .brand_img img:not(:first-child) {
    opacity: 0;
  }

  .brand_img img.active {
  opacity: 1; /* 활성화된 이미지만 표시 */
  }

  .brand_contents_right {
    width: 100%;
    margin-top: 20px;
  }

  .brand_contents_left {
    width: 100%;
    margin-top: 20px;
  }

  /* 초기 상태: 투명하고 화면 바깥에 배치 */
  .brand_contents_left, 
  .brand_contents_right {
      opacity: 0;
      transition: opacity 1s ease-out, transform 1s ease-out;
  }

  /* 왼쪽에서 오른쪽으로 슬라이드 인 */
  .brand_contents_left {
      transform: translateX(-100px); /* 왼쪽에서 시작 */
  }

  /* 오른쪽에서 왼쪽으로 슬라이드 인 */
  .brand_contents_right {
      transform: translateX(100px); /* 오른쪽에서 시작 */
  }

  /* 화면에 나타날 때 애니메이션 실행 */
  .brand_contents_left.show, 
  .brand_contents_right.show {
      opacity: 1;
      transform: translateX(0);
  }

  .sec_contents {
  margin-top: 20px;
  }

  .sec_sub_contents {
  margin-top: 5px;
  }

  /* subdivision_map section */
  .subdivision_section {
    width: 90%;
    margin: auto;
    margin-bottom: 80px;
    margin-top: 40px;
    text-align: center;
  }

  /* architecture_section */
  .architecture_section {
    text-align: center;
    width: 100%;
    margin-bottom: 80px;
    margin-top: 40px;
  }

  /* inquiry_section */
  .inquiry_section {
    text-align: center;
    width: 100%;
    position: relative;
    margin-bottom: 80px;
    margin-top: 40px;
  }
}