@charset "utf-8";

/* 로그인 */
.login-area {max-width:470px; }
.login-tab {text-align:center; border-bottom:4px solid #303c95; 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;}
.login-tab ul li a {display:block; color:#333; font-size:18px; line-height:60px;}
.login-tab ul li.active {position:relative; z-index:2; border-color:#303c95;}
.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:#1da4d8; font-weight:500;}
.login-content .group {margin-bottom:8px;}
.login-content .group .input {display:block; width:100%; height:54px; font-size:16px;}
.login-content .links {display:flex; justify-content:space-between; margin-top:14px; font-size:14px; color:#505050; font-weight:500; line-height:1.5em;}
.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 .btn-pack {display:block; width:100%; margin-top:10px;}
.login-content .btn-pack.focus3 {margin-top:20px;}
.login-content .btn-pack.xlarge {font-weight:500;}

/* 약관동의 */
.agree-wrap {margin:0 auto 50px;}
.agree-wrap .group {margin-top:40px;}
.agree-wrap .group:first-child {margin-top:20px;}
.agree-wrap .agree-tit {color:#242424; font-size:15px; font-weight:700; line-height:1.3em; letter-spacing:-.025em;}
.agree-wrap .agree-tit .checkbox label:before {width:20px; height:20px; background:#fff url("../images/member/checkbox.png") 50% 50% no-repeat; border:1px solid #ccc; border-radius:2px;}
.agree-wrap .agree-tit .checkbox input:checked + label:before {background-color:#13579f; border-color:#13579f; background-image:url("../images/member/checkbox_on.png");}
.agree-wrap .group:first-child .agree-tit { color: #fff; background: #272e3a; border-radius: 4px; display: inline-block; padding: 18px 45px 15px;}
.agree-wrap .agree-box {position:relative; max-height:265px; margin-top:17px; padding:16px 20px; border:1px solid #ddd; overflow:auto;}
.agree-wrap .agree-box::-webkit-scrollbar { width: 5px; background: #ddd;}
.agree-wrap .agree-box::-webkit-scrollbar-thumb { background-color: #555; width: 5px; height: 50px; background-clip: padding-box; }
.agree-wrap .agree-box::-webkit-scrollbar-track { background-clip: padding-box; }
.agree-wrap .agree-box::-webkit-scrollbar-button { width: 0;}
.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:500; margin-bottom:0;}
.agree-wrap .agree-box .terms-wrap .sec strong {font-weight:600;}
.terms-wrap {font-weight:400; color:#666; line-height:1.75em; letter-spacing:-.03em;}
.terms-wrap .sec {margin-bottom:40px;}
.terms-wrap .sec h3 {color:#222; font-size:1.1em; font-weight:500; margin-bottom:7px;}
.terms-wrap .sec p {margin-bottom:1em;}
.terms-wrap .sec strong {font-weight:500;}
.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-fx { display: flex; margin-bottom: 100px;}
.join-fx .txtbox { flex: 1 1 auto; min-width: 0; width: 1%; padding-top: 6px; padding-left: 35px; }
.join-fx .txtbox h3 { font-size: 20px; font-weight: 700; letter-spacing: -.025em; color: #242424; line-height: 1.4em; margin-bottom: 12px;}
.join-certi-wrap { position: relative;}
.join-certi-wrap h2 { font-size: 28px; font-weight: 800; letter-spacing: -.025em; color: #333; margin-bottom: 30px;}
.join-certi-wrap .submit-btn { position: absolute; right: 0; top: 10px; margin: 0;}
.join-certi-list { margin-bottom: 50px;}
.join-certi-list li { margin-bottom: 70px; display: flex; align-items: flex-start;}
.join-certi-list li:last-child { margin-bottom: 0; }
.join-certi-list li .txtbox { flex: 1 1 auto; min-width: 0; width: 1%; padding-left: 25px; }
.join-certi-list li .txt p { position: relative; line-height: 1.666em; font-size: 16px; padding-left: 11px;}
.join-certi-list li .txt p::before { content: ""; position: absolute; left: 0; width: 4px; height: 4px; border-radius: 100%; background: #555; top: 11px;}
.join-certi-list li .tit { line-height: 1.3em; font-size: 16px; font-weight: 700; letter-spacing: -.025em; color: #555; margin-bottom: 12px;}
.join-img { display: flex; border: 1px solid #ccc; border-radius: 16px; padding: 40px; flex-wrap: wrap; gap: 40px 0;}
.join-img>div { width: calc(100%/2); text-align: center;}

/* 회원가입 */
.join-form {max-width:100%; margin:0 auto; border-top:2px solid #000; padding: 35px 0; border-bottom: 1px solid #ddd;}
.join-form .required {color:#1da4d8}
.join-form .join-form-txt {color:#2c2c2c; font-weight:400; line-height:1.4em; margin-bottom:12px; text-align: right; font-size: 14px;}
.join-form table {width:100%; border-collapse:collapse; border-spacing:0px;  font-size:16px; line-height:1.5em; letter-spacing:-.03em;  }
.join-form table th {padding:5px 15px; font-weight:700; color:#242424; text-align: left; padding-left: 35px; height: 50px;}
.join-form table td {padding:5px 20px; color:#505050; height: 50px;}
.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 input[readonly] {background-color:#fff; color:#505050;}
.join-form .help-text {display:inline-block; margin-left:10px; color:#767676;}
.join-form + .buttons {margin-top:50px;}
.join-form .date-pr { max-width: 300px; width: 100%; position: relative;}
.join-form .ui-datepicker-trigger { border: none; position: absolute; right: 0; top: 0;}

/* 가입완료 */
.join-complete { display: flex; align-items: flex-start; padding: 50px;}
.join-complete .txtbox { flex: 1 1 auto; min-width: 0; width: 1%; padding-left: 60px; }
.join-complete .txtbox h2 { color: #333; font-size: 40px; font-weight: 800; letter-spacing: -.025em; line-height: 1.2em; margin-bottom: 10px;}
.join-complete .txtbox p { font-size: 16px; }
.join-complete-info { padding: 25px 20px 50px;}
.join-complete .txtbox .sub-btn {width: 200px; }

/* 게정찾기 */
.find-area {max-width:470px; }
.find-tab {text-align:center; border-bottom:4px solid #1da4d8; 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;}
.find-tab ul li a {display:block; color:#333; font-size:18px; line-height:60px;}
.find-tab ul li.active {position:relative; z-index:2; border-color:#1da4d8;}
.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:#1da4d8; font-weight:500;}
.find-content .group {margin-bottom:8px;}
.find-content .group .input {display:block; width:100%; height:54px; font-size:16px;}
.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:500;}
.find-result {text-align:center; padding:34px 42px; color:#505050; font-size:18px; font-weight:300; line-height:1.75em; letter-spacing:-.03em; background:#fafafa; border-top:2px solid #1da4d8; border-bottom:1px solid #ddd;}
.find-result h4 {font-size:22px; font-weight:500; line-height:1.4em; letter-spacing:-.03em; margin-bottom:20px;}
.find-result p:first-child {margin-bottom:10px;}
.find-result .name {color:#1da4d8; font-size:30px; font-weight:700; line-height:1.5em;}

/* 회원탈퇴 */
.leave-box { border: 1px solid #ccc; border-radius: 4px; padding: 12px 15px; margin-bottom: 40px;}

/* 로그인 인증 */
.login-certi { display: flex; margin-bottom: 40px; gap: 20px;}
.login-certi>div { width: calc(100%/2 - 10px); border: 1px solid #ccc; border-radius: 4px; }
.login-ip { display: flex; align-items: center; padding: 20px 50px; justify-content: center;}
.login-ip .txtbox { padding-left: 40px; flex: 1 1 auto; min-width: 0; width: 1%; }
.login-ip .txtbox .ip-number { font-size: 26px; font-weight: 800; letter-spacing: -.025em; line-height: 1.2em; color: #242424; margin-top: 15px;}
.login-ip-complete { padding: 22px 20px;}
.login-phone { display: flex; padding: 25px; border-radius: 4px; border: 1px solid #ccc; gap: 10px; margin-bottom: 40px; justify-content: center; flex-wrap: wrap;}

/* 충전하기 */
.mypage-charge { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 40px;}
.mypage-charge>div { width: calc(100%/2 - 10px); padding: 20px 20px; border-radius: 4px; border: 1px solid #ccc; position: relative;}
.mypage-charge>div.w100 { width: 100%; margin-top: 20px;}
.mypage-charge>div.h300 { height: 350px; }
.mypage-charge>div.h300 .group-button-fx { position: absolute; left: 0; right: 0; margin: auto; bottom: 30px; width: calc(100% - 40px);}
.mypage-charge>div p { position: relative; padding-left: 11px;}
.mypage-charge>div p::before {content: ""; position: absolute; left: 0; top: 11px; width: 3px; height: 3px; border-radius: 100%; background: #555;}
.mypage-charge>div p.af { padding-left: 0; }
.mypage-charge>div p.af::before { display: none; }
.mypage-charge-radio { display: flex; padding: 10px 20px 35px; }
.mypage-charge-radio .item { padding-right: 45px; padding-top: 12px;}
.mypage-charge-radio .item.pd { padding-top: 0; }
.mypage-charge-radio .item:last-child { padding-right: 0; }
.mypage-charge-radio .item p { margin-top: 13px; padding-left: 10px;}
.mypage-txtbox { padding: 20px; margin-bottom: 40px;}
.mypage-txt { margin-bottom: 0 !important; display: flex; align-items: center; gap: 6px; }

/* 1:1문의폼 - 보안코드 */
.captcha { display: flex; align-items: center; gap: 15px; padding: 10px 15px 20px; }
.captcha a{ display: flex; align-items: center;}
.mp-tbl-span { display: flex; align-items: center; justify-content: center; color: #fff !important; text-align: center; width: 70px; height: 30px; margin: auto; border-radius: 4px; font-size: 15px; font-weight: 700; line-height: 1em; }
.mp-tbl-span.blue { background: #13579f;}
.mp-tbl-span.red { background: #f00;}
.mp-tbl .radiobox { width: 80px; height: 30px; border-radius: 4px; border: 1px solid #ccc; margin: auto; display: flex; align-items: center; justify-content: center;font-size: 15px; font-weight: 700; color: #555;}
.mp-tbl .radiobox label:before {content:""; display:inline-block; vertical-align:middle; margin:-.1em 4px 0 0; width:15px; height:15px; background: url(../images/member/chk.png )center no-repeat; background-size: contain; border: none;}
.mp-tbl .radiobox input:checked + label:before {background: url(../images/member/chk-c.png ) center no-repeat;}
.mp-tbl .radiobox.checked { color: #242424; border: 1px solid #13579f;}

/* 발신번호등록 */
.rr-phone-fx { display: flex; align-items: center; padding: 35px 40px; justify-content: space-between;  border: 1px solid #ccc; border-radius: 4px; margin-bottom: 50px;}
.rr-phone-img { display: flex; gap: 50px; flex-wrap: wrap; align-items: flex-start;}
.rr-phone img { display: inline-block; }
.rr-left {width: 65%; padding-right: 25px; display: flex; align-items: center;}
.rr-left .txtbox { padding-left: 20px; }
.rr-left .txtbox p { position: relative; padding-left: 11px;}
.rr-left .txtbox p::before {content: ""; position: absolute; left: 0; top: 11px; width: 3px; height: 3px; border-radius: 100%; background: #555;}
.rr-right { width: 35%; }

/* 자주 묻는 질문 */
.qna { text-align: center; padding-top: 50px; }
.qna h2 { font-size: 40px; font-weight: 800; letter-spacing: -.025em; line-height: 1em; margin-bottom: 20px; color: #333333;}
.qna .mn-sch { max-width: 400px; margin: auto;}
.qna-tab { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 50px 0 25px;}
.qna-tab li {width: auto; background: #f2f2f2; border-radius: 4px; transition: .2s;}
.qna-tab li a { display: flex; align-items: center; justify-content: center; line-height: 1em; font-size: 15px; font-weight: 700; color: #555; padding: 12px 22px; transition: none; }
.qna-tab li:hover { background: #13579f;}
.qna-tab li:hover a { color: #fff; }
.qna-tab li.active { background: #13579f;}
.qna-tab li.active a { color: #fff; }
.faq ul li { border: 1px solid #ccc; margin-bottom: 8px; border-radius: 4px; text-align: left;}
.faq ul li:last-child {margin-bottom:0;}
.faq .tit {color:#555; font-size:15px; font-weight:500; line-height:1.5em; letter-spacing: -.025em; }
.faq .tit a {position:relative; display:flex; align-items:center; padding:14px 20px; transition:none;}
.faq .tit a:after {content:""; position:absolute; right:20px; top:19px; display:inline-block; width:9px; height:9px; border-right:2px solid #575757; border-bottom:2px solid #575757; transform:rotate(45deg);}
.faq .cnt {display:none; position:relative; padding:20px; color:#454545; line-height: 1.5em; font-size: 15px; }
.faq .cnt p { position: relative; padding-left: 8px; line-height: 1.8em; font-weight: 400;}
.faq .cnt p::before { content: ""; position: absolute; left: 0; width: 3px; height: 3px; border-radius: 100%; background: #454545; top: 12px;}
.faq .cnt .buttons {margin-bottom:0;}
.faq li.active {position:relative;}
.faq li.active .tit {background:#f2f2f2;}
.faq li.active .tit a:after {transform:rotate(-135deg); margin-top:3px; border-color:#555;}
.faq .none {padding:70px 0; text-align:center; color:#999;}