@charset "utf-8";

/*!
 *@(주)가민정보시스템
 *@2021.12.20 류승호초안
 *@추가수정 : 수정시 작성
 */

/*=================
기본 세팅
===================*/

.login_wrap .container{ max-width:1300px; min-width:1300px; margin:0 auto; }

.login_bg {background:#e6f2ff;}
.login_wrap{ height:100vh; padding-top:30px;}
.login_box{display:flex;background:#fff;border-radius: 50px;width:1300px;margin:0 auto;padding:20px;position: relative;}

.login_visual{ position:relative; width:600px; background:#0565f0 url("/images/sub/bg_login.jpg") right bottom no-repeat; padding:100px 0 0 50px; border-radius: 35px; }
.login_visual .links_wrap{ position:absolute; right:20px; top:20px;  }
.login_visual .links_wrap.open{ height:auto;  }
.login_visual .links_wrap:after{ position:absolute; right:18px; top:15px; color:#fff; display:inline-block; content:"\f329"; font-family: "Font Awesome 5 pro"; font-weight: bold; }
.login_visual .links_org {position:absolute; right:20px; top:20px;}
.login_visual .org-links {display:block;width:100%;height:48px;padding:0.375rem 2.25rem 0.375rem 1.375rem;-moz-padding-start:calc(0.75rem - 3px);font-size:16px;font-weight:400;line-height:1.5;color:#fff;background-color:#0565f0;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 0.75rem center;background-size:16px 12px;border:1px solid #5a9af5;border-radius:24px;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;-webkit-appearance:none;-moz-appearance:none;appearance:none;}
.login_visual .links{ border:#5a9af5 solid 1px; border-radius: 24px; padding:6px 60px 6px 20px; height:48px; background:#0565f0; color:#fff; -webkit-appearence:none; appearance:none }
.login_visual .login-org{font-size:16px;}
.login_visual .links li{ margin-bottom:5px; }
.login_visual .links li:last-child{ margin-bottom:0; }
.login_visual .links li a{ display:block; color:#fff; }
.login_visual .links li a i{ display:inline-block; width:35px; height:35px; margin-right:10px; border-radius: 20px; background-position:center; background-repeat:no-repeat; background-size:cover; vertical-align: middle }
.login_visual .links li a i.icon01{ background-image:url("/images/sub/icon_com01.jpg")}
.login_visual .title{ font-size:45px; color:#fff; font-weight:600; line-height: 1.2; margin-bottom:17px; }
.login_visual .title span{ display:block; font-weight:300; }
.login_visual .eng{ font-size:14px; font-weight:300; color:#90aff7; margin-bottom:25px; }
.login_visual .text{ font-size:20px; color:#fff; line-height: 1.3 }
.login_visual .text em{ font-style:normal; font-weight:600; }

.login_form{ width:660px; padding:125px; }
.login_form h2{ font-size:45px; margin-bottom:20px; font-weight:600; }
.login_form form{ padding:40px 0 30px; }
.login_form .org-links {width:100%;padding:0.6rem 2.25rem 0.6rem 0.9rem;-moz-padding-start:calc(0.75rem - 3px);font-size:16px;font-weight:400;line-height:1.5;color:#000;background-color:#fff;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 0.75rem center;background-size:16px 12px;border:1px solid #e2e6ea;border-radius:10px;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;-webkit-appearance:none;-moz-appearance:none;appearance:none;}
.login_form .login_row{ position:relative; padding:5px 0; }
.login_form .login_row label{ position:absolute; left:15px; top:calc(50% - 10px); color:#8c9198; font-weight:600; }
.login_form .login_row input{ width:100%; font-size:20px; background:#f8f9fa; border:#e2e6ea solid 1px; border-radius: 10px; height:50px; padding:10px 15px; box-sizing: border-box}
.login_form .id_save_wrap{ padding:10px; }
.login_form .btn_login{ display:block; width:100%; border:0; border-radius:10px; background:#0565f0; color:#fff; height:50px; font-size:18px; }

.login_form .etc_wrap{ border-top:#eee solid 1px; padding-top:30px;  }
.login_form .etc_wrap a{ display:block; }
.login_form .etc_wrap .user_check{ background:#e8f1ff; color:#0565f0; border:#0565f0 solid 1px; border-radius: 5px; padding:15px 0; text-align: center;}
.login_form .etc_wrap .id_pw_find{ display:flex; justify-content: space-between; padding:10px 0; }
.login_form .etc_wrap .id_pw_find > a{ width:48%; padding:15px 0; text-align: center; font-size:16px; display:block; background:#f9f9f9; color:#000; border:#e1e1e1 solid 1px; border-radius: 5px; font-weight:600; } 
.login_form .etc_wrap .btn_menual{ display:block; padding:15px; text-align:center; text-decoration: underline }

.logout_wrap .container{ max-width:1300px; min-width:1300px; margin:0 auto; }

.logout_wrap{ background:#e6f2ff; height:100vh; padding-top:30px; }
.logout_box{ position: relative; background:#fff;border-radius: 50px;width:1300px;margin:0 auto;padding:20px;}
.logout_visual{ position:relative; background:#405eb4 url("/images/sub/bg_logout.jpg") center 150px no-repeat; height:420px; padding-top:50px; border-radius: 35px; text-align:center; color:#fff; }
.logout_visual .title{ font-size:45px; font-weight:600; margin-bottom:15px; }
.logout_visual .title span{ font-weight:300; }
.logout_visual .text{ font-size:22px; }
.logout_visual .text em{ font-style:normal; font-weight:600; }
.logout_visual .eng{ position:absolute; left:0; right:0; bottom:40px; text-align:center; color:#7e8fc8; font-size:20px; }

.link_list_wrap{ display:flex; padding:35px; justify-content: space-around}
.link_list_wrap .link_list{ position:relative; width:46%; } 
.link_list .left_title{ display:inline-block; height:100%; min-height:290px; }
.link_list .left_title.title01{ background:url(/images/sub/bg_icon01.jpg) right bottom no-repeat; }
.link_list .left_title.title02{ background:url(/images/sub/bg_icon02.jpg) right bottom no-repeat; }
.link_list .left_title h2{ font-size:30px; font-weight:600; margin-bottom:15px; }
.link_list .left_title .view_all{ display:inline-block; background:#f2f7ff; color:#0565f0; border:#0565f0 solid 1px; border-radius: 35px; padding:10px 30px 10px 25px; }
.link_list .left_title .view_all:before{  display:inline-block; content:"\f067"; font-family: "Font Awesome 5 pro"; font-size:14px; font-weight: 300; vertical-align: 0; margin-right:10px; }
.link_list .left_title .view_all.open:before{ content:"\f068"}
.link_list .list_box{ position:absolute; right:0; top:0; bottom:0; width:350px; background:#f2f7ff; border-radius: 15px;  padding:10px 15px; overflow:auto; z-index: 100 }
.link_list .list_box.active{ height:auto; top:auto; transition:all 0.3s }
.link_list .list_box ul li{ position:relative; border-bottom:#aacbfa dashed 1px; }
.link_list .list_box ul li:last-child{ border-bottom:0; }
.link_list .list_box ul li a{ display:block; padding:14px 15px; color:#384a65; font-weight:300;  }
.link_list .list_box ul li a:hover{ color:#000; font-weight:600 }
.link_list .list_box ul li:after{ position:absolute; right:15px; top:35%; display:inline-block; content:"\f061"; font-family: "Font Awesome 5 pro"; font-size:16px; font-weight: 300; vertical-align: 0; }
.link_list .list_box ul li:hover:after{ display:inline-block; animation: go_right ease-out 0.8s infinite; font-size:20px; top:28%; }
@keyframes go_right{
	0%{ transform:translateX(0) }
	20%{ transform:translateX(5px) } 
	80%{ transform:translateX(8px) } 
	100%{ transform:translateX(0) } 
}

.container{ max-width:1400px; min-width:1400px; margin:0 auto; }

#header{ background:#0565f0; padding-top:25px; min-width:1440px;}
#header .logo{ float:left; }
#header .logo a{ display:inline-block; text-indent:-9999px;  width:160px; height:30px; background:url(/images/common/logo.png) center no-repeat; background-size:contain; vertical-align: middle }
#header .logo span{ display:inline-block; font-size:18px; font-weight:300; color:#fff; vertical-align: bottom; margin-left:10px;  }

#header .etc_wrap{ float:right; display:flex; align-items: center }
#header .etc_menu li{ display:inline-block; margin-left:15px; vertical-align: middle }
#header .etc_menu li a{ color:#fff; }
#header .etc_menu li a:hover{ text-decoration: underline } 
#header .etc_menu .user{ color:#fff; font-weight:600; }
#header .etc_menu .user:before{ display:inline-block; width:18px; height:18px; content:""; background:url(/images/sub/bullet.png) center no-repeat; background-size:contain; margin-right:3px; vertical-align: -2px; }
#header .etc_menu .user em{ display:inline-block; margin-left:3px; font-weight:300; font-style:normal }
#header .etc_btn{ margin-left:20px; }
#header .etc_btn li{ display:inline-block; vertical-align: middle }
#header .etc_btn li a{ display:flex; justify-content: center; align-items: center; height: 25px; background:#fff; padding:0 10px; color:#133669; border-radius: 3px; font-size:12px;  }
#header .etc_btn li a img{ height:12px; }
#header .etc_btn .icon{ display:inline-block; position:relative; font-size:8px; padding-left:30px; line-height:1; color:#133669; }
#header .etc_btn .icon:before{ position:absolute; left:0; top:0; display:inline-block; font-family: "Font Awesome 5 pro"; font-size:20px; font-weight:300; }
#header .etc_btn .icon.flow:before{ content:"\f6ff"}
#header .etc_btn .icon.check:before{ content:"\f09d"}

#header .gnb_wrap{ display: flex; justify-content: space-between; align-items: center; padding:30px 0 0 0; clear:both; }
#header .gnb > li{ position:relative; display:inline-block; margin-right:70px; }
#header .gnb > li:before{ display:none; width:6px; height:6px; background:#fff; border-radius:5px; position:absolute; top:15px; left:calc(50% - 3px);  content:""}
#header .gnb > li:hover:before{ display:inline-block;  animation: bounce ease-out 0.8s infinite;}
@keyframes bounce{
	0%{ transform:translateY(0) scale(1.15,1)}
	20%{ transform:translateY(-5px) scale(1,1)} 
	80%{ transform:translateY(-8px) scale(1,1)} 
	100%{ transform:translateY(0) scale(1.15,1) } 
}
#header .gnb > li > a{ display:block; padding:30px 0;  color:#fff; font-size:22px; font-weight:500; } 
#header .gnb > li > ul{ display:none; position:absolute; top:82px; left:50%; width:200px; padding:15px 0; transform: translateX(-50%); background:#012c6a; border-bottom-left-radius: 15px; border-bottom-right-radius:15px; z-index: 2000 }
#header .gnb > li > ul:before{ dislay:inline-block; position:absolute; width:15px; height:15px; background:#012c6a; transform: rotate(45deg) translateX(-50%); top:0; left:50%;  content:""}
#header .gnb > li > ul > li > a{ display:block; padding:10px 15px; color:#fff; font-size:16px; }
#header .gnb > li > ul > li > a:hover{ background:#00ceee; color:#012c6a; transition:all 0.3s }
@media all and (max-width:1530px) {
    #header .gnb > li:first-child > ul{left:0;transform:translateX(-15%);}
}
#header .search_box{ position:relative; width:250px; }
#header .search_box .sch_txt{ background:#1f7bff; border-radius: 30px; width:100%; border:0; line-height: 38px; height:38px; padding:0 15px; color:#fff; }
#header .search_box .btn_sch{ position:absolute; right:10px; top:3px; font-size:18px; background:transparent; color:#fff; border:0; width:30px; height:30px; }

#main h2{ font-size:30px; font-weight:600; }

.main_top{ background:#f5f8fa; padding:20px 0;  min-width:1440px;}
.main_top .container{ display:flex; justify-content: space-between }
.main_top .main_visual{ width:870px; height:420px; padding:30px; background:url("/images/main/main_visual.jpg") center no-repeat; background-size:cover; border-radius: 5px; }
.main_top .main_visual .title{ font-size:50px; font-weight:600;  line-height: 1.3 }
.main_top .main_visual .title span{ display:block; font-weight:300; }
.main_top .main_visual .txt{ font-size:16px; margin-top:20px; color:#676767; }

.main_top .latest_area{display:flex; justify-content:space-between; flex-direction:column; width:510px;}
.container .svcLatestArea{display:flex;width:100%;margin-bottom:30px;}
.main_top .latest_area .latest_box{position:relative; border:#e8e8e8 solid 1px; background:#fff; border-radius:5px; padding:30px; }
.container .svcLatestArea .latest_box{position:relative; display:inline-block; width:50%;border:#e8e8e8 solid 1px; background:#fff; border-radius:5px; padding:30px; margin-right:10px;}
.container .svcLatestArea .latest_box:last-child{margin-right:0;}
.main_top .latest_area .latest_box h3,.container .svcLatestArea .latest_box h3{ font-weight:600; font-size:24px; margin-bottom:30px; }
.main_top .latest_area .latest_box ul li,.container .svcLatestArea .latest_box ul li{ position:relative; display:flex; justify-content: space-between; padding-left:12px; }
.main_top .latest_area .latest_box ul li:before,.container .svcLatestArea .latest_box ul li:before{ position:absolute; left:0; top:5px; display:inline-block; content:"•"; margin-right:5px; font-size:14px; font-weight:600; }
.main_top .latest_area .latest_box ul li a,.container .svcLatestArea .latest_box ul li a{ display:block; width:75%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.8 }
.main_top .latest_area .latest_box .more,.container .svcLatestArea .latest_box .more{ position:absolute; right:30px; top:30px; font-size:12px; font-weight:600; display:block; background:#e1f3ff; color:#24a0ff; padding:5px 10px; border-radius: 20px;  }
.main_top .latest_area .latest_box ul li span,.container .svcLatestArea .latest_box ul li span {display:inline-block;font-size:.8em;text-align:right;width:25%;line-height:2;}

.user_info_wrap{ display:flex; justify-content: space-between; align-items: center; background:#012c6a; padding:20px 40px; border-radius: 50px; margin:30px 0; }
.user_info_wrap .user_info{ display:flex; align-items: center }
.user_info_wrap .user_info .user_name{ display:inline-block; font-size:22px; font-weight:600; color:#fff;  }
.user_info_wrap .user_info .user_logout{ display:inline-block; padding:7px 15px; border-radius: 20px; background:#e1f3ff; color:#3dabff; font-size:14px; font-weight:600; margin:0 20px; }
.user_info_wrap .user_info .info{ color:#fff; font-size:14px;}
.user_info_wrap .user_info .info span:first-child{ display:inline-block; padding-right:10px; margin-right:10px; border-right:#fff solid 1px;  } 
.user_info_wrap .company{ color:#fff; font-size:18px; }
.user_info_wrap .company span{ display:inline-block; margin-right:15px; font-size:14px; opacity: 0.5}

#content_area { position:relative; }

.left_menu{ position:absolute; left:-200px; top:20px; width:200px; transition:all 0.3s; z-index: 1000 }
.left_menu.open{ left:20px; transition:all 0.3s }
.left_menu h2{ font-size:24px; font-weight:600; background:#012c6a; color:#fff; padding:20px; border-top-left-radius: 10px; border-top-right-radius: 10px}
.left_menu ul{ padding:10px 0; border:#012c6a solid 1px; background:#fff;  border-bottom-left-radius: 10px; border-bottom-right-radius: 10px }
.left_menu ul li a{ position:relative; display:block; padding:0 0 0 30px; line-height: 40px; font-size:14px; font-weight:400; color:#012c6a; }
.left_menu ul li a:hover,.left_menu ul li.active a{ background:#e6f0ff; font-size:16px;  font-weight:600; transition:all 0.3s }
.left_menu ul li a:before,.left_menu ul li.active a:before{ display:inline-block; position:absolute;  left:0; top:-2px; content:"\f0da"; font-family: "Font Awesome 5 pro";   font-size:14px; font-weight:600; opacity: 0; }
.left_menu ul li a:hover:before,.left_menu ul li.active a:before{  left:15px; top:-2px; margin-right:5px; opacity: 1; transition:all 0.3s  }
.left_open{ display:block; position:absolute; right:0; top:64px; background:#012c6a; font-size:20px;  padding:15px 10px;  color:#fff; transform:translateX(100%); border-top-right-radius: 5px; border-bottom-right-radius: 5px; }

.form_col{ display:flex; flex-wrap: wrap; width:90%; }
.form_col .row{ display:flex; justify-content: space-between; align-items: center; padding:0 15px; }
.form_col .row label{ position:relative; display:block; width:30%; color:#fff; padding-left:15px; padding-right:15px; }
.form_col .row label:before{ position:absolute; left:0; top:-2px; display:inline-block; content:"•"; margin-right:5px; font-size:18px; font-weight:600;} 
.form_col .row .row_con{ width:65%; }
.form_col .row .row_con select,
.form_col .row .row_con input { width:100%; border:0; height:35px; padding:0 10px; border-radius:5px; }
.form_col .row .row_con input.wauto,.form_col .row .row_con select.wauto{ width:auto; }
.btn_top_sch{ position:absolute; right:45px;  width:130px; background:#00ceee; color:#012c6a; border:0; font-size:16px; font-weight:600; border-radius: 5px;}

.form_col.col1 li{ width:100%; }
.form_col.col2 li{ width:48%; margin:10px 0; }
.form_col.col2 label{ width:25%; }
.form_col.col2 li .row_con{ width:75%;}
.form_col.col3 li{ width:32%; margin:10px 0; }
.form_col.col4 li{ width:24%; margin:10px 0; }

.top_sch_area{ position:relative; background:#234aa8; padding:30px; border-radius: 10px; }
.top_sch_area .btn_top_sch{ top:40px; bottom:40px; }

.sub_top_area{ background:#f0f5ff; padding:30px 0 5px; min-width:1440px;}
.sub_sch_area{ position:relative; background:#f1f1f1; padding:15px 30px; border-radius: 10px; }
.sub_sch_area .form_col .row label{ color:#000; }
.sub_sch_area .btn_top_sch{top:15px; bottom:15px; }
.sub_sch_area .txt_list li{position:relative; padding:5px 0 10px 20px;font-size:1em;}
.sub_sch_area .txt_list li:before{position:absolute; left:0; top:4px; content:"•";} 

.sub_title{ display:flex; justify-content: space-between; align-items: center; }
.sub_title .title{ display:flex; align-items: flex-end }
.sub_title .title p{ margin-left:20px; }

#footer{background:#4c505c;margin-top: -100px;padding-top: 100px;padding-bottom: 50px; min-width:1440px;}
#footer .container{ position:relative;  padding:38px 70px; }
#footer .container:after{ display:block; content:""; clear: both }
#footer h1{ float:left; text-indent:-9999px;  width:125px; height:24px; background:url(/images/common/logo.png) center no-repeat; background-size:contain; }
#footer .copy_wrap{ float:right; position:relative; padding-right:400px; }
#footer .copy_wrap .banner{ padding:0 0 15px 0; }
#footer .copy_wrap .banner li{ display:inline-block; margin-right:5px;}
#footer .copy_wrap .bottom_menu{ padding:0 0 15px 0; }
#footer .copy_wrap .bottom_menu li{ display:inline-block; padding-right:10px; margin-right:10px; border-right:#eee solid 1px; color:#fff; }
#footer .copy_wrap .bottom_menu li:last-child{ border-right:0; }
#footer .copy_wrap .bottom_menu li a{ display:block; color:#fff; }
#footer .copy_wrap p{ color:#a0a2aa; font-size:14px; }
#footer .copy_wrap .bottom_btn{ position:absolute; right:0; top:0; }
#footer .copy_wrap .bottom_btn > a{ display:inline-block; border:#91949d solid 1px; border-radius: 5px; padding:0 10px; line-height:36px; color:#fff; font-size:14px;  }
#footer .copy_wrap .bottom_btn > a:hover{ background:#363b49; color:#fff; transition:all 0.3s }
#footer .copy_wrap .re_site{ position:relative; display:inline-block; border:#91949d solid 1px; border-radius: 5px; padding:10px 80px 10px 10px; }
#footer .copy_wrap .re_site > span{ font-size:14px; color:#fff; }
#footer .copy_wrap .re_site > a{ display:block;  position:absolute; right:10px; top:10px; color:#fff; }
#footer .copy_wrap .re_site > a.open{ transform:rotate(180deg)}
#footer .copy_wrap .re_site ul{ display:none; position:absolute; bottom:40px; left:-1px; right:-1px; background:#363b49; padding:15px; border-radius: 15px;  }
#footer .copy_wrap .re_site ul li{ border-top:#eee dashed 1px; }
#footer .copy_wrap .re_site ul li:first-child{ border-top:0; }
#footer .copy_wrap .re_site ul li a{ display:block; color:#fff; padding:10px 0; font-size:14px; }

#footer.footer_sub{ margin:0; padding:0;  }
#footer.footer_sub .container{ padding:50px 0 }
#footer.footer_sub .copy_wrap{ padding-right:630px; }

/* 로딩바  */
#loading-overlay {display:none;background-color:#000;opacity:0.5;z-index:9999;}
.loading-bar,.loading-bar:before,.loading-bar:after {border-radius:50%;width:2.5em;height:2.5em;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation:load7 1.8s infinite ease-in-out;animation:load7 1.8s infinite ease-in-out;}
.loading-bar {color:#fff;font-size:15px;margin:20% auto;position:relative;text-indent:-9999em;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation-delay:-0.16s;animation-delay:-0.16s;}
.loading-bar:before,.loading-bar:after {content:'';position:absolute;top:0;}
.loading-bar:before {left:-3.5em;-webkit-animation-delay:-0.32s;animation-delay:-0.32s;}
.loading-bar:after {left:3.5em;}
.loading-mag {position:relative;font-size:20px;margin:-15% auto;text-align:center;color:#fff;}
@-webkit-keyframes load7 {0%,80%,100% {box-shadow:0 2.5em 0 -1.3em;}40% {box-shadow:0 2.5em 0 0;}}
@keyframes load7 {0%,80%,100% {box-shadow:0 2.5em 0 -1.3em;}40% {box-shadow:0 2.5em 0 0;}}

/*==================
사이즈별 추가코드
==================*/
@media all and (min-width:1800px){
  .left_menu{ left:50%; transform: translateX(-920px); top:20px; }
  .left_open{ display:none; }
}
@media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) {

}