@charset "utf-8";
.ol {display:none;text-align:left;overflow-y:auto}

.ol .btn_close {position:absolute;top:0;right:0;width:55px;height:55px;background:none;color:#858285;font-size:16px;border:0;z-index:199999}

.ol_before_wr {position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;background:rgba(0,0,0,0.6);text-align:center;padding:20px}
#ol_before{position:absolute;top:50%;left:50%;width:450px;height:500px;margin-left:-225px;margin-top:-250px;padding:45px;background:#fff;text-align:center}
#ol_before h2{font-size:28px;margin:20px 0;font-size:1.846em}
#ol_before .btn_close{position:absolute;top:0;right:0;width:60px;height:60px;background:#fff;border:0;color: #ccc;font-size: 18px;}
#ol_before .btn_close:hover{color:#666}
#ol_before fieldset {position:relative}
#ol_id {display:block;width:100%}
.ol_idlabel {color:#333;}
#ol_pw {display:block;;width:100%;margin:10px 0}
.ol_pwlabel {color:#333;}
#auto_login {}
#auto_login_label {letter-spacing:-0.1em}
#ol_submit {width:100%;height:52px;font-size:14px;font-weight:900;}
.btn_join{display:block;line-height:52px;width:100%;font-size:14px;margin:5px 0;font-weight:900}
#ol_svc {text-align:center;margin:10px 0 0}
#ol_svc a{display:inline-block;color:#333;margin:0 5px 5px;text-decoration:underline}
#ol_auto {position:relative;margin:20px 0;text-align:left;color:#555}
#ol_auto label {letter-spacing:-0.1em}
#ol_auto input {width:13px;height:13px;vertical-align:bottom} 

#ol_after{position:fixed;top:0;right:0;height:100%;width:300px;background:#2d2f3c;z-index:99999}
#ol_after h2{position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
#ol_after .btn_close {height:76px}
#ol_after_hd{text-align:left;position:relative;padding:20px;padding-left:70px;border-bottom:1px solid #3e4150;line-height:36px}
#ol_after_hd strong {display:block;color:#fff;font-weight:300}
#ol_after_hd .profile_img{display:inline-block;position:absolute;top:20px;left:20px;margin:0 0 10px}
#ol_after_hd .profile_img img{border-radius:50%;width:36px;height:36px;}
#ol_after_info{position:absolute;bottom:-5px;right:-5px;text-align:center;background:#2d2f3c;color:#fff;width:25px;height:25px;line-height:25px;font-size:13px;border-radius:50%}

#ol_after_private {margin:0;padding:0;list-style:none;padding:10px}
#ol_after_private:after {display:block;visibility:hidden;clear:both;content:""}
#ol_after_private li {position:relative;float:left;width:33.33333%;padding:10px}
#ol_after_private a {color:#fff;line-height:20px;display:block;background:#353745;text-align:center;padding:20px 0;position:relative;}
#ol_after_private a:hover{background:#3b3d4d}
#ol_after_private i{display:block;font-size:15px;margin: 5px 0}
#ol_after_private strong{position:absolute;bottom:-10px;left:0;text-align:center;display:block;width:100%}
#ol_after_private strong span{display:inline-block;line-height:20px;background:#;font-size:11px;font-weight:300;background:#ff7853;padding:0 8px;border-radius:30px}
#ol_after_private #ol_after_pt span{background:#13c293}
#ol_after_private #ol_after_memo span{background:#ff3161}

#ol_after_ul{background:#353745;padding:10px 0}
#ol_after_ul i{width:25px}

#ol_after_btn {position:absolute;top:24px;right:60px}
#ol_after_btn a{display:inline-block;padding:0 10px;line-height:30px;vertical-align:top}



@media (max-width: 969px){
    #ol_before{width:80%;margin-left:-40%;}
}