@charset "utf-8";


/* ****************** default css ****************** */

/* common css */
@import url("../../common/common.css");
@import url("../category.css");



/* ****************** default css ****************** */
.container { height: 100%; }
.body-container { min-height: calc(100% - 400px); }

.banner-wrap { height: 360px; }
.banner-wrap .banner-text { display: block; table-layout: auto; text-align: center; height: auto; }
.banner-wrap .banner-text .text-area { display: block; width: 100%; margin-top: 170px; }
.banner-wrap .banner-text .text-area h1 { font-size: 45px; line-height: 120px}

.section { position: relative; width: 1200px; margin: 30px auto; height: 100%; padding-bottom: 30px; padding-top: 30px}


/* ****************** 회원가입 스텝1 ****************** */
.step-wrap {width:100%; text-align: center; position:relative; margin-bottom: 50px;}
.step-wrap::before {content: ''; position: absolute; top: 17px; left: 0; width: 100%; height: 15px; background-color: #eceef3}
.step-wrap > li {display: inline-block; margin:0 20px; position: relative;}
/*.step-wrap > li:nth-child(1) {margin-right: 50px; left: 37%}
.step-wrap > li:nth-child(2) {left: 46%}
.step-wrap > li:nth-child(3) {left: 57%}*/
.step-wrap > li:nth-child(3) i.xi-check {font-weight: 600}
.step-wrap > li span.step-num {width: 50px; height: 50px; background-color: #eceef3; font-size: 2rem; border-radius: 50%; display: inline-block; line-height: 50px; font-weight: 600; color: #6b757d; margin-bottom: 10px;}
.step-wrap > li p {font-size: 1.5rem;color: #A2AAB1}
.step-wrap > li.select span.step-num {background-color:#3983bf; color: #fff}
.step-wrap > li.select p {color: #3983bf; font-weight: 600}

.term-area .term-all-check {width: 100%; font-size: 1.4rem; padding: 10px 15px; border: 1px solid #e2e2e2;background-color: #f5f5f5;}
.term-area .term-all-check p {float: left; width: calc(100% - 150px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #2F373E; font-weight: 500;}
.term-area .term-all-check div.check-area {float: right; font-weight: 600;}

.term-area .term {margin: 30px 0}
h3.join-tit {padding: 10px 0 10px 10px; font-size: 1.3rem; position: relative}
h3.join-tit:after {content: ''; position: absolute; top: 18px; left: 0; width: 5px; height: 5px; border-radius: 50%; background-color: #3983bf}
.term-area .term div.term-info {width: 100%; height: 150px; padding: 10px;  border: 1px solid #e5e5e5; overflow-y: auto; font-size: 1.2rem; line-height: 18px; color: #4a4a4a; border-radius: 3px;}
.term-area .term .check-area {text-align: right; margin: 5px 5px 0 0; }


/* ****************** 회원가입 스텝2 ******************  */
.table-wrap.join-form .vertic-table tr th span {color: #ed6c5f; font-size: 1.4rem}
.table-wrap.join-form .vertic-table .input-area { width: 350px;}
.table-wrap.join-form .vertic-table .password-txt, 
.table-wrap.join-form .vertic-table .id-txt {color: #ed6c5f; font-size: 1.3rem; font-weight: 600; line-height: 20px; padding-top: 5px;}
.table-wrap.join-form .vertic-table .success {color: #4e8cd7}
.contact-wrap .input-box.authorize input[type="text"].text-input {width: 310px}

.table-wrap.join-form .vertic-table tbody tr td .input-area {display: inline-block; width: 350px; margin-right: 3px;}   

.table-wrap.join-form .vertic-table tbody tr td .email-form .input-area.email {width: 20%; float: left} 
.table-wrap.join-form .vertic-table tbody tr td .email-form .email-txt {float: left; margin: 6px 5px}
.table-wrap.join-form .vertic-table tbody tr td .email-form .select-box {float: left; width: 20%; margin-right: 5px}

.table-wrap.join-form .vertic-table tbody tr td .address-form .btn-wrap {margin-bottom: 5px}
.table-wrap.join-form .vertic-table tbody tr td .address-form .input-area.address {float: left;}
.table-wrap.join-form .vertic-table tbody tr td .address-form div:nth-child(1) {margin-right: 5px; width: 300px;}
.table-wrap.join-form .vertic-table tbody tr td .address-form div:nth-child(3) {width: 405px} 

.table-wrap.join-form .vertic-table .select-area {margin-top: 5px;}

.btn-wrap.join-btn {line-height: 45px; margin-top: 20px;}
.btn-wrap.join-btn button {min-width: 120px; height: 45px; font-size: 1.4rem; }



/* ****************** 회원가입 스텝2 - 팝업 ****************** */
.list-popup-wrap {width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); position: fixed; z-index: 99; display: none}
.list-popup { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 576px; max-height: 80vh;
    background: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgb(0 0 0 / 15%)}
.list-popup .head {position: relative; padding: 15px 30px; border-bottom: 1px solid #c7c7c7}
.list-popup .head h3 {font-size: 1.6rem;}
.list-popup .head .close-btn {position: absolute; top: 28px; right: 30px;}
.list-popup .foot {padding: 15px 30px}

.tree-wrap { width: 100%; height: 415px; overflow-y: auto; border-bottom: 1px solid #dee3eb; padding: 10px 20px; }
.tree-wrap .tree li { position: relative; padding-top: 8px; }
.tree-wrap .tree li .item { position: relative; padding-left: 20px; }
.tree-wrap .tree > li > .item { margin-left: 5px; font-weight:600; color: #3b5277; font-size:1.35rem }
.tree-wrap .tree ul { position: relative; margin: 0 0 0 1em; padding: 0; list-style: none; }
.tree-wrap .tree ul:before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; border-left: 1px dotted rgba(0, 0, 0, 0.3); }
.tree-wrap .tree ul li { padding-left: 1.5em; }
.tree-wrap .tree ul li:before { content: ""; position: absolute; top: 1em; left: 0; width: 1em; height: 1px; border-top: 1px dotted rgba(0, 0, 0, 0.3); }
.tree-wrap .tree ul li:last-child:before { background-color: white; height: auto; top: 1em;  left: -1px; bottom: 0; }
.tree-wrap .tree ul ul { margin-left: 0.5em; }

.tree-wrap .tree li ul { display: none; }
.tree-wrap .tree li.on > ul { display: block; }
.tree-wrap .tree li > ul > li > .item { color:#5c8ac1; font-weight: 500}
.tree-wrap .tree li ul li ul li .item {color:#424242; font-weight: 300}

.tree-wrap .tree li .checkbox { position: absolute; left: 0; top: 2px; z-index: 1; display: block; }
.tree-wrap .tree li .checkbox .custom-check-input:checked + .custom-check-label { display: block; }
.tree-wrap .tree li .tree-on-off-toggle { display: inline-block; width: 7px; height: 9px; overflow-y: hidden; border: none; background: none; outline: 0; vertical-align: top; position: absolute; z-index: 1; left:1px; top:5px; background: url(../../../img/common/tree_on_off_img.png) no-repeat; background-position: bottom; background-size: 7px; }
.tree-wrap .tree li.on > .item .tree-on-off-toggle { background-position: top; }
.check-input { display: none; }
.check-label { position: relative; height: 16px; width: 16px; display: inline-block;}


/* ****************** 회원가입 스텝3 ******************  */
.confirm-area .table-wrap table.vertic-table tbody tr th {border-bottom: 1px solid #e5e5e5; }
.confirm-area .table-wrap table.vertic-table tbody tr td {border-bottom: 1px solid #e5e5e5;}
.confirm-area .company-info {margin-top: 20px;}


/* 마이페이지 */
.table-wrap.join-form .vertic-table .input-area input[type="password"].text-input.pw-input { margin-bottom: 5px; }