@charset "utf-8";

.sub-contents { position: relative; width: 100%; }
.sub-content { min-height: 300px; padding-top: 7rem; padding-bottom: 10rem; }
.sub-visual { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; height: 52rem; background: url('/resources/img/sub_visual_about.jpg') no-repeat center/cover; color:white; text-align: center; }
.sub-visual::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); }
.sub-visual h2 { margin-top: 4rem; font-size: 5.6rem; font-weight: 900; }

.sub-visual .breadcrumb ul { display: flex; justify-content: center; margin-top: 3.5rem; font-size: 1.8rem; font-weight: 700; }
.sub-visual .breadcrumb li:not(:last-child) { position: relative; padding-right: 3rem; }
.sub-visual .breadcrumb li:not(:last-child)::after { content: ''; display: block; position: absolute; right: 1.2rem; top:50%; transform: translateY(-50%); width: 5px; height: 7px; background: url('/resources/img/intro_arw.png') no-repeat center/contain; }
.sub-visual .breadcrumb li .bc-home { position: relative; display: inline-block; padding-left: 5rem; }
.sub-visual .breadcrumb li .bc-home::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width:4rem; height:4rem; background: white url('/resources/img/sub_visual_home.png') no-repeat center/13px; border-radius: 50%; }

.sub-visual .sub-menu { z-index: 1; position: absolute; bottom: 0; width: 100%; height: 7rem; background: rgba(0,0,0,0.4); }
.sub-visual .sub-menu ul { max-width: 1440px; display: flex; gap: 4rem; width: 100%; height: 100%; align-items: center; margin:0 auto; }
.sub-visual .sub-menu li { position: relative; flex:1; height: 66%; font-size: 1.8rem; font-weight: 800; }
.sub-visual .sub-menu li a { display: inline-flex; align-items: center; justify-content: center; max-width: 18.7rem; width: 100%; height: 100%; border-radius: 50px; transition: .3s; }
.sub-visual .sub-menu li a:hover { background: rgba(255,255,255,0.1); }
.sub-visual .sub-menu li.active a { background: var(--key-color); }
.sub-visual .sub-menu li:not(:last-child)::after { content: ''; position: absolute; right:-2rem; top:50%; transform: translateY(-50%); display: block; width: 1px; height: 2rem; background: rgba(255,255,255,0.3); }

.sub-contents h3 { margin-bottom: 5.4rem; font-size: 4.2rem; font-weight: 800; text-align: center; line-height: 1.3; }
.sub-contents h4 { margin-bottom: 2.6rem; font-size: 3.2rem; font-weight: 800; line-height: 1.3; }
.sub-contents h5 { margin-bottom: 1.6rem; font-size: 2rem; font-weight: 800; line-height: 1.3; }

.btn-basic { display: flex; align-items: center; justify-content: center; gap:2rem; width: 38rem; height: 10rem; margin:0 auto; border-radius: 4px; background: var(--key-color); color:white; font-size: 2rem; font-weight: 800; }
.ico-download { display: block; width: 20px; aspect-ratio: 20/16; background: url('/resources/img/ico_download.png') no-repeat center/contain; }
.ico-list { display: block; width: 12px; aspect-ratio: 12/13; background: url('/resources/img/ico_list.png') no-repeat center/contain; }

@media screen and (max-width:768px){
  .sub-visual h2 { font-size: 4.2rem; }
  .sub-visual .breadcrumb ul { margin-top: 2.6rem; }
  .sub-visual .sub-menu ul { gap:2rem; padding: 0 1rem }
  .sub-visual .sub-menu li:not(:last-child)::after { right:-1rem; }

  .sub-contents h3 { font-size: 3.6rem; }
  .sub-contents h4 { font-size: 2.8rem; }
}

@media screen and (max-width:580px){
  .sub-visual .sub-menu { height: 6rem; padding: 0 2rem; overflow: hidden; background: var(--key-color); }
  .sub-visual .sub-menu ul { display: block; padding: 0; padding-top: 6rem; }
  .sub-visual .sub-menu li { width: 100%; height: 6rem; padding:0; color:var(--key-color); background: white; border:1px solid #cccccc; border-top:none; }
  .sub-visual .sub-menu li:not(:last-child)::after { display: none; }
  .sub-visual .sub-menu li a { width: 100%; max-width: none; padding:0 2rem; justify-content: start; border-radius: 0; }
  .sub-visual .sub-menu li a:hover { background: white; }
  .sub-visual .sub-menu li.active { width: calc(100% - 4rem); position: absolute; left:2rem; top:0; color:#fff; border:none; border-left:1px solid rgba(255, 255, 255, 30%); border-right:1px solid rgba(255, 255, 255, 30%); background: var(--key-color) !important; }
  .sub-visual .sub-menu li.active a { background: var(--key-color); }
  .sub-visual .sub-menu::after { content: ''; position: absolute; right:4rem; top:calc(50% - 2.5px); border:5px solid transparent; border-top-color:white; transition: .3s; }
  .sub-visual .sub-menu.mob-sub-menu { overflow: visible; }
  .sub-visual .sub-menu.mob-sub-menu::after { transform: translateY(-50%) rotate(180deg); }
}


/* 인사말 */
.greet-sub { padding-top: 6rem; font-size: 4.2rem; line-height: 1.3; font-family: 'Nanum Myeongjo'; }

.greet-img { position: relative; }
.greet-img-bg { height: 26rem; margin-top: 4rem; border-radius: 2.2rem; overflow: hidden; }
.greet-img-bg img { height: 100%; object-fit: cover; }
.greet-img-ceo { position: absolute; right:14rem; bottom:0; transform: translateY(9px); }

.greet-cont { display: flex; justify-content: space-between; margin-top: 5rem; }
.greet-cont > div { flex:1; }

.greet-title-box { font-size: 4.2rem; font-weight: 300; }
.greet-title-box p { line-height: 5.6rem; }
.greet-title-box b { font-weight: 800; }

.greet-text-box { color:#333333; }
.greet-text { font-size: 2rem; font-weight: 300; }
.greet-text p { line-height: 3rem; }
.greet-writer { margin-top: 6rem; text-align: right; font-weight: 800; font-size: 2.6rem; }
.greet-writer .greet-date { margin-bottom: 1.7rem; font-weight: 500; font-size: 2rem; }

@media screen and (max-width:1700px){
  .greet-img-ceo { width: 42rem; right:4rem; }
}
@media screen and (max-width:1300px){
  .greet-sub { font-size: 3.6rem; }
  .greet-img-ceo { width: 35rem; }
}
@media screen and (max-width:1024px){
  .greet-img-bg { margin-top: 12rem; }
  .greet-cont { display: block; }
  .greet-title-box { margin-bottom: 4rem; }
}
@media screen and (max-width:768px){
  .greet-sub { font-size: 3rem; padding-top: 2rem; }
  .greet-img-bg { height: 18rem; margin-top: 8rem; }
  .greet-img-ceo { width: 24rem; right:1rem; transform: translateY(4px); }
}


/* 조직 */
.organ .organ-cont { display: grid; grid-template-columns: 1fr 1fr 3fr; justify-content: space-between; gap:12rem; }
.organ .organ-cont > div { z-index: 1; position: relative; display: flex; flex-direction: column; gap:1rem; text-align: center; }
.organ .organ-cont > div:not(:first-child)::before { content: ''; z-index: -1; position: absolute; left:0; top:8.1rem; transform: translateX(-100%); width: 12rem; height:1px; background: #e5e5e5; }
.organ .organ-cont > div > p { z-index: 1; position: relative; padding: 0 2rem; border: 1px solid #e5e5e5; border-radius: 1rem; background: #fff; }
.organ .organ-cont > div > p:not(:first-child)::before { content: ''; z-index: -1; position: absolute; left: 50%; top:-1px; transform: translate(-50%, -100%); width: 1px; height:1rem; background: #e5e5e5; }
.organ .organ-title { display: block; padding: 3rem 1rem; border-bottom:1px solid var(--key-color); font-size: 2rem; font-weight: 800; color:var(--key-color); }
.organ .organ-name { display: block; padding: 2.8rem 1rem; font-size: 1.8rem; font-weight: 600; color:#333333; }

@media screen and (max-width:1700px){
  .organ .organ-cont { gap:6rem; }
  .organ .organ-cont > div:not(:first-child)::before { width: 6rem; }
}

@media screen and (max-width:1300px){
  .organ .organ-title { padding: 2.4rem 1rem; }
  .organ .organ-name { padding: 2rem 1rem; }
  .organ .organ-cont > div:not(:first-child)::before { top:6.9rem; }
}

@media screen and (max-width:768px){
  .organ .organ-cont { gap:4rem; }
  .organ .organ-cont > div:not(:first-child)::before { width: 4rem; }
}

@media screen and (max-width:500px){
  .organ .organ-cont { display: flex; flex-direction: column; gap:6rem; }
  .organ .organ-cont > div:not(:first-child)::before { width:1px; height:6rem; left:50%; top:0; transform: translate(-50%, -100%); }
}


/* CI */
.ci .ci-cont { display: flex; flex-direction: column; gap:7rem; color:#202122; }
.ci .ci-cont .ci-flex-list { display: flex; gap:5.4rem; flex-wrap:wrap; }
.ci .ci-cont .ci-flex-list li { flex:1; }
.ci .ci-cont .ci-grid-list { display: grid; grid-template-columns: repeat(2, 1fr); gap:3rem 8.8rem; }
.ci .ci-cont .ci-text { margin: 4.2rem 0 5rem; font-size: 1.6rem; font-weight: 500; line-height: 1.6; }
.ci .ci-cont .grid-2 { grid-column: 1/ 3; }
.ci .ci-cont .list-title { margin-top: 2rem; font-size: 1.8rem; line-height: 1; font-weight: 700; font-family: 'NanumMyeongjoBold'; text-align: center; transform: rotate(0.03deg); }
.ci .ci-cont .btn-basic { margin-top: 5rem; }

.ci .ci-cont .ci-flex-list-s { display: flex; gap:.5rem; }
.ci .ci-cont .ci-color li { display: flex; justify-content: space-between; gap:1rem; }
.ci .ci-cont .color-box { height: 12rem; aspect-ratio: 1/1; margin-bottom: 5px; }
.ci .ci-cont .color-1 { background: #727071; }
.ci .ci-cont .color-2 { background: #ffffff; border:1px solid #cccccc; }
.ci .ci-cont .color-3 { background: #000000; }
.ci .ci-cont .color-4 { background: #f18338; }
.ci .ci-cont .color-5 { background: #235384; }
.ci .ci-cont .color-6 { aspect-ratio: auto; background: linear-gradient( 90deg, #ffffff, #000000 100% ); border:1px solid #cccccc; }
.ci .ci-cont .color-6-wrap { width: 100%; }
.ci .ci-cont .color-title-wrap { display: flex; justify-content: space-between; padding:0 10%; }
.ci .ci-cont .color-title { font-size: 1.6rem; font-weight: 500; line-height: 1.875; }

@media screen and (max-width:1300px){
  .ci .ci-cont .ci-flex-list { gap:3rem; }
  .ci .ci-cont .ci-grid-list { gap:3rem 3.4rem; }
  .ci .ci-cont .color-box { height:11rem; }
}

@media screen and (max-width:768px){
  .ci .ci-cont .ci-color li { justify-content: start; }
  .ci .ci-cont .ci-flex-list { flex-direction: column; }
  .ci .ci-cont .ci-flex-list li { max-width:400px; }
  .ci .ci-cont .ci-grid-list { grid-template-columns: 1fr; }
  .ci .ci-cont .grid-2 { grid-column: auto; }
  .ci .ci-cont .grid-2 .ci-flex-list-s { display: grid; grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width:500px){
  .ci .ci-cont .ci-color li { flex-wrap:wrap; gap:3rem; }
  .ci .ci-cont .color-box { height: 10rem; }
  .ci .ci-cont .list-title { margin-top: 1.2rem; }
}


/* 오시는 길 */
.location ul { display: flex; gap:8rem; }
.location ul li { display: flex; align-items: center; gap:1.5rem; font-size: 2rem; font-weight: 500; }
.location ul li p { line-height: 1.3; }
.location ul .list-title { flex-shrink: 0; }
.location ul .list-img { display: flex; align-items: center; justify-content: center; width: 5rem; aspect-ratio: 1/1; border: 1px solid #cccccc; border-radius: 50%; flex-shrink:0; }
.location ul .list-img img { max-width: fit-content; }
.location .map-wrap { height:720px; margin-top: 3rem; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; }
.location .root_daum_roughmap,
.location .root_daum_roughmap .wrap_map { width: 100%; height: 100%; }
.location .wrap_controllers { display: none; }
.location .root_daum_roughmap .cont { display: none; }
.location .root_daum_roughmap_landing .border1,
.location .root_daum_roughmap_landing .border4 { display: none; }

@media screen and (max-width:1300px){
  .location ul { gap:2rem 6rem; flex-wrap:wrap; }
  .location .map-wrap { height: 50rem; }
}

@media screen and (max-width:768px){
  .location li:nth-child(1) .list-img img { width: 2rem; }
  .location ul .list-img img { width: 2.4rem; }
  .location .map-wrap { height: 40rem; }
}

@media screen and (max-width:500px){

}


/* 게시판 */
.list-top-wrap { display: flex; justify-content: space-between; margin-bottom: 5rem; }
.list-top-wrap form { display: block; width: 43rem; }

.search-wrap { position: relative; display: flex; gap:5px; height: 6rem; font-size: 1.6rem; font-weight: 300; color:#666666; }
.search-wrap select { width: 15.5rem; height: 100%; padding: 0 1.6rem; padding-right:42px; border:1px solid #9f9f9f; background: url('/resources/img/select_arw.png') no-repeat center right 10px/ 31px; }
.search-wrap input { width: calc(100% - 16rem); height: 100%; padding: 0 2rem; padding-right:7rem; background: #f5f5f5; border:none; }
.search-wrap button { position: absolute; right:0; top:0; width: 6.8rem; height: 100%; text-indent: -9999px; background: url('/resources/img/common/ico_search.png') no-repeat center/23px; overflow: hidden; }

.list-total { display: flex; gap:1rem; align-items: center; font-weight: 600; font-size: 1.8rem; }
.list-total .list-total-ico { display: flex; align-items: center; justify-content: center; width:4rem; aspect-ratio: 1/1; border-radius: 50%; background: #f3f4f8; }
.list-total b { display: inline-block; font-weight: 800; color: var(--key-color);}

.community-list ul { border-top:1px solid #000; }
.community-list li a { position: relative; display:flex; align-items: center; gap:3.2rem; padding:3.6rem 2rem; padding-right: 5rem; border-bottom:1px solid #e5e5e5; color: #333; transition: .3s; }
.community-list li a::after { content: ''; position: absolute; right:2.4rem; top:50%; transform: translateY(-50%); width:8px; height:12px; display:block; background: url('/resources/img/ico_list_arw.png') no-repeat center/contain; filter:saturate(0); transition: .3s; }
.community-list li a:hover { color:var(--key-color); }
.community-list li a:hover::after { filter:saturate(1); }
.community-list li .list-date { display: flex; flex-direction: column; align-items: center; justify-content: center; gap:1.4rem; width: 8rem; text-align: center; font-size: 1.8rem; font-weight: 300; }
.community-list li .list-date b { font-weight: 800; font-size: 3.6rem; line-height: 1; }
.community-list li .list-notice { display: block; padding: .5rem 1rem; background: var(--key-color); font-weight: 800; font-size: 1.6rem; color:#fff; }
.community-list li .list-text-wrap { width: calc(100% - 11.2rem); }
/* .community-list li .list-title { margin-bottom: 1.8rem; line-height: 1; font-size: 2rem; font-weight: 800; } */
.community-list li .list-title { margin-bottom: 1.8rem; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 2rem; font-weight: 800; }
.community-list li .list-text { line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.6rem; font-weight: 600; color:#666666; transition: .3s; }
.community-list li a:hover .list-text { color:var(--key-color) }


/* 이미지 게시판 */
.img-list ul { display: flex; flex-wrap: wrap; gap:5rem; }
.img-list li { width: calc((100% - 15rem)/4); }
.img-list .list-img { aspect-ratio: 2/1; overflow: hidden; }
.img-list .list-img img { width: 100%; height: 100%; object-fit: cover; }
.img-list .list-title { margin-top: 2rem; font-size: 2rem; overflow: hidden; text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical; font-weight: 600; }
.img-list .list-title span { line-height: 1.3; }
.img-list .list-date { margin-top: 2rem; font-size: 14px; font-weight: 600; color: #666; }

@media screen and (max-width:1300px){
  .img-list ul { gap:50px 30px; }
  .img-list li { width: calc((100% - 90px)/4); }
  .img-list .list-title,
  .img-list .list-date { margin-top: 1.6rem; }
}

@media screen and (max-width:1024px){

}

@media screen and (max-width:768px){
  .img-list li { width: calc((100% - 30px)/2); }
}

@media screen and (max-width:520px){
  .list-top-wrap { flex-wrap:wrap; gap:3rem; }
  .list-top-wrap form { width: 100%; }

  .community-list li a { padding: 3.6rem 1.5rem; gap:2rem; padding-right:4rem; }
  .community-list li a::after { right:1rem; }
  .community-list li .list-text-wrap { width: calc(100% - 8rem); }
}

@media screen and (max-width:400px){
  .img-list li { width: 100%; }
}