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

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

.main {
    width: 75%;
    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-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: 800px;
    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: 10px;
    border-radius: 10px 10px 0px 0px;
}
.l-head h2{
    margin-left: 20px;
}
.l-body{
    /*margin-top: 20px;*/
    padding: 10px;
    background: #fff;
    border-radius: 0px 0px 10px 10px;
    color: #4E5969;
}

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

.l-top-articles{
    display: flex;
    padding: 10px;
    margin-top: 2px;
    background: #fff;
    height: 150px;
    border-radius: 0px 0px 10px 10px;
}

.l-card{
    display: flex;
    padding: 10px;
    margin-top: 10px;
    background: #fff;
    height: 150px;
    border-radius: 10px 10px 10px 10px;
}

.l-card-pic{
    /*background: #000;*/
    margin-top:15px;
    margin-left: 15px;
    width: 180px;
    height: 120px;
    border-radius: 10px 10px 10px 10px;
}
.l-card-pic img{
    background: #000;
    width: 180px;
    height: 120px;
    border-radius: 10px 10px 10px 10px;
}

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

.l-card-title{
    /*color: #000;*/
}

.l-card-title a{
    color: #000;
}

.l-card-overview{
    color: #4E5969;
}

.l-card-info{
    margin-top: 10px;
    display: flex;
    /*justify-content: space-between;*/
    color:#4E5969;
}

.l-bottom{
    display: flex;
    justify-content: space-around;
    background: #fff;
    border-radius: 10px 10px 10px 10px;
    padding: 10px;
}

.button-abled{
    background: none; /* 移除背景 */
    border: none; /* 移除边框 */
    color: #4E5969; /* 继承父元素的文字颜色 */
    font: inherit; /* 继承父元素的字体 */
    cursor: pointer; /* 设置鼠标悬停时的光标为手形 */
    outline: none; /* 移除轮廓线，通常在按钮聚焦时显示 */
    padding: 0; /* 移除内边距 */
    margin: 0; /* 移除外边距 */
}

.button-disabled{
    background: none; /* 移除背景 */
    border: none; /* 移除边框 */
    color: inherit; /* 继承父元素的文字颜色 */
    font: inherit; /* 继承父元素的字体 */
    cursor: pointer; /* 设置鼠标悬停时的光标为手形 */
    outline: none; /* 移除轮廓线，通常在按钮聚焦时显示 */
    padding: 0; /* 移除内边距 */
    margin: 0; /* 移除外边距 */
    pointer-events: none; /* 禁止所有鼠标事件 */
    cursor: not-allowed; /* 设置光标为禁止的样子 */
    /* 其他样式，例如改变按钮的颜色或透明度来表示它不可用 */
    opacity: 0.5; /* 使按钮半透明 */
}


.rside {
    width: 25%;
    max-width: 350px;
    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;
}


/*中间栏需要加左右边距*/
/*.content {*/
/*    background: #fff;*/
/*    margin: 0px 205px;*/
/*    border-radius: 10px 10px 10px 10px;*/
/*    margin-top: 20px;*/
/*    margin-bottom: 20px;*/
/*}*/

.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; /* 两个盒子之间的小间隔 */
}