@charset "UTF-8";
#header { margin-bottom: 0; }
#header::after { content: ''; }
#header .navi-left i, #header .navi-right i { color: #424242; }

#sub-header .sub-header-txt { color: #212121; font-weight: 600; }
#sub-header .sub-header-txt .maps_title { margin: 0; }
#sub-header .sub-header-txt:after { content: none; }
#sub-header .join-header-txt { font-size: 3.75rem; font-weight: 300; width: 96rem; height: calc(50% - (3.6rem / 2)); position: absolute; bottom: 0; left: 50%; -moz-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); display: flex; justify-content: center; align-items: center; }

.contain { padding: 0; }

.content { padding-bottom: 0; }
.content .maps_title { display: flex; justify-content: center; align-items: center; width: 100%; font-size: 3.75rem; color: #212121; font-weight: 700; margin: 6.25rem 0; }

.common { font-size: 2.5rem; text-align: center; color: #212121; margin: 0 auto; margin-bottom: 10rem; }
.common h6 { font-size: 2.9rem; font-weight: 400; }
.common h6 + p { color: #424242; margin-bottom: 3rem; }
.common .wrap { width: 48rem; margin: 0 auto; }
.common .input-wrap { display: flex; flex-direction: column; width: 48rem; margin: 0 auto; }
.common .input-wrap label { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; width: 100%; height: 9.5rem; font-size: 3rem; background: #fff; cursor: initial; border: 1px solid #aaa; }
.common .input-wrap label:before { content: ""; position: absolute; left: 0; width: 100%; height: 1px; background: rgba(128, 118, 119, 0.3); z-index: 5; }
.common .input-wrap label i { font-size: 3rem; width: 9rem; }
.common .input-wrap label span { position: absolute; top: auto; left: 4.5rem; z-index: 1; opacity: 1; color: rgba(33, 33, 33, 0.5); }
.common .input-wrap label input { margin: 0; padding: 0; border: none; outline: none; font-style: normal; text-decoration: none; background: none; position: relative; width: 100%; height: 100%; background: transparent; font-size: 3rem; float: right; padding: 0 3rem; }
.common .input-wrap label:not(:first-child) { border-top: none; padding-top: 1px; }
.common .input-wrap label:not(:first-child):before { top: 0; }
.common .input-wrap label:not(:last-child) { border-bottom: none; padding-bottom: 1px; margin-bottom: -1px; }
.common .input-wrap label:not(:last-child):before { top: 0; }
.common .input-wrap label:first-child:before { content: none; }
.common .input-wrap label:last-child { border-top: none; padding-top: 1px; }
.common .input-wrap label:last-child:before { top: 0; }
.common .input-wrap label.key { z-index: 1; }
.common .input-wrap label.key span { z-index: -1; opacity: 0; }
.common .input-wrap label.focus { z-index: 2; padding-top: 0; padding-bottom: 0; border: 1px solid #212121; box-shadow: 0 0 0 1px #212121; }
.common .input-wrap label.focus:before { content: none; }
.common .find { width: 48rem; padding: 4rem 0; overflow: hidden; display: flex; justify-content: flex-end; align-items: center; }
.common .find a { text-decoration: none; color: #212121; font-weight: 400; }
.common .find a:hover { text-decoration: underline; }
.common .find i { width: 0.1rem; height: 2rem; background: #e0e0e0; margin: 0 2rem; }
.common .button { display: flex; justify-content: center; align-items: center; width: 48rem; height: 9rem; margin: 1.5rem auto; background: transparent; font-size: 3rem; cursor: pointer; font-family: inherit; text-align: center; }
.common input.button { background: #f4c413; color: #fff; }
.common a.button { background: #767472; color: #fff; }
.common .sns-login { width: 48rem; margin: 5rem auto; margin-bottom: 0; padding: 0 8rem; }
.common .sns-login h6 { position: relative; z-index: 1; color: #555; font-weight: 700; margin: 0 auto; margin-bottom: 4rem; text-align: center; }
.common .sns-login h6:before { content: ''; position: absolute; top: 50%; left: 50%; z-index: 0; width: 48rem; height: 1px; background: #ddd; transform: translate(-50%, 0); }
.common .sns-login h6 span { position: relative; z-index: 1; display: inline-block; background: #fff; padding: 0 1.5rem; font-size: 3rem; }
.common .sns-login div { width: 100%; height: 8.5rem; cursor: pointer; font-weight: 400; text-align: center; border: 1px solid rgba(0, 0, 0, 0.2); margin-top: 1.5rem; overflow: hidden; }
.common .sns-login a { color: inherit; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
.common .sns-login a i { width: 8.5rem; height: 8.5rem; border-right: 1px solid rgba(0, 0, 0, 0.15); font-size: 6.8rem; display: flex; justify-content: center; align-items: center; }
.common .sns-login a span { width: 23.5rem; display: block; font-size: 2.75rem; }
.common .sns-login .kakao { background: #fee500; color: rgba(0, 0, 0, 0.85); }
.common .sns-login .naver { background: #03c75a; color: #fff; }
.common .sns-login .google { background: #fff; }
.common .sns-login .google i { position: relative; color: transparent; background: url("/images/login/google.svg") no-repeat center/60%; }
.common .sns-login .facebook { background: #3b5998; color: #fff; }

#login { margin-bottom: 10rem; }

#idpw { flex-direction: column; }
#idpw h6 { text-align: left; margin-bottom: 2.25rem; }
#idpw .wrap:first-of-type { margin-bottom: 6rem; }
#idpw .input-wrap { width: 100%; }
#idpw .input-wrap label span { left: 3rem; }
#idpw .input-wrap label input { width: 100%; }
#idpw .input-wrap p.text-box { width: 100%; height: 19.4rem; border: 2px solid #767472; display: flex; justify-content: center; align-items: center; font-size: 2.75rem; color: #424242; }
#idpw .button { width: 100%; }

.common.admin .input-wrap label input { width: 100%; }
.common.admin .input-wrap label span { left: 4.5rem; }

/*배경색 있음*/
#contain_wrap { background: #f5f5f5; overflow: hidden; }

.common { background: #fff; display: flex; margin: 0 auto; margin-bottom: 15%; padding: 9rem 0; }

#joinStep { padding: 0; display: flex; flex-direction: column; justify-content: center; }
#joinStep .wrap { width: 58rem; padding: 6rem; padding-top: 5rem; border: 1px solid #eeeeee; display: flex; flex-direction: column; justify-content: space-between; align-items: center; margin: 0 auto; margin-bottom: 6rem; }
#joinStep .wrap h6 { display: inline-block; width: 100%; font-size: 5rem; line-height: 1.2; font-weight: 600; }
#joinStep .wrap h6 + p { margin: 1rem 0; }
#joinStep .wrap:nth-child(1) h6 { color: #002ac4; }
#joinStep .wrap:nth-child(1) p { font-weight: 400; }
#joinStep .wrap:nth-child(1) li { background: rgba(0, 42, 196, 0.1); color: #0a2793; }
#joinStep .wrap:nth-child(1) .button { background: #002ac4; }
#joinStep .wrap:nth-child(2) h6 { color: #4f8bc7; }
#joinStep .wrap:nth-child(2) li { background: rgba(79, 139, 199, 0.1); color: #416b95; }
#joinStep .wrap:nth-child(2) .button { background: #4f8bc7; }
#joinStep .wrap ul { margin: 1rem 0; }
#joinStep .wrap li { text-align: left; padding: 1rem; margin: 0.5rem 0; }
#joinStep .wrap .button { width: 100%; margin: 0; margin-top: 2rem; color: #fff; }
#joinStep .btnZone { display: flex; justify-content: center; padding-top: 5rem; width: 100%; }
#joinStep .btnZone a, #joinStep .btnZone input { display: inline-flex; justify-content: center; align-items: center; margin: 0; padding: 0; border: none; outline: none; font-style: normal; text-decoration: none; background: none; -moz-border-radius: 0.5em; -webkit-border-radius: 0.5em; border-radius: 0.5em; width: 21rem; height: 9rem; margin: 0 1rem; cursor: pointer; font-size: 2.7rem; line-height: 1.5; text-align: center; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; text-decoration: none; }
#joinStep .btnZone a:hover { color: inherit; }
#joinStep .btnZone .cancel { background: #e0e0e0; color: #222; }
#joinStep .btnZone .cancel:hover { background: lightgray; }
#joinStep .btnZone .promise { background: #09334f; color: #fff; }
#joinStep .btnZone .promise:hover { background: #0e517d; }

#joinStep.joinStep2 { flex-direction: column; text-align: left; line-height: 1.5; }
#joinStep.joinStep2 .wrap { height: auto; }
#joinStep.joinStep2 section { width: 58rem; margin: 5rem auto; }
#joinStep.joinStep2 section .agree_tit { display: flex; justify-content: space-between; align-items: center; }
#joinStep.joinStep2 section h6 { font-size: 3.3rem; font-weight: 600; line-height: 1.5; }
#joinStep.joinStep2 section label { display: inline-flex; justify-content: flex-end; align-items: center; cursor: pointer; }
#joinStep.joinStep2 section input { margin: 1rem; }
#joinStep.joinStep2 .all { border-bottom: 1px solid; margin: 0 auto; padding: 4rem 0; font-size: 2.7rem; text-align: right; }
#joinStep.joinStep2 .agree_box { position: relative; z-index: 1; border: 1px solid #bdbdbd; width: 100%; height: 24rem; margin: 2rem auto; scroll-behavior: smooth; -moz-transition: all, 0.3s; -webkit-transition: all, 0.3s; transition: all, 0.3s; }
#joinStep.joinStep2 .agree_box:before, #joinStep.joinStep2 .agree_box:after { position: absolute; left: 0; z-index: 2; width: 84rem; height: 5%; }
#joinStep.joinStep2 .agree_box:before { top: 0; background: linear-gradient(180deg, #fff, transparent); }
#joinStep.joinStep2 .agree_box:after { bottom: 0; background: linear-gradient(0deg, #fff, transparent); }
#joinStep.joinStep2 .agree_content { position: relative; z-index: 1; width: 100%; height: 100%; padding: 3rem; overflow-x: hidden; overflow-y: scroll; font-size: 2.4rem; color: #424242; }
#joinStep.joinStep2 .agree_content b { font-size: 2.6rem; font-weight: 500; overflow: hidden; }
#joinStep.joinStep2 .agree_content::-webkit-scrollbar { position: relative; width: 2rem; z-index: 2; }
#joinStep.joinStep2 .agree_content::-webkit-scrollbar-thumb { background: #bdbdbd; background-clip: padding-box; border: 0rem solid transparent; }
#joinStep.joinStep2 .agree_content::-webkit-scrollbar-track { background: #f5f5f5; z-index: 1; }
#joinStep.joinStep2 .privacy { width: 100%; padding: 5rem 4.5rem; border-top: 1px solid #e0e0e0; text-align: center; }
#joinStep.joinStep2 .privacy h6 { font-weight: 600; font-size: 3.5rem; margin-bottom: 2rem; color: #000; }
#joinStep.joinStep2 .privacy table { width: 100%; margin: 6rem auto; }
#joinStep.joinStep2 .privacy table tr { border-top: 1px solid #e0e0e0; }
#joinStep.joinStep2 .privacy table th, #joinStep.joinStep2 .privacy table td { padding: 1rem 1rem; }
#joinStep.joinStep2 .privacy table th { text-align: right; }
#joinStep.joinStep2 .privacy table td { font-size: 0; }
#joinStep.joinStep2 .privacy table td input[type="text"] { margin: 0; padding: 0; border: none; outline: none; font-style: normal; text-decoration: none; background: none; width: 100%; height: 6rem; border: 1px solid #bdbdbd; padding: 0 1rem; font-size: 2.5rem; }
#joinStep.joinStep2 .privacy table td select { cursor: pointer; text-decoration: none; width: 100%; height: 100%; width: calc(30% - 1rem); height: 6rem; background: #fff; border: 1px solid #bdbdbd; padding: 0 1rem; margin-left: 1rem; font-size: 2.5rem; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; }
#joinStep.joinStep2 .privacy table td select:first-child { width: 40%; margin: 0; }
#joinStep.joinStep2 .privacy .button { width: 32rem; height: 9rem; font-size: 2.5rem; background: #f4c413; margin: 3rem auto; }

#joinStep.joinStep3 .wrap { width: 100%; border: none; text-align: center; margin: 0 auto; }
#joinStep.joinStep3 .wrap h6 { font-weight: 600; font-size: 3rem; margin-bottom: 4rem; }
#joinStep.joinStep3 .wrap table { width: 100%; margin: 0 auto; line-height: 1.5; }
#joinStep.joinStep3 .wrap table tr { border-top: 1px solid #e0e0e0; }
#joinStep.joinStep3 .wrap table tr:last-child { border-bottom: 1px solid #e0e0e0; }
#joinStep.joinStep3 .wrap table th, #joinStep.joinStep3 .wrap table td { padding: 2rem 2rem; }
#joinStep.joinStep3 .wrap table th { text-align: right; word-break: keep-all; }
#joinStep.joinStep3 .wrap table td { text-align: left; }
#joinStep.joinStep3 .wrap table td input[type="text"], #joinStep.joinStep3 .wrap table td input[type="password"], #joinStep.joinStep3 .wrap table td input[type="tel"], #joinStep.joinStep3 .wrap table td input[type="email"] { margin: 0; padding: 0; border: none; outline: none; font-style: normal; text-decoration: none; background: none; width: 100%; height: 6rem; border: 1px solid #bdbdbd; padding: 0 2rem; font-size: 2.5rem; vertical-align: middle; }
#joinStep.joinStep3 .wrap table td input[type="button"] { height: 6rem; }
#joinStep.joinStep3 .wrap table td input.readonly { background: #eeeeee; }
#joinStep.joinStep3 .wrap table td select { cursor: pointer; text-decoration: none; width: 100%; height: 100%; width: calc(30% - 1rem); height: 6rem; border: 1px solid #bdbdbd; padding: 0 2rem; margin-left: 2rem; font-size: 2.5rem; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; }
#joinStep.joinStep3 .wrap table td select:first-child { width: 40%; margin: 0; }
#joinStep.joinStep3 .wrap table .id input[type="text"] { width: calc(100% - 85px); margin-right: 7px; }
#joinStep.joinStep3 .wrap table .voter td { font-size: 0; }
#joinStep.joinStep3 .wrap table .voter td input[type="text"] { width: calc(100% - 85px); margin-right: 7px; }
#joinStep.joinStep3 .wrap table .voter td input[type="button"] { float: right; margin: 1rem 0; }
#joinStep.joinStep3 .wrap table .voter td a { float: right; }
#joinStep.joinStep3 .wrap table .voter td a input[type="button"] { float: left; margin: 0; }
#joinStep.joinStep3 .wrap table .address td { font-size: 0; }
#joinStep.joinStep3 .wrap table .address td a { float: right; }
#joinStep.joinStep3 .wrap table .address td input[type="button"] { margin-left: 1.8rem; }
#joinStep.joinStep3 .wrap table .address2 input[type="text"] { width: 100%; }
#joinStep.joinStep3 .wrap table .mobile input[type="text"] { width: calc(100% - 85px); margin-right: 7px; }
#joinStep.joinStep3 .wrap table .mobile input[type="button"] { float: right; }
#joinStep.joinStep3 .wrap table .radio label { display: inline-flex; justify-content: center; align-items: center; vertical-align: inherit; margin-right: 3rem; line-height: 1; cursor: pointer; }
#joinStep.joinStep3 .wrap table .radio label input { margin: 0; margin-right: 0.5rem; width: 2.5rem; height: 2.5rem; line-height: 1.5; }
#joinStep.joinStep3 .wrap table .radio.birth .tweight { margin-right: 3rem; }
#joinStep.joinStep3 .wrap table .summary { font-size: 2.3rem; font-weight: 400; margin-left: 2rem; }
#joinStep.joinStep3 .wrap table p.summary { margin-left: 0; margin-top: 2rem; }
#joinStep.joinStep3 .wrap table p.tweight { display: inline; margin-right: 2rem; }
#joinStep.joinStep3 .wrap table #strZipDaum { width: calc(100% - 85px); }
#joinStep.joinStep3 .wrap table #strADDR1Daum { width: 100%; margin-top: 1rem; }
#joinStep.joinStep3 .wrap .button { width: 24rem; height: 5rem; font-size: 2.5rem; }