/*公有部分*/
.h2{ width:100%; border-bottom:solid 2px lime; position:relative; font-size:1rem; height:20px;}
.h2:after{ width:6rem; height:2px; background-color:red; position:absolute;bottom:-2px; left:0px; position:absolute; content:"";}


/*整体布局*/
 
main{width:1200px; margin:0 auto;display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap:1rem;
            
        }
 
 .special-subject,.employ-a-tutor,.menu-nav-wrap,.teachers-students,.tutor-news{
  	border-radius:10px;  padding:12px; 
 	box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1);
    box-sizing: border-box;
    }
 
 
 
.breadcrumbs{grid-row:1;  grid-column: 1 / span 12; font-size:14px; color:#777777;display: -webkit-flex;display: flex; margin:0; padding:10px 0 0 0;}
.breadcrumbs>li{ position:relative; margin-right:15px;}
.breadcrumbs>li:not(:last-child):after{ position:absolute; content:"/"; padding:0 5px; top:1px;}
.special-subject{grid-row:2;  grid-column: 1 / span 12;}


.employ-a-tutor{grid-row:3;  grid-column: 1 / span 12;}

.menu-nav-wrap{grid-row:4;  grid-column: 1 / span 5;display: grid;grid-template-rows: 20px 1fr;}
.teachers-students{grid-row:4;  grid-column: 6 / span 7; display: -webkit-flex;display: flex;flex-direction:column;justify-content:space-between; flex-wrap:wrap;} 
.tutor-news{grid-row:5;  grid-column: 1 / span 12;  }


/*大图展示*/
 
 .special-subject{display: -webkit-flex;display: flex;align-items: center; justify-content:space-between; width:1200px; margin:0 auto;}
 
 .special-subject>figure{ height:260px;width:72%;position:relative;}
  .special-subject>figure img{width:100%; height:260px;  border-radius:8px;}
  
  .teachers-students>figure{width:100%;position:relative; margin:15px auto;}
 .teachers-students >figure img{width:100%; height:auto;  border-radius:8px; }
 .special-subject>figure>figcaption, .teachers-students>figure>figcaption{border-radius:0 0 8px 8px; position:absolute; display:inline-block; width:100%; height:25px; line-height:25px; text-indent:5px;
	                         z-index:100;  
	                         text-align:left; left:0; bottom:0; font-size:16px; padding:5px 0; letter-spacing:1px; color:White;    
                                background: -webkit-linear-gradient(bottom,rgba(0,0,0,0),rgba(0,0,0,0.7)); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(up, rgba(0,0,0,0),rgba(0,0,0,0.7)); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(up,rgba(0,0,0,0),rgba(0,0,0,0.7)); /* Firefox 3.6 - 15 */
    background: linear-gradient( rgba(0,0,0,0),rgba(0,0,0,0.7)); /* 标准的语法（必须放在最后）   背景色透明且渐变*/

}  
 .special-subject>figure>figcaption a,.teachers-students>figure>figcaption a{ color:White;}
.special-subject>ul{display: -webkit-flex;display: flex;align-items: flex-start; flex-wrap:wrap;width:380px; height:260px; padding-left:1rem; }
.special-subject>ul li{ position:relative; padding:0 10px; line-height:25px; letter-spacing:2px; display:inline-block; width:100%;font-size:14px; color:#555555; }
.special-subject>ul li a{overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.special-subject>ul li a:hover{ color:BlueViolet;}
  
.special-subject>ul li a:before{ top:7px; left:3px; position:absolute; border-left:solid 5px #20C1FF; content:""; border-top:solid 5px transparent;border-bottom:solid 5px transparent; z-index:99;}
.special-subject>ul li  a:hover:before{border-left:solid 5px red; }







 /*找家教 做家教*/
.employ-a-tutor{display: -webkit-flex;display: flex; justify-content: space-between; align-items: center; }
.employ-a-tutor dl dt,.employ-a-tutor dl dd{ border:solid 1px #E8FFD4;}
.employ-a-tutor dl{display: grid;grid-template-columns: repeat(6, 1fr);grid-template-rows: repeat(5, 1fr);gap:5px; width:560px;height:120px; }
.employ-a-tutor dl dt{grid-row:1/span 5;  grid-column: 1/span 2;font-size:50px; display:block; text-align:center;  letter-spacing:3px;  background-color:#D7FFBA; color:#D72FEE;}
.employ-a-tutor dl dd:nth-of-type(1){grid-row:1;  grid-column: 3/span 4; text-align:center;}
.employ-a-tutor dl dd:nth-of-type(2){grid-row:2/span 4;  grid-column: 3;}
.employ-a-tutor dl dd:nth-of-type(2) img{ width:100%; height:auto;}
.employ-a-tutor dl dd:nth-of-type(3){grid-row:2/span 4;  grid-column: 4/span 3;display: -webkit-flex;display: flex; justify-content: center; align-items: center;flex-wrap:wrap;}

/*左侧导航*/
.menu-nav-wrap>.h2{grid-row:1;}
.tutor-menu{grid-row:2; }
 .menu-nav-wrap h3{  text-align:left;margin:20px 0 10px 0;}
 .menu-nav-wrap ul{width:100%;display: -webkit-flex;display: flex;align-items: center; flex-wrap:wrap; margin:10px 0;}


 .tutor-menu>ul{  height:100%;}
 .tutor-menu>ul>li{width:100%;}
 
 .group{ width:100%;display: -webkit-flex;display: flex;align-items: center; flex-wrap:wrap; }
.group li{ margin:5px 8px; }



.subtitle{ width:25%; padding:5px; text-align:center; color:Red; font-weight:bold; position:relative; }
/*.subtitle:before {
		content:"";
		width: 50px;
		height: 40px;
		text-align: center;
         line-height:40px;
		background-image: url(http://mym.100hsl.com/file/jiajiaozt/big/374886399167391.png);
		background-repeat: no-repeat;
		position: absolute;
		top: -10px;
		color: red;
		left:-55px;
		 border:solid 1px blue;
	}
*/
/*老师与学员*/

.teachers-students-container{display: -webkit-flex;display: flex;align-items: center; justify-content:space-between;flex-wrap:wrap;}
 
 
 
.teachers-students-container>li{width:100%; padding-left:5px;  height:42px; line-height:42px;   font-size:14px; position:relative;}
.teachers-students-container>li:not(:last-child){border-bottom:dashed 1px #DCDCDC;}
.teachers-students-container>li:hover{ background-color:#D3FFB3;}

.teachers-students-container>li:before{ top:15px; left:5px; position:absolute; border-left:solid 5px #20C1FF; content:""; border-top:solid 5px transparent;border-bottom:solid 5px transparent; z-index:99;}
 .teachers-students-container>li:hover:before{border-left:solid 5px red; }

 .teachers-students-container>li>a>span{ margin-left:10px;display:inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
 .teachers-students-container>li>a>span:nth-child(1){ width:120px;}
 .teachers-students-container>li>a>span:nth-child(2){ width:160px;}
 .teachers-students-container>li>a>span:nth-child(3){ width:190px;}
 .teachers-students-container>li>a>span:nth-child(4){ width:80px; }
  

 .teachers-students-container>li a:hover:before{ border-left:solid 5px red;}

 .teachers-students-container>li>a>span{overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }



 

  .students>li>a>span:nth-child(1){ width:50px;}

 .students>li>a>span:nth-child(2){ width:90px;}
.students>li>a>span:nth-child(3){ width:120px;}
.students>li>a>span:nth-child(4){ width:190px;}



 

/*资讯*/
.tutor-news{width:1200px;min-height:400px;display: -webkit-flex;display: flex;align-items: center; justify-content:space-between ;flex-wrap:wrap; }

 .tutor-news a:not(:nth-child(6),:last-child)  article { margin-bottom:14px;border-bottom:dashed 1px #DCDCDC; height:100px; padding:10px 0 20px 0; width:580px; }
 
 article:hover a{ color:BlueViolet;}

 .noImg>p{ text-indent:2em; margin-top:10px; line-height:20px;color:#9E9E9E;  letter-spacing:1px;}
 
.oneImg>h3{ width:100%;} 
.oneImg>div{ width:100%; height:80px; display: -webkit-flex;display: flex;align-items: center; justify-content:space-between ;margin-top:10px;} 
.oneImg>div>div,.oneImg>div>div>img{ width:100px; height:80px; border-radius:5px;} 
 .oneImg>div> p{width:470px; color:#9E9E9E;  letter-spacing:1px; text-indent:2em; line-height:22px;height:80px;}