body { color: #333; background: url(../img/login-bg.jpg) center bottom no-repeat #f5f5f5; background-size: cover; height: 100%; position: relative; display: flex; flex-direction: column; }
html {height:100%;position:relative; }

.column { flex: 1; margin: 0px auto; width: 100%; padding-bottom: 200px; height: 100%; overflow: hidden; font-size: 14px;  }
.column .container { height: 100%; overflow: hidden }
.column form { display: flex; justify-content: center; align-items: center;height:100%;overflow:hidden;flex-direction:column; }

.login-title{background:url(../img/logo-title.png) no-repeat center;height:100px;width:100%;background-size:auto 60px}
.column .column-02 { position: relative; width: 400px; color: #ddd; background-color: rgba(16, 0, 16, 0.8); height: 360px; box-shadow: 0px 0px 0px rgba(2, 2, 2, 0.5); border-radius: 6px; }
.column .column-02 .header { margin: 30px 0px; position: relative; text-align: center }
.column .column-02 .header span { font-size: 24px; display: inline-block; width: 120px; height: 20px; text-align: center; }

.column .column-02 .nav-tabs li { width: 50% }
.column .column-02 .nav-tabs li a { text-align: center; border-radius: 0px; padding: 12px 0px; margin-right: 0px; }


.column .column-02 ul.input { list-style: none; margin-left: 50px; margin-top: 40px; }
.column .column-02 ul.input li { height: 36px; width: 300px; margin: 15px 0px; line-height: 36px; position: relative; }
.column .column-02 ul.input li.lab-title { height: 12px; width: 260px; margin: 0px 0px; line-height: 12px; position: relative; color: #ddd }
.column .column-02 ul.input li .input-group-addon { padding: 0px; }
.column .column-02 ul.input li .input-group-addon .btn { padding: 6px 10px; border-radius: 0px; border: none; }

.column .column-02 ul.input li input[type='text'] { width: 100%; }
.column .column-02 ul.input li input[type='password'] { width: 100%; }
.column .column-02 ul.input li input.error { border: solid 1px #ff0000; }
.column .column-02 ul.input li label { color: #bbb; vertical-align: middle; font-size: 12px; }
.column .column-02 ul.input li em { line-height: 36px; height: 36px; display: inline-block; padding: 0px 5px; z-index: 200; position: absolute; top: 1px; left: 1px; background-color: #f0f0f0; }

.btn-danger { background-color: #63065f; border-color: #63065f; font-weight: 300; }
.btn-danger:hover { background-color: #5e015a; border-color: #63065f; }

.btn-danger:active, .btn-danger:active:focus { background-color: #5e015a; border-color: #63065f; }
.btn-danger.focus, .btn-danger:focus { background-color: #5e015a; border-color: #63065f; }

.column .column-02 ul li span.error { color: #ff0000; margin-left: 10px; }

.logo-desc { background:url(../img/logo-desc.png) no-repeat center left; background-size:auto 50px;  position: absolute; top: 24px; right: 0px; width: 280px;  display: flex; padding: 0px 8px; align-items: center; overflow: hidden; height: 36px; }
.notice-box { position: absolute; top: 24px; right: 0px; width: 600px; background-color: #fff; display: flex; padding: 0px 8px; align-items: center; overflow: hidden; height: 36px; }
.notice-box img { height: 20px; width: 20px; margin-right: 10px; }
.notice-box .notice-con { flex: 1; }
.swiper-container.notice { height: 36px; overflow: hidden; }
.swiper-container.notice a { height: 36px; line-height: 36px; display: block; }


@media screen and (max-width:767px) {
    .column { padding: 0px 20px!important; background-size: cover !important; }
    .column .column-02 .header { margin: 10px 0px; position: relative; text-align: center }
    .column .column-02 {  width: 100%; padding: 20px; margin-right: 0px; }
    .logo-desc { top: 8px; left: initial; right: 10px; margin-left: 0px; background: url(../img/logo-desc.png) no-repeat center right; background-size: auto 36px; }
    .navbar-toggle{display:none}
    .nav-con .container { display: block; top: 0px; border-top: none; }
    .column .column-02 ul.input { list-style: none; margin-left: 0px; margin-top: 20px; }
    .column .column-02 ul.input li { height: 36px; width: 100%; margin: 20px 0px; line-height: 36px; position: relative; }
    .column .column-02 ul.input li.i1 {  }
    .column .column-02 ul.input li input { width: 100%; }
    .column .column-02 ul.input li input.error { border: solid 1px #ff6a00; }
    .column .column-02 ul.input li label { color: #bbb; position: absolute; z-index: 5; left: 5px; vertical-align: middle; font-size: 12px; }
    .column .column-02 ul.input li em { line-height: 36px; height: 36px; display: inline-block; padding: 0px 5px; z-index: 200; position: absolute; top: 1px; left: 1px; background-color: #f0f0f0; }
    .column .column-02 ul.input li a.btn { width: 100%; padding: 8px 0px; border-radius: 3px; }

    .nav-con .navbar-brand { display: inline-block; background: url(../img/logo.png) no-repeat center; background-size: auto 48px; width: 500px; height: 50px; }

    
    
}

@media screen and (max-width: 500px) {
    .nav-con .navbar-brand { display: inline-block; background: url(../img/logo.png) no-repeat center; background-size: auto 24px; width: 240px; height: 50px; }
    .nav-con .container { display: block;top:0px;border-top:none; }
    .logo-desc { top: 8px; left:initial;right:10px; background: url(../img/logo-desc.png) no-repeat center right;  margin-left: 0px; background-size: auto 26px; }
}
@media screen and (max-width:1366px) {

    .column {  padding-bottom: 40px;  }
}

@media screen and (min-width:768px) { /*pc*/
    .nav-con { position: relative; background-color:rgba(255, 255, 255, 0.50); width: 100%; height: 80px; transition: all 0.5s; box-shadow:none }
}