@charset "UTF-8";
* {
  margin: 0;
  font-family: 'Noto Sans TC', 'Noto Sans JP', sans-serif; }

::-moz-selection {
  background-color: #9bcb82;
  color: #fff; }

::selection {
  background-color: #9bcb82;
  color: #fff; }

body .opacity {
  color: transparent; }

body h1, body h2, body h3, body h4, body h5, body h6 {
  text-align: center;
  font-weight: 600;
  margin-bottom: 1em; }

body a {
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s; }
  body a:hover {
    text-decoration: none; }
    body a:hover img {
      -webkit-filter: grayscale(90%);
      filter: grayscale(90%); }

body p {
  text-align: justify; }

body section {
  padding: 50px 0; }

body :focus {
  outline: auto 5px #1a6032; }

body .text-primary {
  color: #256f37 !important; }

body .text-secondary {
  color: #1a6032 !important; }

body .text-light {
  color: #ffffb9 !important; }

body .iframe-fluid {
  position: relative;
  padding-top: 30px;
  padding-bottom: 43.7vw;
  height: 0;
  overflow: hidden; }
  body .iframe-fluid iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

body .slick-arrow {
  z-index: 100; }
  body .slick-arrow:before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 2rem; }

body .slick-prev:before {
  content: '\f053'; }

body .slick-next:before {
  content: '\f054'; }

body .linkIcon {
  position: fixed;
  right: 1em;
  bottom: 1em;
  width: 20%;
  z-index: 1000;
  -webkit-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  -webkit-filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.5));
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.5)); }
  body .linkIcon:hover {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1); }
    body .linkIcon:hover img {
      -webkit-filter: grayscale(40%);
      filter: grayscale(40%); }

@media (min-width: 768px) {
  body .linkIcon {
    right: 2em;
    bottom: 2em; }
  body .iframe-fluid {
    padding-bottom: 46.5vw; } }

@media (min-width: 992px) {
  body section {
    padding: 100px 0; }
  body .linkIcon {
    right: auto;
    left: 3em;
    bottom: 2.5em; }
    body .linkIcon.linkIcon-shrink {
      width: 10%; }
  body .iframe-fluid {
    padding-bottom: 48vw; } }

@media (min-width: 1440px) {
  body .iframe-fluid {
    padding-bottom: 41vw; } }

@media (min-width: 1608px) {
  body .iframe-fluid {
    padding-bottom: 31vw; } }

#mainNav {
  background-color: #fff; }
  #mainNav a:hover img, #mainNav a:active img {
    -webkit-clip-path: inset(0) !important;
    clip-path: inset(0) !important; }
  #mainNav .navbar-toggler {
    font-size: 12px;
    right: 0;
    padding: 13px;
    text-transform: uppercase;
    color: #256f37;
    border: 0;
    background-color: #fff; }
  #mainNav .navbar-brand {
    color: #256f37; }
    #mainNav .navbar-brand.active, #mainNav .navbar-brand:active, #mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
      color: #184924; }
  #mainNav.navbar-shrink {
    background-color: #bad678; }
    #mainNav.navbar-shrink .navbar-toggler {
      background-color: #bad678; }
  #mainNav .navbar-nav {
    padding-bottom: .5em; }
    #mainNav .navbar-nav .nav-item .nav-link {
      font-size: 90%;
      font-weight: 400;
      padding: 0.75em 0;
      letter-spacing: 1px;
      color: #000; }
      #mainNav .navbar-nav .nav-item .nav-link:before {
        content: '　';
        -webkit-clip-path: polygon(47% 48%, 65% 16%, 70% 16%, 100% 81%, 0 81%, 30% 28%, 35% 28%);
        clip-path: polygon(47% 48%, 65% 16%, 70% 16%, 100% 81%, 0 81%, 30% 28%, 35% 28%);
        background-color: transparent;
        -webkit-transition: background-color .7s;
        -o-transition: background-color .7s;
        transition: background-color .7s;
        margin-right: .2em; }
      #mainNav .navbar-nav .nav-item .nav-link.active, #mainNav .navbar-nav .nav-item .nav-link:hover {
        color: #1a6032; }
        #mainNav .navbar-nav .nav-item .nav-link.active:before, #mainNav .navbar-nav .nav-item .nav-link:hover:before {
          background-color: #5d9f3c; }
      #mainNav .navbar-nav .nav-item .nav-link.dropdown-toggle:hover:before {
        background-color: transparent; }
    #mainNav .navbar-nav .dropdown-menu {
      background-color: #bad678; }
      #mainNav .navbar-nav .dropdown-menu .dropdown-item:hover {
        background-color: #9bcb82;
        color: #fff; }

@media (min-width: 992px) {
  #mainNav {
    -webkit-transition: padding-top 0.3s, padding-bottom 0.3s;
    -moz-transition: padding-top 0.3s, padding-bottom 0.3s;
    -o-transition: padding-top 0.3s, padding-bottom 0.3s;
    transition: padding-top 0.3s, padding-bottom 0.3s;
    border: none;
    background-color: #fff; }
    #mainNav.navbar-shrink {
      background-color: #bad678 !important;
      -webkit-transform: all ease-in-out .3s;
      -ms-transform: all ease-in-out .3s;
      transform: all ease-in-out .3s; }
    #mainNav .navbar-toggler {
      background-color: rgba(186, 214, 120, 0); }
    #mainNav .navbar-brand {
      font-size: 1.75em;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s; }
    #mainNav .navbar-nav {
      padding: .25em 0; }
      #mainNav .navbar-nav .nav-item .nav-link {
        padding: 1em !important; }
    #mainNav.navbar-shrink {
      padding-top: 0;
      padding-bottom: 0;
      background-color: #212529; }
      #mainNav.navbar-shrink .navbar-brand {
        font-size: 1.25em;
        padding: 12px 0; }
      #mainNav.navbar-shrink .navbar-nav .nav-item .nav-link.active, #mainNav.navbar-shrink .navbar-nav .nav-item .nav-link:hover {
        color: #fff; } }

@media (min-width: 1200px) {
  #mainNav .navbar-nav .dropdown-menu {
    left: 85%; } }

/* 首頁大Banner */
header {
  background: #1a6032;
  height: 100%;
  position: relative;
  margin-top: 50px; }
  header .slick-dotted.slick-slider {
    margin: 0; }
  header .slick-dots li.slick-active button:before {
    color: #fff; }
  header .slick-dots li button:before {
    color: #fff;
    top: -3em; }
  header .banner-slider .bannerMain {
    position: relative;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(80%, #fff), to(#ffffb9));
    background: -webkit-linear-gradient(#fff 80%, #ffffb9 100%);
    background: -o-linear-gradient(#fff 80%, #ffffb9 100%);
    background: linear-gradient(#fff 80%, #ffffb9 100%); }
    header .banner-slider .bannerMain .main02, header .banner-slider .bannerMain .main03, header .banner-slider .bannerMain .main04, header .banner-slider .bannerMain .main05 {
      position: absolute;
      top: 0; }
    header .banner-slider .bannerMain .main01, header .banner-slider .bannerMain .main02 {
      z-index: 2; }
    header .banner-slider .bannerMain .main03 {
      z-index: 3; }
    header .banner-slider .bannerMain .main04 {
      z-index: 0; }
    header .banner-slider .bannerMain .main05 {
      z-index: 4; }
    header .banner-slider .bannerMain .bannerTop, header .banner-slider .bannerMain .bannerInfo {
      z-index: 5; }
    header .banner-slider .bannerMain .bannerTop {
      padding: 0 4em;
      position: absolute;
      bottom: 30em;
      -webkit-filter: drop-shadow(3px 3px 3px #212529);
      filter: drop-shadow(3px 3px 3px #212529); }
    header .banner-slider .bannerMain .bannerInfo {
      margin: 2em auto;
      padding: 0 4em; }
    header .banner-slider .bannerMain .logo {
      text-align: center;
      padding-bottom: 2em; }
      header .banner-slider .bannerMain .logo img {
        padding: 1em 5em;
        max-width: 100%;
        display: block;
        /*filter: invert(100%);*/
        /*filter: brightness(20%);*/ }
  header a.quickBtn {
    position: absolute;
    top: 1.5em;
    width: 2em;
    height: 2em;
    text-align: center;
    line-height: 1.75em;
    color: #fff; }
    header a.quickBtn.fb {
      background-color: #3b5998;
      right: 3.5em; }
    header a.quickBtn.quest {
      background-color: #ea6000;
      right: 1em; }
    header a.quickBtn:hover, header a.quickBtn:focus {
      background-color: #ffe100;
      color: #000;
      -webkit-box-shadow: 0 0 10px #ffffb9;
      box-shadow: 0 0 10px #ffffb9; }

@media (min-width: 667px) {
  header .banner-slider .bannerMain .main01, header .banner-slider .bannerMain .main02, header .banner-slider .bannerMain .main03, header .banner-slider .bannerMain .main04, header .banner-slider .bannerMain .main05 {
    margin-left: 8%;
    max-width: 60%; }
  header .banner-slider .bannerMain .bannerTop {
    width: 55%;
    right: 34%;
    bottom: 19em; }
  header .banner-slider .bannerMain .bannerInfo {
    max-width: 70%; }
  header .banner-slider .bannerMain .logo img {
    padding: 1em;
    display: inline;
    max-width: 40%; } }

@media (min-width: 768px) {
  header .banner-slider .bannerMain .main01, header .banner-slider .bannerMain .main02, header .banner-slider .bannerMain .main03, header .banner-slider .bannerMain .main04, header .banner-slider .bannerMain .main05 {
    margin-left: 0;
    max-width: 100%; }
  header .banner-slider .bannerMain .bannerTop {
    bottom: 23em;
    right: 15%;
    width: 70%; }
  header .banner-slider .bannerMain .bannerInfo {
    max-width: 65%; } }

@media (min-width: 992px) {
  header {
    position: relative;
    margin-top: 65px; }
    header .banner-slider .bannerMain .main01, header .banner-slider .bannerMain .main02, header .banner-slider .bannerMain .main03, header .banner-slider .bannerMain .main04, header .banner-slider .bannerMain .main05 {
      margin-left: 25%;
      max-width: 80%; }
    header .banner-slider .bannerMain .bannerTop {
      position: absolute;
      margin: 0;
      right: 7%;
      bottom: 4em;
      text-align: right;
      width: 55%; }
    header .banner-slider .bannerMain .bannerInfo {
      position: absolute;
      top: 0;
      max-width: 50%; }
    header .banner-slider .bannerMain .logo {
      position: absolute;
      width: 20%;
      top: 45%;
      left: 5%; }
      header .banner-slider .bannerMain .logo img {
        display: block;
        padding: .5em;
        max-width: 100%; }
    header a.quickBtn {
      top: 1.5em;
      width: 2.5em;
      height: 2.5em;
      font-size: 1.1em;
      text-align: center;
      line-height: 2.5em; }
      header a.quickBtn.fb {
        right: 5em; }
      header a.quickBtn.quest {
        right: 1.5em; } }

@media (min-width: 1200px) {
  header .banner-slider .bannerMain .main01, header .banner-slider .bannerMain .main02, header .banner-slider .bannerMain .main03, header .banner-slider .bannerMain .main04, header .banner-slider .bannerMain .main05 {
    margin-left: 30%;
    max-width: 70%;
    top: 0; }
  header .banner-slider .bannerMain .bannerTop {
    right: 10%;
    width: 50%; }
  header .banner-slider .bannerMain .logo {
    top: 48%;
    width: 40%;
    text-align: left; }
    header .banner-slider .bannerMain .logo img {
      display: inline;
      max-width: 40%; } }

@media (min-width: 1608px) {
  header .banner-slider .bannerMain .main01, header .banner-slider .bannerMain .main02, header .banner-slider .bannerMain .main03, header .banner-slider .bannerMain .main04, header .banner-slider .bannerMain .main05, header .banner-slider .bannerMain .bannerMark {
    margin-left: 40%;
    max-width: 53%;
    margin-top: 3em; }
  header .banner-slider .bannerMain .bannerTop {
    right: 15%;
    bottom: 5em;
    width: 35%; }
  header .banner-slider .bannerMain .bannerInfo {
    top: 3em;
    left: 6em;
    max-width: 40%; } }

section#intro {
  background-color: #1a6032;
  background-image: url(../img/pattern.png);
  color: #fff; }

/* 首頁最新消息 */
section#news {
  background-color: #1a6032;
  padding: 0;
  position: relative; }
  section#news .news-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    section#news .news-box .news-item {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      margin: 0 .25em; }
      section#news .news-box .news-item a {
        color: #fff; }
        section#news .news-box .news-item a .title {
          margin-top: .25em; }
  section#news .more {
    position: absolute;
    top: -2em;
    right: 1em;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    z-index: 100; }
    section#news .more:hover, section#news .more:focus {
      color: #ffe100;
      -webkit-transition: color .3s;
      -o-transition: color .3s;
      transition: color .3s; }

/* 首頁最新消息 >768 */
@media (min-width: 768px) {
  section#news .news-box .news-item {
    position: relative; }
    section#news .news-box .news-item a {
      color: #fff; }
      section#news .news-box .news-item a img {
        -webkit-clip-path: inset(0);
        clip-path: inset(0);
        -webkit-transition: -webkit-clip-path .5s ease-out;
        transition: -webkit-clip-path .5s ease-out;
        -o-transition: clip-path .5s ease-out;
        transition: clip-path .5s ease-out;
        transition: clip-path .5s ease-out, -webkit-clip-path .5s ease-out; }
      section#news .news-box .news-item a .title {
        position: absolute;
        background-color: rgba(0, 0, 0, 0.5);
        bottom: 0;
        width: 100%;
        padding-top: .75em;
        -webkit-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s; }
      section#news .news-box .news-item a:hover img {
        -webkit-clip-path: inset(0.75rem);
        clip-path: inset(0.75rem); }
      section#news .news-box .news-item a:hover .title {
        background-color: transparent;
        color: transparent; }
  section#news .news-box .more {
    right: 1.5em; } }

section#museum {
  padding-left: 1em;
  padding-right: 1em;
  background-color: #fff; }
  section#museum .museum-slider .museum-item {
    margin: 0 .25em;
    padding: 0 .5em; }
    section#museum .museum-slider .museum-item a {
      color: #000; }
    section#museum .museum-slider .museum-item:hover {
      background-color: #f8f9fa; }
      section#museum .museum-slider .museum-item:hover a {
        color: #1a6032; }
  section#museum .museum-slider .slick-arrow:before {
    color: #1a6032;
    /*font-size: 2rem;*/ }
  section#museum .museum-slider h5 {
    text-align: left;
    color: #5d9f3c;
    margin: .5em 0; }
  section#museum .museum-slider h6 {
    margin-top: .5em; }
  section#museum .museum-slider .iframe-fluid {
    background-color: #343a40; }
  section#museum .more {
    margin-top: 2em;
    text-align: right; }
    section#museum .more a {
      color: #343a40; }
      section#museum .more a:hover {
        color: #1a6032; }

@media (min-width: 992px) {
  section#museum {
    padding-left: 2em;
    padding-right: 2em; }
    section#museum .museum-slider div {
      margin: 0 .5em; }
    section#museum .museum-slider .iframe-fluid {
      margin-left: .75em;
      margin-right: .75em; }
    section#museum .museum-slider a img {
      -webkit-clip-path: inset(0);
      clip-path: inset(0);
      -webkit-transition: -webkit-clip-path .5s ease-out;
      transition: -webkit-clip-path .5s ease-out;
      -o-transition: clip-path .5s ease-out;
      transition: clip-path .5s ease-out;
      transition: clip-path .5s ease-out, -webkit-clip-path .5s ease-out; }
    section#museum .museum-slider a:hover img {
      -webkit-clip-path: inset(1rem);
      clip-path: inset(1rem); } }

@media (min-width: 1200px) {
  section#museum .museum-slider div {
    margin: 0 1.25em; } }

section#active {
  padding-left: 1em;
  padding-right: 1.5em;
  background-color: #ffe100;
  background-image: url(../img/pattern.png); }
  section#active .active-slider a.main {
    color: #256f37; }
  section#active .active-slider a.npm {
    color: #7d0000; }
  section#active .active-slider a img {
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
    -webkit-transition: -webkit-clip-path .5s ease-out;
    transition: -webkit-clip-path .5s ease-out;
    -o-transition: clip-path .5s ease-out;
    transition: clip-path .5s ease-out;
    transition: clip-path .5s ease-out, -webkit-clip-path .5s ease-out; }
  section#active .active-slider a:hover.main {
    color: #184924; }
  section#active .active-slider a:hover.npm {
    color: #4a0000; }
  section#active .active-slider a:hover img {
    -webkit-clip-path: inset(1rem);
    clip-path: inset(1rem); }
  section#active .active-slider h6 {
    margin-bottom: .25em; }
  section#active .active-slider p {
    text-align: center; }
  section#active .active-slider div {
    margin: 0 .25em; }
    section#active .active-slider div a {
      color: #000; }
  section#active .active-slider .slick-arrow:before {
    color: #fff; }
  section#active .active-slider .slick-prev {
    left: -5px; }
  section#active .active-slider .slick-next {
    right: -20px; }

@media (min-width: 992px) {
  section#active .active-slider div {
    margin: 0 .5em; } }

@media (min-width: 1200px) {
  section#active .active-slider div {
    margin: 0 1.25em; } }

footer {
  background-color: #495057;
  text-align: center;
  color: #fff;
  padding: 2em 0; }
  footer a {
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out; }
    footer a:hover img {
      -webkit-filter: grayscale(0);
      filter: grayscale(0);
      -webkit-filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.3));
      filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.3)); }
  @media (min-width: 768px) {
    footer a img {
      max-width: 30%; } }

/* 麵包屑 */
nav[aria-label="breadcrumb"] .breadcrumb {
  background-color: rgba(255, 255, 185, 0.3); }

@media (min-width: 992px) {
  nav[aria-label="breadcrumb"] .breadcrumb {
    margin-top: 60px; } }

/* 內頁樣式 */
a.btn {
  background-color: #256f37;
  border-radius: 50px;
  color: #fff !important; }
  a.btn:hover {
    background-color: #1a6032; }

body#inpage {
  background-color: rgba(255, 255, 185, 0.3);
  background-image: url(../img/pattern.png); }
  body#inpage a {
    color: #5d9f3c; }
    body#inpage a img {
      -webkit-clip-path: inset(0);
      clip-path: inset(0);
      -webkit-transition: all .3s ease-in-out;
      -o-transition: all .3s ease-in-out;
      transition: all .3s ease-in-out; }
    body#inpage a:hover, body#inpage a:active {
      color: #9bcb82; }
      body#inpage a:hover img, body#inpage a:active img {
        -webkit-clip-path: inset(0.75rem);
        clip-path: inset(0.75rem); }
  body#inpage .slick-slide {
    text-align: center; }
    body#inpage .slick-slide img {
      display: inline !important; }
  body#inpage header {
    top: 60px; }
  body#inpage section#theme {
    padding-top: 80px; }
  body#inpage .theme-img {
    border-radius: 50%;
    max-width: 40%;
    margin: .5em; }
  @media (min-width: 768px) {
    body#inpage section#theme {
      padding-top: 150px; }
      body#inpage section#theme .theme-img {
        max-width: 100%;
        margin: 1em; } }
  @media (min-width: 992px) {
    body#inpage header {
      margin-top: 65px; } }

/* 最新消息清單頁 */
body#inpage div#newsList {
  margin-top: 60px; }
  body#inpage div#newsList .newsList {
    margin-top: 2em; }
    body#inpage div#newsList .newsList a {
      color: #fff; }
      body#inpage div#newsList .newsList a .title {
        background-color: rgba(0, 0, 0, 0.5);
        padding: .5em;
        text-align: center;
        -webkit-transition: all .5s;
        -o-transition: all .5s;
        transition: all .5s; }
        body#inpage div#newsList .newsList a .title h6 {
          margin-bottom: 0; }
      body#inpage div#newsList .newsList a:hover .title {
        background-color: rgba(0, 0, 0, 0.8); }

@media (min-width: 992px) {
  body#inpage div#newsList {
    margin-top: 0; } }

/* 最新消息內頁 */
body#inpage div#newsInner {
  margin-top: 60px; }
  body#inpage div#newsInner .newsDate {
    text-align: right;
    color: #1a6032;
    font-size: 1em; }

@media (min-width: 992px) {
  body#inpage div#newsInner {
    margin-top: 0; } }

/* 經典館藏清單頁 */
body#inpage div#museumList {
  margin-top: 60px; }
  body#inpage div#museumList .museumList {
    margin-top: 1.5em; }
    body#inpage div#museumList .museumList a h6 {
      color: #1a6032;
      margin-bottom: .5em; }
    body#inpage div#museumList .museumList a .title {
      background-color: rgba(0, 0, 0, 0.3);
      padding: .5em;
      color: #fff;
      -webkit-transition: all .5s;
      -o-transition: all .5s;
      transition: all .5s; }
    body#inpage div#museumList .museumList a:hover .title {
      background-color: rgba(0, 0, 0, 0.5); }

@media (min-width: 992px) {
  body#inpage div#museumList {
    margin-top: 0; } }

/* 博物館巡禮內頁 */
body#inpage div#museumInner {
  margin-top: 60px; }
  body#inpage div#museumInner .museumInner-slider {
    padding: 0 1em;
    margin-bottom: 4em; }
    body#inpage div#museumInner .museumInner-slider .slick-arrow.slick-prev {
      left: -10px; }
    body#inpage div#museumInner .museumInner-slider .slick-arrow.slick-next {
      right: -10px; }
    body#inpage div#museumInner .museumInner-slider .slick-arrow:before {
      color: #1a6032; }
    body#inpage div#museumInner .museumInner-slider .slick-dots {
      left: 0; }
      body#inpage div#museumInner .museumInner-slider .slick-dots li.slick-active button:before {
        color: #1a6032; }
      body#inpage div#museumInner .museumInner-slider .slick-dots li button:before {
        color: #1a6032; }

@media (min-width: 768px) {
  body#inpage div#museumInner .museumInner-slider .slick-arrow.slick-prev {
    left: -20px; }
  body#inpage div#museumInner .museumInner-slider .slick-arrow.slick-next {
    right: -20px; } }

@media (min-width: 992px) {
  body#inpage div#museumInner {
    margin-top: 0; }
    body#inpage div#museumInner .museumInner-slider {
      padding: 0 3em; } }

/* 活動訊息禮內頁 */
body#inpage div#activeInner {
  margin-top: 60px; }
  body#inpage div#activeInner h5 {
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: .5em 0; }

@media (min-width: 992px) {
  body#inpage div#activeInner {
    margin-top: 0; } }

/* 故宮館 */
body#npm a {
  color: #7d0000; }
  body#npm a:hover {
    color: #000; }

body#npm .text-npm {
  color: #7d0000; }

body#npm .text-pink {
  color: #e85d5d; }

body#npm .text-yellow {
  color: #e4b94a; }

body#npm .text-green {
  color: #02aa99; }

body#npm .text-blue {
  color: #07359b; }

body#npm #mainNav .navbar-toggler {
  color: #7d0000; }

body#npm #mainNav .navbar-nav .nav-item .nav-link:before {
  content: ''; }

body#npm #mainNav .navbar-nav .nav-item .nav-link:hover, body#npm #mainNav .navbar-nav .nav-item .nav-link:active {
  color: #7d0000; }

body#npm #mainNav .navbar-nav .nav-item .nav-link .fb {
  background-color: #3b5998;
  color: #fff;
  padding: 0 .5em;
  line-height: 1.75em;
  -webkit-transition: all ease-out .2s;
  -o-transition: all ease-out .2s;
  transition: all ease-out .2s; }
  body#npm #mainNav .navbar-nav .nav-item .nav-link .fb:hover, body#npm #mainNav .navbar-nav .nav-item .nav-link .fb:active {
    background-color: #07359b; }

body#npm #mainNav.navbar-shrink {
  background-color: #7d0000 !important; }
  body#npm #mainNav.navbar-shrink .navbar-brand img {
    -webkit-filter: invert(100);
    filter: invert(100); }
  body#npm #mainNav.navbar-shrink .navbar-toggler {
    background-color: #7d0000 !important;
    color: #fff; }
  body#npm #mainNav.navbar-shrink .navbar-nav .nav-item .nav-link {
    color: #fff; }

body#npm header {
  position: relative;
  top: 60px;
  background-color: #fff;
  margin-top: 0;
  overflow: hidden; }
  body#npm header .banner01 {
    width: 320%; }
  body#npm header .banner02, body#npm header .banner03, body#npm header .banner04, body#npm header .banner05, body#npm header .npmTop, body#npm header .npmInfo, body#npm header .npmCube, body#npm header .npmLogo, body#npm header .icomLogo {
    position: absolute; }
  body#npm header .banner02, body#npm header .banner03, body#npm header .banner04, body#npm header .banner05, body#npm header .npmInfo {
    width: 55%; }
  body#npm header .banner02 {
    top: 15%;
    right: 0;
    z-index: 5; }
  body#npm header .banner03 {
    display: none; }
  body#npm header .banner04 {
    top: 25%;
    left: -3em;
    -webkit-filter: opacity(30%);
    filter: opacity(30%); }
  body#npm header .banner05 {
    top: 1em;
    right: 0;
    -webkit-filter: opacity(30%);
    filter: opacity(30%); }
  body#npm header .npmTop {
    top: 15%;
    margin: 0 10%;
    width: 80%; }
  body#npm header .npmInfo {
    top: 52%;
    left: 3%;
    -webkit-filter: invert(100%);
    filter: invert(100%); }
  body#npm header .npmLogo {
    width: 35%;
    bottom: 3em;
    left: .75em; }
  body#npm header .icomLogo {
    width: 15%;
    bottom: 1em;
    left: 3.5em; }
  body#npm header .npmCube {
    width: 100%;
    color: #78161b; }
    body#npm header .npmCube.cube01 {
      top: 5%;
      right: -35%; }
    body#npm header .npmCube.cube02 {
      top: 44%;
      left: -40%; }
    body#npm header .npmCube.cube03 {
      top: 73%; }
  body#npm header a.goHome {
    position: absolute;
    top: 1em;
    left: 1em; }
  body#npm header a.fb {
    top: 1em;
    right: 1em;
    color: #fff;
    z-index: 10; }

body#npm section#npmIntro {
  background-color: #7d0000;
  color: #fff;
  padding-bottom: 0;
  overflow: hidden; }
  body#npm section#npmIntro .decoration {
    margin-left: -1em;
    max-width: 110vw; }

body#npm section#npmCont .col-12 {
  margin-top: 3em; }

body#npm section#npmRelics {
  background-color: rgba(228, 185, 74, 0.2); }
  body#npm section#npmRelics .npmRelics-slider .slick-arrow:before {
    color: #02aa99; }
  body#npm section#npmRelics .npmRelics-slider .npmRelics-item {
    margin: .5em; }
    body#npm section#npmRelics .npmRelics-slider .npmRelics-item a img {
      -webkit-clip-path: inset(0);
      clip-path: inset(0);
      -webkit-transition: -webkit-clip-path .5s ease-out;
      transition: -webkit-clip-path .5s ease-out;
      -o-transition: clip-path .5s ease-out;
      transition: clip-path .5s ease-out;
      transition: clip-path .5s ease-out, -webkit-clip-path .5s ease-out; }
    body#npm section#npmRelics .npmRelics-slider .npmRelics-item a h6 {
      margin-top: .5em; }
    body#npm section#npmRelics .npmRelics-slider .npmRelics-item a:hover img {
      -webkit-clip-path: inset(0.5rem);
      clip-path: inset(0.5rem); }

body#npm section#npmExhi {
  background-color: rgba(228, 185, 74, 0.2); }
  body#npm section#npmExhi .npmExhi-slider .slick-arrow:before {
    color: #02aa99; }
  body#npm section#npmExhi .npmExhi-slider .npmExhi-item {
    margin: .5em; }
    body#npm section#npmExhi .npmExhi-slider .npmExhi-item a img {
      -webkit-clip-path: inset(0);
      clip-path: inset(0);
      -webkit-transition: -webkit-clip-path .5s ease-out;
      transition: -webkit-clip-path .5s ease-out;
      -o-transition: clip-path .5s ease-out;
      transition: clip-path .5s ease-out;
      transition: clip-path .5s ease-out, -webkit-clip-path .5s ease-out; }
    body#npm section#npmExhi .npmExhi-slider .npmExhi-item a h6 {
      margin-top: .5em; }
    body#npm section#npmExhi .npmExhi-slider .npmExhi-item a:hover img {
      -webkit-clip-path: inset(0.5rem);
      clip-path: inset(0.5rem); }

body#npm section#inner .npmInner-sliderNav {
  margin: 1em 0; }

body#npm section#inner .npmInner-sliderNav .slick-arrow:before {
  color: #02aa99; }

body#npm section#inner .npmInner-sliderNav .sliderNav-item {
  margin: 0 .5em; }

body#npm section#inner .back {
  margin-top: 5em;
  background-color: #7d0000;
  color: #fff;
  border-radius: 5px; }
  body#npm section#inner .back:hover, body#npm section#inner .back:active {
    background-color: #4a0000; }

body#npm footer {
  background-color: #02aa99; }

@media (min-width: 667px) {
  body#npm header .banner01 {
    width: 110%; }
  body#npm header .banner02 {
    width: 22%;
    top: 2%; }
  body#npm header .banner04 {
    width: 25%;
    top: 13%;
    left: 0; }
  body#npm header .banner05 {
    width: 30%;
    top: 0; }
  body#npm header .npmTop {
    top: 20%;
    width: 60%; }
  body#npm header .npmInfo {
    top: 72%;
    left: 50%;
    width: 25%;
    -webkit-filter: invert(0);
    filter: invert(0); }
  body#npm header .npmLogo {
    width: 20%;
    bottom: 1em;
    left: 3%; }
  body#npm header .icomLogo {
    width: 10%;
    left: 30%;
    bottom: 1em; }
  body#npm header .npmCube.cube01 {
    font-size: 1.25em; }
  body#npm header .npmCube.cube02 {
    font-size: .75em;
    top: 40%;
    left: -45%; }
  body#npm header .npmCube.cube03 {
    font-size: .9em;
    top: 60%; }
  body#npm section#npmIntro .decoration {
    max-width: 80vw;
    margin-left: 10vw;
    margin-bottom: -4em; } }

@media (min-width: 768px) {
  body#npm header .banner01 {
    width: 250%; }
  body#npm header .banner02, body#npm header .banner03, body#npm header .banner04, body#npm header .banner05 {
    width: 50%; }
  body#npm header .banner02 {
    top: 3%; }
  body#npm header .banner04 {
    top: 20%;
    left: -10%; }
  body#npm header .banner05 {
    right: 5%; }
  body#npm header .npmTop {
    top: 15%;
    width: 65%; }
  body#npm header .npmInfo {
    top: 60%;
    left: 10%;
    width: 35%;
    -webkit-filter: invert(100%);
    filter: invert(100%); }
  body#npm header .npmLogo {
    width: 25%;
    bottom: 5.5em;
    left: 7%; }
  body#npm header .icomLogo {
    width: 10%;
    left: 16%;
    bottom: 2em; }
  body#npm header .npmCube.cube02 {
    font-size: .75em;
    top: 50%;
    left: -40%; }
  body#npm header .npmCube.cube03 {
    font-size: .9em;
    top: 70%; }
  body#npm section#npmIntro .decoration {
    max-width: 70vw;
    margin-left: 35vw; } }

@media (min-width: 1024px) {
  body#npm header .banner01 {
    width: 140%; }
  body#npm header .banner02 {
    width: 28%;
    top: 3%; }
  body#npm header .banner03 {
    display: inline;
    position: absolute;
    width: 28%;
    top: 26%;
    z-index: 5; }
  body#npm header .banner04 {
    width: 30%;
    top: 5%;
    left: 0; }
  body#npm header .banner05 {
    width: 35%;
    right: 3%; }
  body#npm header .npmTop {
    top: 15%;
    width: 60%; }
  body#npm header .npmInfo {
    width: 25%;
    top: 78%;
    left: 46%;
    -webkit-filter: invert(0);
    filter: invert(0); }
  body#npm header .npmLogo {
    width: 15%;
    bottom: 3.5em;
    left: 28%; }
  body#npm header .icomLogo {
    width: 6%;
    left: 33%;
    bottom: 1.5em; }
  body#npm header .npmCube.cube02 {
    top: 40%;
    left: -45%; }
  body#npm header .npmCube.cube03 {
    top: 65%;
    right: -5%; }
  body#npm section#npmIntro .decoration {
    max-width: 60vw;
    margin-left: 45vw; }
  body#npm section#npmCont .cont02 {
    position: relative;
    top: 8em; }
    body#npm section#npmCont .cont02 h4 {
      margin-right: 5em; }
    body#npm section#npmCont .cont02 p {
      margin-right: 8em; }
    body#npm section#npmCont .cont02 img {
      position: absolute;
      max-width: 100%;
      bottom: 8em;
      right: -1em; } }

@media (min-width: 1200px) {
  body#npm header .banner01 {
    width: 130%; }
  body#npm header .banner02, body#npm header .banner04, body#npm header .banner05 {
    width: 26%; }
  body#npm header .banner04, body#npm header .banner05 {
    -webkit-filter: opacity(100%);
    filter: opacity(100%); }
  body#npm header .npmTop {
    width: 45%;
    margin: 0 20%; }
  body#npm header .npmInfo {
    width: 20%;
    top: 76%;
    left: 52%; }
  body#npm header .npmLogo {
    left: 32%;
    bottom: 6.5em; }
  body#npm header .icomLogo {
    left: 38%;
    bottom: 4em; }
  body#npm header .npmCube.cube01 {
    top: 5%;
    right: -40%; }
  body#npm header .npmCube.cube03 {
    top: 60%; }
  body#npm section#npmIntro {
    padding-top: 200px; }
    body#npm section#npmIntro .decoration {
      max-width: 40vw;
      margin-left: 55vw; }
  body#npm section#npmExhi .npmExhi-slider .npmExhi-item {
    padding: 0 2em; } }

@media (min-width: 1440px) {
  body#npm header .banner01 {
    width: 120%; }
  body#npm header .banner04, body#npm header .banner05 {
    width: 26%; }
  body#npm header .banner02 {
    width: 22%;
    top: 10%; }
  body#npm header .banner03 {
    width: 25%;
    left: 0;
    top: 25%; }
  body#npm header .banner04, body#npm header .banner05 {
    -webkit-filter: opacity(100%);
    filter: opacity(100%); }
  body#npm header .npmTop {
    left: 0;
    width: 45%;
    margin: 0 20%; }
  body#npm header .npmInfo {
    width: 20%;
    top: 77%;
    left: 52%; }
  body#npm header .npmLogo {
    left: 30%;
    bottom: 9em; }
  body#npm header .icomLogo {
    left: 35%;
    bottom: 6em; }
  body#npm section#npmIntro .decoration {
    max-width: 40vw;
    margin-left: 50vw; } }

@media (min-width: 1608px) {
  body#npm header .banner01 {
    width: 100%; }
  body#npm header .banner02, body#npm header .banner03, body#npm header .banner04, body#npm header .banner05 {
    width: 20%; }
  body#npm header .banner02 {
    top: 0; }
  body#npm header .banner03 {
    left: 0;
    top: 25%; }
  body#npm header .banner04, body#npm header .banner05 {
    -webkit-filter: opacity(100%);
    filter: opacity(100%); }
  body#npm header .npmTop {
    top: 10%;
    left: 0;
    width: 45%;
    margin: 0 20%; }
  body#npm header .npmInfo {
    width: 20%;
    top: 75%;
    left: 52%; }
  body#npm header .npmLogo {
    width: 10%;
    left: 30%;
    bottom: 10em; }
  body#npm header .icomLogo {
    width: 4%;
    left: 33.5%;
    bottom: 6.5em; } }