﻿/* 整個內容方塊 */
.mp社交媒體捷徑5 {
    --margin: 10px 10px 10px 0px;
    --border-radius: 50%;
    --icon-color: var(--color-purple01);
    --icon-color-hover : yellow;
    /*--border-color: #FFFFFF;*/
    --border-color-hover: #734440;
    /*--border-width: 2px;*/
    /*--icon-size: 4rem;*/
    --title-align: left;
    /*--icon-font-size : calc((var(--icon-size) - (var(--border-width) * 4)));*/
    

    /* --For simpleBar Start-- */
    --content-height-without-heading: auto;
    --whole-block-height: auto;
    /* --For simpleBar End-- */

    height: var(--whole-block-height);
    /*background-color: #808080;*/
}

    /* 內容方塊標題 */
    .mp社交媒體捷徑5 .blockTitle {
        text-align: var(--r-index-block-title-align, --title-align);
    }

        .mp社交媒體捷徑5 .blockTitle h2 {
        }

    /* 捷徑容器，每個捷徑都放在裡面 */
    .mp社交媒體捷徑5 .loopElementList {
        height: var(--content-height-without-heading);
    }

    .mp社交媒體捷徑5 .shortcutList {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .mp社交媒體捷徑5 .eachShortcut {
        margin: var(--margin);
        width : var(--icon-size);
        height : var(--icon-size);
    }

        .mp社交媒體捷徑5 .eachShortcut:last-of-type
        {
            margin-right : 0px;
        }

        .mp社交媒體捷徑5 .innerShell {
            width: 100%;
            height: 100%;
        }

    .mp社交媒體捷徑5 .link {
        display: block;
        border-radius: var(--border-radius);
        width: 100%;
        height: 100%;
        /*border: solid var(--border-width) var(--border-color);*/
        color: var(--icon-color);
        text-align: center;
        line-height: var(--icon-size);
        /*font-size: calc((var(--icon-size) - (var(--border-width) * 2)) / 2);*/
        font-size: var(--icon-size);
        transition: all 0.3s ease-in-out;
    }

    .mp社交媒體捷徑5 .link i
    {
        font-size: var(--icon-size);
    }

        .mp社交媒體捷徑5 .link:hover {
            background: rgba(0, 0, 0, .4);
            /*border: solid var(--border-width) var(--border-color);*/
            color : var(--icon-color-hover);
        }



@media (max-width: 480px) 
{
  .mp社交媒體捷徑5
  {
    --icon-size: 2.5rem;
  }
  .mp社交媒體捷徑5 .shortcutList {
     justify-content: flex-end;
  }
}
@media (min-width: 481px) and (max-width: 767px) 
{
  .mp社交媒體捷徑5
  {
    --icon-size: 2.5rem;
  }
  .mp社交媒體捷徑5 .shortcutList {
     justify-content: flex-end;
  }
}
@media (min-width: 768px) and (max-width: 979px) 
{
  .mp社交媒體捷徑5
  {
    --icon-size: 3rem;
  }
}
@media (min-width: 980px) and (max-width:1199px) 
{
  .mp社交媒體捷徑5
  {
    --icon-size: 3rem;
  }
}
@media (min-width: 1200px) and (max-width:1919px) 
{
  .mp社交媒體捷徑5
  {
    --icon-size: 4rem;
  }
}
@media (min-width: 1920px) 
{
  .mp社交媒體捷徑5
  {
    --icon-size: 4rem;
  }
}










