@charset "UTF-8";
#container_title { display: none; }
/* 서브페이지 비주얼 */
.visual {
  display: table; width: 100%; height: 470px; background: url(../../img/aboutus/visual.jpg); 
  background-size: cover; background-position: 50% 50%; }
.visual::before {
  content: ''; display: block; width: 100%; height: 470px; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.1); }
.visual.prod { background-image: url(../../img/prod/visual.jpg); background-position: 100% 90%; }
.visual.community { background-image: url(../../img/community/visual.jpg); background-position: 100% 30%; }
.visual.clients { background-image: url(../../img/clients/visual.jpg); background-position: 100% 35%; }
.visual.download { background-image: url(../../img/download/visual.jpg); background-position: 50% 60%; }
.visual.user { background-image: url(../../img/user/visual.jpg); background-position: 50% 35%; }
.visual .title-area { text-align: center; display: flex; align-items: center; justify-content: center; height: 100%; }
.visual h2 { font-size: 3rem; color:white; font-weight: 700; text-align: center; text-shadow: 2px 2px 2px #000; }
.visual h3 { font-size: 2rem; color:white; font-weight: 500; text-align: center; text-shadow: 2px 2px 2px #000; }
/* 서브페이지 타이틀 */
.title-area { text-align: left;  margin: 0 0 2rem; }
.title-area .page-title { font-size: 1.6rem; font-weight: 500; color: #222; margin-bottom: 12px; }
.title-area .page-title span { color: #222; }
.mid-title { font-size: 1.15rem; color: #333; font-weight: 500; text-indent: -26px; margin: 0 0 20px 26px; }
/* .mid-title:before { content:"\e94c  "; font-family: 'xeicon'; } */
.mid-title::before {
  content: "task_alt ";  /* 아이콘 이름을 여기에 지정 */
  font-family: 'Material Icons';  /* Material Icons 폰트 사용 */
  font-size: 1.5rem;
  vertical-align: middle;
}
.material-icons {
  vertical-align: -30%;
}
.sub-title { font-size: 1rem; }
.text-area { line-height: 1.6rem; padding: 0 1rem; margin-bottom: 2rem; font-size: 1rem; }
.img-area { margin: 1.3rem 0; }
/* .list-area { margin: 0; padding: 0; } */
.underline { border-bottom: 1px solid #DDD; }
/* 서브페이지 상단 비주얼 */
/* .hd-visual { margin-bottom: 2rem; } */
.hd-visual .hd-visual-bg { position: relative; height: 250px; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; padding:50px 0; }
.hd-visual .hd-visual-bg .wrap { width:100%; text-align:center; max-width:1200px; margin:0 auto; text-shadow: 2px 2px 2px #000; }
.hd-visual .hd-visual-bg .wrap > h1 { font-size: 2.5rem; line-heihgt: 1rem; color:#fff; margin-bottom: 1rem; position: relative; display: inline-block; }
.hd-visual .hd-visual-bg .wrap > h1::after {
  content: ''; /* 가상 요소의 내용을 비웁니다. */
  position: absolute;
  bottom: -0.5rem; /* 텍스트 아래에 위치합니다. */
  left: 0; /* 텍스트 시작 위치에서 시작합니다. */
  width: 100%; /* 텍스트의 넓이만큼 설정합니다. */
  height: 1px; /* 밑줄의 높이를 1px로 설정합니다. */
  background: #FFF; /* 밑줄의 색상을 원하는 색상으로 설정합니다. */
}
.hd-visual .hd-visual-bg .wrap > h1 b { color:#e09e4f;}
.hd-visual .hd-visual-bg .wrap > h2 { font-size: 1.2rem; color:#fff; /* font-weight: 300;  */margin: 0 2rem; }
.hd-visual .hd-visual-bg.greeting { background-image: url(../../img/aboutus/greeting-head.jpg); }
.hd-visual .hd-visual-bg.history { background-image: url(../../img/aboutus/history-head.jpg); }
.hd-visual .hd-visual-bg.organ { background-image: url(../../img/aboutus/organ-head.jpg); background-position: 50% 0%; }
/* .hd-visual .hd-visual-bg.biz { background-image: url(../../img/biz/general01-head.jpg); } */
/* .hd-visual .hd-visual-bg.disaster { background-image: url(../../img/biz/disaster-head.jpg); }
.hd-visual .hd-visual-bg.newtech { background-image: url(../../img/biz/newtech-head.jpg); }
.hd-visual .hd-visual-bg.facility { background-image: url(../../img/biz/facility-head.jpg); }
.hd-visual .hd-visual-bg.guard { background-image: url(../../img/biz/guard-head.jpg); }
.hd-visual .hd-visual-bg.tour { background-image: url(../../img/biz/tour-head.jpg);  background-position: center; }
.hd-visual .hd-visual-bg.golf { background-image: url(../../img/biz/golf-head.jpg); }
.hd-visual .hd-visual-bg.cost { background-image: url(../../img/patent/cost-head.jpg); } */
.hd-visual .hd-visual-txt { position: absolute; top: 0; left: 0;  height: 100%; width: 50%;
  padding: 50px 30px 50px 80px; background-color: rgba(0, 56, 125, 0.6); }
.hd-visual .hd-visual-txt:after { content: ''; display: block; position: absolute; width: 3rem; height: 1px;  top: 4rem; left: 0; background: #fff; }
.hd-visual .hd-visual-txt .page-title { color: white; font-size: 2rem; font-weight: 500; }
.hd-visual .title-area .sub-title { color: rgba(255,255,255,0.5); }
.hd-visual .title-area .main-title{ color:#fff; }
.hd-visual .title-area .desc { color: white; }

/* 사이트맵 테이블 */
.sm_wrap table { border-collapse:collapse; border-spacing:0; }
.sm_wrap a, .sm_wrap a:hover, a:focus, a:active { color: #333; text-decoration: none; }
.sm_tbl { margin:0 0 8px; line-height:1.5rem; }
.sm_tbl thead { border-top: 2px solid #222; }
.sm_tbl th {
  padding: 8px; border-bottom: 1px solid #C4C4C4; border-right:1px solid #C4C4C4; 
  color: #000; background: #F3F3F3; text-align:center; font-weight: 400;
}
.sm_tbl td {
  padding: 8px; border-bottom: 1px solid #C4C4C4; color: #333; border-right: 1px solid #C4C4C4;
  word-break: break-all; text-align: center; line-height: normal;
}
.sm_tbl td b { font-weight: 400; color: #000; }
.sm_tbl th:last-child, .sm_tbl td:last-child { border-right: none; } 

/* 서브 네비게이션 */
.mysubmenu { position: relative; margin: -30px auto 0; width: 1200px; padding: 0 10px; z-index: 21; }
.mysubmenu .inner { padding: 0; width: 100%; border: 1px solid #ddd; background: #fff; min-width: 340px; }
.mysubmenu .menu_select { float: left; position: relative; width: 240px; border-right: 1px solid #ddd; }
.mysubmenu .sub-menulist-area { width: 260px; }
.mysubmenu .menu_select.home { padding: 0; width: 70px; height: 60px; background-color: #fff; background-position: center; text-align: center; }
.mysubmenu .menu_select.home a { line-height: 60px; font-size: 24px; padding: 0; }
.mysubmenu .menu_select.home a i { color: #353535; }
.mysubmenu .menu_select li  { position: relative; }
/* .mysubmenu .menu_select li.on a::before { content: ''; display: block; width: 4px; height: 100%; position:
  absolute; top: 0; left: 0; background-color: #0a2e48; color: white; } */
.mysubmenu .menu_select li.on {  background-color: #0a2e48; color: white; }
.mysubmenu .menu_select li.on a { color: white; }
.mysubmenu .menu_select li a { display: block; padding:0 24px; line-height: 60px; white-space: nowrap; }
.mysubmenu .current_menu { background-repeat: no-repeat; background-image: url(../../img/common/navi_arrow.png);
  background-position: 92% center; background-size: 20px; }
.mysubmenu .all_menu { position: absolute; top: 61px; left: 0; outline: 1px solid #ddd; border-top: none; display: none; width:100%;
  z-index: 20; background: #fff; }
.mysubmenu li, .mysubmenu li a, .mysubmenu h3 { color: #222; }
.mysubmenu .all_menu ul+ul li { border-top: 1px solid #ddd; }
.mysubmenu .all_menu li:hover a { background: #0a2e48; color: #fff; }
.mysubmenu .all_menu.all_submenu li { border-top: 1px solid #ddd; }
.mysubmenu .all_menu.all_submenu li:first-child { border-top: 0; }
/* 페이지 전체에서 공통으로 사용(나중에 하나의 파일로 엮을 예정 */
/* 전체 페이지가 들어갈 공간 - 처음에는 index에서만 사용하려 했는데 sub에서도 사용 */
.main-section, #bo_gall { width: 100%; margin: 4rem 0; }
/* .fa-spin { -webkit-animation: none; animation: none; } */
/* .fa { vertical-align: 5%; } */
.red { border:1px solid red; }
.blue { border:1px solid blue; }
.orange { border:1px solid #ff5100; }
.filler { flex: 1; }
.inner { width: 1180px; margin: 0 auto; padding: 0 0 4rem; }
.inner .desc { font-size: 1rem; }
.clearfix:before, .clearfix:after { display: block; content: ""; clear: both; }
.icon-title { background-image: url(../../img/common/bullet.gif); background-repeat: no-repeat; background-position-y: 20%;
  padding-left: 20px; height: 100%; }
.icon-title > h3 { font-size: 1.1rem; color: #222; padding: 0 0 20px 0; }
.sicon-title {
  background-image: url(../../img/common/bullet01.gif); background-repeat: no-repeat; background-position-y: 7px;
  padding: 0 0 20px 20px; /*font-size: 1rem; color: #222; height: 100%;*/ }
.box-rad { border-radius: 8px; border: 5px solid #EEEEEE; padding: 15px; margin-bottom: 20px; height: 100%; }

.center { display: flex; justify-content: center; align-items: center; text-align: center; }
/* .desc { word-break: break-all; } */
/* .desc>b { color: Chocolate; } */
.desc > p { margin: 10px auto; }
.mb-1 { margin-bottom: 10px }
.mb-2 { margin-bottom: 20px }
.mb-3 { margin-bottom: 30px }
.mb-5 { margin-bottom: 50px }
.mt-1 { margin-top: 10px }
.mt-2 { margin-top: 20px }
.mt-3 { margin-top: 30px }
.mt-5 { margin-top: 50px }
/* 반응형 테이블 설정 */
.tablestyle table { width: 100%; min-width: 480px; table-layout: fixed; border-top: 1px solid #000; }
.tablestyle th { background: #f6f6f6; font-weight: 500; padding: 0.8rem; line-height: 1rem;
  border-bottom: 1px solid #dadada; border-right: 1px solid #dadada; }
.tablestyle th span { font-size: 0.7rem; color: #666; font-weight: normal; }
.tablestyle th:last-child, .tablestyle td:last-child  { border-right: 0; }
.tablestyle td { line-height: 1rem; color: #666; border-bottom: 1px solid #dadada; border-right: 1px solid #dadada;
  padding: 0.8rem 5px; text-align: center; vertical-align: middle; }
@media screen and (max-width: 768px) {
  .tablestyle th, .tablestyle td { font-size: 0.9rem; }
}
@media screen and (max-width: 480px) {
  .tablestyle th, .tablestyle td { font-size: 0.8rem; }
}
/* 반응형 테이블 설정 */

/* flex-container 테스트 */
.flex-container { display: flex; flex-wrap: wrap; justify-content: center; }
/* .flex-container .flex-item b { font-size: 1.2rem; } */
/* .flex-container .flex-item { margin: 0px; } */
/* .flex-container .flex-item .item-box .xi-ul i { top: 5px; }
.flex-container .flex-item .item-box .text-area { padding: 0 1rem; }
.flex-container .flex-item .item-box .text-area>p { font-size: 1.15rem; margin: 1.8rem 0 0.8rem; font-weight: 500; color: #333; } */
.flex-container .flex-item > div { height: 100%; background-color: white; }
@media screen and (max-width: 480px) {
  .flex-container { padding: 0; }
  /* .flex-container .flex-item b { font-size: 1rem; } */
  .flex-container .flex-item { font-size: 0.9rem; flex-basis: auto; }
  /* .flex-container .flex-item .item-box .text-area>p { font-size: 1.05rem; margin: 1.4rem 0 0.8rem; }
  .flex-container .flex-item .item-box .text-area span { font-size: 0.96rem; } */
}
/* flex-container 테스트 끝 */
/* 아이콘 넣고 들여쓰기 ind=indent */
.xi-ul li { padding: 0 0 0.5rem 0; line-height: 1.6rem; text-align: left; }
.xi-ul i { top: 5px; }
/* 아이콘 넣고 들여쓰기 ind=indent */
/* flex box 설정 */
.flex-box { display: flex; flex-wrap: wrap; }
.flex-box .left-area, .flex-box .right-area { width: 50%; padding: 2rem; }
.flex-box .desc { margin-top: 1rem; }
.flex-box .right-area { width: 50%; position: relative; }
.flex-box .right-area .list-top-area { background-color: #064b77; padding: 2% 0; color: #fff; }

.right-area .figure { position: relative; top: 20px; left: 2%; }
.right-area .figure:before {
  content: ''; width: 100%; height: 100%; display: block; border: 8px solid rgba(0, 56, 125, 0.2); position: absolute; 
  -webkit-transition: 0.5sv; transition: 0.5sv; -webkit-animation-name: intro-line; animation-name: intro-line; -webkit-animation-delay: 1s;
  animation-delay: 1s; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.right-area .figure img { width: 100%; -webkit-animation-name: shadow-fig; animation-name: shadow-fig; -webkit-animation-delay: 1s;
  animation-delay: 1s; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
@-webkit-keyframes shadow-fig {
  from { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  to { -webkit-transform: translate(-15px, -15px); transform: translate(-15px, -15px); }
}
@keyframes shadow-fig {
  from { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  to { -webkit-transform: translate(-15px, -15px); transform: translate(-15px, -15px); }
}
@media screen and (max-width: 768px) {
  .flex-box .left-area, .flex-box .right-area { width: 100%; }
  .flex-box .right-area img { display: block; }
}
/* flex box 설정 */
/* 수상 내역 */
/* .vs-content-item { padding: 1rem 0; } */
.vs-content-item ul { position: relative; margin: 0 -8px; display: flex; flex-wrap: wrap; }
.vs-content-item .vs-content-box .vs-list-box { text-align: center; padding: 0rem; }
/* .vs-content-item .vs-content-box .vs-list-box img { margin: auto; padding-bottom: 2rem; } */
.vs-content-item .vs-content-box .vs-list-box img { margin: auto; }
.vs-content-item .vs-content-box { width: 50%; padding: 0 8px; }
/* .vs-content-item .vs-content-box > div { height: 100%; } */
.vs-content-item .vs-content-box .list-top-area { background-color: #064b77; padding: 1.2rem; color: #fff; font-size: 1.1rem; }
@media screen and (max-width:768px) {
  .vs-content-item .vs-content-box .list-top-area { font-size: 1.1rem; }
  .vs-content-item .vs-content-box { width: 50%; margin-bottom: 24px; }
}
/* 수상 내역 */
/* 다운로드 버튼 */
.down-wrap { display: flex; margin-top: 3px; }
.down-wrap a { margin-left: auto; margin-right: 10px; background: white; padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between; }
.btnstyle { font-weight: 500; height: 45px; line-height: 45px; box-sizing: border-box;
  display: inline-block; position: relative; z-index: 2; overflow: hidden; text-align: center; }
.btnstyle:before { content: ""; width: 100%; height: 100%; background: #1659a3; position: absolute;
  left: -100%; top: 0; transition: all 0.3s; z-index: -1; }
.btnstyle:hover { color: white; }
.btnstyle:hover:before { left: 0; }
.down-btn { width: 150px; border: 1px solid #CCC; }
.view_more { margin: 35px 0 0; }
.view_more a { line-height: 40px; color: #343434; text-align: center; width: 150px; height: 40px; border: 1px solid #343434; background-color: transparent; }
@media screen and (max-width: 1200px) {
  .main-section, #bo_gall { margin: 3rem 0; }
  .inner { width: 100%; max-width: 1180px; padding: 0 10px 4rem; }
  .visual h2 { font-size: 2.3rem; font-weight: 600; }
  .visual h3 { font-size: 1.25rem; font-weight: 500; }
  .visual span { font-size: 15px; line-height: 22px; }
  .mysubmenu { margin: -30px auto 0; width: 100%; }
  .mysubmenu .menu_select { width: 180px; height: 60px; }
  .mysubmenu .sub-menulist-area { width: 220px; }
  .mysubmenu .menu_select.home { width: 60px; height: 60px; /* background-size: 18px auto; */ }
  .mysubmenu .menu_select.home a { line-height: 60px; }
  .mysubmenu .menu_select li a { padding: 0 12px; height: 60px; line-height: 60px; }
  .mysubmenu .all_menu { top: 61px; }
  .mysubmenu .current_menu { background-size: 15px auto; }
}
@media screen and (max-width: 768px) {
  .hd-visual .hd-visual-bg .wrap > h1 { font-size: 1.8rem; /* line-height: 1rem; */ }
  .hd-visual .hd-visual-bg .wrap > h2 { font-size: 1.1rem; }
  .main-section, #bo_gall { margin: 2rem 0; }
  .inner { width: 100%; max-width: 747px; padding-bottom: 1rem; }
  .inner .desc { font-size: 0.9rem; }
  .title-area { margin: 0 0 1.5rem; }
  .title-area .page-title { font-size: 1.5rem; }
  .text-area { line-height: 1.5rem; font-size: 0.96rem; }
  .visual, .visual::before { height: 360px; }
  .visual h2 { font-size: 2.2rem; font-weight: 500; }
  .hd-visual .hd-visual-bg { height: 180px; }
  .hd-visual .hd-visual-txt { position: relative; height: 100%; width: 100%; }
  .mysubmenu { margin: -25px auto 0; }
  .mysubmenu .inner { display: flex; border-right: none; }
  .mysubmenu .menu_select { height: 50px; width: 40%; }
  .mysubmenu .sub-menulist-area { width: 60%; }
  .mysubmenu .menu_select li a { height: 50px; line-height: 50px; }
  .mysubmenu .menu_select.home { z-index: 30; width: 50px; height: 50px; border-right: 1px solid #ddd; background-size: 15px auto; flex: 0 0 50px; }
  .mysubmenu .menu_select.home a { line-height: 50px; }
  .mysubmenu .all_menu { top: 51px; }
  .mysubmenu .current_menu { height: 50px; background-size: 12px auto; }
  .mid-title { font-size: 1.2rem; }
  .sm_tbl td, .sm_tbl th { padding: 10px 4px; font-size: 0.85rem; }
}
@media screen and (max-width: 480px) {
  .hd-visual .hd-visual-bg .wrap > h1 { font-size: 1.5rem; }
  .hd-visual .hd-visual-bg .wrap > h2 { font-size: 0.9rem; }
  .main-section, #bo_gall { margin: 1.5rem 0; }
  .sub-title { font-size: 0.9rem; }
  /* .hd-visual .hd-visual-bg { height: 200px; padding: 30px 0; } */
  .hd-visual .hd-visual-bg { height: 160px; padding: 40px 0; }
  .hd-visual .hd-visual-txt .page-title { font-size: 1.5rem; }
  .visual, .visual::before { height: 300px; }
  .visual h2 { font-size: 2rem; }
  .mysubmenu .menu_select li a { font-size: 0.92rem; letter-spacing:-1px; }
  .hd-visual .hd-visual-txt:after { width: 1.5rem; }
  .hd-visual .hd-visual-txt { padding: 30px 30px 30px 50px; }
  .title-area .page-title { font-size: 1.3rem; }
  .mid-title { font-size: 1.1rem; }
  /* .text-area { line-height: 1.5rem; font-size: 0.82rem; } */
}