@charset "utf-8";
.mobile-nav-button { width: 35px;  position: absolute; margin: 20px; right:0; top: 0; z-index: 9999; cursor: pointer; width: 25px; height: 30px;}
.mobile-nav-button .mobile-nav-button__line {  width: 100%;  height: 2px; background: #111111; position: relative; transition: 0.3s ease;}
.mobile-nav-button .mobile-nav-button__line:nth-of-type(2) { margin: 5px 0; }
.mobile-nav-button .mobile-nav-button__line--1 {  transform: rotate(45deg);  top: 13px; position: absolute; background: #ffffff;}
.mobile-nav-button .mobile-nav-button__line--2 { display: none; }
.mobile-nav-button .mobile-nav-button__line--3 {  transform: rotate(135deg); top: 13px; position: absolute; background: #ffffff;}

.mobile-menu {
  display: block;
  width: 100%;
  right: -100%;
  height: 100vh;
  background: rgba(0,0,0,0.85);
  position: absolute;
  z-index: 9998;
  transition: 0.3s ease;
  top: 0;
  opacity: 0;
  overflow: hidden;
}

.mobile-menu>ul { position: relative; top: 50%; transform: translateY(-50%); padding: 0;}
.mobile-menu>ul>li { list-style: none; }
.mobile-menu>ul>li {color: #ffffff; font-size: 48px; font-weight: bold; text-align: center; }
.mobile-menu a { text-decoration: none; color: #DBC7A2;}

.mobile-menu>ul>li>a {
  width: 100%;
  margin: 0 auto;
  display: block;
  text-align: center;
  text-decoration: none;
  color: #DBC7A2;
  font-weight: normal;
  overflow: hidden;
  position: relative;
  padding: 20px 0;
  font-family: engraversGothic, Microsoft JhengHei;
}

　/** 變色動態
.mobile-menu>ul>li>a:after {
  content: '';
  background: rgba(211,206,82,1.00);
  width: 100%;
  height: 100%;
  position: absolute;
  right: -100%;
  top: 0;
  z-index: -1;
  transition: 0.4s ease;
}
**/
.mobile-menu>ul>li>a:hover { color: #ffffff; }
.mobile-menu>ul>li>a:hover:after { right: 0; }
.mobile-menu>img {  position: absolute; width: 150px; display: block; left: 50%; top: 48px; transform: translatex(-50%); padding: 0; text-align: center;}
.mobile-menu--open {  right: 0; opacity: 1;}

.mobile-menu>ul>li span.ch-text { font-size: 20px; font-weight: normal; font-family:Microsoft JhengHei; color: #BFBFBF; }
.mobile-menu>ul>li a:hover span.ch-text { color:#DBC7A2;}
.mobile-menu>ul>li span.ch-text:before { content: "/"; padding: 0 10px; }

.mobile-menu ul.sub { margin:8px 0 20px 0; padding: 0; }
.mobile-menu ul.sub li { position: relative; font-size: 26px; display: inline-block; width: 25%; overflow: hidden;}
.mobile-menu ul.sub li a { color: #CCCCCC; padding: 8px; display: block; max-width: 300px; margin: 0 auto; border-top: 1px #333333 dotted;}
.mobile-menu ul.sub li:last-child { }
.mobile-menu ul.sub li a:hover { color:#0f0f0f }

.mobile-menu ul.sub>li>a:after {
  content: '';
  background: rgba(211,206,82,1.00);
  width: 100%;
  height: 100%;
  position: absolute;
  right: -100%;
  top: 0;
  z-index: -1;
  transition: 0.4s ease;
}
.mobile-menu ul.sub>li>a:hover:after { right: 0; }