* {
    margin: 0;
    /*padding: 0;*/
    /*text-decoration: none;*/
    /*list-style: none;*/
}

body{
    background:#F0EEEE;
    width:100%;
}

.main {
    width: 85%;
    margin: auto;
    /*margin-top: 50px;*/
}

@media (max-width: 1200px) {
    body {
     /*固定页面宽度 */
    width: 1200px;
     /*当页面宽度超出视口时，显示横向滚动条 */
    overflow-x: auto;
  }
  .main {
    width: 100%;
    margin: auto;
    /*margin-top: 50px;*/
}
}

.header, .nav, .container, .footer {
    /*左浮动*/
    float: left;
    /*让他们满浏览器*/
    width: 100%;
}

.header {
    background: #ccc;
    text-align: center;
}

.nav {
    position: fixed;
    justify-content: center;
    top: 0;
    width: 100%;
    height: 50px;
    /*background: #ccc;*/
    /*background-color: #ccc;*/
    text-align: left;
    transition: background-color 0.3s;
}

/* 当导航条改变样式时的类 */
.scrolled-navbar {
  background-color: #fff; /* 改变后的背景颜色 */
}

.nav-container{
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 5px;
}

.nav-container-left{
    /*margin-left: 50px;*/
    width: 80%;
    display: flex;
    align-items: center;
}

.nav-container-left a{
    text-decoration: none;
}



.nav-link{
    color: #fff;
    padding: 10px 20px;
    transition: color 0.3s;
}

.scrolled-left{
    color: #1D2129;
    /*color: #000;*/
}


.nav-container-left a:hover {
    /*background: #bbb;*/
    /*color: #000;*/
}

.container{
/*    width: 800px;*/
/*    margin: auto;*/
/*text-align: center;*/
    display: flex;
    justify-content:center;
}
/*我们让左右两边都固定宽度200*/
.lside {
    float: left;
    width: 65%;
    max-width: 900px;
    background: #F0EEEE;
    /*border-radius: 5px 5px 5px 5px;*/
    margin-top: 0px;
    margin-bottom: 20px;
    margin-right: 20px;
    /*height: 1500px;*/
}

.l-box{
    margin-top: 10px;
}

.l-head{
    background: #fff;
    /*height: 40px;*/
    margin-bottom: 2px;
    padding: 20px;
    border-radius: 10px 10px 0px 0px;
    text-align: center;
}

.l-head p{
    margin-top: 5px;
    color: #4E5969;
}

.l-body{
    /*margin-top: 20px;*/
    padding: 20px;
    background: #fff;
    border-radius: 0px 0px 10px 10px;
    color: #3F4A54;
}

.l-body p{
    margin-left: 20px;
}

.l-body blockquote{
    display: block;
    padding: 16px;
    border-left: 8px solid #dddfe4;
    background: #eef0f4;
}

/* 用富文本编辑器的文章中的图片设置 */
/*figure.image-style-align-center img {*/
/*  width: 99% !important;*/
/*}*/
/*figure.image-style-align-left {*/
/*  float: left;*/
/*  margin-left: 1%;*/
/*  margin-bottom: 1%;*/
/*}*/
/*figure.image-style-align-right {*/
/*  float: right;*/
/*  margin-right: 1%;*/
/*  margin-bottom: 1%;*/
/*}*/

.rside {
    width: 25%;
    max-width: 300px;
    float: left;
    /*background: #F0EEEE;*/
    /*background: #fff;*/
    border-radius: 5px 5px 5px 5px;
    margin-top: 0px;
    margin-bottom: 20px;
    height: 1500px;
}

.r-box{
    margin-top: 10px;
}

.r-head{
    background: #fff;
    /*height: 40px;*/
    margin-bottom: 2px;
    padding: 10px;
    border-radius: 10px 10px 0px 0px;
}
.r-head h2{
    margin-left: 20px;
}
.r-body{
    /*margin-top: 20px;*/
    padding: 10px;
    background: #fff;
    border-radius: 0px 0px 10px 10px;
    color: #4E5969;
}

.r-body p{
    margin-left: 20px;
}

.welcome-box{
    padding: 15px;
    border-radius: 10px 10px 10px 10px;
    background: #fff;
}

.profile-img{
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border-radius: 50%; 
}

.profile-img img{
    border-radius: 50%; 
    height: 80px;
    width: 80px;
}

.welcome-content{
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #4E5969;
}

.welcome-box-b{
    display: flex;
    justify-content: space-around;
}

.box-info{
    color: #4E5969;
}

.action-box{
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
    padding: 10px;
    height: 40px;
    border-radius: 10px 10px 10px 10px;
    background: #fff;
    color: #4E5969;
}

.action-type{
    margin-top: 8px;
}

.action-type img{
    width: 30px;
    height: 30px;
}

.lside, .rside, .content {
    padding: 10px;
}

.footer { 
    /*padding: 10px; */
    background: #fff; 
    text-align: center; 
    /*position:absolute; */
    width:100%; 
    height: 80px; 
    left: 0; 
    bottom: 0; 
} 

/*最后加上当浏览器宽度小于700时，三个栏进行竖排*/
/*@media screen and (max-width: 700px) {*/
/*    .lside, .rside, .content {*/
/*        width: 100%;*/
/*        margin: 0px;*/
/*    }*/
/*}*/

.container_footer {
    margin-top: 10px;
    display: flex;
    width: 100%;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    color: #4E5969;
}

.footer_box {
    /*flex: 1; !* 两个盒子平分空间 *!*/
    margin-right: 20px; /* 两个盒子之间的小间隔 */
}