@charset "utf-8";

/* CSS Document */

@font-face { 
  font-family: 'Pretendard_L'; 
  font-weight: 200; 
  font-style: normal;
  src:url(../fonts/Pretendard-Light.woff) format('woff'), 
      url(../fonts/Pretendard-Light.woff2) format('woff2'); 
}

@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'); 
}
@font-face { 
  font-family: 'Pretendard_EB'; 
  font-weight: 700; 
  font-style: normal;
  src:url(../fonts/Pretendard-ExtraBold.woff) format('woff'),  
      url(../fonts/Pretendard-ExtraBold.woff2) format('woff2'); 
}

@font-face {
  font-family: 'flight';
  font-style: bold;
  font-weight: 700;
  src:url(../fonts/FlightSans-Title.woff) format('woff'),  
      url(../fonts/FlightSans-Title.woff2) format('woff2'); 
}

@font-face {
    font-family: 'TangoSans';
    src: url('../fonts/TangoSans.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Paperlogy';
    src: url('../fonts/Paperlogy-4Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Paperlogy_B';
    src: url('../fonts/Paperlogy-7Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



@font-face {
    font-family: 'gangwon';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEduPowerExtraBoldA.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

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.6; 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; color: var(--color-gray-g60);}
.b_check{display: inline-block;width: 24px;  height: 24px;  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-purple); border: none;}
.b_check i{opacity: 1;color: var(--color-gray-g30-stroke);vertical-align: text-top; font-weight: 800 !important;}
input.b_checkbox:checked + label.b_check i{opacity: 1;font-size: 18px; color: #fff;}

/* 예린 추가 */
.sel_check{display: inline-block;width: 24px;  height: 24px; vertical-align: middle;cursor: pointer;text-align: center;border-radius: 6px;}
.sel_check i{opacity: 1;color: var(--color-gray-g30-stroke);vertical-align: text-top; font-weight: 800 !important; font-size: 20px;}
input.b_checkbox:checked + label.sel_check i{opacity: 1;font-size: 20px; color: var(--color-purple);}


#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;
  top: 0;
}
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;}
#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: #3E298C;;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: #3E298C; color: #fff; transition: transform 0.3s ease;}
#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: 80px 0;}
.grid{display: flex; gap: 30px;}
.grid > div:first-child{width: 45%;}
.grid > div:last-child{width: 55%;}
.inner .title_wrap{margin-bottom: 70px; line-height: 1.4;}
.inner .title_wrap.center{text-align: center;}
.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_EB';  color: var(--color-gray-g90-darkfont); line-height: 1.4;}


/* 푸터 */
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; align-items: center; flex-wrap: wrap;}
.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;}

.family-site{width: 250px;}
.family-site ul li{color: var(--color-gray-g90-darkfont);}
.footer_menu .family-site { margin-left: auto; }
.fm_site{margin-left: auto;}

.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);}
.footer_info .icon{display: flex; gap: 15px;}
.footer_info .icon a{display: inline-block; height: min-content;}



.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);}
.gocontact{transition: 0.3s; z-index: 9;cursor: pointer;position: fixed;right: 18px;bottom: 70px;display: block;text-align: center;}
.gocontact:hover{bottom: 75px;}


/*푸터 모달 */
.paper{max-height: 80%; overflow-y: auto; background-color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 20px; padding: 35px;}
.w800{width: 800px;}
.height_auto{height: auto !important;}
.paper .close_btn{background-color: var(--color-BG); border-radius: 5px; position: absolute; right: 30px; top: 30px; padding: 5px 8px; font-size: 20px; cursor: pointer;}
.paper .paper_title{padding-bottom: 20px; border-bottom: 1px solid #ededed; font-size: 20px; font-family: 'Pretendard_M'; }
.paper_contents{resize: none; min-height: 250px; padding: 10px; border-radius: 6px; border: none}
.paper_contents:focus{background-color: inherit; border: none;}
.modal_common{display: none;}

.scrollbar { 
  /* width: 100%; */
  height: 100%;
  overflow-y: scroll;
}
.scrollbar::-webkit-scrollbar {
    width: 6px;  
}
.scrollbar::-webkit-scrollbar-thumb {
    background: rgba(48, 202, 203); /* 스크롤바 색상 */
    border-radius: 10px; /* 스크롤바 둥근 테두리 */
}
.scrollbar::-webkit-scrollbar-track {
    background: rgba(48, 202, 203, .1);  /*스크롤바 뒷 배경 색상*/
}
.scrollbar::-webkit-scrollbar-button:vertical:start:decrement,
.scrollbar::-webkit-scrollbar-button:vertical:start:increment {
    display: block;
    height: 10px;
}
.scrollbar::-webkit-scrollbar-button:vertical:end:decrement {
    display: block;
    width: 5px;
}

@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:#3E298C; 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);}

} 




/* 팝업창 */

.popup_dim{background-color:rgba(0, 0, 0, .5);width: 100%;height: 100vh;position: fixed;z-index: 8;top: 0;}
.popup_layer{max-width: 400px; border-radius: 15px; overflow: hidden; position: fixed; right: 30px; top: 120px;z-index: 9;box-shadow: 0 4px 16px rgba(0, 0, 0, .05); background-color: #fff;}
.popup_layer .popup_wrap{}
.popup_layer .popup_wrap .popup_img_wrap{  display: block;    height: 100%;width: 340px;}
.popup_layer .popup_wrap .popup_img_wrap img{display: block; width: 100%;}
.popup_layer .closed_btn_wrap{width: 100%; display: flex;}
.popup_layer .closed_btn_wrap .btn_wrap{ border: 1px solid #ededed;border-top: none; width: 100%; background-color: #fff; }
.popup_layer .closed_btn_wrap .btn_wrap button{transition: 0.3s; cursor: pointer; width: 100%; padding: 15px 10px; color: #1a1a1a; border: none; background-color: #fff;}
.popup_layer .closed_btn_wrap .btn_wrap button:hover{background-color: #f1f1f1;}
.pop-swp{width: 400px; position: fixed;}
/* 테스트 시 sub_pop , sub_dim */
.sub_dim{display: block;}
.popup_layer{left: 50%; top: 50%; right: inherit; transform: translate(-50%,-50%);}
.popup_layer .popup_wrap .popup_img_wrap{width: 400px;}


/* 공동모달 media */
@media screen and (max-width: 768px) {
  .popup_dim{display: block;}
  .popup_layer{top: 50%; left: 50%; transform: translate(-50%, -50%); width: max-content;}
}
@media screen and (max-width: 575px) {
    .popup_layer{width: 82%;}
  .popup_layer .popup_wrap .popup_img_wrap{width: 100%;}
}

.popup-prev,.popup-next{cursor: pointer; z-index: 1;background-color: #ffffff60;position: absolute;top: 50%;transform:  translateY(-50%);display: flex;justify-content: center;align-items: center;border-radius: 50%;padding: 5px;}
.popup-prev i,.popup-next i{color: #fff; font-size: 26px;}

.popup-next{right: 10px;}
.popup-prev{left: 10px;}

/* 페이지네이션 */
.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: 5px 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:#ddd2ff; border-radius: 6px; color:var(--color-purple)}
.pagination .page-item .page-link.on{font-family: 'Pretendard_B'; background-color:#ddd2ff; border-radius: 6px; color:var(--color-purple);}




/* 기본 테이블 세팅 */
table{width: 100%; text-align: center;border-collapse: collapse;}
table thead{width: 100%; background-color: var(--color-BG);border-radius: 8px}
tbody tr{border-bottom: 1px solid var(--color-gray-g30-stroke);}
th{color: var(--color-Main-titleGray);font-size: 14px;}
td{color:var(--color-Text-contents); }
th,td{ padding: 15px 8px; white-space: normal;}
td:has(.btns) { padding: 5px 15px;}

th:first-child{border-radius: 8px 0 0 8px }
th:last-child{border-radius: 0 8px 8px 0;}

.mo_only{ display: none !important;}

@media screen and (max-width: 768px) {
  .pc_only{ display: none !important;}
  .mo_only{display: block !important}
}

@media screen and (max-width: 575px) {
  .fm_site{margin-right: auto; margin-left: 0;}
}
/* .pc_only{ display: none !important;} */