:root{ --ql_bg:#0f2f62; --ql_btn:#123a79; --ql_btn_hover:#1a4ca0; --ql_w_folded:96px; --ql_w_open:270px; --ql_gap:10px;
    --elev-2: 0 8px 20px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
    --elev-3: 0 12px 28px rgba(0,0,0,.16), 0 6px 16px rgba(0,0,0,.08); }
  
.quick_link_wrap{ position:fixed; left:0; top:0; height:100%; width:var(--ql_w_folded); background:var(--ql_bg); z-index:1000; display:flex; flex-direction:column; align-items:center; box-shadow:4px 0 16px rgba(0,0,0,.15); transition:width .25s ease; }
.quick_link_wrap.is_open .quick_link_head{padding:15px;}
.quick_link_wrap .quick_link_head{ font-size:1.1rem; letter-spacing:.1em; color:#fff; margin-top:20px; user-select:none; position:relative; align-self: flex-start; padding:0; text-align: left; margin-left: 12px;}
.quick_link_wrap.is_open .quick_link_head span{vertical-align: bottom; display: inline-block;}
.quick_link_wrap:not(.is_open) .quick_link_head img { display: block; margin: 0 auto; }
.quick_link_wrap .quick_link_head span{display: block;}
.quick_link_nav{ margin-top:14px; width:100%; padding:0 15px;}
.quick_link_list{ display:grid; grid-template-columns: 1fr; grid-auto-rows:min-content; row-gap:var(--ql_gap); padding:0; }
.quick_link_wrap.is_open .quick_link_list{padding:10px 12px 14px;}
.quick_link_item_bottom{ margin-top:auto; }
.quick_link_btn{ display:flex; flex-direction:column; align-items:center; justify-content:center; width:72px; height:72px; margin:0 auto; border-radius:12px; text-align:center; color:#fff; background:var(--ql_btn); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 4px 10px rgba(0,0,0,.18); transition:transform .15s ease, background-color .2s ease, box-shadow .2s ease; }
.quick_link_btn:hover, .quick_link_btn:focus{ background:var(--ql_btn_hover); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 6px 16px rgba(0,0,0,.28); transform:translateY(-1px); }
.quick_link_btn:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.quick_link_txt{ margin-top:7px; font-size:12px; line-height:1; letter-spacing:-.02em; color:rgba(255,255,255,.92); }
.quick_link_wrap.is_open .quick_link_txt { margin-top: 20px; }
.quick_link_wrap .quick_img{width: 30px; height: 30px; object-fit: cover;}
.quick_link_wrap .quick_img img{width: 100%; height: 100%;}
.quick_link_wrap.is_open .quick_img img{}
.quick_link_divider{ width:100%; height:18px; opacity:.55; margin:6px 0 4px; background:radial-gradient(circle, rgba(255,255,255,.75) 0 2px, transparent 2px) center/6px 6px repeat-x; }
.quick_link_toggle{ position:absolute; right:-24px; top:50%; width:36px; height:36px; border-radius:10px; background:var(--ql_bg); color:#fff; box-shadow:0 4px 10px rgba(0,0,0,.2); }
.quick_link_toggle::before, .quick_link_toggle::after{ content:""; position:absolute; inset:0; margin:auto; width:10px; height:10px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg); }
.quick_link_wrap.is_open .quick_link_toggle::before, .quick_link_wrap.is_open .quick_link_toggle::after{ transform:rotate(135deg); }
.quick_link_wrap.is_open{ width:var(--ql_w_open); }
.quick_link_wrap.is_open .quick_link_list{ grid-template-columns: repeat(2, 1fr); column-gap:var(--ql_gap); }
.quick_link_wrap.is_open .quick_link_btn{ width:100%; height:125px; }

#mainContent{padding-left: 270px; }
.hero_slider{ max-width:1280px; margin:24px auto 32px; padding:0 24px; }
.hero_swiper{ position:relative; border-radius:30px; overflow:hidden; background:#fff; box-shadow:0 10px 24px rgba(0,0,0,.08); min-height:280px; height: 500px; }
.hero_swiper .swiper-slide{position:relative; height:100%; overflow: hidden;}
.hero_caption{ color:#fff; position: absolute; top:0; padding:80px}
.hero_caption::after{content: ''; display: block; width: 60px; height: 1px; margin-top: 40px; background-color: #fff;}
.hero_caption .sub_tit{color:#fff;}
.cap_tit{ display:block; font-size:44px; line-height:1.1; margin-bottom:12px; }
.cap_txt{ font-size:18px; opacity:.95; color:#fff;}
.sub_tag{position: absolute; top:50%; padding:0 80px;}
.sub_tag .tag_list{display: grid; grid-template-columns: repeat(2, 1fr);}
.sub_tag .tag_list li{color:#fff;}
.sub_tag .tag_list li:nth-of-type(4){margin-left: 35px;}
.hero_prev {position:absolute; right:55%; bottom:14px; transform:translateY(-50%);width:18px; height:33px; border-radius:50%; background: url(/ibuilder/template/theme_skin/theme128/images/main/icon_prev.png)no-repeat; z-index: 11;}
.hero_next{position:absolute; left:60%; bottom:14px; transform:translateY(-50%);width:18px; height:33px; border-radius:50%; background: url(/ibuilder/template/theme_skin/theme128/images/main/icon_next.png)no-repeat; z-index: 11;}

.main_zone{max-width:1280px; margin:85px auto; padding:0 24px; position: relative; overflow: visible;  isolation: isolate; }
.main_zone::before{ content: ""; position: absolute; top: -80px; left: 50%; width: calc(100vw - 150px); height: clamp(360px, 42vw, 640px); margin-left: -50vw; background-image: url(/ibuilder/template/theme_skin/theme128/images/main/main_bg01.png); background-repeat: no-repeat; background-position: right 4% top 0; pointer-events: none; z-index: -1; }
.main_zone_inner{}
.main_zone_inner .main_flex{display: flex; gap:70px;}
.main_zone_inner .main_flex .main_img{flex: 1; height: 350px; overflow: hidden; border-radius: 30px;  box-shadow: var(--elev-2); transition: box-shadow .2s ease, transform .2s ease;}
.main_zone_inner .main_flex .main_img img{object-fit: cover; width: 100%; height: 100%;}
.main_zone_inner .main_flex .main_txt{flex: 1; padding:50px 0;}
.main_zone_inner .main_flex .main_txt .sub_tit{font-size: 1.8rem; color: #111111;}
.main_zone_inner .main_flex .main_txt .main_tit{font-size: 4rem; margin-top:10px; color: #111111;}
.main_zone_inner .main_flex .main_txt .main_cou{font-size: 1.8rem; margin-top: 30px; color:#111111;}
.main_zone_inner .main_flex .main_txt .btn_zone{display: flex; margin-top: 50px; gap:5px;}
.main_zone_inner .main_flex .main_txt .btn_zone .main_btn{color:#fff; background-color: #003398; padding:15px 20px; border-radius: 10px;}
.main_zone_inner .main_flex .main_txt .btn_zone .main_btn::after{display: inline-block; content: '' ; width: 31px; height:11px; background: url(/ibuilder/template/theme_skin/theme128/images/main/icon_link.png)no-repeat; margin-left: 50px;}
.main_zone_inner .main_flex .main_img:hover,
.main_zone_inner .main_flex .main_img:focus-within{ box-shadow: var(--elev-3); transform: translateY(-2px); }


.main_btn_zone{height: 100%; background: url(/ibuilder/template/theme_skin/theme128/images/main/main_bg03.jpg)no-repeat; padding:50px 0;}
.anno_wrap{max-width:1280px; margin:0 auto; padding:40px 24px 24px;}
.anno_head{display:flex; align-items:center; justify-content:space-between; color:#fff;}
.anno_tit{font-size:3.6rem; color:#fff; font-weight: 600;}
.anno_ctrl{display:flex; align-items:center; gap:10px;}
.anno_more{
  display:inline-flex; align-items:center; justify-content:center;
  height:35px; width: 35px; padding:0 14px; border-radius:50%;
color:#fff; border:1px solid rgba(255,255,255,.35);
font-weight: 100;
}

/* 좌우 버튼(도형 화살표) */
.anno_prev, .anno_next{width:33px; height:20px; background: url(/ibuilder/template/theme_skin/theme128/images/main/anno_next.png);}
.anno_prev{transform: rotate(180deg);}

.anno_prev::before{ transform:rotate(135deg); }
.anno_next::before{ transform:rotate(-45deg); }

/* 스크롤 영역 */
.anno_scroller{
  margin-top:18px;  overflow-y:visible;
  overflow: hidden;
}
.anno_list{
  display:flex; gap:16px; padding-bottom:6px;
}

/* 카드(4열 기준 폭) */
.anno_item{ flex:0 0 calc((100% - 16px*3)/4); scroll-snap-align:start; }
@media (max-width:1024px){ .anno_item{ flex:0 0 calc((100% - 16px)/2); }  }
@media (max-width:640px){  
  .anno_list{ gap:0; }
  .anno_item{ flex:0 0 100%; } 
}

/* 카드 스타일 */
.anno_card{
  display:flex; flex-direction:column; gap:10px;
  height:160px; padding:18px; border-radius:16px; background:#fff;
  box-shadow: var(--elev-2);
  transition: box-shadow .2s ease, transform .2s ease;
}
.anno_card:hover, .anno_card:focus-visible{
  box-shadow: var(--elev-3); transform: translateY(-2px); outline:0;
}
.anno_subject{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; font-weight:700; font-size:1.6rem; color:#111;
}
.anno_excerpt{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden; font-size:1.4rem; color:#4b5563; line-height:1.2;
}
.anno_date{ margin-top:auto; font-size:1.3rem; color:#9ca3af; }

.anno_zone .anno_pagination{
    display:flex; justify-content:center; align-items:center;
    gap:8px; margin:12px 0 6px;
  }
  .anno_zone .anno_dot{
    width:10px; height:10px; border-radius:50%; border:0; padding:0;
    background:rgba(255,255,255,.45);
    transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
    outline-offset:3px;
  }
  .anno_zone .anno_dot:hover,
  .anno_zone .anno_dot:focus-visible{ box-shadow:0 0 0 2px rgba(255,255,255,.5); }
  .anno_zone .anno_dot.is_active{ background:#00fea5; transform:scale(1.2); }
  
  .anno_zone .anno_prev[disabled],
  .anno_zone .anno_next[disabled]{ opacity:.4; pointer-events:none; }

/* ========== Photo Gallery (scoped) ========== */
/* =========================
   Photo + YouTube (scoped)
   ========================= */
   .photo_zone .photo_grid{
    max-width:1280px;
    margin:0 auto;
    padding:24px;
    display:grid;
    gap: 50px;
    grid-template-columns: 1fr 0.75fr; 
    align-items:start;
  }
  
  /* === Photo === */
  .photo_zone .photo_head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; color:#fff; }
  .photo_zone .photo_tit{ font-size:3.6rem; color:#fff; font-weight:700; letter-spacing:-.02em; }
  .photo_zone .photo_more{ display:inline-flex; align-items:center; justify-content:center; width:35px; height:35px; border-radius:50%; border:1px solid rgba(255,255,255,.4); color:#fff; }
  .photo_zone .photo_more:hover,
  .photo_zone .photo_more:focus-visible{ background:rgba(255,255,255,.15); outline:0; }
  
  .photo_zone .photo_list{
    display:grid; grid-template-columns:repeat(2, 1fr); gap:16px;
  }
  @media (max-width:1024px){ .photo_zone .photo_list{ grid-template-columns:repeat(2, 1fr); } }
  
  .photo_zone .photo_card{
    display:flex; flex-direction:column; gap:10px;
    overflow:hidden;
  }
  .photo_zone .photo_card:hover,
  .photo_zone .photo_card:focus-visible{transform: translateY(-2px); outline:0; }
  
  .photo_zone .photo_thumb{ display: block; width: 320px; height: 200px; border-radius: 10px; background:#e9eef9; }
  .photo_zone .photo_thumb img{width:100%; height:100%; object-fit: cover; border-radius: 10px;}
  .photo_zone .photo_info{ padding:14px 0; display:flex; flex-direction:column; gap:6px; }
  .photo_zone .photo_subject{
    font-size:1.5rem; color:#fff;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
    min-height: 40px;
  }
  .photo_zone .photo_date{ font-size:1.3rem; color:#fff; }
  
  /* === Video === */
  .photo_zone .video_head{ margin-top:14px; color:#fff; }
  .photo_zone .video_tit{ font-size:2.2rem; color:#fff; font-weight:700; letter-spacing:-.02em; }
   .photo_zone .video_thumb{ width:100%; height:100%; display:block; object-fit:cover; }


  /* ===== Video zone ===== */
.video_wrap{position:relative; margin-top:20px; min-width: 0;} 
.video_head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
.video_title{font-size:1.6rem; font-weight:700; color:#fff;}

.video_ctrl{display:flex; align-items:center; gap:16px;}
.video_ctrl .swipe_btn{font-size: 2.5rem; border:1px solid #fff; color:#fff; border-radius: 50%; width: 30px; height: 30px; text-align: center; line-height: 25px;}
.video_prev,.video_next{ width:24px; height:24px; border:0; background:transparent; cursor:pointer; position:relative; flex:0 0 24px; } 
.video_prev::before,.video_next::before{ content:""; position:absolute; inset:0; margin:auto; width:24px; height:24px; background:url('/ibuilder/template/theme_skin/theme128/images/main/swiper_next.png') no-repeat center/contain; }
.video_prev{transform:scaleX(-1);}
.video_fraction{display:inline-flex; align-items:center; gap:6px; color:#fff; font-weight:700;}
.video_fraction .cur,.video_fraction .total{min-width:2ch; text-align:right;}
.video_fraction .div{opacity:.5}
  .video_ctrl .video_toggle{ width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid #fff; color:#fff; background:transparent; cursor:pointer; }
  .video_ctrl .video_toggle i{ font-size:18px; line-height:1; }
  .video_ctrl .video_toggle:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* Swiper */
.video_swiper{width:100%;}
.video_wrap .swiper-container{ overflow:hidden; }
.video_swiper .swiper-slide{ width:507px; }
.video_swiper .swiper-wrapper{align-items:center;}
.video_card{ position:relative; display:block; width:507px; height:230px; border-radius:16px; overflow:hidden; background:#000; box-shadow:0 8px 24px rgba(0,0,0,.18); min-height: 260px;}
.video_card img{width:100%; height: 100%; object-fit: contain;}
.video_thumb{width:100%; height:100%; object-fit:cover; display:block;}



.ico_play{
  position:absolute; left:16px; top:16px; width:60px; height:60px;
  background:url('/images/common/ico_play_circle.svg') no-repeat center/contain;
  opacity:.95;
}
.ico_youtube{
  position:absolute; right:16px; bottom:16px; width:84px; height:28px;
  background:url('/images/common/badge_youtube.svg') no-repeat center/contain;
}

  
/* ===== Paging Zone ===== */
.paging_zone{
  grid-column: 1 / -1;                 /* photo_grid 전체폭 */
  margin-top: 20px;
  padding: 16px;
  border-radius: 14px;

}

.paging_gird{max-width:1280px; margin:0 auto;}

.pg_list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.pg_item{ list-style:none; }

.pg_card{
  display:block;
  border-radius: 14px;
  box-shadow: var(--elev-2);
  transition: transform .15s ease, box-shadow .2s ease;
}
.pg_card:hover,
.pg_card:focus-visible{
  transform: translateY(-2px);
  box-shadow: var(--elev-3);
  outline:0;
}

.pg_body{
  position: relative;         
  border-radius: 20px;
  padding: 16px 20px 16px 20px;      
  display:flex; flex-direction:column; justify-content:center;
  min-height: 130px;
}

/* 텍스트 */
.pg_sub{ font-size: 1.32rem; color:#505050; margin-bottom: 6px; }
.pg_title{ font-size: 1.9rem; font-weight: 800; color:#111; line-height:1.2; }
.pg_title.pg_phone{ font-size: 2.3rem; letter-spacing:.2px; color:#032658; }
.pg_desc{ font-size: 1.36rem; color:#555; margin-top: 4px; color:#743e3b;}

/* 오른쪽 아이콘 칩 */
.pg_icon{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:90px; height:90px; border-radius:14px;
  background:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 16px rgba(0,0,0,.1);
}
.pg_icon i{ font-size:26px; }

/* 색상/그라데이션 (이미지 톤 유사) */
.pg--pink .pg_body{ 
  background: linear-gradient(180deg, #FFE7E7 0%, #FFF1F3 100%);
}
.pg--pink .pg_icon i{ color:#ff6b6b; }

.pg--blue .pg_body{
  background: linear-gradient(180deg, #E6F1FF 0%, #EDF6FF 100%);
}
.pg--blue .pg_icon i{ color:#3b82f6; }

.pg--purple .pg_body{
  background: linear-gradient(180deg, #EEE9FF 0%, #F5F2FF 100%);
}
.pg--purple .pg_icon i{ color:#7c3aed; }

/* 반응형 */
@media (max-width:1024px){
  .pg_list{ grid-template-columns: 1fr; }
  .pg_title.pg_phone{ font-size:2rem; }
}

/* ===== Footer ===== */
.site_footer{
  background:#f9fafb;
  border-top:1px solid #e5e7eb;
  font-size:1.4rem;
  color:#4b5563;
  padding-left: 270px;
}
.footer_inner{
  max-width:1280px; margin:0 auto;
  padding:18px 10px;
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:20px;
}
.footer_info{display: flex; align-items: flex-start; gap: 50px;}
.footer_policy{
  font-weight:600; margin-bottom:6px;
}
.footer_policy a{ color:#111827; }
.footer_policy a:hover,
.footer_policy a:focus{ text-decoration:underline; }

.footer_addr{
  font-style:normal;
  line-height:1.6;
}
.footer_addr p{color:#333333;}
.footer_addr p~p{margin-top: 30px;}
.footer_sns{ display:flex; gap:10px; }
.footer_sns .sns_link{
  width:34px; height:34px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid #e5e7eb;
  box-shadow:0 2px 4px rgba(0,0,0,.08);
}
.footer_sns .sns_link img{ width:1005; height:100%; object-fit: cover; }

@media (max-width:768px){
  .footer_inner{ flex-direction:column; align-items:flex-start; padding:20px;}
  .footer_sns{ margin-top:10px; }
  .footer_info{display: block;}
}


  



  /* Pagination (fraction 점처럼 보이도록) */
  .hero_pagination{ position:absolute; left:50% !important; bottom:30px !important; transform:translateX(-50%); min-width:120px; height:28px; padding:0 12px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:700; z-index:20; width: auto !important; }
  .hero_pagination .swiper-pagination-current{ margin-right:6px; }
  .hero_pagination .swiper-pagination-total{ margin-left:6px; }
  
  /* Play/Pause */
.hero_controls{ position:absolute; right:43%; bottom:28px; display:flex; gap:8px;  z-index: 11; border:1px solid #fff; border-radius: 50%;}  
.hero_toggle{ width:36px; height:36px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; }
.hero_toggle .ri-pause-line, .hero_toggle .ri-play-line{ font-size:22px; color:#fff; }
  
  /* 반응형 */
  @media (max-width:1400px){
    .photo_zone .photo_grid{
      margin:0 auto;
      display:block;
    }
    .photo_zone .video_card{height: 370px;}
    .main_zone_inner .main_flex{gap:30px}
    .main_zone_inner .main_flex .main_txt .btn_zone .main_btn{padding:15px 7px;}
  }
  @media (max-width:1200px){
    .gnb_list > li > a{font-size: 1.8rem;}
    .main_zone_inner .main_flex{display: block;}
    .brand{width:120px;}
    .photo_zone .photo_thumb{width: 100%;}
  }
  @media (max-width:1024px){
    .hero_swiper .swiper-slide{ height:300px;  width: 450px;}
    .hero_swiper{height: 100%;}
    .hero_swiper .swiper-slide img{object-fit: cover; width: 100%; height: 100%;}
    .hero_caption{padding: 30px;}
    .hero_caption::after{margin-top: 20px;}
    .sub_tag{top:70%; padding:0 30px}
    .cap_tit{ font-size:32px; }
    .cap_txt{ font-size:16px; }
    .photo_zone .photo_grid{ grid-template-columns:1fr; }
    .photo_zone .video_card{ min-height: 220px; width: 100%; }
  }
  @media (max-width:768px){
    .main_zone_inner .main_flex .main_txt{padding:0; margin-top: 20px;}
    .main_zone_inner .main_flex .main_txt .btn_zone .main_btn::after{margin-left: 20px;}
    .hero_prev{right:30%; bottom: 4px;}
    .hero_next{left:90%;   bottom: 4px;}
    .hero_pagination{left:75% !important; bottom:20px !important;}
    .hero_controls{right:12%; bottom: 18px;}
    .paging_gird {padding:20px 0;}
    .pg_icon{width: 70px; height: 70px;}
    .pg_icon img{width: 60%;}
  }
  @media (max-width:640px){
    .hero_swiper .swiper-slide{ height:300px; }
    .sub_tag{top:50%; padding:0 30px}
    .cap_tit{ font-size:24px; }
    .cap_txt{ font-size:14px; }
    .main_btn_zone{padding:10px;}
    .anno_wrap{padding:20px 16px 0px}
    .photo_zone .video_card{height: 200px; min-height: inherit;}
    .photo_zone .video_text{display: block;}
     .video_card{width:100%; height:auto; aspect-ratio:57/32;} 
  }
  @media (max-width:550px){
    .header_inner{padding: 20px 5px;}
    .util_btn
    .hero_swiper{ min-height: inherit;}
    .hero_swiper .swiper-slide{ height:250px;}
    .hero_prev{right:40%;}
    .hero_next{left:92%; }
    .hero_pagination{left:70% !important; bottom:20px !important;}
    .photo_zone .photo_list{grid-template-columns:repeat(1, 1fr); gap:5px;}
    .photo_zone .photo_info{padding: 4px 0;}
    .photo_zone .photo_subject{-webkit-line-clamp:1; min-height: inherit;}
    .hero_swiper{min-height: inherit;}
  }
  @media (max-width:450px){
    .util_btn{padding:0 5px; font-size: 11px;}
    .cap_tit{font-size: 20px;}
    .cap_txt{font-size: 11px;}
    .sub_tag .tag_list{display: block; font-size: 12px;}
    .sub_tag .tag_list li:nth-of-type(4){margin-left: 0;}
    .hero_pagination{left: 63% !important;}
    .hero_prev{right:50%;}
    .hero_swiper{border-radius: 10px;}
    .hero_swiper .swiper-slide{ height:200px; }
    .hero_swiper .swiper-slide img{object-fit: inherit;}
  }

.site_header,
#mainContent,
.site_footer{
  padding-left: var(--ql_w_folded);      /* 기본: 접힘(=96px) */
  transition: padding-left .25s ease;    /* 부드럽게 */
}

/* 퀵링크가 열렸을 때(270px) */
.ql-open .site_header,
.ql-open #mainContent,
.ql-open .site_footer{
  padding-left: var(--ql_w_open);
}
/* 모바일(<=768px)은 퀵링크 끔: 좌패딩 0 */
@media (max-width:768px){

}