html.fssopen,
html.fssopen body {
  /* class added to HTML element when full screen slider is open to hide potential body scrollbars */
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
  overflow: hidden;
}

section.dd_fullscreenslider {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  font-size: 16px; /* base font size */
  visibility: visible;
  overflow: hidden;
}

div.slidewrapper {
  /* wrapper DIV that surrounds the ARTICLE elements inside .dd_fullscreenslider */
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translate3d(0, 0, 0); /* to prevent flickering in iOS */
  -moz-transition: -moz-transform 0.5s; /* actual duration controlled by script */
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
}

ul.fssnav {
  /* UL list dynamically added by script for Slider navigation */
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
  position: fixed;
  top: 50%; /* vertically center menu */
  right: 20px; /* distance from right edge of screen */
  transform: translateY(-50%); /* vertically center menu */
}

ul.fssnav li {
  margin-bottom: 15px;
}

ul.fssnav li a {
  text-decoration: none;
  border: 5px solid white; /* border color of nav links */
  border-radius: 50%;
  width: 10px; /* dimensions of nav links */
  height: 10px;
  display: block;
  position: relative;
  text-indent: -500px;
  outline: none;
  overflow: hidden;
}

ul.fssnav li a::after {
  /* create "fill" element inside A */
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 100%;
  left: 0;
  background: white; /* color of "fill" element */
  transition: top 0.5s; /* transition for "fill up" effect */
}

ul.fssnav li.selected a::after {
  top: 0; /* fill up selected A element from bottom to top */
}

section.dd_fullscreenslider article.slide {
  /* CSS for each slide */
  width: 100%;
  height: 100%;
  display: block;
  font-family: "Lato", sans-serif; /* Use google font */
  font-size: 1.2em;
  line-height: 2em;
  color: white;
  overflow: hidden;
  -webkit-box-sizing: border-box; /* include padding/ border as part of declared menu width */
  -moz-box-sizing: border-box;
  z-index: 1000;
  /* background: #E56464; */
  -webkit-transform: translate3d(0, 0, 0); /* to prevent flickering in iOS */
}

section.dd_fullscreenslider article.slide h2 {
  /* H2 Header inside each slide */
  font-size: 3em;
  margin: 0;
  line-height: 1.1em;
  letter-spacing: 3px;
}

section.dd_fullscreenslider article.slide .scrollable {
  /* Assign this class to elements within a slide that should be scrollable */
  overflow: auto;
}

section.dd_fullscreenslider article.slide a {
  color: yellow;
}

section.dd_fullscreenslider article.slide:nth-of-type(2) {
  /* 2nd demo slide bgcolor */
  /* background: #22afe2; */
}

section.dd_fullscreenslider article.slide:nth-of-type(3) {
  /* 3rd demo slide bgcolor */
  /* background: #88d332; */
}

section.dd_fullscreenslider article.slide:nth-of-type(4) {
  /* 4th demo slide bgcolor */
  /* background: #a36400; */
}
section.dd_fullscreenslider article.slide:nth-of-type(5) {
  /* height: 20vh; /* 視窗高度的20% */
  /* background: #2c2b29; */
}

section.dd_fullscreenslider div.closex {
  /* Large x close button inside Slider */
  width: 50px;
  height: 50px;
  overflow: hidden;
  display: block;
  position: fixed;
  cursor: pointer;
  text-indent: -1000px;
  opacity: 0.8;
  z-index: 1001;
  top: 5px;
  right: 3px;
}

section.dd_fullscreenslider div.closex::before,
section.dd_fullscreenslider div.closex::after {
  /* render large x inside close button */
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 6px;
  background: white; /* color of x button */
  top: 50%;
  margin-top: -3px;
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

section.dd_fullscreenslider div.closex::after {
  /* render large cross inside close button */
  -ms-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
@media only screen and (max-width: 370px) {
  section.dd_fullscreenslider article.slide {
    /* CSS for each slide */
    width: 100%;
    height: 100vh;
    display: block;
    font-family: "Lato", sans-serif; /* Use google font */
    font-size: 1.2em;
    line-height: 2em;
    color: white;
    overflow: hidden;
    -webkit-box-sizing: border-box; /* include padding/ border as part of declared menu width */
    -moz-box-sizing: border-box;
    z-index: 1000;
    /* background: #E56464; */
    -webkit-transform: translate3d(0, 0, 0); /* to prevent flickering in iOS */
  }
}