.song_cont1{
  background:#fff6f6;
}
.song_menu{
  padding:60px 0 30px;
  position:relative;
}
.song_menu_list{
  width:100%;
  height:100px;
  position:absolute;
  left:0;
  top:-50px;
  display:flex;
  align-items: center;
  justify-content: space-between;
  z-index:10;
}
.song_menu_item{
  display:block;
  flex:0 0 30%;
  height:70px;
  padding:20px 20px;
  line-height:15px;
  font-size:13px;
  color:#666;
  text-align:left;
  background:#fffcf3;
  box-shadow: 0 0 3px 2px rgba(0,0,0,0.1);
  position:relative;
  overflow:hidden;
  transition:all 0.3s ease;
  cursor:pointer;
}
.song_menu_item::after{
  content: "";
  display:block;
  width:14px;
  height:14px;
  background:#b20c08;
  position:absolute;
  transform:rotate(45deg);
  right:-7px;
  top:-7px;
}
.song_menu_active{
  background:#b20c08 ;
  color:#ffefd4 !important;
  font-size:16px;
  font-weight:bold;
  line-height:24px;
  height:90px;
}
.song_menu_right{
  position:absolute;
  width:24px;
  height:24px;
  position:absolute;
  right:10px;
  bottom:10px;
  opacity:0;
  transition:all 0.3s ease;
}
.song_menu_active .song_menu_right{
  opacity:1;
}

.song_title{
  width:100%;
  height:40px;
  line-height:40px;
  text-align:left;
  font-size:20px;
  font-weight:bold;
  margin: 20px 0;
  position:relative;
}
.song_title_icon{
  position:absolute;
  height:24px;
  left:0;
  top:-5px
}

.song_grid{
  width:100%;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap:10px;
}
.song_grid_span{
  width:100%;
  height: 100%;
  grid-column-start: 4;
  grid-row-start: 1;
  grid-row-end: 3;
  position:relative;
}
.song_span_list{
  background:#fff;
  margin-bottom:10px;
  padding: 10px 0;
}
.song_list_item{
  text-align:left;
  width:100%;
  height:90px;
  position:relative;
  width: 96%;
  margin:5px auto;
  border-bottom:1px solid #ddd;
  overflow:hidden;
  display:flex;
  align-items: center;
}
.song_list_item_img{
  height:90px;
  width:90px;
}
.song_list_item:hover .song_list_item_cont{
  color:#b20c08;
}
.song_list_item_cont{
  flex:1 1 60%;
  font-size:12px;
  color:#444;
  line-height:18px;
  padding-left:10px;
}
.song_list_item_cont span{
  display:inline-block;
  background:#b20c08;
  height:16px;
  font-size:12px;
  line-height:16px;
  padding:0 5px;
  border-radius:4px;
  color:#fff;
  margin-top:5px;
}
.song_list_item:last-child{border:none;}
.song_list_item:hover .song_list_item_cont::after{
  content: "";
  display:block;
  width:14px;
  height:14px;
  background:#b20c08;
  position:absolute;
  transform:rotate(45deg);
  right:-7px;
  top:-7px;
}
.song_span_bottom{
  width:100%;
  height:200px;
  overflow:hidden;
  position:relative;

}
.song_span_bottom img, .song_span_bottom video{
  max-width: 100%;
  max-height:100%;
}
.song_grid_item{
  background:#fff;
  display:block;
  width: 100%;
  height:100%;
  cursor:pointer;
  overflow:hidden;
  padding-bottom:20px;
}
.song_grid_item img{
  transition:all 0.3s ease;
}
.song_grid_item:hover img{
  transform: scale(1.1,1.1);
}
.song_cont1_word{
  padding:20px 20px;
  position:relative;
  font-size:13px;
  color:#666;
  text-align:left;
  line-height:24px;
  height:100px;
  overflow:hidden;
}
.sont_cont1_bottom{
  padding:0px 20px;
  text-align:left;
  font-size:14px;
  color:#999;
}
.sont_cont1_bottom_icon{
  float:right;
  width:30px;
  height:30px;
  vertical-align: baseline;
  filter:grayscale(1);
}
.song_grid_item:hover{
  box-shadow: 0 0 3px 2px rgba(0,0,0,0.1);
}
.song_grid_item:hover .song_cont1_word{color:#b20c08;}
.song_grid_item:hover .sont_cont1_bottom_icon{  
  filter:grayscale(0);
}

.song_cont2{
  background:#f6eeee;
  padding:30px 0;
}

.song_cont2_dik{
  height:320px;
  font-size:16px;
  font-weight:bold;
  color:#333;
  text-align:left;
  line-height:40px;
}
.song_cont2_did{
  width:100%;
  height:275px;
  display:flex;
  align-items: flex-start;
}
.song_cont2_imgk{
  flex: 1 1 80%;
  height:100%;
  position:relative;
  border:1px solid #ddd;
}
.song_cont2_imgd{
  width:100%;
  height:100%;
  position:relative;
  overflow:hidden;
}
.song_cont2_img{
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  margin:auto;
  width:100%;
}
.song_cont2_title{
  position:absolute;
  height:40px;
  bottom:-40px;
  left:0;
}
.song_cont2_listk{
  background:#fff;
  margin-left:10px;
}
.song_cont2_list{
  display:block;
  height:55px;
  line-height:25px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:bold;
  color:#333;
  font-size:14px;
  padding: 8px 15px;
}
.song_cont2_list span{
  display:block;
  height:14px;
  line-height:14px;
  color:#aaa;
  font-size:12px;
}

.song3_grid_span{
  display:block;
  grid-column-start:1;
  grid-column-end:3;
  grid-row-start:1;
  position:relative;
  overflow:hidden;
}

.song3_grid_img{
  position:absolute;
  width:100%;
  height:100%;
  left:0;
  top:0;
  z-index:1;
  transition:all 0.3s ease;
}
.song3_grid_span:hover .song3_grid_img{
  transform: scale(1.1,1.1);
}

.song3_grid_cont{
  display:block;
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index:5;
  background:rgba(0,0,0,0.1);
  
}
.song3_grid_word{
  position:absolute;
  width:100%;
  padding: 10px 15px;
  line-height:24px;
  color:#fff;
  font-size:16px;
  font-weight:bold;
  text-align:left;
  left:0;
  bottom:0;
}
.song4_lunbo{
  width: 100%;
  height: 300px;
  position:relative;
  overflow:hidden;
  text-align:left;
}
/* 上一篇 */
.song4_lunbo_pre{
  position:absolute;
  left:0;
  top:20px;
  cursor:pointer;
  padding-left:30px;
  width:120px;
  white-space:nowrap;
  height:50px;
  font-size:14px;
  color:#333;
  font-weight:bold;
  line-height:16px;
  text-align:left;
}
.song4_pre_icon{
  height:26px;
  position:absolute;
  left:2px;
  top:2px;
}
.song4_lunbo_pre span,.song4_lunbo_next span{
  display:block;
  height:20px;
  font-weight:normal;
  line-height:20px;
  font-size:12px;
  color:#aaa;
}
.song4_lunbo_next{
  position:absolute;
  right:0;
  top:20px;
  cursor:pointer;
  padding-right:30px;
  width:120px;
  white-space:nowrap;
  height:50px;
  font-size:14px;
  color:#333;
  font-weight:bold;
  line-height:16px;
  text-align:right;
}
.song4_next_icon{
  height:26px;
  position:absolute;
  right:2px;
  top:2px;
}

.song4_item{
  position:absolute;
  transition:all 0.3s linear;
  bottom:0
}
.song4_item img{
  display:block;
  width:100%;
  height:100%;
}
.song4_out{
  right:auto;
  left:-1000px;
}
.song4_left{
  right:auto;
  left:0px;
  width:24%;
}
.song4_mid{
  right:0;
  left:0;
  margin:auto;
  width:50%;
}
.song4_right{
  right:0;
  left:auto;
  width:24%;
}
.song4_item_cont{
  position:absolute;
  background:rgba(0,0,0,0.5);
  width:100%;
  height:100%;
  left:0;
  top:0;
  z-index:10;
  color:#fff;
  display:block;
  padding:15px 15px;
}
.song4_item_date{
  font-size:13px;
  font-weight:bold;
  width:100%;
  height:50px;
  line-height:50px;
  position:relative;
}
.song4_item_date span{
  display:inline;
}
.song4_item_title{
  font-size:15px;
  font-weight:bold;
  line-height:24px;
  padding: 10px 0;
}
.song4_item_word{
  font-size:12px;
  line-height:18px;
  padding:10px 0;
  display:block;
  display:none;
}

.song4_mid .song4_item_date{
  height:80px;
  line-height:120px;
  font-size:24px;
}
.song4_mid .song4_item_date span{
  display:block;
  width:46px;
  height:46px;
  line-height:46px;
  font-size:46px;
  position:absolute;
  left:0;
  top:10px
}
.song4_mid .song4_item_title{
  font-size:26px;
  line-height:34px;
}
.song4_mid .song4_item_word{
  display:block;
}

.song_cont5{
  background:#f6eeee;
  padding:30px 0;
}

.song_cont5_dik{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr;
  grid-gap:10px;
}
.song_cont5_item{
  display:block;
  position:relative;
  width:100%;
  overflow:hidden;
}
.song_cont5_item img{
  transition:all 0.3s ease;
}
.song_cont5_item:hover img{
  transform: scale(1.1,1.1);
}
.song_cont5_title{
  position:absolute;
  text-align:left;
  left:0;
  bottom:0;
  z-index:10;
  color:#fff;
  font-size:14px;
  line-height:20px;
  padding:10px 15px;
  background:rgba(0,0,0,0.6);
}

@media screen and (max-width:900px) {
  .song_menu{
    padding:60px 0 20px;
  }
  .song_menu_list{
    top: 0;
    height:60px;
  }
  .song_menu_item{
    padding:4px 5px;
    height:50px;
    font-size:12px;
    overflow:hidden;
    text-overflow:ellipsis;
    line-clamp:3; 
    display:-webkit-box;
    text-overflow:-o-ellipsis-lastline;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    padding-right:30px;
  }
  .song_menu_active{
    font-size:12px;
    line-height:16px;
    height:54px;
  }
  .song_menu_right{
    right:2px;
    top:0;
    bottom:0;
    margin:auto;
  }

  .song_grid{
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }
  .song_grid_span{
    grid-column-start: 2;
    grid-row-start: 1;
    grid-row-end: 3;
  }
  .song_list_item{
    height:65px;

  }
  .song_list_item_img{
    width: 65px;
    height:65px;
  }
  .song_span_bottom{
    height:210px;
  }
  .song_cont2_did{
    height:auto;
    display:block;
  }
  .song_cont2_dik{height:auto;}
  .song_cont2_imgk{
    width:100%;
    height:auto;
  }
  .song_cont2_imgd{
    width:100%;
    height:auto;
  }
  .song_cont2_img{position:static;}
  .song_cont2_listk{
    margin-left:0;
  }
  .song_cont2_title{position:static;height:auto;}
  .song4_lunbo{
    height:180px;
  }
  .song_cont5_dik{
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
}