/*공통*/
.un-style {list-style: none; margin:0; padding:0;}
.clearfix:after {content:" "; display: table; clear:both;}

.fnl {font-weight: 300 !important;}
.fnr {font-weight: 400 !important;}
.fnm {font-weight: 500 !important;}
.fnsb {font-weight: 600 !important;}
.fnb {font-weight: 700 !important;}

@font-face {
  font-family: 'Pretendard-Regular';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

.ffr {font-family: Raleway;}
.ffp {font-family: Poppins;}
.ffn {font-family: Noto Sans KR !important;}

h5.title {font-size: 2rem !important;}
h4.title {font-size: 3rem !important;}
h3.title {font-size: 3.6rem !important;}
h2.title {font-size: 4rem !important;}
h1.title {font-size: 4.8rem !important;}

.ptitle {font-size: 2.5rem;}

p.content {font-size: 1.7rem !important;}

.cs-title {font-size: 2.4rem !important;}
.cm-title {font-size: 2.8rem !important;}
.cl-title {font-size: 3.2rem !important;}

.pp-content {font-size: 2rem !important;}
.cs-content {font-size: 1.8rem !important;}
.ss-content {font-size: 1.6rem !important;}

.mb05 {margin-bottom: 5px !important;}
.mb2 {margin-bottom: 2rem !important;}
.mb4 {margin-bottom: 4rem !important;}
.mb5 {margin-bottom: 5rem !important;}
.mb6 {margin-bottom: 6rem !important;}
.mb7 {margin-bottom: 7rem !important;}
.mb8 {margin-bottom: 8rem !important;}
.mb10 {margin-bottom: 10rem !important;}

.mt2 {margin-top: 2rem !important;}

.ml2 {margin-left: 20px !important;}

.pt4 {padding-top: 4rem !important;}
.pt5 {padding-top: 5rem !important;}
.pt6 {padding-top: 6rem !important;}
.pt10 {padding-top: 10rem !important;}

.pb6 {padding-bottom: 6rem !important;}
.pb10 {padding-bottom: 10rem !important;}

.co66 {color: #666666 !important;}
.co00 {color: #000000 !important;}
.coff {color: #FFFFFF !important;}
.coeb {color: #0086EB !important;}
.co44 {color: #444444 !important;}
.coc7 {color: #2085C7 !important;}

.bbd8 {border-bottom: 1px solid #D8D8D8;}

.list-dot > li {position: relative; padding-left: 10px; }
.list-dot > li:after {position: absolute; content: ''; display: block; width: 3px; height: 3px; border-radius: 50%; top: 14px; left: 0; transform: translateY(-50%); background-color: #000000;}
.list-dot.co66 > li:after {background-color: #666666;}

.list-flex > li {display: flex;}
.list-flex > li span:nth-child(1) {flex: none;}

.rowm-10 {margin-left: -10px; margin-right: -10px;}
.rowm-10 > div {padding-left: 10px; padding-right: 10px;}

.rowm-20 {margin-left: -20px; margin-right: -20px;}
.rowm-20 > div {padding-left: 20px; padding-right: 20px;}

.btn.btn-l {font-size: 20px; padding: 20px 0;}
.btn.btn-m {font-size: 18px; font-weight: 500; padding: 13px 0;}
.btn.btn-s {font-size: 16px; padding: 7px 23px;}

#header {position: fixed; width: 100%; left: 0; z-index: 10000; background: transparent; top: 0; border-bottom: 1px solid #EEEEEE;}
#header.whel {box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.20); background: #FFFFFF;}
#header.active {background: #9F8467;}

.header-mobile {position: absolute; z-index: 5; background: #ffffff; width: 310px; right: 0; top: 0; height: 100vh; overflow-y: scroll; display: none;}
.header-mobile.active {display: block;}
.mheader {background-color: #60B8FE;padding: 6px 20px;}

#header .header-mobile .hm-menu > li {padding: 0; text-align: left; border-bottom: 1px solid #DBDBDB;}
#header .hm-menu > li > a {color: #000000; padding-top: 20px; padding-bottom: 20px; padding-left: 32px; font-size: 18px; font-weight: 600; display: block;}
#header .hm-menu .header-sub-menu {padding-top: 4px; padding-bottom: 4px; position: relative; width: 100%; left: 0; display: none;}
#header .hm-menu .on .header-sub-menu {display: block;}
#header .hm-menu > li.on .header-sub-menu {border-top: 1px solid #DBDBDB;}
#header .hm-menu .header-sub-menu > li > a {color: #000000; text-align: left; padding: 15px 50px; font-size: 16px;  display: block;}
.header-logo {max-width: 22.8rem;}
.header-logo a {display: block; background-repeat: no-repeat; background-position: center; background-size: 100% 100%;}
.header-logo a img {visibility: hidden;}
.header-logo a {background-image: url('/css/egovframework/img/userpage/header-logo.svg');}

.menu input {display: none;}
.menu input + label {display: block; width: 3.8rem; height: 2rem; position: relative; margin-bottom: 0;} 
.menu label span {display: block; width: 3.8rem; height: 2px; position: absolute; transition: all 0.5s; margin: 0; background: #000000;}
.whel .menu label span {background: #000000;}
.active .menu label span {background: #FFFFFF;}
.menu label span:nth-child(1) {top: 0;}
.menu label span:nth-child(2) {top: 50%; transform: translateY(-50%);}
.menu label span:nth-child(3) {bottom: 0;}
.menu input[type=checkbox]:checked + label span:nth-child(1) {top: 50%; transform: translateY(-50%) rotate(45deg);} 
.menu input[type=checkbox]:checked + label span:nth-child(2) {opacity: 0;}
.menu input[type=checkbox]:checked + label span:nth-child(3) {top: 50%; transform: translateY(-50%) rotate(-45deg);}

.header-menu {z-index: 10; position: relative;}
.header-menu > li {position: relative; }
.header-menu > li > a {font-size: 2.2rem; font-weight: bold; display: block; position: relative; transition: color 0.1s; color: #FFFFFF;}
.whel .header-menu > li > a {color: #000000;}
.active .header-menu > li > a {color: #FFFFFF;}
.header-sub-menu {position: absolute; width: 100%; display: none;}
.active .header-sub-menu {display: block;}
.header-sub-menu li a {font-size: 2rem; font-weight: 500; display: block; padding: 17px 0; text-align: center;}
.header-menu-back {
  height: 263px; background-color: #FFFFFF; position: absolute; width: 100%; left: 0; border-top: 1px solid #EDEDED; display: block; border-top: 1px solid #EDEDED;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.20); display: none;
}
.active .header-menu-back {display: block;}

#footer {border-top: 1px solid #CDCDCD;}
.ftcont {padding: 3.6rem 0; background-color: #F4F4F4;}
.ftcont p, .ftcont ul li {font-size: 1.4rem; color: #666666;}
.ftcont ul {display: flex;}
.ftcont ul li {line-height: 1; padding-right: 10px; margin-right: 10px; position: relative;}
.ftcont ul li:nth-child(1):after {position: absolute; content: ''; display: block; width: 1px; height: 70%; background-color: #666666; right: 0; top: 20%;}
.ftcopy {padding: 1.6rem 0; background-color: #E7E7E7; font-size: 14px; color: #A0A0A0;}
/*공통*/

/*게시판*/
.bdsearch {margin-bottom: 25px;}
.bdsearch .total {font-size: 18px; font-weight: 600; margin-bottom: 0;}
.bdsearch select {font-size: 18px; padding: 12px; border: 1px solid #DDDDDD; width: 100%; max-width: 120px; margin-right: 8px;}
.bdsearch input {font-size: 18px; padding: 10px; border: 1px solid #DDDDDD; width: 100%; max-width: 446px; margin-right: 8px;}
.bdsearch button {background-color: #0068B6; font-size: 1.8rem; color: #FFFFFF; padding: 10px 4.5rem;}
.bdsearch input:focus {outline: none;}

.bdgallery {padding-bottom: 25px; border-bottom: 1px solid #C1C1C1;}
.bdgallery > div {margin-top: 25px; margin-bottom: 25px;}
.bdgallery .bdthumb {width: 100%; height: 212px; background-size: cover; background-repeat: no-repeat; background-position: center; border: 3px solid #000000; margin-bottom: 25px;}
.bdgallery .bdinfo h5 {font-size: 16px; font-weight: bold; margin-bottom: 5px; width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.bdgallery .bdinfo ul li {font-size: 16px; font-weight: bold; color: #909090;}

.bdtable {border-top: 4px solid #0068B6;}
.bdtable th, .bdtable td {font-size: 17px; padding-top: 2.2rem; padding-bottom: 2.2rem; border-bottom: 1px solid #C2C2C2;}
.bdtable td .bdt-info li {font-size: 15px; margin-top: 10px; margin-right: 10px; padding-right: 10px; position: relative; line-height: 1;}
.bdtable td .bdt-info li:after {
	position: absolute; content: ''; display: block; height: 100%; width: 1px; background: #000000; top: -1px; right: 0;
}
.bdtable td .bdt-info li:last-child:after {display: none;} 
.bdtable thead th {background: #F5F5F5; }

.pagination li {width: 42px; height: 42px; display: flex; justify-content: center; align-items: center; margin: 0 8px;}
.pagination li a {font-size: 18px; color: #333333 !important; display: flex;}
.pagination li.active a {color: #0068B6 !important; font-weight: bold;}
.pagination li.pg-arw {border-radius: 50%;}

.bddetail {border-top: 4px solid #0068B6;}
.bddetail th, .bddetail td {padding: 2rem; border-bottom: 1px solid #C1C1C1;}
.bddetail h5 {font-size: 23px; font-weight: 500;}
.bdd-info li {font-size: 17px; color: #666666; font-weight: 400; padding-left: 2rem; padding-right: 2rem; margin-top: 2rem; margin-bottom: 2rem; position: relative; line-height: 1;}
.bdd-info li:last-child:after {display: none;}
.bdcontent {font-size: 17px;}
.bdfile {background: #F8F8F8;}
.bdfile ul li {font-size: 17px;}
.bftext {padding-right: 2rem; margin-top: 4px; position: relative; flex: none; line-height: 1;}
.bflist {padding-left: 2rem; word-break: break-word;}
.bflist a {font-size: 17px; color: #000000 !important;}
.bflist a:hover {text-decoration: underline;}

.pn-table  {border-top: 1px solid #c7c7c7;} 
.pn-table th, .pn-table td {padding: 17px 0; border-bottom: 1px solid #C7C7C7; font-size: 17px;}
/*게시판*/

.ms-item > div {background-size: cover; background-repeat: no-repeat; background-position: center;}
.ms-paging h5 {font-size: 1.4rem; color: #FFFFFF; font-family: Raleway; font-weight: 300; margin: 0;}
.ms-paging h5 span {font-size: 2.8rem; font-weight: bold;}
.ms-movement {width: 240px; height: 2.4rem; position: absolute; bottom: 6rem; left: 19rem; word-spacing: 2px; overflow: hidden;}
.ms-movement > div {animation: text-to-left 30s linear infinite; display: flex;}
.ms-movement h5 {font-size: 1.6rem; color: #FFFFFF; font-weight: 300; white-space: nowrap; padding-right: 10px;}
.ms-txt h1 {position: relative; z-index: 100;}

@keyframes text-to-left {
  0% {transform: translateX(0%);}
  100% {transform: translateX(-1280px);}
}

.ms-slider .slick-list, .ms-slider .slick-track, .ms-slider .slick-slide, .ms-slider.slick-initialized .slick-slide > div {height: 100%;}
.ms-img {max-height: 100%; position: absolute; top: 50%; transform: translateY(-50%);}
.ms-img3 .ms-child2 {position: absolute; max-width: 58.88%; left: -41.69%; animation: img-movement2 5s infinite; top: auto; transform: none;}
.ms-img4 .ms-child2 {position: absolute; max-width: 72.59%; left: -50.54%; animation: img-movement3 5s infinite; top: auto; transform: none;}
.ms-img5 .ms-child2 {position: absolute; max-width: 82.51%; left: -60.51%; animation: img-movement4 5s infinite; top: auto; transform: none;}

@keyframes img-movement {
  0% {right: 100px;}
  50% {right: 60px;}
  100% {right: 100px;}
}

@keyframes img-movement2 {
  0% {bottom: 00px;}
  50% {bottom: -20px;}
  100% {bottom: 00px;}
}

@keyframes img-movement3 {
  0% {bottom: 13rem;}
  50% {bottom: 15rem;}
  100% {bottom: 13rem;}
}

@keyframes img-movement4 {
  0% {bottom: 0;}
  50% {bottom: -30px;}
  100% {bottom: 0;}
}

.line {position: absolute; bottom: 10px; left: 60px;}
.line li {position: relative; transform: rotate(-90deg); padding: 50px 0;}

.line a {font-size: 1.7rem; font-family: Raleway; color: #444444; position: relative; display: table;}
.line li.active a {color: #0086EB;}
.line li.active a:after {content: ''; display: block; width: 100%; height: 2px; background-color: #0086EB; top: 0; left: 0;}
.sitemap {display: none; height: 100%; width: 100%; background: #FFFFFF; position: fixed; top: 0; left: 0; z-index: 1000;}  
.sitemap.active {display: block;}

.sitemap-list li {margin: 4rem 0;}
.sitemap-list div:nth-child(1) {padding-right: 4rem; flex: 0 0 105px; max-width: 105px;}
.sitemap-list div:nth-child(2) {flex: 0 0 200px; max-width: 200px;}
.sitemap-list p {font-size: 1.4rem; font-weight: 600;}
.sitemap-list p span {font-family: Poppins; font-size: 1.6rem; color: #0086EB;}
.sitemap-list a {font-size: 5rem; color: #FFFFFF; font-weight: bold; text-shadow: -1px 0px #000000, 0px 1px #000000, 1px 0px #000000, 0px -1px #000000; transition: all 0.5s;}
.sitemap-list a:hover {color: #000000;}

.mj-item > div {max-width: 33.2rem; padding: 4rem 5.5rem; margin: 0 auto; border: 1px solid transparent; box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.25); transition: all 0.4s;}
.mj-item > div:hover {border: 1px solid #000000; box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.25);}
.mj-item h5 {color: #292929;}
.mj-item span {color: #BBBBBB;}
.mj-item p {font-size: 1.6rem; color: #444444; height: 164px; word-break: keep-all;}
.mj-item ul li {color: #BBBBBB; line-height: 2;}

.mj-slider .slick-dots {top: auto; bottom: -20px; left: 50%; transform: translateX(-50%);}

#section3 > div {background-image: url('/css/egovframework/img/userpage/main/section3-back.png'); background-position: right top; background-size: cover;}
.sectiontitle h1 {font-size: 4.8rem; color: #0086EB;}

.cw-parent {background-color: rgba(0, 134, 235, 0.1); width: 20.8rem; position: relative; display: flex; align-items: center; justify-content: center; border-radius: 100%;}
.cw-parent:after {content: ''; display: block; padding-bottom: 100%;}
.cw-parent:before {content: ''; display: block; width: 95px; height: 2px; background-color: #0086EB; position: absolute; right: -70px; top: 50%; transform: translateY(-50%);}
.cwn-4 .cw-parent:before {height: 214px; background: transparent; border: 2px solid #0086EB; border-left: 0; top: 100px; transform: none; border-radius: 0 100px 100px 0;}
.cwn-5 .cw-parent:before {display: none;}
.cw-child {background-color: #FFFFFF; width: 17.6rem; position: relative; border-radius: 100%;}
.cw-child:after {content: ''; display: block; padding-bottom: 100%;}
.cw-child:before {content: ''; display: block; width: 14px; height: 27px; background-image: url('/css/egovframework/img/userpage/main/cw-arrow.svg'); background-size: 100% 100%; background-repeat: no-repeat; position: absolute; top: 50%; right: -55px; transform: translateY(-50%);}
.cwn-4 .cw-child:before {top: 70%; transform: rotate(59deg); right: -8.2rem;}
.cwn-5 .cw-child:before {display: none;}
.cwn-6 .cw-child:before,
.cwn-7 .cw-child:before,
.cwn-8 .cw-child:before {transform: translateY(-50%) rotate(180deg);}
.cw-child > div {position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.cw-child > div p {font-size: 2.2rem;}
.cw-child > div span {font-size: 1.6rem;}
.cwn-4 .cw-child, .cwn-5 .cw-child {background-color: #0086EB;}
.cwn-4 .cw-child > div p, .cwn-4 .cw-child > div span, .cwn-5 .cw-child > div p, .cwn-5 .cw-child > div span {color: #FFFFFF !important;}

#section4 > div {background-image: url('/css/egovframework/img/userpage/main/section4-back2.gif'); background-position: center; background-size: cover;}

.bj-request {background: linear-gradient(113deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.00) 92.19%); box-shadow: 2px 4px 4px 0px rgba(0, 0, 0, 0.25); backdrop-filter: blur(5px); padding: 7.9rem 2rem;}
.bjr-input-zone input {border: 1px solid #444444; padding: 1.3rem 1.5rem; font-size: 1.6rem; color: #444444; background: rgba(255, 255, 255, 0.00);}
.bjr-input-zone textarea {border: 1px solid #444444; padding: 1.3rem 1.5rem; font-size: 1.6rem; color: #444444; background: rgba(255, 255, 255, 0.00); height: 100px;}
.bjr-input button {font-size: 1.8rem; font-weight: 600; color: #0086EB; border: 1px solid #0086EB; padding: 1.3rem 0; width: 100%; text-align: center; background: rgba(255, 255, 255, 0.00); transition: all 0.5s;}
.bjr-input button:hover {background-color: #0086EB; color: #FFFFFF;}
.bjr-input label {font-size: 14px; color: #FF0000; margin-bottom: 0;}

.section-children {height: 100%;}

.background {overflow: hidden; position: fixed; left: 0; right: 0; top: 0; z-index: -1; width: auto; height: 100vh;}
.background .bk-zone {position: relative; width: 100%; height: 100%;}
.background .bk-zone .bk-section {display: block; position: absolute; width: 100%; height: 100%;}
.background .bk-zone .bk-section:after {display: block; position: absolute; content: ''; left: 0; right: 0; width: auto; height: 100%; background: url(/css/egovframework/img/userpage/page-bottom.png)no-repeat center bottom; background-size: 100% 100%; -webkit-transform: scale(1.1); transform: scale(1.1);}
.content-zone {background-color: #FFFFFF; padding-bottom: 8.8rem; padding-top: 18.7rem;}
.page-bottom {min-height: 28rem;}

.mi-parent {overflow: hidden;}
.mi-child {width: calc(100% + 22rem); position: relative; right: 0;}
.mi-slider {position: relative;}
.mi-item {border-radius: 10px; position: relative; overflow: hidden; background-size: 100% 100%; background-repeat: no-repeat; background-position: center; filter: grayscale(1); transition: all 0.5s;}
.mi-item:hover {background-size: 110% 110%; filter: none;}
.mi-item:after {content: ''; display: block; padding-bottom: 72.72%;}
.mi-item span, .mi-item div {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.mi-item span {background-color: rgba(113, 113, 113, 0.8); transition: all 0.5s;}
.mi-item:hover span {background-color: rgba(0, 134, 235, 0.8);}
.mi-item div {display: flex; justify-content: end; flex-direction: column;}
.mi-item h5 {font-family: Raleway; font-size: 2.4rem; color: #FFFFFF; margin-bottom: 2rem;}
.mi-item p {font-size: 2rem; color: #FFFFFF; font-weight: 500;}

#portfoliozone {min-height: 41.2rem;}
.bp-thumb {position: relative; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; border: 1px solid #E2E2E2;}
.bp-thumb:after {content: ''; display: block; padding-bottom: 50.48%;}
.bp-thumb > a {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}

.bp-info li {font-size: 1.8rem; display: flex; align-items: start;}
.bp-info span {font-weight: bold;}
.bp-detail {font-size: 1.6rem;}
.bp-detail img {max-width: 100%; height: auto;}

.bp-type {display: flex; flex-wrap: wrap;}
.bp-type li a {display: block; font-size: 2.4rem; padding: 1.1rem 3rem; border-radius: 80px; color: #888; font-weight: 500; box-shadow: none; transition: all 0.5s;}
.bp-type li a:hover {box-shadow: 0px 4px 4px 0px rgba(136, 136, 136, 0.25);}
.bp-type li.on a {box-shadow: 0px 4px 4px 0px rgba(0, 134, 235, 0.25); color: #0086EB;}

.contact-zone {min-height: calc(100vh - 16.6rem); position: relative;}
.contact-back {position: absolute; height: 100%; background-color: #0086Eb; top: 0; left: 0;}
.contact-zone .bc-left, .contact-zone .bc-right {padding-top: 26.6rem; padding-bottom: 16.6rem; height: 100%; position: relative;}
.contact-zone .bc-left {background-color: #0086EB; }
.contact-zone .bc-left h1 {position: relative; padding-bottom: 3rem;}
.contact-zone .bc-left h1:after {position: absolute; content: ''; display: block; width: 88px; height: 3px; background-color: #FFFFFF; left: 0; bottom: 0;}
.contact-zone .bc-right {background-color: #FFFFFF; }
.contact-zone .bc-right .bjr-input {max-width: 630px; margin: 0 auto; border-right: 0;}
.bc-left h5 {font-size: 4.8rem; font-family: Raleway; color: #FFFFFF; font-weight: bold;}
.bc-left h1 {font-size: 8.8rem; font-family: Raleway; color: #FFFFFF; font-weight: bold;}
.contact-zone .bc-left > div, .contact-zone .bc-right > div {min-height: 51rem;}

.wrap-loading{
	display: block;
    position: fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background: rgba(0,0,0,0.2); /*not in ie */
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#20000000', endColorstr='#20000000');    /* ie */
	z-index: 2000;
}

.wrap-loading div{ 
    position: fixed;
    top:50%;
    left:50%;
    margin-left: -21px;    
    margin-top: -21px;
}

.more img {position: relative; transform: rotate(0deg); transition: all 0.5s;} 
.more:hover img {transform: rotate(180deg);}