/* @font-face {
    font-family: 'Pretendard';
    src: url("/font/Pretendard-Bold.woff") format('woff');
    font-weight: 700;
}
@font-face {
    font-family: 'Pretendard';
     src: url("/font/Pretendard-Regular.woff") format('woff');
    font-weight: 400;
} */
 @font-face {
    font-family: 'NEXON Lv1 Gothic';
    src: url("/able/font/NEXON Lv1 Gothic OTF Light.woff") format('woff');
    font-weight: lighter;
}
@font-face {
    font-family: 'NEXON Lv1 Gothic';
    src: url("/able/font/NEXON Lv1 Gothic OTF.woff") format('woff');
    font-weight: normal;
}
@font-face {
    font-family: 'NEXON Lv1 Gothic';
    src: url("/able/font/NEXON Lv1 Gothic OTF Bold.woff") format('woff');
    font-weight: bold;
}

/*공통*/
html, body {scroll-behavior: smooth; height: 100%; font-family: 'NEXON Lv1 Gothic', sans-serif, '맑은고딕', '돋움' ,arial; }
.maxBox{width: 1400px; margin: 0 auto;}
body.noScroll{overflow: hidden;}
/* 스크린리더 전용 숨김(표준 패턴) */
.sr-only {position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);  white-space: nowrap; border: 0;}
.red{color: #FF0000;}
.blue{color: #1554A6;}
.green{color: #35A841;}
.center {text-align: center;}
.left {text-align: left !important;}

/*본문이동*/
.skipNav{position:relative;z-index:9999;}
.skipNav a{position: absolute; top: -200px; left:0; width: 160px; line-height: 30px; border: 1px solid #dedede; background-color: #333;}
.skipNav a:focus, .skipNav a:active{top: 0; color: #FFF; text-align: center}

/*탑버튼*/
.topBtn{position: fixed; bottom: 40px; right: 70px; padding: 10px; box-sizing: border-box; background: #333; color: #fff; font-size: 15px; border-radius: 60px; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.3s; z-index: 99; width: 60px; height: 60px; border: 1px solid #ddd;}
.topBtn.show{opacity: 1; pointer-events: auto;}

/*헤더*/
header{position: fixed;left: 0; top: 0; background: #fff; width: 100%; z-index: 9;}
header .top> div{display: flex; justify-content: space-between; align-items: center; padding: 20px 0; box-sizing: border-box; }
header .top> div .search{position: relative;}
header .top> div .search label{position: absolute; left: 20px; top: 20px; font-size: 20px; color: #555555;}
header .top> div .search label span{color: #35A841; font-weight: bold;}
header .top> div .search input{width: 580px; padding: 14px 80px 14px 16px; box-sizing: border-box; border: 4px solid; border-image: linear-gradient(90deg, #1554A6, #35A841) 1; font-size: 20px;}
header .top> div .search button{background: #35A841; width: 58px; height: 58px; position: absolute; right: 0; top: 0;}
header .top> div .util{display: inline-flex; gap: 10px;}
header .top> div .util a{border: 1px solid #35A841; padding: 10px 20px; box-sizing: border-box;  border-radius: 20px; color: #35A841;}
header .top> div .util a:last-child{background: #35A841; color: #fff;}
header .nav{border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; box-sizing: border-box; position: relative; background: #fff;}
header .nav ul.menu{display: grid; grid-template-columns: repeat(4, 1fr); padding: 0 200px; box-sizing: border-box; }
header .nav ul.menu> li button{font-size: 20px; width: 100%; padding: 15px 0; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
header .nav ul.menu> li.on button{background: #dfe4ec; font-weight: bold;}
header .nav ul.menu> li button::after{content: ""; display: inline-flex; width: 12px; height: 7px; background: url(../images/gnbArr.png)no-repeat; background-size: contain; transition: transform .2s; margin-left: 40px;}
header .nav ul.menu> li.on button::after{transform: rotate(180deg);}
/*depth2*/
header .nav ul.menu> li a{position: relative;}
header .nav ul.menu> li a .direc{position: absolute; right: 15px; top: 11px;}
header .nav ul.menu> li .depthBox{position: absolute; left: 0; top: 100%; background-color: #fff;width: 100vw; height: 400px; display: none; z-index: 10; padding: 20px 0; box-sizing: border-box; z-index: 99; box-shadow: 2px 2px 2px #ccc;}
header .nav ul.menu> li.on .depthBox{display: block;}
header .nav ul.menu> li .depthBox .depth2{display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px;}
header .nav ul.menu> li .depthBox .depth2> li> a{display: block; border-radius: 10px; padding: 15px 20px; box-sizing: border-box; background: #f0f3f7; font-size: 17px;}
header .nav ul.menu> li .depthBox .depth2> li:hover> a, header .nav ul.menu > li .depthBox .depth2> li> a:focus, header .nav ul.menu > li .depthBox .depth2> li:focus-within> a{background: #35A841; color: #fff}
header .nav ul.menu> li .depthBox .depth3{background: #f9f9f9; padding: 20px; box-sizing: border-box; display: grid; gap: 10px; border-radius: 0 0 10px 10px;}
header .nav ul.menu> li .depthBox .depth3> li> a{padding-bottom: 10px;}
header .nav ul.menu> li .depthBox .depth3> li> a::before{content: "·"; padding-right: 5px;}
header .nav ul.menu> li .depthBox .depth3> li:hover> a, header .nav ul.menu> li .depthBox .depth3> li> a:focus, header .nav ul.menu> li .depthBox .depth3> li:focus-within> a{text-decoration: underline;}
header .nav .sitemap{position: absolute; right: 0; top: -42px;}
.sitemapMaxbox{position: relative;}
.mobileUtil{display: none;}

/*모바일네비*/
.m_nav{display: none;}

/*모바일검색*/
.m_search{display: none;}

/*푸터*/
footer{background: #333945; width: 100%;}
footer .relatedList{border-bottom: 1px solid #6F788B; box-sizing: border-box;}
footer .relatedList ul{display: grid; grid-template-columns: repeat(3, 1fr);}
footer .relatedList ul> li{border-left: 1px solid #6F788B; box-sizing: border-box; color: #B3B9C3; position: relative;}
footer .relatedList ul> li button{font-size: 17px; padding: 20px 25px; box-sizing: border-box; width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center;}
footer .relatedList ul> li:last-child{border-right: 1px solid #6F788B; box-sizing: border-box;}
footer .relatedList ul> li .inner{position: absolute; right: 0; top: -172px; width: 100%; height: 169px; background: #fff; overflow-y: scroll; opacity: 0; visibility: hidden;}
footer .relatedList ul> li .inner.active{visibility: visible; opacity: 1; border: 1px solid #ddd;}
footer .relatedList ul> li .inner ol> li> a{padding: 20px 25px; box-sizing: border-box; border-bottom: 1px dashed #ddd; display: block; color: #555;}
footer .relatedList ul> li .inner ol> li> a:hover{background: #f9f9f9}
footer .relatedList ul> li .inner ol> li:last-child> a{border-bottom: 0;}
footer .info h1{padding: 30px 0; box-sizing: border-box;}
footer .info .menu{display: inline-flex; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #6F788B; width: 100%;}
footer .info .menu li{color: #B3B9C3; padding: 0 20px; position: relative;}
footer .info .menu li::after{content: "·"; position: absolute; right: 0; top: 0; color: #B3B9C3;}
footer .info .menu li:last-child::after{display: none;}
footer .info .menu li:first-child{color: #fff; padding-left: 0;}
footer .info .num{display: inline-flex; margin-bottom: 20px;}
footer .info .num dl{display: inline-flex; position: relative; padding: 0 10px;}
footer .info .num dl:first-child{padding-left: 0;}
footer .info .num dl::after{content: ""; position: absolute; right: 0; top: 0; width: 1px; height: 16px; background: #B3B9C3;}
footer .info .num dl:last-child:after{display: none;}
footer .info .num dl dd{color: #fff;}
footer .info .num dl dt{color: #B3B9C3;  margin-right: 5px;}
footer address{color: #B3B9C3; padding-bottom: 10px;}
footer .copy{color: #B3B9C3; padding-bottom: 30px;}

/*테블릿 가로*/
@media all and (max-width:1480px) {
    .maxBox{width: calc(100% - 50px);}

    /*헤더*/
    header h1 img{width: 230px;}
    header .top> div .search input{width: 400px;}
    header .nav ul.menu{padding: 0 100px;}
    header .nav ul.menu> li button{font-size: 17px;}
    header .nav .sitemap{top: -40px;}

}

/*테블릿 세로*/
@media all and (max-width:1000px) {

    /*헤더*/
    header{border-bottom: 1px solid #ddd;}
    header .nav{display: none;}
    header h1 img{width: 230px;}
    header .top> div .search, header .top> div .util{display: none;}
    .mobileUtil{display: block; display: flex; gap: 20px; justify-content: center; align-items: center;}

    /*모바일네비*/
    .m_nav{position: fixed; right: 0; top: 0; width: 100%; height: 100%; background: #f0f3f7; padding: 40px; box-sizing: border-box; overflow-y: auto; display: none; -webkit-overflow-scrolling: touch; z-index: 999;}
    .m_nav.active{display: block;}
    .m_nav> div.top{display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;}
    .m_nav> div.top a{display: flex; justify-content: center; align-items: center; gap: 10px; font-weight: bold;}
    .m_nav> div.top button img{width: 30px; height: 30px;}
    .m_nav> div.util{display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 20px;}
    .m_nav> div.util> a{display: flex; border: 1px solid #35A841; width: 100%; justify-content: center; align-items: center; padding: 15px; box-sizing: border-box; border-radius: 40px; color: #35A841; font-size: 15px; background: #fff;}
    .m_nav> div.util> a:last-child{background: #35A841; color: #fff;}
    .m_nav ul.m_depth2{display: grid; gap: 10px;}
    .m_nav ul.m_depth2> li{display: grid; background: #fff; padding: 25px 30px; box-sizing: border-box; border-radius: 10px;}
    .m_nav ul.m_depth2> li span{border-bottom: 1px solid #ddd; box-sizing: border-box; padding-bottom: 15px; margin-bottom: 15px; font-size: 20px; font-weight: bold;}

    /* .m_nav ul.m_depth2> li a, .m_nav ul.m_depth2> li button{padding-bottom: 20px; position: relative; padding-left: 10px; font-size: 17px; text-align: left;}
    .m_nav ul.m_depth2> li a:last-child, .m_nav ul.m_depth2> li button:last-child{padding-bottom: 0;}
    .m_nav ul.m_depth2> li a::before, .m_nav ul.m_depth2> li button::before{content: ""; position: absolute; left: 0; top: 8px; width: 3px; height: 3px; border-radius: 10px; background: #ddd;}
    .m_nav ul.m_depth2> li button> div img{position: absolute; right: 0; top: 7px; transition: transform 0.3s ease;}
    .m_nav ul.m_depth2> li button .m_depth3{background: #f9f9f9; padding: 15px; box-sizing: border-box; margin-top: 10px; display: none;}
    .m_nav ul.m_depth2> li button .m_depth3> li{padding-bottom: 10px;}
    .m_nav ul.m_depth2> li button .m_depth3> li:last-child{padding-bottom: 0;}
    .m_nav ul.m_depth2> li button.rotate img{transform: rotate(180deg); transition: transform 0.3s ease;}
    .m_nav ul.m_depth2> li button img{transition: transform 0.3s ease;} */
    .m_nav ul.m_depth2> li> a, .m_nav ul.m_depth2> li> button {padding-bottom: 15px; position: relative; padding-left: 10px; font-size: 17px; text-align: left; background: none; border: none; width: 100%; cursor: pointer; font-family: inherit;}
    .m_nav ul.m_depth2> li> a::before, .m_nav ul.m_depth2> li> button::before {content: ""; position: absolute; left: 0; top: 8px; width: 3px; height: 3px; border-radius: 10px; background: #ddd;}
    
    .m_nav ul.m_depth2> li> button img {position: absolute; right: 0; top: 7px; transition: transform 0.3s ease;}
    .m_nav ul.m_depth2> li> button.rotate img {transform: rotate(180deg);}
    .m_nav ul.m_depth3 {background: #f9f9f9; padding: 15px; box-sizing: border-box; display: none; margin-bottom: 20px;}
    .m_nav ul.m_depth3> li {padding-bottom: 15px;}
    .m_depth3 + a, .m_depth3 + button {padding-top: 0;}
    .m_nav ul.m_depth3> li:last-of-type{padding-bottom: 0;}
    .m_nav ul.m_depth3> a {font-size: 15px; color: #333; padding-left: 10px; display: block;}

    /*모바일검색*/
    .m_search{position: fixed; width: 100%; background: #fff; margin-top: -11px; padding: 20px 60px 40px 60px; box-sizing: border-box; display: none; z-index: 9; box-shadow: 3px 3px 3px #ddd;}
    .m_search> div{background: #fff; width: 100%; display: inline-block; border-bottom: 3px solid #000; position: relative;}
    .m_search> div input{border: none; width: 100%; padding: 15px;}
    .m_search> div button{position: absolute; right: 20px; top: 10px;}

    /*푸터*/
    footer .relatedList{border-bottom: none;}
    footer .relatedList ul{display: block;}
    footer .relatedList ul> li{border-left: none;}
    footer .relatedList ul> li:last-child{border-right: none;}
    footer .relatedList ul> li button{border-bottom: 1px dashed #6F788B;}
    footer .info .menu{display: block;}
    footer .info .menu li{display: inline-block; padding: 0 20px 10px 20px;}
    footer .info .num{display: block;}
    footer .info .num dl{padding: 0 10px 10px 10px;}

}

/*모바일*/
@media all and (max-width:460px) {

    /*탑버튼*/
    .topBtn{right: 30px; bottom: 30px; font-size: 13px;}

    /*헤더*/
    header h1 img{width: 140px;}
    .mobileUtil{display: block; display: flex; gap: 20px; justify-content: center; align-items: center;}

    /*모바일네비*/
    .m_nav{padding: 20px;}
    .m_nav ul.m_depth2> li a, .m_nav ul.m_depth2> li button{font-size: 15px; padding-bottom: 15px;}

    /*모바일검색*/
    .m_search{padding: 20px 20px 40px 20px; margin-top: 0;}

    /*푸터*/
    footer .relatedList ul> li button{font-size: 15px; padding: 15px;}
    footer .relatedList ul> li .inner{top: -184px; height: 182px;}
    footer .relatedList ul> li .inner ol> li> a{padding: 15px; font-size: 15px;}
    footer .info h1{padding: 20px 0;}
    footer .info h1 img{width: 200px;}
    footer .info .menu{margin-bottom: 20px; padding-bottom: 20px;}
    footer .info .menu li{padding: 0 10px 10px 10px; font-size: 15px;}
    footer .info .num{display: block; font-size: 15px;}
    footer .info .num dl{padding: 5px 0;}
    footer .info .num dl::after{display: none;}
    footer address, footer .copy{font-size: 13px; line-height: 20px;}
}