@charset "utf-8";

/* 로그인 */
.login-area {max-width:470px; margin:0 auto;}
.login-tab {text-align:center; border-bottom:4px solid #203a7b; margin-bottom:50px;}
.login-tab ul {display:flex; padding:0 2px;}
.login-tab ul li {flex:1; border:4px solid #dfdfdf; border-bottom:0; margin:0 -2px; border-radius:10px 10px 0 0;}
.login-tab ul li a {display:block; color:#333; font-size:18px; font-weight:500; line-height:60px;}
.login-tab ul li.active {position:relative; z-index:2; border-color:#203a7b;}
.login-tab ul li.active:after {content:""; position:absolute; left:0; right:0; bottom:-4px; height:4px; background:#fff;}
.login-tab ul li.active a {color:#203a7b; font-weight:700;}
.login-content .group {margin-bottom:8px;}
.login-content .group .input {display:block; width:100%; height:54px; font-size:16px; border-radius: 6px; }
.login-content .links {display:flex; justify-content:space-between; margin-top:14px; font-size:14px; color:#878787; font-weight:400; line-height:1.5em; margin-bottom: 30px; letter-spacing: -.04em;}
.login-content .links a:hover {text-decoration:underline;}
.login-content .links .bar {display:inline-block; vertical-align:middle; margin:-.2em 12px 0; width:1px; height:16px; background:#ddd;}
.login-content .links .save { color: #505050; }
.login-content .links .checkbox label:before { border-radius: 4px;}
.login-content .links .checkbox input:checked + label:before { background-color: #fdbe19; border-color: #fdbe19;}
.login-content .btn-pack {display:block; width:100%; margin-top:10px;}
.login-content .btn-pack.focus {margin-top:20px; font-weight: 600; border-radius: 6px;}
.login-content .btn-pack.xlarge {font-weight:600; border-radius: 6px;}

.sns-login {text-align:center; margin-top:50px;}
.sns-login .tit {position:relative; color:#333; font-size:15px; font-weight:400; line-height:1.3em; margin-bottom:35px;}
.sns-login .tit:before {content:""; position:absolute; top:50%; left:0; margin-top:-1px; width:100%; height:1px; background:#ddd;}
.sns-login .tit span {display:inline-block; position:relative; padding:0 30px; background:#fff;}
.sns-login a {margin:0 12px;}

/* 약관동의 */
.agree-wrap {max-width:680px; margin:0 auto 50px;}
.agree-wrap .group {margin-top:40px;}
.agree-wrap .group:first-child {margin-top:0;}
.agree-wrap .agree-tit {color:#333; font-size:20px; font-weight:600; line-height:1.3em;}
.agree-wrap .agree-tit .checkbox label:before {margin-top:-.02em; width:24px; height:24px; background:#fff url("../images/member/checkbox.png") 50% 50% no-repeat; border:2px solid #ccc; border-radius:100%;}
.agree-wrap .agree-tit .checkbox input:checked + label:before {background-color:#fdbe19; border-color:#fdbe19; background-image:url("/images/member/checkbox_on.png");}
.agree-wrap .agree-box {position:relative; max-height:175px; margin-top:17px; padding:16px 20px; border:1px solid #ddd; overflow:auto; border-radius: 6px;  }
.agree-wrap .agree-box .terms-wrap {color:#767676; font-size:14px;}
.agree-wrap .agree-box .terms-wrap .sec {margin-bottom:20px;}
.agree-wrap .agree-box .terms-wrap .sec h3 {color:#767676; font-size:14px; font-weight:400; margin-bottom:0;}
.agree-wrap .agree-box .terms-wrap .sec strong {font-weight:400;}

.terms-wrap {font-weight:400; color:#666; line-height:1.75em;}
.terms-wrap .sec {margin-bottom:40px;}
.terms-wrap .sec h3 {color:#222; font-size:1.1em; font-weight:700; margin-bottom:7px;}
.terms-wrap .sec p {margin-bottom:1em;}
.terms-wrap .sec strong {font-weight:700;}
.terms-wrap .sec ol li {padding-left:1em; text-indent:-1em;}
.terms-wrap .sec ol li ol li {padding-left:1.35em; text-indent:-1.35em;}
.terms-wrap .policy-contact {display:flex; padding:20px 0; background:#fafafa; border:1px solid #e5e5e5; margin-bottom:1em;}
.terms-wrap .policy-contact dl {flex:1; padding:0 20px; border-left:1px solid #e5e5e5;}
.terms-wrap .policy-contact dl:first-child {border-left:0;}
.terms-wrap .policy-contact dt {font-weight:500; color:#333; margin-bottom:12px;}

/* 회원가입 */
.join-form.mg { margin-top: 100px; }
.join-form.w100 { max-width: 100%;}
.join-form h2 { font-size: 30px; font-weight: 600; letter-spacing: -.04em; line-height: 1em; color: #222; margin-bottom: 28px; justify-content: space-between; display: flex; align-items: flex-end;}
.join-form h2.fx { display: block; }
.join-form h2.fx .checkbox { font-size: 15px; color: #505050; font-weight: 300; margin-left: 40px;}
.join-form h2.fx .checkbox label:before { border-radius: 4px;}
.join-form h2.fx .checkbox input:checked + label:before { background-color: #fdbe19; border-color: #fdbe19;}
.join-form h2 a { width: 228px; height: 48px; border-radius: 24px; border: 1px solid #203a7b; display: flex; align-items: center; position: relative; padding-left: 20px; font-size: 16px; font-weight: 500; letter-spacing: -.04em; line-height: 1.2em; color: #203a7b; }
.join-form h2 a::after { content: ""; position: absolute; right: 20px; top: 0; bottom: 0; margin: auto; width: 16px; height: 16px; background: url(../images/member/mem-download.png) center no-repeat; background-size: contain;}
.join-form .required {color:#fdbe19}
.join-form .join-form-txt {color:#505050; font-weight:400; line-height:1.4em; margin-bottom:12px;}
.join-form table {width:100%; border-collapse:collapse; border-spacing:0px; border-top:2px solid #787878; font-size:16px; line-height:1.5em;}
.join-form.w100 table { border-top: 2px solid #242424;}
.join-form table th {padding:12px 10px; font-weight:600; color:#222; text-align: left; background: #f9f9f9; padding-left: 50px; height: 84px;}
.join-form table tr { border-bottom: 1px solid #ddd;}
.join-form table td {padding:12px 40px; color:#505050; height: 84px; }
.join-form tr th:first-child,
.join-form tr td:first-child {border-left:0;}
.join-form tr th:last-child,
.join-form tr td:last-child {border-right:0;}
.join-form table td .input { border-radius: 6px;}
.join-form table td select { font-size: 15px; color: #a8a8a8; }
.join-form input[readonly] {background-color:#fff; color:#505050;}
.join-form .help-text {display:inline-block; margin-left:30px; color:#a8a8a8; font-size: 14px;}
.join-form + .buttons {margin-top:50px;}
.join-form .input.datepicker2 { background-image: url(../images/member/mem-datepicker.png);}
.join-form .item { padding-right: 40px; }
.join-form .item:last-child { padding-right: 0; }
.join-form .item .checkbox label:before { border-radius: 4px;}
.join-form .item .checkbox input:checked + label:before { background-color: #fdbe19; border-color: #fdbe19;}
.join-form .http { font-size: 15px; color: #a8a8a8; padding-right: 13px; }
.join-form .file-fx { display: flex; align-items: center; margin-bottom: 10px; }
.join-form .file-fx strong { width: 160px; display: inline-block; font-size: 15px; font-weight: 400; letter-spacing: -.04em; color: #505050;}
.join-form .file-upload {display:flex; height:44px; flex: 1 1 auto; min-width: 0; width: 1%; gap: 10px; }
.join-form .file-button {display:flex; justify-content:center; align-items:center; height:100%; padding:0 15px; border:0; border-radius:6px; background:#203a7b; color:#fff; cursor:pointer; transition: .2s;}
.join-form .file-button:hover {background:#fdbe19;}
.join-form .file-name {flex:1 1 auto; min-width:0; width:1%; display:flex; align-items:center; height:100%; padding:0 14px; border:1px solid #ddd; border-radius: 6px; font-size: 15px;}
.join-form table tr td p { font-size: 15px; font-weight: 300; letter-spacing: -.04em; color: #a8a8a8; margin-top: 18px;}
.leave-fx { display: flex; justify-content: flex-end;}
.leave-txt { font-weight: 400; color: #fff; margin-top: 20px; display: inline-block; text-align: right; padding: 10px 20px; background: #203a7b; border-radius: 4px;}

/* 가입완료 */
.join-complete {text-align:center;}
.join-complete .tit {color:#203a7b; font-size:28px; font-weight:700; line-height:1.4em; margin-bottom:30px;}
.join-complete .txt {color:#333; font-size:18px; line-height:1.8em;}
.join-complete .icon {width:180px; height:180px; background:#203a7b url("../images/member/complete.png") 50% 50% no-repeat; border-radius:100%; margin:36px auto 45px;}
.join-complete .buttons {margin:0;}

/* 게정찾기 */
.find-area {max-width:470px; margin:0 auto;}
.find-tab {text-align:center; border-bottom:4px solid #203a7b; margin-bottom:50px;}
.find-tab ul {display:flex; padding:0 2px;}
.find-tab ul li {flex:1; border:4px solid #dfdfdf; border-bottom:0; margin:0 -2px; border-radius:10px 10px 0 0;}
.find-tab ul li a {display:block; color:#333; font-size:18px; font-weight:500; line-height:60px;}
.find-tab ul li.active {position:relative; z-index:2; border-color:#203a7b;}
.find-tab ul li.active:after {content:""; position:absolute; left:0; right:0; bottom:-4px; height:4px; background:#fff;}
.find-tab ul li.active a {color:#203a7b; font-weight:700;}
.find-content .group {margin-bottom:8px;}
.find-content .group .input {display:block; width:100%; height:54px; font-size:16px; border-radius: 6px;}
.find-content .buttons .cen { display: flex; gap: 5px; }
.find-content .buttons .cen .focus { margin-top: 0;}
.find-content .btn-pack {display:block; width:100%; margin-top:10px;}
.find-content .btn-pack.focus {margin-top:30px;}
.find-content .btn-pack.xlarge {font-weight:600; border-radius: 6px;}
.find-result {text-align:center; padding:34px 42px; color:#505050; font-size:18px; font-weight:400; line-height:1.75em; background:#fafafa; border-top:2px solid #dfdfdf; border-bottom:1px solid #ddd;}
.find-result h4 {font-size:22px; font-weight:700; line-height:1.4em; margin-bottom:20px; color: #203a7b;}
.find-result p:first-child {margin-bottom:10px;}
.find-result .name {color:#203a7b; font-size:30px; font-weight:700; line-height:1.5em;}

/* 회원탈퇴 */
.member-leave .txt {text-align:center; color:#505050; line-height:1.7em; margin-bottom:40px;}
.member-leave .txt .tit {color:#333; font-size:20px; line-height:1.5em; margin-bottom:15px;}
.member-leave .form {max-width:470px; margin:0 auto 40px; padding:50px; color:#666; font-size:16px; line-height:1.5em; background:#f9f9f9; border:1px solid #e5e5e5; border-radius:10px;}
.member-leave .form .group {display:flex; align-items:center; margin-bottom:20px;}
.member-leave .form .group:last-child {margin-bottom:0;}
.member-leave .form .group .label-tt {width:90px; color:#222; font-weight:700;}
.member-leave .form .group .text-id,
.member-leave .form .group .input {flex:1 1 auto; min-width:0; width:1%;}

/* 회원가입 종류 */
.kind-wrap {display: flex; margin-top: 40px;}
.kind-tit { display: flex; align-items: center; gap: 0 20px; margin-bottom: 25px; line-height: 1.5em; font-size: 20px; font-weight: 600; color: #222; flex-wrap: wrap;}
.kind-tit span { font-size: 15px; font-weight: 300; letter-spacing: -.03em;}
.kind-wrap .left { width: 26%; padding-right: 40px; border-right: 1px solid #ddd;}
.kind-wrap .left .box { margin-bottom: 10px; }
.kind-wrap .left .box:last-child { margin-bottom: 0; }
.kind-wrap .left .box:last-child h4 { margin-top: 0;}
.kind-wrap .right { width: 74%; padding-left: 40px; }
.kind-wrap .box { border: 1px solid #ddd; border-radius: 12px; text-align: center; }
.kind-wrap .box a { padding: 20px 10px; display: block; }
.kind-wrap .box h4 { font-size: 18px; font-weight: 500; letter-spacing: -.03em; color: #222; line-height: 1.3em; margin:10px 0 14px;}
.kind-wrap .box p { font-size: 15px; line-height: 1.5em; font-weight: 300; letter-spacing: -.04em; color: #787878; margin-bottom: 10px;}
.kind-wrap .box p:last-child { margin-bottom: 0;}
.kind-wrap .box-wrap {display: flex; gap: 18px; flex-wrap: wrap;}
.kind-wrap .box-wrap .box { width: calc(100%/3 - 12px); }
.kind-wrap .box-wrap .box a { padding: 50px 10px;}