@charset "UTF-8";

.login {
    padding: 32px 60px;
}

.login h2 {
    height: 30px;
    color: #fff;
    font-size: 14px;
    padding: 9px 0 0 10px;
    margin: 0 0 15px 0;
    background-color: #0277bd;
    border-radius: 3px 3px 0 0;
    line-height: 14px;
}

.login .col {
    width: calc(50% - 60px);
    float: left;
    margin-bottom: 64px;
    border: 1px solid #bbb;
    border-radius: 5px;
}

.login .col.account {
    float: right;
}

.login h3 {
    font-size: 14px;
    height: 38px;
    padding: 10px 0 0 10px;
    border-bottom: 2px solid #0277bd;
    color: #444;
}

.login .body {
    width: 90%;
    margin: 24px auto;
}

.login table {
    border-collapse: collapse;
    background-color: #eee;
    width: 100%;
}

.login table tr {
    border: 1px solid #bbb;
}

.login table th {
    text-align: right;
    width: 130px;
    font-size: 14px;
    font-weight: normal;
    padding: 8px;
}

.login table td {
    padding: 8px;
}

.login table td input {
    width: 100%;
    height: 24px;
}


.login p {
    color: #777777;
    font-size: 14px;
    line-height: normal;
    margin-top: 32px;
}

.login p.memory {
    text-align: right;
    margin: 8px 0 0 0;
}

.login p.memory input {
    margin-right: 8px;
}

.login p.reminder {
    text-align: right;
    margin: 8px 0 0 0;
}

.login p.reminder a {
    color: #bfb6a8;
    font-size: 12px;
    padding: 0 0 0 10px;
    background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3JpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo5RTUxODU3M0E2NkVFMzExQjc2N0VBMERDNDkzMjM4OCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo5NTkyMzhFQjM5RkQxMUU3OUZFNEQwOUFDM0EyMjA1QyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5NTkyMzhFQTM5RkQxMUU3OUZFNEQwOUFDM0EyMjA1QyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNS41IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6YjJjOTFlYzUtMGE4My00ZmIzLTk2N2QtYzRiMTM5YTBjNDczIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjlFNTE4NTczQTY2RUUzMTFCNzY3RUEwREM0OTMyMzg4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+AKk9OgAAAJ1JREFUeNpi/D+T4QwDA0MlEO9mIAIwAbExEO8C4j1AbEKMBhhwBuJTQLwKiNWI0QACjEAcCsRXgXgmEEsS0gADLECcBsR3gbgdiAUIaYABTiCuAOJ7QFwG4jMxEAf4gVgHiEVZCCj8D8TrgLge6i8GfBp2AHEtEJ9B9xw6OAzE1VAab7CeBWJPILbDpRim4RoQhwCxKdQZeAFAgAEAb5sYik/2YjAAAAAASUVORK5CYII=") no-repeat 0 50%;
    background-size:6px 6px;
}

.login p.sbmt_login {
    text-align: center;
}

.login p.sbmt_login input {
    width: 300px;
    height: 40px;
    background-color: #bfb6a8;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-size: 18px;
}

.login .sbmt_login input:hover {
    background-color: #ccc;
}

.login p.sbmt_fblogin {
    text-align: center;
}

.login p.sbmt_fblogin a {
    width: 300px;
    height: 40px;
    background-color: #3b5998;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-size: 18px;
    display: inline-block;
    text-decoration: none;
    line-height: 40px;
}

.login .sbmt_fblogin a:hover {
    opacity: 0.7;
}

.login div.btn_member {
    border-top: 1px dashed #bbb;
    text-align: center;
    padding: 32px 0 0 0;
}

.login .btn_member .button {
    display: inline-block;
    margin: 10px 0;
    background-color: #51d1da;
    border: 2px solid #51d1da;
    color: #ffffff;
    border-radius: 100px;
    text-decoration: none;
    padding: 14px 37px 12px;
    font-weight: bold;
}

.login .btn_member .button:hover {
    background-color: #ffffff;
    color: #51d1da;
}

.login .btn_member .button.facebook {
    background-color: rgb(59, 89, 152);
    border: 2px solid rgb(59, 89, 152);
}

.login .btn_member .button.facebook:hover {
    background-color: #ffffff;
    color: rgb(59, 89, 152);
}


@media (max-width: 1050px) {
    .login .col {
        float: none;
        width: 100%;
    }
}

@media (max-width: 640px) {
    .login {
        padding: 10px 10px;
    }
}