@charset "utf-8";
/* 시스템 사이트의 경우 :  메인+서브에 공통 적용되는 common.css 파일 추가해 메인+서브 공통부분, 서브에 적용되는 css 기재 / 메인에만 적용되는 main.css 추가해 메인 css 기재 */
/* 일반 사이트의 경우 : 메인+서브에 공통 적용되는 common.css 파일 추가해 메인+서브 공통부분 css / 메인에만 적용되는 main.css 추가해 메인 css 기재 / 서브에만 적용되는 sub.css 추가해 서브 css 기재 */
/* 시스템, 일반 사이트 공통 : 멤버십, 에러 등이 필요한 경우 퍼블 가이드 UI 요소에서 원하는 부분만 복사해서 common.css에 기재 */
/* basic.css, board.css에서 수정해서 사용할 것들은 common.css에 수정 css 적기 (basic, board 수정 X) */
:root{
    --primary : #1F3AAE;
    --primary-60 : #192E8B;
    --primary-70 : #132368;
    --primary-80 : #242841;
    --tbl-bd : #5E5E5E;
    --tbl-bdr : #C8C8C8;
    --blue : var(--primary);
    --btn-blue-hover : var(--primary-60);
    --btn-bdr : #ACACAC;
    --disabled-bg: #F5F5F5;
    --disabled-bd: #DBDBDB;
}
/** button **/
.btn.lg {min-width: 17.8rem; height: 5.6rem;}
.btn.md {min-width: 17.8rem; height: 4.8rem;}
.btn.sm {min-width: 17.1rem; height: 4rem;}

.btn.primary {background: var(--primary) !important;}
.btn.primary:hover {background: var(--btn-blue-hover) !important;}
.btn.primary:active {background: var(--primary-70) !important;}

.btn.secondary {background: transparent !important; border: .1rem solid var(--primary); color: var(--primary);}
.btn.secondary:hover {background: #F3F5FF !important; border: .1rem solid var(--primary); color: var(--primary);}
.btn.secondary:active {background: #E8EBF7 !important; border: .1rem solid var(--primary); color: var(--primary);}

/** layout **/
/* common */
#container{padding-bottom: 15rem;}
html{min-width: 128rem; overflow-x: auto !important;}
body {line-height: 1.5;}
.wrap{width: 100%; max-width: 144rem; margin: 0 auto;}

/* header */
#header{position: fixed;top: 0;left: 0;background-color: rgba(0,0,0,0.4);width: 100%;z-index: 9991;transition: all 0.1s;}
#header .wrap{max-width: 144rem; display: flex; justify-content: space-between; align-items: flex-start; height: 7.2rem; position: relative; z-index: 99;}
.logo{width: 21rem;}
.logo a{display: flex; align-items: center; height: 7.2rem; background: url(../images/common/img_logo_white.svg) no-repeat center / 21rem;}
#header .btn_menu{display:block; width: 2.4rem; height: 2.4rem; background: url(../images/icon/ico_menu_white.svg) no-repeat center; margin-top: 2.3rem;}
#header .btn_menu.active{background: url(../images/icon/ico_close_white.svg) no-repeat center;}

/* gnb */
#header .gnb_bg {display: none;position: absolute;left: 0;width: 100%;background: #fff;box-shadow: 0.4rem 1.4rem 1rem 0rem rgba(0, 0, 0, 0.05); top: 7.2rem; border-top: 1px solid #EEE;}
#gnb{height: 7rem; overflow: hidden; }
#gnb > ul{display: flex;}
#gnb > ul > li > a{font-size: 1.9rem; font-weight: 700; color: #fff; width: 17rem; height: 7.2rem; line-height: 7.2rem; display: block; text-align: center; position: relative;}
#gnb > ul > li.on > a{color: var(--primary) !important;}
#gnb > ul > li.on > a::after{content: ''; display: block; width: 100%; height: 0.2rem; background: var(--primary); position: absolute; left: 0; bottom: 0;}
#gnb .dp2{padding-top: 2.4rem;}
#gnb .dp2 li a{font-size: 1.9rem;font-weight: 500;display: block;text-align: center;line-height: normal; padding: .8rem;}
#gnb .dp2 li a:hover{color: var(--primary); font-weight: 600;}

.mo_gnb_top{display: none; width: 100%; height: 6.4rem; background: #1F3AAE; position: absolute; top: 0; left: 0;}

#header.on,
body:has(.breadcrumb) #header{background-color: #fff !important; border-bottom: 1px solid #DBDBDB;}
#header.on #gnb > ul > li > a,
body:has(.breadcrumb) #header #gnb > ul > li > a{color: #222;}
#header.on .logo a,
body:has(.breadcrumb) #header .logo a{background: url(../images/common/img_logo.svg) no-repeat center / 21rem;}
#header.on .btn_menu,
body:has(.breadcrumb) #header .btn_menu{background: url(../images/icon/ico_menu.svg) no-repeat center;}
#header.on .btn_menu.active,
body:has(.breadcrumb) #header .btn_menu.active{background: url(../images/icon/ico_close.svg) no-repeat center;}

body.fp-viewing-notice #header,
body.fp-viewing-2 #header{background-color: #fff;}
body.fp-viewing-notice #header #gnb > ul > li > a,
body.fp-viewing-2 #header #gnb > ul > li > a{color: #222;}
body.fp-viewing-notice #header .logo a,
body.fp-viewing-2 #header .logo a{background: url(../images/common/img_logo.svg) no-repeat center / 21rem;}
body.fp-viewing-notice #header .btn_menu,
body.fp-viewing-2 #header .btn_menu{background: url(../images/icon/ico_menu.svg) no-repeat center;}

/* footer */
#footer{height: 15.5rem !important; min-height:0 !important; background: #171717; text-align: center; padding: 4.8rem 0; color: #cdcdcd; font-size: 1.7rem; display: block; line-height: 1.5;}
#footer .wrap {display: flex; align-items: flex-start; justify-content: space-between;}
#footer .logo a {height: 4.5rem;}
#footer .wrap .lt {display: flex; gap: 4rem; text-align: left;}
#footer .wrap .lt .f_menu {display: flex; gap: 2.4rem; margin-bottom: 2rem;}
#footer .wrap .lt .f_menu li {position: relative;}
#footer .wrap .lt .f_menu li.on {color: #fff !important;}
#footer .wrap .lt .f_menu li::after {content: ''; display: block; width: .1rem; height: .9rem; background: #666; right: -1.2rem; top: .8rem; position: absolute;}
#footer .wrap .lt .f_menu li:last-child::after {content: none;}
#footer .wrap .lt .address {margin-bottom: 1rem;}
#footer .wrap .lt .address ul {display: flex;gap: 0 2.2rem;flex-wrap: wrap;}
#footer .wrap .lt .address ul li {position: relative;}
#footer .wrap .lt .address ul li::after {content: ''; display: block; width: .2rem; height: .2rem; border-radius: 50%; background: #666; position: absolute; top: 1.1rem; right: -1.1rem;}
#footer .wrap .lt .address ul li:last-child::after {content: none;}
#footer .wrap .rt select {border-radius: 5rem; padding: 0 4.8rem 0 2.4rem; border: .1rem solid #888d9d; background: transparent; color: #fff; font-size: 1.5rem; font-weight: 500; height: 3.8rem; background: url(../images/icon/ico_angle_wh.svg) no-repeat right 1.6rem center / 1.6rem;}
#footer .wrap .rt select option {color: #242841;}
#footer .fp-overflow{overflow: hidden;}
#footer .copy{font-size: 1.7rem; color: #888d9d;}
.btn_totop{position: fixed;width: 6.4rem;height: 6.4rem;border-radius: 1rem;background: rgba(25, 25, 25, 0.80) url(../images/icon/ico_arrow_top.svg) no-repeat center;backdrop-filter: blur(0.8rem);bottom: 4rem;right: 4rem;transition: all 0.2s;z-index: 990;}
.btn_totop.bottom{bottom: 12rem;}
body.fp-viewing-main_con1 .btn_totop,
body.fp-viewing-2 .btn_totop{opacity: 0;}


/** sub common **/
.content{font-size: 1.7rem;}

/* page_top */
.page_top .top_bg{height: 26rem; margin-top: 7.2rem; padding: 8.3rem 24rem 6.4rem; display: flex; flex-direction: column; gap: 1.2rem;}
.page_top .top_bg.bg1{background: url(../images/common/bg_top_01.png) no-repeat center / cover;}
.page_top .top_bg.bg2{background: url(../images/common/bg_top_02.png) no-repeat center / cover;}
.page_top .top_bg.bg3{background: url(../images/common/bg_top_03.png) no-repeat center / cover;}
.page_top .top_bg.bg4{background: url(../images/common/bg_top_04.png) no-repeat center / cover;}
.page_top .top_bg.bg5{background: url(../images/common/bg_top_05.png) no-repeat center / cover;}
.page_top .page_tit {font-size: 4.8rem; color: #fff;}
.page_top .page_txt {display: flex; justify-content: space-between; align-items: center; color: #fff;}
.page_top .page_txt > p {font-size: 1.9rem; font-weight: 500;}

/** content **/
.content{min-height: 40rem;}
.content > .wrap {padding-top: 8rem;}

/* input */
select, input:not([type="checkbox"], [type="radio"], [type="hidden"]), textarea{height: 4.8rem; border: 1px solid #DBDBDB; padding: 0 2rem; font-size: 1.7rem; color: #292929; border-radius: 0.6rem;}
textarea{padding: 2rem; height: auto; }
select{background: #fff url(../images/icon/ico_angle_bottom.svg) no-repeat right 1.6rem center / 1.6rem;}
.calendar_input .ui-datepicker-trigger{background: url(../images/icon/ico_cal.svg) no-repeat center / 2rem; width: 2rem; right: 2rem;}
.gap{font-size: 1.6rem; font-weight: 700; padding: 0 0.4rem;}
#ui-datepicker-div.ui-widget.ui-widget-content{z-index: 9990 !important;}
select:focus, input:focus, textarea:focus{border-color: var(--bdr-focus); box-shadow: inset 0 0 0 1px var(--bdr-focus);}
.phone,
.email{display: flex; align-items: center;}
.phone input, .phone select, .email input, .email select{min-width: 0; width: calc((100% - 3.4rem) / 3) !important; max-width: none;}
.email input, .email select{width: calc((50% - 10rem) / 3) !important; max-width: none;}
.email select{margin-right: 1.7rem;}
.email select + input{width: 20rem !important;}
.field{gap: 0.8rem;}
.field.flexbox{display: flex; align-items: center; gap: 1rem;}
.field.flexbox > *{flex: 1;}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}
input[type='number'] {-moz-appearance: textfield;}
.chk_list{flex-wrap: wrap;gap: 0.4rem;}
.chk_list > .radio{display: block;width: 100%;}
.chk_list p{display: inline-block;vertical-align: 0.3rem;}
.chk input.chk_option{display: inline-block !important; position: static !important; width: 20rem !important; height: 4.8rem !important; border: 1px solid #DBDBDB !important; padding: 0 2rem !important; font-size: 1.7rem !important; color: #292929 !important; border-radius: 0.6rem !important; margin-right: 0.4rem !important;}
.chk .radio label::before{top: 0.2rem;}
.chk input.chk_option:focus{border-color: var(--bdr-focus) !important; box-shadow: inset 0 0 0 1px var(--bdr-focus) !important;}

/* badge */
.badge{width: 5.6rem; height: 2.4rem; line-height: 2.3rem; border-radius: 0.4rem; font-size: 1.5rem; font-weight: 500; padding: 0; min-width: 0;}
.badge.typeA{color: #fff; background: #0072F9; border-radius: 5rem; font-weight: 700;}
.badge.typeB{color: #fff; background: #77808B; border-radius: 5rem; font-weight: 700;}


/** board, table **/
.board_top{margin-bottom: 2.4rem;}
.board_top select{height: 4.8rem; padding: 0 1.6rem; border-radius: 5rem; min-width: 16rem; font-size: 1.5rem; font-weight: 500;}
.board_top .search_simple {margin-right: 0;}
.board_top .search_simple .input_wrap {border-radius: 5rem;}
.board_top .search_simple .input_wrap .input_txt {border: 0; border-radius: 5rem; width: 31.2rem; padding: 0 5rem 0 2.4rem; font-size: 1.5rem;}
.board_top .search_simple .input_wrap .btn_search {min-width: 4rem; width: 4rem; height: 4rem; border-radius: 50%; background: #1F3AAE url(../images/icon/ico_search.svg) no-repeat center; border: 0; position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);}
.board_top .all_num{font-size: 1.7rem;}
.all_num .num{font-weight: 700; color: var(--primary-70); margin: 0 0 0 0.5rem;}
.board_view ~ .board_top,
.board_write ~ .board_top{margin-top: 7rem;}

/** paging **/
.paging_wrap{margin-top: 5.6rem;}
.paging li{width: 4rem; min-width:4rem; height: 4rem; line-height: 4rem; border-radius: .4rem; color: #2F2F2F;}
.paging .current {background-color: var(--primary) !important;}
.paging li a{font-size: 1.7rem; font-weight: 500; position: relative;}
.paging li.prev a::before {content: ''; display: block; width: 2.4rem; height: 2.4rem; background: url(../images/icon/ico_angle_left.svg) no-repeat center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.paging li.next a::before {content: ''; display: block; width: 2.4rem; height: 2.4rem; background: url(../images/icon/ico_angle_right.svg) no-repeat center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

/* board_list */
table a.ellipsis {max-width: 100%;}
.board_list{border-top: 2px solid var(--tbl-bd);}
.board_list > thead > tr > th, 
.board_list > tbody > tr > td{height: 7.2rem; font-size: 1.9rem; font-weight: 400; word-break: break-all; color: #2F2F2F;}
.board_list > thead > tr > th{background: transparent; font-weight: 500; position: relative; color: #000;}
.board_list > thead > tr > th + th::before{content: ''; display: block; width: 1px; height: 2.4rem; background: var(--tbl-bdr); position: absolute; left: 0; top: 50%; margin-top: -1rem;}
.board_list > tbody > tr > td.file {color: var(--primary);}
.board_list > tbody > tr > td.file span {display: block; width: 2.4rem; height: 2.4rem; background: url(../images/icon/ico_clip.svg) no-repeat center; font-size: 0; margin: 0 auto;}
.board_list > tbody > tr > td .td_view {color: #000; font-weight: 500; padding: 0 1.6rem;}

/* board_view */
.tbl_tit {text-align: center; flex-direction: column; margin-bottom: 3.2rem; font-size: 3.2rem; display: flex; align-items: center; justify-content: center; gap: 1.2rem; word-break: normal;}

.board_view{border-top: 2px solid var(--tbl-bd);}
.board_view > tbody > tr > th, 
.board_view > tbody > tr > td{padding: 2rem; height: 6.4rem; font-size: 1.7rem; font-weight: 400; word-break: break-all; border-bottom: 0; border-top: 1px solid var(--tbl-bdr);}
.board_view > tbody > tr > th {background: transparent; padding-left: 6.4rem;}
.board_view > tbody > tr > th strong{font-weight: 500; background: #F8F8F8; border-radius: 5rem; padding: .3rem 0; min-width: 9.1rem; display: block; text-align: center;}
.board_view > tbody > tr:first-of-type > th,
.board_view > tbody > tr:first-of-type > td{border-top: 0;}
.board_view > tbody > tr:last-of-type > th,
.board_view > tbody > tr:last-of-type > td{border-bottom: 1px solid var(--tbl-bdr);}
.board_view td:has(.view_cont){padding: 5.6rem 6.4rem;}
.board_view .view_cont{min-height: 20rem;}
.board_view > tbody > tr > td:has(.file_wrap) {padding: 3.2rem 2rem;}
.board_view .file_li a{display: flex;}
.board_view .file_li a:hover{text-decoration: underline;}
.board_view .file_li li img{height: 2.4rem;}

.oth_post {border: 0; margin-top: 5.6rem;}
.oth_post th, .oth_post td {height: inherit; border: 0;}
.oth_post tbody tr td .d_flex {display: flex; align-items: center; gap: 1.2rem;}
.oth_post tbody tr td:has(.btn_list) {text-align: center;}
.oth_post tbody tr td:first-child .d_flex {justify-content: flex-start;}
.oth_post tbody tr td:last-child .d_flex {justify-content: flex-end;}
.oth_post tbody tr td .btn_prev,
.oth_post tbody tr td .btn_next {min-width: 4rem; height: 4rem; border-radius: 50%;}
.oth_post tbody tr td .btn_prev {background: url(../images/icon/i_arrow_left_bk.svg) no-repeat center; background-size: 2.3rem;}
.oth_post tbody tr td .btn_next {background: url(../images/icon/i_arrow_right_bk.svg) no-repeat center; background-size: 2.3rem;}
.oth_post tbody tr td .btn_list {min-width: 17.8rem; border-radius: 5rem; background: var(--primary); font-size: 1.9rem; font-weight: 700;}
.oth_post tbody tr td .no_data {color: #919191; text-decoration: inherit !important; cursor: inherit;}
.oth_post tbody tr td .btn_next.btn_no_data {background: #E3E3E3 url(../images/icon/i_arrow_right_gray.svg) no-repeat center; background-size: 2.3rem; cursor: inherit;}
.oth_post tbody tr td .btn_prev.btn_no_data {background: #E3E3E3 url(../images/icon/i_arrow_left_gray.svg) no-repeat center; background-size: 2.3rem; cursor: inherit;}

/** content  **/
/* 공통 */
.breadcrumb.simple .path {display: inline-flex;align-items: center;gap: 0.4rem;}
.breadcrumb.simple li {display: inline-flex;align-items: center;gap: 0.4rem;}
.breadcrumb.simple li:not(:last-child)::after {content: '\EA6E';font-family: 'remixicon';display: inline-block;font-size: 1.8rem; color: #739DE0;}
.breadcrumb.simple li a {display: block;position: relative;padding: 0 0.4rem;border-radius: 0.6rem;font-size: 1.5rem;font-weight: 400;text-underline-offset: 0.3rem;transition: all 0.1s; color: #D2D8EF;}
.breadcrumb.simple li.on a {color: #fff; font-weight: 700;}
.breadcrumb.simple li.home a::before {content: '\EE18';font-family: 'remixicon';display: inline-block;vertical-align: bottom; color: #D2D8EF;}
.breadcrumb.simple li a:hover {color: #fff;}
.breadcrumb.simple li.home a:hover::before {color: #fff;}

/* 사업소개 */
.content .box.sky {background: linear-gradient(180deg, #FFF 0%, #F4F8FF 100%);}
.content .box .wrap {padding: 10.4rem 0 8rem;}
.content .box .wrap {display: flex; align-items: flex-start; justify-content: space-between;}
.content .box .wrap .lt {width: 53.5rem;}
.content .box .wrap .lt span {font-size: 1.9rem; font-weight: 700; color: var(--primary); display: block; margin-bottom: .2rem;}
.content .box .wrap .lt h3 {font-size: 4rem; color: #0C0C0C; margin-bottom: 1.6rem;}
.content .box .wrap .lt p {font-size: 1.7rem; font-weight: 400; color: #2F2F2F;}
.content .box .wrap .lt p strong {font-weight: 500; color: #0c0c0c;}

.content .box .wrap .rt {width: calc(100% - 63rem);}
.content .box .wrap .rt > img {width: 100%;}
.content .box .wrap .rt .txt_list {display: flex; flex-direction: column; gap: 2.4rem;}
.content .box .wrap .rt .txt_list li {padding: 2.4rem 3.2rem; background: #F8F9FB; border-radius: 1.6rem; display: flex; justify-content: space-between;}
.content .box .wrap .rt .txt_list li .txt {width: calc(100% - 23.3rem);}
.content .box .wrap .rt .txt_list li .txt strong {font-size: 2.4rem;}
.content .box .wrap .rt .txt_list li .txt p {font-size: 1.7rem; margin-top: 4px;}
.content .box .wrap .rt .txt_list li .txt p .blue {font-size: 1.5rem; color: var(--primary); display: block;}
.content .box .wrap .rt .txt_list li .img_box {background: #fff; border-radius: 1.2rem; display: flex; align-items: center; justify-content: center; width: 16rem; padding: 1.8rem;}
.content .box .wrap .rt .txt_list li.bk {background: #242841; flex-direction: column; gap: 4.8rem;}
.content .box .wrap .rt .txt_list li .flexbox {display: flex; justify-content: space-between;}
.content .box .wrap .rt .txt_list li .flexbox .txt {color: #fff;}
.content .box .wrap .rt .txt_list li.bk .img_box {background: #3C3E53;}
.content .box .wrap .rt .txt_list li .wh_box {display: flex; gap: 2.4rem;}
.content .box .wrap .rt .txt_list li .wh_box li {width: 50%; flex-direction: column; justify-content: flex-start; color: #0c0c0c;}
.content .box .wrap .rt .txt_list li .wh_box li strong {font-size: 1.9rem; display: block; margin-bottom: .4rem;}
.content .box .wrap .rt .txt_list li .wh_box li p {font-size: 1.7rem;}

.content .box .wrap .rt .roadmap {display: flex; flex-direction: column; gap: 4rem; text-align: center;}
.content .box .wrap .rt .roadmap > li {display: flex; gap: 3.2rem; border-radius: 50rem; justify-content: center; align-items: center;}
.content .box .wrap .rt .roadmap li > div {border: .1rem solid #E3E3E3; border-radius: 50rem; padding: 1rem;}
.content .box .wrap .rt .roadmap li > div .inner {background: #fff; border-radius: 50rem; box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; align-items: center; padding: 1.1rem 2.4rem;}
.content .box .wrap .rt .roadmap li strong {font-size: 1.7rem; color: #0C0C0C;}
.content .box .wrap .rt .roadmap li p {font-size: 1.5rem; color: #2F2F2F;}
.content .box .wrap .rt .roadmap li .rm_box {background: #F3F5FF; width: calc(100% - 59.2rem); position: relative;}
.content .box .wrap .rt .roadmap li .rm_box::after {content: ''; display: block; width: 3.2rem; height: 3.2rem; background: url(../images/content/arrow_bottom_gradient.png) no-repeat center; position: absolute; bottom: -3.6rem; left: 50%; transform: translateX(-50%);}
.content .box .wrap .rt .roadmap li .rm_box .inner {border: .2rem solid #7989CE;}
.content .box .wrap .rt .roadmap li .inner::before {content: ''; display: block; width: 3.2rem; height: 3.2rem; margin-bottom: .4rem;}
.content .box .wrap .rt .roadmap li:nth-child(1) .rm_box .inner::before {background: url(../images/content/ico_roadmap01.svg) no-repeat center;}
.content .box .wrap .rt .roadmap li:nth-child(1) .rm_box2 .inner:nth-child(1)::before {background: url(../images/content/ico_roadmap02.svg) no-repeat center;}
.content .box .wrap .rt .roadmap li:nth-child(1) .rm_box2 .inner:nth-child(3)::before {background: url(../images/content/ico_roadmap03.svg) no-repeat center;}
.content .box .wrap .rt .roadmap li .rm_box2 {background: #F4F8FF; display: flex; gap: .4rem; width: 56rem; align-items: center; position: relative;}
.content .box .wrap .rt .roadmap li .rm_box2::after {content: ''; display: block; width: 3.2rem; height: 3.2rem; background: url(../images/content/arrow_bottom_gradient.png) no-repeat center; position: absolute; bottom: -3.6rem; left: 50%; transform: translateX(-50%);} 
.content .box .wrap .rt .roadmap li:nth-child(1) .rm_box2 .inner {width: calc(50% - 2rem);}
.content .box .wrap .rt .roadmap li .rm_box2 .or {color: #fff; background: #739DE0; width: 3.2rem; height: 3.2rem; border-radius: 50%; line-height: 3.2rem; font-weight: 500;}
.content .box .wrap .rt .roadmap li .rm_box2 .inner {display: flex; border: .2rem solid #739DE0; width: 100%; flex-direction: column;}
.content .box .wrap .rt .roadmap li:nth-child(2) .rm_box .inner::before {background: url(../images/content/ico_roadmap04.svg) no-repeat center;}
.content .box .wrap .rt .roadmap li:nth-child(2) .rm_box2 .inner::before {background: url(../images/content/ico_roadmap05.svg) no-repeat center;}
.content .box .wrap .rt .roadmap li:nth-child(3),
.content .box .wrap .rt .roadmap li:nth-child(4),
.content .box .wrap .rt .roadmap li:nth-child(5),
.content .box .wrap .rt .roadmap li:nth-child(6),
.content .box .wrap .rt .roadmap li:nth-child(7) {padding: 1.4rem; position: relative;}
.content .box .wrap .rt .roadmap li:nth-child(3)::after,
.content .box .wrap .rt .roadmap li:nth-child(4)::after,
.content .box .wrap .rt .roadmap li:nth-child(5)::after,
.content .box .wrap .rt .roadmap li:nth-child(6)::after {content: ''; display: block; width: 3.2rem; height: 3.2rem; background: url(../images/content/arrow_bottom_gradient.png) no-repeat center; position: absolute; bottom: -4.6rem; left: 50%; transform: translateX(-50%);}
.content .box .wrap .rt .roadmap li:nth-child(3) .inner,
.content .box .wrap .rt .roadmap li:nth-child(4) .inner,
.content .box .wrap .rt .roadmap li:nth-child(5) .inner,
.content .box .wrap .rt .roadmap li:nth-child(6) .inner,
.content .box .wrap .rt .roadmap li:nth-child(7) .inner {border: 0; background: inherit; padding: 0; border-radius: 0; justify-content: center; display: flex; flex-direction: column; align-items: center;}
.content .box .wrap .rt .roadmap li:nth-child(3) {background: #DAEAFF; border: 1rem solid #E3EFFF;}
.content .box .wrap .rt .roadmap li:nth-child(3) .inner::before {background: url(../images/content/ico_roadmap06.svg);}
.content .box .wrap .rt .roadmap li:nth-child(4) {background: #AACFFF; border: 1rem solid #DAEAFF;}
.content .box .wrap .rt .roadmap li:nth-child(4) .inner::before {background: url(../images/content/ico_roadmap07.svg);}
.content .box .wrap .rt .roadmap li:nth-child(5) {background: #5497EF; border: 1rem solid #7EB2F6;}
.content .box .wrap .rt .roadmap li:nth-child(5) .inner::before {background: url(../images/content/ico_roadmap08.svg);}
.content .box .wrap .rt .roadmap li:nth-child(6) {background: #1E6BCF; border: 1rem solid #5497EF;}
.content .box .wrap .rt .roadmap li:nth-child(6) .inner::before {background: url(../images/content/ico_roadmap09.svg);}
.content .box .wrap .rt .roadmap li:nth-child(7) {background: #083F88; border: 1rem solid #3364A3;}
.content .box .wrap .rt .roadmap li:nth-child(7) .inner::before {background: url(../images/content/ico_roadmap10.svg);}
.content .box .wrap .rt .roadmap li:nth-child(5) strong,
.content .box .wrap .rt .roadmap li:nth-child(6) strong,
.content .box .wrap .rt .roadmap li:nth-child(7) strong,
.content .box .wrap .rt .roadmap li:nth-child(5) p,
.content .box .wrap .rt .roadmap li:nth-child(6) p,
.content .box .wrap .rt .roadmap li:nth-child(7) p {color: #fff;}

.mo_br {display: none;}

/* 문의하기 */
.content .wrap .sm_tit {font-size: 4rem; font-weight: 700; text-align: center; margin-bottom: 2.4rem;}
.content .wrap .inq_box {display: flex; align-items: center; justify-content: space-between; background: #1F3AAE url(../images/content/inquiry_bg.png) no-repeat center / cover; padding: 6.3rem 8rem; border-radius: 1.6rem; color: #fff;}
.content .wrap .inq_box .lt {width: 68rem;}
.content .wrap .inq_box .lt .mail {font-size: 3.2rem; padding-bottom: 4.8rem; border-bottom: .1rem solid #739DE0; margin-bottom: 2rem; font-weight: 500;}
.content .wrap .inq_box .lt .hours {font-size: 2.4rem; display: flex; align-items: center; gap: 2rem;}
.content .wrap .inq_box .lt .hours strong {position: relative; padding-left: 3.2rem;}
.content .wrap .inq_box .lt .hours strong::before {content: ''; display: block; width: 2.4rem; height: 2.4rem; background: url(../images/icon/ico_timer.svg) no-repeat center; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.content .wrap .inq_box .rt img {width: 100%; height: 100%;}

/* pc 작은화면 */
@media all and (max-width:1700px){
    #header .wrap{padding: 0 5rem;}
    .page_top .top_bg {padding: 6.4rem 5rem;}
    .content .wrap {padding: 8rem 5rem;}
}
@media all and (max-width:1440px){
    .content .box .wrap {flex-direction: column; gap: 2.4rem; padding: 3.2rem 1.6rem !important; position: relative;}
    .content .box .wrap .lt,
    .content .box .wrap .rt {width: 100%;}

    .content .box .wrap .lt {text-align: center;}
    .content .box .wrap .rt > img {max-width: 50%;}
    .content .box .wrap .rt img {margin: 0 auto 1.6rem; display: block;}
}

/** 반응형 **/
@media screen and (max-width: 1280px) { 
    /* 태블릿 버전 스타일 (모바일~태블릿 공통 스타일) */ 
    /** layout **/
    html {font-size: 12px; min-width: 0;} /* 1rem = 12px */
    .content > .wrap {padding-top: 3.2rem !important;}
    .wrap{padding:0 1.6rem !important}
    #container{padding-bottom: 10rem;}

    #header .wrap {height: 6.4rem;}
    .logo {width: 21.6rem;}
    .logo a {height: 6.4rem; background-size: 21.6rem !important;}
    #header .btn_menu {margin-top: 2rem;}
    #header .btn_menu.active{position: absolute;z-index: 9999;right: 1.6rem;background: url(../images/icon/ico_close_white.svg) no-repeat center !important;}
    #header #gnb{position: fixed;top: 0;bottom: 0;width: 100%;height: 100dvh;background: #fff;padding:4.8rem 0;padding-top: 6.4rem;overflow-y: auto;right: -100%;transition: right 0.2s;z-index: 9999;}    
    #gnb > ul{display: block;}
    #gnb > ul > li > a{width: 100%;text-align: left;font-size: 1.9rem;color: #313131 !important;height: auto;line-height: 1.5;padding: 1.75rem 2.4rem; border-bottom: .1rem solid #EBEBEB; display: flex; align-items: center; justify-content: space-between;} 
    #gnb > ul > li > a::after {content: ''; width: 1.6rem; height: 1.6rem; display: block; background: url(../images/icon/ico_angle.svg) no-repeat center; transition: .2s;}
    #gnb > ul > li > a.active{color: #192E8B !important;}
    #gnb > ul > li > a.active::after {transform: rotate(180deg);}
    #gnb .dp2{height: auto; padding-top: 0; display: none; background-color: #F3F5FF;}
    #gnb .dp2 li a{color: #313131 !important; text-align: left; padding:2.3rem 3.5rem; font-size: 1.7rem; border-bottom: .1rem solid #EBEBEB;}
    #gnb .dp2 li a::before{content: '·'; margin-right: 0.5rem;}
    #gnb .dp2 li + li{margin-top: 1rem;}
    #header #gnb.active{right: 0;}

    .mo_gnb_top {display: flex; align-items: center; padding: 0 1.6rem;}
    .mo_gnb_top .btn_home {width: 2.4rem; height: 2.4rem; background: url(../images/icon/ico_home.svg) no-repeat center;}


    #footer {height: 100% !important; font-size: 1.5rem;}
    #footer .wrap {flex-direction: column; padding: 4.8rem 1.6rem; position: relative;}
    #footer .wrap .lt {flex-direction: column; gap: 2rem;}
    #footer .wrap .lt .f_menu {gap: .2rem 1.6rem; flex-wrap: wrap; margin-bottom: 9rem;}
    #footer .wrap .lt .f_menu li::after {right: -.8rem;}
    #footer .wrap .lt .address ul {flex-wrap: wrap; gap: .2rem 1.6rem;}
    #footer .wrap .lt .address ul li::after {right: -.8rem;}
    #footer .wrap .lt .address ul li:nth-child(2) {order: 5;}
    #footer .wrap .lt .address ul li:nth-child(2)::after {content: none;}
    #footer .wrap .lt .address ul li:nth-child(3) {order: 4;}
    #footer .wrap .rt {position: absolute; top: 10.2rem;}
    

    /** sub common **/
    .page_top .top_bg{height: 20rem; margin-top: 6.4rem; padding: 6.4rem 1.6rem;}
    .page_top .page_tit{font-size: 2.8rem;}
    .page_top .page_txt > p {font-size: 1.5rem;}

    /** board, table **/
    .board_top .board_right {display: flex; justify-content: flex-end; gap: .8rem;}
    .board_top select {min-width: 11.2rem;}
    .board_top .search_simple .input_wrap .input_txt {width: 100%;}

    /** paging **/
    .paging_wrap {margin-top: 3.2rem;}
    .paging li {min-width: 3.2rem; width: 3.2rem; height: 3.2rem; line-height: 3.2rem; margin: 0 .2rem;}
    .paging li a {font-size: 1.5rem;}
    .paging li.prev a::before,
    .paging li.next a::before {width: 2rem; height: 2rem; background-size: 100%;}

}
@media screen and (max-width: 1024px) {
    /** content **/
    select, input:not([type="checkbox"], [type="radio"], [type="hidden"]), textarea{padding: 0 1.6rem;}

    .search_basic{padding: 2.4rem 2rem 9.6rem;}
    .search_basic table,
    .search_basic tbody,
    .search_basic tr,
    .search_basic th,
    .search_basic td{display: block; height: auto;}
    .search_basic td{display: flex; flex-wrap: wrap; align-items: center;}
    .search_basic tr + tr,
    .search_basic tr td:nth-of-type(odd){margin-top: 1.6rem;}
    .search_basic tr td:first-of-type{margin-top: 0;}
    .search_basic td:not(:last-child):nth-child(2n+3){padding-left: 0;}
    .search_basic td > label{margin-bottom: 1rem; display: block;}
    .search_basic tr:nth-child(n+2) td{padding-top: 0;}
    .search_basic .w150{width: 100% !important;}
    .search_basic .w150 + input[type="text"]{width: 100% !important; margin-left: 0; margin-top: 1rem;}
    .search_basic .btn_reset, .search_basic .btn_search{width: calc((100% - 5rem) / 2);}
    .search_basic .btn_reset{right: auto; left: 2rem;}
    .search_basic .btn_search{right: 2rem;}


    /** board, table **/
    .board_top {display: flex; flex-direction: column-reverse; align-items: flex-start; margin-bottom: 1.2rem; gap: 2.4rem;}    

    table .badge {font-size: 1.3rem; height: 2.2rem; width: 4.8rem; line-height: 2.2rem;}
    .board_list {border-top: 0;}
    .board_list colgroup,
    .board_list thead {display: none;}

    .board_list,
    .board_list tbody,
    .board_list tr,
    .board_list td {display: block; width: 100%; text-align: left !important;}
    .board_list > tbody> tr {padding: 2rem 1.6rem; border: .1rem solid #C8C8C8; border-radius: 1.6rem;}
    .board_list > tbody> tr + tr {margin-top: 1.6rem;}
    .board_list > thead > tr > th, 
    .board_list > tbody > tr > td {font-size: 1.5rem; height: 2.8rem; background: transparent !important; border-bottom: 0; position: relative; z-index: 1; padding-left: 8rem !important; padding: 0; display: flex; align-items: center;}
    .board_list > tbody > tr > td + td {margin-top: .8rem;}
    .board_list > tbody > tr > td .td_view {padding: 0;}
    
    .board_list tbody tr td.file {display: none;}
    .board_list tbody tr td::before {position: absolute; left: 0; top: 0; font-size: 1.5rem; color: #0C0C0C; font-weight: 500; content: ""; width: 6.3rem; background-color: #F8F8F8; border-radius: 5rem; display: block; text-align: center; padding: .25rem; z-index: -1;}
    .board_list tbody tr td.number::before {content: '번호';}
    .board_list tbody tr td.d_day::before {content: '마감일';}
    .board_list tbody tr td.title::before {content: '제목';}
    .board_list tbody tr td.writer::before {content: '작성자';}
    .board_list tbody tr td.views::before {content: '조회수';}
    .board_list tbody tr td.date::before {content: '등록일';}

    .tbl_tit {font-size: 1.9rem; flex-direction: column; gap: .4rem; margin-bottom: 1.6rem;}
    .tbl_tit .d_day {font-size: 1.3rem; padding: .1rem .9rem;}

    .board_view colgroup {display: none;}
    .board_view > tbody > tr > th strong {font-size: 1.5rem; min-width: 8.4rem;}
    .board_view tbody tr.mo_list:first-of-type {padding-top: 1.6rem;}
    .board_view tbody tr.mo_list:not(:has(~ tr.mo_list)) {padding-bottom: 1.6rem;}
    .board_view tbody tr.mo_list {display: flex; flex-wrap: wrap; width: calc(100vw - 3.2rem);}
    .board_view tbody tr.mo_list th,
    .board_view tbody tr.mo_list td {display: flex; align-items: center; text-align: left; height: inherit; padding: .4rem 0; border: 0;}
    .board_view tbody tr.mo_list th {width: 8.4rem;}
    .board_view tbody tr.mo_list td {width: calc(100% - 8.4rem); padding: 0 1.6rem;}
    .board_view tbody tr.view_file {display: block; width: calc(100vw - 3.2rem); border-top: .1rem solid var(--tbl-bdr); border-bottom: .1rem solid var(--tbl-bd); padding: 2.4rem;}
    .board_view tbody tr.view_file th {margin-bottom: .8rem;}
    .board_view tbody tr.view_file th,
    .board_view tbody tr.view_file td {display: block; border: 0; padding: 0; height: inherit;}
    .board_view tbody tr.view_file th > *,
    .board_view tbody tr.view_file td > * {width: 100%;}
    .board_view tbody tr .mo_none {display: none !important;}

    .board_view td:has(.view_cont) {padding: 4rem 1.6rem;}
    .board_view .view_cont img {width: 100%; height: 100%;}

    .oth_post .btn_move {display: none !important;}
    .oth_post colgroup col:nth-child(2) {width: 17.2rem !important;}
    .oth_post tbody tr td .btn_list {min-width: 17.1rem; height: 4rem; font-size: 1.7rem;}


    /** content  **/ 
    .content .box .wrap .lt span {font-size: 1.5rem; margin-bottom: .2rem;}
    .content .box .wrap .lt h3 {font-size: 2.4rem; margin-bottom: .8rem;}
    .content .box .wrap .lt p {font-size: 1.5rem;}

    .content .box .wrap .rt .txt_list {gap: 1.2rem;}
    .content .box .wrap .rt .txt_list li {position: relative; z-index: 0;}
    .content .box .wrap .rt .txt_list li .txt {width: 100%;}
    .content .box .wrap .rt .txt_list li .txt strong {font-size: 1.7rem; display: block; padding-left: 5rem; padding-top: .7rem; margin-bottom: 1.5rem; height: 4rem;}
    .content .box .wrap .rt .txt_list li .txt p {font-size: 1.5rem; margin-top: 0;}
    .content .box .wrap .rt .txt_list li .img_box {position: absolute; z-index: -1; width: calc(100% - 6.4rem); padding: .4rem .8rem; display: block;}
    .content .box .wrap .rt .img_box img {width: 3.2rem; margin: inherit;}
    .content .box .wrap .rt .txt_list li .wh_box {flex-direction: column; gap: 1.2rem;}
    .content .box .wrap .rt .txt_list li .wh_box li {width: 100%; border-radius: .8rem;}
    .content .box .wrap .rt .txt_list li.bk {gap: 1.6rem;}
    .content .box .wrap .rt .roadmap {gap: 2.6rem;}
    .content .box .wrap .rt .roadmap > li {gap: 1.2rem;}
    .content .box .wrap .rt .roadmap li > div {padding: .6rem;}
    .content .box .wrap .rt .roadmap li > div .inner {min-height: 12.6rem; padding: 0 1.6rem;}
    .content .box .wrap .rt .roadmap li strong {font-size: 1.5rem;}
    .content .box .wrap .rt .roadmap li p {font-size: 1.3rem;}
    .content .box .wrap .rt .roadmap li .rm_box {width: 13rem;}
    .content .box .wrap .rt .roadmap li .rm_box2 {flex-direction: column; width: calc(100% - 14.2rem);}
    .content .box .wrap .rt .roadmap li .rm_box .inner,
    .content .box .wrap .rt .roadmap li .rm_box2 .inner {justify-content: center;}
    .content .box .wrap .rt .roadmap li:nth-child(1) .rm_box {min-height: 25rem;}
    .content .box .wrap .rt .roadmap li:nth-child(1) .rm_box .inner {min-height: 23.6rem;}
    .content .box .wrap .rt .roadmap li:nth-child(1) .rm_box2 {border-radius: 6rem;}
    .content .box .wrap .rt .roadmap li:nth-child(1) .rm_box2 .inner {width: 100%; min-height: 10.2rem;}
    .content .box .wrap .rt .roadmap li:nth-child(3), 
    .content .box .wrap .rt .roadmap li:nth-child(4), 
    .content .box .wrap .rt .roadmap li:nth-child(5), 
    .content .box .wrap .rt .roadmap li:nth-child(6), 
    .content .box .wrap .rt .roadmap li:nth-child(7) {border-width: .6rem;}
    .content .box .wrap .rt .roadmap li .rm_box2 .or {width: 2.4rem; height: 2.4rem; line-height: 2.4rem; font-size: 1.5rem;}
    .content .box .wrap .rt .roadmap li .rm_box::after,
    .content .box .wrap .rt .roadmap li .rm_box2::after,
    .content .box .wrap .rt .roadmap li:nth-child(3)::after, 
    .content .box .wrap .rt .roadmap li:nth-child(4)::after, 
    .content .box .wrap .rt .roadmap li:nth-child(5)::after, 
    .content .box .wrap .rt .roadmap li:nth-child(6)::after {width: 1.8rem; height: 1.8rem; background-size: 100%; bottom: -2.6rem;}

    .content .wrap .sm_tit {font-size: 2.4rem; margin-bottom: .8rem;}
    .content .wrap .inq_box {padding: 3.3rem 4rem;}
    .content .wrap .inq_box .lt {width: 40rem;}
    .content .wrap .inq_box .lt .mail {font-size: 1.9rem; padding-bottom: 1.6rem; margin-bottom: 1.6rem;}
    .content .wrap .inq_box .lt .hours {font-size: 1.7rem; gap: 1.2rem;}
    .content .wrap .inq_box .lt .hours strong {padding-left: 2.4rem;}
    .content .wrap .inq_box .lt .hours strong::before {width: 2rem; height: 2rem; background-size: 100%;}
}
@media screen and (max-width: 767px) { 
    /* 모바일 버전 스타일 (태블릿 대비 모바일에서 달라지는 스타일) */
    html {font-size: 11px} /* 1rem = 11px */

    /** content **/    
    .mo_br {display: block;}

    .page_top .top_bg {padding-top: 4rem; padding-bottom: 2.4rem; gap: .4rem;}
    .page_top .page_tit {text-align: center;}
    .page_top .page_txt {flex-direction: column; text-align: center; gap: 1.8rem;}
    .page_top .page_txt > p {min-height: 4.5rem;}

    .content .box.sky .wrap .rt  img {width: 100%;}
    .content .box .wrap .rt .txt_list li {padding: 1.6rem;}

    .content .wrap .inq_box {flex-direction: column-reverse; padding: 2rem; gap: 2.4rem; background: #1F3AAE url(../images/content/inquiry_bg_mo.png) no-repeat center; background-size: 115%;}
    .content .wrap .inq_box .lt {width: 100%; text-align: center;}
    .content .wrap .inq_box .lt .mail br:not(.mo_br) {display: none;}
    .content .wrap .inq_box .rt img {height: 21.2rem;}
    .content .wrap .inq_box .lt .hours {flex-direction: column; gap: .2rem;}
    .content .wrap .inq_box .lt .hours span {font-size: 1.5rem; opacity: .7;}

    .content .box .wrap .rt > img {max-width: 100%;}
    .content .box .wrap .rt .txt_list li .img_box {width: calc(100% - 3.2rem);}
    
    .page_top .top_bg.bg1{background: url(../images/common/bg_top_01_mo.png) no-repeat center / cover;}
    .page_top .top_bg.bg2{background: url(../images/common/bg_top_02_mo.png) no-repeat center / cover;}
    .page_top .top_bg.bg3{background: url(../images/common/bg_top_03_mo.png) no-repeat center / cover;}
    .page_top .top_bg.bg4{background: url(../images/common/bg_top_04_mo.png) no-repeat center / cover;}
    .page_top .top_bg.bg5{background: url(../images/common/bg_top_05_mo.png) no-repeat center / cover;}
}
@media screen and (max-width: 480px) { 
    /* 모바일 버전 스타일2 (모바일 작은 화면에서 달라지는 스타일) */
    html {font-size: 10px;} /* 1rem = 10px */

    .content .box .wrap .lt p br {display: none;}
    .content .box .wrap .lt p.mo_ab {position: absolute; bottom: -.7rem; left: 50%; transform: translateX(-50%); width: 100%; font-weight: 500; color: #0c0c0c;}

}



