@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap');



/* 초기화 */
html {overflow-y:scroll}
body {margin:0;padding:0;font-size:0.75em;font-family:/*'Play',*/ 'Pretendard', 'Malgun Gothic', dotum, sans-serif; background:#fff}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em; font-family:/*'Play',*/ 'Pretendard', 'Malgun Gothic', dotum, sans-serif;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}

ul, dl,dt,dd {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;font-size:1em}
input, button {margin:0;padding:0;font-family:/*'Play',*/ 'Pretendard', 'Malgun Gothic', dotum, sans-serif; font-size:1em}
input[type="submit"] {cursor:pointer}
button {cursor:pointer}

textarea, select {font-family:/*'Play',*/ 'Pretendard', 'Malgun Gothic', dotum, sans-serif; font-size:1em}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none}

*, :after, :before {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

input[type=text],input[type=password], textarea {
-webkit-transition:all 0.30s ease-in-out;
-moz-transition:all 0.30s ease-in-out;
-ms-transition:all 0.30s ease-in-out;
-o-transition:all 0.30s ease-in-out;
outline:none;
}

input[type=text]:focus,input[type=password]:focus, textarea:focus,select:focus {
-webkit-box-shadow:0 0 5px #9ed4ff;
-moz-box-shadow:0 0 5px #9ed4ff;
box-shadow:0 0 5px #9ed4ff;
border:1px solid #558ab7 !important;
}

.placeholdersjs {color:#aaa !important}

/* 레이아웃 크기 지정 */
#hd, #wrapper, #ft {width:100%}

/* 팝업레이어 */
#hd_pop {z-index:1000;position:relative;margin:0 auto;height:0}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff}
.hd_pops img {max-width:100%}
.hd_pops_con {}
.hd_pops_footer {padding:0;background:#000;color:#fff;text-align:left;position:relative}
.hd_pops_footer:after {display:block;visibility:hidden;clear:both;content:""}
.hd_pops_footer button {padding:10px;border:0;color:#fff}
.hd_pops_footer .hd_pops_reject {background:#000;text-align:left}
.hd_pops_footer .hd_pops_close {background:#393939;position:absolute;top:0;right:0}

/* 상단 레이아웃 */
#hd {background:#fff}

/* 중간 레이아웃 */
#wrapper {}
#aside {float:right;width:235px;padding:0;height:100%;margin:20px 0 20px 20px}

#container {width:100%}

.lt_wr {width:32%}
.lt_wr:nth-child(3n+1) {clear:both}
.latest_wr {margin-bottom:20px}
.latest_wr:after {display:block;visibility:hidden;clear:both;content:""}
.latest_top_wr {margin:0 -10px 20px}
.latest_top_wr:after {display:block;visibility:hidden;clear:both;content:""}



/* 게시물 선택복사 선택이동 */
#copymove {}
#copymove .win_desc {text-align:center;display:block}
#copymove .tbl_wrap {margin:20px}
#copymove .win_btn {padding:0 20px 20px}
.copymove_current {float:right;background:#ff3061;padding:5px;color:#fff;border-radius:3px}
.copymove_currentbg {background:#f4f4f4}

/* 화면낭독기 사용자용 */
#hd_login_msg {position:absolute;top:0;left:0;font-size:0;line-height:0;overflow:hidden}
.msg_sound_only, .sound_only {display:inline-block !important;position:absolute;top:0;left:0;width:0;height:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}

/* 본문 바로가기 */
#skip_to_container a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skip_to_container a:focus, #skip_to_container a:active {width:100%;height:75px;background:#21272e;color:#fff;font-size:2em;font-weight:bold;text-align:center;text-decoration:none;line-height:3.3em}

/* ie6 이미지 너비 지정 */
.img_fix {width:100%;height:auto}

/* 캡챠 자동등록(입력)방지 기본 -pc */
#captcha {display:inline-block;position:relative}
#captcha legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
#captcha #captcha_img {height:40px;border:1px solid #898989;vertical-align:top;padding:0;margin:0}
#captcha #captcha_mp3 {margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../img/captcha2.png') no-repeat;text-indent:-999px;border-radius:3px}
#captcha #captcha_reload {margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../img/captcha2.png') no-repeat 0 -40px;text-indent:-999px;border-radius:3px}
#captcha #captcha_key {margin:0 0 0 3px;padding:0 5px;width:90px;height:40px;border:1px solid #ccc;background:#fff;font-size:1.333em;font-weight:bold;text-align:center;border-radius:3px;vertical-align:top}
#captcha #captcha_info {display:block;margin:5px 0 0;font-size:0.95em;letter-spacing:-0.1em}

/* 캡챠 자동등록(입력)방지 기본 - mobile */
#captcha.m_captcha audio {display:block;margin:0 0 5px;width:187px}
#captcha.m_captcha #captcha_img {width:160px;height:60px;border:1px solid #e9e9e9;margin-bottom:3px;margin-top:5px;display:block}
#captcha.m_captcha #captcha_reload {position:static;margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../img/captcha2.png') no-repeat 0 -40px;text-indent:-999px}
#captcha.m_captcha #captcha_reload span {display:none}
#captcha.m_captcha #captcha_key {margin:0;padding:0 5px;width:115px;height:29px;border:1px solid #b8c9c2;background:#f7f7f7;font-size:1.333em;font-weight:bold;text-align:center;line-height:29px;margin-left:3px}
#captcha.m_captcha #captcha_info {display:block;margin:5px 0 0;font-size:0.95em;letter-spacing:-0.1em}
#captcha.m_captcha #captcha_mp3 {width:31px;height:31px;background:url('../img/captcha2.png') no-repeat 0 0 ; vertical-align:top;overflow:hidden;cursor:pointer;text-indent:-9999px;border:none}

/* ckeditor 단축키 */
.cke_sc {margin:0 0 5px;text-align:right}
.btn_cke_sc {display:inline-block;padding:0 10px;height:23px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none;line-height:1.9em;vertical-align:middle;cursor:pointer}
.cke_sc_def {margin:0 0 5px;padding:10px;border:1px solid #ccc;background:#f7f7f7;text-align:center}
.cke_sc_def dl {margin:0 0 5px;text-align:left;zoom:1}
.cke_sc_def dl:after {display:block;visibility:hidden;clear:both;content:""}
.cke_sc_def dt, .cke_sc_def dd {float:left;margin:0;padding:5px 0;border-bottom:1px solid #e9e9e9}
.cke_sc_def dt {width:20%;font-weight:bold}
.cke_sc_def dd {width:30%}

/* ckeditor 태그 기본값 */
#bo_v_con ul {display:block;list-style-type:disc;margin-top:1em;margin-bottom:1em;margin-left:0;margin-right:0;padding-left:40px}
#bo_v_con ol {display:block;list-style-type:decimal;margin-top:1em;margin-bottom:1em;margin-left:0;margin-right:0;padding-left:40px}
#bo_v_con li {display:list-item}

/* 버튼 */
a.btn,.btn {line-height:35px;height:35px;padding:0 10px;text-align:center;font-weight:bold;border:0;font-size:1.4em;
-webkit-transition:background-color 0.3s ease-out;
-moz-transition:background-color 0.3s ease-out;
-o-transition:background-color 0.3s ease-out;
transition:background-color 0.3s ease-out}

a.btn01 {display:inline-block;padding:7px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none;vertical-align:middle}
a.btn01:focus, a.btn01:hover {text-decoration:none}
button.btn01 {display:inline-block;margin:0;padding:7px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none}
a.btn02 {display:inline-block;padding:7px;border:1px solid #3b3c3f;background:#4b545e;color:#fff;text-decoration:none;vertical-align:middle}
a.btn02:focus, .btn02:hover {text-decoration:none}
button.btn02 {display:inline-block;margin:0;padding:7px;border:1px solid #3b3c3f;background:#4b545e;color:#fff;text-decoration:none}

.btn_confirm {text-align:right} /* 서식단계 진행 */

.btn_submit {border:0;background:#3a8afd;color:#fff;cursor:pointer;border-radius:3px}
.btn_submit:hover {background:#2375eb}
.btn_close {border:1px solid #dcdcdc;cursor:pointer;border-radius:3px;background:#fff}
a.btn_close {text-align:center;line-height:50px}

a.btn_cancel {display:inline-block;background:#969696;color:#fff;text-decoration:none;vertical-align:middle}
button.btn_cancel {display:inline-block;background:#969696;color:#fff;text-decoration:none;vertical-align:middle}
.btn_cancel:hover {background:#aaa}
a.btn_frmline, button.btn_frmline {display:inline-block;width:128px;padding:0 5px;height:40px;border:0;background:#434a54;border-radius:3px;color:#fff;text-decoration:none;vertical-align:top} /* 우편번호검색버튼 등 */
a.btn_frmline {}
button.btn_frmline {font-size:1em}

/* 게시판용 버튼 */
a.btn_b01,.btn_b01 {display:inline-block;color:#bababa;text-decoration:none;vertical-align:middle;border:0;background:transparent}
.btn_b01:hover, .btn_b01:hover {color:#000}
a.btn_b02,.btn_b02 {display:inline-block;background:#253dbe;padding:0 10px;color:#fff;text-decoration:none;border:0;vertical-align:middle}
a.btn_b02:hover, .btn_b02:hover {background:#0025eb}
a.btn_b03, .btn_b03 {display:inline-block;background:#fff;border:1px solid #b9bdd3;color:#646982;text-decoration:none;vertical-align:middle}
a.btn_b03:hover, .btn_b03:hover {background:#ebedf6}
a.btn_b04, .btn_b04 {display:inline-block;background:#fff;border:1px solid #ccc;color:#707070;text-decoration:none;vertical-align:middle}
a.btn_b04:hover, .btn_b04:hover {color:#333;background:#f9f9f9}
a.btn_admin,.btn_admin {display:inline-block;color:#d13f4a;text-decoration:none;vertical-align:middle} /* 관리자 전용 버튼 */
.btn_admin:hover, a.btn_admin:hover {color:#ff3746}


/* 기본테이블 */
.tbl_wrap table {width:100%;border-collapse:collapse;border-spacing:0 5px;background:#fff;border-top:1px solid #ececec;border-bottom:1px solid #ececec} 
.tbl_wrap caption {padding:10px 0;font-weight:bold;text-align:left}
.tbl_head01 {margin:0 0 10px}
.tbl_head01 caption {padding:0;font-size:0;line-height:0;overflow:hidden}
.tbl_head01 thead th {padding:20px 0;font-weight:normal;text-align:center;border-bottom:1px solid #ececec;height:40px}
.tbl_head01 thead th input {vertical-align:top} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
.tbl_head01 tfoot th, .tbl_head01 tfoot td {padding:10px 0;border-top:1px solid #c1d1d5;border-bottom:1px solid #c1d1d5;background:#d7e0e2;text-align:center}
.tbl_head01 tbody th {padding:8px 0;border-bottom:1px solid #e8e8e8}
.tbl_head01 td {color:#666;padding:10px 5px;border-top:1px solid #ecf0f1;border-bottom:1px solid #ecf0f1;line-height:1.4em;height:60px;word-break:break-all}
.tbl_head01 tbody tr:hover td {background:#fafafa}
.tbl_head01 a:hover {text-decoration:underline}

.tbl_head02 {margin:0 0 10px}
.tbl_head02 caption {padding:0;font-size:0;line-height:0;overflow:hidden}
.tbl_head02 thead th {padding:5px 0;border-top:1px solid #d1dee2;border-bottom:1px solid #d1dee2;background:#e5ecef;color:#383838;font-size:0.95em;text-align:center;letter-spacing:-0.1em}
.tbl_head02 thead a {color:#383838}
.tbl_head02 thead th input {vertical-align:top} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
.tbl_head02 tfoot th, .tbl_head02 tfoot td {padding:10px 0;border-top:1px solid #c1d1d5;border-bottom:1px solid #c1d1d5;background:#d7e0e2;text-align:center}
.tbl_head02 tbody th {padding:5px 0;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:#fff}
.tbl_head02 td {padding:5px 3px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:#fff;line-height:1.4em;word-break:break-all}
.tbl_head02 a {}

/* 폼 테이블 */
.tbl_frm01 {margin:0 0 20px}
.tbl_frm01 table {width:100%;border-collapse:collapse;border-spacing:0}
.tbl_frm01 th {width:70px;padding:7px 13px;border:1px solid #e9e9e9;border-left:0;background:#f5f8f9;text-align:left}
.tbl_frm01 td {padding:7px 10px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:transparent}
.wr_content textarea,.tbl_frm01 textarea,.form_01 textarea, .frm_input {border:1px solid #d0d3db;background:#fff;color:#000;vertical-align:middle;border-radius:3px;padding:5px;
-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
}
.tbl_frm01 textarea {padding:2px 2px 3px}
.frm_input {height:40px}

.full_input {width:100%}
.half_input {width:49.5%}
.twopart_input {width:385px;margin-right:10px}
.tbl_frm01 textarea, .write_div textarea {width:100%;height:100px}
.tbl_frm01 a {text-decoration:none}
.tbl_frm01 .frm_file {display:block;margin-bottom:5px}
.tbl_frm01 .frm_info {display:block;padding:0 0 5px;line-height:1.4em}

/*기본 리스트*/
.list_01 ul {border-top:1px solid #ececec}
.list_01 li {border-bottom:1px solid #ececec;background:#fff;padding:10px 15px;list-style:none;position:relative}
.list_01 li:nth-child(odd) {background:#f6f6f6}
.list_01 li:after {display:block;visibility:hidden;clear:both;content:""}
.list_01 li:hover {background:#f9f9f9}
.list_01 li.empty_li {text-align:center;padding:20px 0;color:#666}

/*폼 리스트*/
.form_01 h2 {font-size:1.167em}
.form_01 li {margin-bottom:10px}
.form_01 ul:after,
.form_01 li:after {display:block;visibility:hidden;clear:both;content:""}
.form_01 .left_input {float:left}
.form_01 .margin_input {margin-right:1%}
.form_01 textarea {height:100px;width:100%}
.form_01 .frm_label {display:inline-block;width:130px}

/* 자료 없는 목록 */
.empty_table {padding:50px 0 !important;text-align:center}
.empty_list {padding:20px 0 !important;color:#666;text-align:center}

/* 필수입력 */
.required, textarea.required {background-image:url('../img/require.png') !important;background-repeat:no-repeat !important;background-position:right top !important}

/* 테이블 항목별 정의 */
.td_board {width:80px;text-align:center}
.td_category {width:80px;text-align:center}
.td_chk {width:30px;text-align:center}
.td_date {width:60px;text-align:center}
.td_datetime {width:110px;text-align:center}
.td_group {width:80px;text-align:center}
.td_mb_id {width:100px;text-align:center}
.td_mng {width:80px;text-align:center}
.td_name {width:100px;text-align:left}
.td_nick {width:100px;text-align:center}
.td_num {width:50px;text-align:center}
.td_numbig {width:80px;text-align:center}
.td_stat {width:60px;text-align:center}

.txt_active {color:#5d910b}
.txt_done {color:#e8180c}
.txt_expired {color:#ccc}
.txt_rdy {color:#8abc2a}

/* 새창 기본 스타일 */
.new_win {position:relative}
.new_win .tbl_wrap {margin:0 20px}
.new_win #win_title {font-size:1.3em;height:50px;line-height:30px;padding:10px 20px;background:#fff;color:#000;-webkit-box-shadow:0 1px 10px rgba(0,0,0,.1);
-moz-box-shadow:0 1px 10px rgba(0,0,0,.1);
box-shadow:0 1px 10px rgba(0,0,0,.1)}
.new_win #win_title .sv {font-size:0.75em;line-height:1.2em}
.new_win .win_ul {margin-bottom:15px;padding:0 20px}
.new_win .win_ul:after {display:block;visibility:hidden;clear:both;content:""}
.new_win .win_ul li {float:left;background:#fff;text-align:center;padding:0 10px;border:1px solid #d6e9ff;border-radius:30px;margin-left:5px}
.new_win .win_ul li:first-child {margin-left:0}
.new_win .win_ul li a {display:block;padding:8px 0;color:#6794d3}
.new_win .win_ul .selected {background:#3a8afd;border-color:#3a8afd;position:relative;z-index:5}
.new_win .win_ul .selected a {color:#fff;font-weight:bold}
.new_win .win_desc {position:relative;margin:10px;border-radius:5px;font-size:1em;background:#f2838f;color:#fff;line-height:50px;text-align:left;padding:0 20px}
.new_win .win_desc i {font-size:1.2em;vertical-align:baseline}
.new_win .win_desc:after {content:"";position:absolute;left:0;top:0;width:4px;height:50px;background:#da4453;border-radius:3px 0 0 3px}
.new_win .frm_info {font-size:0.92em;color:#919191}
.new_win .win_total {float:right;display:inline-block;line-height:30px;font-weight:normal;font-size:0.75em;color:#3a8afd;background:#f6f6f6;padding:0 10px;border-radius:5px}
.new_win .new_win_con {margin:20px 0;padding:20px}
.new_win .new_win_con:after {display:block;visibility:hidden;clear:both;content:""}
.new_win .new_win_con2 {margin:20px 0}
.new_win .btn_confirm:after {display:block;visibility:hidden;clear:both;content:""}
.new_win .win_btn {text-align:center}
.new_win .cert_btn {margin-bottom:30px;text-align:center}
.new_win .btn_close {padding:0 20px;height:45px;overflow:hidden;cursor:pointer}
.new_win .btn_submit {padding:0 20px;height:45px;font-weight:bold;font-size:1.083em}

/* 검색결과 색상 */
.sch_word {color:#fff;background:#ff005a;padding:2px 5px 3px;line-height:18px;margin:0 2px}

/* 자바스크립트 alert 대안 */
#validation_check {margin:100px auto;width:500px}
#validation_check h1 {margin-bottom:20px;font-size:1.3em}
#validation_check p {margin-bottom:20px;padding:30px 20px;border:1px solid #e9e9e9;background:#fff}

/* 사이드뷰 */
.sv_wrap {position:relative;font-weight:normal}
.sv_wrap .sv {z-index:1000;display:none;margin:5px 0 0;font-size:0.92em;background:#333;
-webkit-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);
box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2)}
.sv_wrap .sv:before {content:"";position:absolute;top:-6px;left:15px;width:0;height:0;border-style:solid;border-width:0 6px 6px 6px;border-color:transparent transparent #333 transparent}
.sv_wrap .sv a {display:inline-block;margin:0;padding:0 10px;line-height:30px;width:100px;font-weight:normal;color:#bbb}
.sv_wrap .sv a:hover {background:#000;color:#fff}
.sv_member {color:#333}
.sv_on {display:block !important;position:absolute;top:23px;left:0px;width:auto;height:auto}
.sv_nojs .sv {display:block}

/* 페이징 */
.pg_wrap {clear:both;float:left;display:inline-block}
.pg_wrap:after {display:block;visibility:hidden;clear:both;content:""} 
.pg {text-align:center}
.pg_page, .pg_current {display:inline-block;vertical-align:middle;background:#eee;border:1px solid #eee}
.pg a:focus, .pg a:hover {text-decoration:none}
.pg_page {color:#959595;font-size:1.083em;height:30px;line-height:28px;padding:0 5px;min-width:30px;text-decoration:none;border-radius:3px}
.pg_page:hover {background-color:#fafafa}
.pg_start {text-indent:-999px;overflow:hidden;background:url('../img/btn_first.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee}
.pg_prev {text-indent:-999px;overflow:hidden;background:url('../img/btn_prev.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee}
.pg_end {text-indent:-999px;overflow:hidden;background:url('../img/btn_end.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee}
.pg_next {text-indent:-999px;overflow:hidden;background:url('../img/btn_next.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee}
.pg_start:hover,.pg_prev:hover,.pg_end:hover,.pg_next:hover {background-color:#fafafa}

.pg_current {display:inline-block;background:#3a8afd;border:1px solid #3a8afd;color:#fff;font-weight:bold;height:30px;line-height:30px;padding:0 10px;min-width:30px;border-radius:3px}

/* cheditor 이슈 */
.cheditor-popup-window *, .cheditor-popup-window :after, .cheditor-popup-window :before {
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
}

/* Mobile화면으로 */
#device_change {display:block;margin:0.3em;padding:0.5em 0;border:1px solid #eee;border-radius:2em;background:#fff;color:#000;font-size:2em;text-decoration:none;text-align:center}







.header{display:flex;position:fixed; top: 0; left: 0; width: 100%;  align-items:center; box-sizing:border-box; padding: 0 100px; z-index: 500;}
.header::after{content:''; position:absolute; top: 95px; left: 0; width: 100%; height: 1px; background: #eee; opacity: 0.3; z-index: -1; opacity: 0;}
.header::before,
.header .bg{display:block; position:absolute; top: 0; left: 0; width: 100%; height: 379px; background: #000; opacity: 0; visibility: hidden; transform: translateY(-14px); z-index: -1; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;}
.header::before{content:''; display:block; height: 95px; opacity: 0; visibility: visible; transform: none; transition: opacity 0.4s ease;}
.header .logo{position:relative; width: 170px; height: 57px; background:url('/img/main/logo.png') 50% 50% no-repeat; z-index: 20;}
.header .logo{margin-left:-36px;}
.header .logo a{position:absolute; top: 0; right: 0; bottom: 0; left: 0;} 
.header .gnb{width: calc(100% - 343px);}
.header .gnb > ul{display:flex; justify-content:center;}
.header .gnb > ul{transform:translateX(50px);}
.header .gnb > ul > li{position:relative; }
.header .gnb > ul > li > a{position:relative; display:inline-block; vertical-align: top; line-height: 95px; font-weight:500; font-size:22px; color: #fff; padding: 0 46px; transition:0.4s}
.header .gnb > ul > li > a.store_menu_link{display:inline-flex; align-items:center; gap:9px; line-height:95px;}
.header .gnb > ul > li > a.store_menu_link .fa{font-size:20px; line-height:1;}
.header .gnb > ul > li > a::after{content:""; position:absolute; bottom: -1px; left: 50%; width: 0; height: 2px; background: #31cfff; transition:0.4s; transform:translateX(-50%);} 
.header .gnb > ul > li > ul{display:block; position:absolute; top: 95px; left: 0; width: 100%; padding: 37px 0; z-index: 10; overflow: hidden; height: 284px; opacity: 0; visibility: hidden; transform: translateY(-12px); pointer-events: none; transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0.4s;}
.header .gnb > ul > li:first-of-type > ul::before{content:''; position:absolute; top: 0; left: 0; width: 1px; height:284px !important; background: #eee; opacity: 0.3;}
.header .gnb > ul > li > ul::after{content:''; position:absolute; top: 0;right: 0; width: 1px; height: 284px !important; background: #eee; opacity: 0.3}
.header .gnb > ul > li > ul > li{}
.header .gnb > ul > li > ul > li > a{display:inline-block;vertical-align: top; width: 100%; text-align: center; font-weight:300; font-size:16px; color: #fff; opacity: 0.8; padding: 7px 0;}
.header .gnb > ul > li > ul > li:hover > a{color: #31cfff; opacity: 1;}
/* 오른쪽 칸에 운영 기관 바로가기가 들어가 넓힌다 — 그만큼 가운데 메뉴 칸을 줄인다 */
.header .header_ui{width: 190px; display:flex; align-items:center; justify-content:flex-end; gap:14px;}
/* 운영 기관 바로가기 — 메뉴가 아니라 곁들이는 링크라 테두리만 두른 작은 알약으로 둔다.
   1200px 아래에서는 메뉴가 햄버거로 바뀌며 자리가 없어 감춘다 (햄버거 안 COMPANY > 운영 기관으로 간다). */
.header .hd-mmec{display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 14px;
	border:1px solid rgba(255,255,255,.45); border-radius:999px; white-space:nowrap;
	font-size:13px; font-weight:500; letter-spacing:-0.03em; color:#fff; text-decoration:none;
	transition:border-color .2s, background-color .2s; z-index:20;}
.header .hd-mmec:hover{border-color:#31cfff; background:rgba(49,207,255,.14);}
.header .hd-mmec-ic{width:7px; height:7px; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor;
	transform:rotate(45deg); margin-top:-1px;}

/* 헤더는 좌우 여백이 100px 로 못 박혀 있고 메뉴 줄이 오른쪽으로 50px 밀려 있다 —
   오른쪽에 바로가기 링크가 붙으면서 1500px 아래에서 CONTACT 를 파고든다
   (2026-08-12 실측 : 1440px 에서 -40px). 폭에 맞춰 여백·글자·밀림을 함께 줄인다.
   1200px 아래는 메뉴가 햄버거로 바뀌고 링크도 숨으므로 여기서 다루지 않는다. */
@media (max-width: 1700px) {
	.header{ padding: 0 60px; }
	.header .gnb > ul > li > a{ padding: 0 34px; }
}
@media (max-width: 1500px) {
	.header{ padding: 0 40px; }
	.header .gnb > ul{ transform: none; }
	.header .gnb > ul > li > a{ padding: 0 24px; font-size: 20px; }
}
@media (max-width: 1340px) {
	.header{ padding: 0 26px; }
	.header .gnb > ul > li > a{ padding: 0 15px; font-size: 18px; }
	.header .hd-mmec{ height: 30px; padding: 0 11px; font-size: 12px; gap: 6px; }
	.header .header_ui{ width: 160px; gap: 10px; }
	.header .gnb{ width: calc(100% - 300px); }
}
.header .header_ui .lang{position:relative; z-index: 20;}
/* 언어 선택기 임시 숨김 (2026-07-29) — 라이브(SPA)엔 없어 맞춤. 되살리려면 아래 한 줄 삭제 */
.header .header_ui .lang{display:none;}
.header .header_ui .lang > li{position:relative; cursor: pointer;}
.header .header_ui .lang li img{vertical-align: middle; margin-right: 8px;}
.header .header_ui .lang li span{display:inline-block; font-weight:300; font-size:12px; color: #fff;vertical-align: middle;}
.header .header_ui .lang li span i{vertical-align: middle;}
.header .header_ui .lang li ul{display:none; position:absolute; top: 36px; left: 0; background: #fff; width: 100%; border-radius:5px; padding: 12px 0;}
.header .header_ui .lang li ul li{}
.header .header_ui .lang li ul li a{display:inline-block; vertical-align: top; width: 100%; text-align: center; padding: 5px 0; font-size:13px; color: #000; opacity: 0.7;}
.header .header_ui .m_btn{display:none; position:relative; width: 27px; height: 27px; text-align: center;cursor: pointer; z-index: 20;}
.header .header_ui .m_btn span{display:inline-block; vertical-align: top; position:relative; width: 27px; height: 3px; background: #fff; margin-top: 12px; transition:0.3s}
.header .header_ui .m_btn span::after{content:""; display:inline-block; vertical-align: top;  position:absolute; top: -8px; left: 0; width: 27px; height: 3px; background: #fff; transition:0.3s}
.header .header_ui .m_btn span::before{content:""; display:inline-block; vertical-align: top;  position:absolute; top: 8px; left: 0; width: 16px; height: 3px; background: #fff; transition:0.3s}
.header .header_ui .m_gnb{position:fixed; top: 0; right: -100%; width: 100%; max-width: 640px; height: 100%; background: #000000d6; transition:0.6s}
.header .header_ui .m_gnb > ul{margin-top: 85px;}
.header .header_ui .m_gnb > ul > li{}
.header .header_ui .m_gnb > ul > li > a{width: 100%; display:inline-block; vertical-align: top; font-weight:600; font-size:45px; letter-spacing:-0.025em; color: #fff; padding: 18px 56px;}
.header .header_ui .m_gnb > ul > li > ul{display:none; margin: 5px 0 14px;}
.header .header_ui .m_gnb > ul > li > ul > li{}
.header .header_ui .m_gnb > ul > li > ul > li > a{display:inline-block; width: 100%; vertical-align: top; padding: 8px 56px; font-weight: 300; font-size:18px; color: #fff;}
.header .gnb > ul > li:hover > a::after{width: 100%;}
.header.hover::after{opacity: 0.3;}
.header.hover .bg{opacity: 0.8; visibility: visible; transform: translateY(0); transition-delay: 0s;}
.header.hover .gnb > ul > li > a{padding: 0 3.1vw;}
.header.hover .gnb > ul > li > ul{opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; transition-delay: 0s;}
.header.hover .gnb > ul > li:first-of-type > ul::before,
.header.hover .gnb > ul > li > ul::after{opacity: 0.3; height: 284px;}
.header.scroll::before{opacity: 0.7;}
.header.scroll .bg{top: 95px; height: 284px;}
.header .header_ui .m_btn.on span{background: transparent;}
.header .header_ui .m_btn.on span::before{width: 27px; top: 0; transform:rotate(45deg);}
.header .header_ui .m_btn.on span::after{top: 0; transform:rotate(-45deg);}
.header .header_ui .m_gnb.on{right: 0;}

@media (max-width: 1400px){
	.header.hover .gnb > ul > li > a{padding: 0 2.5vw;}
}

@media (max-width: 1200px){
	.w1200,
	.w1500{padding: 0 16px;}

	.header{height: 76px; align-items:center; justify-content:space-between; padding: 0 16px;}
	.header::before{height: 76px}
	.header .logo{margin-left:0;}
	.header .gnb{display:none;}
	/* 메뉴가 햄버거로 바뀌는 폭 — 곁들이는 바로가기 링크는 자리가 없어 감춘다
	   (햄버거 안 SERVICES > 교육 으로 간다) */
	.header .hd-mmec{display:none;}
	.header .header_ui{display:flex; width: auto;}
	.header .header_ui .m_btn{display:block; margin-left: 50px;}

	.footer .top{flex-wrap:wrap; padding: 60px 16px 40px;}
	.footer .top .f_logo{margin-right: 0}
	.footer .top .addr{width: 100%;margin-top: 30px;}
	.footer .top .family{right: 16px; bottom: 40px;}


}
@media (max-width:800px){
	.header .header_ui .m_gnb > ul > li > a{padding: 18px 16px; font-size:35px;}
	.header .header_ui .m_gnb > ul > li > ul{margin: 0;}
	.header .header_ui .m_gnb > ul > li > ul > li > a{padding: 8px 26px;}

	.footer .top .addr{}
	.footer .top .addr ul{flex-wrap:wrap;}
	.footer .top .addr ul li:last-of-type{width: 100%; margin-top: 10px;}
	.footer .top .family{position:relative; bottom: 0; right: 0; margin-top: 20px;}



}
@media (max-width:500px){
	.header .header_ui .m_btn{margin-left: 20px;}
	.header .header_ui .m_gnb > ul > li > a{padding: 18px 16px;}
	.header .header_ui .m_gnb > ul > li > ul > li > a{padding: 8px 16px;}
}


/* ===== VISUAL ===== */
.visual {position:relative; height:100vh;}
.visual .visual-slider {overflow:hidden;position:relative;height:100%;}
.visual .swiper-slide {overflow:hidden;position:relative;height:100%;}
.visual .visual-txt-wrap {display:flex;justify-content:center;align-items:center;position:relative;z-index:1;margin:0 auto;max-width:1300px;height:100%; padding:0 20px}
.visual .visual-txt-wrap span {opacity:0;visibility:hidden;display:block;margin-bottom:14px;font-size:40px;color:#fff; line-height:60px; font-weight:700; }
.visual .visual-txt-wrap h2 {opacity:0;visibility:hidden;font-size:80px;color:#fff;font-weight:700;letter-spacing:0;padding: 0 0 10px 0;   }
.visual .visual-txt-wrap p {opacity:0;visibility:hidden; font-size:24px; color:white;line-height: 70px;}
.visual .visual-txt {margin-top:30px;width:100%;}
.visual .visual-bg-wrap {position:absolute;left:0;top:0;width:100%;height:100%;  }
.visual .visual-bg {position:absolute;left:0;top:0;width:100%;height:100%;background-size:cover;background-position:center center;background-repeat:no-repeat;-webkit-transition:all 5s ease;transition:all 5s ease;-webkit-transform:scale(1.08);transform:scale(1.08);}
/*.visual .swiper-button-prev {opacity:0 !important;left:0 !important;top:0 !important;margin:0 !important;width:30% !important;height:100% !important;background:none !important;}
.visual .swiper-button-next {opacity:0 !important;right:0 !important;top:0 !important;margin:0 !important;width:30% !important;height:100% !important;background:none !important;}*/
.visual .swiper-button-disabled {pointer-events:auto !important;}
/* 슬라이드 위치 — 모바일 히어로와 같은 알약 점이다 (사용자 결정 2026-08-24).
   종전에는 좌측 상단 구석(top:220px · 폭 20%)에 30px 그림 알 일곱을 흩어 놓아
   눈에 띄지 않았다. 하단 가운데로 모으고 현재 장만 길게 늘인다. */
/* 바닥 표식 한 줄 — 위치 점과 내려가기를 한 덩어리로 묶는다 */
.hero_cue {position:absolute; left:0; right:0; bottom:40px; z-index:10;
  display:flex; justify-content:center; align-items:center; gap:22px;}
.hero_cue__sep {width:1px; height:16px; background:rgba(255,255,255,.3);}
.visual .swiper-pagination {display:flex;justify-content:center;align-items:center;gap:9px;
  position:static;width:auto;padding:0;transform:none;height:auto;}
.visual .swiper-pagination-bullet {opacity:1;flex:none;display:block;margin:0;padding:0;
  width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.45);
  transition:width .25s ease, background .25s ease !important;}
.visual .swiper-pagination-bullet:hover {background:rgba(255,255,255,.75);}
.visual .swiper-pagination-bullet span,
.visual .swiper-pagination-bullet strong {display:none;}
.visual .swiper-pagination-bullet.swiper-pagination-bullet-active {opacity:1;transform:none !important;
  width:30px;border-radius:5px;background:#fff;}
.visual .swiper-slide-active .visual-bg {-webkit-transform:scale(1);transform:scale(1);}
.visual .swiper-slide-active .visual-txt-wrap span {-webkit-animation:fadeUp 1s 1.2s forwards;animation:fadeUp 1s 1.2s forwards;}
.visual .swiper-slide-active .visual-txt-wrap h2 {-webkit-animation:fadeUp 1s 1.1s forwards;animation:fadeUp 1s 1.1s forwards;}
.visual .swiper-slide-active .visual-txt-wrap p {-webkit-animation:fadeUp 1s 1.2s forwards;animation:fadeUp 1s 1.2s forwards;}
.visual .load-init .swiper-slide-active .visual-txt-wrap span {-webkit-animation:fadeUp 1s 0.4s forwards;animation:fadeUp 1s 0.4s forwards;}
.visual .load-init .swiper-slide-active .visual-txt-wrap h2 {-webkit-animation:fadeUp 1s 0.3s forwards;animation:fadeUp 1s 0.3s forwards;}
.visual .load-init .swiper-slide-active .visual-txt-wrap p {-webkit-animation:fadeUp 1s 0.4s forwards;animation:fadeUp 1s 0.4s forwards;}
@media all and (-ms-high-contrast:none) {
*::-ms-backdrop, 
.visual *{ opacity: 0.99; }
}
@-webkit-keyframes fadeUp {
from {opacity:0;visibility:hidden;-webkit-transform: translateY(40px);transform: translateY(40px);}
to {opacity:1;visibility:visible;-webkit-transform: translateY(0);transform: translateY(0);}
}
@keyframes fadeUp {
from {opacity:0;visibility:hidden;-webkit-transform: translateY(40px);transform: translateY(40px);}
to {opacity:1;visibility:visible;-webkit-transform: translateY(0);transform: translateY(0);}
}

/* ===== SWIPER COMMON SETTING ===== */
.swiper-button-next {right:30px;margin-top:-18px;width:125px !important;height:33px !important;	background:url('/img/main/next.png') no-repeat center !important;}
.swiper-button-prev {left:30px;margin-top:-18px;width:125px !important;height:33px !important;		background:url('/img/main/prev.png') no-repeat center !important;}
.swiper-pagination {display:flex;justify-content:center;align-items:center;position:static;width:100%;height:7px;transform:none;transition:none;}
.swiper-pagination-bullet {opacity:1;display:block;margin:0 14px;width:5px;height:5px;background-color:#666;vertical-align:middle;-webkit-transition:all 0.4s ease;transition:all 0.4s ease;}
.swiper-pagination-bullet.swiper-pagination-bullet-active {-webkit-transform:scale(1.4);transform:scale(1.4);}

/* 아래로 내려가라는 표시 — 눌러서 실제로 내려간다.
   종전(.scroll_animation)은 「Scroll」을 90도 눕히고 1px 선을 그어 두어 거의 안 보였다.
   위치 점이 하단 가운데(bottom:38px)로 와서 그 위에 세운다. */
/* 내려가기 — 보기만 하는 표식이 아니라 눌러서 실제로 한 화면 아래로 간다 */
.scroll_cue {display:flex; align-items:center; gap:7px; padding:6px 2px;
  border:0; background:none; color:#fff; cursor:pointer;
  font-size:11px; font-weight:800; letter-spacing:.14em; font-family:inherit;
  opacity:.9; transition:opacity .2s ease;}
.scroll_cue:hover {opacity:1;}
.scroll_cue i {display:block; width:9px; height:9px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px); animation:cue_bob 1.8s ease-in-out infinite;}
@keyframes cue_bob { 0%,100% {opacity:.9;} 50% {opacity:.3;} }
@media (prefers-reduced-motion: reduce) { .scroll_cue i {animation:none;} }
@keyframes updown { 0% {height:0%} 100% {height:100%} }



.mb10 {margin-bottom:10px}
.mb20 {margin-bottom:20px}
.mb30 {margin-bottom:30px}
.mb40 {margin-bottom:40px}
.mb50 {margin-bottom:50px}
.mb60 {margin-bottom:60px}
.mb70 {margin-bottom:70px}
.mb80 {margin-bottom:80px}
.mb90 {margin-bottom:90px}
.mb100 {margin-bottom:100px}

.main_wrap_1300 {position:relative; width:1300px; margin:0 auto}

#main_business {position:relative; width:100%; height:860px; background:url('/img/main/main_business_bg.jpg') no-repeat top center; background-size:cover; padding:70px 0 0 0}
#main_business .main_business_left_box {position:relative; width:690px; float:left; padding-top:25px}
#main_business .main_business_right_box {position:relative; width:610px; float:left}
.main_business_left_box h2 {font-size:60px; font-weight:700;}
.main_business_left_box h2 span {color:var(--dair-cyan-ink,#0a7fae)}
.main_business_left_box h3 {font-size:24px; color:#444444; line-height:34px; font-weight:500}
.main_business_left_box p {font-size:20px; color:#666; font-weight:300; line-height:30px}



.map_tabs {overflow:hidden; position:relative; width:690px;}
ul.tabs {display:inline-block; position:relative}
ul.tabs li {height:100px; font-size:22px; line-height:50px; border-left:none; overflow:hidden; position:relative; float:left; padding:20px 20px 0px 0;}
ul.tabs li a {text-decoration:none; color:#000; font-weight:500; display:block; padding:0; text-align:center;}
ul.tabs li a:hover {color:#000;}
ul.tabs li.active a {color:var(--dair-cyan-ink,#0a7fae); }
ul.tabs li.active a:before {content:""; background:#31cfff; width:10px; height:10px; display:block; top:10px; left:3px; position:absolute; border-radius:100px;}
.tab_content {width:690px; position:relative; top:80px;}

.tab_container p {font-size:24px; font-weight:700; color:var(--dair-cyan-ink,#0a7fae)}
.tab_container p span {font-size:18px; font-weight:300; color:#666}
.tab_container a {font-size:16px; font-weight:700}

#main_technology {position:relative; width:100%; height:670px; background:url('/img/main/main_technology_bg.jpg') no-repeat top center; background-size:cover; padding:140px 0 0 0; text-align:center; color:#fff}
#main_technology h3 {font-size:18px; font-weight:300;}
#main_technology h2 {font-size:60px; font-weight:700}
#main_technology ul li {width:325px; text-align:center; float:left}
#main_technology ul li p {font-size:24px; padding-top:25px; line-height:34px}

#main_partners {padding:80px 0 0 0}
#main_partners h2 {font-size:60px; font-weight:700; text-align:center;}
#main_partners h3 {font-size:18px; font-weight:300; color:#666; text-align:center;}
#main_partners h2 span {color:var(--dair-cyan-ink,#0a7fae);}
#main_partners .client_box { padding: 0 100px; border-top: 1px solid #f0f0f0; position: relative; }
#main_partners .client_slide { height: 214px; overflow: hidden; }
#main_partners .swiper-slide { display: flex; align-items: center; justify-content: center; }


#main_contact {position:relative; width:100%; height:485px; background:url('/img/main/main_contact_bg.jpg') no-repeat; background-size:cover; padding:145px 0 0 0; text-align:center;}
#main_contact h2 {font-size:40px; font-weight:300; color:#fff; line-height:55px}
#main_contact h2 span {font-weight:600}

#main_contact .main_contact_btn {position:relative; width:270px; height:55px; line-height:55px; background:#fff; font-size:18px;  display:inline-block; top:50px; border-radius:100px;}
#main_contact a {color:#000}


/* 하단 레이아웃 */
/* 회사 표기(상호·대표·사업자번호·연락처)를 담느라 줄이 늘어 높이를 푼다 — 185px 로 못 박으면
   글이 바닥 밖으로 나간다. 로고는 머리(170px)보다 확실히 작게 두어 주소·연락처가 앞에 선다. */
#ft {background:#2b2c2e; width:100%; margin:0 auto; height:auto; padding:44px 0 40px}
.ft_wrap {width:1300px; margin:0 auto; position:relative}
.ft_wrap > div:first-child img {width:104px; height:auto; display:block}
.ft_wrap p {padding-top:20px; color:#aaa; font-size:16px; line-height:26px}
/* 기본 리셋이 p 에 word-break:break-all 을 걸어 두어 사업자번호가 '415-87-023 / 99' 로
   끊긴다 — 회사 표기는 말 단위로 접고, 번호·연락처는 통째로 묶는다 */
.ft_wrap .ft-corp {word-break:keep-all}
.ft_wrap .ft-corp .nb {white-space:nowrap}
.ft_wrap .ft-corp a {color:#aaa; text-decoration:none}
.ft_wrap .ft-corp a:hover {color:#fff; text-decoration:underline}
.ft_blog {position:absolute; right:0; top:0px}

#ft_catch {margin:20px 0 10px}
#top_btn {position:fixed;bottom:20px;right:20px;width:50px;height:50px;line-height:46px;border:2px solid #333;color:#333;text-align:center;font-size:15px;z-index:90;background:rgba(255,255,255,0.5)}
#top_btn:hover {border-color:#3059c7;background:#3059c7;color:#fff}




/*sub_page*/
#visual {position:relative; overflow:hidden; width:100%; height:575px; box-sizing:border-box;}
#visual .subtop {position:absolute; width:100%; height:575px; background-position:top center; background-repeat:no-repeat; animation:animate_background 2s ease-in-out; background-size: cover;}
#visual .content01_top {background-image:url('/img/sub/content01_top_bg.jpg');}
#visual .content02_top {background-image:url('/img/sub/content02_top_bg.jpg');}
#visual .content03_top {background-image:url('/img/sub/content03_top_bg.jpg?v=20260821');}
/* 항공 전경 사진이 밝아 위에 얹힌 흰 제목·탭과 상단 메뉴가 묻힌다.
   CONTACT 배너와 같은 방식으로 이 배너에만 어두운 막을 덮는다. */
#visual .content03_top:after {content:''; position:absolute; left:0; top:0; right:0; bottom:0;
  background:linear-gradient(180deg, rgba(8,14,22,.60) 0%, rgba(8,14,22,.34) 38%, rgba(8,14,22,.50) 72%, rgba(8,14,22,.66) 100%);}
#visual .content04_top {background-image:url('/img/sub/content04_top_bg.jpg');}
/* 연혁 전용 — 격납고에 늘어선 기체. 모바일 히어로(lede/history.webp)와 같은 사진이다.
   원본(nano-banana/done/company-history.png · 2816x1536)에서 1920x575 로 잘랐다.
   이 사진은 다른 배너보다 바닥이 밝아 아래쪽 탭 글자가 묻힌다 — 아래로 갈수록
   짙어지는 막을 한 겹 깐다 (다른 배너에는 없다). */
/* 인증과 실적 전용 — 증서를 주고받는 장면. 모바일 히어로(lede/cert.webp)와 같은 사진이다.
   종전에는 COMPANY 공용 배너(content04_top)를 소개 말씀과 함께 썼다.
   이 사진도 아래쪽이 밝아 탭 글자가 묻히므로 연혁과 같은 막을 깐다. */
#visual .content0403_top {background-image:
  linear-gradient(180deg, rgba(10,14,20,0) 40%, rgba(10,14,20,.30) 66%, rgba(10,14,20,.62) 100%),
  url('/img/sub/content0403_top_bg.jpg?v=20260824');}
#visual .content0402_top {background-image:
  linear-gradient(180deg, rgba(10,14,20,0) 40%, rgba(10,14,20,.30) 66%, rgba(10,14,20,.62) 100%),
  url('/img/sub/content0402_top_bg.jpg?v=20260824');}
#visual .content05_top {background-image:url('/img/sub/content05_top_bg.jpg?v=20260821');}
/* CONTACT 배너만 밝은 실내 사진이라 위에 얹힌 흰 제목·탭과 상단 메뉴가 묻힌다.
   전 지면 공용 .subtop 을 어둡게 하면 다른 배너까지 어두워지므로 이 배너만 덮는다.
   메뉴가 앉는 위쪽을 가장 진하게 둔다. */
#visual .content05_top:after {content:''; position:absolute; left:0; top:0; right:0; bottom:0;
  background:linear-gradient(180deg, rgba(8,14,22,.62) 0%, rgba(8,14,22,.34) 40%, rgba(8,14,22,.30) 70%, rgba(8,14,22,.44) 100%);}


@keyframes animate_background {
0% {transform: scale(1.12); -ms-transform: scale(1.12); -webkit-transform: scale(1.12); }
100%  {transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); }
}

#visual h2{position:relative; color:#fff; top:250px; font-size:65px; } 
#visual .tab_menu {position:relative; top:400px}
#visual .tab_menu ul{display: flex; flex-wrap: wrap; justify-content: start;}
#visual .tab_menu ul li{font-size: 20px;  font-weight: 500;}
#visual .tab_menu ul li{margin-right: 90px;}
#visual .tab_menu ul li a{color: rgba(255, 255, 255, 0.5); box-sizing: border-box; cursor: pointer; transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -o-transition: color 0.3s ease;}
#visual .tab_menu ul li.active a,
#visual .tab_menu ul li a:hover{color: #31cfff;}
#visual .tab_menu ul li span{position: relative; padding-bottom: 5px;}
/* 활성 표시는 글자 아래 밑줄 하나로 한다.
   예전에는 글자 위 25px 에 시안 점이 떠 있었는데, 자리를 글자 폭의 10%(left:10%)로
   잡아 두어 탭 이름이 길수록 오른쪽으로 밀렸다 — '연혁'(35px)에서는 아예 글자
   왼쪽 밖으로 나갔다. 밑줄은 글자에 붙어 있어 이름 길이와 무관하게 늘 맞는다.
   모바일도 같은 이유로 점을 걷어 냈다(mobile.css). */
#visual .tab_menu ul li span:after{display: block; content: ''; position: absolute;
	left: 0; bottom: -4px; width: 100%; height: 3px; background-color: #31cfff;
	transform: translate3d(0,0,0) scaleX(0); transform-origin: left center;
	transition: transform 0.3s ease; -webkit-transition: transform 0.3s ease;}
#visual .tab_menu ul li.active span:after{transform: translate3d(0,0,0) scaleX(1);}
#visual .tab_menu em {font-style:normal; font-size:16px; font-weight:300}

.subtop_wrap {width:1300px; margin:0 auto; position:relative; }
.subtop_wrap h2{position:relative; color:#fff; top:370px; font-size:50px; font-weight:800; line-height:100%; } 
.subtop_wrap .brand_story_top_text01 {position:relative; color:#fff; top:450px; font-size:24px; font-weight:400; }
.subtop_wrap .brand_story_top_text02 {position:relative; color:#fff; top:470px; font-size:20px; opacity:0.6} 


#sub_content {position:relative; width:100%; padding:80px 0 0 0}
.sub_1300_wrap {position:relative; width:1300px; margin:0 auto}

.sct {text-align:center}

.sub_text16 {font-size:16px; line-height:26px;}
.sub_text20 {font-size:20px; line-height:30px; font-weight:300}
.sub_text20_w {font-size:20px; line-height:30px; font-weight:700}
.sub_text22 {font-size:22px; line-height:32px; font-weight:300}
.sub_text27 {font-size:27px; line-height:37px; font-weight:300}
.sub_text23 {font-size:23px; line-height:34px; letter-spacing:-1px}

.sub_tit50 {font-size:50px; font-weight:700}
.sub_stit45 {font-size:45px; line-height:55px; font-weight:600;}
.sub_stit35 {font-size:35px; line-height:45px; font-weight:600;}
.sub_stit30 {font-size:30px; line-height:40px; font-weight:600;}
.sub_stit24 {font-size:24px; font-weight:600; line-height:34px}

.t_blod {font-weight:bold}
.t_sky {color:var(--dair-cyan-ink,#0a7fae)}
.t_gray {color:#666}
.t_rd {position:relative; padding:0 0 0 15px;}
.t_rd:after {content:""; width:6px; height:6px; border-radius:100px; background:#31cfff; display:block; position:absolute; top:13px; left:0}

.mb10 {margin-bottom:10px}
.mb20 {margin-bottom:20px}
.mb30 {margin-bottom:30px}
.mb40 {margin-bottom:40px}
.mb50 {margin-bottom:50px}
.mb60 {margin-bottom:60px}
.mb70 {margin-bottom:70px}
.mb80 {margin-bottom:80px}
.mb90 {margin-bottom:90px}
.mb100 {margin-bottom:100px}
.mb110 {margin-bottom:110px}
.mb120 {margin-bottom:120px}
.mr140 {margin-right:140px}

.sub_bor_box {text-align:center;}

.sub_bor_box ul li {position:relative;  width:150px; height:150px;  border:1px solid #ddd; border-radius:7px; letter-spacing:-1px; display:inline-block; font-size:22px; color:#666; background:#fff; vertical-align: top; padding-top:60px; margin:0 15px; line-height:32px}
.sub_bor_box ul li:nth-child(3) {padding-top:45px}
.sub_bor_box ul li:after {content:''; height:5px; width:35px; background:#31cfff; left:149px; position:absolute; top:50%}
.sub_bor_box ul li:nth-child(7):after {display:none}
.sub_bor_box ul li .sub_arw::after {content:""; position:absolute; transform:rotate(40deg); left:167px; top:69px; width:16px; height:5px; border-radius:10px; background:#31cfff; z-index:9}
.sub_bor_box ul li .sub_arw::before {content:""; position:absolute; left:167px; top:79px; width:16px; height:5px; border-radius:10px; background:#31cfff; transform:rotate(-40deg); z-index:9}

.sub_bor_5box {text-align:center;}
.sub_bor_5box ul li {position:relative;  width:150px; height:150px;  border:1px solid #ddd; border-radius:7px; letter-spacing:-1px; display:inline-block; font-size:22px; color:#666; background:#fff; vertical-align: top; padding-top:45px; margin:0 15px; line-height:32px}
.sub_bor_5box ul li:after {content:''; height:5px; width:35px; background:#31cfff; left:149px; position:absolute; top:50%}
.sub_bor_5box ul li .sub_arw::after {content:""; position:absolute; transform:rotate(40deg); left:169px; top:69px; width:16px; height:5px; border-radius:10px; background:#31cfff; z-index:9}
.sub_bor_5box ul li .sub_arw::before {content:""; position:absolute; left:169px; top:79px; width:16px; height:5px; border-radius:10px; background:#31cfff; transform:rotate(-40deg); z-index:9}



.sub_bor_arw {position:relative; margin:45px 0 50px 100px; width:740px; text-align:center; border-top:5px solid #31cfff; padding:15px 0 0 0; font-size:20px; color:#666; letter-spacing:-1px}
.sub_bor_arw:after {content:''; height:25px; width:5px; background:#31cfff; left:0px; position:absolute; top:-30px}
.sub_bor_arw:before {content:''; height:25px; width:5px; background:#31cfff; right:0px; position:absolute; top:-30px}

.sub_bor_arw p::after {content:""; position:absolute; transform:rotate(-40deg); left:-10px; top:-30px; width:16px; height: 5px; border-radius: 10px; background: #31cfff;  z-index:9}
.sub_bor_arw p::before {content: ""; position:absolute; left:-1px;  top:-30px; width: 16px; height: 5px; border-radius: 10px; background: #31cfff;  transform: rotate(40deg); z-index:9}

.sub_full_bg {width:100%;  background:var(--dair-bg-soft,#dce0e8); padding:130px  0}


.stit_arw {position:relative; padding:0 0 0 30px}
.stit_arw:before {top:14px; transform:rotate(-40deg); background:#31cfff;content:""; position:absolute; left:0px; top:23px; width:16px; height:7px; border-radius:4px; background:#31cfff; opacity:0.8;}
.stit_arw:after {top:8px; transform:rotate(40deg); content:""; position:absolute; left:0px; top:16px; width:16px; height:7px; border-radius:4px; background:#0033ff; opacity:0.8;}


.sub_box_icon {position:relative; display:inline-block}
.sub_box_icon ul li {position:relative; float:left; width:238px; height:190px; background:#fff; border-radius:10px; margin:0 116px 0 0; text-align:center; font-size:22px; padding-top:30px}
.sub_box_icon ul li:last-child {margin:0}
.sub_box_icon img {width:auto; height:88px; margin-bottom:15px}

.sub_box_icon ul li::after {content:""; position:absolute; left:280px; top:50%; width:30px; height:5px; border-radius:10px; background:#0033ff; z-index:9; opacity:0.7}
.sub_box_icon ul li::before {content:""; position:absolute; left:293px; top:43%; width:5px; height:30px; border-radius:10px; background:#0033ff; z-index:9; opacity:0.7}
.sub_box_icon ul li:last-child::after {display:none}
.sub_box_icon ul li:last-child::before {display:none}

.rd_box {position:relative; display:inline-block;}
.rd_box_img {width:146px; height:146px; float:left; margin:0 54px 0 0; background:#eefcff; border-radius:100px; line-height:146px; text-align:center;}
.rd_box_text {width:1100px; float:left; padding:40px 0 0 0}
.rd_box_img_w {width:146px; height:146px; float:left; margin:0 54px 0 0; background:#fff; border-radius:100px; line-height:146px; text-align:center;}

.rd_box_img img {width:auto; height:70px;}
.rd_box_img_w img {width:auto; height:70px; }

.sub_img_2box {position:relative; display:inline-block}
.sub_img_2box ul li {width:580px; float:left;}
.sub_img_2box_ru img {border-radius:8px}



.content0401_bg {height:540px; background:url('/img/sub/content0401_bg.jpg') no-repeat center;background-size: cover; background-attachment: fixed; color:#fff; font-size:120px; padding:50px 0 0 0; font-weight:700}
.sub_img_box {width:1300px;  height:535px; display:inline-block;}
.sub_img_box img {float:left}
.sub_img_box ul {float:left; width:570px; padding-top:70px}


.timeline {display: flex; margin: 0 auto;flex-wrap: wrap; flex-direction: column;max-width: 1300px;position: relative; padding-bottom:130px}
.timeline__content-title {font-weight: 800;font-size: 66px;margin: -10px 0 20px 0;padding: 0 10px;box-sizing: border-box;color: #fff;}
.timeline__content-desc {margin: 0;font-size: 22px;box-sizing: border-box;color: #333}
.timeline__content-desc li {margin-bottom:15px; display: inline-block; width: 100%;}
.timeline__content-desc span {color:#000; font-weight:700; float:left; width:10%}
.timeline__content-desc em {float:left; font-style:normal; width:90%; line-height:32px}
.timeline:before {position: absolute;left: 50%;width: 2px;height: 100%;margin-left: -1px;content: "";background: rgba(0, 0, 0, 0.2);}

@media only screen and (max-width: 767px) 
{
.timeline:before {left: 40px;}
}

/* 연혁 — 지금 보는 연도만 선명하고 나머지는 흐리게(opacity .5 + blur 2px) 두었던 것을
   걷어낸다. 연혁은 훑어 읽는 지면이라 네 해가 흐려 있으면 읽을 수가 없고, 흐림·선명을
   스크롤이 갈아 끼우는 동안 지면이 계속 흔들렸다.
   연도 사진이 배경으로 바뀌는 효과(index.js)는 그대로 둔다 — 그쪽은 흐림과 무관하다.
   translateY(-80px) 도 함께 걷었다. 흐림이 없어지면 그 밀림만 남아 칸이 어긋난다. */
.timeline-item {padding: 15px 0;box-sizing: border-box;width: calc(50% - 40px);display: flex;position: relative;}
.timeline-item:before {content: attr(data-text);letter-spacing: 3px;width: 100%;position: absolute;color: rgba(255, 255, 255, 0.5);font-size: 13px;border-left: 2px solid rgba(255, 255, 255, 0.5);top: 70%;margin-top: -5px;padding-left: 15px;opacity: 0;right: calc(-100% - 56px );}
.timeline-item:nth-child(even) {align-self: flex-end;}
.timeline-item:nth-child(even):before {right: auto;text-align: right;left: calc(-100% - 56px );padding-left: 0;border-left: none;border-right: 2px solid rgba(255, 255, 255, 0.5);padding-right: 15px;}
/* 활성 표시는 배경 사진 갈아 끼우기에만 쓰인다 (index.js) — 흐림을 걷었으니 여기서
   되돌릴 것이 없다. 제목 여백만 종전대로 둔다. */
.timeline-item--active:before {top: 50%;transition: .3s all .2s;opacity: 1;}
/* 활성 연도만 제목을 50px 끌어올리던 규칙도 걷는다 — 흐림이 있을 때는 그 연도가
   커지며 올라오는 효과였는데, 흐림을 걷은 뒤에는 스크롤할 때마다 제목만 위아래로
   튀는 것으로 남는다. 다섯 해가 같은 자리에 서는 것이 읽기에 맞다. */

@media only screen and (max-width: 767px) 
{
.timeline-item {align-self: baseline !important;width: 100%;padding: 0 30px 150px 80px;}
.timeline-item:before {left: 10px !important;padding: 0 !important;top: 50px;text-align: center !important;width: 60px;border: none !important;}
.timeline-item:last-child {padding-bottom: 40px;}
}

.timeline__img {max-width: 100%;box-shadow: 0 10px 15px rgba(0, 0, 0, 0.4);}
.timeline-container {width: 100%;position: relative;padding: 0;background-attachment: fixed;background-size: cover;}
.timeline-container:before {position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgba(255, 255, 255, 1);content: "";}
.timeline-header {width: 100%;text-align: center;margin-bottom: 80px;position: relative;}
.timeline-header__title {  font-size: 50px;  font-weight: 700; }
.timeline-header__subtitle {font-size: 35px;line-height: 45px;font-weight: 600;}
.demo-footer {padding: 60px 0;text-align: center;}
.demo-footer a {color: #999;display: inline-block;font-family: Cardo;}



.cs_table { margin-top: 15px; border-top: 2px solid #000; letter-spacing: -0.05em; width:100%}
.cs_table th { text-align: left; font-size: 26px; font-weight: 700; }
.cs_table th, .cs_table td { padding: 35px 16px; line-height: 32px; }
.cs_table td { border-bottom: 1px solid rgba(0, 0, 0, 0.15); font-size:22px}

.cs_table .td_ttl { font-weight: 700; color: #888; }
.cs_table tr:last-child td { border-bottom: 0; }

/* ===== 히어로 텍스트 가독성·위치 보정 (D-Air demil, 2026-07-27) ===== */
/* [B] 배경 어둡게 + 흰 텍스트 (좌우 드론·중앙 블레이드 회피, 중앙 정렬) */
.visual .visual-bg-wrap::after{ content:""; position:absolute; inset:0; background:rgba(3,16,24,.42); z-index:1; pointer-events:none; }
.visual .visual-txt-wrap{ align-items:center; z-index:2; }
.visual .visual-txt{ width:auto; max-width:780px; margin:0 auto; text-align:center; }
.visual .visual-txt-wrap h2{ font-size:60px; line-height:1.12; padding-bottom:12px; text-shadow:0 2px 12px rgba(0,0,0,.55); }
.visual .visual-txt-wrap span{ font-size:26px; line-height:1.4; margin-bottom:14px; text-shadow:0 2px 10px rgba(0,0,0,.6); }
.visual .visual-txt-wrap p{ font-size:21px; line-height:1.7; text-shadow:0 2px 10px rgba(0,0,0,.6); }
.visual .visual-txt-wrap p a{ color:#fff; font-weight:700; }

/* ============================================================
   D-Air 브랜드 배경 팔레트 (섹션 구분용) — 사이트 전역 토큰
   정체성 3색: White / Black / Cyan(#31cfff)
   + 밝은 바탕 글자용 짙은 시안(#0a7fae) — 밝은 시안은 흰 바탕에서 1.83:1 로 읽히지 않는다
   + 4번째 배경: Neutral Gray(#dce0e8) — 밝은 섹션 구분 (흰색과 대비되는 쿨 그레이)
   사용: <div class="dair-bg-soft"> ... </div> (white/soft/dark 택1)
   ============================================================ */
:root{
	--dair-cyan:#31cfff;      /* 면·마커·어두운 바탕 글자 */
	--dair-cyan-ink:#0a7fae;  /* 밝은 바탕 글자 (흰 바탕 4.5:1) */
	--dair-bg-white:#ffffff;
	--dair-bg-soft:#dce0e8;   /* 뉴트럴(쿨) 그레이 : 밝은 섹션 구분 배경 */
	--dair-bg-dark:#12161f;   /* 다크 섹션 배경 */
}
.dair-bg-white{ background:var(--dair-bg-white); }
.dair-bg-soft{ background:var(--dair-bg-soft); }
.dair-bg-dark{ background:var(--dair-bg-dark); color:#fff; }

/* ── 되돌아가기 단추 ──────────────────────────────────────────────
   상세를 펼친 뒤 목록으로 돌아오는 단추. 지면마다 따로 적지 않는다 —
   같은 규칙을 아홉 벌 들고 있다가 글자 16/17/18, 꺾쇠 9/10, 간격 9/10 으로
   벌어져 있었다(2026-08-11 전수 검사). 여기 한 곳만 고친다.
   인증과 실적 지면에서 바로 옆에 서는 이전·다음(.cd-arw)과 같은 차림·같은 높이. */
/* fit-content : 세로로 쌓는 상자(문의 폼) 안에서는 단추가 줄 폭 전체로 늘어난다 — 글자만큼만 차지한다 */
.pv-back{ display:inline-flex; align-items:center; gap:10px; padding:11px 20px; margin-bottom:30px;
  width:fit-content; max-width:100%;
  border:1px solid rgba(0,0,0,.2); background:#fff; font-size:17px; font-weight:600;
  letter-spacing:-.05em; color:#4a5560; text-decoration:none;
  transition:border-color .2s, color .2s; }
.pv-back:hover{ border-color:var(--dair-cyan-ink,#0a7fae); color:var(--dair-cyan-ink,#0a7fae); }
/* 꺾쇠는 글자에 묻히지 않을 만큼 키운다 — 9px 실선은 화살표가 아니라 조각으로 보였다 */
.pv-back-ic{ width:11px; height:11px; border-left:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); }

/* ── 헤더: 시스템이 밝은 모드일 때 띠를 흰색으로 ────────────────────────
   주간 야외에서 헤더가 안 보인다는 지적에서 왔다. 햇빛 아래서는 어두운 바탕이
   주변광을 반사해 글자가 묻힌다.

   어두운 모드 헤더의 얼개는 이렇다.
     기본        띠 없음(투명) — 히어로 사진 위에 흰 글자
     스크롤·hover 검정 띠가 나타나고 그 위에 흰 글자

   밝은 모드도 **그 얼개를 그대로 따른다**. 바뀌는 것은 띠 색과, 띠가 있을 때의
   부품 색뿐이다.
     기본        똑같이 투명 — 사진 위이므로 흰 글자가 맞다 (그림자로 대비를 준다)
     스크롤·hover 흰 띠 + 어두운 글자·로고·알약

   띠가 없는 상태까지 흰색으로 덮으면 히어로 사진이 잘리고 원래 디자인이 사라진다.
   강조색(#31cfff)은 두 모드 모두에서 읽히므로 그대로 둔다.

   되돌리려면 이 블록만 지우면 된다. */
@media (prefers-color-scheme: light) {
	/* 띠는 **색만** 바꾼다. 언제 나타나는지도, 얼마나 비치는지도 어두운 모드 규칙을
	   그대로 쓴다 — 검정 70% ↔ 흰색 70% 로 대칭이다.
	   불투명도를 따로 올리면 흰 띠가 너무 밝아 사진 위에 판을 덮은 것처럼 보인다.
	   글자 대비는 불투명도 대신 흐림(backdrop-filter)이 받는다 — 띠 뒤 사진의
	   잔무늬를 뭉개 주므로 같은 투명도에서도 글자가 또렷하다. */
	.header::before{ background:#fff;
		-webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
	.header.scroll::before{ box-shadow:0 1px 0 rgba(0,0,0,.10); }
	.header .bg{ background:#fff;
		-webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
	.header.hover .bg{ box-shadow:0 1px 0 rgba(0,0,0,.10); }

	/* 띠가 없는 기본 상태 — 사진 위라 흰 글자를 유지하되, 밝은 하늘 위에서도
	   읽히도록 옅은 그림자를 준다. 어두운 모드에는 없던 보강이다. */
	.header .gnb > ul > li > a,
	.header .hd-mmec{ text-shadow:0 1px 3px rgba(0,0,0,.45); }
	.header .logo{ filter:drop-shadow(0 1px 3px rgba(0,0,0,.45)); }

	/* 띠가 나타나면 그 위 부품을 어둡게 바꾼다. 그림자는 걷는다. */
	.header.scroll .gnb > ul > li > a,
	.header.hover  .gnb > ul > li > a{ color:#1e1e23; text-shadow:none; }
	.header.scroll .gnb > ul > li:hover > a,
	.header.hover  .gnb > ul > li:hover > a{ color:#0a7fae; }

	.header.scroll .logo,
	.header.hover  .logo{ background-image:url('/img/main/logo-dark.png'); filter:none; }

	.header.scroll .hd-mmec,
	.header.hover  .hd-mmec{ color:#1e1e23; border-color:rgba(0,0,0,.25); text-shadow:none; }
	.header.scroll .hd-mmec:hover,
	.header.hover  .hd-mmec:hover{ color:#0a7fae; border-color:#0a7fae; background:rgba(10,127,174,.08); }

	/* 펼쳐진 하위 메뉴 */
	.header .gnb > ul > li > ul > li > a{ color:#4a5560; text-shadow:none; }
	.header .gnb > ul > li > ul > li:hover > a{ color:#0a7fae; }
	.header .gnb > ul > li > ul::after,
	.header .gnb > ul > li:first-of-type > ul::before,
	.header::after{ background:#000; }
}