@charset "utf-8";

html,body {font-family: 'NotoKrR'; width:100%; font-weight:400; letter-spacing: -0.02em;}
body{overflow-y:visible; overflow-x:hidden;}


.directFocus {height: 0;}
.directFocus .directBtn{position:absolute; top:-1000px; left:-1000px; z-index: 9999;padding:10px 15px; font-size:16px; background-color:#4362b2; display: inline-block; color:#fff; text-align: center;}
.directFocus .directBtn:focus{top:0; left:0;}



.inner, .wrap {width: 100%; max-width: 1400px; min-width: 320px; position: relative; margin: 0 auto;}


/* TOP 버튼 */
.topBtn {/* position: fixed; */ position: absolute;  bottom: -43px; right: 0; background-color: #7027a5; width: 84px; height: 84px; box-shadow: 2px 3px 8px 1px rgba(0,0,0,0.25); text-align: center; z-index: 9; border-radius: 50%;}
.topBtn span {font-family: 'GmarketSansB'; color: #fff; font-size: 15px; display: inline-block; padding-top: 45px; background: url("/images/layout/topArrow.png") no-repeat center top; background-position-y: 20px;}



/* 전자정부 상단배너 */
.top-guide {width: 100%; background: #EDF1F5; border-bottom: 1px solid #e0e4e7;}
.top-guide .inner p {display: flex; align-items: center; gap: 5px; padding: 6px 0; color: #1D1D1D; font-size: 13px; font-weight: 500;}
.top-guide .inner p:before {content: ''; width: 24px; height: 16px; background: url("/images/layout/flag.jpg") no-repeat center; background-size: contain;}
.inner:after{content: ''; display: block; clear: both;}



/* 유틸리티 */
.utility {width: 100%; background: #000; display: flex; justify-content: space-between; align-items: center;}
.utility > div {display: flex; justify-content: space-between;}
.utility .go-site {}
.utility .go-site > ul {display: flex;}
.utility .go-site > ul > li {position: relative; padding: 0 25px; border-left: 2px solid #000; height: 45px; line-height: 45px; background-color: #1a1a1a;}
.utility .go-site > ul > li:nth-child(1) {background: url("/images/layout/util-arrow.png") no-repeat center right 20px #1a1a1a; padding-right: 55px; display:none;}
.utility .go-site > ul > li > a {display: inline-block; height: 43px;}
.utility .go-site > ul > li:nth-child(2) a {background: url("/images/layout/utility-logo01.png") no-repeat center #1a1a1a; width: 108px;}
.utility .go-site > ul > li:nth-child(3) a {background: url("/images/layout/utility-logo02.png") no-repeat center #1a1a1a; width: 152px;}
.utility .go-site > ul > li > a span {color: #fff; font-size: 15px; display: inline-block; vertical-align: middle;}
.utility .go-site > ul > li ul.f-depth {display: none; position: absolute; top: 45px; left: 0; background-color: #1a1a1a; width: 100%; z-index: 99; border-top: 2px solid #000; height: 125px;
overflow-y: scroll;}
.utility .go-site > ul > li ul.f-depth::-webkit-scrollbar {width: 5px; background-color: #003675;}
.utility .go-site > ul > li ul.f-depth::-webkit-scrollbar-thumb {background-color: #135fb4; border-radius: 50px;}
.utility .go-site > ul > li ul.f-depth li {text-align: center; border-bottom: 2px solid #000; height: 40px; line-height: 40px; transition: 0.3s ease;}
.utility .go-site > ul > li ul.f-depth li:hover {background-color: #2b2b2b;}
.utility .go-site > ul > li ul.f-depth li:last-child {border-bottom: 0;}
.utility .go-site > ul > li ul.f-depth li a {padding: 10px 20px;}
.utility .go-site > ul > li ul.f-depth li a span {color: #c3c3c3; font-size: 14px;}

.utility .snsWrap {}
.utility .snsWrap ul {display: flex;}
.utility .snsWrap ul li {}
.utility .snsWrap ul li:nth-child(1) {background: url("/images/layout/snsIcon01.png") no-repeat center #2bb0f7;}
.utility .snsWrap ul li:nth-child(2) {background: url("/images/layout/snsIcon02.png") no-repeat center #00549e;}
.utility .snsWrap ul li:nth-child(3) {background: url("/images/layout/snsIcon03.png") no-repeat center #e8392d;}
.utility .snsWrap ul li:nth-child(4) {background: url("/images/layout/snsIcon04.png") no-repeat center #03cf5d;}
.utility .snsWrap ul li a {display: inline-block; width: 49px; height: 40px;}
.utility .snsWrap ul li a span {}





/* s : 레이아웃 */
.header {width:100%; background-size:100%; position:fixed; z-index:10; top:0; transition:all 0.5s ease-out;}
header::before {content: ''; display: block; width: 100%; height: 100%; position: fixed; top: 81px; left: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 10; display: none;}
header.active::before {display: block;}
.header.active {background-color: #fff;}
.header.active .gnb-wrap .gnb ul.dl li a{color:#000; transition:all 0.5s ease-out;}
.header.active .gnb-box h1.logo a{}
.header.active .header-box {border-bottom: solid 1px #b6b6b6;} 
.header .header-box {position:relative; transition:all 0.5s ease-out; border-bottom: 1px solid #ccc; background-color: #fff;}
.header .header-box.h-active {position: relative; border-bottom: solid 1px #b6b6b6; background:#fff; z-index:100; height: 393px;}
.header .header-box.h-active::before {content: ''; position: absolute; top: 85px; left: 0; width: 100%; height: 1px; background-color: #ccc;}


.header .header-box.h-active .gnb-box h1.logo a{display:inline-block;}
.header .gnb-box {position: relative; display:flex; justify-content:space-between;}
.header .gnb-box h1.logo {display: flex; align-items: center; width: 25%; height: 85px; padding: 18px 0; box-sizing: border-box; overflow: hidden;}
.header .gnb-box h1.logo a.corp {background: url("/images/layout/logo.jpg") no-repeat center; width:60px; height:45px; margin-right: 2px; display:inline-block; vertical-align:middle; /* font-size:0px; */}
.header .gnb-box h1.logo a.sub-logo span {font-family: 'jalnan'; color: #000; font-size: 22px; margin-top: 3px; display:block; vertical-align:middle;}
.header .gnb-box h1.logo a.sub-logo span:first-child {color: #0d97df; font-size: 18px;}



.header .gnb-box .gnb-wrap {width: 70%; height: 85px; display: block; position: Relative;}
.gnb-wrap .gnb ul.dl {display:flex; justify-content:space-between; margin-left: -110px;margin-right: 165px;}
.gnb-wrap .gnb ul.dl li{width:50%; text-align: center;}
.gnb-wrap .gnb ul.dl li > a {font-family: 'NotoKrM'; font-size: 20px; text-align: center; color: #000; line-height: 85px; display: block;}
.gnb-wrap .gnb ul.dl li:hover > a, .header .header-box.header-box.h-active .gnb-wrap .gnb ul.dl li:hover > a {color: #003675;}

.header .header-box .gnb-wrap .gnb ul.dl > li {position: relative;}
.header .header-box .gnb-wrap .gnb ul.dl > li:before{content:""; width:70px; height:4px; background:#003675; position:absolute; top:82px; left:50%; transform: translateX(-50%); z-index: 200; display:none;}
.header .header-box .gnb-wrap .gnb ul.dl > li:hover:before{display:block;}
.header .header-box.h-active .gnb-wrap .gnb ul.dl li a:focus{color: #000;}
.header .header-box.h-active .gnb-wrap .gnb ul.dl li:focus a{position:relative; display:inline-block; color:#014099;}
.header .header-box.h-active .gnb-wrap .gnb ul.dl li:focus a:before{content:""; width:100%; height:5px; background: #014099; position:absolute; bottom:0px; left:0px; transform: translate(0%, 40px); display:block; }
.header .header-box.h-active .gnb-wrap .gnb ul.dl li:hover .nav div.level a{background:none;}
.header .header-box.h-active .gnb-wrap .gnb ul.dl li:hover .nav div.level a:before{content:none;}
a.toggle{display: none;}
.mbmenu-top{display: none;}

/* 2차메뉴 */
.header .gnb-wrap .gnb ul.dl li .sub-gnb {display:none; position: relative; height:210px;}
.header .gnb-wrap .gnb ul.dl li .sub-gnb .sub-gnb-wrap .nav{width:100%; text-align:center; padding:14px 0; position:relative; z-index:10;}

.header .gnb-wrap .gnb ul.dl li .sub-gnb .sub-gnb-wrap .nav div.level a.level2-1{font-family: 'NotoKrM'; font-size: 15px; color: #000; letter-spacing: -0.025em; padding: 12px 0; display: inline-block;}
.header .gnb-wrap .gnb ul.dl li .sub-gnb .sub-gnb-wrap .nav div.level a.level2-1:hover{color: #003675;}
.header .gnb-wrap .gnb ul.dl li .sub-gnb .sub-gnb-wrap .nav div.level a.level2-1:hover:before{display: block;}
.header .gnb-wrap .gnb ul.dl li .sub-gnb .sub-gnb-wrap .nav div.level:last-child a.level2-1:after{content:none;}
.header .gnb-wrap .gnb ul.dl li .sub-gnb .sub-gnb-wrap .nav .level .level3-1{display:none; position:absolute; top:0; left:0;}


.header .header-box .sysbtn{ position: absolute; right: -85px; top: 50%; transform: translateY(-50%); padding: 25px 0;}
.header .header-box .sysbtn .btn.sitemap{font-family: 'NotoKrR'; font-size: 18px; letter-spacing: -0.025em; position: relative; padding-right: 35px; color: #fff;}




/* 서브 레이아웃 */
.sub {width:100%;}
.sub .subWrap {width:100%;}


/* 서브 배너 레이아웃 */
.sub .subBanner{width:100%; height: 210px; margin-top: 167px; background:url("/images/layout/subNav-bg.jpg") center top no-repeat; text-align: center; box-sizing: border-box; color:#fff; line-height: normal;}
.sub .subBanner p.s-tit {font-family: 'GmarketSansB'; font-size: 30px; letter-spacing: -0.03em; line-height: 210px; color: #fff;}
.sub .subBanner p.s-tit span {font-family: 'GmarketSansB';}


/* 서브 Nav 레이아웃 */
.sub .subWrap .subNav {height:48px; background-color: #3b518e; box-shadow: 10px 0 10px rgba(0,0,0,0.17); background-size: 100% 100%; box-sizing: border-box; position: relative; top: -27px; display: flex; justify-content: space-between; align-items: center;}
.sub .subWrap .subNav .subNavList {height: 100%; box-sizing: border-box;}
.sub .subWrap .subNav .subNavList > li{float:left; height:100%; vertical-align:middle; position: relative; padding:0 20px;}
.sub .subWrap .subNav .subNavList > li.sNavList:last-child:before{display: none;}
.sub .subWrap .subNav .subNavList > li > a {font-family: 'NotoKrR'; line-height: 48px; color: #fff; padding-right: 34px; position: relative; font-size: 14px; display: inline-block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box;}
.sub .subWrap .subNav .subNavList > li > a:before {content: ''; display: block; width: 16px; height: 100%; position: absolute; right: -4px; top: 0; background: url("/images/layout/subArrow.png") center no-repeat;}
.sub .subWrap .subNav .subNavList > li:last-child > a:before {display: none;}
.sub .subWrap .subNav .subNavList > li.snHome{width:69px; padding:0;}
.sub .subWrap .subNav .subNavList > li.snHome > a {display:block; height:48px; padding: 0; background:url("/images/layout/subHome.png") no-repeat center; font-size:0;}

.sub .subWrap .subNav .snsPrint{position: absolute; right:0; top:0; width:138px; height:69px;}
.sub .subWrap .subNav .snsPrint .spLi{width:69px; height:100%; float:left; position: relative;}
.sub .subWrap .subNav .snsPrint .spLi > a{font-size:0; width:100%; height:100%; display: block; background-position: center; background-repeat: no-repeat;}
.sub .subWrap .subNav .snsPrint .snsLink > a{background-image: url("/images/new/Potal/layout/subSns.png"); background-color:#1167a0; }


.contop-info {text-align: center;}
.contop-info .print-share {vertical-align: middle; position: relative; display: flex;}
.contop-info .print-share .print-btn {background: url("/images/layout/sns-print.png") no-repeat center; width: 17px; height: 17px; display: inline-block; padding: 16px 20px;}
.contop-info .print-share .share .share-btn {background: url("/images/layout/sns-share.png") no-repeat center #1d2847; width: 16px; height: 16px; display: inline-block; padding: 16px 18px;}
.contop-info .print-share .share {display: flex; position: relative;}
.contop-info .print-share .share .btns-toggle {display: none; position: absolute; bottom: -60px; right: 0; z-index: 1; overflow: hidden; width: 215px; border: 1px solid #ccc; box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.1); padding: 10px 15px; padding-left: 20px; box-sizing: border-box; border-radius: 50px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;}
.contop-info .print-share .share.active .btns-toggle {display: block;}
.contop-info .print-share .share .btns {display: flex; justify-content: space-between;}
.contop-info .print-share .share .btns p {padding-right: 0px;}
.contop-info .print-share .share .btns p:last-child {}
.contop-info .print-share .share .btns p a {width: 26px; height: 26px; display: inline-block; vertical-align: middle;}
.contop-info .print-share .share .btns p.face a {background: url("/images/layout/sns-face.png") no-repeat center;}
.contop-info .print-share .share .btns p.twi a {background: url("/images/layout/sns-twi.png") no-repeat center;}
.contop-info .print-share .share .btns p.kakao a {background: url("/images/layout/sns-kakao.png") no-repeat center;}
.contop-info .print-share .share .btns p.blog a {background: url("/images/layout/sns-blog.png") no-repeat center;}
.contop-info .print-share .share .btns p.btn-close a {background: url("/images/layout/sns-close.png") no-repeat center;}


.cnt-top {padding: 25px 0; border-bottom: 1px solid #e5e5e5;}
.cnt-top h3.title {text-align: center;}
.cnt-top h3.title p {position: relative; font-family: 'GmarketSansB'; font-size: 30px; letter-spacing: -0.05em; color: #000; display: inline-block;}
.cnt-top h3.title p::before {content: ''; position: absolute; bottom: -26px; left: 0; width: 100%; background-color: #000; height: 2px;}




/* 서브 컨텐츠 */
.subCntArea {padding: 50px 0 150px;}



/* footer */
footer {position: relative; text-align: center;}
footer .ft {}
footer .fb {background-color: #000; padding: 25px 0 45px;}

footer .foot-silde {display: flex; align-items: center; padding: 15px 0;}
footer .foot-silde .control {display: flex; width: 16%; margin-top: 5px;}
footer .foot-silde .control .ftit {margin-right: 15px; font-family: 'NotoKrB'; font-size: 16px; letter-spacing: -0.025em; color: #000;}
footer .foot-silde .control .bt_box {}
footer .foot-silde .control .bt_box .btn {width: 24px; height: 24px;}


footer .foot-silde .silde {display: flex; align-items: center; /* padding-left: 55px; */ width: 85%;}
footer .foot-silde .silde li {padding: 0 35px;}
footer .foot-silde .silde li a {height: 30px; display: inline-block;}
footer .foot-silde .silde li a img {height: 100%;}

footer .fb .perinfo {display: flex; justify-content: center; border-bottom: 1px solid #4949499d;}
footer .fb .perinfo li {position: relative; padding: 0 22px; padding-bottom: 22px; }
footer .fb .perinfo li::before {content: ''; position: absolute; top: 5px; right: 0; width: 1px; height: 12px; background-color: #808080;}
footer .fb .perinfo li:last-child:before {display: none;}
footer .fb .perinfo li a {}
footer .fb .perinfo li a span {font-family: 'NotoKrR'; color: #fff; font-size: 15px; letter-spacing: -0.03em; transition: 0.3s ease;}
footer .fb .perinfo li:hover a span {color: #08b8f1; font-family: 'NotoKrM';}
footer .fb .address {padding-top: 25px;}
footer .fb .address ul {display: flex; justify-content: center; margin-bottom: 28px;}
footer .fb .address ul li {position: relative; padding: 0 24px; font-family: 'NotoKrR'; color: #fff; font-size: 15px; letter-spacing: -0.03em;}
footer .fb .address ul li::before {content: ''; position: absolute; top: 5px; right: 0; width: 1px; height: 12px; background-color: #808080;}
footer .fb .address ul li:last-child::before {display: none}
footer .fb .address p.copy {font-family: 'NotoKrL'; font-size: 13px; color: #e8e8e883;line-height: 1;}





@media all and (max-width:1400px){
  .inner, .wrap {width: 1200px;}

  .header {padding: 0px 0px; box-sizing: border-box;}
  .header .gnb-box h1.logo {display: flex; align-items: center; padding: 10px 0;}
  .header .gnb-box h1.logo a.corp{display:block; margin-right: 10px;}
  .header .gnb-box h1.logo a.sub-logo{display: block; margin-left:0px;}

  .header .gnb-box {justify-content: flex-start;}
  .header .gnb-box .gnb-wrap {height: 70px;}
  .gnb-wrap .gnb ul.dl {margin-left: 0; margin-right: 0;}
  .gnb-wrap .gnb ul.dl li > a {padding-top: 0;}

  .header .header-box .sysbtn{padding-right: 0; right: -10px;}
  .header .header-box .sysbtn .btn.sitemap{width:20px; height:20px; background-size:cover;}

  .header .header-box.h-active {height: 350px;}
  .header .header-box .gnb-wrap .gnb ul.dl > li:before {top: 81px;}
  .header .header-box.h-active .gnb-wrap .gnb ul.dl li:hover a:before{bottom:-6px;}

  .header .gnb-wrap .gnb ul.dl li .sub-gnb{margin-top: 0;}
  .header .gnb-wrap .gnb ul.dl li .sub-gnb .sub-gnb-box{width: 100%;}
  .gnb-wrap .gnb ul.dl li a{font-size:17px; padding-bottom:0px;}
  .header .gnb-wrap .gnb ul.dl li .sub-gnb .sub-gnb-wrap .nav div.level a.level2-1 {padding: 8px 0;}


  .sub .subWrap {margin: -51px auto 0;}
  .sub .subWrap .subNav {top: 25px;}
  .sub .subWrap .subNav .subNavList > li.snHome {width: 57px;}
  .sub .subWrap .subNav .subNavList > li.snHome > a {width: 57px; height: 50px; line-height: 50px;}
  .sub .subWrap .subNav .subNavList > li > a {line-height: 50px;}

  .cnt-top {margin-top: 50px;}

  .topBtn {right: 100px;}
}


@media all and (max-width:1280px){
  .wrap{width:100%; padding:0px 20px; box-sizing:border-box;}

  .header .gnb-box h1.logo {padding: 16px 0;}
  .header .gnb-box h1.logo a.sub-logo span {white-space: nowrap;}
  .header .gnb-box .gnb-wrap {width: 70%;}
  .header .header-box .sysbtn {right: -3px;}

  .header .header-box.h-active .gnb-box h1.logo a {background-size: 100%;}
  .header .header-box.h-active .gnb-wrap .gnb ul.dl li a {font-size: 17px;}
  .header .gnb-wrap .gnb ul.dl li .sub-gnb .sub-gnb-wrap .nav div.level a.level2-1 {font-size: 14px; padding: 8px 0;}
  .header .gnb-wrap .gnb ul.dl li .sub-gnb {height: 140px;}
  .header .gnb-wrap .gnb ul.dl li:hover .sub-gnb .sub-gnb-wrap .nav:before {height: 140px;}
  .gnb-wrap .gnb ul.dl li a {white-space: nowrap;}

  .sub .subWrap .subNav .subNavList > li.snHome {width: 57px;}

  footer .foot-silde .control .ftit {white-space: nowrap;}
}


@media all and (max-width:1080px){
  .header .gnb-box h1.logo {width: 25%; padding: 10px 0;}

  footer .foot-silde .control {width: 20%;}
  footer .foot-silde .silde {width: 80%;}
}

@media all and (max-width:1000px){
  .wrap {padding: 0px 0 0 20px;}

  .top-guide .inner p {padding: 6px;}
  
  .utility > div {padding: 0;}
  .utility .go-site > ul > li {padding: 0 15px; height: 38px; line-height: 38px;}
  .utility .go-site > ul > li > a {height: 38px;}
  .utility .go-site > ul > li > a span {font-size: 13px;}
  .utility .go-site > ul > li ul.f-depth {top: 39px;}
  .utility .go-site > ul > li ul.f-depth li {height: 30px; line-height: 30px;}
  .utility .go-site > ul > li ul.f-depth li a {padding: 4px;}
  .utility .go-site > ul > li:nth-child(1) {padding-right: 40px; background-position: top 9px right 10px;}
  .utility .go-site > ul > li:nth-child(1) a {background-size: 17px;}
  .utility .go-site > ul > li:nth-child(2) a {background-size: 85px;}
  .utility .go-site > ul > li:nth-child(3) a {background-size: 115px;}
  .utility .snsWrap ul li a {width: 41px; height: 34px;}

  .header{padding:0px;}
  .header .header-box{height:60px;}
  .header .header-box:before{height:60px; }

  .header .gnb-box .gnb-wrap{width:0px; height:0px; padding:0px;}

  .header .gnb-box h1.logo{width:auto; padding:10px 0px; height:65px; box-sizing:border-box;}
  .header .gnb-box h1.logo a{width:auto; background-size:120px;}
  .header .gnb-box h1.logo a.corp{display:inline-block; margin-bottom:0px; width: 65px;}
  .header .gnb-box h1.logo a.sub-logo{display:inline-block; margin-bottom:0px;}
  .header .gnb-box h1.logo a.sub-logo span:first-child {margin-right: 6px;}

  .header .toggle-box{position: absolute; top:0px; right:0px;}
  .header a.toggle{position:relative;  display:block; width:60px; height:60px; background:url("/images/layout/mb-menuBtn.png") no-repeat center #3b518e; box-sizing:border-box;}
  .header a.toggle:before{ content: ""; position: absolute; top:0; left:0; width: 1px; height: 100%; background:#7a7d8d; }

  .header .mobile-gnb .close-box{position:absolute; top:0px; right:0px;}
  .header .mobile-gnb .close-box .mb-closebtn{width:65px; height:65px; background:url("/images/layout/mb-menuClose.png") no-repeat #000; display:block; text-indent:-9999px; position: relative; background-position: center;}

  .header .mobile-gnb{display:block; position:fixed; top:-100%; left:0px; height:100%; z-index:999; overflow-y:auto; transition:all .3s ease; width:100%;  background:rgba(0,0,0,0.6);}

  .header .mobile-gnb .mbmenu-top{display:block; position:relative; height:65px; padding:0px 70px 0px 0px; background:#3b518e;}
  .header .mobile-gnb .mbmenu-top .other-links{width:100%; height:100%;}
  .header .mobile-gnb .mbmenu-top .other-links:after{clear:both; content:""; display:block;}
  .header .mobile-gnb .mbmenu-top .other-links li{height:100%; box-sizing:border-box;}
  .header .mobile-gnb .mbmenu-top .other-links li:last-child{border-right:none;}

  .header .mobile-gnb .mbmenu-top .other-links li a{display:block; width:100%; line-height:80px; padding:0px 7px; font-family: 'KoPubD-B'; font-size: 18px; letter-spacing: -0.03em; box-sizing:border-box; color:#fff;}
  .header .mobile-gnb .mbmenu-top .other-links li a span{position:relative; display:block;}
  .header .mobile-gnb .mbmenu-top .other-links li.btn a{display:block; width:auto; line-height:80px; text-align:center; }
  .header .mobile-gnb .mbmenu-top .other-links li.btn a.corp {display: none;}
  .header .mobile-gnb .mbmenu-top .other-links li.btn a span{display:inline-block; color: #fff;}
  .header .mobile-gnb .mbmenu-top .other-links li.btn a span:first-child {color: #c5ebff;}
  .header .mobile-gnb .mbmenu-top .other-links li.btn a span:before{display:none;}
  .header .mobile-gnb .mbmenu-top .other-links li.btn a span.tit {font-family: 'SBAggroB'; color: #fff; font-size: 20px; display: inline-block; vertical-align: middle;}

  .header .mobile-gnb.on{top:0px; display: block;}
  .header .mobile-gnb .dl{background:#fff; padding:35px 40px 55px; height:auto;}
  .header .mobile-gnb .dl li a.level1-1{padding:15px 30px; border-bottom:solid 1px #dadada; display:block; font-family: 'KoPubD-B'; font-size:18px; color: #000000; letter-spacing: -0.05em; position: relative;}
  .header .mobile-gnb .dl li a.level1-1.on{border-bottom:none;}
  .header .mobile-gnb .dl li.no-depth a.level1-1.on {border-bottom: 1px solid #dadada; transition: 0.3s ease-in-out;}
  .header .mobile-gnb .dl li a.level1-1::before{content:""; width:24px; height:24px;position:absolute; top:15px; right:30px; display:block; background: url("/images/layout/mb-down.png") no-repeat center right; transform: rotate(0deg);}
  .header .mobile-gnb .dl li.no-depth a.level1-1::before {display: none;}
  .header .mobile-gnb .dl li a.level1-1.on::before{transform: rotate(180deg); transition: 0.3s ease-in-out;}
  .header .mobile-gnb .dl li .m-sub-gnb{display:none;}
  .header .mobile-gnb .dl li .m-sub-gnb .nav{padding:0px 20px;}
  .header .mobile-gnb .dl li .m-sub-gnb .nav .level a.level2-1{padding:8px 20px 8px 35px; background:#f3f3f3; font-family: 'KoPubD-B'; color:#888; font-size:15px; display:block; position:relative;}
  .header .mobile-gnb .dl li .m-sub-gnb .nav .level a.level2-1:before{position:absolute; top:14px; left:25px; width:3px; height:3px; background:#888; display:block; border-radius: 50%; content:"";}
  .header .mobile-gnb .dl li .m-sub-gnb .nav .level a.level2-1:hover:before {background-color: #000;}
  .header .mobile-gnb .dl li .m-sub-gnb .nav .level:first-child a.level2-1{padding-top:20px;}
  .header .mobile-gnb .dl li .m-sub-gnb .nav .level:first-child a.level2-1:before{top:28px;}
  .header .mobile-gnb .dl li .m-sub-gnb .nav .level:last-child a.level2-1{padding-bottom:20px;}
  .header .mobile-gnb .dl li .m-sub-gnb .nav .level a.level2-1:hover{color:#000; text-decoration:underline;}
  .header .mobile-gnb .dl li .m-sub-gnb .nav .level a.level2-1.on{background: #3897db; color: #fff; padding: 20px 20px;}
  .header .mobile-gnb .dl li .m-sub-gnb .nav .level a.level2-1.on:before{content: ""; width: 60px; height: 1px; background: #fff; position: absolute; top:30px; left:0;}
  .header .mobile-gnb .dl li .m-sub-gnb .nav .level a.level2-1 span {position: relative;}
  .header .mobile-gnb .dl li .m-sub-gnb .nav .level a.level2-1:hover span::before {content: ''; position: absolute; top: 2px; right: -10px; width: 5px; height: 5px; background-color: #5683b5; border-radius: 50%;}

  .header .mobile-gnb .dl li .m-sub-gnb .level .level3-1{display: none; background: #e0eaf3;}
  .header .mobile-gnb .dl li .m-sub-gnb .level .level3-1 li a{padding: 15px 20px; display: block; font-size: 18px;}
  .header .header-box.h-active{z-index: 0;}

  .header .mobile-gnb .dl li:first-child .m-sub-gnb .sub-gnb-wrap .sub-menu02, .sub-menu03, .sub-menu04, .sub-menu05, .sub-menu06, .sub-menu07{display: none;}
  .header .mobile-gnb .dl li:nth-child(2) .m-sub-gnb .sub-gnb-wrap .sub-menu01, .sub-menu03, .sub-menu04, .sub-menu05, .sub-menu06, .sub-menu07{display: none;}
  .header .mobile-gnb .dl li:nth-child(2) .m-sub-gnb .sub-menu02{display: block;}
  .header .mobile-gnb .dl li:nth-child(3) .m-sub-gnb .sub-gnb-wrap .sub-menu01, .sub-menu02, .sub-menu04, .sub-menu05, .sub-menu06, .sub-menu07{display: none;}
  .header .mobile-gnb .dl li:nth-child(3) .m-sub-gnb .sub-menu03{display: block;}
  .header .mobile-gnb .dl li:nth-child(4) .m-sub-gnb .sub-gnb-wrap .sub-menu01, .sub-menu02, .sub-menu03, .sub-menu05, .sub-menu06, .sub-menu07{display: none;}
  .header .mobile-gnb .dl li:nth-child(4) .m-sub-gnb .sub-menu04{display: block;}
  .header .mobile-gnb .dl li:nth-child(5) .m-sub-gnb .sub-gnb-wrap .sub-menu01, .sub-menu02, .sub-menu03, .sub-menu04, .sub-menu06, .sub-menu07{display: none;}
  .header .mobile-gnb .dl li:nth-child(5) .m-sub-gnb .sub-menu05{display: block;}
  .header .mobile-gnb .dl li:nth-child(6) .m-sub-gnb .sub-gnb-wrap .sub-menu01, .sub-menu02, .sub-menu03, .sub-menu04, .sub-menu05, .sub-menu07{display: none;}
  .header .mobile-gnb .dl li:nth-child(6) .m-sub-gnb .sub-menu06{display: block;}

  .header .header-box.h-active .nav-bar{display: none;}
  .header .header-box .sysbtn{display:none;}

  .sub .wrap, .subCntArea .wrap {padding: 0 20px !important;}
  .sub .subBanner {margin-top: 135px;}
  .sub .subWrap .subNav .subNavList > li {padding: 0; padding-left: 15px;}

  footer .fb .address ul li {padding: 0 10px;}

  .topBtn {right: 28px;}
}

@media all and (max-width:780px){
  .header .header-box {height: 70px;}
  .header .header-box:before {height: 70px;}
  .header .gnb-box h1.logo {height: 70px; padding: 12px 0;}
  .header .gnb-box h1.logo a.corp {background-size:67% !important; margin-right: 6px;}
  .header .gnb-box h1.logo a.sub-logo {font-size: 17px;}
  .header .gnb-box h1.logo a.sub-logo span {margin-top: 8px;}
  .header a.toggle {width: 70px; height: 70px;}

  .header .mobile-gnb .mbmenu-top {height: 70px;}
  .header .mobile-gnb .mbmenu-top .other-links li.btn a {line-height: 70px;}
  .header .mobile-gnb .close-box .mb-closebtn {width: 70px; height: 70px;}
  .header .mobile-gnb .dl {padding: 30px 35px 50px;}
  .header .mobile-gnb .dl li a.level1-1 {font-size: 17px; padding: 13px 20px;}
  .header .mobile-gnb .dl li a.level1-1::before {right: 20px;}
  .header .mobile-gnb .dl li .m-sub-gnb .nav .level a.level2-1 {padding: 15px 20px 0px 28px;}
  .header .mobile-gnb .dl li .m-sub-gnb .nav .level a.level2-1:before {top: 24px; left: 18px;}

  .utility .go-site > ul > li ul.f-depth li a span {font-size: 12px;}

  .sub .subWrap {margin: -41px auto 0;}
  .sub .subWrap .subNav {height:40px;}
  .sub .subWrap .subNav .subNavList{padding-left: 0; }
  .sub .subWrap .subNav .subNavList > li{padding:0 15px; width:160px;}
  .sub .subWrap .subNav .subNavList > li > a {line-height: 40px; font-size:15px;}
  .sub .subWrap .subNav .subNavList > li.snHome > a {background-size: 14px; width: 55px;height: 40px; line-height: 44px;}
  .contop-info .print-share .share .share-btn {height: 12px; padding: 14px 13px; margin-top: 4px;}
  .cnt-top {padding: 17px 0;}
  .cnt-top h3.title p {font-size: 25px;}
  .cnt-top h3.title p::before {bottom: -18px;}


  .subCntArea {padding: 45px 0 100px;}

  footer .fb {padding: 30px 0;}
  footer .foot-silde {padding: 6px 0;}
  footer .foot-silde .control {flex-wrap: wrap; width: 20%;}
  footer .foot-silde .control .bt_box {margin-top: 5px;}
  footer .foot-silde .silde {width: 80%;}
  footer .foot-silde .silde li {padding: 0 20px 0 0;}
  footer .foot-silde .silde li a {height: 25px;}
  footer .fb .perinfo li {padding-bottom: 15px;}
  footer .fb .perinfo li a span {font-size: 15px;}
  footer .fb .address {padding-top: 20px;}
  footer .fb .address ul {flex-wrap: wrap;}
  footer .fb .address ul li {font-size: 15px;}
  footer .fb .address p.copy {font-size: 13px;}

  .topBtn {width: 60px; height: 60px;}
  .topBtn span {font-size: 12px; padding-top: 30px; background-position-y: 12px;background-size: 10px;}
}


@media screen and (max-width:680px){
  .utility .snsWrap {position: absolute; top: -37px; right: 0;}

  .header .header-box{height: 60px;}
  .header .header-box:before{height:60px;}

  .header .gnb-box h1.logo{padding:10px 0; height:60px;}
  .header .gnb-box h1.logo a.corp {width: 35px; background-size:100% !important;}
  .header .gnb-box h1.logo a.sub-logo {width: auto; margin-top: 2px;}
  .header .gnb-box h1.logo a.sub-logo span {margin-top: 0; font-size: 19px;}
  .header .gnb-box h1.logo a.sub-logo span:first-child {font-size: 17px;}
  .header a.toggle{width:60px; height:60px; background-size: 20px;}

  .header .mobile-gnb .mbmenu-top .other-links li.btn a {padding: 0; padding-left: 16px;}
  .header .mobile-gnb .mbmenu-top .other-links li.btn a span {padding-left: 0;}
  .header .mobile-gnb .mbmenu-top .other-links li.btn a span.corp {background-size: 100%; width: 35px;}

  .header .mobile-gnb .mbmenu-top{padding: 0px 50px 0px 0px; height: 60px;}
  .header .mobile-gnb .mbmenu-top h2.mb-logo a{background-size:100%; left:20px; top:20px; width:80px}
  .header .mobile-gnb .mbmenu-top .other-links li a{line-height:50px; padding:0px 25px; font-size:16px;}
  .header .mobile-gnb .mbmenu-top .other-links li.btn a{line-height:60px;}
  .header .mobile-gnb .close-box .mb-closebtn{width:60px; height:60px; background-size:20px;}
  .header .mobile-gnb .mb-closebtn{background-size:18px; width:18px; top:0px;}
  .header .mobile-gnb .dl {padding: 25px 30px 40px;}
  .header .mobile-gnb .dl li a.level1-1{padding:10px 15px; font-size:16px;}
  .header .mobile-gnb .dl li a.level1-1:after{width: 20px; background-size: 20px; top:10px;}
  .header .mobile-gnb .dl li a.level1-1::before {background-size: 100%; width: 20px; right: 6px;}
  .header .mobile-gnb .dl li a.level1-1.on:after{width: 20px; background-size: 20px; top:10px;}
  .header .mobile-gnb .dl li .m-sub-gnb .nav{padding:0px 5px;}
  .header .mobile-gnb .dl li .m-sub-gnb .nav .level a.level2-1{padding:5px 15px 5px 25px; font-size:14px;}
  .header .mobile-gnb .dl li .m-sub-gnb .nav .level a.level2-1:before{top:14px; left:15px;}
  .header .mobile-gnb .dl li .m-sub-gnb .nav .level:first-child a.level2-1{padding-top:10px;}
  .header .mobile-gnb .dl li .m-sub-gnb .nav .level:first-child a.level2-1:before{top:18px;}
  .header .mobile-gnb .dl li .m-sub-gnb .nav .level:last-child a.level2-1{padding-bottom:10px;}

  .contop-info .print-share .share .btns-toggle {width: 185px; padding: 7px 13px; padding-right: 13px; bottom: -47px;}

  .utility .snsWrap ul {padding-top: 3px; padding-right: 5px;}
  .utility .snsWrap ul li {border-radius: 50%; background-size: 15px; margin: 0 2px;}
  .utility .snsWrap ul li a { width: 30px; height: 25px;}


  .sub .subWrap {margin: -41px auto 0;}
  .sub .subWrap .wrap {padding: 0 !important;}
  .sub .subWrap .subNav{height:40px; padding: 0;}
  .sub .subWrap .subNav .subNavList {display: flex;}
  .sub .subWrap .subNav .subNavList > li{padding: 0 10px; width:135px; text-align: center;}
  .sub .subWrap .subNav .subNavList > li > a{line-height: 40px; padding-right:27px; font-size:14px;}
  .sub .subWrap .subNav .subNavList > li.snHome {width: 57px !important;}


  footer .fb .perinfo {flex-wrap: wrap; padding-bottom: 13px;}
  footer .fb .perinfo li {padding-bottom: 5px;}
}



@media all and (max-width:480px){
  .wrap {padding: 0;}

  .utility .go-site, .utility .snsWrap {display: none;}
  
  .header {height: 50px;}
  .header .header-box {height: 50px;}
  .header .header-box:before {height: 50px;}
	.header .gnb-box h1.logo{padding:9px 0; height: 50px; width: 100%;}
  .header .gnb-box h1.logo a.corp {width: 30px; margin-left: 10px;}
  .header .gnb-box h1.logo a.sub-logo span {font-size: 16px; margin-top: 0;}
  .header .gnb-box h1.logo a.sub-logo span:first-child {font-size: 15px;}
  .header .mobile-gnb .mbmenu-top .other-links li.btn a span.tit {font-size: 18px;}
  .header a.toggle {width: 50px; height: 50px; background-size: 16px;}
  .header.active a.toggle{padding: 13px;}

  .header .mobile-gnb .mbmenu-top{height: 50px;}
  .header .mobile-gnb .mbmenu-top .other-links li a{line-height:40px; padding:0px 10px; font-size:14px;}
  .header .mobile-gnb .mbmenu-top .other-links li.btn a{line-height:50px;}
  .header .mobile-gnb .mbmenu-top .other-links li.btn a span.corp {width: 30px;}
  .header .mobile-gnb .mbmenu-top h2.mb-logo a{background-size: 60px; width: 60px; top:17px; left: 10px;}
  .header .mobile-gnb .mb-closebtn{ background-size: 13px; width: 13px;}
  .header .mobile-gnb .close-box .mb-closebtn{width:50px; height:50px; background-size: 16px;}
  .header .mobile-gnb .dl{padding:10px;}
  .header .mobile-gnb .dl li a.level1-1{padding:10px 5px; font-size:14px;}
  .header .mobile-gnb .dl li a.level1-1:after{width:16px; height:16px; line-height:16px; font-size:6px; top:14px;}
  .header .mobile-gnb .dl li a.level1-1::before {top: 10px;}
  .header .mobile-gnb .dl li a.level1-1.on:after{width:16px; height:16px;}
  .header .mobile-gnb .dl li .m-sub-gnb .nav .level a.level2-1 {font-size: 13px;}
  .header .mobile-gnb .mbmenu-top .other-links li.btn a {padding-left: 9px;}

  .contop-info { position: absolute; top: -44px; right: 0;}
  .contop-info .print-share .print-btn {background-color: #1d2847; height: 12px; padding: 14px 14px; margin-top: 4px; border-right: 1px solid #cccccc52;}
  .contop-info .print-share .share .btns-toggle {background-color: #fff; bottom: initial;
  top: -45px;}


  .sub .subBanner {margin-top: 85px; height: 120px;}
  .sub .subBanner p.s-tit {font-size: 26px; line-height: 120px;}
  .sub .subWrap .subNav .subNavList > li {width: 180px;}
  .sub .subWrap .subNav .subNavList > li.snHome > a {background-size: 10px; width: 50px;}


  footer .foot-silde {padding: 0; padding-right: 10px; display: inline;}
  footer .foot-silde .control {flex-wrap: inherit; width: 100%; align-items: center; margin: 10px 0px;}
  footer .foot-silde .control .ftit {font-size: 13px; margin-right: 10px;}
  footer .foot-silde .control .bt_box .btn {width: 17px; height: 17px;}
  footer .foot-silde .control .bt_box .btn.prev, footer .foot-silde .control .bt_box .btn.next, footer .foot-silde .control .bt_box .btn.play, footer .foot-silde .control .bt_box .btn.stop {background-size: 17px;}
  footer .foot-silde .silde {width: 96%;}
  footer .foot-silde .silde li {padding: 0 15px 0 0;}
  footer .foot-silde .silde li a {height: 22px;}
  footer .fb {padding: 25px 10px;}
  footer .fb .address ul li {font-size: 13px;}
  footer .fb .perinfo li::before {top: 12px;}
  footer .fb .perinfo li a span {font-size: 14px;}

}

@media screen and (max-width:360px){
  .sub .subWrap .subNav .subNavList > li {width: 100px;}

  .topBtn {right: 15px;}
}