html{overflow-y: scroll;}
    .container-fluid {padding:0;}
    header {width:100%;overflow:hidden;}
    .head_nav {width:100%;height:90px;padding:5px 10%;background-color:#8a4118;color:#c0c0c0;display:flex;align-items:center;justify-content:space-between;}
    .head_nav .logo_img {width:80px;height:80px;}
   /* .head_nav strong {font-size:32px;color:#f0f0f0;}*/
    .head_nav .logo span{font-size:32px;color:#f0f0f0;}

    

    .head_nav span {font-size:16px;}
    .head_nav span a {display:inline-block;color:#f0f0f0;font-size:18px;margin:0 6px;}
    .head_nav span a:hover {color:#ff6000;}
    .search {background-color:#fff;padding:20px 17%;}
    .search .form-horizontal {width:60%;}
    .search .form-horizontal #search_index {background:none;border-right: 0px;}
    .form-horizontal select {background:none;border:1px solid #ccc;outline:none;color:#333;font-size:1em;padding:2px 5px;width:160px;text-overflow:ellipsis;overflow:hidden;}

    .relevant_search {display:flex;margin-top:20px;}
    .relevant_search>strong {vertical-align:top;font-size:16px;color:#666;flex-shrink:0;}
    .relevant_search_p {word-break:keep-all;}
    .relevant_search_p a {margin:0 5px;font-size:14px;color:#888;text-decoration:none;}
    .relevant_search_p a:hover {color:#dd4c05 ;}
 
  .labelActive{

     font-weight:bold !important;
     color:#dd4c05 !important;
     border: 1px solid #a2a2a25e;
padding: 5px 8px;
border-radius: 5px;

  }

    .box-content {margin-top:30px;padding:20px;overflow: hidden;}
    .pictures-videos .nav-tabs li > a {font-size:18px;padding:10px 40px;}
    .pictures-videos .nav-tabs li.active>a {color:rgb(151,75,27);font-weight:bold;}
    .pictures-videos .nav-tabs li:hover > a {background-color:rgb(151,75,27);color:#f0f0f0;}
    .classify_nav {
margin: 10px 30px;
font-size: 16px;
color: #666;
}
    .classify_nav ul {display:flex;flex-wrap: wrap; min-height:30px;}
    .classify_nav ul li {margin:5px 15px;}
    .classify_nav ul li a {color:#666;font-size:16px;}
    .classify_nav ul li:hover {border-bottom:3px solid rgb(200,80,0);}
    .classify_nav ul li.active {border-bottom:3px solid rgb(200,80,0);}


  #video_list > ul { display: flex; flex-wrap: wrap; width: 100%; height: 100%; }
    #video_list > ul li { width: 21%; padding-bottom: 18%; margin: 0.3% 1.5%; margin-bottom: 40px; border-top-left-radius: 10px; border-top-right-radius: 10px; cursor: grabbing; background-repeat: no-repeat; background-position: center center; background-size: cover; position: relative; overflow: hidden; } 
    #video_list > ul li > p{
display: block;
width: 100%;
height: 38px;
line-height: 38px;
text-align: center;
background-color: rgba(89, 89, 89, 0.5);
color: #f0f0f0;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
position: absolute;
bottom: 0;
left: 0;
font-size: 16px;

/*      display: block;
      width: 100%;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background-color: rgba(255,255,255,.7);
      color: #333;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      position: absolute;
      bottom: 0;
      left: 0;*/
    }
    #video_list > ul li div{
      width: 100%;
      padding: 5%;
      text-align: left;
      background-color: rgba(138, 65, 24, 0.7);
      color: #f0f0f0;
      position: absolute;
      top: -50px;
      left: 0;
      transition: all 0.8s;
      opacity: 0;
    }
    #video_list > ul li:hover div{
      opacity: 1;
      top: 0;
    }
    #video_list > ul li:hover > p{
      background-color: rgba(74, 74, 74, 0.8);
    }

    /* waterfall_box */
    #waterfall_box {width:100%;margin:50px auto; overflow: hidden;}
    #waterfall_box ul {width:22%;float:left;margin-right:2%;}
    #waterfall_box ul:first-of-type {margin-left:3%;}
    #waterfall_box ul:last-of-type {margin-right:0;}
    #waterfall_box ul li {margin-bottom:20px;background-color:#eee;position:relative;}
    #waterfall_box ul li img {/* width:300px;*/width:100%;border-radius: 9px; min-height: 100px; }
    #waterfall_box ul li p.popup_title { width: 100%; position: absolute;bottom: -9px;background-color: rgba(0,0,0,.5);border-radius: 0 0 9px 9px; color: #f0f0f0;font-size: 16px; text-align:center;padding:10px;}
    #waterfall_box ul li a.popup_box {display:flex;flex-direction: column;justify-content:center;padding: 5%; width:100%;min-height:30%; max-height:70%;position:absolute;left:0;top:10%;color:#f0f0f0;background-color:rgba(0,0,0,.5);z-index:2;opacity:0;transition:all .5s;}
    #waterfall_box ul li a.popup_box:hover {text-decoration-line: none;}
    #waterfall_box ul li a.popup_box span{display: block; font-size: 14px; color: #ccc;}
    #waterfall_box ul li a.popup_box span:last-of-type { margin: 8px 0;}
    #waterfall_box ul li a.popup_box span strong{font-size: 15px; margin-right: 8px;}
    #waterfall_box ul li a.popup_box span:last-of-type p { text-indent: 2em; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;}
    #waterfall_box ul li a.popup_box span i{font-size: 15px; margin: 0 3px;}
    #waterfall_box ul li:hover a.popup_box {opacity:1;}

    @media only screen and (max-width:1200px) {
      .head_nav strong {
        font-size: 26px;
      }

      .search {
        padding: 20px 10%;
      }

      .box-content {
        padding: 20px 5%;
      }
    }

    @media only screen and (max-width:992px) {
      .head_nav {
        padding-right: 5%;
      }

      .head_nav strong {
        font-size: 20px;
      }

      .head_nav span {
        font-size: 18px;
      }

      .head_nav span a {
        font-size: 18px;
      }

      .search {
        padding: 20px 10%;
      }
    }

    @media only screen and (max-width:767px) {
      .head_nav {
        padding: 5px;
        margin-bottom: 50px;
        position: relative;
      }
      .head_nav .logo {
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
      .head_nav .logo >span{
        font-size: 26px;
      }
      .head_nav > span{
        position: absolute;
        top: 90px;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 100vw;
        height: 50px;
        padding: 5px 10px;
        font-size: 14px;
        color: #333;
        background-color: #eee;
      }
      .head_nav > span a {
        font-size: 16px;
        color: #333;
      }

      .search {
        padding: 10px 1%;
      }

      .search .form-horizontal {
        width: 100%;
      }

      .relevant_search>strong {
        font-size: 14px;
      }

      .relevant_search_p a {
        font-size: 12px;
      }

      .box-content {
        padding: 20px 1%;
      }
      .classify_nav{
        margin: 20px;
      }
      #waterfall_box .waterfall_box_col{
        margin-right: 3%;
      }
      #waterfall_box ul li > p {
        padding: 3px;
        font-size: 12px;
      }
      #waterfall_box ul li a.popup_box span strong{
        font-size: 12px;
      }
      
      #video_list ul li {
        width: 48%;
        padding-bottom: 36%;
        margin: 1%;
        margin-bottom: 20px;
      }
 

    @media only screen and (max-width:344px) {
      .head_nav span a {
        font-size: 14px;
        margin: 0 1px;
      }
    }