/* 기본세팅 */
@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css");

* { margin: 0; padding: 0; font-family: 'SUITE', sans-serif; letter-spacing: -0.5px; /* box-sizing: border-box; */}
/* html {
    -webkit-text-size-adjust: 100%;
    -ms-scroll-chaining: none;
    overscroll-behavior: none;
}
*::-webkit-scrollbar{
    width: 10px;
}
*::-webkit-scrollbar-thumb {
    background: #F2F2F2;
    border-radius: 10px;
}

*::-webkit-scrollbar-track {
    background: #FBFBFB;
}
*::selection {
    background: #002169;
    color: #FBFBFB;
} */
a { text-decoration: none; color: #161616; font-size: 14px;}
h1,h2,h3,h4,h5,h6 { color: #161616;}
p,span { color: #161616;}
li { list-style: none; display: inline-block;}

table { border-collapse: collapse}
input,select,button { border: 0; outline: 0}
caption{display: none;}
button{background-color: transparent; cursor: pointer;}
/* @import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url(//fonts.googleapis.com/earlyaccess/nanummyeongjo.css); */
@font-face {
    font-family: 'SUITE';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Tenada';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2210-2@1.0/Tenada.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
/* 슬라이드 */
@keyframes fillProgress {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type='number'] {
    -moz-appearance: textfield;
}

input[type='radio']{width: 16px; height: 16px; cursor: pointer;}
body.no_scroll {
    overflow: hidden; /* body의 스크롤 비활성화 */
}

.marginb20{margin-bottom: 20px !important;}
.margint20{margin-top: 20px !important;}
.marginl20{margin-left: 20px !important;}
.marginr20{margin-right: 20px !important;}

.marginb40{margin-bottom: 40px !important;}
.margint40{margin-top: 40px !important;}
.marginl40{margin-left: 40px !important;}
.marginr40{margin-right: 40px !important;}

.marginb60{margin-bottom: 60px !important;}
.margint60{margin-top: 60px !important;}
.marginl60{margin-left: 60px !important;}
.marginr60{margin-right: 60px !important;}

.padding20{padding: 20px !important;}
.paddingb20{padding-bottom: 20px !important;}
.paddingt20{padding-top: 20px !important;}
.paddingl20{padding-left: 20px !important;}
.paddingr20{padding-right: 20px !important;}

.border{border: 1px solid #ddd !important;}
.borderb{border-bottom: 1px solid #ddd !important;}
.bordert{border-top: 1px solid #ddd !important;}
.borderl{border-left: 1px solid #ddd !important;}
.borderr{border-right: 1px solid #ddd !important;}

.displayb{display: block !important;}
.displayf{display: flex !important;}
.displayn{display: none !important;}

.fontsize14{font-size: 14px !important;}
.fontsize16{font-size: 16px !important;}
.fontsize18{font-size: 18px !important;}
.fontsize20{font-size: 20px !important;}

.fontbold{font-weight: 600 !important;}

.textleft{text-align: left !important;}
.textright{text-align: right !important;}

.width50{width: 50% !important;}
.width100{width: 100% !important;}
.widthauto{width: auto !important;}
.stick::before{content: '-';}
.star::before{content: '*';}


.fontbg_yellow{background-color: #fae397 !important;}
.fontbg_green{background-color: #baeacc !important;}
.fontbg_blue{background-color: #c3cceb !important;}
.fontbg_purple{background-color: #F1ECF8 !important;}
.tbl_BgGray{background-color: #F2F2F2 !important;}
.tbl_BgBlue{background-color: #EBF3FC !important;}
.tbl_BgPurple{background-color: #F1ECF8 !important;}

.bg_gray{background-color: #f8f8f8 !important;}
.bg_deepgray{background-color: #B9B9B9 !important;}
.bg_blue{background-color: #002169 !important;}

.btn{display: inline-block; text-align: center; font-size: 13px; padding: 16px;}
.btn i{margin-right: 5px;}
.btn.red{background-color: #dc000f; color: #fff;}
.btn.orange{background-color: #FF6B00; color: #fff;}
.btn.black{background-color: #161616; color: #fff;}
.btn.purple{background-color: #475d83; color: #fff;}
.btn.yellow{background-color: #FFF9D7; color: #161616;}
.btn.green{background-color: #EAF9EB; color: #161616;}
.btn.gray{background-color: #EAEAEA; color: #161616;}
.btn.pink{background-color: #FFE3E3; color: #161616;}
.btn.blue{background-color: #E6FBFB; color: #161616;}
.btn.deepblue{background-color: #002169; color: #fff;}
.btn.deepgray{background-color: #979797; color: #fff;}


.btn.line{border: 1px solid; background-color: transparent;}
.btn.line.black{border-color: #161616; color: #161616;}
.btn.line.red{border-color: #dc000f; color: #dc000f;}
.btn.line.orange{border-color: #FF6B00; color: #FF6B00;}
.btn.line.purple{border-color: #475d83; color: #475d83;}
.btn.line.yellow{border-color: #FFF9D7; color: #FFF9D7;}
.btn.line.green{border-color: #EAF9EB; color: #EAF9EB;}
.btn.line.gray{border-color: #EAEAEA; color: #EAEAEA;}
.btn.line.pink{border-color: #FFE3E3; color: #FFE3E3;}
.btn.line.blue{border-color: #E6FBFB; color: #E6FBFB;}
.btn.line.gray{border-color: #979797; color: #979797;}
.btn.line.deepblue{border-color: #002169; color: #002169;}
.btn.line.aqua{border-color: #52ADAD; color: #52ADAD;}

.gap10{gap: 10px;}

input[type="checkbox"]{accent-color: #f86800;}
input[type="radio"]{accent-color: #f86800; width: 16px !important; height: 16px !important; margin-right: 5px;}
.center{text-align: center !important;}
.left{text-align: left !important;}
.right{text-align: right !important;}
.fl{float: left;}
.fr{float: right;}

.mainColor{color: #FF6B00;}

.mob{display: none;}
.pc{display: block;}

.justify{display: flex; align-items: center; justify-content: space-between;}

/* 공용 */
:root{
    --main-color: #FF6C00;
    --blue: #2272d3;
    --green: #297F69;
    --aqua: #4d8599;
}
.mdi{font-family: 'Material Design Icons';}
/* 상단 부분 */
body{min-width: 1440px;}
.top_wrap{position: relative; background-color: #fff;}
.top1{text-align: right; width: 100%; height: 25px; margin: 20px auto; max-width: 1350px;}
.top2{width: 100%; margin: 0 auto 10px auto; max-width: 1350px; text-align: center;}
.top2 .top_logo{height: 50px;}
.top2 .top_logo img{display: inline-block; height: 62px;}
.top_btn ul li{margin: 0 5px; color: #8A8D8F;}
.top_btn ul li a{font-size: 16px; color: #8A8D8F;}
.top_btn ul li a, .menu_nav li a {position: relative; display: inline-block;}

.top_btn ul li a:hover, .menu_nav li a:hover{color: var(--main-color);}
.top_btn ul li a::after, .menu_nav li a::after {content: ""; position: absolute; left: 0; bottom: 0px; width: 100%; height: 1px; background-color: var(--main-color); transform: scaleX(0); transform-origin: right; transition: transform 0.3s ease;}
.top_btn ul li a::after{bottom: -5px;}
.menu_nav>ul>li>a::after{bottom: 10px;}
.top_btn ul li a:hover::after, .menu_nav li a:hover::after {transform: scaleX(1); transform-origin: left;}




/* 메뉴 */
.menu_nav{width: 100%; height: 70px; border-bottom: 1px solid #ccc; text-align: center;}
.menu_nav ul{width: 100%; max-width: 1350px; margin: 0 auto;}
.menu_nav li{width: calc(100%/6 - 5px); text-align: center; position: relative;  z-index: 100; height: 70px; line-height: 70px;}
.menu_nav li a{font-size: 24px; color: #000;}

.menu_nav li ul.new_sub{position: absolute; left: 0; top: 70px;  display: none; height: 280px; width: 100%;}
.menu_nav li ul.new_sub li{width: 100%; height: 30px; line-height: 30px; display: block; margin-top: 20px;}
.menu_nav li ul.new_sub li a{font-size: 20px;}
.nav_bg{width: 100%; position: absolute; top: 175px; left: 0; z-index: 99; background: #fff; height: 320px; border-bottom: 1px solid #ccc; box-shadow: 5px 3px 10px rgba(0, 0, 0, 0.1);}


/* 안내 & sub */
.guide_wrap{width: 100%; height: 95px; display: flex; gap: 20px; justify-content: space-between; max-width: 1350px; margin: 0 auto;}
.guide{border: 1px solid #D0D7E2; padding: 15px; border-radius: 10px; width: calc(100% / 3); display: flex; align-items: center; justify-content: center; cursor: pointer; gap: 10px;}
/* .guide .guideIcon i{margin-right: 10px; font-size: 40px; color: #002467;} */
.guide .guideIcon img{height: 45px;}

.guide .guideText .guideTit h3{font-size: 28px; font-weight: 800; color: #002467;}
.guide .guideText .guideCont p{font-size: 18px; margin-top: 5px; color: #002467;}
.guide:hover{border-color: var(--main-color); background-color: var(--main-color);}
.guide:hover *{color: #fff !important;}
.guide:hover img{-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}

.sub_guide{border-top: 1px solid #ddd; padding: 20px 0;}

/* sub */
.sub_banner{background: url(../img/downloadBg.jpg) no-repeat center center; width: 100%; height: 200px; position: relative; background-size: cover; z-index: 0;}
.sub_banner::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(34, 114, 211, 0.5); z-index: -1;}
.sub_banner .bannerText{width: 1350px; height: 100%; margin: 0px auto; position: relative;}
.sub_banner .bannerText .bannerLeft{position: absolute; top: 50%; left: 0; transform: translate(0, -50%);}
.sub_banner .bannerText .bannerLeft p{font-size: 27px; color: #C6C6C6;}
.sub_banner .bannerText .bannerLeft h2{font-size: 53px; color: #fff;}
.sub_banner .bannerText .bannerRight{position: absolute; bottom: 20px; right: 0;}
.sub_banner .bannerText .bannerRight p{font-size: 18px; color: #fff;}

.sub_wrap{margin-top: 0; margin-bottom: 0; width: 1350px; margin: 0 auto; box-sizing: border-box;}
.both_content{display: flex; flex-wrap: wrap;}
.both_content .subLeft{width: 232px; border-right: 1px solid #ddd; border-left: 1px solid #ddd; padding: 30px 0; box-sizing: border-box;}
.both_content .subLeft ul{display: flex; flex-direction: column;}
.both_content .subLeft ul li{width: 100%; text-align: center; margin-bottom: 20px;}
.both_content .subLeft ul li a{text-align: center; font-size: 20px; position: relative;}
.both_content .subLeft ul li a:hover{color: var(--main-color);}
.both_content .subLeft ul li a::after {content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background-color: var(--main-color); transform: scaleX(0); transform-origin: right; transition: transform 0.3s ease;}
.both_content .subLeft ul li a:hover::after {transform: scaleX(1); transform-origin: left;}

.both_content .subRight{width: calc(100% - 232px); padding: 30px 40px; box-sizing: border-box;}
.both_content .subRight .cont_tit{padding-bottom: 10px; border-bottom: 1px solid #666; width: 100%; margin-bottom: 30px;}
.both_content .subRight .cont_tit h2{color: #164c84; font-size: 27px;}
.both_content .subRight .cont p.right{font-weight: 600; margin-top: 10px;}
/* table */
table.notice{font-size: 16px; width: 100%;}
table.notice thead tr th, table tbody tr td{padding: 10px;}
table.notice thead tr th{font-size: 16px; text-align: center; font-weight: 600; background-color: #fafafa; color: #000; border-right: 1px solid #ddd; border-top: 1px solid #000; border-bottom: 1px solid #ddd;}
table.notice thead tr th:last-child{border-right: 0;}
table.notice tbody tr td{font-size: 14px; text-align: center; border-right: 1px solid #e4e4e4;}
table.notice tbody tr td:last-child{border-right: 0;}
table.notice tbody tr td.tit{text-align: left;}

/* footer */
.footer {width:100%; height:auto; background-color:#3F3F3F;}
.footer .contact {width:1350px; margin:auto; padding-top: 40px; color:#ccc; padding-bottom: 20px; position: relative;}
.footer .contact p,.footer .contact a,.footer .contact span {line-height:22px; color: #ccc; font-size: 16px;}
.footer .contact span {margin-right:10px;}
.contact_top .footer_logo{margin-bottom: 5px;}
.contact_top .footer_logo img{-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); height: 50px; opacity: 30%;}
.contact_bottom{margin-top: 20px; display: flex; justify-content: space-between;}
.contact a{padding: 3px 5px; border: 1px solid #ccc; text-align: center; margin-bottom: 5px; display: inline-block;}
.contact a:hover{background-color: #fff; color: #3F3F3F;}
@media (min-width: 0px) and (max-width: 800px) {
    
}
@media (min-width: 801px) and (max-width: 1280px) {
    
}
@media (min-width: 1281px) and (max-width: 1600px) {
	
}
@media (min-width: 1601px){
	
}

table.tbl_view{width: 100%;}
table.tbl_view tbody tr th, table.tbl_view tbody tr td{border-top: 1px solid #ddd; padding: 10px;}
table.tbl_view tbody tr:first-child th, table.tbl_view tbody tr:first-child td{border-top: 4px solid #2067af;}
table.tbl_view tbody tr th{border-right: 1px solid #ddd; border-bottom: 1px solid #ddd;}
table.tbl_view tbody tr td{text-align: left; border-right: 1px solid #ddd;}
table.tbl_view tbody tr td:last-child{border-right: 0;}
table.tbl_view tbody tr td a{font-size: 16px;}
.board_view{text-align: left; margin-top: 10px; width: 100% !important;}


/*2025-06-23 footer family site 추가 */
.contact_mid{position: absolute; top: 40px; right: 180px;}
.contact_mid p{margin-bottom: 15px;}
.familyList li{margin-bottom: 5px; display: block;}
.familyList li a{border: 0; margin: 0; padding: 0;}
.familyList li a:hover{background: none; color: #ccc;}
.familyList li:last-child{margin-bottom: 0;}

.logoImg_wrap{margin: 20px 0 0 0;}
.logoImg_wrap .logo_img{margin: 10px 0;}
.logoImg_wrap .logo_img img{width: 500px;}
.logoImg_wrap .btn_wrap a{display: inline-block; padding: 0 10px; box-sizing: border-box; background-color: #002462; color: #fff; width: 200px; height: 50px; text-align: center; line-height: 50px; font-size: 16px;}