@charset "utf-8";

/* 아웃로그인 스킨 */
.ol{padding:0;margin:0;}
.ol .ol-card{width:300px;background:#fff;border-radius:8px;padding:24px 15px;box-shadow:0 18px 45px rgba(26,72,255,0.12);}
.ol form{margin:0;}
.ol .ol-field{position:relative;display:flex;align-items:center;border:1px solid #CED4DA;border-radius:4px;height:40px;padding:0 16px 0 40px;margin-bottom:16px;background:#fff; }
.ol .ol-field:focus-within{border-color:#2f67ff;box-shadow:0 0 0 4px rgba(47,103,255,0.12);}
.ol .ol-ico{position:absolute;left:8px;top:50%;transform:translateY(-50%);color:#111;opacity:0.9;display:flex;align-items:center;justify-content:center;}
.ol input[type="text"],.ol input[type="password"]{border:0;outline:0;color:#111;background:#fff !important;}
.ol input::placeholder{color:#b9bec8;font-weight:700;}
.ol .ol-btn{width:100%;height:76px;border:0;border-radius:14px;font-size:30px;font-weight:900;letter-spacing:-0.5px;color:#fff;cursor:pointer;background:linear-gradient(180deg,#3b82ff 0%,#1f56ff 100%);box-shadow:0 18px 25px rgba(37,99,235,0.28);}
.ol .ol-btn:hover{filter:brightness(1.02);}
.ol .ol-btn:active{transform:translateY(1px);}
.ol .ol-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:22px;gap:6px; flex-direction: row;}
.ol .ol-auto{display:flex;align-items:center;gap:6px;}
.ol .ol-auto-text{font-size:15px;font-weight:700;color:#111;letter-spacing:-0.5px;}
.ol .ol-links{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:700;letter-spacing:-0.5px;}
.ol .ol-links a{color:#111;text-decoration:none;}
.ol .ol-links a:hover{text-decoration:underline;}
.ol .ol-bar{opacity:0.45;}
.ol .ol-switch{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden;}
.ol .ol-switch-ui{width:48px;height:28px;border-radius:999px;background:#19a6a0;position:relative;cursor:pointer;box-shadow:inset 0 0 0 2px rgba(0,0,0,0.06);}
.ol .ol-switch-ui:after{content:"";position:absolute;top:5px;left:4px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 10px 18px rgba(0,0,0,0.15);transition:transform .18s ease;}
.ol .ol-switch:checked + .ol-switch-ui{background:#19a6a0;}
.ol .ol-switch:checked + .ol-switch-ui:after{transform:translateX(23px);}

.ol input:-webkit-autofill,
.ol input:-webkit-autofill:hover,
.ol input:-webkit-autofill:focus,
.ol input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px #ffffff inset !important;box-shadow:0 0 0 1000px #ffffff inset !important;-webkit-text-fill-color:#111 !important; }


#ol_before {}
#ol_before:after {display:block;visibility:hidden;clear:both;content:""}
#ol_before .ol_wr {position:relative;margin-bottom:5px}

#ol_submit {width:100%;height:48px;border-radius: 12px;
background: var(--btn-bg, linear-gradient(180deg, #2C7AE5 0%, #225DCC 100%));
box-shadow: 2px 2px 2px 0 rgba(255, 255, 255, 0.50) inset, 4px 4px 5px 0 rgba(197, 192, 249, 0.40);color:#fff;font-weight:bold;font-size:1.167em;border-radius:3px}
#ol_svc {float:right;line-height:20px}
#ol_svc a {display:inline-block;border:1px solid #d5d9dd;color:#3a8afd;border-radius:2px;padding:2px 5px}
#ol_auto {float:left;line-height:20px;margin-top:5px}
#ol_auto label {color:#555;vertical-align:baseline}
#ol_auto input {width:13px;height:13px} 
.ol_auto_wr:after {display:block;visibility:hidden;clear:both;content:""}
#sns_login {margin-top:0 !important;border-top:0 !important}
#sns_login h3 {position:absolute;font-size:0;line-height:0;overflow:hidden}

.ol .ol-after-card{padding:24px 0px;}
.ol .ol-after-hd{margin:0 0 14px;}
.ol .ol-after-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.ol .ol-after-profile{display:flex;align-items:center;gap:10px;min-width:0;}
.ol .ol-avatar{width:44px;height:44px;border-radius:14px;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;background:#f3f6ff;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.06);}
.ol .ol-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.ol .ol-after-user{display:flex;flex-direction:column;gap:2px;min-width:0;}
.ol .ol-after-title{font-size:13px;font-weight:800;color:#6b7280;letter-spacing:-0.5px;line-height:1.2;}
.ol .ol-after-name{font-size:16px;font-weight:900;color:#111;letter-spacing:-0.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ol .ol-after-actions{display:flex;align-items:center;gap:6px;flex:none;}
.ol .ol-chip{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:42px;padding:0 4px;border-radius:6px;border:1px solid #CED4DA;background:#fff;color:#111;text-decoration:none;font-size:12px;font-weight:800;letter-spacing:-0.3px;white-space:nowrap;}
.ol .ol-chip:hover{border-color:#2f67ff;box-shadow:0 0 0 4px rgba(47,103,255,0.12);}
.ol .ol-after-list{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:10px;}
.ol .ol-after-item{margin:0;padding:0;}
.ol .ol-after-link{display:flex;align-items:center;gap:10px;height:44px;padding:0 12px;border:1px solid #CED4DA;border-radius:6px;background:#fff;color:#111;text-decoration:none;}
.ol .ol-after-link:hover{border-color:#2f67ff;box-shadow:0 0 0 4px rgba(47,103,255,0.12);}
.ol .ol-after-ico{width:28px;height:28px;border-radius:10px;background:#f3f6ff;display:flex;align-items:center;justify-content:center;flex:none;}
.ol .ol-after-ico i{font-size:14px;}
.ol .ol-after-label{font-size:14px;font-weight:800;letter-spacing:-0.4px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ol .ol-after-val{font-size:14px;font-weight:900;letter-spacing:-0.4px;color:#111;flex:none;}
.ol .ol-after-ft{margin-top:14px;}
.ol .ol-btn-logout{display: flex;width:100%;height:48px;border-radius: 12px; justify-content: center; align-items: center;
background: var(--btn-bg, linear-gradient(180deg, #2C7AE5 0%, #225DCC 100%));
box-shadow: 2px 2px 2px 0 rgba(255, 255, 255, 0.50) inset, 4px 4px 5px 0 rgba(197, 192, 249, 0.40);color:#fff;font-weight:bold;font-size:1.167em;border-radius:3px}


.selec_chk {position:absolute;top:0;left:0;width:0;height:0;opacity:0;outline:0;z-index:-1;overflow:hidden}
.chk_box {position:relative}
.chk_box input[type="checkbox"] + label {padding-left:20px;color:#676e70}
.chk_box input[type="checkbox"] + label:hover{color:#2172f8}
.chk_box input[type="checkbox"] + label span {position:absolute;top:2px;left:0;width:15px;height:15px;display:block;margin:0;background:#fff;border:1px solid #d0d4df;border-radius:3px}
.chk_box input[type="checkbox"]:checked + label {color:#000}
.chk_box input[type="checkbox"]:checked + label span {background:url(./img/chk.png) no-repeat 50% 50% #3a8afd;border-color:#1471f6;border-radius:3px}

@media (max-width: 768px){
  .ol .ol-card {width: 100%;}
}