:root {
  --header-height: 90px;
  --common-section-padding: 80px;
  --common-section-big-padding: 100px;
  --common-title-shadow: 0 0 1em rgba(0, 0, 0, 0.75);
}

@font-face {
    font-family: 'PretendardVariable';
    src: url('../fonts/PretendardVariable.woff2') format('woff');
}
body { font-family: PretendardVariable; }

#wrap { margin: 0 auto; line-height: 1.6; word-break: keep-all; } 
#wrap * { box-sizing: border-box; } 

#header { display: flex; justify-content: space-between; align-items: center; height: var(--header-height); padding: 0; } 
#header .header_wrap { position: fixed; left: 0; top: 0; width: 100%; height: var(--header-height); border-bottom: 1px solid #f3f6fb; background: #FFF; z-index: 10; } 
#header .header_inner { display: flex; justify-content: space-between; align-items: center; gap: 1em; height: 100%; padding: 20px 30px; } 
#header .header_inner_box { height: 50px; } 
#header .header_logo { display: inline-flex; align-items: center; height: 50px; overflow: hidden; } 
#header .img_logo { width: 128px; height: 50px } 
#header .btn_header_nav { display: none; width: 30px; height: 30px; border-radius: 3px; background: url('../img/icon/icn_nav.svg') no-repeat center center; background-size: 70%; border: none; cursor: pointer; transition: background-color 0.17s ease; } 
#header .btn_header_nav:hover { background-color: rgba(0,0,0,0.03); } 

#header_nav { display: flex; gap: 1em; flex: 0 0 auto; } 
#header_nav .nav_item { flex: 1 0 auto; } 
#header_nav .nav_link { display: inline-flex; align-items: center; height: 50px; padding: 0 1.5em; font-size: 16px; font-weight: bold; color: rgb(1,70,134,0.4); transition: color 0.17s ease; } 
#header_nav .nav_link:hover { color: #014686; } 
#header_nav .nav_item.active .nav_link { color: #014686 } 

.page_inner { position: relative; width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 30px; overflow: hidden; } 
.page_inner.wide { max-width: 1600px; } 

/* 공통 요소 스타일 */
.section_title { font-size: 40px; line-height: 1.42; font-weight: bold; } 
.section_subtitle { font-size: 20px; color: #a1b5c9; font-style: italic; }
.section_subtitle + .section_title { margin-top: 0.12em; }
.section_subtitle.white { color: #FFF; }
.section_desc { margin-top: 0.4em; font-size: 20px; color: #596F83; } 
.section_desc.bright { color: rgba(255, 255, 255, 0.9); } 
.highlight { font-weight: bold; color: #014686; } 
.highlight.bright { color: #C0E0FF; } 

.btn_common { display: inline-block; width: 100%; padding: 0.8em 2em; border: none; font-size: 20px; font-weight: bold; text-align: center; color: #ffffff; background-color: #014686; transition: background .17s ease; cursor: pointer; }
.btn_common:hover { color: #ffffff; background-color: #13599b; }
.btn_common:disabled { color: #ffffff; background-color: #d1d9e2; cursor: not-allowed; }
.btn_link_big { width: 12em; } 

.hexagon_wrap { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; margin-top: var(--common-section-big-padding); background-color: #ffffff; } 
.hexagon_wrap .hexagon_item + .hexagon_item { margin-left: -6%; } 
.hexagon_wrap .hexagon_item { position: relative; } 
.hexagon_wrap .hexagon_item:nth-child(1) { z-index: 4; }
.hexagon_wrap .hexagon_item:nth-child(2) { z-index: 3; }
.hexagon_wrap .hexagon_item:nth-child(3) { z-index: 2; }
.hexagon_wrap .hexagon_item:nth-child(4) { z-index: 1; }
.hexagon_wrap .hexagon { background: white; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); padding: 3%; box-sizing: border-box; } 
.hexagon_wrap .hexagon::before { content: ''; position: absolute; inset: 0; background-color: #ffffff; clip-path: inherit; z-index: 1; } 
.hexagon_wrap .hexagon:nth-child(even) .hexagon_inner { background-color: #e3edf7; } 
.hexagon_wrap .hexagon_inner { position: relative; z-index: 2; width: 100%; aspect-ratio: 1.1; clip-path: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10%; background-color: #f4f7fd; background-position: center center; background-repeat: no-repeat; background-size: cover; text-align: center; } 
.hexagon_wrap .hexagon_inner img { width: 50px; height: 50px; object-fit: contain; margin-bottom: 12px; } 
.hexagon_wrap .hexagon_inner p { font-size: 24px; font-weight: bold; color: #003366; margin: 0.6em 0 0 0; } 
.hexagon_wrap .hexagon_title { font-size: 20px; color: #596f83; text-align: center; margin-top: 1em; } 

.common_board_list { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 2%; }
.common_board_list .list_item { position: relative; flex: 1 1 32%; min-width: 300px; max-width: 32%; margin-bottom: 44px; }
.common_board_list .list_item .thumb { position: relative; padding-top: 56.25%; background-color: #efefef; overflow: hidden; }
.common_board_list .list_item .img_box { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center center; transition: transform .3s ease; }
.common_board_list .list_item .img_box.img_contain { background-size: auto 80%; background-color: #f4f4f4; }
.common_board_list .list_item .contents { margin-top: 18px; }
.common_board_list .list_item .contents .year_text { display: block; margin: 0; color: #008fff; font-family: Roboto; font-size: 16px; font-style: normal;  line-height: 140%; transition: color .3s ease; }
.common_board_list .list_item .contents .title_text { display: block; margin: 0.3em 0 0 0; color: #000; font-family: Roboto; text-align: left; font-size: 20px; font-style: normal; font-weight: 700; line-height: 140%; transition: color .3s ease; }
.common_board_list .list_item .contents .desc_text { margin-top: 8px; color: #000; font-family: Roboto; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; }
.common_board_list .list_item .link { display: flex; align-items: center; margin-top: 8px; }
.common_board_list .list_item .arrow_right { display: inline-flex; width: 24px; height: 20px; margin-top: 2px; margin-left: .3em; background: url('../img/icon/icn_arrow_right.svg') 50%; background-size: contain; }
.common_board_list .list_item:hover .thumb .img_box { transform: scale(1.12); }

#footer {background-color: #071631;color: #ffffff;font-family: 'Noto Sans KR', sans-serif;padding: 60px 0;font-size: 14px; line-height: 2; } 
#footer a {color: #ffffff; } 
#footer .footer-container { display: flex;flex-wrap: wrap;justify-content: space-between;max-width: 1400px;margin: 0 auto; padding: 0 30px; } 
#footer .footer-section { flex: 1 1 39%; } 
#footer .footer-section.company_logo { flex: 0 0 22%; } 
#footer .footer-section.company_logo img { width: 128px; } 
#footer .footer-section h2,
#footer .footer-section h3 {margin-bottom: 10px;font-size: 16px;font-weight: bold; } 
#footer .footer-section ul {display: flex;flex-direction: column;list-style: none;padding: 0; } 
#footer .footer-section ul li {display: flex;justify-content: flex-start;align-items: flex-start; } 
#footer .footer-section .subject_type {display: inline-block;flex: 0 0 6.5em;font-weight: bold;color: rgba(255,255,255, 0.65); } 
#footer .copyright_text { flex: 0 0 100%; display: block; padding-left: 22%; padding-top: 2em;color: rgba(255,255,255, 0.65); } 

@media (max-width: 1600px) {
  :root {
    --header-height: 70px;
    --common-section-padding: 60px;
    --common-section-big-padding: 50px;
  }
  .page_inner { max-width: 1200px; padding: 0 20px; } 
  .page_inner.wide { max-width: 1400px; } 

  #header .header_inner  { padding: 15px 20px; }
  #header .img_logo { width: 100px; height: 40px; }
  #header .header_logo,
  #header .header_inner_box,
  #header_nav .nav_link { height: 40px; }
  #header_nav .nav_link { font-size: 14px; }
  #footer { font-size: 13px; }
  #footer .footer-container { padding: 0 20px; }
  #footer .footer-section.company_logo img { width: 100px; }
    
  .section_title { font-size: 36px; } 
  .section_subtitle { font-size: 16px; }
  .section_desc { font-size: 16px; } 

  .btn_common { font-size: 16px; }

  .hexagon_wrap { margin-top: 2em; }
  .hexagon_wrap .hexagon_inner img { width: 36px; height: 36px; margin-bottom: 18px; } 
  .hexagon_wrap .hexagon_inner p { font-size: 18px; } 
  .hexagon_wrap .hexagon_title { font-size: 16px; } 

}

@media (max-width: 1280px) {
  .page_inner { padding: 0 15px; } 
  .page_inner,
  #footer .footer-container { max-width: 980px; } 
  #header .header_inner { padding: 15px; }
  .page_inner.wide { max-width: 1240px; } 
  #footer .footer-container { padding: 0 15px; }
}

@media (max-width: 1024px) {
  :root {
    --header-height: 50px;
    --common-section-padding: 42px;
    --common-section-big-padding: 35px;
  }
  #header .header_inner { padding: 6px 15px; }
  #header .header_logo,
  #header .header_inner_box { height: 32px; }
  #header .img_logo { width: 80px; height: 32px; }
  #header .header_inner,
  #footer .footer-container { max-width: 100%; }
  #header_nav { gap: 0; }
  #header_nav .nav_link { padding: 0 1.3em; }
  .section_title { margin: 0 auto; font-size: 30px; text-align: center; } 
  .section_subtitle { font-size: 14px; text-align: center; }
  .section_desc { font-size: 15px; text-align: center; }
  .page_inner { max-width: 680px; } 
  .page_inner.wide { max-width: 1000px; } 
  
  .btn_common { font-size: 15px; margin: 0 auto; }
  .mobile_dim_bg { position: relative; }
  .mobile_dim_bg:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); }


  .common_board_list { display: inline-flex; margin-top: 0; max-width: 640px; gap: 4%; } 
  .common_board_list .list_item { flex: 1 1 48%; max-width: 48%; min-width: auto; margin-bottom: 32px; }
  .common_board_list .list_item .contents{ margin-top: 10px; }
  .common_board_list .list_item .contents .title_text { font-size: 16px; }
  .common_board_list .list_item .link { margin-top: 0.1em; font-size: 14px; } 

}


@media (min-width: 769px) {
  .only-m { display: none; }
}

@media (max-width: 768px) {
  .page_inner ,
  .page_inner.wide { max-width: 728px; } 
  #header .btn_header_nav { display: inline-block; }
  #header .header_inner_box { display: flex; justify-content: space-between; align-items: center; width: 100%; background: #FFF; z-index: 12; }
  #header .header_inner { z-index: 20; }
  #header_nav { position: fixed; left: 0; top: var(--header-height); flex-direction: column; width: 100%; background: #FFF; gap: 0; transform: translate3d(0, -100%, 0); opacity: 0; transition: transform 0.17s ease, opacity 0.17s ease; visibility: hidden; }
  #header_nav .nav_link { width: 100%; justify-content: center; text-align: center; border-bottom: 1px solid #f3f6fb; }
  #header.active #header_nav { transform: translate3d(0,0,0); opacity: 1; visibility: visible; }
  #footer { padding: 30px 0; }
  #footer .footer-container { flex-direction: column; }
  #footer .footer-section h2,
  #footer .footer-section h3 { margin-bottom: 0.2em; }
  #footer .footer-section { margin-bottom: 0; } 
  #footer .footer-section.office-locations { margin-top: 2em; } 
  #footer .copyright_text { padding-left: 0; margin-bottom: 10px; } 
  .section_title + .section_desc { margin-top: 1em; }
  .section_title { font-size: 24px; text-align: center; } 
  .section_subtitle { font-size: 14px; text-align: center; }
  .section_desc { max-width: 80%; margin: 0 auto; font-size: 14px; text-align: center; } 
  .mobile_oneline br:not(.only-m) { display: none; } 

}

@media (max-width: 640px) {
  .common_board_list .list_item { flex: 1 1 100%; width: 100%; max-width: 400px; min-width: auto; margin: 0 auto; }
  .common_board_list .list_item + .list_item { margin-top: 30px; }
  .common_board_list .list_item .contents { margin-top: 7px; }
  .common_board_list .list_item .contents .title_text { margin-top: 5px; font-size: 16px; }
}