body { background-color: #f5f5f5; }
.topline { height: 5px; background-color: #1E9FFF; overflow: hidden; }
.topline-danger { background-color: #FF5722; }
.user-card { background-color: #fff; width: 500px; margin: 50px auto; border-radius: 5px; box-shadow: 0 15px 30px #ddd; overflow: hidden; }
.user-card-tit { padding: 15px 30px; background-color: #1E9FFF; color: #fff; font-size: 18px; }
.user-card-tit-danger { background-color: #FF5722; }
.user-card-tit .layui-icon { margin-right: 10px; }
.user-card-body { padding: 30px 30px 15px; }
.user-card-footer { padding: 15px 30px; background-color: #f5f5f5; display: flex; justify-content: space-around; }
.user-card-footer a .layui-icon { margin-right: 10px; }
/* 找回密码 */
.layui-form-group { display: flex; }
.layui-form-group .layui-input { margin-right: 15px; }

/* 会员中心 */
.topmenu { background-color: #fff; border-top: 3px solid #1e9fff; padding: 15px; box-shadow: 0 5px 5px #ddd; }
.topmenu-con { display: flex; justify-content: space-between; }
.user-info { display: flex; }
.user-info a:not(:last-child) { margin-right: 15px; }

.user-container { margin-top: 50px; padding: 0 15px 50px; background-color: #fff; }
.user-menu { padding: 15px 0; }
.user-menu li { position: relative; margin-bottom: 15px; padding: 5px 15px; }
.user-menu li.active:after { position: absolute; top: 0; left: -15px; content: ''; width: 3px; height: 100%; background-color: #1E9FFF; }
.user-menu li.active a { color: #1E9FFF; }

.userinfo-title { font-size: 20px; color: rgba(0, 0, 0, 0.85); margin: 10px 0 15px; }
.vip-user { background-color: #f5f5f5; padding: 15px; border-radius: 5px; }
.userinfo-list-item { display: flex; align-items: center; border-bottom: 1px solid #e8e8e8; padding: 15px 5px; }
.userinfo-list-item:last-child { border: none; }
.userinfo-list-meta { flex: 1; }
.userinfo-list-meta h4 { font-size: 14px; color: rgba(0, 0, 0, 0.65); margin-bottom: 5px; }
.userinfo-list-meta p { color: rgba(0, 0, 0, 0.45) }
.userinfo-list-action { color: #1E9FFF; margin-left: 15px; padding: 0 8px; cursor: pointer; }
.layui-modal-form { padding: 15px; }

.course-box { padding-bottom: 30px; }
.user-course { display: flex; border-bottom: 1px solid #e8e8e8; padding: 15px 0; }
.user-course-cover-img { width: 200px; margin-right: 20px; }
.user-course-cover-img img { max-width: 100%; }
.user-course-info { flex: 1; }
.user-course-info h4 { color: rgba(0, 0, 0, 0.65); margin-bottom: 5px; }
.user-course-info p { color: rgba(0, 0, 0, 0.45); }

/* responsive */
@media screen and (max-width: 768px){
    .user-card { width: 100%; }

    .user-course-cover-img { width: 100px; }
}