@charset "utf-8";

/* 아웃로그인 스킨 */
.ol {position:relative;border:1px solid #dde7e9;margin-bottom:15px;border-radius:3px}
.ol h2 {width:117px;float:left;padding:15px 0;text-align:center}
.ol .join {width:116px;float:left;padding:15px 0;text-align:center;background:#f7f7f7;color:#6e6e6e}
.ol #ol_be_cate:after {display:block;visibility:hidden;clear:both;content:""}
.ol form {padding:20px}
.ol a.btn_admin {display:inline-block;padding:0 10px;height:25px;text-decoration:none;line-height:25px;vertical-align:middle} /* 관리자 전용 버튼 */
.ol a.btn_admin:focus, .ol a.btn_admin:hover {text-decoration:none}
.ol .login-sns{padding-bottom:0px}





#ol_before{position:relative;border:1px solid rgba(71,78,103,0.1);padding:20px;border-radius:7px;box-shadow:4px 5px 6px rgba(0,0,0,0.05);}
#ol_before .ol_wr{position:relative;display:flex;flex-direction:column;gap:10px;--form-height:40px;--form-radius:5px;}
#ol_before .ol_wr input{width:100%;}
#ol_before .ol_wr #ol_idlabel, #ol_before .ol_wr #ol_pwlabel{position:relative;}
#ol_before .ol_wr #ol_idlabel:before, #ol_before .ol_wr #ol_pwlabel:before{content:'';font-family:'intaefont';font-size:13px;color:rgba(71,78,103,0.4);position:absolute;top:0;left:3px;width:30px;height:100%;z-index:6;display:inline-flex;align-items:center;justify-content:center;}
#ol_before .ol_wr #ol_idlabel:before{content:'\e98c';}
#ol_before .ol_wr #ol_pwlabel:before{content:'\e990';font-size:15px;}

#ol_before .ol_wr #ol_idlabel input, #ol_before .ol_wr #ol_pwlabel input{padding-left:34px;}
#ol_before .ol_bottom_wr{margin-top:10px;display:flex;align-items:center;--toggle-light-width:42px;--toggle-light-height:22px;--toggle-light-circle-size:18px;--toggle-light-font-size:12px;}
#ol_before .ol_bottom_wr .chk_box{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:rgba(71,78,103,0.85);}
#ol_before .ol_bottom_wr #ol_svc{margin-left:auto;display:inline-flex;align-items:center;}
#ol_before .ol_bottom_wr #ol_svc > *:not(:first-child):before{content:'·';margin:0 4px;}
#sns_login {margin-top:0 !important;border-top:0 !important}
#sns_login h3 {position:absolute;font-size:0;line-height:0;overflow:hidden}







#ol_after{position:relative;border:1px solid rgba(71,78,103,0.1);background:#fff;border-radius:7px;box-shadow:4px 5px 6px rgba(0,0,0,0.05);border-top:3px solid var(--mainColor);}
#ol_after_hd{position:relative;display:flex;align-items:center;gap:15px;padding:15px;}
#ol_after_hd .profile_img{}
#ol_after_hd .profile_img img{border-radius:50%;width:50px;height:50px}
#ol_after_hd .profile_img a {text-align:center;font-size:17px;width:30px;line-height:30px;color:#777}
#ol_after_hd .mb_con{flex:1;padding-top:5px;display:flex;flex-direction:column;gap:8px;}
#ol_after_hd .mb_con .mb_name{display:flex;align-items:center;font-size:13px;color:rgba(71,78,103,0.85);}
#ol_after_hd .mb_con .mb_name .sv_wrap{font-size:14px;}
#ol_after_hd .mb_con .mb_name .sv_wrap a{font-weight:700;}
#ol_after_hd .btn_admin{position:relative;width:20px;height:20px;border-radius:3px;margin-left:10px;display:inline-flex;align-items:center;justify-content:center;}
#ol_after_hd .btn_admin:before{content:'\e997';font-family:'intaefont';font-size:11px;color:#fff;}
#ol_after_logout{margin-left:auto;height:22px;font-size:12px;border:1px solid rgba(0,0,0,0.4);padding:0 5px;border-radius:3px;display:inline-flex;align-items:center;justify-content:center;}
#ol_after_info {display:inline-block;height:28px;line-height:22px;border:1px solid #d5d9dd;color:#3a8afd;border-radius:2px;padding:2px 5px}
#ol_after_hd .mb_profile{color:rgba(71,78,103,0.9);display:flex;align-items:center;gap:5px;height:20px;font-size:12px;padding:0 5px;border-radius:4px;background:rgba(71,78,103,0.03);}
#ol_after h2 {margin:0;padding:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}







#ol_after_hd .btn_b04 {line-height:23px;padding:0 5px}
#ol_after_private {zoom:1}
#ol_after_private:after {display:block;visibility:hidden;clear:both;content:""}
#ol_after_private li {text-align:left;position:relative;text-align:left}
#ol_after_private li:first-child a {border-left:0}
#ol_after_private a {display:block;color:#465168;line-height:18px;padding:10px 10px 10px 20px}
#ol_after_private a strong {display:inline-block;float:right;max-width:87px;overflow:hidden;white-space:nowrap;text-overflow:clip;color:#3a8afd;padding:0 5px;border-radius:15px;font-size:0.92em}
#ol_after_private a:hover strong {background:#4b8bff}
#ol_after_private li a:hover {color:#4b8bff;background:#f7f7f7}
#ol_after_private li a:hover:after {position:absolute;left:-1px;top:0;width:2px;height:38px;background:#3a8afd;content:""}
#ol_after_private li i {width:25px;color:#8c9eb0;margin-right:5px}
#ol_after_private li:hover i {color:#3a8afd}
#ol_after_private .win_point:hover strong {background:#37bc9b;color:#fff}
#ol_after_private .win_memo:hover strong {background:#8cc152;color:#fff}
#ol_after_private .win_scrap:hover strong {background:#ff8b77;color:#fff}

#ol_after_memo {margin-right:1px}
#ol_after_pt {margin-right:1px}

.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}







#mb_progress{display:flex;align-items:center;gap:15px;padding:11px 15px;background:rgba(71,78,103,0.06);border-top:1px solid rgba(71,78,103,0.05);border-bottom:1px solid rgba(71,78,103,0.05);}
#mb_progress .label{font-size:12px;}
#mb_progress .progressContainer{flex:1;position:relative;height:14px;border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,0.1);}
#mb_progress .progressContainer .barContainer{position:relative;width:100%;border-radius:14px;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;}
#mb_progress .progressContainer .bar{position:relative;height:14px;width:0;border-radius:14px;background:var(--mainColor);border:1px solid rgba(0,0,0,0.1);display:flex;align-items:center;margin-right:auto;}
#mb_progress .progressContainer .msg{font-size:12px;position:absolute;bottom:25px;padding:5px 10px;border-radius:5px;background:rgba(71,78,103,1);color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all .2s ease-in-out;}
#mb_progress .progressContainer .msg:before{content:'';display:inline-flex;width:8px;height:8px;background:rgba(71,78,103,1);transform:rotate(45deg);position:absolute;bottom:-3px;}
#mb_progress .progressContainer:hover .msg{opacity:1;visibility:visible;}

#ol_mb_info{border-bottom:1px solid rgba(0,0,0,0.1);padding:8px 15px;display:flex;align-items:center;font-size:12px;}
#ol_mb_info .mb_lv_info{display:inline-flex;align-items:center;gap:5px;}
#ol_mb_info .mb_lv_info .label{display:inline-flex;align-items:center;gap:4px;}
#ol_mb_info .mb_lv_info .label:before{content:'';width:14px;height:16px;background:url('./img/mb_lv_label.png') no-repeat center / 100%;display:inline-flex;align-items:center;margin-top:-1px;}
#ol_mb_info .mb_point_info{margin-left:auto;display:inline-flex;align-items:center;}
#ol_mb_info .mb_point_info .label{display:inline-flex;align-items:center;gap:4px;}
#ol_mb_info .mb_point_info .label:before{content:'';width:14px;height:14px;background:url('./img/img_gold_point.svg') no-repeat center / 100%;display:inline-flex;align-items:center;margin-top:-1px;}
#ol_mb_info .mb_point_info .val{color:var(--mainColor);height:18px;padding:0 7px;border-radius:16px;display:inline-flex;align-items:center;transition:all .2s ease-in-out;margin-right:-5px;}
#ol_mb_info .mb_point_info:hover .val{background:var(--mainColor);color:#fff;}


#ol_mb_bottom{display:flex;align-items:center;--tip-bg-color:rgba(0,0,0,0.8);}
#ol_mb_bottom li{flex:1;}
#ol_mb_bottom li:not(:first-child){border-left:1px solid rgba(0,0,0,0.1);}
#ol_mb_bottom li > *{width:100%;height:54px;display:inline-flex;align-items:center;justify-content:center;font-size:0;}
#ol_mb_bottom li [class*='icon_']{width:100%;height:54px;font-size:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
#ol_mb_bottom li .icon_memo{background:url('./img/icon_memo.svg') no-repeat center / 20px auto;margin-top:3px;}
#ol_mb_bottom li .icon_stamp:before{content:'\e1ab';font-family:'newfont';font-size:24px;}
#ol_mb_bottom li .icon_scrap:before{content:'\e2da';font-family:'newfont';font-size:26px;}
#ol_mb_bottom li .icon_my:before{content:'\e98e';font-family:'intaefont';font-size:20px;}
#ol_mb_bottom li .myTip.top:before{top:auto;bottom:calc(100% - 10px);right:auto;left:auto;margin-bottom:6px;margin-left:5px;font-size:11px;padding:5px 7px;}
#ol_mb_bottom li .myTip.top:after{border-color:transparent;border-top-color:var(--tip-bg-color);top:auto;bottom:calc(100% - 10px);left:auto;right:auto;margin-left:0;}