@charset "utf-8";

@import 
url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR&family=Noto+Serif+KR&family=Nanum+Gothic&family=Nanum+Myeongjo&display=swap");


/* Common */
*, *:before, *:after {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
* {margin:0; padding: 0;text-size-adjust: none;-webkit-text-size-adjust: none;}
body {
    font-family: 'Noto Sans KR', 'Noto Serif KR','Apple SD Gothic Neo','Apple Gothic','AppleGothic','sans-serif','dotum';
    font-size:14px;
    line-height:1.6;
    letter-spacing: -0.5px;
    word-spacing: 0px;
    margin:0 auto;
    color:#EFEFEF;
    background-color:#111;
}

button {background-color: #0000;color: #EFEFEF;cursor: pointer;}
li{list-style:none;}
form,button{border:0; vertical-align:top;}
img {border:0;vertical-align:bottom;}
em, address{font-style:normal;}
a{color:#EFEFEF; text-decoration: none;outline: none;cursor: pointer;}
a:visited {color: #EFEFEF;}
a:active{color: #EFEFEF;}
a:hover{text-decoration: none;}
a.visit {}
a.visit:visited {}
a.visit:active{}
a.visit:hover{}
input::placeholder {color: #aaaaaa;}


/* 면편집 레이아웃 */
.din.bnn-mb-20 .banner {margin-bottom: 20px !important;}
.din.bnn-fixed-rl div[data-dinnum="1"]{position: fixed;top: 220px;margin-left: -300px;width: 300px !important;display: flex;flex-direction: column;justify-content: center;}
.din.bnn-fixed-rl div[data-dinnum="2"]{position: fixed;top: 220px;margin-left: 1200px;width: 300px !important;display: flex;flex-direction: column;justify-content: center;}
.din {position: relative;clear: both;overflow: hidden;width: 1200px;max-width: 100%;margin: 0 auto;padding:0;}
.din.din100 {width: 100%;} /* 하위 영역에서 폭을 지정할 경우 */

/* 1단 */
.din.din1 {}
.din.din1 > div[data-dinnum] {width:100%;}
.din.din1 > .left {width:50%; float: left;}
.din.din1 > .right {width:50%; margin:15px 0 0 auto;}


/* 2단 1:1 */
.din.din2-11 {}
.din.din2-11 > div[data-dinnum] {float:left;width: 50%;margin-bottom: 0;}
.din.din2-11 > div[data-dinnum="1"] {padding-right: 20px;}
.din.din2-11 > div[data-dinnum="2"] {padding-left: 20px;}
.din.din2-11 > div[data-dinnum="1"] > .din.din2-11 > div[data-dinnum="1"] {padding-right: 5px;}
.din.din2-11 > div[data-dinnum="1"] > .din.din2-11 > div[data-dinnum="2"] {padding-left: 5px;}
.din.din2-11.dinnum2-700px {display: flex;justify-content: space-between;align-items: center;}
.din.din2-11.dinnum2-700px > div[data-dinnum] {float: unset;}
.din.din2-11.dinnum2-700px > div[data-dinnum="1"] {width: calc(100% - 700px);}
.din.din2-11.dinnum2-700px > div[data-dinnum="2"] {width: 700px;padding-left: 0;}

/* 2단 1:2 */
.din.din2-12 {}
.din.din2-12 > div[data-dinnum] {float:left;}
.din.din2-12 > div[data-dinnum="1"] {width: 300px;padding-right: 0;}
.din.din2-12 > div[data-dinnum="2"] {width: calc(100% - 300px);padding-left: 40px;}


/* 2단 2:1 */
.din.din2-21 {}
.din.din2-21 > div[data-dinnum] {float:left;}
.din.din2-21 > div[data-dinnum="1"] {width: calc(100% - 300px);padding-right: 40px;}
.din.din2-21 > div[data-dinnum="2"] {display: block;float: right;width: 300px;padding-left: 0;}
.din.din2-21 > div[data-dinnum="1"] > .din {width: 100%;}
.din.din2-21 > div[data-dinnum="1"] > .din.din2-21 > div[data-dinnum="1"] {float: left;width: calc(100% - 267px);padding-right: 20px;border: 0;}
.din.din2-21 > div[data-dinnum="1"] > .din.din2-12 > div[data-dinnum="1"] {float: left;width: 240px;padding-right: 20px;border: 0;}
.din.din2-21 > div[data-dinnum="1"] > .din.din2-12 > div[data-dinnum="2"] {float: right;width: calc(100% - 240px);padding-left: 0;}
.din.din2-21 > div[data-dinnum="1"] > .din:first-child {padding-bottom: 41px;}
.din.din2-21 > div[data-dinnum="1"] > .din {padding-bottom: 45px;margin-bottom: 0 !important;}
.din.din2-21 > div[data-dinnum="1"] > .din:last-child {border-bottom: 0;padding-bottom: 0;}


/* 3단 1:1:1 */
.din.din3-111 {}
.din.din3-111 > div > div {margin-bottom:25px}
.din.din3-111 > div[data-dinnum] {float:left;}
.din.din3-111 > div[data-dinnum="1"], .din.din3-111 > div[data-dinnum="2"], .din.din3-111 > div[data-dinnum="3"] {width:31.2%;}
.din.din3-111 > div[data-dinnum="2"] {margin: 0 3.2%;}

/* 3단 1:1:1 */
.din.din3-111.mg-rl-20px {}
.din.din3-111.mg-rl-20px > div[data-dinnum] {float:left;}
.din.din3-111.mg-rl-20px > div[data-dinnum="1"], .din.din3-111 > div[data-dinnum="2"], .din.din3-111 > div[data-dinnum="3"] {width:calc((100% - 40px) / 3);}
.din.din3-111.mg-rl-20px > div[data-dinnum="2"] {margin: 0 20px;}


/* 3단 1:2:1 */
.din.din3-121 {}
.din.din3-121 > div[data-dinnum] {float:left;}
.din.din3-121 > div[data-dinnum="1"] {width:25%;}
.din.din3-121 > div[data-dinnum="2"] {width:50%;padding:0 20px;}
.din.din3-121 > div[data-dinnum="3"] {width:25%;}


/* 3단 1:1:2 */
.din.din3-112 {}
.din.din3-112 > div[data-dinnum] {float:left;}
.din.din3-112 > div[data-dinnum="1"] {width:25%;}
.din.din3-112 > div[data-dinnum="2"] {width:25%;padding:0 20px;}
.din.din3-112 > div[data-dinnum="3"] {width:calc(50% - 40px);}


div[data-dinnum] > div.din {width: 100%;}
/* //면편집 레이아웃 */

/* din 전체에 border */
.border {border: 1px solid #0004;}

/* 단 margin */
.mg-bt-40px {margin-bottom: 40px;}
.mg-bt-30px {margin-bottom: 30px;}
.mg-bt-20px {margin-bottom: 20px;}
.mg-tp-40px {margin-top: 40px;}
.mg-tp-30px {margin-top: 30px;}
.mg-tp-20px {margin-top: 20px;}


/* 단 padding */
.pd-bt-40px {padding-bottom: 40px;}
.pd-bt-30px {padding-bottom: 30px;}
.pd-bt-20px {padding-bottom: 20px;}
.pd-tp-40px {padding-top: 40px;}
.pd-tp-30px {padding-top: 30px;}
.pd-tp-20px {padding-top: 20px;}


/* header /////////////////////////////*/
header {width: 100%;padding: 0 calc((100% - 1200px) / 2);margin: 0 auto;background-color: #111;z-index: 999;border-bottom: 1px solid #FFF3;}
header .top {display: flex;justify-content: space-between;padding: 30px 0;}
header .top .logo {width: 260px;}
header .banner img {max-width: unset;}
header nav {padding: 10px 0 20px;}
header nav .menu {display: flex;}
header nav .menu li {margin-right: 80px;}
header nav .menu li:last-child {margin-right: 0px;}
header nav .menu li a {font-size: 25px;letter-spacing: normal;white-space: nowrap;}
header.fixed {position: fixed;z-index: 999;transition: all .3s ease-in-out;display: flex;align-items: center;height: 90px;}
/* header.fixed .banner {position: absolute;right: calc((100% - 1200px) / 2);bottom: 10px;} */
header.fixed .top {padding: 0;}
/* header.fixed .top .logo {width:  200px;} */
/* header.fixed .top .logo {width: auto;height: 80px;} */
header.fixed .top .logo {width: auto;height: 40px;}
header.fixed nav {padding: 0;margin-left: 50px;}
header.fixed nav .menu li {margin-right: 50px;}
header.fixed nav .menu li a {font-size: 20px;letter-spacing: normal;}
/* 
header.fixed .din.din2-11.dinnum2-700px > div[data-dinnum] {float: unset;}
*/
div[data-dinnum] > .dinnum2-700px {overflow: visible;}
header.fixed .din.din2-11.dinnum2-700px {display: flex;justify-content: space-between;align-items: center;}
header.fixed .din.din2-11.dinnum2-700px > div[data-dinnum="1"] {width: 100%;} 
header.fixed .din.din2-11.dinnum2-700px > div[data-dinnum="2"] .banner {position: absolute;right: 0;top:0;width: fit-content;z-index: 100;}
header.fixed .din.din2-11.dinnum2-700px > div[data-dinnum="2"] .banner img {width: auto;height: 90px;}

/*////////////////////////////// header */

/* main ////////////////////////////////*/
main {padding: 50px 0 100px;margin: 0 auto;}
/*//////////////////////////////// main */

/* footer //////////////////////////////*/
footer {width: 1200px;border-top: 1px solid #FFF3;margin: 0 auto;padding-bottom: 50px;}
footer .menu-cont {padding: 70px 150px;display: flex;justify-content: space-between;font-size: 17px;line-height: 1.2;}
footer .menu-cont .wrap {display: flex;}
footer .menu-cont .depth1 {font-weight: normal;}
footer .menu-cont .depth1 .arrow {margin: 0 15px;display: inline-block;width: 12px;height: 14px;background-image: url(../../img/icon/arrow-right-r.png);background-size: 100%;}
footer .menu-cont .depth2 {font-weight: 300;}
footer .menu-cont .depth2 li {margin-bottom: 7px;}
footer .menu-cont .depth2 li:last-child {margin-bottom: 0;}
footer .banner-cont {padding: 40px 0;border-top: 1px solid #FFF7;display: flex;justify-content: space-between;}
footer .company-cont {text-align: center;font-size: 17px;letter-spacing: -0.63px;font-weight: 300;}
footer .company-cont .info {display: flex;}
footer .company-cont dl {display: flex;}
footer .company-cont dl::after {content: '/';margin: 0 5px;}
footer .company-cont dl:last-child::after {content: '';}
footer .company-cont dl dt {margin-right: 5px;}
footer .company-cont dl dt, footer .company-cont dl dd {white-space: nowrap;}
footer .company-cont dd + dt {margin-left: 8px;}
/*////////////////////////////// footer */

/* 인트라넷 레이아웃 ///////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* 인트라넷 바디 */
body.intranet {
    color:#222;
    background-color:#e9e9e9;
}
body.intranet button {background-color: #0000;color: #222;cursor: pointer;}
body.intranet li{list-style:none;}
body.intranet form,button{border:0; vertical-align:top;}
body.intranet img {border:0;vertical-align:bottom;}
body.intranet em, address{font-style:normal;}
body.intranet a{color:#222; text-decoration: none;outline: none;cursor: pointer;}
body.intranet a:hover{text-decoration: none;}
body.intranet input::placeholder {color: #aaaaaa;}


/* 인트라넷 공통 단 */
.intranet .din.din2-12 {}
.intranet .din.din2-12 > div[data-dinnum="1"] {width: 240px;}
.intranet .din.din2-12 > div[data-dinnum="2"] {width: calc(100% - 240px);padding-left: 50px;}
.intranet .din.din2-11 > div[data-dinnum="1"] {padding-right: 15px;}
.intranet .din.din2-11 > div[data-dinnum="2"] {padding-left: 15px;}

/* .intranet header ////////////////////*/
.intranet header {display: flex;justify-content: space-between;align-items: center;background-color: #e9e9e9;width: 100%;min-width:1200px;margin: 0 auto;padding: 40px calc((100% - 1200px) / 2);border-bottom: 0;}
.intranet header .flex-cont {display: flex;width: fit-content;}
.intranet header .member-cont {width: 30%;overflow: hidden;padding: 10px;background-color: #2454800d;}
.intranet header .member-cont .title {font-size: 15px;color: #245480;}
.intranet header .member-cont ul {width: fit-content;margin: 0 auto;display: flex;align-items: center;flex-wrap: nowrap;white-space: nowrap; animation: marquee 12s linear infinite;}
.intranet header .member-cont ul li {font-size: 15px;margin: 0 6px;display: inline;}
@keyframes marquee {
    from {
        transform: translateX(20%); /* Start from the right side of the container */
    }
    to {
        transform: translateX(-100%); /* End at the left side of the container */
    }
}
.intranet header .logo {width: 210px;}
.intranet header .logo img {width: 100%;}
.intranet header .name {font-size: 24px;line-height: 1.8;display: flex;align-items: center;padding-left: 20px;margin-left: 20px;border-left: 1px solid #222;}
.intranet .bold {font-weight: bold;margin-left: 5px;}
.intranet header.header-fixed {position: fixed;padding-top: 10px;padding-bottom: 10px;z-index: 999;border-bottom:1px solid #d9d9d9;transition: all .2s ease-in-out;}
.intranet header.header-fixed .logo {width:  140px;}
.intranet header.header-fixed .name {font-size: 20px;} 
/*//////////////////// .intranet header */


/* .intranet main ////////////////////*/
.intranet main {padding-top: 0;min-width:1200px;}
/*//////////////////// .intranet main */


/* .intranet footer ////////////////////*/
.intranet footer {width: 100%;padding-bottom: 0;min-width:1200px;}
.intranet footer .flex-cont {padding: 50px calc((100% - 1200px) / 2);display: flex;background-color: #434343;color: rgb(230, 230, 230);}
.intranet footer .logo {width: 210px;min-width: 210px;}
.intranet footer .logo img {width: 100%;height: auto;}
.intranet footer .info {display: flex;flex-wrap: wrap;word-break: keep-all;margin-left: 90px;}
.intranet footer .info dl {display: flex;letter-spacing: -0.1px;font-size: 13px;font-weight: normal;margin-right: 15px;}
.intranet footer .info dl dt + dd {margin-left: 4px;}
.intranet footer .copyright {color: #aaaaaa;font-size: 13px;padding: 20px calc((100% - 1200px) / 2);
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#353535+0,424242+21,424242+38,3f3f3f+47,3f3f3f+64,3f3f3f+81,353535+100 */
background: #353535; /* Old browsers */
background: -moz-linear-gradient(top,  #353535 0%, #424242 21%, #424242 38%, #3f3f3f 47%, #3f3f3f 64%, #3f3f3f 81%, #353535 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #353535 0%,#424242 21%,#424242 38%,#3f3f3f 47%,#3f3f3f 64%,#3f3f3f 81%,#353535 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #353535 0%,#424242 21%,#424242 38%,#3f3f3f 47%,#3f3f3f 64%,#3f3f3f 81%,#353535 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#353535',GradientType=0 ); /* IE6-9 */

}
.intranet footer .tel {margin-right: 3px;}
.tel {content: '';display: inline-block;position: relative;width: 15px;height: 13px;background: url(../../img/icon/tel.png) no-repeat bottom;background-size: contain;}
/*//////////////////// .intranet footer */

/*/////////////////////////////////////////////////////////////////////////////////////////////////////// 인트라넷 레이아웃 */
.modal{ max-width: fit-content !important;}
.jquery-modal.blocker.current {z-index: 900;} /*모달 z-index*/


.modal .logo {width: 190px;height: fit-content;margin:0 auto 35px;}
.modal .logo img {width: 100%;height: auto;}
/* loginModal 로그인 */
.modal.loginModal{color: #3e3e3e;background-color: #e9e9e9;border-radius: unset;padding: 40px 100px 70px;}
.modal.loginModal p {font-size: 16px;color: #245480;font-weight: bold;margin-bottom: 15px;}
.modal.loginModal input.form-control {border: 0;font-size: 16px;height: 40px;width: 100%;max-width: 400px;padding: 0 20px;}
.modal.loginModal .form-group {margin-bottom: 10px;}
.modal.loginModal .form-group:last-child {margin-bottom: 0;}
.modal.loginModal input.form-control:focus {outline: none;}
.modal.loginModal input.form-control::placeholder {color: #222;}
.modal.loginModal #loginFrom {margin-bottom: 30px;}
.modal.loginModal .btn{padding: 10px 0;text-align: center;border: 0;border-radius: 0;background-color: #245480;color: #FFF;font-size: 19px;}
.modal.loginModal .btn-cont {width: 100%;display: flex;margin-bottom: 10px;}
.modal.loginModal .btn-cont #btn_signin {width:270px;margin-right: 10px;}
.modal.loginModal .btn-cont #btn_cancel {width: 120px;}
.modal.loginModal #btn_regist {width: 100%;display: block;}
.modal.loginModal .close-modal {border-radius: 50%;border: 1px solid #fff;}


/* 인트라넷 회원가입 //////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.modal.regist {padding: 40px 100px 70px;color: #222;background-color: #e9e9e9;border-radius: unset;}
.modal.regist form {width: 100%;}
.modal.regist .close-modal {border-radius: 50%;border: 1px solid #fff;}

.modal.regist .check-area {width: 100%;font-size: 18px;;font-weight: 500;line-height: 1.6;margin-bottom: 25px;} 
.modal.regist .check-area label {display: flex;align-items: center;}
.modal.regist .check-area .color-red {font-size: 16px;color: #ff0000;margin-left: 5px;}
.modal.regist .check-area .text-box {width: 100%;max-width: 600px;height: 220px;background-color: #FFF;padding: 15px 5px;margin-top: 10px;}
.modal.regist .check-area .text-box .inner {width: 100%;height: 100%;overflow: auto;padding: 10px 20px;font-size: 18px;font-weight: normal;line-height: 1.8;}
.modal.regist .check-area .text-box .inner::-webkit-scrollbar {width: 4px;height: 100%;}
.modal.regist .check-area .text-box .inner::-webkit-scrollbar-thumb {background-color: #ff0000;border-radius: 10px;}
.modal.regist .check-area .text-box .inner::-webkit-scrollbar-track {background-color: #0007;border-radius: 10px;}
.modal.regist .button-cont {width: 100%;display: flex;justify-content: space-between;}
.modal.regist .button-cont .btn {width: calc((100% - 10px) / 2);padding: 10px 0;font-size: 20px;color: #FFF;font-weight: 500;text-align: center;}
.modal.regist .button-cont .btn-cancel  {background-color: #ababab;}
.modal.regist .button-cont .btn-confirm {background-color: #245480;}
.modal.regist .check-area input[type='checkbox'] {visibility: hidden;position: absolute;}
.modal.regist .check-area .check-box {cursor: pointer;;margin-right: 10px;display: inline-block;width: 20px;min-width: 20px;height: 20px;background: url(../../img/icon/check-g-s.png) no-repeat center;background-size: auto 99%;}
.modal.regist .check-area .check-box.checked {background: url(../../img/icon/check-b-s.png) no-repeat center;background-size: auto 99%;}
.modal.regist .check-area .check-box.lg {width: 27px;min-width: 27px;height: 27px;background: url(../../img/icon/check-g.png) no-repeat center;background-size: auto 99%;}
.modal.regist .check-area .check-box.lg.checked {background: url(../../img/icon/check-b.png) no-repeat center;background-size: auto 99%;}

.modal.regist .input-area {width: 100%;margin-bottom: 18px;}
.modal.regist .input-area:last-child {margin-bottom: 0;}
.modal.regist .input-area label {display: block;font-size: 20px;font-weight: normal;line-height: 1.2;margin-bottom: 6px;}
.modal.regist .input-area input {font-size: 18px;padding: 0 20px;width: 100%;height: 42px;outline: none;border: 0;display: block;}
.modal.regist .input-area input::placeholder {font-family: 'Noto Sans KR';font-size: 18px;}
.modal.regist .input-area select {font-size: 18px;font-family: 'Noto Sans KR';width: 100%;height: 42px;padding: 0 20px;outline: none;border: 0;display: block;-webkit-appearance: none;-moz-appearance: none;appearance: none;background-color: #FFF;}
.modal.regist .input-area select::-ms-expand {display: none;}
.select-arrow {background: url(../../img/icon/arrow-down.png) no-repeat 96%;;background-size: 21px auto;}
.modal.regist .input-area .birth {display: flex;justify-content: space-between;}
.modal.regist .input-area .birth > * {width: calc((100% - 15px) / 3);}
.modal.regist .input-area .birth .select-arrow {background-position-x: 88%;}
.modal.regist .input-area .cert {display: flex;justify-content: space-between;margin-top: 10px;}
.modal.regist .input-area .cert input {width: 500px;}
.modal.regist .input-area.address-input .cont {display: flex;margin-bottom: 2px;}
.modal.regist .input-area.address-input a {font-size: 17px;padding: 7px 15px;display: inline-block;height: 42px;}
.modal.regist .input-area.address-input label {width:20%}
.modal.regist .input-area.address-input input[name="address[postcode]"] {width:200px;}
.modal.regist .input-area.address-input input {width:80%};
.modal.regist .btn-cert {background-color: #245480;color: #FFF !important;font-size: 18px;font-weight: normal;white-space: nowrap;width: 240px;height: 42px;display: flex;justify-content: center;align-items: center;}
.modal.regist .cont #btn-submit {margin-top: 75px;background-color: #245480;color: #FFF !important;font-size: 22px;font-weight: normal;white-space: nowrap;width: 100%;height: 50px;display: flex;justify-content: center;align-items: center;}
.modal.regist .message {margin-top: 5px;text-align:left;width: 100%;font-size: 14px;}
.modal.regist .msgError{color: #e94242;}
.modal.regist .inputError{border:1px dashed #f00 !important;background-color:rgb(250, 255, 189) !important;}

.modal.regist .link-wrap {margin: 30px auto 0;width: 400px;display: flex;justify-content: space-between;}
.modal.regist .link-wrap a {font-size: 18px;color: #222;font-weight: 500;}
/*////////////////////////////////////////////////////////////////////////////////////////////////////////// 인트라넷 회원가입 */

/* popup */
.popup {min-width: 250px;display: flex;flex-direction: column;}
.popup.layer {position: fixed;z-index: 10;border: 1px solid #000000;background-color: #ffffff;}
.popup .popup_content {width: 100%;height: calc(100% - 30px);overflow: auto;}
.popup img {max-width: 100%;}
.popup .popup_footer {height: 30px;line-height: 30px;padding-left: 10px;}
.popup .popup_footer button {background-color: #000000;color: #ffffff;float: right;height: 30px;padding: 3px;cursor: pointer;}