/* -------------- Grid Code Start Here --------------------------------------------- */

    .bbs2columns {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: stretch;
        height : calc(35vw + 25px);
        overflow : hidden;
        padding : 1em 1em;
    }
    .bbsPicturePlayer {
    }
    .index最新消息2 .loopElementList {
        height : calc(35vw - 120px);
        
    }
    .bbsLatestNews
    {
       background-color : rgba(255,255,255,0.3);
    }

    .bbs3columns {
        --padding-topBottom: 4em;

        margin: 0;
        padding: var(--padding-topBottom) 1em;
      
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: stretch;
        margin: 0 auto;
    }

    .bbsEventGallery, .bbsAchievement 
    {
       flex-basis: calc(((100% - 235px)/2) - 2em);
    }
    .bbsShortcut
    {
       flex-basis: 235px;
    }
    .bbsVideos
    {
       padding : 2em 1em; 
    }

    .bbsAchievement
    {
        background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
    }

@media (max-width: 767px) {
    .bbs3columns > div {
        padding: 1em 0;
    }

    .bbs3columns {
        display: block;
        margin-bottom: 1em;
    }
}
@media (max-width: 979px) 
{
    .bbs2columns
    {
        display : block;
        height : auto;
        overflow : visible;
    }
    .bbsLatestNews .index最新消息2 .loopElementList
    {
        height : auto;
    }
}

@media (max-width: 480px) 
{
  .bbs3columns 
  {
    padding: 1em 1em;
  }
  .bbsShortcut .index捷徑列5 .loopElementList 
  {
    height: auto;
  }
  .bbsAchievement .index學生成就4 .elementContainer {
    padding: 0;
  }
}
@media (min-width: 481px) and (max-width: 767px) 
{
   .bbsShortcut .index捷徑列5 .loopElementList 
   {
       height: auto;
   }
   .bbsAchievement .index學生成就4 .elementContainer {
      padding: 0;
   }
}
@media (min-width: 768px) and (max-width: 979px) 
{
   .bbsEventGallery, .bbsAchievement 
   {
       flex-basis: calc(50% - 1em);
   }
   .bbsShortcut
   {
       flex-basis: 100%;
   }
   .bbsShortcut .index捷徑列5 .loopElementList 
   {
       height: auto;
   }
}
@media (min-width: 980px) and (max-width:1199px) 
{
   .bbsPicturePlayer
   {
      flex-basis : 70vw;
      width : 70vw;
      max-width : 70vw;
      flex : 1;
   }
   .bbsLatestNews
   {
      flex-basis : calc(30vw - 30px);
      width : calc(30vw - 30px);
      max-width : calc(30vw - 30px);
      flex : 1;
      margin-left : 30px;
   }
   .bbsEventGallery, .bbsAchievement 
   {
       flex-basis: calc(50% - 1em);
   }
   .bbsShortcut
   {
       flex-basis: 100%;
   }
   .bbsShortcut .index捷徑列5 .loopElementList 
   {
       height: auto;
   }
}
@media (min-width: 1200px) and (max-width:1919px) 
{
   .bbsPicturePlayer
   {
      flex-basis : 70vw;
      width : 70vw;
      max-width : 70vw;
      flex : 1;
   }
   .bbsLatestNews
   {
      flex-basis : calc(30vw - 30px);
      width : calc(30vw - 30px);
      max-width : calc(30vw - 30px);
      flex : 1;
      margin-left : 30px;
   }
}
@media (min-width: 1920px) 
{
   .bbsPicturePlayer
   {
      flex-basis : 70vw;
      width : 70vw;
      max-width : 70vw;
      flex : 1;
   }
   .bbsLatestNews
   {
      flex-basis : calc(30vw - 30px);
      width : calc(30vw - 30px);
      max-width : calc(30vw - 30px);
      flex : 1;
      margin-left : 30px;
   }
}

@media screen and (min-width:0\0) {
    .bbsLatestNews
    {
        flex-basis : calc(30vw - 80px);
        width : calc(30vw - 80px);
        max-width : calc(30vw - 80px);
        flex : 1;
        margin-left : 30px;
    }
}