body {
  font-size: 16px;
  color: #fff;
  background-color: #212121;
  font-weight: 400;
  font-family: "微軟正黑體", Helvetica, Arial, sans-serif;
  min-width: 1100px;
}

::selection {
  background: #191919;
  color: #fff;
}

::-moz-selection {
  background: #191919;
  color: #fff;
}

p {
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
}

ol,
ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

a:hover,
a:focus,
a:active,
a:visited {
  text-decoration: none;
}

.scroll-down {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 8;
  bottom: 50px;
  display: inline-block;
}

.mouse {
  margin: 0 auto;
  display: block;
  border-radius: 50px;
  border: 4px solid #fff;
  height: 61px;
  width: 34px;
  position: relative;
  opacity: .7;
}

.mouse:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 5.5px 0 5.5px;
  border-color: #ffffff transparent transparent transparent;
  line-height: 0px;
  _border-color: #ffffff #000000 #000000 #000000;
  _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
  left: 50%;
  bottom: -20px;
  margin-left: -6px;
}

.mouse:hover {
  opacity: 1;
}

.move {
  position: absolute;
  background-color: #fff;
  height: 7px;
  width: 7px;
  border-radius: 50%;
  left: 50%;
  transform: translateX(-50%);
  animation: move 2s linear infinite;
}

@keyframes move {
  0% {
    transform: translate(-50%, 10px);
    opacity: 0;
  }

  50% {
    transform: translate(-50%, 30px);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, 50px);
    opacity: 0;
  }
}

.fullscreen-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: -1;
}

.fullscreen-bg:after {
  position: absolute;
  content: '';
  background: rgba(0, 0, 0, .25) url(../images/ptn2.png) 50% 0 repeat;
  height: 100%;
  width: 100%;
  bottom: 0;
  top: 0;
  right: 0;
  left: 0;
  z-index: 0;
  display: block;
}

.myVideo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

header {
  position: relative;
  height: 100vh;
}

.wrapper {
  overflow: hidden;
  min-width: 1100px;
}

.navbar-toggle .icon-bar,
.sidebar ul>li>a,
.movieArea,
.mouse {
  -moz-transition: all 0.25s ease-in-out;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

.bar ul>li>a,
.owl-carousel .owl-dots .owl-dot span {
  -moz-transition: all 0.15s ease-in-out;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}

/* navbar */
.navbar {
  border-radius: 0;
  min-height: 80px;
  border: none;
  margin: 0;
  z-index: 99;
}

.navbar-inverse {
  background-color: rgba(0, 0, 0, .7);
  border-color: transparent;
}

.navbar-inverse .navbar-nav>li>a {
  color: #a7c6d0;
}

.nav>li {
  margin: 0 10px;
}

.nav>li>a {
  padding: 15px 20px;
}

.navbar {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  min-width: 1100px;
}

.navbar-nav {
  margin-top: 15px;
}

.navbar-brand {
  width: 152px;
  height: auto;
  padding: 10px 0;
}

.navbar-toggle {
  margin-top: 15px;
}

.navbar>.container .navbar-brand,
.navbar>.container-fluid .navbar-brand {
  margin-left: 80px;
}

.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>li>a:focus,
.navbar-inverse .navbar-nav>.active>a:hover,
.navbar-inverse .navbar-nav>.active>a:focus {
  background: linear-gradient(270deg, rgba(119, 118, 255, 1)15%, rgba(174, 44, 241, 1)85%);
  background: -moz-linear-gradient(270deg, rgba(119, 118, 255, 1)15%, rgba(174, 44, 241, 1)85%);
  background: -webkit-linear-gradient(270deg, rgba(119, 118, 255, 1)15%, rgba(174, 44, 241, 1)85%);
  background: -o-linear-gradient(270deg, rgba(119, 118, 255, 1)15%, rgba(174, 44, 241, 1)85%);
  border-radius: 5px;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.85);
}

/* .navbar-inverse .navbar-toggle {
  border-color: transparent;
}

.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
  background-color: transparent;
}

.navbar-toggle .icon-bar {
  width: 35px;
  height: 4px;
}

.navbar-toggle .icon-bar+.icon-bar {
  margin-top: 7px;
}

.navbar-toggle.active .icon-bar:nth-child(1) {
  -webkit-transform: rotate(-45deg) translate(-9px, 11px);
  transform: rotate(-45deg) translate(-9px, 11px);
}

.navbar-toggle.active .icon-bar:nth-child(2) {
  opacity: 0;
}

.navbar-toggle.active .icon-bar:nth-child(3) {
  -webkit-transform: rotate(45deg) translate(-4px, -7px);
  transform: rotate(45deg) translate(-4px, -7px);
} */

/* navbar */

/* sidebar */
.sidebar {
  position: fixed;
  right: -56px;
  bottom: 15px;
  z-index: 91;
  opacity: 0;
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar ul>li {
  display: block;
}

.sidebar ul>li>a {
  background: transparent url(../images/slide-bar.png) no-repeat 0 0;
  display: block;
  width: 356px;
  height: 254px;
  text-indent: -99999em;
  padding: 0;
  position: relative;
}

.sidebar ul>li>a:hover {
  background: transparent url(../images/slide-bar_hover.png) no-repeat 0 0;
}

.sidebar ul>li:nth-child(2)>a,
.sidebar ul>li:nth-child(2)>a:hover {
  background-position-y: -254px;
  height: 62px;
}

.sidebar ul>li:nth-child(3)>a,
.sidebar ul>li:nth-child(3)>a:hover {
  background-position-y: -315px;
  height: 62px;
}

.sidebar ul>li:nth-child(4)>a,
.sidebar ul>li:nth-child(4)>a:hover {
  background-position-y: -376px;
  height: 62px;
}

.sidebar ul>li>a:hover,
.sidebar ul>li>a:focus {
  background-color: transparent;
  outline: none;
}

.sidebar.is-loaded {
  animation: fadeInRight .75s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
}

/* sidebar */

.tit {
  position: absolute;
  left: 0;
  top: 50%;
  margin: -100px 0 0;
  z-index: 1;
  opacity: 0;
  width: 100%;
  right: 0;
  text-align: center;
  padding: 0 15px;
}

.tit.is-loaded {
  animation: zoomOut 1s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
}

#s2 {
  background: url(../images/content_bg.jpg) no-repeat 50% 0;
  height: 1150px;
  padding: 50px 0 0;
  position: relative;
}

.profession {
  margin: 0 0 30px;
  text-align: center;
  width: 100%;
}

.characterTxt {}

.characterWrap {
  padding: 140px 0 0;
  width: 1100px;
  height: 947px;
  overflow: hidden;
}

.charactersInfo {
  position: absolute;
  left: 50%;
  margin-left: -500px;
  z-index: 7;
}

.characters {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 0;
  margin-left: -115px;
}

#characters_1 .characters {
  background: transparent url(../images/chr1.png) no-repeat 0 0;
  width: 911px;
  height: 869px;
}

#characters_2 .characters {
  background: transparent url(../images/chr2.png) no-repeat 0 0;
  width: 711px;
  height: 854px;
}

#characters_3 .characters {
  margin-left: -50px;
  background: transparent url(../images/chr3.png) no-repeat 0 0;
  width: 783px;
  height: 1143px;
}

#characters_4 .characters {
  margin-left: -336px;
  background: transparent url(../images/chr4.png) no-repeat 0 0;
  width: 1265px;
  height: 917px;
}

#characters_5 .characters {
  margin-left: 25px;
  background: transparent url(../images/chr5.png) no-repeat 0 0;
  width: 653px;
  height: 812px;
}

.bar {
  background: transparent url(../images/bar_bg.png) no-repeat 0 0;
  width: 950px;
  height: 72px;
  position: relative;
  margin: 0 auto;
  padding: 0 75px;
}

.bar ul>li {
  display: block;
  float: left;
}

.bar ul>li>a {
  background: transparent url(../images/bar_btn.png) no-repeat 0 0;
  width: 160px;
  height: 68px;
  display: inline-block;
}

.bar ul>li>a:hover,
.bar ul>li.active>a {
  background: transparent url(../images/bar_btn_hover.png) no-repeat 0 0;
}

.bar ul>li:nth-child(2)>a,
.bar ul>li:nth-child(2)>a:hover {
  background-position-x: -161px;
}

.bar ul>li:nth-child(3)>a,
.bar ul>li:nth-child(3)>a:hover {
  background-position-x: -322px;
}

.bar ul>li:nth-child(4)>a,
.bar ul>li:nth-child(4)>a:hover {
  background-position-x: -483px;
}

.bar ul>li:nth-child(5)>a,
.bar ul>li:nth-child(5)>a:hover {
  background-position-x: -644px;
}


/* slider style */
.tab-pane {
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
}

.carouselWrap {
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0 auto;
}

.owl-theme .owl-dots .owl-dot span {
  width: 83px;
  height: 83px;
  background: transparent url(../images/chr_icon.png) no-repeat 0 0;
  outline: none;
  margin: 0 10px;
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
  opacity: .45;
}

.owl-theme .owl-nav {
  top: 50%;
  width: 100%;
}

.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev,
.owl-theme .owl-dots,
.owl-theme .owl-nav {
  position: absolute;
}

.owl-theme .owl-dots {
  top: 0;
  left: 50%;
  width: 309px;
  margin: 35px 0 0;
  margin-left: -154.5px;
}

/* .owl-theme .owl-dots:hover .owl-dot span:not(:hover),
.owl-theme .owl-dots .owl-dot:not(.active) {
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
        opacity: .55;
} */

.owl-carousel .owl-nav button span {
  outline: none;
}

.owl-carousel .owl-nav button.owl-next {
  right: 80px;
}

.owl-carousel .owl-nav button.owl-prev {
  left: 80px;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
  background: transparent url(../images/chr_icon.png) no-repeat 0 0;
  -webkit-filter: inherit;
  filter: inherit;
  opacity: 1;
}

.owl-theme .owl-nav [class*=owl-]:hover {
  background: transparent;
  outline: none;
}

.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel button.owl-dot {
  outline: none;
}

.owl-carousel .owl-item img {
  width: initial;
}

#characters_1 .owl-carousel .owl-dots .owl-dot:nth-child(2) span {
  background-position-x: -83px;
}

#characters_1 .owl-carousel .owl-dots .owl-dot:nth-child(3) span {
  background-position-x: -166px;
}

#characters_2 .owl-carousel .owl-dots .owl-dot:nth-child(1) span {
  background-position: 0 -83px;
}

#characters_2 .owl-carousel .owl-dots .owl-dot:nth-child(2) span {
  background-position: -83px -83px;
}

#characters_2 .owl-carousel .owl-dots .owl-dot:nth-child(3) span {
  background-position: -166px -83px;
}

#characters_3 .owl-carousel .owl-dots .owl-dot:nth-child(1) span {
  background-position: 0 -166px;
}

#characters_3 .owl-carousel .owl-dots .owl-dot:nth-child(2) span {
  background-position: -83px -166px;
}

#characters_3 .owl-carousel .owl-dots .owl-dot:nth-child(3) span {
  background-position: -166px -166px;
}

#characters_4 .owl-carousel .owl-dots .owl-dot:nth-child(1) span {
  background-position: 0 -249px;
}

#characters_4 .owl-carousel .owl-dots .owl-dot:nth-child(2) span {
  background-position: -83px -249px;
}

#characters_4 .owl-carousel .owl-dots .owl-dot:nth-child(3) span {
  background-position: -166px -249px;
}

#characters_5 .owl-carousel .owl-dots .owl-dot:nth-child(1) span {
  background-position: 0 -332px;
}

#characters_5 .owl-carousel .owl-dots .owl-dot:nth-child(2) span {
  background-position: -83px -332px;
}

#characters_5 .owl-carousel .owl-dots .owl-dot:nth-child(3) span {
  background-position: -166px -332px;
}


.movieArea:hover {
  filter: brightness(130%);
}

/* slider style */

/* video */
.movieArea {
  width: 431px;
  height: 242px;
  float: left;
  position: relative;
  margin: 35px 0 0;
}

.movieArea a:after {
  content: '';
  position: absolute;
  background: transparent url(../images/icon-play.png) no-repeat 0 0;
  background-size: 100% auto;
  width: 80px;
  height: 62px;
  left: 50%;
  margin-left: -40px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 0;
}

/* video */

/* animation */

@-webkit-keyframes zoomOut {
  from {
    opacity: 0;
    -webkit-transform: scale3d(2, 2, 2);
    transform: scale3d(2, 2, 2);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes zoomOut {
  from {
    opacity: 0;
    -webkit-transform: scale3d(2, 2, 2);
    transform: scale3d(2, 2, 2);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(20%, 0, 0);
    transform: translate3d(20%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(20%, 0, 0);
    transform: translate3d(20%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

/* animation */
footer {
  background: #191919;
  padding: 30px 0;
  text-align: center;
}

.copyright {
  margin: 0;
}

@media (max-width: 1100px) {
  header {
    height: 1080px;
  }
  .fullscreen-bg {
    position: absolute;
  }
  .sidebar {
    top: 120px;
    bottom: auto;
  }
  #characters_1 .characters {
    background: transparent url(../images/chr1_mob.png) no-repeat 0 0;
  }

  #characters_3 .characters {
    background: transparent url(../images/chr3_mob.png) no-repeat 0 0;
  }

  #characters_4 .characters {
    background: transparent url(../images/chr4_mob.png) no-repeat 0 0;
  }

  #characters_5 .characters {
    background: transparent url(../images/chr5_mob.png) no-repeat 0 0;
  }
}