/*  CSS for goldhotpot.com.
Author: mellow.penguin.studio@gmail.com, https://mellowpenguin.com

Specs:
- Screen breakers: 640px, 1024px
- Sub-screen breakers: 360px(font-size)
*/

/*** CONTENT ***/
/*
* $GENERAL
* $Visual settings
*   $Frame
*   $Button
*   $Text
*   $Special
*   $HEADER
*     Title & Logo
*   $MAIN
*     Cover
*     Content Frame
*   $FOOTER
*     Info box
*     Copyright
* $HOME
*   $MAIN
*     $ARTICLE
* $ABOUT
* $MENU
* $NEWS
*/



/*** $GENERAL ***/
:root {
  /* main-red */
  --c-main-red-light: #d8293e;
  --c-main-red-mid: #c30d22;
  --c-main-red-dark: #8a0000;

  /* main-brown */
  --c-main-brown-lighter: #4b3e3c;
  --c-main-brown-light: #33251C;
  --c-main-brown-mid: #231816;
  --c-main-brown-dark: #0c0808;

  --c-main-brown-lighter-num: 75, 62, 60;
  --c-main-brown-light-num: 44, 33, 27;
  --c-main-brown-mid-num: 35, 24, 22;
  --c-main-brown-dark-num: 0, 0, 0;

  /* Red */
  --c-red: #f44336;
  --c-red-50: #ffebee;
  --c-red-100: #ffcdd2;
  --c-red-200: #ef9a9a;
  --c-red-300: #e57373;
  --c-red-400: #ef5350;
  --c-red-500: #f44336;
  --c-red-600: #e53935;
  --c-red-700: #d32f2f;
  --c-red-800: #c62828;
  --c-red-900: #b71c1c;
  --c-red-a100: #ff8a80;
  --c-red-a200: #ff5252;
  --c-red-a400: #ff1744;
  --c-red-a700: #d50000;

  /* Pink */
  --c-pink: #e91e63;
  --c-pink-50: #fce4ec;
  --c-pink-100: #f8bbd0;
  --c-pink-200: #f48fb1;
  --c-pink-300: #f06292;
  --c-pink-400: #ec407a;
  --c-pink-500: #e91e63;
  --c-pink-600: #d81b60;
  --c-pink-700: #c2185b;
  --c-pink-800: #ad1457;
  --c-pink-900: #880e4f;
  --c-pink-a100: #ff80ab;
  --c-pink-a200: #ff4081;
  --c-pink-a400: #f50057;
  --c-pink-a700: #c51162;

  /* Purple */
  --c-purple: #9c27b0;
  --c-purple-50: #f3e5f5;
  --c-purple-100: #e1bee7;
  --c-purple-200: #ce93d8;
  --c-purple-300: #ba68c8;
  --c-purple-400: #ab47bc;
  --c-purple-500: #9c27b0;
  --c-purple-600: #8e24aa;
  --c-purple-700: #7b1fa2;
  --c-purple-800: #6a1b9a;
  --c-purple-900: #4a148c;
  --c-purple-a100: #ea80fc;
  --c-purple-a200: #e040fb;
  --c-purple-a400: #d500f9;
  --c-purple-a700: #aa00ff;

  /* Deep Purple */
  --c-deep-purple: #673ab7;
  --c-deep-purple-50: #ede7f6;
  --c-deep-purple-100: #d1c4e9;
  --c-deep-purple-200: #b39ddb;
  --c-deep-purple-300: #9575cd;
  --c-deep-purple-400: #7e57c2;
  --c-deep-purple-500: #673ab7;
  --c-deep-purple-600: #5e35b1;
  --c-deep-purple-700: #512da8;
  --c-deep-purple-800: #4527a0;
  --c-deep-purple-900: #311b92;
  --c-deep-purple-a100: #b388ff;
  --c-deep-purple-a200: #7c4dff;
  --c-deep-purple-a400: #651fff;
  --c-deep-purple-a700: #6200ea;

  /* Indigo */
  --c-indigo: #3f51b5;
  --c-indigo-50: #e8eaf6;
  --c-indigo-100: #c5cae9;
  --c-indigo-200: #9fa8da;
  --c-indigo-300: #7986cb;
  --c-indigo-400: #5c6bc0;
  --c-indigo-500: #3f51b5;
  --c-indigo-600: #3949ab;
  --c-indigo-700: #303f9f;
  --c-indigo-800: #283593;
  --c-indigo-900: #1a237e;
  --c-indigo-a100: #8c9eff;
  --c-indigo-a200: #536dfe;
  --c-indigo-a400: #3d5afe;
  --c-indigo-a700: #304ffe;

  /* Blue */
  --c-blue: #2196f3;
  --c-blue-50: #e3f2fd;
  --c-blue-100: #bbdefb;
  --c-blue-200: #90caf9;
  --c-blue-300: #64b5f6;
  --c-blue-400: #42a5f5;
  --c-blue-500: #2196f3;
  --c-blue-600: #1e88e5;
  --c-blue-700: #1976d2;
  --c-blue-800: #1565c0;
  --c-blue-900: #0d47a1;
  --c-blue-a100: #82b1ff;
  --c-blue-a200: #448aff;
  --c-blue-a400: #2979ff;
  --c-blue-a700: #2962ff;

  /* Light Blue */
  --c-light-blue: #03a9f4;
  --c-light-blue-50: #e1f5fe;
  --c-light-blue-100: #b3e5fc;
  --c-light-blue-200: #81d4fa;
  --c-light-blue-300: #4fc3f7;
  --c-light-blue-400: #29b6f6;
  --c-light-blue-500: #03a9f4;
  --c-light-blue-600: #039be5;
  --c-light-blue-700: #0288d1;
  --c-light-blue-800: #0277bd;
  --c-light-blue-900: #01579b;
  --c-light-blue-a100: #80d8ff;
  --c-light-blue-a200: #40c4ff;
  --c-light-blue-a400: #00b0ff;
  --c-light-blue-a700: #0091ea;

  /* Cyan */
  --c-cyan: #00bcd4;
  --c-cyan-50: #e0f7fa;
  --c-cyan-100: #b2ebf2;
  --c-cyan-200: #80deea;
  --c-cyan-300: #4dd0e1;
  --c-cyan-400: #26c6da;
  --c-cyan-500: #00bcd4;
  --c-cyan-600: #00acc1;
  --c-cyan-700: #0097a7;
  --c-cyan-800: #00838f;
  --c-cyan-900: #006064;
  --c-cyan-a100: #84ffff;
  --c-cyan-a200: #18ffff;
  --c-cyan-a400: #00e5ff;
  --c-cyan-a700: #00b8d4;

  /* Teal */
  --c-teal: #009688;
  --c-teal-50: #e0f2f1;
  --c-teal-100: #b2dfdb;
  --c-teal-200: #80cbc4;
  --c-teal-300: #4db6ac;
  --c-teal-400: #26a69a;
  --c-teal-500: #009688;
  --c-teal-600: #00897b;
  --c-teal-700: #00796b;
  --c-teal-800: #00695c;
  --c-teal-900: #004d40;
  --c-teal-a100: #a7ffeb;
  --c-teal-a200: #64ffda;
  --c-teal-a400: #1de9b6;
  --c-teal-a700: #00bfa5;

  /* Green */
  --c-green: #4caf50;
  --c-green-50: #e8f5e9;
  --c-green-100: #c8e6c9;
  --c-green-200: #a5d6a7;
  --c-green-300: #81c784;
  --c-green-400: #66bb6a;
  --c-green-500: #4caf50;
  --c-green-600: #43a047;
  --c-green-700: #388e3c;
  --c-green-800: #2e7d32;
  --c-green-900: #1b5e20;
  --c-green-a100: #b9f6ca;
  --c-green-a200: #69f0ae;
  --c-green-a400: #00e676;
  --c-green-a700: #00c853;

  /* Light Green */
  --c-light-green: #8bc34a;
  --c-light-green-50: #f1f8e9;
  --c-light-green-100: #dcedc8;
  --c-light-green-200: #c5e1a5;
  --c-light-green-300: #aed581;
  --c-light-green-400: #9ccc65;
  --c-light-green-500: #8bc34a;
  --c-light-green-600: #7cb342;
  --c-light-green-700: #689f38;
  --c-light-green-800: #558b2f;
  --c-light-green-900: #33691e;
  --c-light-green-a100: #ccff90;
  --c-light-green-a200: #b2ff59;
  --c-light-green-a400: #76ff03;
  --c-light-green-a700: #64dd17;

  /* Lime */
  --c-lime: #cddc39;
  --c-lime-50: #f9fbe7;
  --c-lime-100: #f0f4c3;
  --c-lime-200: #e6ee9c;
  --c-lime-300: #dce775;
  --c-lime-400: #d4e157;
  --c-lime-500: #cddc39;
  --c-lime-600: #c0ca33;
  --c-lime-700: #afb42b;
  --c-lime-800: #9e9d24;
  --c-lime-900: #827717;
  --c-lime-a100: #f4ff81;
  --c-lime-a200: #eeff41;
  --c-lime-a400: #c6ff00;
  --c-lime-a700: #aeea00;

  /* Yellow */
  --c-yellow: #ffeb3b;
  --c-yellow-50: #fffde7;
  --c-yellow-100: #fff9c4;
  --c-yellow-200: #fff59d;
  --c-yellow-300: #fff176;
  --c-yellow-400: #ffee58;
  --c-yellow-500: #ffeb3b;
  --c-yellow-600: #fdd835;
  --c-yellow-700: #fbc02d;
  --c-yellow-800: #f9a825;
  --c-yellow-900: #f57f17;
  --c-yellow-a100: #ffff8d;
  --c-yellow-a200: #ffff00;
  --c-yellow-a400: #ffea00;
  --c-yellow-a700: #ffd600;

  /* Amber */
  --c-amber: #ffc107;
  --c-amber-50: #fff8e1;
  --c-amber-100: #ffecb3;
  --c-amber-200: #ffe082;
  --c-amber-300: #ffd54f;
  --c-amber-400: #ffca28;
  --c-amber-500: #ffc107;
  --c-amber-600: #ffb300;
  --c-amber-700: #ffa000;
  --c-amber-800: #ff8f00;
  --c-amber-900: #ff6f00;
  --c-amber-a100: #ffe57f;
  --c-amber-a200: #ffd740;
  --c-amber-a400: #ffc400;
  --c-amber-a700: #ffab00;

  /* Orange */
  --c-orange: #ff9800;
  --c-orange-50: #fff3e0;
  --c-orange-100: #ffe0b2;
  --c-orange-200: #ffcc80;
  --c-orange-300: #ffb74d;
  --c-orange-400: #ffa726;
  --c-orange-500: #ff9800;
  --c-orange-600: #fb8c00;
  --c-orange-700: #f57c00;
  --c-orange-800: #ef6c00;
  --c-orange-900: #e65100;
  --c-orange-a100: #ffd180;
  --c-orange-a200: #ffab40;
  --c-orange-a400: #ff9100;
  --c-orange-a700: #ff6d00;

  /* Deep Orange */
  --c-deep-orange: #ff5722;
  --c-deep-orange-50: #fbe9e7;
  --c-deep-orange-100: #ffccbc;
  --c-deep-orange-200: #ffab91;
  --c-deep-orange-300: #ff8a65;
  --c-deep-orange-400: #ff7043;
  --c-deep-orange-500: #ff5722;
  --c-deep-orange-600: #f4511e;
  --c-deep-orange-700: #e64a19;
  --c-deep-orange-800: #d84315;
  --c-deep-orange-900: #bf360c;
  --c-deep-orange-a100: #ff9e80;
  --c-deep-orange-a200: #ff6e40;
  --c-deep-orange-a400: #ff3d00;
  --c-deep-orange-a700: #dd2c00;

  /* Brown */
  --c-brown: #795548;
  --c-brown-50: #efebe9;
  --c-brown-100: #d7ccc8;
  --c-brown-200: #bcaaa4;
  --c-brown-300: #a1887f;
  --c-brown-400: #8d6e63;
  --c-brown-500: #795548;
  --c-brown-600: #6d4c41;
  --c-brown-700: #5d4037;
  --c-brown-800: #4e342e;
  --c-brown-900: #3e2723;

  /* Gray */
  --c-gray: #9e9e9e;
  --c-gray-50: #fafafa;
  --c-gray-100: #f5f5f5;
  --c-gray-200: #eeeeee;
  --c-gray-300: #e0e0e0;
  --c-gray-400: #bdbdbd;
  --c-gray-500: #9e9e9e;
  --c-gray-600: #757575;
  --c-gray-700: #616161;
  --c-gray-800: #424242;
  --c-gray-900: #212121;

  /* Blue Gray */
  --c-blue-gray: #607d8b;
  --c-blue-gray-50: #eceff1;
  --c-blue-gray-100: #cfd8dc;
  --c-blue-gray-200: #b0bec5;
  --c-blue-gray-300: #90a4ae;
  --c-blue-gray-400: #78909c;
  --c-blue-gray-500: #607d8b;
  --c-blue-gray-600: #546e7a;
  --c-blue-gray-700: #455a64;
  --c-blue-gray-800: #37474f;
  --c-blue-gray-900: #263238;

  /* White & Black */
  --c-white: #ffffff;
  --c-black: #000000;
}


body {
  background-color: var(--c-main-brown-light);
  font-family:
    /* Apple fonts */
    "SF Pro Text", "SF Pro Icons", "PingFang TC",
    /* Windows fonts */
    "Microsoft JhengHei", 微軟正黑體,
    /* Google fonts */
    "Noto Sans", "Noto Sans CJK TC",
    /* Generic fonts */
    "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 1.125em;
  color: var(--c-gray-300);
}

/* Extremely small screen */
@media screen and (max-width: 360px) {
  body {
    font-size: 1em;
  }
}

/* Larger screen */
@media screen and (min-width: 1024px) {
  body {
    font-size: 1.25em;
  }
}

a,
a:visited {
  color: var(--c-gray-300);
}

a:hover {
  cursor: pointer;
  color: var(--c-gray-100);
}

a:focus {
  color: var(--c-gray-500);
}

ol[role="list"],
ul[role="list"] {
  padding-left: 0;
  list-style: none;
}


/** $Visual settings **/
.theme-dark {
  background:
    linear-gradient(rgba(32, 24, 22, 0.7),
      rgba(35, 24, 22, 0.6)),
    url(/img/bg.gif) repeat;
}

.theme-light {
  background:
    linear-gradient(rgba(var(--c-main-brown-lighter-num), 0.8),
      rgba(var(--c-main-brown-lighter-num), 0.7)),
    url(/img/bg.gif) repeat;
}

img {
  width: 100%;
}

img[role="icon"],
svg[role="icon"] {
  padding-right: 8px;
  display: inline-block;
  width: 1em;
  height: 1em;
}

img.fixed-size {
  width: initial;
}

picture>img {
  display: block;
}


/** $Frame **/
@media screen and (min-width: 1024px) {
  .alignment {
    max-width: 1024px;
  }
}

article {
  margin: auto;
}

article p {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  max-width: 25em;
  min-height: 6rem;
  line-height: 1.5;
}


/** $Frame > Grid **/
.grid-col-2-box,
.grid-col-2-box-wide {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "col-1"
    "col-2";
  column-gap: 2rem;
}

@media screen and (min-width: 640px) {
  .grid-col-2-box {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "header ."
      "col-1 col-2";
  }
}

@media screen and (min-width: 1024px) {
  .grid-col-2-box-wide {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "header header"
      "col-1 col-2";
  }
}

.grid-col-2-header {
  grid-area: header;
}

.grid-col-2-col-1 {
  grid-area: col-1;
}

.grid-col-2-col-2 {
  grid-area: col-2;
}

.grid-col-3-box {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 2rem;
}

@media screen and (min-width: 640px) {
  .grid-col-3-box {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (min-width: 1024px) {
  .grid-col-3-box {
    grid-template-columns: 1fr 1fr 1fr;
  }
}


/** $Button **/
.button-box {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-indent: 0;
}

@media screen and (min-width: 640px) {
  .button-box {
    flex-direction: row;
  }
}

.button-box>a {
  flex-shrink: 0;
  margin: .8rem;
  line-height: 1;
}

/* For extremely small screen */
@media screen and (max-width: 360px) {
  .button-box>a {
    margin-left: auto;
    margin-right: auto;
  }
}

/* Button style */
.button-box>a:nth-child(2n+1) {
  background-color: var(--c-main-brown-lighter);
  color: var(--c-gray-300);
}

.button-box>a:nth-child(2n+1):hover {
  background-color: var(--c-gray-300);
  color: var(--c-main-brown-mid);
}

.button-box>a:nth-child(2n+1):focus {
  border-color: var(--c-gray-500);
  position: relative;
  top: 2px;
  background-color: var(--c-gray-500);
  color: var(--c-main-brown-mid);
  transition: none;
}

.button-box>a:nth-child(2n) {
  background-color: var(--c-gray-300);
  color: var(--c-main-brown-mid);
}

.button-box>a:nth-child(2n):hover {
  border-color: var(--c-gray-400);
  background-color: var(--c-gray-400);
}

.button-box>a:nth-child(2n):focus {
  border-color: var(--c-gray-500);
  background-color: var(--c-gray-500);
  position: relative;
  top: 2px;
  transition: none;
}

.button-outline {
  border: solid 3px var(--c-gray-300);
  border-radius: 999px;
  padding: .55em .9em .5em;
  display: block;
  width: fit-content;
  letter-spacing: -0.022em;
  text-decoration: none;
  font-size: 1.2em;
  font-weight: 600;
  transition-property: border-color, background-color, color;
  transition-duration: 250ms;
}

.theme-dark .button-outline:first-child {
  border-color: var(--c-gray-300);
  background-color: var(--c-main-brown-light);
  color: var(--c-gray-300);
}


/** $Text **/
cite {
  font-style: normal;
  color: var(--c-gray-500);
}

.text-highlight {
  /* Highlighted text like restaurant name. */
  font-weight: 800;
  color: var(--c-gray-100);
}

.hint {
  /* Hint for outlink. */
  margin-left: 8px;
  color: var(--c-gray-500);
}

.icon-box li {
  position: relative;
  left: 1.375em;
  width: calc(100% - 1.375em);
  text-indent: -1.375em;
}

.icon-prefix::before,
.icon-suffix::after {
  display: inline-block;
  width: 1em;
  height: 1em;
  content: "";
  text-indent: 0;
  text-align: right;
}

.icon-prefix::before {
  /* ~ 6px */
  margin-right: .375em;
}


/** Icon images **/
.icon-address::before {
  content: "📍";
}

.icon-bus::before {
  content: "🚌";
}

.icon-fb::before {
  content: "📘";
}

.icon-hotpot::before {
  content: "🍲";
}

.icon-metro::before {
  content: "🚇";
}

.icon-phone::before {
  content: "☎️";
}

/* To adjust location of phone icon */
.icon-phone::before {
  /* ~ 7px */
  margin-right: .4375em;
}

.icon-time-5::before {
  content: "🕔";
}

.icon-time-11::before {
  content: "🕚";
}

.icon-outlink::after {
  margin-left: 4px;
  position: absolute;
  margin-top: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='gray' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-external-link'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
}

.quote-box cite {
  font-style: normal;
  color: var(--c-gray-500);
}


/** $Video **/
.video-thumbnail-box {
  margin-bottom: 32px;
}

@media screen and (min-width: 640px) {
  .video-thumbnail-box {
    margin: 32px;
  }
}

.video-thumbnail-box>a {
  display: block;
  position: relative;
}

.video-text-title {
  z-index: 10;
  position: absolute;
  padding: 16px 12px;
  width: min(80%, 640px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .8em;
  color: var(--c-gray-100);
}

.icon-central {
  z-index: 10;
  position: absolute;
  top: 50%;
  left: 50%;
}

.mask-video-top-black-bottom-0 {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgb(0, 0, 0);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .3) 90%);
}

.mask-video-top-black-bottom-black {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgb(0, 0, 0);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 10%, rgba(0, 0, 0, 0.3) 100%);
}

/* Youtube */
/* Youtube play button */
.icon-youtube {
  margin-left: -34px;
  margin-top: -24px;
  width: 68px;
  height: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 68 48'%3E%3Cpath class='ytp-large-play-button-bg' d='M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z' fill='rgba%2833%2C%2033%2C%2033%2C%200.5%29'%3E%3C/path%3E%3Cpath d='M 45,24 27,14 27,34' fill='%23fff'%3E%3C/path%3E%3C/svg%3E");
}

.video-thumbnail-box>a:hover .icon-youtube {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 68 48'%3E%3Cpath class='ytp-large-play-button-bg' d='M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z' fill='%23f00'%3E%3C/path%3E%3Cpath d='M 45,24 27,14 27,34' fill='%23fff'%3E%3C/path%3E%3C/svg%3E");
}

/* Youtube text */

/* Youtube logo */


/* Facebook */
/* Facebook play button */
.icon-video-play-facebook {
  margin: -40px 0 0 -40px;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  background-image: url(../img/icon-video-play-facebook.png);
}

.icon-video-play-facebook:hover {
  background-color: rgba(20, 22, 26, .7);
}

/* Facebook text */
.video-info-box {
  z-index: 10;
  position: absolute;
  top: auto;
  bottom: 0;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  width: calc(100% - 28px);
  line-height: 1;
}

@media screen and (min-width: 640px) {
  .video-info-box {
    padding: 0 6px 4px 12px;
    width: calc(100% - 18px);
    font-size: 1.1em;
  }
}

.video-info-text-box {
  flex-grow: 2;
  color: var(--c-gray-100);
}

.video-info-text-highlight {
  font-weight: 600;
}

.video-info-logo-box {
  background-image: url(../img/icon-video-logo-facebook.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 30px;
  height: 30px;
}

@media screen and (min-width: 640px) {
  .video-info-logo-box {
    width: 36px;
    height: 36px;
  }
}


/** $Special **/
.visually-hidden {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(0px 0px 99.9% 99.9%);
  clip-path: inset(0px 0px 99.9% 99.9%);
  overflow: hidden;
  height: 1px;
  width: 1px;
  padding: 0;
  border: 0;
}


/** $GENERAL > $HEADER **/
.masthead {
  display: flex;
  justify-content: center;
}

.header-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap;
  min-height: calc(100vh - 100px);
  padding: 2rem;
}

@media screen and (min-width: 1024px) {
  .header-container {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    height: auto;
    min-height: initial;
  }
}


/** Title & Logo **/
.title-box {
  display: flex;
  flex-direction: column;
}

.title-box a {
  color: var(--c-main-red-mid);
  text-decoration: none;
}

.logo-box {
  display: flex;
  justify-content: center;
  margin: 1em;
}

.logo-box img {
  width: 150px;
}

@media screen and (min-width: 1024px) {
  .title-box {
    flex-direction: row;
  }

  .logo-box {
    display: flex;
    align-items: center;
  }

  .header-container .logo-box img {
    width: 36px;
  }
}

.nav-box {
  display: flex;
  justify-content: space-between;
  padding: 0;
  text-transform: uppercase;
}

.nav-box>li {
  padding: 0.5em;
  font-size: 1.2em;
}

.nav-box>li>a {
  color: var(--c-gray-500);
  font-weight: 900;
  text-decoration: unset;
}

.nav-box>li>a:hover {
  color: var(--c-gray-200);
}


/** $GENERAL > $MAIN **/
/** Cover **/
.cover-box {
  overflow: hidden;
  max-height: 600px;
  /* min-height: 200px; */
  background-color: var(--c-main-brown-mid);
}

.cover-box img {
  width: 100vw;
}

/* Content frame */
.content article {
  padding: 4rem 2rem;
  font-size: 1.2em;
}


/** $GENERAL > $FOOTER **/
.mastfoot {
  line-height: 1.5em;
}

.footer-container {
  margin: 0 auto;
  padding: 2rem;
}

/** Info box **/
.footer-info-box a {
  text-decoration: none;
}



/** Copyright **/
.footer-copyright {
  text-align: center;
  font-size: .75em;
}

.footer-copyright,
.footer-copyright *,
.footer-copyright a,
.icon-mellowpenguin:visited {
  color: var(--c-main-brown-lighter);
}

@media screen and (min-width: 640px) {
  .copyright-line-break {
    display: none;
  }
}

.footer-copyright-box a {
  text-decoration: underline;
}

.icon-mellowpenguin:hover,
.icon-mellowpenguin:focus {
  color: var(--c-gray-600);
}

.icon-mellowpenguin::after {
  width: 0;
}



/*** $HOME ***/
/** $HOME > $MAIN  **/
/** Article **/
.home .history-article {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@media screen and (min-width: 640px) {
  .home .history-article {
    min-height: 40vh;
  }
}

.home .video-article {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.home .video-intro-box {
  margin-right: auto;
  margin-left: auto;
}

.home .fb-article {
  min-height: initial;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)),
    url(/img/env-1.jpg) no-repeat center center;
  background-size: cover;
}

@media screen and (min-width: 640px) {
  .home .fb-article {
    min-height: initial;
  }
}



/*** $ABOUT ***/
.about article p:not(.img-paragraph, .button-box) {
  text-indent: 2em;
}

@media screen and (min-width: 640px) {
  .about-history-button-box {
    position: relative;
    left: -.75rem;
  }

  .about-shacha-button-box {
    position: relative;
    left: -1rem;
  }
}



/*** $MENU ***/
.menu p {
  max-width: initial;
}

.menu-article p {
  text-align: center;
}

.menu-article a {
  text-decoration: none;
}

.map-box {
  width: 100%;
  height: 400px;
  background-image: url(../img/map-img-small.png);
  background-size: cover;
  background-position: center;
}

/* For extremely small screen */
@media screen and (max-width: 360px) {
  .map-box {
    background-image: url(../img/map-img-xsmall.png);
  }
}

@media screen and (min-width: 640px) {
  .map-box {
    background-image: url(../img/map-img-large.png);
  }
}

.map-box .popup-text {
  font-size: 1.2em;
}

.info-article li {
  margin: 1rem 0;
  line-height: 1.25em;
}

@media screen and (min-width: 1024px) {
  .menu-info-yuanhsiang-header {
    margin-top: 1.4em;
  }
}

.cta-button-box {
  margin: 2rem;
  text-align: center;
}



/*** $NEWS ***/
.news-box {
  margin: auto;
  padding: 4rem 2rem;
}

.news-box a {
  text-decoration: none;
}

.news-box>article {
  margin-top: 0;
  padding: 3rem 0;
}

.news-box h2 {
  font-size: 1.2em;
}

.tag-box {
  min-height: initial;
}

.tag-box span {
  display: inline-block;
  margin: .5rem .5em .5rem 0;
  padding: .5rem 1rem;
  border-width: 1px;
  border-style: solid;
  border-radius: 9999px;
  font-size: .7em;
}


/** Tag color settings **/
.tag-box>a:first-child>span {
  border-color: var(--c-orange);
  color: var(--c-orange);
}

.tag-box>a:nth-child(2)>span {
  border-color: var(--c-red-400);
  color: var(--c-red-400);
}

.cta-box p {
  margin: 1rem auto;
  line-height: 1.5em;
}

.news .content-footer-nav-box {
  display: flex;
  flex-direction: column;
  padding: 4rem 2rem;
  font-size: 1em;
}

.news .content-footer-nav-box img {
  width: 100px;
}

.news .content-footer-nav-box .nav-box {
  justify-content: center;
  flex-wrap: wrap;
}

.news .content-footer-nav-box .nav-box>li {
  flex-shrink: 0;
}


/* Note */

/* Tag color settings (alphebatical order) */
/*.tag-box .tag-chinatimes {
    border-color: var(--c-red-500);
    color: var(--c-red-500);
  }
  
  .tag-box .tag-ctitv {
    border-color: var(--c-light-blue-a400);
    color: var(--c-light-blue-a400);
  }
  
  .tag-box .tag-ctitvrec {
    border-color: var(--c-blue-700);
    color: var(--c-blue-700);
  }
  
  .tag-box .tag-eatfans {
    border-color: var(--c-pink-300);
    color: var(--c-pink-300);
  }
  
  .tag-box .tag-ebctv {
    border-color: var(--c-yellow-500);
    color: var(--c-yellow-500);
  }
  
  .tag-box .tag-ebctvtaiwans1001stories {
    border-color: var(--c-lime-800);
    color: var(--c-lime-800);
  }
  
  .tag-box .tag-ebctvthespiritoftaiwan {
    border-color: var(--c-green-700);
    color: var(--c-green-700);
  }
  
  .tag-box .tag-nexttv {
    border-color: var(--c-teal-200);
    color: var(--c-teal-200);
  }
  
  .tag-box .tag-nexttvwalker {
    border-color: var(--c-green-800);
    color: var(--c-green-800);
  }
  
  .tag-box .tag-tvbs {
    border-color: var(--c-light-blue-a400);
    color: var(--c-light-blue-a400);
  }
  
  .tag-box .tag-tvbsnewtaiwan {
    border-color: var(--c-blue-700);
    color: var(--c-blue-700);
  }
  
  .tag-box .tag-ustv {
    border-color: var(--c-red-a400);
    color: var(--c-red-a400);
  }
  
  .tag-box .tag-ustvfood {
    border-color: var(--c-orange-900);
    color: var(--c-orange-900);
  } */