@charset "utf-8";
/* CSS Document */

select {
    border: 0px;
    border-radius: 3px;
    vertical-align: middle;
}

input {
    border: 0px;
    border-radius: 3px;
    vertical-align: middle;
    ime-mode: active;
}

label {
    border: 0px;
    border-radius: 3px;
    vertical-align: middle;
}

button {
    border: 0px;
    border-radius: 3px;
    vertical-align: middle;

}

.pnt {
    cursor: pointer;
}

/* layout */

.bg-gray { background-color: #e9ebef;}
.text-center { text-align: center;}

.fl-left { float: left;}
.fl-right { float: right;}

.line-bottom { border-bottom: solid 1px #c8c8c8;}
.white-space {
    white-space: pre-line;
}

.white-pre {
    white-space: pre;
}

.pl-5 { padding-left: 5px;}
.pl-7 { padding-left: 7px;}
.pl-10 { padding-left: 10px;}
.pl-20 { padding-left: 20px;}
.pl-30 { padding-left: 30px;}

.pr-5 { padding-right: 5px;}
.pr-7 { padding-right: 7px;}
.pr-10 { padding-right: 10px;}
.pr-20 { padding-right: 20px;}
.pr-30 { padding-right: 30px;}

.pt-10 { padding-top: 10px;}
.pt-20 { padding-top: 20px;}
.pt-30 { padding-top: 30px;}


.pb-10 { padding-bottom: 10px;}
.pb-20 { padding-bottom: 20px;}
.pb-30 { padding-bottom: 30px;}

.ml-5 { margin-left: 5px;}
.ml-7 { margin-left: 3px;}
.ml-10 { margin-left: 5px;}
.ml-15 { margin-left: 15px;}
.ml-20 { margin-left: 20px;}
.ml-30 { margin-left: 30px;}

.mr-5 { margin-right: 5px;}
.mr-7 { margin-right: 7px;}
.mr-10 { margin-right: 5px;}
.mr-15 { margin-right: 5px;}
.mr-20 { margin-right: 20px;}
.mr-30 { margin-right: 30px;}


.col { width: 100%;}
.col-1 {
    width: 30%;
}
.col-2 { width: 50%;}
.col-3 { width: 33.333%;}
.col-4 { width: 25%;}
.col-5 { width: 20%;}
.col-6 { width: 16.666%;}
.col-7 { width: 14.285%;}
.col-8 { width: 12.5%;}
.col-9 {
    width: 33%;
}
.col-10 {
    width: 22%;
}
.col-11 {
    width: 80px;
}



/* main */
#main-wrap { width:100%;}
#main-wrap a, a:visited { text-decoration:none; cursor:pointer; color:#ffffff;}
#main-wrap a:hover, a:active { text-decoration:none; cursor:pointer; color:#ffffff;}

#main-wrap .main { 
    width: 490px; height: 540px; background-color: #ffffff; margin: 0 auto; margin-top: 50px; letter-spacing: -0.02em;
}
#main-wrap .main .tit { 
    font-size: 32px; font-weight: 700; color: #666666; padding-top: 80px; letter-spacing: -0.05em; 
}
#main-wrap .main .btn-wrap { 
    width: 350px; margin: 0 auto; color: #ffffff; margin-top: 42px; 
}
#main-wrap .main .btn-wrap .write { 
    width: 170px; height: 170px; background-color: #0070bd; float: left; margin-right: 10px; background-image: url('../img/ic_write.png'); background-repeat: no-repeat; background-position: center 30px;
}
#main-wrap .main .btn-wrap .write .text {
    font-size: 18px; font-weight: 500; padding-top: 95px; line-height: 1.3em;
}
#main-wrap .main .btn-wrap .search { 
    width: 170px; height: 170px; background-color: #00a0e9; float: left; margin-right: 0px; background-image: url('../img/ic_search.png'); background-repeat: no-repeat; background-position: center 30px;
}
#main-wrap .main .btn-wrap .search .text {
    font-size: 18px; font-weight: 500; padding-top: 95px; line-height: 1.3em;
}
#main-wrap .main .btn-wrap .admin {
    width: 168px; height: 38px; margin: 0 auto; color: #ffffff; margin-top: 10px; margin-bottom: 35px; float: right; border: solid 1px #c8c8c8; display:flex; align-items:center; justify-content: center;
}
#main-wrap .main .btn-wrap .admin .ic {
    width: 38px; height: 38px; background-image: url('../img/ic_ad_login.png'); background-repeat: no-repeat; background-position: center; background-color: #c8c8c8;
}
#main-wrap .main .btn-wrap .admin .text {
    width: 130px; font-size: 16px; font-weight: 700; color:#777c89; letter-spacing: -0.02em;
}
#main-wrap .main .logo { 
    width: 133px; margin: 0 auto; margin-top: 35px;
}

    
/* login */
#login-wrap { width:100%;}
#login-wrap a, a:visited {text-decoration:none; cursor:pointer; color:#666666;}
#login-wrap a:hover, a:active {text-decoration:none; cursor:pointer; color:#666666;}
#login-wrap .login { 
    width: 490px; height: 490px; background-color: #ffffff; margin: 0 auto; margin-top: 50px; letter-spacing: -0.02em; 
}
#login-wrap .login .tit { 
    font-size: 32px; font-weight: 700; color: #666666; padding-top: 80px; letter-spacing: -0.05em; 
}
#login-wrap .login .tit span { 
    color: #0070bd; line-height: 1.1em;
}
#login-wrap .login .text { 
    font-size: 14px; font-weight: 300; color: #666666; padding-top: 50px; letter-spacing: -0.05em; 
}
#login-wrap .login .login-form { 
    width: 266px; margin: 0 auto; padding-top: 42px; 
}
#login-wrap .login .login-form input {
    width: 266px; height: 44px; margin-bottom: 7px; border:solid 1px #c8c8c8; padding: 0 10px; font-size: 16px; color: #777c89; letter-spacing: -0.05em; 
}
#login-wrap .login .login-form button {
    width: 266px; height: 46px; margin-top: 12px; background-color: #0070bd; border:0px; font-size:18px; color:#ffffff; font-weight: 500; letter-spacing: -0.05em; 
}


/* 출입신청 */
#write-wrap { width:100%; font-size: 14px; font-weight: 300; color: #888888; }
#write-wrap a, a:visited { text-decoration:none; cursor:pointer; color:#ffffff;}
#write-wrap a:hover, a:active { text-decoration:none; cursor:pointer; color:#ffffff;}

#write-wrap select {
        padding: 5px 5px;
        border: solid 1px #c8c8c8;
        font-family: 'Noto Sans KR', 'Nanum Gothic', sans-serif;
        font-size: 16px;
        font-weight: 300;
        color: #888888;
        border-radius: 3px;
    }
#write-wrap input { 
    padding: 6px 8px; border: solid 1px #c8c8c8; font-family: 'Noto Sans KR', 'Nanum Gothic', sans-serif; font-size: 16px; font-weight: 300; color: #888888; 
}


#write-wrap .cotainer {
    width:100%; height: 66px; border-bottom: solid 2px #0070bd;
} 
#write-wrap .header { 
    width:926px; margin: 0 auto; height: 66px; 
}
#write-wrap .header a img { 
    margin: 10px 0;
}

/* 출입신청 */
#write-wrap .process {
    width:926px; margin: 0 auto; padding: 30px 0 100px 0;
}
#write-wrap .process .btn {
    text-align: center; 
}
#write-wrap .process button {
    width: 130px; height: 42px; border:0px; font-size:16px; color:#ffffff; margin: 0 4px;
}
    #write-wrap .process .btn-agree-cancel {
        background-color: #b6b6b6;
    }
#write-wrap .process .btn-agree-ok {
    background-color: #0070bd; 
}
#write-wrap .process .tit { 
    font-size: 32px; font-weight: 500; color: #666666; letter-spacing: -0.05em; 
}
#write-wrap .process .tit span {
    color: #0070bd;
}
#write-wrap .process .step {
    width:420px; margin: 0 auto; padding-top: 20px; display: flex; flex-wrap: wrap;  flex-direction: row; align-items: center; justify-content: space-between;
}  
#write-wrap .process .step img {
}
#write-wrap .process .step ul {
    padding-top:20px; 
}
#write-wrap .process .step div {
    width:90px; font-size: 16px; font-weight: 400; color: #c8c8c8; padding-top:10px; 
}
#write-wrap .process .step .on {
    color: #0070bd; font-weight: 500;
}

/* 출입신청-이용약관 */
#write-wrap .agree {
    margin: 30px 0 50px 0; border:solid 1px #c8c8c8; padding: 0 20px;
}
#write-wrap .agree h1 {
    padding: 16px 0; font-size: 16px; font-weight: 300; color: #666666;
}
#write-wrap .agree .form {
    padding: 30px 0; 
}
    #write-wrap .agree h2 {
        font-size: 14px;
        font-weight: 500;
    }
#write-wrap .agree .form .scroll-box {
    border:solid 1px #ededed; background-color: #f7f7f7; margin-top: 10px; padding: 10px 15px; height: 130px; overflow-y: scroll;
}

/* 출입신청-방문신청 */
#write-wrap .write {
    margin: 40px 0px; border:solid 1px #c8c8c8; display:flex;
}
#write-wrap .write table { 
    border: 0px; border-spacing: 0px; 
}
#write-wrap .write th, td {
    font-family: 'Noto Sans KR', 'Nanum Gothic', sans-serif; font-size: 16px; font-weight: 300; color: #666666; height: 60px; text-align: center; 
}
#write-wrap .write .end {
    border-bottom:0px; 
}
#write-wrap .write table th {
    width:100px; background:#f7f7f7; line-height:16px; border-bottom:1px solid #ededed; font-weight: 400;
}
#write-wrap .write table td {
    width: 310px; line-height:16px; text-align: left; border-bottom:1px solid #ededed; 
}
#write-wrap .write table ul {
    line-height:20px; border-bottom:1px solid #ededed; font-weight: 500; 
}
#write-wrap .write table li {
    float: left; 
}
    #write-wrap .write button {
        width: 80px;
        height: 34px;
        border: 0px;
        font-size: 14px;
        color: #0070bd;
        font-weight: 500;
    }
#write-wrap .write p {
    padding: 7px; font-size: 13px; 
}

/* 출입신청-방문신청 검색리스트 */

#write-wrap .write .list {
    background-color: #ffffff; 
}
    #write-wrap .write .list-wrap {
        border: solid 1px #d6d7d9;
        border-radius: 3px;
    }
#write-wrap .write .list-wrap div {
    width: 100%; display: flex; 
}
#write-wrap .write .list-wrap ul {
    width: 100%; height: 38px; text-align: left; border-bottom:1px solid #d6d7d9; background:#f5f5f5; display:flex; align-items:center; justify-content: center; 
}
#write-wrap .write .list-wrap .bg {
    width: 100%; height: 35px; text-align: left; border-bottom:1px solid #d6d7d9; background:#ffffff; display:flex; align-items:center; justify-content: center; 
}

#write-wrap .write .list-wrap li {
    padding: 0px 25px; font-weight: 300; 
}
#write-wrap .write .list-wrap input {
    float: right;
}
#write-wrap .write .list-wrap .team {
    /*width: 70px;*/
}
#write-wrap .write .list-wrap .end {
    border-bottom: 0px; 
}






#write-wrap .write .serch {
    border: solid 1px #c8c8c8; 
}
#write-wrap .write .serch ul {
    border-bottom: solid 1px #c8c8c8; font-family: 'Noto Sans KR', 'Nanum Gothic', sans-serif; font-size: 14px; font-weight: 300; color: #666666; padding:12px 16px; 
}
#write-wrap .write .serch li {
    float: left;
}
#write-wrap .write .btn {
    text-align: center; 
}
    #write-wrap .write .btn-write-serch {
        border: solid 1px #0070bd;
        border-radius: 3px;
        background-color: #ffffff;
    }
#write-wrap .write .btn-write-cal {
    width: 17px; height: 27px; border:0px; background-color: #ffffff; background-image: url('../img/ic_cal.png'); background-repeat: no-repeat; background-position: center; 
}


/* 출입신청-차량정보등록 팝업 */


#popup-wrap {
    width:500px; position:fixed; top:50%; left:50%; margin:-250px 0 0 -250px; z-index:9999; /*display:none;*/
} 
#popup-wrap button { 
    border: none; padding: 0px; text-align: center; 
}
#popup-wrap .btn { 
    font-size: 14px; color:#ffffff; margin-bottom: 50px;
}
#popup-wrap .btn-popup-write {
    width: 100px; height: 36px; background: #00a0e9; 
}
#popup-wrap .popup-header {
    height:50px; background:#0070bd; display:flex; align-items:center; justify-content: center;
}
#popup-wrap .popup-header p {
    text-align: center; font-size: 16px; color:#ffffff; font-weight: 300;  
}
#popup-wrap .popup-header .popup-close {
    width:20px; height:20px; background-image: url('../img/ic_close.png'); background-repeat: no-repeat; background-position: center; float: right; margin-right: 10px; 
}
#popup-wrap .popup-cont01 {
    padding: 30px 15px; display:flex;
}
#popup-wrap .popup-cont01 div {
    margin: 0px 10px;
}
#popup-wrap .popup-cont01 th, td {
    font-size: 14px; font-weight: 300; color: #666666; height: 30px;
}
#popup-wrap .popup-cont01 table { 
    border: 0px; border-spacing: 0px; 
}
#popup-wrap .popup-cont01 th {
    width:85px; line-height:16px; text-align: left; font-weight: 500;
}
#popup-wrap .popup-cont01 td {
    width: 252px; line-height:16px; text-align: left; padding:5px 5px;  
}
#popup-wrap .popup-cont01 span {
    color: #0070bd; font-weight: 500; 
}

#mask {
    width:100%; height:100%; position:fixed; background:rgba(0,0,0,0.7) repeat; top:0; left:0; z-index:999; /*display:none;*/
} 



/* 출입신청-방문신청확인 */
#write-wrap .write-check {
    margin: 40px 0px; border:solid 1px #c8c8c8; display:flex;
}
#write-wrap .write-check table { 
    border: 0px; border-spacing: 0px; 
}
#write-wrap .write-check th, td {
    font-family: 'Noto Sans KR', 'Nanum Gothic', sans-serif; font-size: 14px; font-weight: 300; color: #666666; padding:12px 16px; height: 50px; 
}
#write-wrap .write-check table th {
    width:100px; background:#f7f7f7; line-height:16px; text-align: left; border-bottom:1px solid #ededed; font-weight: 400;
}
#write-wrap .write-check table td {
    width: 300px; line-height:16px; text-align: left; border-bottom:1px solid #ededed;
}
#write-wrap .write-check table ul {
    line-height:20px; border-bottom:1px solid #ededed; font-weight: 500;
}
#write-wrap .write-check table li {
    float: left;
}
#write-wrap .write-check button {
    width: 60px; height: 29px; border:0px; font-size:13px; color:#ffffff; font-weight: 500;  
}
#write-wrap .write-check p {
    padding: 7px; font-size: 14px; 
}
#write-wrap .write-check .serch {
    border: solid 1px  #c8c8c8; 
}
#write-wrap .write-check .end {
    border-bottom:0px; 
}
#write-wrap .write-check .serch ul {
    border-bottom: solid 1px #c8c8c8; font-family: 'Noto Sans KR', 'Nanum Gothic', sans-serif; font-size: 14px; font-weight: 300; color: #666666; padding:12px 16px; 
}
#write-wrap .write-check .serch li {
    float: left;
}
#write-wrap .write-check .btn {
    text-align: center; 
}
#write-wrap .write-check .btn-write-serch {
    background-color: #b6b6b6; 
}
#write-wrap .write-check .btn-write-cal {
    width: 17px; height: 27px; border:0px; background-color: #ffffff; background-image: url('../img/ic_cal.png'); background-repeat: no-repeat; background-position: center; 
}

/* 출입신청-방문자등록 */
#write-wrap .visitor {
    margin: 40px 0px; border:solid 1px #c8c8c8; display:flex;
}

#write-wrap .visitor table { 
    border: 0px; border-spacing: 0px; 
}
#write-wrap .visitor th, td {
    font-family: 'Noto Sans KR', 'Nanum Gothic', sans-serif; font-size: 16px; font-weight: 300; color: #666666; /*padding:12px 16px; */
}
#write-wrap .visitor table th {
    width:100px; background:#f7f7f7; line-height:16px; text-align: center; border-bottom:1px solid #ededed; font-weight: 400;
}
#write-wrap .visitor table td {
    line-height:16px; text-align: left; border-bottom:1px solid #ededed; 
}
#write-wrap .visitor table ul {
    line-height:20px; border-bottom:1px solid #ededed; font-weight: 500;
}
#write-wrap .visitor table li {
    float: left;
}
#write-wrap .visitor button {
    width: 60px; height: 29px; border:0px; font-size:14px; color:#ffffff; font-weight: 500; 
}
#write-wrap .visitor p {
    padding: 7px; font-size: 12px; 
}
#write-wrap .visitor .end {
    border-bottom:0px; 
}
#write-wrap .visitor .serch {
    border: solid 1px  #c8c8c8;
}
#write-wrap .visitor .serch ul {
    border-bottom: solid 1px #c8c8c8; font-family: 'Noto Sans KR', 'Nanum Gothic', sans-serif; font-size: 14px; font-weight: 300; color: #666666; padding:12px 16px; 
}
#write-wrap .visitor .serch li {
    float: left;
}
#write-wrap .visitor .btn {
    text-align: center; 
}
#write-wrap .visitor .btn-visitor-car {
    background-color: #b6b6b6; width: 100px; height: 34px; 
}
    #write-wrap .visitor .btn-visitor-register {
        background-color: #0070bd;
        width: 80px;
        height: 34px;
    }
    #write-wrap .visitor .btn-visitor-kakaoCert {
        background-color: #0070bd;
        width: 120px;
        height: 34px;
    }
.Topbtn > ul > li {
    float: left;
}
.BtnLogOut {
    width: 40px;
    height: 80px;
    background-image: url('../img/ic_logout.png');
    background-position: center;
    background-repeat: no-repeat;
    border-right: 1px solid #e8eaef;
    padding-left: 25px;
}

/* 출입신청-방문자등록리스트 */
#write-wrap .visitor-list a, a:visited { text-decoration:none; cursor:pointer; color:#0070bd;}
#write-wrap .visitor-list a:hover, a:active { text-decoration:none; cursor:pointer; color:#0070bd;}

#write-wrap .visitor-list {
    margin: 40px 0px; /*display:flex;*/
}
#write-wrap .visitor-list table { 
    width: 100%;  border: 0px; border-spacing: 0px; 
}
    #write-wrap .visitor-list thead th {
        border-top: solid 2px #d6d7d9;
        border-spacing: 0px;
        color: #666666;
        height: 55px;
    }
#write-wrap .visitor-list th, td {
    font-family: 'Noto Sans KR', 'Nanum Gothic', sans-serif; font-size: 16px; font-weight: 300; color: #666666; 
}
#write-wrap .visitor-list th {
    background:#f7f7f7; line-height:16px; border-bottom:1px solid #ededed; font-weight: 400;
}
#write-wrap .visitor-list td {
    line-height:16px; border-bottom:1px solid #ededed; 
}

#write-wrap .visitor-list button {
    width: 60px; height: 29px; border:0px; font-size:14px; color:#ffffff; font-weight: 500; 
}
#write-wrap .visitor-list p {
    padding: 7px; font-size: 12px; 
}
#write-wrap .visitor-list .end {
    border-bottom:0px; 
}
#write-wrap .visitor-list .serch {
    border: solid 1px  #c8c8c8;
}
#write-wrap .visitor-list .serch ul {
    border-bottom: solid 1px #c8c8c8; font-family: 'Noto Sans KR', 'Nanum Gothic', sans-serif; font-size: 16px; font-weight: 300; color: #666666; padding:12px 16px; 
}
#write-wrap .visitor-list .serch li {
    float: left;
}
#write-wrap .visitor-list .btn {
    text-align: center; 
}
#write-wrap .visitor-list .btn-visitor-delete {
    color:#0070bd; font-weight: 500;
}

#write-wrap .visitor-list .btn-visitor-car {
    background-color: #b6b6b6; width: 80px; 
}
#write-wrap .visitor-list .check {
    padding: 20px 20px; font-size: 15px; font-weight: 400;
}
#write-wrap .visitor-list .check span {
    color: #0070bd; font-weight: 600;
}


/* 출입신청-방문신청완료 */
#write-wrap .complete {
    margin: 40px 0px; border:solid 1px #c8c8c8; background-color: #f7f7f7; padding: 65px; 
}
#write-wrap .complete .date {
    font-size: 24px; font-weight: 600; 
}
#write-wrap .complete .text {
    font-size: 16px; padding-top: 30px; line-height: 28px;
}
#write-wrap .complete .text span {
    font-weight:500; color: #0070bd;
}

#write-wrap .complete-btn {
     width: 500px; margin: 0 auto; display:flex; padding-left:80px; border:0px; font-size:16px; color:#ffffff; letter-spacing: -0.05em; text-align:center;
}
#write-wrap .complete-btn .btn-complete-write {
    width: 200px; background-color: #00a0e9; margin: 0 5px; height: 42px; display:flex; align-items:center; justify-content: center; border-radius:3px;
}
    #write-wrap .complete-btn .btn-complete-search {
        width: 200px;
        background-color: #0070bd;
        margin: 0 5px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        center;
        border-radius: 3px;
    }


/* 출입신청현황조회 */
#write-wrap .search {
    width:926px; margin: 0 auto; padding: 50px 0 100px 0;
}
#write-wrap .search .btn {
    text-align: center; 
}
#write-wrap .search2 button {
    width: 200px; height: 42px; border:0px; font-size:16px; color:#ffffff; font-weight: 500; 
    margin: 0 4px;
}
#write-wrap .search .btn-write-serch {
    border:solid 1px #0070bd; color:#0070bd;
}
#write-wrap .search .btn-serch {
    font-size: 16px; width:200px; height: 42px; background-color: #0070bd; color:#ffffff; letter-spacing: -0.05em; 
}
#write-wrap .search button {
    width: 80px; height: 34px; border:0px; font-size:14px; color:#ffffff; font-weight: 500; letter-spacing: -0.05em; background-color:ffffff;
}
#write-wrap .search .tit { 
    font-size: 32px; font-weight: 500; color: #666666; letter-spacing: -0.05em; 
}
#write-wrap .search .tit span {
    color: #0070bd;
}
#write-wrap .search .text { 
    font-size: 15px; font-weight: 400; color: #666666;
}
#write-wrap .search .step {
    width:420px; margin: 0 auto; padding-top: 20px; display: flex; flex-wrap: wrap;  flex-direction: row; align-items: center; justify-content: space-between;
}  
#write-wrap .search .step img {
}
#write-wrap .search .step ul {
    padding-top:20px; 
}
#write-wrap .search .step div {
    width:80px; font-size: 14px; font-weight: 500; color: #c8c8c8; padding-top:10px; 
}
#write-wrap .search .step .on {
    color: #0070bd; font-weight: 700; 
}