/* 기본세팅 */
@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;}
/* 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: 12px;}
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: 320px; 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);}

/* 메인 슬라이드 */
.main_slide{width: 100%; height: auto; position: relative; overflow: hidden;}
.main_slide img{width: 100%; height: 400px; object-fit: cover;}

/* .slide_control{position: relative;} */
.main_slide .swiper-button-next{right: 10%;}
.main_slide .swiper-button-prev{left: 10%;}
.main_slide .swiper-button-next:after{color: #fff; font-size: 32px;}
.main_slide .swiper-button-prev:after{color: #fff; font-size: 32px;}
.main_slide .swiper-pagination{margin: 0 0 20px 0; position: relative; width: 100%;}
.main_slide .swiper-pagination-bullet{width: 12px; height: 12px; background-color: #CECECE; opacity: 1; border-radius: 12px;}
.main_slide .swiper-pagination-bullet-active{background-color: #CECECE; width: 80px; position: relative; overflow: hidden;}
.main_slide .swiper-pagination-bullet-active::before { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 0; background-color: #227DE0; animation: fillProgress 3s linear forwards; z-index: 1; border-radius: 12px;}


.slide_control{ width: 100%; display: flex; align-items: center; justify-content: center; position: absolute; bottom: 0;}
/* .slide_btn{margin: -50px 0 0 10px; position: relative; z-index: 10;}
.slide_btn li{margin: 0 10px;} */

/* 컨텐츠 */
.content_wrap{width: 100%; max-width: 1350px; margin: 30px auto;}
.content_wrap .content{margin-bottom: 30px;}
.content_wrap .content:last-child{margin-bottom: 0;}

/* main box */
.content_wrap .content .box_wrap{width: 100%; display: flex; justify-content: space-between; align-items: center;}
.content_wrap .content .box_wrap .box{background-color: var(--blue); border-radius: 10px; width: calc(100% / 3 - 10px); padding: 20px; box-sizing: border-box;}
.content_wrap .content .box_wrap .box .box_tit{display: flex; justify-content: space-between; margin-bottom: 20px;}
.content_wrap .content .box_wrap .box .box_tit *{color: #fff;}
.content_wrap .content .box_wrap .box .box_tit h3{font-size: 22px; font-weight: 800;}
.content_wrap .content .box_wrap .box .box_tit .plus_btn button{width: 24px; height: 24px;}
.content_wrap .content .box_wrap .box .box_tit .plus_btn button i{font-size: 24px;}
.content_wrap .content .box_wrap .box .box_cont dl{display: flex; justify-content: space-between; margin-bottom: 10px;}
.content_wrap .content .box_wrap .box .box_cont dl dt {color: #fff; cursor: pointer; position: relative; display: inline-block; white-space: nowrap; text-overflow: ellipsis; margin-right: 10px; overflow: hidden; max-width: 100%; width: calc(100% - 100px);}
.content_wrap .content .box_wrap .box .box_cont dl dt a::after { content: ""; position: absolute; left: 0; bottom: 0px; width: 100%; height: 1px; background-color: #fff; transform: scaleX(0); transform-origin: right; transition: transform 0.3s ease; pointer-events: none;}
.content_wrap .content .box_wrap .box .box_cont dl dt a:hover::after { transform: scaleX(1); transform-origin: left;}
.content_wrap .content .box_wrap .box .box_cont dl dt a{color: #fff; font-size: 16px; cursor: pointer; position: relative; display: inline-block; white-space: nowrap; text-overflow: ellipsis; margin-right: 10px; overflow: hidden; max-width: 100%;}
.content_wrap .content .box_wrap .box .box_cont dl dd{color: #fff; opacity: 0.5; width: 100px; text-align:right; font-family: 'sans-serif';}

.content_wrap .content .box_wrap .box2{background-color: #EFEFEF;}
.content_wrap .content .box_wrap .box2 .box_tit *{color: #555F74;}
.content_wrap .content .box_wrap .box2 .box_cont dl dt{color: #3A3A3A;}
.content_wrap .content .box_wrap .box2 .box_cont dl dt a{color: #3A3A3A;}
.content_wrap .content .box_wrap .box2 .box_cont dl dd{color: #000000;}
.content_wrap .content .box_wrap .box2 .box_cont dl dt a::after{background-color: var(--main-color);}
.content_wrap .content .box_wrap .box2 .box_cont dl dt a:hover{color: var(--main-color);}

.content_wrap .content .box_wrap .box3{background-color: #555F74;}

/* 다운로드  */
.download{display: block; background: url(../img/downloadBg.jpg) no-repeat center center; width: 100%; height: 200px; border-radius: 20px; position: relative; background-size: cover; z-index: 0; overflow: hidden; cursor: pointer;}
.download::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(34, 114, 211, 0.5); z-index: -1;}
.downloadText{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center;}
.downloadCont{text-align: center;}
.downloadCont h3{font-size: 32px; color: #fff;}
.downloadCont p{font-size: 18px; color: #fff;}
.downloadIcon{margin-left: 20px;}
.downloadIcon i{font-size: 48px; color: #fff;}

/* 안내 & 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;}
.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;}
.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 20px;}
.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;}

/* 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){
	
}

/*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;}