﻿
  
  .container{ display:flex;min-height:100vh; justify-content:center; width:1200px; margin:20px auto;}
 .sidebar{  padding:20px; order:-1;  width:200px; }
  .main-content{ flex:1;max-width:800px;padding:20px; }
 .container:has(.sidebar){ justify-content:flex-start;}
  .container:has(.sidebar).main-content{ margin-left:20px;}

.sidebar h2{ font-size:2rem; letter-spacing:2px; color:#EC530A;}


.newCourse{ margin-top:30px;}
.newCourseList>li{ padding:6px; border-bottom:solid 1px #EDEDED;}
.newCourseList>li>a{  margin-right:20px;}
.courseMenus>li,.moreTeacher{font-size:1.1rem; margin-top:20px; font-size:1.2rem; letter-spacing:2px;}
 
.moreTeacher>a{  letter-spacing:2px; color:#2AA3FB;font-size:1.2rem;}
time{ display:inline-block;}




 .topic-list li:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    }
   .topic-list{display: -webkit-flex;display: flex; gap:2rem;width:800px;  margin:0 auto;flex-wrap:wrap;}  
   .topic-list>li{    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);border-radius:10px 10px 0 0;  padding:10px;}  
 article{
     display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(12,1fr); gap:1rem; height:180px; width:100%;
 
    }   
    article>.topic-img{grid-column:1 / span 5; grid-row:1 / span 12;}

 .topic-img img{	 
	 width: 100%;
 
	height:100%;
 
	border-radius:10px 10px 0 0;
	}
 
 article h3{ font-size:16px;grid-column:6 / span 7; grid-row:1 / span 3; text-align:center;}
  article h3>a{ font-size:1.5rem; color:Blue;}
     .feature{ grid-column:6 / span 7; grid-row:4 / span 9;display: -webkit-flex;display: flex;justify-content:space-around; align-items: center; flex-wrap:wrap;}
     .feature>p{ width:100%;font-size:14px; line-height:20px; letter-spacing:2px; margin: 5px;}
     .feature a{ color:Blue;}
      .feature span{ color:red;}
  
                  
                  .teachers{ padding-top:10px;}
             .teachers>a,.teachers>span{ margin-left:20px;}


  /*分页*/
    .fenye{ margin:20px auto; height:32px; width:700px;  text-align:center; line-height:32px;display: -webkit-flex;display: flex; justify-content:space-between;}
  .fenye>li,.test>span{ margin:0 10px;}
  .fenye>li span{ font-size:16px; font-weight:bold; color:Red; padding:5px 10px; background-color:#BFD4FF; border-radius:5px;}
  