h1
{
    text-align: center;
    color: DarkSlateGray;
}

/* RECOMMENDATION ------------------------------------------------------------------------------ */

div.promoted_container
{
    display: block;
    position: relative;

    width: 1600px;
    height: 600px;
    margin: 0px auto;
}

img.promoted_img
{
    display: block;
    position: absolute;
    left: 0px;
    top:  0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
 /* filter: blur(4px); */
}

/* --------------------------------------------------------------------------------------------- */

div#promoted_row
{
    position: absolute;
    left: 0px;
    top:  0px;
    width:  100%;
    height: 100%;
}

div.promoted_area
{
    display: block;
    position: relative;
    margin: 0 auto;
    width:  1600px;
    height: 600px;

 /* background-color: gray; */
}

div.promoted_area a:focus
{   outline: red dashed 5px;  }

div.promoted_area a:hover
{   color: orange;  }

div.promoted_text
{
    position: absolute;
    left: 16px;
    bottom: 30px;
    width: 90%;
    max-width: 800px;
    text-align: justify;
    font-size: 1.31rem;

    color: white;
    word-wrap: normal;
    padding: 16px;
    background-color: rgba(80, 35, 0, 0.6);
}

div.promoted_text a
{
    color: white;
    font-size: larger;
    font-weight: bold;
    text-shadow: 2px 3px 3px black;
}

div.promoted_label
{
    width: 90px;
    margin-bottom: 16px;
 /* background-color: orange;
    border-radius: 4px;
    margin-bottom: 8px;
    padding: 2px;
    text-align: center; */

    text-shadow: none;
    font-size: 1rem;
    font-weight: bold;
    z-index: 100;
}

/* ANNOUNCEMENTS ONLY ---------------------------------------------------------------------------

div.home_announce
{
    padding: 16px 0px;
    background-color: PapayaWhip;
} */

/* ANNOUNCEMENTS AND EVENT ---------------------------------------------------------------------- */

div.home_announce
{
    display: inline-block;
    vertical-align: top;
    width: 790px;
    padding: 8px 0px;
    background-color: PapayaWhip;
}

div.home_event
{
    display: inline-block;
    vertical-align: top;
    width: 790px;
}

div.home_event img
{   width: 100%;  }

/* ARTICLE LISTS ------------------------------------------------------------------------------- */

a.article_tab
{
    display: inline-block;
    flex-grow: 1;
    width: 360px;
    min-height: 32px;

    font-size: 1.31rem;
    font-weight: bold;

    margin: 8px 50px;
    padding: 4px;
    text-align: center;

 /* 白底橘邊方塊樣式: */
    color: OrangeRed;
    background-color: White;
    border: solid 2px DarkOrange;
    border-top-width: 6px;

 /* 橘底橢圓樣式:
    color: white;
    background-color: DarkOrange;
    border-radius: 20px;
    text-shadow: 2px 3px 3px black; */
}

a.article_more
{
    color: Black;
    font-weight: bold;
}

/* IMAGE GALLERY ------------------------------------------------------------------------------- */

div.gallery_container
{
    position: relative;
    width: 1600px;
    height: 240px;
 /* border: 1px solid gray; */
}

div.img_gallery
{
    position: absolute;
    left: 32px;
    top: 0px;

    width: 1504px;  /* = 1600 - 32x3 */
    height: 240px;

    scroll-behavior: smooth;
    overflow: hidden;
}

div.img_gallery ul
{
    padding: 0px;
    white-space: nowrap;
 /* border: 1px solid gray; */
}

div.img_gallery li
{
    display: inline;
    list-style: none;
    padding: 0px 16px;
}

img.thumb_std
{
    width: 320px;
    height: 180px;

    object-fit: cover;
    border-radius: 8px;
}

img.thumb_std:hover
{   filter: brightness(60%);  }

img.thumb_smaller
{
    width: 200px;
    height: 70px;

/*  object-fit: contain;
    border-radius: 8px; */
}

img.thumb_smaller:hover
{   filter: brightness(60%);  }

a.thumb_prev
{
    position: absolute;
    left: 0px;
    top: 80px;

    width: 32px;
    height: 64px;
}

a.thumb_prev:hover
{   filter: brightness(200%);  }

a.thumb_next
{
    position: absolute;
    right: 0px;
    top: 80px;

    width: 32px;
    height: 64px;
}

a.thumb_next:hover
{   filter: brightness(200%);  }
