@charset "UTF-8";

/* layout width setting */
.w1760 {width:100%;max-width:1760px;margin:auto;}
.w1400 {width:100%;max-width:1400px;margin:auto;}
.w1200 {width:100%;max-width:1200px;margin:auto;}

/* font setting */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@font-face {font-family:'hanwha';src: url('font/HanwhaL.ttf') format('opentype');font-weight:400;}
@font-face {font-family:'hanwha';src: url('font/HanwhaR.ttf') format('opentype');font-weight:500;}
@font-face {font-family:'hanwha';src: url('font/HanwhaB.ttf') format('opentype');font-weight:600;}
@font-face{font-family: 'HanwhaWeb'; font-style: normal; font-weight: 400; src: url('font/Hanwha-Light.woff2') format('woff2'), url('font/Hanwha-Light.woff') format('woff');}
@font-face{font-family: 'HanwhaWeb'; font-style: normal; font-weight: 600; src: url('font/Hanwha-Bold.woff2') format('woff2'), url('font/Hanwha-Bold.woff') format('woff');}
@font-face{font-family: 'HanwhaWeb'; font-style: normal; font-weight: 700; src: url('font/Hanwha-Bold.woff2') format('woff2'), url('font/Hanwha-Bold.woff') format('woff');}

span.hanwha {font-family:'HanwhaWeb';vertical-align:1px;line-height:1px;}
span.hanwha2 {font-family:'HanwhaWeb';vertical-align:2px;line-height:1px;}
strong.hanwha {font-family:'HanwhaWeb';vertical-align:1px;line-height:1px;}
strong.hanwha2 {font-family:'HanwhaWeb';vertical-align:2px;line-height:1px;}
label.hanwha {font-family:'HanwhaWeb';vertical-align:1px;line-height:1px;}
label.hanwha2 {font-family:'HanwhaWeb';vertical-align:2px;line-height:1px;}

/* common elements sytle */
#wrap {width:100%;overflow:hidden;font-family:'Noto Sans KR', sans-serif;}

.btn_top {position: fixed;bottom: 0;bottom: 5%;right: 3%; display:none;flex-direction: column;color: #fff;align-items: center;border: 1px solid #ff6600;
  width: 50px;height: 50px;border-radius: 5px;box-sizing: border-box;font-size: .813rem;color: #ff6600;align-items: center;
  justify-content: center;bottom: 5%;font-weight: 500;cursor: pointer;transition:.3s;z-index: 1;}
.btn_top img {width: 15px;display:block;margin-bottom:8px;}
.btn_top.active {display: flex;}
.btn_top:hover {color:#fff;background:#ff6600}
.btn_top:hover img {filter:brightness(0) invert(1)}
a.btn {display:inline-block;border:1px solid #FF6600; color:#FF6600;font-size:1.125em;padding:16px 80px;border-radius:5px;transition:.2s;font-weight:500;}
a.btn:hover {background:#FF6600;color:#fff;transition:.2s;}
a.btntt {display:inline-block;border:1px solid #FF6600; color:#FF6600;font-size:1.125em;padding:16px 80px;border-radius:5px;transition:.2s;font-weight:500;}
a.btntt:hover {background:#FF6600;color:#fff;transition:.2s;}

input::placeholder {color:#aaa}

.header {width:100%;position:fixed;top:0;z-index:10;transition:.3s;}
.h_wrap {display:flex;justify-content: space-between;align-items: center;}
.h_wrap > a.default {}
.h_wrap > a.active {display:none}
.h_wrap > .nav {}
.h_wrap > .nav ul {display: flex;justify-content: space-between;}
.h_wrap > .nav li {margin:0 40px}
.h_wrap > .nav li a {display:block;height: 100%;padding:40px 10px;font-size:1rem;font-weight:600;color:#fff;transition:.3s;}
.h_wrap > .nav li a:hover {color:#FF6600;}
.h_wrap > .h_search {position:relative}
.h_wrap > .h_search form {}
.h_search {width:200px;}
.h_search input {float: right;border: none;outline: none;width: 40px;cursor: pointer;-webkit-transition: .2s all ease-in;-moz-transition: .2s all ease-in;
transition: .2s all ease-in;height: 40px;color: #fff;font-size: 0;background:url(../img/icon__search.png);background-position:right;background-repeat: no-repeat;
border-bottom:3px solid rgba(0,0,0,0);}
/* .h_search input:focus {width: 200px;height: 40px;padding: 0 20px 0 10px;line-height: 2em;font-weight: 100;font-size:1rem;cursor: auto;z-index:0;} */
.h_search button {display: none;}
/* .h_search input:focus + button {display:block;width:30px;height:40px;background:#aaa;border:1px solid;border-bottom:1px solid #fff;position:absolute;right:0;cursor: pointer;font-size: 0;z-index: 1;} */
.h_search input::placeholder {color:#aaa}

.h_search input.active {width: 200px;height: 40px;padding: 0 20px 0 10px;border-bottom: 3px solid #fff;line-height: 2em;font-weight: 100;font-size:1rem;cursor: auto;z-index:0;}
.h_search input.active + button {display:block;width:30px;height:40px;background:none;border:none;position:absolute;right:0;cursor: pointer;font-size: 0;z-index: 1;}
.header.active .h_search input {color:#000;border-bottom: 3px solid rgba(0,0,0,0);}
.header.active .h_search input.active {border-bottom: 3px solid #000;}
.hamburger {display:none;-webkit-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.hamburger span {width:36px;height:4px;background-color: #fff;display: block;margin: 8px auto;-webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;border-radius:10px;cursor:pointer;}
.hamburger span:nth-of-type(2) {width:22px;margin:8px 0;}
.hamburger.is-active {animation: smallbig 0.6s forwards;}
.hamburger.is-active span {margin:9px auto}  
.hamburger.is-active .line:nth-child(1),
.hamburger.is-active .line:nth-child(2),
.hamburger.is-active .line:nth-child(3){-webkit-transition-delay: 0.2s;-o-transition-delay: 0.2s;transition-delay: 0.2s;}
.hamburger.is-active .line:nth-child(2){opacity: 0;}
.hamburger.is-active .line:nth-child(1){
 -webkit-transform: translateY(13px) rotate(45deg);
 -ms-transform: translateY(13px) rotate(45deg);
 -o-transform: translateY(13px) rotate(45deg);
 transform: translateY(13px) rotate(45deg);
}
.hamburger.is-active .line:nth-child(3){
  -webkit-transform: translateY(-13px) rotate(-45deg);
  -ms-transform: translateY(-13px) rotate(-45deg);
  -o-transform: translateY(-13px) rotate(-45deg);
  transform: translateY(-13px) rotate(-45deg);
}
.header.active {background:#fff;transition:.3s;border-bottom:1px solid #cccccc;}
.header.active .h_wrap > a.default {display:none}
.header.active .h_wrap > a.active {display:block;}
.header.active .h_wrap > .nav li a {color:#000;padding:32px 10px}
.header.active .h_wrap > .nav li a:hover {color:#FF6600}

.header.is-active {background:#fff;transition:.3s;border-bottom:1px solid #cccccc;z-index:20;}
.header.is-active .h_wrap > a.default {display:none}
.header.is-active .h_wrap > a.active {display:block;}
.header.is-active .hamburger span {background-color:#000}
.m_header__aside {display:none;background:#fff;position:fixed;top:0;bottom:0;left:0;right:0;padding:90px 0px 0;z-index:15;overflow-y:scroll;
  background-image: url(../img/hanhwa_bg__obj04.png);background-repeat: no-repeat;background-position: bottom right;background-size: 70%;}
/* .m_header__aside {display:none;background:#fff;position:fixed;top:0;bottom:0;left:0;right:0;padding:150px 50px 0;background-image:url(../img/hanhwa_bg__obj03.png);background-repeat:no-repeat;background-position:bottom; z-index:15;} */
.m_header__aside.is-active {display: block;}
.side_menu__wrap {padding:0;}
.side_menu__wrap > li {position:relative;font-weight:400;font-size:1.25rem;border-bottom:1px solid #eee;background:#fff;}
.side_menu__wrap > li span {position:relative;display:block;padding:20px 30px;font-weight:600;}
.side_menu__wrap > li.opened {color:#ff6600}
.side_menu__wrap > li span::before {position: absolute; right:25px;content: url(../img/icon__lnb.png); transition: .3s;filter: grayscale(1);top:50%;transform: translateY(-50%);}
.side_menu__wrap > li.opened span::before{transform: rotate(-180deg ); transition: .3s;filter: grayscale(0);top:30%;color:#ff6600}

/*.side_menu__wrap > li:last-child {border-bottom:none;}*/
.menu__multi > ul {display: flex;flex-wrap: wrap;padding:0px}
.menu__multi > ul > li {width:50%;padding:5px}
.side_menu__wrap .menu__multi > span {padding:0;font-weight: 500;font-size:.875rem;color:#ff6600}
.side_menu__wrap .menu__multi > span::before {display: none;}


.side_menu__items {display:none;border-top:1px solid #eee;padding:10px 40px;background:#f6f6f6;opacity:0;transition: .3s;}
.side_menu__items li {display: block!important;margin:12px 0;}
.side_menu__items a {color:#353535;font-size:1.125rem;font-weight: 300;display:block;width: 100%;height:100%;padding:1% 0}

.side_menu__wrap > li.opened .side_menu__items {display: block;opacity:1;}
.side_menu__items.multi li {margin:5px 0 0;}

.sub_nav {position:relative;display:none;width:100%;box-shadow: 4px 10px 14px rgb(0 0 0 / 10%);border-top: 1px solid #ccc;opacity:0;background:#fff;}
.header.active .sub_nav {opacity:1;background:rgba(255,255,255,.3);}
.sub_nav::before {content: '';background-image: url(../img/hanhwa_bg__obj04.png);background-repeat: no-repeat;background-size:30%;background-position:right;
  -webkit-animation: fade-in-right 1s ease-out both;animation: fade-in-right 1s ease-out both; position: absolute;bottom: 0; right: 0; width: 100%; height: 100%;z-index:-1;}
.sub_nav > ul {display:flex;justify-content: space-between;}
.sub_nav li.sub_nav__tit {flex:2;padding:40px 0;border-left:1px solid #e4e4e4;padding-left:25px;transition:.2s;}
/* .sub_nav li.sub_nav__tit.active {background:#fef1e8} */
.sub_nav li.sub_nav__tit:last-child {border-right:1px solid #e4e4e4;}
.sub_nav li.sub_nav__tit:nth-of-type(3) {display: flex;flex-wrap: wrap;flex:3.5;padding:40px 0 0 25px;}
.sub_nav li.sub_nav__tit:nth-of-type(3) > a {flex:none;width:100%;margin-bottom:-10px;}

.sub_nav__menu.multi {position: relative;padding-left: 50px;}
.sub_nav__menu.multi:nth-of-type(1)::before {position:absolute;content:'FP';color:#000;font-size:1rem;left: 7px;}
.sub_nav__menu.multi:nth-of-type(1)::after {position:absolute;content:'+';color:#FF6600;font-size:1rem;left: 31px;}
.sub_nav__menu.multi:nth-of-type(2)::before {position:absolute;content:'일반직';color:#000;font-size:1rem;left: -19px;}
.sub_nav__menu.multi:nth-of-type(2)::after {position:absolute;content:'+';color:#FF6600;font-size:1rem;left: 33px;}

.sub_nav__menu.multi2 {position: relative;padding-left: 0px;padding-right: 30px;}
.sub_nav__menu.multi2:nth-of-type(1)::before {position:absolute;content:'FP';color:#000;font-size:1rem;left: 2px; top:-40px}
.sub_nav__menu.multi2:nth-of-type(1)::after {position:absolute;content:'+';color:#FF6600;font-size:1rem;left: 26px;top:-40px}
.sub_nav__menu.multi2:nth-of-type(2)::before {position:absolute;content:'일반직ᆞ사무직';color:#000;font-size:1rem;left: -2px;top:-40px}
.sub_nav__menu.multi2:nth-of-type(2)::after {position:absolute;content:'+';color:#FF6600;font-size:1rem;left: 117px;top:-40px}

li.sub_nav__tit > a {display:block;font-size:1.125rem;font-weight: 600;margin-bottom:30px;}
li.sub_nav__tit > .sub_nav__menu {display:flex;justify-content: space-between;/* margin-bottom: 30px; */}
li.sub_nav__tit > .sub_nav__menu li {display:inline-block;font-size:.875rem;margin-right:40px;}
li.sub_nav__tit > .sub_nav__menu li a {display:block;font-size:1rem;margin-bottom:16px;color:#777;transition:.3s}
li.sub_nav__tit > .sub_nav__menu li a:hover {color:#ff6300}


 @-webkit-keyframes fade-in-right {
  0% {-webkit-transform: translateX(50px);transform: translateX(50px);opacity: 0;}
  100% {-webkit-transform: translateX(0);transform: translateX(0);opacity: 1;}
}
@keyframes fade-in-right {
  0% {-webkit-transform: translateX(50px);transform: translateX(50px);opacity: 0;}
  100% {-webkit-transform: translateX(0);transform: translateX(0);opacity: 1;}
}



footer {background:#353535;padding-top:45px;}
footer > p {font-size: 0.75rem;color:#fff;opacity:.5;text-align: center;padding:24px 0;background:#000;}
footer > p br {display: none;}
.f_cont {display: flex;justify-content: space-between;}
.f_logo {}
.f_logo img {display: block;}
.f_logo a.btn {font-size:0.875rem;margin-left: 12px;padding: 11px 40px;}
.f_nav {width:1046px}
.f_nav__wrap {}
.f_nav__wrap > ul {display:flex;justify-content: space-between;margin-bottom:25px;padding-top: 10px;}
li.f_nav__tit {flex:1;}
li.f_nav__tit:nth-of-type(3) {display: flex;flex-wrap: wrap;flex:1.5;}
li.f_nav__tit:nth-of-type(3) > a {flex:none;width:100%;margin-bottom:0;}
.f_nav__menu.multi {position:relative;padding-left:0px;margin-top:25px}
.f_nav__menu.multi:nth-of-type(1) {margin-right:0px;padding-right:30px}
.f_nav__menu.multi:nth-of-type(2) {margin-right:0px;padding-right:50px}
.f_nav__menu.multi:nth-of-type(1)::before {position:absolute;content:'FP+';color:#fff;opacity:.8;font-size:.875rem;left:2px;top:-30px}
.f_nav__menu.multi:nth-of-type(2)::before {position:absolute;content:'일반직ᆞ사무직+';color:#fff;opacity:.8;font-size:.875rem;left:-2px;top:-30px}








li.f_nav__tit > a {display:block;margin-bottom:30px;color:#fff;font-size:1rem;}
.f_nav__wrap {}
.f_nav__menu li {}
.f_nav__menu a {display:block;color:#fff;opacity:.5;font-size:.875rem;margin-bottom:13px;}
.f_nav__num {padding:20px 0;border-top:1px solid #5c5c5c;}
.f_nav__num.m {display: none;}
.f_nav__num li {display:inline-block;font-size:.875rem;margin-right:20px;}
.f_nav__num li.priv {cursor: pointer;}
.f_nav__num li span br {display: none;}
.f_nav__num li span:first-child {color:#fff;margin-right:10px;}
.f_nav__num li span:last-child {color:#fff;opacity:.5;}

.f_nav__num li.priv {cursor: pointer;}
.f_nav__num li span.cctv-operation-policy{opacity: 1;}
.p_ab{position: absolute; right: 11%;}

/* 24-10-07 수정사항 */

#modal_privacy {display:none}
#modal_privacy {position: fixed;top: 0;left: 0;right: 0;bottom: 0;display: block;background: rgba(0,0,0,.5);display: none;z-index:11;}
#modal_privacy .container {width:33%;height:53%;;background: #fff;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);padding:2%;box-sizing: border-box;border-radius:5px;}
#modal_privacy .container > h2 {font-size: 1.5rem;font-weight: 500;}
#modal_privacy span.modal_close {position: absolute;right:2%;top:3%;width:32px;height:32px;opacity: 0.3;border: 0;background-color: transparent;text-indent: -200px;overflow: hidden;transition:all .3s;cursor: pointer;}
#modal_privacy span.modal_close:hover {opacity:1;transition:all .3s;}
#modal_privacy span.modal_close::before,
#modal_privacy span.modal_close::after {position: absolute;top: 0;left: 15px;content: " ";height: 32px;width: 3px;border-radius: 1px;background-color: #333;}
#modal_privacy span.modal_close::before {transform:rotate(45deg);}
#modal_privacy span.modal_close::after {transform:rotate(-45deg);}
#modal_privacy .container .modal_txt {width:100%;height:88%;margin-top:35px;overflow-y:scroll;padding:0;}
#modal_privacy .container .modal_txt p {line-height: normal;font-size:12px;font-family:'dotum';}

@media screen and (min-width:1930px){
  #modal_privacy .container {width: 23%;height:45%;}
}

@media screen and (max-width: 1760px){
  .h_wrap {justify-content:space-around;}
}
@media screen and (max-width: 1400px){
  .h_wrap > .nav li {margin:0 20px}
  .h_wrap > a > img {width: 150px;}
  .h_wrap > .nav li a {font-size:1rem;}
}
@media screen and (max-width: 1200px){
  .h_wrap {padding:20px 30px;justify-content: space-between;}
  .h_wrap > .nav {display: none;}
  .h_wrap > .h_search {display: none;}
  .hamburger {display:block;}
  .header.active .hamburger span {background-color:#000;padding:0;}
}
@media screen and (max-width:500px){
  .m_header__aside {padding:80px 0px 0}
  a.btn {font-size: .875rem;}
  .h_wrap {padding:15px}
  .h_wrap > a > img {margin-top: 10px;}
  .visual a.btn {background:#ff6600;color:#fff}
  .hamburger span {width:25px;height:3px}
  .hamburger span:nth-of-type(2) {width:16px}
  .hamburger.is-active .line:nth-child(1) {transform: translateY(11px) rotate(45deg);}
  .side_menu__wrap > li {font-size: 1rem;}
  .side_menu__items a {font-size: 1rem;font-weight:400;}
  .f_nav__num li span:first-child {margin-right:5px;font-family: 'Noto Sans KR', sans-serif;color:rgba(255,255,255,.8)}
  .btn_top {display: flex;position: relative;left: 84%;bottom:20px}
}
@keyframes smallbig{
  0%, 100%{
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }

  50%{
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
  }
}

/* 24-07-12 모달창 안에 #InfoTable 추가 */
        #InfoTable,table {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
            font-size:12px;
        }

        #InfoTable th, td {
            /* border: 1px solid black; */
            text-align: center;
            padding: 7px;
        }

        #InfoTable th {
            background-color: #fff;
            color:black;
        }

        #InfoTable td {
            color:black;
            vertical-align: middle;
        }
          /* 특정 열 너비 조정 */
        #InfoTable colgroup col {
            width: 35%;
        }

        #InfoTable colgroup col.change-before {
            width: 25%;
        }

/* 24-07-12 #InfoTable td 위에까지 수정 */