﻿.lwlPicturePlayAndShortcut
{
   position : relative; 
}
.index上方捷徑列5
{
   position : absolute;
   top : 1em;
   left : 1em;
}
.lwlColumn2
{
  display : flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  padding : 2em 5vw; 
}
.index最新消息2, .index比賽獎項3, .index活動4
{
  flex-basis : 33%; 
}
.index活動4
{
  padding : 0em 0vw;
  background: none
}
@media (max-width: 480px) 
{
  .index上方捷徑列5
  {
     position : static;
  }
  .lwlColumn2
  {
     display : block;
  }
}
@media (min-width: 481px) and (max-width: 767px) 
{
  .index上方捷徑列5
  {
     position : static;
  }
  .lwlColumn2
  {
     display : block;
  }
}
@media (min-width: 768px) and (max-width: 979px) {}
@media (min-width: 980px) and (max-width:1199px) {}
@media (min-width: 1200px) and (max-width:1919px) {}
@media (min-width: 1920px) {}

/* -------------- Grid Code Start Here --------------------------------------------- */

.fsps_grid_3columns_style02 {
    display: grid;
    column-gap: 2rem;
    row-gap: 3rem;
}

    .fsps_grid_3columns_style02 .A {
        grid-area: A;
    }

    .fsps_grid_3columns_style02 .BLeft {
        grid-area: BLeft;
    }

    .fsps_grid_3columns_style02 .BMiddle {
        grid-area: BMiddle;
    }

    .fsps_grid_3columns_style02 .BRight {
        grid-area: BRight;
    }

    .fsps_grid_3columns_style02 .C {
        grid-area: C;
    }

    .fsps_grid_3columns_style02 .D {
        grid-area: D;
    }

@media (max-width: 767px) {
    .fsps_grid_3columns_style02 {
        display: block;
    }

        .fsps_grid_3columns_style02 > .gridCell {
            margin-bottom: 3rem;
        }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .fsps_grid_3columns_style02 {
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: auto;
        grid-template-areas:
            "A A A A A A"
            "BLeft BLeft BLeft BLeft BLeft BLeft"
            "BMiddle BMiddle BMiddle BRight BRight BRight"
            "C C C C C C"
            "D D D D D D";
    }
}

@media (min-width: 1200px) {
    .fsps_grid_3columns_style02 {
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: auto;
        grid-template-areas:
            "A A A A A A"
            "BLeft BLeft BMiddle BMiddle BRight BRight"
            "C C C C C C"
            "D D D D D D";
    }
}


/* -------------- Grid Code End Here --------------------------------------------- */


/* -------------- Grid Code Start Here --------------------------------------------- */

.fsps_grid_3columns_style01 {
    display: grid;
    column-gap: 2rem;
    row-gap: 3rem;
}

    .fsps_grid_3columns_style01 .ALeft {
        grid-area: ALeft;
    }
    .fsps_grid_3columns_style01 .ARight {
        grid-area: ARight;
    }
    .fsps_grid_3columns_style01 .BLeft {
        grid-area: BLeft;
    }
    .fsps_grid_3columns_style01 .BMiddle {
        grid-area: BMiddle;
    }
    .fsps_grid_3columns_style01 .BRight {
        grid-area: BRight;
    }
    .fsps_grid_3columns_style01 .C {
        grid-area: C;
    }

@media (max-width: 767px) {
    .fsps_grid_3columns_style01 {
        display: block;
    }

        .fsps_grid_3columns_style01 > .gridCell {
            margin-bottom: 3rem;
        }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .fsps_grid_3columns_style01 {
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: auto;
        grid-template-areas:
            "ALeft ALeft ALeft ALeft ALeft ALeft"
            "ARight ARight ARight ARight ARight ARight"
            "BLeft BLeft BLeft BMiddle BMiddle BMiddle"
            "BRight BRight BRight BRight BRight BRight"
            "C C C C C C";
    }
}

@media (min-width: 1200px) {
    .fsps_grid_3columns_style01 {
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: auto;
        grid-template-areas:
            "ALeft ALeft ALeft ALeft ARight ARight"
            "BLeft BLeft BMiddle BMiddle BRight BRight"
            "C C C C C C";
    }
}



/* -------------- Grid Code End Here --------------------------------------------- */

/* -------------- Grid Code Start Here --------------------------------------------- */

.fsps_2columns_2rows_6040_fullWidth {
    --padding-topBottom: 4em;

    margin: 0;
    padding: var(--padding-topBottom) 2em;
}

    .fsps_2columns_2rows_6040_fullWidth > div {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: stretch;
        margin: 0 auto;
    }

        .fsps_2columns_2rows_6040_fullWidth > div > div:nth-child(1) {
            flex-basis: 58%;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            justify-content: flex-start;
            align-items: stretch;
        }

        .fsps_2columns_2rows_6040_fullWidth > div > div:nth-child(2) {
            flex-basis: 38%;
        }

        .fsps_2columns_2rows_6040_fullWidth > div > div:nth-child(1) > div:nth-child(1) {
            flex-basis: 50%;
        }

        .fsps_2columns_2rows_6040_fullWidth > div > div:nth-child(1) > div:nth-child(2) {
            flex-basis: 50%;
        }


@media (max-width: 767px) {
    .fsps_2columns_2rows_6040_fullWidth > div {
        display: block;
    }

        .fsps_2columns_2rows_6040_fullWidth > div > div:nth-child(1) {
            display: block;
        }

            .fsps_2columns_2rows_6040_fullWidth > div > div:nth-child(1) > div:nth-child(2) {
                margin-bottom: var(--padding-topBottom);
            }

            .fsps_2columns_2rows_6040_fullWidth > div > div:nth-child(1) > div:nth-child(1) {
                margin-bottom: var(--padding-topBottom);
            }
}


/* -------------- Grid Code End Here --------------------------------------------- */
