@charset "utf-8";

    /*로그인후*/
#main-login2-wrap {}
#main-login2-wrap .login-bottom {display:flex;align-items:center;border-bottom-left-radius:10px;border-bottom-right-radius:10px;height: 55px;border-top: 1px solid #2f3749;background: #21283b;font-size: 0;}
#main-login2-wrap .login-bottom > div {flex:1;text-align:center;}
#main-login2-wrap .login-bottom a {font-size: 12px;color: #9aa4bf;font-family: "a3",sans-serif; padding:12px 15px; border-radius:10px;}
#main-login2-wrap .login-bottom a i {color: #475066;font-size:20px !important;vertical-align:middle;}

#main-login2-wrap .imgsection {margin:0 20px;text-align:center;}
#usr_area_info_pannel {padding:15px;}
#usr_area_info_pannel .mybox { margin-top:20px; }
#usr_area_info_pannel .mybox .mypage { background:#18325d; border: 1px solid #428bca; padding:0 5px; }
#usr_area_info_pannel .mybox .myitem { margin-top: 8px; background:#18325d; border: 1px solid #428bca; padding:0 5px;}
#main-login2-wrap .infosection {flex:1;}
#main-login2-wrap .infosection > div{margin-bottom:12px;}
#main-login2-wrap .infosection > div:last-child{margin-bottom:0;display:flex;}
#main-login2-wrap .info-row {display:flex;align-items:center;}

#main-login2-wrap .info-row > div:first-child{padding-left:0;}
#main-login2-wrap .info-row > div:nth-child(1) {color:var(--type-weak);width:25px;text-align:center;}
#main-login2-wrap .info-row > div:nth-child(2) {flex:1;}
#main-login2-wrap .info-row > div:nth-child(3) {}
#main-login2-wrap .info-row > div:nth-child(4) {width:25px;text-align:right;color:var(--type-weak);}

#main-login2-wrap #usr_area_alarm_pannel {}
#main-login2-wrap .alarm-row {display:flex;padding-left:6px;padding-right:0px;width:100%;}
#main-login2-wrap .alarm-row > div:nth-child(1) {flex:1;text-align:left;}
#main-login2-wrap .alarm-row > div:nth-child(2) {text-align:right;}
#main-login2-wrap .alarm-row i {color:var(--type-weak);}
#main-login2-wrap .alarm_btn{display: inline-block;padding: 0 12px;height: 24px;line-height:24px;color:#fff;font-size:14px;border-radius:10px;margin:0 2px 0 0;background:#21283B;cursor:pointer;}
#main-login2-wrap .btn_active {-webkit-animation: darkback 3s infinite linear;}


.hexagonImg {position: relative;display: inline-block;width:40px;height:44px;line-height:44px;text-align:center;background: url(/img/level_detail_bg.png) no-repeat;
    background-size:40px;vertical-align:top;
}
.hexagonImg > img {width:24px;height:24px;border-radius:8px;}
.hexagonImg .levelnum {position:absolute;bottom:-2px;right:-9px;width:20px;height:23px;background:url(/img/level_bg.png) no-repeat;line-height:23px;color:#ffffff;font-family:"a3",sans-serif;font-size: 11px;}

.hexagonImg2 {position: relative;display: inline-block;width:30px;height:33px;line-height:44px;text-align:center;background: url(/img/level_detail_bg.png) no-repeat;
    background-size:30px;margin-right:12px;vertical-align:top;
}
.hexagonImg2 > img {width:18px;height:18px;border-radius:4px;}
.hexagonImg2 .levelnum {position:absolute;bottom:-2px;right:-9px;width:20px;height:23px;background:url(/img/level_bg.png) no-repeat;line-height:23px;color:#ffffff;font-family:"a3",sans-serif;font-size: 12px;}



/*로그인전*/
#main-login-wrap .login-top {padding:20px; background:#18325d; border-top-left-radius:10px; border-top-right-radius:10px;}
#main-login-wrap .login-top .title {margin: 0 0 15px;font-family: "a3",sans-serif;color: #ffffff;font-size: 15px;}
#main-login-wrap .login-top .inputArea {border: 1px solid #3f485f;border-radius: 10px;overflow: hidden;color:}
#main-login-wrap .login-top .inputArea .id {height:40px;border-bottom: 1px solid #3f485f;}
#main-login-wrap .login-top .inputArea .id .iconfont,
#main-login-wrap .login-top .inputArea .pass .iconfont{font-size:18px; line-height:40px;width:42px;display:inline-block;text-align: center;color: #8e97b1;}
#main-login-wrap .login-top .inputArea input::placeholder {color:#9aa4bf;}

#main-login-wrap .login-top .inputArea .id input,
#main-login-wrap .login-top .inputArea .pass input{width: calc(100% - 60px);background:var(--background-color-gray);border: 0; outline: 0;font-size: 12px;height: 32px;color: #fff;margin-bottom:7px;}
#main-login-wrap .login-top .inputArea i .on {color:#fff;}

#main-login-wrap .login-top #subLogin {cursor: pointer;width: 100%;height: 40px;line-height: 40px;color: #fff;font-size: 16px;border-radius: 10px;background:#21283b; text-align: center;display:block;margin-top:14px;}
#main-login-wrap .login-top #subLogin:hover {background:#2dbb3d; -webkit-animation: darkback 3s infinite linear;}
#main-login-wrap .login-bottom {display:flex;align-items:center; padding:0 15px; border-bottom-left-radius:10px;border-bottom-right-radius:10px;height: 55px;border-top: 1px solid #2f3749;background: #21283b;font-size: 0;}
#main-login-wrap .login-bottom > div {flex:1;text-align:center;}
#main-login-wrap .login-bottom a {font-size: 12px;color: #9aa4bf;font-family: "a3",sans-serif; padding:12px 15px; border-radius:10px;}
#main-login-wrap .login-bottom a i {color: #475066;font-size:20px !important;vertical-align:middle;}
#main-login-wrap .login-bottom a:hover {background:#293249; color:#fff; transition-duration:.5s;}
#main-login-wrap .login-bottom a:hover i {color:#4ff461;  transition-duration:.5s;}

/**/
.tcolor-white { color:#fff; }