@charset "utf-8";

/* CSS Document */


@font-face { 
  font-family: 'Pretendard'; 
  font-weight: 400; 
  font-style: normal;
  src:url(../fonts/Pretendard-Regular.woff) format('woff'), 
      url(../fonts/Pretendard-Regular.woff2) format('woff2'); 
}
@font-face { 
  font-family: 'Pretendard_M'; 
  font-weight: 500; 
  font-style: normal;
  src:url(../fonts/Pretendard-Medium.woff) format('woff'), 
      url(../fonts/Pretendard-Medium.woff2) format('woff2'); 
}
@font-face { 
  font-family: 'Pretendard_SB'; 
  font-weight: 600; 
  font-style: normal;
  src:url(../fonts/Pretendard-SemiBold.woff) format('woff'),  
      url(../fonts/Pretendard-SemiBold.woff2) format('woff2'); 
}
@font-face { 
  font-family: 'Pretendard_B'; 
  font-weight: 700; 
  font-style: normal;
  src:url(../fonts/Pretendard-Bold.woff) format('woff'),  
      url(../fonts/Pretendard-Bold.woff2) format('woff2'); 
}


body, div, dl, dt, dd, ul, ol, li, 
h1, h2, h3, h4, h5, h6, 
pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {margin:0; padding:0;}

* {box-sizing:border-box; color: #1a1a1a;}
body {font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;-webkit-text-size-adjust:100%;}
html, body {width:100%; height:100%; font-size:15px;  line-height:1.4; letter-spacing:-0.5px;}
ul {list-style:none;}
ol {margin-left:20px;}
a { text-decoration:none;}
/* a:hover {-webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s; -ms-transition:all 0.5s; transition:all 0.5s;} */
h1, h2, h3, h4, h5, h6, address, caption {font-weight:500;}
table {border-collapse:collapse; border-spacing:0;}

img, fieldset {border:0;}
img, input, button, select, textarea {vertical-align:middle; font-family:'Pretendard', Arial, tahoma, Helvetica, sans-serif, Dotum;}
legend, caption {width:1px; height:1px; text-indent:100%; overflow:hidden; font-size:0; line-height:0;} 
/* visibility:hidden;나 display:none는 스크린리더기가 읽을수 없으므로 사용하지 않도록 한다 */

address {font-style:normal; -webkit-text-size-adjust:100%;}

/* etc ------------------------------- */
.tc, .btn_center {text-align:center !important;}
.tl, .btn_left {text-align:left !important;}
.tr, .btn_right {text-align:right !important;}

.btn_center, .btn_left, .btn_right {margin:20px 0;}

.cboth {clear:both;}
.hidden {overflow:hidden;}
.bdnone {border:0;}

.inblock {display:inline-block;}
.dblock {display:block;}

.fl {float:left;}
.fr {float:right;}

th, .fontb, strong {font-weight:500;}

i {font-style:normal;}


body::-webkit-scrollbar,
.table_1024px::-webkit-scrollbar {
  width: 8px;  /* 스크롤바의 너비 */
}

body::-webkit-scrollbar-thumb,
.table_1024px::-webkit-scrollbar-thumb  {
  height: 30%; /* 스크롤바의 길이 */
  background: #B9B9B9; /* 스크롤바의 색상 */
  
  border-radius: 10px;
}

body::-webkit-scrollbar-track,
.table_1024px::-webkit-scrollbar-track {
  background: #D6D6D6;  /*스크롤바 뒷 배경 색상*/
  border-radius: 10px;
}

/* input ------------------------------- */
/* 모바일에서 스타일 제거 */
input[type=text], input[type="password"], input[type="button"], input[type="image"], input[type="submit"], input[type="search"], input[type="email"], input[type="url"], input[type="number"], input[type="tel"], /* select, */ textarea {-webkit-appearance:none; -moz-appearance:none; appearance:none; -webkit-border-radius:0; -moz-box-size:border-box; box-sizing:border-box;}
button::-moz-focus-inner, input::-moz-focus-inner {border:0; padding:0;} /* button 태그 속성 reset하기 */
/* 기본스타일 정의 */
input[type=text], input[type="password"], input[type="search"], input[type="email"], input[type="url"], input[type="number"], input[type="tel"], select, textarea {border:solid 1px #ccc; padding:5px; border-radius:1px;}
input[type="button"] {cursor:pointer; overflow:visible; white-space:nowrap; border-radius:1px;}
/* select {padding-right:7px; background:#fff url(../DR0001IMG/board/icon_arrow_select.png) 94% 50% no-repeat; background-size:8px;}
select::-ms-expand {display:none;} */ /* IE 10, 11의 네이티브 화살표 숨기기 */
textarea {width:100%; height:auto;}
/* input[type=text]:focus, input[type="password"]:focus, select:focus, textarea:focus {border:1px solid #999; box-shadow:0px 0px 3px #a3a3a3;} */
/* 배경으로 지정해둔 이미지랑 겹칠때 해당 select 박스의 css에 속성을 추가해준다. select {-webkit-appearance:listbox;} */

input:focus{background-color: #f4f5f7; border: 1px solid #EDEDED;}
textarea:focus{background-color: #f4f5f7; border: 1px solid #EDEDED;}

/* 공통 체크박스 */
.b_checkbox{display: none}
.b_check_txt{cursor: pointer;display: inline-block;padding-left: 5px;}
.b_check{display: inline-block;width: 20px;  height: 20px;  border: 1px solid #dddddd;vertical-align: middle;cursor: pointer;text-align: center;border-radius: 6px;}
input.b_checkbox:checked + label.b_check{background-color: var(--color-Main-Color-red); border: none;}
.b_check i{opacity: 0;color: #fff;vertical-align: text-top;}
input.b_checkbox:checked + label.b_check i{opacity: 1;font-size: 18px;}


#black_bg{position: fixed;top: 0;left: 0;right: 0;z-index: 20;bottom: 0;background-color: rgba(0, 0, 0, 0.5);}



/* 헤더 */
header{
  border-bottom:1px solid #ededed;
  position:fixed; width:100%; background:#fff; height:80px; z-index:10;
}
header::after{
  content:''; position:absolute; top:80px; left:0; right:0; width:100%; height:60px;
  border-top:1px solid var(--border-color);
  border-bottom:1px solid var(--border-color);
  background:var(--color-BG);
  display:none; z-index:15;
}

/* ⬇️ 나타나는 조건들 */
header:has(#gnb > ul > li > a:hover)::after,
header:has(#gnb .sub_gnb:hover)::after{              
  display:block;
}
header:has(#gnb > ul > li > a.goto_elaverse:hover)::after {display:none;}
.logo{padding: 0px 10px;}
/* 정렬 */
.justify_spaceb{justify-content: space-between;}
header .inner{display:flex; justify-content:space-between; align-items:center;
/* height:80px*/
}
#gnb ul{display:flex; height: 80px;}
#gnb ul li{display:flex; align-items:center;  position:relative;}
#gnb ul li > a{position:relative; display:block; height:100%; padding:0 35px; font-size:18px;color:#222; display: none;}
#gnb ul li > a:last-child{display: block;}
/* 서브메뉴 */
#gnb .sub_gnb{
  position:absolute; top:80px; left:0; right:0; height:60px;
  display:none; align-items:center; justify-content:center; background:transparent;
  z-index:20; margin:0; padding:0; border:none;
}
#gnb .sub_gnb li > a{
  font-family: 'Pretendard_SB';
  display:flex; align-items:center; justify-content:center;
  padding:5px 20px; color:var(--color-gray-g90-darkfont); transition:color .3s; width:max-content;
  font-size: 16px; border-radius: 30px;
}
#gnb ul li > a.sub_open{font-family: 'Pretendard_SB'; height: 80px; line-height: 80px;position: relative;}
#gnb ul li > a.sub_open::after {content: "";position: absolute;left: 0;right: 0;bottom: 0;height: 3px;background: var(--color-secondary);transform: scaleX(0);transform-origin: left;transition: transform 0.3s ease;}
/*
#gnb ul li > a.sub_open.open::after {content: "";position: absolute;left: 0;right: 0;bottom: 0;height: 3px;background: var(--color-secondary);transform: scaleX(1);transform-origin: left;transition: transform 0.3s ease;}
*/
#gnb ul li > a.goto_elaverse{height: inherit; border-radius: 50px; display: inline-block; padding: 5px 15px; background-color: var(--color-Main); color: #fff;}
#gnb ul li:hover > a.sub_open::after,
#gnb ul li .sub_gnb li a:hover {transform: scaleX(1);}


#gnb .sub_gnb li a:hover,
#gnb .sub_gnb li a.on{  background-color: var(--color-secondary); color: #fff;  }
#gnb > ul > li > a:hover + .sub_gnb,
#gnb > ul > li:hover > .sub_gnb,
#gnb .sub_gnb:hover{display:flex;}
#gnb > ul > li::after{content:""; position:absolute; left:0; right:0; top:78px; height:4px;}

#nav-m{display: none;}
#nav-m .sub_menu > li {display: none;}
#nav-m .sub_menu > li.elaverse {display: block;}
#nav-m .sub_menu > li > ul { display: none; }
/* 열림 상태에서 화살표 아이콘 회전 */
#nav-m .open_menu[data-filter="down"] i.xi-angle-down { transform: rotate(180deg); transition: transform .2s; }
/* 패널/백드롭 표시 제어 예시 */
#nav-m .nav-bg_black { display: none; }
#nav-m .nav-bg_black.on { display: block; }
body.no-scroll { overflow: hidden; }


section{width:100%;}
.inner{width:1200px; margin:0 auto; }
main > section .inner{padding: 110px 0;}
.grid{display: flex; gap: 30px;}
.grid > div:first-child{width: 45%;}
.grid > div:last-child{width: 55%;}
.inner .title_wrap{margin-bottom: 70px;}
.inner .title_wrap img{margin-top: 50px;}
.inner .title_wrap .title_sub{margin-bottom: 10px; font-size: 36px; font-family: 'Pretendard_SB';color: var(--color-p40);}
.inner .title_wrap .title_main{font-size: 50px; font-family: 'Pretendard_B'; color: var(--color-gray-g90-darkfont);}


/* 푸터 */
footer{background-color: #11082c; color: #fff; padding-bottom: 60px;}
.footer_menu{padding-top: 60px; padding-bottom: 40px; border-bottom: 1px solid #3f3657;}
.footer_menu ul{display: flex;gap: 23px;}
.footer_menu ul li{display: flex;  color: #c1c8d3;}
.footer_menu ul li span{cursor: pointer; display: flex; gap: 23px; color: #c1c8d3;}
.footer_menu ul li span.bd{font-family: 'Pretendard_SB';}
.info_full_wrap{display: flex; gap: 40px;}
.footer_info{padding-top: 40px; display: flex; justify-content: space-between;}
.footer_info .logo_wrap{}
.footer_info .logo_wrap img{width: 200px;}

.footer_info .info_wrap .info *{color: #C1C8D3;}
.footer_info .info_wrap .info > div{width: 100%; display: flex;  flex-direction: column;}
.footer_info .info_wrap .info > div > div span{color: #C1C8D3; font-family: 'Pretendard_SB';}
.footer_info .info_wrap .info{display: flex; flex-direction: column; color: #fff;}
.footer_info .info_wrap .info .flex_box ul{ display: flex; gap: 24px; margin-bottom: 3px;}
.footer_info .info_wrap .info .flex_box ul li{ display: flex; gap: 10px;}
.footer_info .info_wrap .info .flex_box ul li span{display: inline-block;}
.footer_info .info_wrap .info .copyright{margin-top: 10px; color: var(--color-gray-g60);}

.gotop{  filter:drop-shadow(0 2px 4px rgba(0, 0, 0, 0.10)); z-index: 9; cursor: pointer; position: fixed; right:24px; bottom: 24px; display: none; text-align: center; line-height: 36px; border-radius: 50px; width: 40px; height: 40px; background-color: #fff; border: 1px solid var(--color-gray-g30-stroke);}



@media screen and (max-width:1024px){
  /*모바일 gnb 관련*/
  #gnb{display: none;}
  header{height: 60px;}
  header .inner{height: 60px;}
  #visual {padding-top: 60px !important;}
  #nav-m{display: block;}
  #nav-m .hamberger i{ font-size: 30px; cursor: pointer;}

  .nav-bg_black{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 6; background: #00000091; }
  .nav-bg{ right: 0; position: absolute; width: 50vw; height: 100%; background-color: #fff; z-index: 100;}
  
  .nav-bg .mo_menuClosed{text-align: right; padding: 20px 30px; }
  .nav-bg .mo_menuClosed i{font-size: 25px;cursor: pointer; padding: 5px;}
  .nav-bg ul{width: 100%;}
  .nav-bg ul li{ width: 100%; }
  .nav-bg ul li{ }
  .nav-bg ul li.open > a{transition: 0.3s; background-color: var(--color-secondary); color: #fff; font-family: 'Pretendard_B';}
  .nav-bg ul li.open > a i{color: #fff;}
  .nav-bg ul li.elaverse a{background-color: #e1fbfb; color: var(--color-p40);}
  .nav-bg ul li.elaverse a i{  color: var(--color-p40);}
  .nav-bg ul li a{align-items: center; display: flex;justify-content: space-between;padding: 15px 35px;width: 100%;font-size: 20px;font-family: 'Pretendard_M';}
  .nav-bg ul li a i{font-size: 20px;}

  .nav-bg ul li ul{ display: none;}
  .nav-bg ul li.open ul li{background-color: none;}
  .nav-bg ul li.open ul li{background-color: none;}
  .nav-bg ul li ul li{border-bottom: none;}
  .nav-bg ul li ul li a{font-size: 18px; padding-left: 50px; color: #999; transition: 0.3s;}
  .nav-bg ul li ul li a:hover{background-color: var(--color-BG); color: var(--color-gray-g90-darkfont);}

} 





/* 페이지네이션 */
.pagination_wrap{display: flex; justify-content: center; align-items: center; margin-top: 60px;}
.pagination{display: flex; align-items: center; gap: 5px;}
.pagination .page-item a{display: inline-block; padding: 7px 14px; transition: 0.3s;}
.pagination .page-item a:has(i){padding: 2px; vertical-align: top;display: flex; align-items: center; justify-content: center;}
.pagination .page-item i{font-size: 20px;}
.pagination .page-item .page-link:hover{background-color:#e1fbfb; border-radius: 50px; color: var(--color-Main-Color-red);}
.pagination .page-item .page-link.on{background-color:var(--color-Main); border-radius: 50px; color:#Fff;}