body {
  font-size: 16px;
  color: #fff;
  background-color: #14191f;
  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;
}
/* 回到頂端 */
#go_top_page {
  width: 50px;
  height: 50px;
  background:rgba(100, 100, 100, 0.8);
  border-radius: 50%;
  position: fixed;
  right: 20px;
  bottom: 0;
  z-index: 9999;
  box-shadow: inset 0 0 0 2px rgb(255, 255, 255), inset 0 0 0 4px rgb(255, 255, 255);
}

#go_top_page a {
  display: block;
  font-size: 1.5rem;
  text-align: center;
  line-height: 50px;
  color: white;
  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 #333;
  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: #333 transparent transparent transparent;
  line-height: 0px;
  _border-color: #333 #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: #333;
  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;
  background-image: url(../image/main-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
}

#particles-js {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.main_img{
  position:absolute;
  left: 600px;
  top: -150px;
}

.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: #ffffff;
}

.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, #507DA0 21%, #385B75 57%);
background: -moz-linear-gradient(270deg, #507DA0 21%, #385B75 57%);
background: -webkit-linear-gradient(270deg, #507DA0 21%, #385B75 57%);
background: -o-linear-gradient(270deg, #507DA0 21%, #385B75 57%);
  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 {
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.3)13%, rgba(0, 0, 0, 0.1)60%);
  background: -moz-linear-gradient(270deg, rgba(0, 0, 0, 0.3)13%, rgba(0, 0, 0, 0.1)60%);
  background: -webkit-linear-gradient(270deg, rgba(0, 0, 0, 0.3)13%, rgba(0, 0, 0, 0.1)60%);
  background: -o-linear-gradient(270deg, rgba(0, 0, 0, 0.3)13%, rgba(0, 0, 0, 0.1)60%);
  position: fixed;
  right: 40px;
  bottom: 30vh;
  z-index: 999;
  opacity: 0;
}



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

.sidebar ul>li {
  display: block;
}

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

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


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

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

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

.sidebar ul>li:nth-child(5)>a,
.sidebar ul>li:nth-child(5)>a:hover {
  background-position-y: -272px;
  height: 60px;
}

.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: 35%;
  margin: -100px 0 0;
  z-index: 120;
  width: 100%;
  right: 0;
  text-align: center;
  padding: 0 15px;
}

.registered{
  position: absolute;
  left: 47.5%;
  top: 82%;
  z-index: 120;
  right: 0;
  text-align: center;
  padding: 0 15px;
  background-color: rgb(18, 18, 110);
  color: #fff;
  display: inline;
  width: 95px;
  padding: 1rem 0;
  border-radius: 10px 10px;
}

.registered:hover{
  color: rgb(253, 211, 211);
}
.registered:focus{
  color: rgb(255, 255, 255);
}
.container{
  height: 100%;
  position: absolute;
  width: 100%;
}
.content{
  background-position: top center;
  z-index: 999;
  width: 100%;
  height: 100%;
}
.text{
  text-align: center;
}
.text05{
  margin-top: 100px;
  margin-right:280px;
}
#s1,#s2,#s3,#s4,#s5{
  height: 100vh;
}
/* s1-------------------------------------------------------- */
#s1{
  background: url(../image/s1-bg.jpg)center center no-repeat;
  background-size:cover;
}
.char-1{
  position: absolute;
  left: 6%;
  top: 18%;
}

.pic-1{
  position: absolute;
  right: 25%;
  top: 40%;
}
/* s2-------------------------------------------------------- */
#s2{
  background: url(../image/s2-bg.jpg)center center no-repeat;
  background-size:cover;
  overflow: hidden;
}
#s2 .owl-stage::after{
  content: '';
  position: absolute;
  width: 100vw;
  height: 500px;
  bottom: 0px;
  background: rgb(0,0,0);
  background: linear-gradient(360deg, rgb(0, 0, 0) 30%, rgba(255,255,255,0) 50%);
}

.char-2-1{
  position: absolute;
  top: 180px;
  left: 260px;
}

.char-2-2{
  position: absolute;
  top: 380px;
  left: 730px;
}

.pic-2-1{
  position: absolute;
  top: 380px;
  right: 350px;
}

#s3{
  background: url(../image/s3-bg.jpg)center center no-repeat;
  background-size:cover;
  overflow: hidden;
}

.pic-3-1{
  position: absolute;
  top: 40%;
  left: 28%;
}

.pic-3-2{
  position: absolute;
  top: 40%;
  right: 28%;
}

.char-3{
  position: absolute;
  top: 8%;
  right: 2%;
}

.owl-carousel .owl-stage-outer{
  overflow: visible;
}

#s4{
  background: url(../image/s4-bg.jpg)center center no-repeat;
  background-size:cover;
}

.pic-4{
  margin-top: 3rem;
  width: 100%;
  text-align: center;
}

.char-4{
  position: absolute;
  top: 30%;
  left: 5%;
}


#s5{
  background: url(../image/s5-bg.jpg)center center no-repeat;
  background-size:cover;
}

.char-5{
  position: absolute;
  top: 20%;
  right: 18%;
}


.container04{
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}

.img04{
  padding-top: 40px;
}

.profession {
  padding-top: 55px;
  margin: 0 0 30px;
  text-align: center;
  width: 100%;
  z-index:100;
  position: relative;
}

.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;
  top: 150px;
}

.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;
  margin: 0 auto;
  position: relative;
}

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

.slider-star{
  position: relative;
  margin: auto;
}

.item01{
  position: relative;
  top: -150px;
}
.item02{
  position: relative;
  top: -20px;
}
.item03{
  position: relative;
  top: 25px;
}

.item05{
  position: relative;
  top: 50px;
}

/* slider style */



/* 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: #e5e5e5;
  padding: 30px 0;
  text-align: center;
}

.copyright {
  margin: 0;
}


@media (max-width: 1100px) {
  header,#s1,#s2,#s3,#s4,#s5{
    height: 1080px ;
    min-width: 100%;
    background-position-x: 50%;
}
body{
  max-width: 100%;
}

.sidebar{
  display: none;
}

  .wrapper {
    min-width: 100%;
}

.registered{
  position: absolute;
  left: 38%;
  top: 82%;
  z-index: 120;
  right: 0;
  text-align: center;
  padding: 0 15px;
  background-color: rgb(18, 18, 110);
  color: #fff;
  display: inline;
  width: 240px;
  padding: 1.5rem 0;
  border-radius: 15px 15px;
  font-size: 4.5rem;
}

.container{
  height: auto;
  min-width: 100%;
  margin-left: 2rem;
}

.main_img {
  position: absolute;
  left: 18%;
  top: -109px;
}
.sidebar {
  top: 492px !important;
  bottom: auto;
}
  .scroll-down{
    display: none;
  }
/* s1 */
  .char-1{
    position: absolute;
    left: -16%;
    top: 78%;
  }
  
  .pic-1{
    position: absolute;
    right: -5%;
    top: 120%;
  }

  /* s2 */

  .char-2-1{
    position: absolute;
    top: 350px;
    left: 0px;
  }
  
  .char-2-2{
    position: absolute;
    top: 550px;
    left: 360px;
  }
  
  .pic-2-1{
    position: absolute;
    top: 520px;
    right: -80px;
  }

  /* s3 */
  
.pic-3-1{
  position: absolute;
  top: 350px;
  left: 8%;
}

.pic-3-2{
  position: absolute;
  top: 350px;
  right: 4%;
}

.char-3{
  /* position: absolute;
  top: 800px;
  left: 800px; */
  display: none;
}

/* s4----------- */
.pic-4{
  margin-left: 2rem;
  margin-top: 3rem;
  width: 100%;
  text-align: center;
}

.char-4{
  /* position: absolute;
  top: 30%;
  left: 5%; */
  display: none;
}
/* s5----------- */
.char-5{
  position: absolute;
  top: 40%;
  right: -10%;
}

.text05{
  margin-top: 200px;
  margin-right:280px;
}
/* gototop--------------- */
#go_top_page {
  width: 120px;
  height: 120px;
  background:rgba(100, 100, 100, 0.8);
  border-radius: 50%;
  position: fixed;
  right: 20px;
  bottom: 0;
  z-index: 9999;
  box-shadow: inset 0 0 0 2px rgb(255, 255, 255), inset 0 0 0 4px rgb(255, 255, 255);
}

#go_top_page a {
  display: block;
  font-size: 5.5rem;
  text-align: center;
  line-height: 100px;
  color: white;
  text-decoration: none;
}
  #s2 .item{
    width: 70%;
    margin: auto;
    margin-top: 50px;
  }

  #s3 .item{
    width: 80%;
    margin: auto;
  }

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

  #s4 .container04 {
    text-align: center;
  }

  #s4 .img04{
    margin-bottom: 40px;
  }

  .fullscreen-bg {
    position: absolute;
  }
  
  .sidebar {
    top: 310px;
    bottom: auto;
  }

  #sidebar ul>li>a {
    top: 300px
  }

  #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;
  }
  }