/* common */
 * { margin: 0; padding: 0; outline: none; box-sizing: border-box; }
body {margin: 0; padding: 0; -ms-overflow-style: none; scrollbar-width: none;  min-width: 1200px; background: #eef2f5;-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
body::-webkit-scrollbar {display: none;}
html { scroll-behavior: smooth; }
html, body {font: 400 16px/1.3  'Noto Sans KR', sans-serif; color: #000000; width: 100%; position: relative;  font-family: -apple-system,BlinkMacSystemFont,sans-serif;}
ul, li {list-style: none;}
a {text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent;}
button { font-family: inherit; border: none; background-color: transparent; outline: 0;  cursor: pointer; }
input,textarea,button,select {font-family: inherit;}
img {max-width: 100%;}
a[href^="tel"] {text-decoration: none !important; }

body.hidden { overflow: hidden;}
body::before { content: "";  position: fixed;  left: 0;  top: 0;  width: 100%;  height: 100%; background-color: rgba(0,0,0,0.25); z-index: 99;  transition: all 0.4s ease; opacity: 0; pointer-events: none;cursor: pointer;}
body.hidden::before { opacity: 1;  pointer-events: auto;}
  
#wrapper {width: 100%; position: relative; }
.pc {display: block;}
.tablet {display: none !important;}
.mobile { display: none !important;}
.inner {position: relative; width:90%; max-width: 1280px; margin: auto;}

  

/*header*/
.header { position: relative; width: 100%; background: #fff;}
.header .h_inner { width: 100%; display: flex; flex-direction: column; align-items: center; }
.header .h_top_wrap {width: 100%; height: 40px; background-color: #f5f5f5;display: flex;justify-content: center;}
.header .h_top { width: 90%; max-width: 1280px; display: flex; align-items: center; justify-content: space-between; padding: 0.25rem 0;}
.header .h_top .visit_wrap {position: relative;}
.header .h_top .visit_wrap .visit_box { display: flex; align-items: center; gap: 1rem;}
.header .h_top .visit_wrap .visit_box .item { font-size: 0.875rem; color: #000;  text-transform: uppercase;}
.header .h_top .visit_wrap .visit_box .item .txt { font-weight: 700;}
.header .h_top .gtranslate { display: flex;margin-left: auto;}
.header .h_top .gtranslate > a { max-width: 27px; margin: 0px 4px;}
.header .h_top .gtranslate .gt_selector { font-size: 0.875rem; color: #000; border: 1px solid #818181; border-radius: 0.125rem; margin-left: 0.25rem;}
.header .h_logo { width: 90%; max-width: 1280px; margin: 2rem auto; padding: 0 2rem;}
.header .h_logo .link { width: 100%; max-width: 340px; display: flex; align-items: center; justify-content: center; font-weight: 500 }
.header .h_nav_box { width: 100%; position: relative; display: flex; justify-content: center; background-color: #000; z-index:100;}
.header .h_nav_box .h_nav { display: flex; align-items: center; gap: 0.7rem;}
.header .h_nav_box .h_nav > li { position: relative; display: flex;}
.header .h_nav_box .h_nav > li > .link:hover { background-color: #f13ead;}
.header .h_nav_box .h_nav > li > .link { font-size: 0.875rem; font-weight: 400; background-color: #000; color: #fff; padding: 0.75rem; display: inline-flex; transition: all 0.4s ease; font-family: 'Noto Sans KR', sans-serif;}
.header .h_nav_box .h_nav > li.home > .link { width: 1.25rem;}
.header .h_nav_box .h_nav > li.home > .link > img { width: 100%;  height: 100%; object-fit: contain;}
.header .nav_btn { font-size: 2rem; color: #000; display: flex; align-items: center; justify-content: center; display: none;}

  
/* nav box */
.nav_box { width: 80%; max-width: 365px;  height: 100%;  box-sizing: border-box;  position: fixed;  top: 0;  right: -365px;  background-color: #fff; overflow-y: scroll;  overflow-x: hidden; -ms-overflow-style: none; z-index: 101; display: flex;  flex-direction: column; transition: all 0.4s ease; pointer-events: none;}
.nav_box.open { pointer-events: auto;  right: 0; box-shadow: 0px 0px 22px rgba(70, 75, 90, 0.45);  }
.nav_box::-webkit-scrollbar { display: none;  }  
.nav_box .nav_head { display: flex; flex-direction: column; gap: 1rem; padding: 5rem 2rem 1rem; background: #474747; border-bottom: 1px solid #ddd;}
.nav_box .nav_close { font-size: 2rem; cursor: pointer; position: absolute; right: 5%; top: 1rem; color: #fff;}
.nav_box .nav { width: 100%;  flex: 1;  display: flex; flex-direction: column;  padding-bottom: 2rem;  } 
.nav_box .nav > li { position: relative; width: 100%; padding: 0.85rem 1.5rem;  border-bottom: 1px solid #ddd;}
.nav_box .nav > li > a { font-size: 1.125rem; font-weight: 600; color: #000000; width: 100%; display: block; font-family: 'Noto Sans KR', sans-serif;}


/* page common */
.section_wrap {position: relative;}
.section_wrap .layout {background: #fff; width: 90%; max-width: 1280px; margin: 0 auto; display: flex; padding: 1.25rem 2.5rem 3.5rem; border-radius: 0 0 0.875rem 0.875rem; margin-bottom: 2rem; box-shadow: 3px 3px 12px rgba(0,0,0,0.05);}
.section_wrap .side_section { width: 280px; display: flex; flex-direction: column;  gap: 1.5rem;}
.section_wrap .side_section.mt {margin-top: 2.2rem;}


/* main */
.main_wrap { position: relative; width: 100%; }
.main_section { position: relative; flex: 1; display: flex; flex-direction: column; gap: 2rem; width: calc(100% - 280px); padding-right: 1.25rem;}
.main_section > .grid_box { width: 100%; display: flex; gap: 4%;}
.main_section > .grid_box .grid_item { width: 50%;}
.main_section > .grid_box .grid_item.w_100 { width: 100%;}


.latest_top { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; margin-bottom: 0.75rem;}
.latest_top .bo_title {font-size: 0.875rem; letter-spacing: 0; font-weight: 700; color: #000; font-family: 'Noto Sans KR', sans-serif;}
.latest_top .bo_title .red {color: #f13ead;}
.latest_top .bo_title .blue { color: #0ca4f4;}
.latest_top .bar { flex: 1; background: #ddd; height: 1px;}
/* .latest_top .bo_more {font-size: 0.813rem; color: #333; font-weight: 500; line-height: 1.3;} */
.latest_top .bo_more { background: url(../img/plus.png) no-repeat center / contain; width: 15px; aspect-ratio: 1 / 1; cursor: pointer; transition: all 0.4s ease;}
.latest_top .bo_more:hover { transform: rotate(180deg);}
.latest_top .bo_more > a {display: block;width: 100%; height: 100%;}


.main_wrap .side_section .board_box:last-child {border-bottom: 1px solid #ddd;  padding-bottom: 1.5rem;}

.fixed_btnbox { position: fixed; right: 0.625rem; top: 50%; transform: translateY(-50%); background: #363940; display: flex; flex-direction: column; gap: 1rem;}
.fixed_btnbox .scroll_btn { color: #fff; font-size: 1rem; padding: 0.4rem; cursor: pointer;}



/* sub */
.sub_wrap { position: relative; width: 100%; }
.title_box { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.875rem;}
.title_badge {color: #fff; font-size: 0.688rem; line-height: 1; letter-spacing: 0;  display: inline-block; padding: 0.35rem 0.625rem; border-radius: 0.75rem; background-color: #000;}
.title_badge.board1 {background: #F13EAD;}
.title_badge.board2 {background: #2BAEFF;}
.title_badge.board3 {background: #914FFE;}
.title_badge.board4 {background: #F13EAD;}
.title_badge.board5 {background: #2BAEFF;}
.title_badge.board6 {background: #914FFE;}
.title_badge.board7 {background: #F13EAD;}
.title_badge.board8 {background: #2BAEFF;}
.title_badge.board9 {background: #914FFE;}
.title_badge.board10 {background: #F13EAD;}
.title_badge.board11 {background: #2BAEFF;}
.title_badge.board12 {background: #914FFE;}
.title_badge.board13 {background: #F13EAD;}
.title_desc { flex: 1; font-size: 0.875rem; color: #333; font-weight: 500; letter-spacing: 0; line-height: 1.3;}