﻿.waver 
{
  border-style : solid;
  padding : 1rem;
  border-radius : 8px;
  border-width : 65px 5px 5px 5px; 
  /*background-color : #FFFFFF;
  background-image: radial-gradient(circle, #fdfaeb, #fdfbe8, #fcfce6, #fbfee4, #f9ffe2);*/
  background: linear-gradient(45deg, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
}

.blueBorder
{
  border-style : solid;
  padding : 1rem;
  border-radius : 8px;
  border-width : 1px 1px 1px 1px; 
  border-color : #3477e3;
  /*background-color : #FFFFFF;
  background-image: radial-gradient(circle, #fdfaeb, #fdfbe8, #fcfce6, #fbfee4, #f9ffe2);*/
  background: linear-gradient(45deg, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
}

/* 圖片播放器及最新消息 */
.fdRow01
{
   display : flex;
   flex-direction : row;
   flex-wrap : nowrap;
   align-items: flex-start;
   justify-content: space-between;
   height : calc(35vw + 55px);
   overflow : hidden;
   padding : 20px;
}
.fdPicturePlayer
{

}
.fdLatestNews
{
    position : relative;
    border-color : #cb14db;
}

.fdLatestNews .boxTitle
{
    position : absolute;
    top : -60px;
    left : 0px;
    width : 100%;
}

.fdLatestNews .fdBlockTitle
{
    display : flex;
    flex-wrap: nowrap;
    justify-content: space-between;
   align-items: center;
}

.fdBlockTitle img
{
   max-width : 75%;
}

.fdBlockTitle .more, .fdBlockTitle .title
{
   display : block;
}

.fdBlockTitle .more
{
   font-size : 1.5rem;
   font-weight : 700;
   color : #FFFFFF;
}

.fdMarquee
{
   padding : 0.5rem 0;
}

/* 中間三個 columns */
.fd3Columns
{
   display : flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: space-between;
   align-items: stretch;
   padding : 1rem;
}

.fdActivity, .fdAwards
{
   flex-basis : calc(((100% - 250px) / 2) - 50px);
   margin-right : 50px;
   position : relative;
}

/* 活動相簿和成果分享的邊框顏色 */
.fdActivity
{
   border-color : #e86235;
}

.fdAwards
{
   border-color : #c0d921;
}

.fdActivity .boxTitle, .fdAwards .boxTitle
{
    position : absolute;
    top : -80px;
    left : 0px;
    width : 100%;
}

/* 活動相簿及成果分享的標頭 */ 
.fdActivity .fdBlockTitle, .fdAwards .fdBlockTitle
{
    display : flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.fdShortcutRight
{
   flex-basis : 250px;
   
}

.fdShortcuts
{
   padding : 1rem;
   margin : 1rem 0;
}

.fdBottomShortcut, .fdOtherShortcut
{
   padding : 1rem;
}
.fdOtherShortcut
{
   margin-top : 1rem;
}



@media (max-width: 480px) 
{
    .fdRow01
    {
        display : block;
        height : auto;
        overflow : visible;
    }
    .fd3Columns
    {
        display : block;
    }
    .fdActivity, .fdAwards
    {
        margin-right : 0;
        margin-bottom : 2rem;
    }
}
@media (min-width: 481px) and (max-width: 767px) 
{
    .fdRow01
    {
        display : block;
        height : auto;
        overflow : visible;
    }
    .fd3Columns
    {
        display : block;
    }
    .fdActivity, .fdAwards
    {
        margin-right : 0;
        margin-bottom : 2rem;
    }
}
@media (min-width: 768px) and (max-width: 979px) 
{
   .fdRow01
   {
      display : block;
      height : auto;
      overflow : visible;
   }
   .fd3Columns
   {
      flex-wrap: wrap;
   }
   .fdActivity, .fdAwards
   {
      flex-basis : calc((100% - 30px) / 2);
      margin-right : 0;
   }
   .fdShortcutRight
   {
      margin-top : 2rem;
      flex-basis : 100%;
   }
}
@media (min-width: 980px) and (max-width:1199px) 
{
   .fdPicturePlayer
   {
      flex-basis : 70vw;
      width : 70vw;
      max-width : 70vw;
      flex : 1;
   }
   .fdLatestNews
   {
      flex-basis : calc(30vw - 30px);
      width : calc(30vw - 30px);
      max-width : calc(30vw - 30px);
      flex : 1;
      margin-left : 30px;
   }
   .fdLatestNews .fdBlockTitle .more
   {
      display : none;
   }
   .fd3Columns
   {
      flex-wrap: wrap;
   }
   .fdActivity, .fdAwards
   {
      flex-basis : calc((100% - 30px) / 2);
      margin-right : 0;
   }
   .fdShortcutRight
   {
      margin-top : 2rem;
      flex-basis : 100%;
   }
}
@media (min-width: 1200px) and (max-width:1919px) 
{
   .fdPicturePlayer
   {
      flex-basis : 70vw;
      width : 70vw;
      max-width : 70vw;
      flex : 1;
   }
   .fdLatestNews
   {
      flex-basis : calc(30vw - 30px);
      width : calc(30vw - 30px);
      max-width : calc(30vw - 30px);
      flex : 1;
      margin-left : 30px;
   }
   .fdLatestNews .fdBlockTitle .more
   {
      display : none;
   }
}
@media (min-width: 1920px) 
{
   .fdPicturePlayer
   {
      flex-basis : 70vw;
      width : 70vw;
      max-width : 70vw;
      flex : 1;
   }
   .fdLatestNews
   {
      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) {
    .fdLatestNews
    {
        flex-basis : calc(30vw - 80px);
        width : calc(30vw - 80px);
        max-width : calc(30vw - 80px);
        flex : 1;
        margin-left : 30px;
    }
}
