/*手机nav*/
/* ----- Menu Button ----- */
.btn-menu {
  position: relative;
  z-index: 10000;
  width: 70px;
  height: 50px;
}
.btn-menu button {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  text-indent: -9999px;
  border: 0 none;
  cursor: pointer;
  overflow: hidden;
  vertical-align: top;
}
.btn-menu em:after {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 2px;
  top: 16px;
  right: 25px;
  background-color: #14944A;
  transition: transform 0.3s ease-out, top 0.3s ease-out, width 0.3s ease-out;
}
.btn-menu button:before {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 2px;
  top: 24px;
  right: 25px;
  background-color: #14944A;
  transition: width 0.3s ease-out, right 0.3s ease-out;
}
.btn-menu button:after {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 2px;
  top: 32px;
  right: 25px;
  background-color: #14944A;
  transition: transform 0.3s ease-out, top 0.3s ease-out;
}
html:not(.sp) .btn-menu button:hover em:after {
  width: 20px;
}
html:not(.sp) .btn-menu button:hover:before {
  width: 20px;
}
.main-menu-open .btn-menu button em:after {
  width: 20px !important;
  top: 24px;
  transform: rotate(45deg);
}
.main-menu-open .btn-menu button:before {
  width: 0 !important;
  right: 35px;
}
.main-menu-open .btn-menu button:after {
  top: 24px;
  transform: rotate(-45deg);
}
/* ----- Main Menu ----- */
@media screen and (min-width: 991px), print {
  #main-menu {
    position: fixed;
    z-index: 40000;
    width: 100%;
    height: 0;
    top: 0;
    right: 0;
    overflow: hidden;
    transition: height 0s linear 1s;
  }
  .main-menu-open #main-menu {
    height: 100%;
    transition: height 0s linear;
  }
  #main-menu .tagline {
    position: absolute;
    opacity: 0;
    transition: opacity 0s linear 0.6s;
  }
  .main-menu-open #main-menu .tagline {
    opacity: 1;
    transition: opacity 0s linear 0.25s;
  }
  #main-menu .btn-menu {
    position: absolute;
    opacity: 0;
    transition: opacity 0s linear 0.7s;
  }
  .main-menu-open #main-menu .btn-menu {
    opacity: 1;
    transition: opacity 0s linear 0.1s;
  }
  #main-menu .gnav-sub {
    position: absolute;
    opacity: 0;
    transition: opacity 0s linear 0.4s;
  }
  .main-menu-open #main-menu .gnav-sub {
    opacity: 1;
    transition: opacity 0s linear 0.4s;
  }
  #main-menu nav {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  #main-menu nav:before {
    content: "";
    position: absolute;
    z-index: 2;
    display: block;
    width: 33.33333333%;
    height: calc(50px + 16vh);
    top: 0;
    left: 70px;
  }
  #main-menu nav > ul {
    position: absolute;
    z-index: 1;
    width: calc((100% - 70px) / 3);
    height: 100%;
    top: 0;
    left: 70px;
    padding-top: calc(50px + 16vh);
    line-height: 1.5;
  }
  #main-menu nav > ul > li:after {
    content: "";
    position: absolute;
    z-index: 1;
    display: block;
    width: 0;
    height: 100%;
    top: 0;
    right: -200%;
    opacity: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transition: z-index 0s linear, width 0s linear, opacity 0s linear;
  }
  .main-menu-open #main-menu nav > ul > li:after {
    transition: z-index 0s linear 0.1s, width 0s linear 0.3s, opacity 0.2s linear 0.1s;
  }
  .main-menu-open:not(.sp) #main-menu nav > ul:hover > li:after {
    transition: z-index 0s linear 0.1s, width 0s linear 0.3s, opacity 0s linear 0.3s;
  }
  .main-menu-open:not(.sp) #main-menu nav > ul > li:hover:after,
  .main-menu-open.sp #main-menu nav > ul > li.hover:after {
    z-index: 2;
    width: 100%;
    opacity: 1;
    transition: z-index 0s linear 0.1s, width 0s linear 0.1s, opacity 0.2s linear 0.1s;
  }
  #main-menu nav > ul > li > a {
    display: flex;
    height: 12vh;
    /*		padding: 0 calc(10vw - 50px);*/
    padding: 0 0 0 4vw;
    font-size: 1rem;
    color: #fff;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
  }
  .main-menu-open #main-menu nav > ul > li > a {
    transition: background-color 0.2s linear 0.1s, padding 0.3s cubic-bezier(0, 0.6, 0.4, 1) 0.1s;
  }
  .main-menu-open:not(.sp) #main-menu nav > ul > li:hover > a,
  .main-menu-open.sp #main-menu nav > ul > li.hover > a {
    background-color: #3e4a4f;
    padding: 0 0 0 5vw;
  }
  #main-menu nav > ul > li > a > span {
    display: block;
    width: 100%;
    overflow: hidden;
  }
  #main-menu nav > ul > li > a > .menu-en {
    display: block;
    width: 100%;
    font-family: 'Cinzel', serif;
    font-size: calc(1.5vw + 2vh);
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
  }
  #main-menu nav > ul > li > a > span > span {
    display: inline-block;
    vertical-align: top;
    transform: translate3d(0, 100px, 0);
    transition: transform 0.7s linear;
  }
  .main-menu-open #main-menu nav > ul > li > a > span > span {
    transform: translate3d(0, 0, 0);
    transition: transform 0.7s cubic-bezier(0, 0.7, 0.3, 1) 0.5s;
  }
  #main-menu nav > ul > li > a > .menu-en > span:after {
    content: attr(data-text) "";
    display: inline-block;
    margin: 2px 0 0 5px;
    font-size: 0.875rem;
    font-family: 'Oxygen', sans-serif;
    vertical-align: top;
    opacity: 0.5;
  }
  #main-menu nav > ul > li > ul {
    position: absolute;
    width: 0;
    height: 100%;
    top: 0;
    left: 100%;
    padding-top: calc(50px + 16vh);
    background-color: #3e4a4f;
    opacity: 0;
    overflow: hidden;
    transition: width 0s linear 0.3s, opacity 0.2s linear 0.1s;
  }
  .main-menu-open:not(.sp) #main-menu nav > ul > li:hover > ul,
  .main-menu-open.sp #main-menu nav > ul > li.hover > ul {
    opacity: 1;
    width: 100%;
    overflow: visible;
    transition: width 0s linear 0.1s, opacity 0.2s linear 0.1s;
  }
  #main-menu nav > ul > li > ul > li {
    width: calc((100vw - 70px) / 3);
  }
  #main-menu nav > ul > li > ul > li > a {
    display: block;
    padding: 1.5vh 4vw;
    font-size: 1rem;
    color: #fff;
    transition: background-color 0.2s linear 0.1s, padding 0.3s cubic-bezier(0, 0.6, 0.4, 1) 0.1s;
  }
  .main-menu-open:not(.sp) #main-menu nav > ul > li > ul > li:hover > a,
  .main-menu-open.sp #main-menu nav > ul > li > ul > li.hover > a {
    background-color: #485358;
    padding: 1.5vh 3.5vw 1.5vh 4.5vw;
  }
  #main-menu nav > ul > li > ul > li > a > span:after {
    content: attr(data-text) "";
    display: inline-block;
    margin: 2px 0 0 5px;
    font-size: 0.75rem;
    font-family: 'Oxygen', sans-serif;
    vertical-align: top;
    opacity: 0.5;
  }
  #main-menu nav > ul > li > ul > li > ul {
    position: absolute;
    z-index: 3;
    width: 0;
    height: 100%;
    top: 0;
    left: 100%;
    padding-top: calc(50px + 16vh);
    background-color: #485358;
    opacity: 0;
    overflow: hidden;
    transition: width 0s linear 0.3s, opacity 0.2s linear 0.1s;
  }
  .main-menu-open:not(.sp) #main-menu nav > ul > li > ul > li:hover > ul,
  .main-menu-open.sp #main-menu nav > ul > li > ul > li.hover > ul {
    opacity: 1;
    width: 100%;
    transition: width 0s linear 0.1s, opacity 0.2s linear 0.1s;
  }
  #main-menu nav > ul > li > ul > li > ul > li > a {
    display: block;
    padding: 1.5vh 4vw;
    font-size: 1rem;
    color: #fff;
    transition: background-color 0.2s linear 0.1s, padding 0.3s cubic-bezier(0, 0.6, 0.4, 1) 0.1s;
  }
  .main-menu-open:not(.sp) #main-menu nav > ul > li > ul > li > ul > li > a:hover,
  .main-menu-open.sp #main-menu nav > ul > li > ul > li > ul > li > a.hover {
    background-color: rgba(255, 255, 255, 0.05);
    padding: 1.5vh 3.5vw 1.5vh 4.5vw;
  }
  #main-menu ul button {
    display: none;
  }
  .sp #main-menu ul button {
    position: absolute;
    display: block;
    width: 15%;
    height: 12vh;
    right: 0;
    margin-top: -12vh;
    text-indent: -9999px;
    overflow: hidden;
    opacity: 0;
    transform: translate3d(0, 100px, 0);
    transition: opacity 0.3s linear, transform 0.7s linear;
  }
  .sp.main-menu-open #main-menu ul button {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: opacity 0.7s linear 0.5s, transform 0.7s cubic-bezier(0, 0.7, 0.3, 1) 0.5s;
  }
  .sp #main-menu ul button:before {
    content: "";
    position: absolute;
    display: block;
    width: 16px;
    height: 2px;
    top: 50%;
    left: 50%;
    margin: -13px 0 0 -8px;
    background-color: #fff;
    border-radius: 2px;
  }
  .sp #main-menu ul button:after {
    content: "";
    position: absolute;
    display: block;
    width: 2px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin: -20px 0 0 -1px;
    background-color: #fff;
    border-radius: 2px;
    transition: transform 0.2s linear;
  }
  .sp #main-menu ul button.active:after {
    transform: rotate(90deg);
  }
  .sp #main-menu nav > ul > li > ul > li > button {
    height: 45px;
    margin-top: -45px;
  }
  .sp #main-menu nav > ul > li > ul > li > button:before {
    margin: -1px 0 0 -8px;
  }
  .sp #main-menu nav > ul > li > ul > li > button:after {
    margin: -8px 0 0 -1px;
  }
}
@media screen and (min-width: 991px), print {
  .main-menu-bg div {
    position: fixed;
    width: calc((100% - 70px) / 6 + 1px);
    height: 0;
    top: 0;
    background-color: rgba(29, 120, 170, 0.95);
    overflow: hidden;
    transition: height 0.5s cubic-bezier(0.8, 0, 0.2, 1);
  }
  .main-menu-bg div:nth-of-type(1) {
    left: 0;
    width: 70px;
    transition-delay: 0.3s;
    border-right: solid 1px rgba(255, 255, 255, 0.08);
  }
  .main-menu-bg div:nth-of-type(2) {
    left: 70px;
    transition-delay: 0.25s;
  }
  .main-menu-bg div:nth-of-type(3) {
    left: calc((100% - 70px) * (1 / 6) + 70px);
    transition-delay: 0.2s;
  }
  .main-menu-bg div:nth-of-type(4) {
    left: calc((100% - 70px) * (2 / 6) + 70px);
    transition-delay: 0.15s;
    border-left: solid 1px rgba(255, 255, 255, 0.08);
  }
  .main-menu-bg div:nth-of-type(5) {
    left: calc((100% - 70px) * (3 / 6) + 70px);
    transition-delay: 0.1s;
  }
  .main-menu-bg div:nth-of-type(6) {
    left: calc((100% - 70px) * (4 / 6) + 70px);
    transition-delay: 0.05s;
    border-left: solid 1px rgba(255, 255, 255, 0.08);
  }
  .main-menu-bg div:nth-of-type(7) {
    left: calc((100% - 70px) * (5 / 6) + 70px);
    transition-delay: 0s;
  }
  .main-menu-bg div:nth-of-type(6):before,
  .main-menu-bg div:nth-of-type(7):before {
    content: "";
    position: absolute;
    display: block;
    width: 200%;
    height: 100vh;
    top: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transition: width 0s linear 0.3s, opacity 0.3s linear;
  }
  .main-menu-bg div:nth-of-type(6):before {
    left: 0;
  }
  .main-menu-bg div:nth-of-type(7):before {
    right: 0;
  }
  .main-menu-open .main-menu-bg div {
    height: 100%;
  }
  .main-menu-open .main-menu-bg div:nth-of-type(1) {
    transition-delay: 0s;
  }
  .main-menu-open .main-menu-bg div:nth-of-type(2) {
    transition-delay: 0.05s;
  }
  .main-menu-open .main-menu-bg div:nth-of-type(3) {
    transition-delay: 0.1s;
  }
  .main-menu-open .main-menu-bg div:nth-of-type(4) {
    transition-delay: 0.15s;
  }
  .main-menu-open .main-menu-bg div:nth-of-type(5) {
    transition-delay: 0.2s;
  }
  .main-menu-open .main-menu-bg div:nth-of-type(6) {
    transition-delay: 0.25s;
  }
  .main-menu-open .main-menu-bg div:nth-of-type(7) {
    transition-delay: 0.3s;
  }
}
@media screen and (max-width: 991px), print {
  .main-menu-bg div {
    position: fixed;
    width: calc((100% - 50px) / 4 + 1px);
    height: 0;
    top: 0;
    background-color: rgba(29, 120, 170, 0.95);
    overflow: hidden;
    transition: height 0.5s cubic-bezier(0.8, 0, 0.2, 1);
  }
  .main-menu-bg div:nth-of-type(1) {
    left: 0;
    width: 50px;
    transition-delay: 0.2s;
  }
  .main-menu-bg div:nth-of-type(2) {
    left: 50px;
    transition-delay: 0.15s;
  }
  .main-menu-bg div:nth-of-type(3) {
    left: calc((100% - 50px) * (1 / 4) + 50px);
    transition-delay: 0.1s;
  }
  .main-menu-bg div:nth-of-type(4) {
    left: calc((100% - 50px) * (2 / 4) + 50px);
    transition-delay: 0.05s;
  }
  .main-menu-bg div:nth-of-type(5) {
    left: calc((100% - 50px) * (3 / 4) + 50px);
    transition-delay: 0s;
  }
  .main-menu-bg div:nth-of-type(6),
  .main-menu-bg div:nth-of-type(7) {
    display: none;
  }
  .main-menu-open .main-menu-bg div {
    height: 100%;
  }
  .main-menu-open .main-menu-bg div:nth-of-type(1) {
    transition-delay: 0s;
  }
  .main-menu-open .main-menu-bg div:nth-of-type(2) {
    transition-delay: 0.05s;
  }
  .main-menu-open .main-menu-bg div:nth-of-type(3) {
    transition-delay: 0.1s;
  }
  .main-menu-open .main-menu-bg div:nth-of-type(4) {
    transition-delay: 0.15s;
  }
  .main-menu-open .main-menu-bg div:nth-of-type(5) {
    transition-delay: 0.2s;
  }
}
.main-menu-close #main-menu,
.main-menu-close .main-menu-bg div {
  transition: none !important;
}
/* ----- Main Menu ----- */
#main-menu {
  position: fixed;
  z-index: 40000;
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: height 0s linear 1s;
}
.main-menu-open #main-menu {
  height: 100%;
  transition: height 0s linear;
}
#main-menu .tagline {
  position: absolute;
  opacity: 0;
  transition: opacity 0s linear 0.5s;
}
.main-menu-open #main-menu .tagline {
  opacity: 1;
  transition: opacity 0s linear 0.25s;
}
#main-menu .btn-menu {
  position: absolute;
  opacity: 0;
  transition: opacity 0s linear 0.6s;
}
.main-menu-open #main-menu .btn-menu {
  opacity: 1;
  transition: opacity 0s linear 0.2s;
}
#main-menu .gnav-sub {
  position: relative;
  top: auto;
  right: auto;
  padding: 0 5vw 100px calc(50px + 3vw - 10px);
  opacity: 0;
  transform: translate3d(0, 50px, 0);
  transition: opacity 0.3s linear, transform 0.5s linear;
}
.main-menu-open #main-menu .gnav-sub {
  z-index: 999;
  color: #fff;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.5s linear 0.5s, transform 0.5s cubic-bezier(0, 0.7, 0.3, 1) 0.5s;
}
#main-menu .gnav-sub li {
  display: inline-block;
}
#main-menu .gnav-sub li:not(:first-of-type) {
  margin-left: 5vw;
}
#main-menu .gnav-sub li a {
  font-size: 0.875rem;
}
#main-menu nav > ul {
  position: relative;
  z-index: 1;
  width: calc(100% - 50px);
  padding: 80px 0 10px;
  margin: 0 0 0 auto;
  line-height: 1.5;
}
#main-menu nav > ul > li {
  position: relative;
}
#main-menu nav > ul > li > a {
  display: flex;
  height: 50px;
  padding: 0 0vw;
  font-size: 16px;
  color: #fff;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
}
#main-menu nav > ul > li > a > span {
  display: block;
  overflow: hidden;
}
#main-menu nav > ul > li > a > .menu-en {
  display: block;
  width: 100%;
  font-size: 18px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
#main-menu nav > ul > li > a > span > span {
  display: block;
  transform: translate3d(0, 50px, 0);
  transition: transform 0.7s linear;
}
.main-menu-open #main-menu nav > ul > li > a > span > span {
  transform: translate3d(0, 0, 0);
  transition: transform 0.7s cubic-bezier(0, 0.7, 0.3, 1) 0.5s;
}
#main-menu nav > ul > li > a > .menu-en > span:after {
  content: attr(data-text) "";
  display: inline-block;
  margin: 0 0 0 5px;
  font-size: 12px;
  font-family: 'Oxygen', sans-serif;
  vertical-align: top;
  opacity: 0.5;
}
#main-menu nav > ul > li > ul {
  display: none;
}
#main-menu nav > ul > li > ul:before,
#main-menu nav > ul > li > ul:after {
  content: "";
  display: block;
  width: calc(100% - 10vw);
  height: 1px;
  margin: 10px 0 10px 5vw;
  background-color: rgba(255, 255, 255, 0.1);
}
#main-menu nav > ul > li > ul > li {
  position: relative;
}
#main-menu nav > ul > li > ul > li > a {
  display: block;
  padding: 15px 5vw 15px calc(5vw + 15px);
  font-size: 1rem;
  color: #fff;
  transition: background-color 0.2s linear;
}
#main-menu nav > ul > li > ul > li > a > span:after {
  content: attr(data-text) "";
  display: inline-block;
  margin: 2px 0 0 5px;
  font-size: 12px;
  font-family: 'Oxygen', sans-serif;
  vertical-align: top;
  opacity: 0.5;
}
#main-menu nav > ul > li > ul > li > ul {
  display: none;
}
#main-menu nav > ul > li > ul > li > ul:before,
#main-menu nav > ul > li > ul > li > ul:after {
  content: "";
  display: block;
  width: calc(100% - 10vw);
  height: 1px;
  margin: 10px 0 10px 5vw;
  background-color: rgba(255, 255, 255, 0.1);
}
#main-menu nav > ul > li > ul > li > ul > li > a {
  display: block;
  padding: 15px 5vw 15px calc(5vw + 30px);
  font-size: 1rem;
  color: #fff;
  transition: background-color 0.2s linear;
}
#main-menu ul button {
  position: absolute;
  display: block;
  width: 50px;
  height: 50px;
  top: 0;
  right: 3vw;
  text-indent: -9999px;
  overflow: hidden;
  opacity: 0;
  transform: translate3d(0, 50px, 0);
  transition: opacity 0.3s linear, transform 0.7s linear;
}
.main-menu-open #main-menu ul button {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.7s linear 0.5s, transform 0.7s cubic-bezier(0, 0.7, 0.3, 1) 0.5s;
}
#main-menu ul button:before {
  content: "";
  position: absolute;
  display: block;
  width: 16px;
  height: 2px;
  top: 50%;
  left: 50%;
  margin: -1px 0 0 -8px;
  background-color: #fff;
  border-radius: 2px;
}
#main-menu ul button:after {
  content: "";
  position: absolute;
  display: block;
  width: 2px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin: -8px 0 0 -1px;
  background-color: #fff;
  border-radius: 2px;
  transition: transform 0.2s linear;
}
#main-menu ul button.active:after {
  transform: rotate(90deg);
}
#main-menu nav > ul > li > ul > li > button {
  height: 50px;
}