@charset "UTF-8";
@import "base.css";
@import "layout.css";
@import "login.css";
@import "modal.css";
@import "talert.css";
@import "toastr.min.css";

/** common **/
/* hgroup */
h2{color:#222;font-size:1.125rem;font-weight:700;line-height:1.75rem;}
h3{color:#222;font-size:1rem;font-weight:600;line-height:1.5rem;}

.h2_box{display:flex;flex-direction:column;gap:0.625rem;}
.h2_box > *{text-align:center;}
.h2_box p{color:#666;font-size:0.875rem;line-height:1.25rem;}
.h2_box p.wraning, .h2_box span.wraning{color:#f84646;}
.h2_box .h2_title {font-weight: 600; text-decoration: underline;text-underline-offset: 3px;}

/* color */
.mcolor{color:#3b6fef !important;}

/* font weight */
.f_w500{font-weight:500 !important;}

/* input */
input.warning{border-color:#f84646;}

/* label */
.disabled{pointer-events:none;}

/* id */
.id_check{position:relative;}
.id_check input{padding:0 16px;}
.id_check input:not(:last-child){padding:0 94px 0 16px;}
.id_check input:disabled{color:#999;background:#f5f7fa;}
.id_check button:disabled{color:#BFC9DA;background:#FFF; border-color:#CCCCCC;}
.id_check .btn{position:absolute;top:50%;right:16px;transform:translateY(-50%);padding:0 8px;font-size:0.8125rem;font-weight:500;line-height:1.625rem;}

.auth_check{position:relative;}
.auth_check input:disabled{color:#999;background:#f5f7fa;}
.auth_check .auth_time{position:absolute;top:50%;right:93px;transform:translateY(-50%);padding-left:24px;color:#f84646;font-size:0.75rem;line-height:1.25rem;}
.auth_check .auth_time::before{position:absolute;left:0;top:50%;transform:translateY(-50%);width:20px;height:20px;background:url(../images/icon_clock.png) no-repeat center center;background-size:contain;content:'';}
.auth_check .btn{position:absolute;top:50%;right:16px;transform:translateY(-50%);padding:0 8px;font-size:0.8125rem;font-weight:500;line-height:1.625rem;}
.auth_check .btn:disabled{border-color:#bfc9da;background:#fff;}

/* password */
.pass_check{position:relative;}
.pass_check input{padding:0 62px 0 16px;}
.pass_check .passtype{position:absolute;top:0;right:0;width:52px;height:48px;padding:0;font-size:0;}
.pass_check .passtype.on{background:url(../images/icon_unmask.png) no-repeat center center;background-size:20px;}
.pass_check .passtype.off{background:url(../images/icon_mask.png) no-repeat center center;background-size:20px;}

/* email */
.email_check{position:relative;}
.email_check input{padding:0 16px;}
.email_check.modify input{padding:0 70px 0 16px;}
.email_check input:disabled{color:#999;background:#f5f7fa;}
.email_check .btn{position:absolute;top:50%;right:16px;transform:translateY(-50%);padding:0 8px;font-size:0.8125rem;font-weight:500;line-height:1.625rem;}

/* checkbox */
.checkbox{position:relative;display:block;width:24px;height:24px;}
.checkbox input{position:absolute;left:0;top:0;z-index:-1;opacity:0;}
.checkbox i{display:block;width:24px;height:24px;border-radius:4px;border:1px solid #BFC9DA;}
.checkbox i::after{position:absolute;left:4px;top:0;width:12px;height:7px;margin:7px 0 0 2px;border-bottom:2px solid #E8ECF5;border-left:2px solid #E8ECF5;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);content:'';}
.checkbox input:checked + i{background:#3b6fef;border: 1px solid #3b6fef;}
.checkbox input:checked + i::after{border-color:#fff;}
.checkbox input:disabled + i{background:#f1f1f1;border-color: #f1f1f1;}
.checkbox input:disabled + i::after{border-color:#E3E3E3;}

.agree_box{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;}
.agree_box p{flex:auto;color:#3a3a3a;font-size:0.875rem;text-align:left;line-height:1.375rem;display:flex;align-items:center;gap:0.25rem;}
.agree_box p .t12 {font-size:0.75rem;}
.agree_box p label {font-size:0.875rem;color:#666;line-height:1.25rem;}
.agree_box p span{color:#bababa;}
.agree_box strong{flex:auto;color:#222;font-weight:600;}
.agree_box .arrow{position:relative;width:16px;height:16px;font-size:0;background:#fff;}
.agree_box .arrow::after{position:absolute;left:3px;top:5px;width:6px;height:6px;border-bottom:1px solid #999;border-right:1px solid #999;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);content:'';}

.agree_list{display:flex;flex-direction:column;}
.agree_list li{padding:12px 0;}

.agree_marketing{display:flex;flex-direction:column;gap:0.625rem;padding:16px;border:1px solid #ccc;border-radius:4px;}
.marketing_type{display:flex;flex-direction:column;gap:0.625rem;padding-left:35px;}

.mng_link{position:relative;color:#666666;display: flex;justify-content: space-between;align-items: center;line-height: 20px;}
.mng_link button::after {position:absolute;right: 1px;top: 50%;width: 7px;height: 7px;margin: -6px 0 0 -3px;border-bottom: 1.5px solid #222;border-right: 1.5px solid #222;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);content: '';}
.mng_link label{font-size: 0.875rem;}
.mng_link .toggle {position: relative;display: inline-block;width: 46px;height: 24px;}
.mng_link .toggle input {opacity: 0; width: 0; height: 0;}
.mng_link .slider {position: absolute;cursor: pointer;background-color: #E3E3E3;border-radius: 100px;top: 0;left: 0;right: 0;bottom: 0;transition: background-color 0.3s;}
.mng_link .slider::before {content: "";position: absolute;height: 20px;width: 20px;left: 2px;bottom: 2px;background-color: white;border-radius: 50%;transition: transform 0.3s;}
/* Checked 상태일 때 스타일 변경 */
.mng_link .toggle input:checked+.slider {background-color: #3B6FEF;/* 파란색 배경 */}
.mng_link .toggle input:checked+.slider::before {transform: translateX(22px);/* 오른쪽으로 이동 */}

/* btn */
.btn_box{display:flex;gap:0.5rem;}
.btn{flex:1;color:#666;font-size:1rem;font-weight:600;text-align:center;line-height:2.625rem;border:1px solid #a5afc2;border-radius:4px;background:#fff;}
.btn.blue{color:#fff;border-color:#1a3868;background:#1a3868;}
.btn:disabled{color:#bfc9da;border-color:#e8ecf5;background:#e8ecf5;}
.btn_tlogin{color:#3617ce;border-color:#3617ce;}
.btn_tlogin,.btn_authlogin{display:flex;justify-content:center;align-items:center;gap:0.5rem;}
.btn_tlogin i,.btn_authlogin i{display:inline-block;}
.btn_tlogin i{width:17px;height:18px;background:url(../images/icon_tlogin.png) no-repeat center center;background-size:contain;}
.btn_authlogin i{width:13px;height:20px;background:url(../images/icon_phone.png) no-repeat center center;background-size:contain;}
.btn_slogin{color:#3b6fef;border-color:#3b6fef;}

.btn_slide{position:relative;width:16px;height:16px;font-size:0;}
.btn_slide::before{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-1px 0 0 -4px;border-top:1px solid #999;border-left:1px solid #999;-webkit-transform: rotate(45deg);transform: rotate(45deg);content:'';}
.btn_slide.open::before{margin:-6px 0 0 -4px;-webkit-transform: rotate(-135deg);transform: rotate(-135deg);}

.link_box{display:flex;justify-content:center;gap:0.5rem;}
.link_box .link_text{color:#999;font-size:0.875rem;line-height:1.25rem;text-decoration:underline;text-underline-offset:2px;font-weight: 500;}

/* btn ID복사 */
.copy_box{display:flex;justify-content:center;}
.copy_box .btn{flex:0 0 100px;color:#617089;font-size:0.875rem;font-weight:500;line-height:2.125rem;}

/* dot */
.dot_list{display:flex;flex-direction:column;gap:0.125rem;}
.dot_list li{position:relative;padding-left:7px;font-size:0.75rem;word-break:normal;}
.dot_list li::before{position:absolute;left:0;top:7px;width:3px;height:3px;border-radius:100%;background:#666;content:'';}

/* round box */
.text_box{display:flex;flex-direction:column;gap:0.625rem;padding:16px;color:#666;line-height:1.125rem;text-align:left;word-break:keep-all;word-wrap:break-word;border-radius:12px;background:#f8f8f8;}
.text_box dl{display:flex;flex-direction:column;gap:0.375rem;}
.text_box dt{font-size:0.8125rem;font-weight:500;}
.text_box > p{font-size:0.75rem;}
.text_box > p.alert{color:#95A2B7;}

/* 입력폼 validation */
.value_condition{display:flex;flex-wrap:wrap;justify-content:start;align-items:center;gap:0.375rem;}
.value_condition span{display:flex;justify-content:start;gap:0.125rem;color:#999;font-size:0.75rem;line-height:1rem;}
.value_condition span i{position:relative;display:block;width:20px;height:20px;}
.value_condition span i::after{position:absolute;left:4px;top:0;width:10px;height:5px;margin:5px 0 0 1px;border-bottom:1px solid #999;border-left:1px solid #999;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);content:'';}
.value_condition span.check{color:#3b6fef;}
.value_condition span.check i::after{border-color:#3b6fef;}

.value_condition span.complete{color:#3b6fef;}
.value_condition span.complete{display:flex;align-items:center;gap:0.25rem;font-size:0.75rem;line-height:1rem;}
.value_condition span.complete::before{display:block;width:16px;height:16px;}
.value_condition span.complete::before{background:url(../images/icon_success.png) no-repeat center center;background-size:contain;content:'';}

.validation_box{display:flex;flex-direction:column;gap:0.375rem;}
.complete_text,.warning_text,.question_text,.close{display:flex;align-items:start;gap:0.25rem;font-size:0.75rem;line-height:1rem;}
.complete_text::before,.warning_text::before,.question_text::before,.close::before{flex: 0 0 16px;width:16px;height:16px;}
.complete_text::before{background:url(../images/icon_success.png) no-repeat center center;background-size:contain;content:'';}
.warning_text::before{background:url(../images/icon_error.png) no-repeat center center;background-size:contain;content:'';}
.question_text::before{background:url(../images/icon_question.png) no-repeat center center;background-size:contain;content:'';}
.close::before{background:url(../images/icon_close.png) no-repeat center center;background-size:10px;content:'';}
.complete_text{color:#3b6fef;}
.warning_text{color:#f84646;}
.question_text{color:#666;}

/* alert info */
.alert_info{display:inline-block;position:relative;}
.alert_info span{position:absolute;top:0;left:0;margin-top:-32px;padding:4px 6px;color:#fff;font-size:0.6875rem;line-height:1rem;white-space:nowrap;border-radius:4px;background:#222;}
.alert_info span::before{position:absolute;left:12px;top:100%;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid #222;content:'';}
.alert_info.bottom span{top:100%;margin-top:6px;}
.alert_info.bottom span::before{top:-6px;transform:rotate(180deg);}

/** content **/
/* 회원가입 */
.join_visual{position:relative;gap:0.25rem;height:108.33vw;max-height:27.375rem;}
.join_visual::after{position:absolute;left:0;right:0;bottom:0;height:93.88vw;max-height:350px;background-image:-webkit-image-set(url(../images/join_visual.png) 1x,url(../images/join_visual@2x.png) 2x);background-image:image-set(url(../images/join_visual.png) 1x,url(../images/join_visual@2x.png) 2x);background-repeat:no-repeat;background-position:center bottom;background-size:contain;content:'';}
.join_visual h2{color:#617089;font-size:1.25rem;font-weight:600;line-height:2.125rem;}
.join_visual h2 strong{font-size:1.25rem;}
.join_visual p{color:#95a2b7;font-size:0.9375rem;font-weight:500;}

/* 개인정보 */
.personal_info{display:flex;flex-direction:column;gap:0.75rem;padding:16px;border:1px solid #ccc;border-radius:4px;background:#f5f7fa;}
.personal_info dl{display:flex;justify-content:start;gap:1.5rem;}
.personal_info dt,.personal_info dd,.personal_info dd > p{font-size:0.8125rem;line-height:1.125rem;}
.personal_info dt{flex:0 0 4.5rem;color:#666;font-weight:400;}
.personal_info dd{color:#222;font-weight:500;}

/* 통합 ID 연결 */
.connect_box{padding:16px;border-radius:4px;border:1px solid #ccc;display:flex;flex-direction:column;gap:0.5rem;}
.connect_box dt{display:flex;justify-content:space-between;align-items:center;}
.connect_box dt .agree_box .reject{display:flex;justify-content:start;gap:0.5rem;color:#BABABA;font-size:0.875rem;line-height:1.5rem;}
.connect_box dt .agree_box .reject i{background:url(../images/icon_reject.png) no-repeat center center;background-size:contain;width:24px;height:24px;font-size: 0;}
.connect_box dd{display:flex;flex-direction:column;gap:0.75rem;margin-top:10px;padding-top:10px;border-top:1px solid #E3E3E3;}
.connect_box, p.disabled{color:#BABABA;}
.connect_box .dvn{padding-bottom:10px;border-bottom:1px solid #E3E3E3;}
.connect_box h1 strong {color:#222;font-weight:600;}
.connect_box .dot_list{display:flex;flex-direction:column;gap:0.25rem;}
.connect_box .dot_list li{position:relative;padding-left:22px;font-size:0.88rem;height: 20px;line-height: 20px;color: #666;}
.connect_box .dot_list li::before{position:absolute;left:8px;top:8px;width:3px;height:3px;border-radius:100%;background:#666;content:'';}
.connect_box .servicearea{display:flex;flex-direction:column;gap:0.5rem;}

/* 회원정보변경 -> 회원탈퇴 button */
.drop_box{display:flex;justify-content:center;}
.drop_box a{display:flex;align-items:center;gap:3px;color:#999;font-size:0.75rem;line-height:1.25rem;text-decoration: underline;text-underline-offset:2px;}

/* 회원탈퇴 -> 이용 중인 서비스 */
.service_box{padding:20px;border:1px solid #d2dbee;border-radius:12px;background:#eff5ff;}
.service_box dl{display:flex;justify-content:space-between;align-items:center;font-size:1.125rem;line-height:2rem;}
.service_box dt{display:flex;justify-content:start;align-items:center;gap:6px;font-weight:500;}
.service_box dt::before{width:20px;height:20px;background:url(../images/icon_photo.png) no-repeat center center;background-size:contain;content:'';}
.service_box dd{color:#3b6fef;font-weight:600;}

.service_info{margin-top:10px;padding-top:10px;border-top:1px solid #e1eafe;}
.service_info p{padding:10px 0;font-size:0.9375rem;font-weight:500;line-height:1.375rem;}
.service_list{display:flex;flex-wrap:wrap;gap:0.5rem;}
.service_list li{padding:4px 18px;font-size:0.9375rem;font-weight:600;line-height:1.375rem;border-width:1px;border-style:solid;border-radius:4px;background:#fff;}

.service_article{display:flex;flex-direction:column;gap:0.5rem;padding-top:24px;border-top:1px solid #E3E3E3;}
.service_article .text_box{margin-top: 2px; word-break: normal;}
.service_article .text_box .dot_list{gap: 0.375rem;}
.service_article .text_box .dot_list li{line-height: 1.125rem;}
.service_summary{display:flex;flex-direction:column;gap:10px;padding:16px;line-height:1.125rem;border-radius:4px;background:#F7FAFF; border: 1px solid #DAE0ED;}
.service_summary dt span{padding:4px 16px;font-size:0.8125rem;font-weight:600;border-width:1px;border-style:solid;border-radius:4px;background:#fff;}
.service_summary dd{color:#666;font-size:0.8125rem;}

.sv_viewguard{color:#6997d8;border-color:#6997d8;}
.sv_capshome{color:#4477a7;border-color:#4477a7;}
.sv_capson{color:#36bffa;border-color:#3ab6ea;}
.sv_mycaps{color:#3cc5a2;border-color:#3cc5a2;}
.sv_safetyzone{color:#9093e2;border-color:#9093e2;}

@media screen and (min-width:1024px){
    .connect_box{padding:16px;border-radius:4px;border:1px solid #ccc;display:flex;flex-direction:column;gap:0.5rem;max-height: 264px;overflow-y: auto;}
    .join_visual::after{width:360px;height:350px;max-height:none;left:50%;transform:translateX(-50%);background-image:url(../images/join_visual.png);}
}