@charset "utf-8";



body {

  margin: 0;

  padding: 0;

  font-family: "微軟正黑體", Arial, sans-serif;

  background: #000;

}



body,

html {

  width: 100%;

  height: 100%;

}



img {

  max-width: 100%;

  height: auto;

}



li,

ol,

ul {

  list-style: none;

}



a:hover,

a:focus,

a:active,

a:visited {

  text-decoration: none;

}

@media (min-width:1200px){
  .L-left-200px{
    margin-left: -200px;
  }
}


.sideBar {

  position: fixed;

  display: block;

  left: 0px;

  top: 20%;
  

  /* -webkit-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  transform: translateY(-50%); */

  z-index: 95;

  width: 246px;
  max-width: 50vw;

  height: 157px;

  -moz-transition: all 0.25s ease-in-out;

  -webkit-transition: all 0.25s ease-in-out;

  transition: all 0.25s ease-in-out;

}





.sideBtn {

  position: absolute;

  top: 0;

  width: 47px;

  height: 100%;

  z-index: 10;

  right: 0;

  border: none;

  cursor: pointer;

  display: block;

  outline: none;

  padding: 0;

  text-align: center;

  background: transparent;

}



.sideBar a {

  display: block;

  background: url(../images/side_btn1.png) no-repeat 0 0;
  background-size: 100% auto;

  width: 100%;

  height: 100%;

  -moz-transition: all 0.25s ease-in-out;

  -webkit-transition: all 0.25s ease-in-out;

  transition: all 0.25s ease-in-out;

}


.sideBar:hover a {

  background: url(../images/side_btn1_hover.png) no-repeat 0 0;

}



.wrapper {

  min-width: 1170px;

  overflow: hidden;

}



.wrapper .container {
  padding-top: 130px;
  position: relative;
}


.btnShowHide,

.tabNavbar ul li a,

.btnFixed span a {

  -moz-transition: all 0.25s ease-in-out;

  -webkit-transition: all 0.25s ease-in-out;

  transition: all 0.25s ease-in-out;

}



.titleBox {

  position: absolute;

  top: 50%;

  -webkit-transform: translateY(-50%);

  -o-transform: translateY(-50%);

  transform: translateY(-50%);

  text-align: center;

  margin: -50px 0 0;

  left: 0;

  right: 0;

}



.tit {

  display: inline-block;
  padding-top: 200px;


}



#myvideo {

  position: absolute;

  top: 50%;

  left: 50%;

  min-width: 100%;

  min-height: 100%;

  width: auto;

  height: auto;

  transform: translateX(-50%) translateY(-50%);

  background-color: black;

  background-size: cover;

  object-fit: cover;

  z-index: -2;

}



#section0:after {

  position: absolute;

  content: '';

  background: url(../images/line.png) repeat;

  opacity: .7;

  height: 100%;

  width: 100%;

  bottom: 0;

  top: 0;

  right: 0;

  left: 0;

  z-index: -1;

  display: block;

}



.home {

  position: absolute;

  top: 3px;

  left: 52px;

  z-index: 999;

}



.fb {

  position: absolute;

  top: 12px;

  right: 30px;

  display: none;

}



.date {

  margin: -30px 0 0;

}



.btnShowHide {

  position: fixed;

  display: block;

  right: 15px;

  bottom: 15px;

  z-index: 999;

  cursor: pointer;

}



.btnShowHide.active {

  -webkit-transform: rotateX(180deg);

  -ms-transform: rotateX(180deg);

  transform: rotateX(180deg)

}



.btnFixed {

  background: transparent url(../images/btn_bg.png) no-repeat 0 0;

  width: 653px;

  min-height: 131px;

  margin: 0 auto;

  position: fixed;

  z-index: 999;

  left: 0;

  right: 0;

  bottom: 0;

  background-size: contain;

}



.btnFixedCont {

  width: 51%;

  margin: 0 auto;

  position: relative;

  text-align: center;

}



.btnFixed span {

  display: inline-block;

  position: absolute;

  left: 0;

}



.btnFixed span a {

  display: block;

}



.btnFixed span:first-child {

  margin: -12px 0 0;

}



.btnFixed span:nth-child(2) {

  margin: 67px 0 0;

  right: 0;

}



.btnFixed span:last-child {

  right: 0;

  margin: -12px 0 0;

  left: auto;

}



.section {

  text-align: center;

  position: relative;

}
.section h2{
  color: #fff;
  font-size: 40px;
}



#section0 {

  height: calc(100vh + 50px);

  overflow: hidden;

}



#section1 {
  margin-top: -130px;
  padding-top: 100px;
  


  z-index: 2;

  

}

#section1 .secCont div:nth-of-type(4){
  padding-top: 350px;
}



#section1:before {

  position: absolute;

  content: '';

  background: transparent url(../images/overlay.png) repeat-x;

  width: 100%;

  height: 317px;

  left: 0;

  right: 0;

  bottom: 100%;

}

.bouncing{
  position: fixed;
  left: 52%;
  top: 100px;
  transform: translateX(-50%);
  width: 900px;
  max-width: calc(100vw - 30px);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: 0.3s all;
}
.bouncing.active{
  top: 150px;
  transition: 0.5s all;
  opacity: 0.9;
  pointer-events: painted;
}

.close_x{
  position: absolute;
  right: 10px;
  top: 10px;
}

.secTitle-1 {

  margin: 75px 0 0;

}



.char{
  position: absolute;
  right: 0px;
  top: 0px;
  width: 460px;
}
.marvel{
  margin-top: 100px;
}


.secCont {

  position: relative;


  margin: 0 auto;

  z-index: 1;

}



.drD {

  position: absolute;

  right: -410px;

  bottom: 30px;

  z-index: 10;

}


.bg{
background: url(../images/bg.png) no-repeat 50% 0;
background-size: cover;
position: relative;
width: 100vw;
height: initial;
}
#section2 {

  

  z-index: 0;

  height: initial;
  padding-bottom: 50px;

}



.secTitle-2 {

  margin: 0 0 35px;

  padding: 35px 0 0;

}



.s2_pic {

  padding: 72px 0 0;

  width: 464px;

}



.tabNavbar {

  background: transparent url(../images/s2_btn_bg.png) no-repeat 0 0;

  margin: 0 0 8px;

  position: relative;

  z-index: 3;

}



.tabNavbar ul {

  padding: 0;

  margin: 0;

}



.tabNavbar ul li {

  float: left;

  display: block;

  width: 150px;

  height: 50px;

  margin: 13px 10px 0 0;

}



.tabNavbar ul li.active a,

.tabNavbar ul li a:hover,

.btnFixed span a:hover,

.btnShowHide:hover {

  -webkit-filter: brightness(140%);

  filter: brightness(140%);

}



.tabNavbar ul li a {

  display: inline-block;

  background: url(../images/tabs_btn.png) no-repeat 0 0;

  width: 100%;

  height: 100%;

  text-indent: -99999em;

}



.tabNavbar ul li:nth-child(2) a {

  background-position-x: -150px;

}



.tabNavbar ul li:nth-child(3) a {

  background-position-x: -300px;

}



.tabNavbar ul li:last-child {

  margin-right: 0;

}



.tabContent {

  background: transparent url(../images/s2_content_bg.png) no-repeat 0 0;

  width: 650px;

  height: 500px;

  position: relative;

  z-index: 2;

}



.tab-pane {

  display: none;

  position: absolute;

  left: 0;

  right: 0;

  width: 100%;

  top: 45px;

}



.tab-pane.active {

  display: block;

}



#tab-1 {

  background: transparent url(../images/s2_content-1.png) no-repeat 0 0;

  width: 560px;

  height: 419px;

  margin: 0 auto;

}



#tab-2 {

  left: 26px;

  margin: -137px 0 0;

  background: transparent url(../images/s2_content-2.png) no-repeat 0 0;

  width: 658px;

  height: 538px;

  padding: 204px 0 0;

}



#tab-2 ul {

  margin: 0;

  padding: 0;

}



#tab-2 ul li {

  display: block;

  float: left;

  margin: 0 10px;

}



#tab-2 ul li:first-child {

  margin-left: 21px;

}



#tab-2 ul li a {

  display: inline-block;



}



#tab-3 {

  background: transparent url(../images/s3_content-1.png) no-repeat 0 0;

  width: 607px;

  height: 413px;

  margin: 0 auto;

}



#tab-4 {

  background: transparent url(../images/s3_content-2.png) no-repeat 0 0;

  width: 609px;

  height: 407px;

  margin: 0 auto;

}



#tab-5 {

  background: transparent url(../images/s3_content-3.png) no-repeat 0 0;

  width: 602px;

  height: 377px;

  margin: 0 auto;

}



.popoverShow {

  z-index: 999;

  display: none;

}



.popoverShow .overlay {

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, .7);

  position: absolute;

  top: 0;

  left: 0;

}



.popoverShow .img-show {

  position: absolute;

  top: 30%;

  left: 0;

  /* transform: translate(-50%, -50%); */

  overflow: hidden;

  left: 0;

  right: 0;

  margin-left: auto;

  margin-right: auto;

}



span.closeBtn {

  position: absolute;

  top: 6px;

  right: 50%;

  width: 25px;

  height: 21px;

  z-index: 9999;

  cursor: pointer;

  margin-right: -111px;

}



#section3 {

  background: url(../images/s3_bg.jpg) no-repeat 50% 0;

  z-index: 4;

  height: 930px;

}



.secTitle-3 {

  padding: 35px 0 0;

  margin: 0 0 44px;

}



.s3_pic {

  padding: 50px 0 0;

  width: 472px;

}



#section4 {

  background: url(../images/s4_bg.jpg) no-repeat 50% 0;

  z-index: 5;

  height: 1083px;

}



.s4_pic {

  position: relative;

  top: 50%;

  -webkit-transform: translateY(-50%);

  -o-transform: translateY(-50%);

  transform: translateY(-50%);

}



.copyright {

  background: #000;

  

  text-align: center;

}



@media (min-width: 1200px) {

  .fb {

    display: block;

  }

}

@media (max-width:1800px){
  .char{
    right: -100px;
  }
}
@media (max-width:1600px){
  .char{
    right: -250px;
  }
}
@media (max-width:1200px){
  .wrapper{
    min-width: 100vw;
  }
  #section1 .secCont div:nth-of-type(4){
    padding-top: 100px;
  }
  .char{
    display: none;
  }
  .S-left-15pa{
    margin-left: -15%;
  }
  .sideBar{
    top: auto;
    bottom: 0px;
  }
  .close_x {
    position: absolute;
    right: 0px;
    top: -1px;
    width: 50px;
  }
  .bouncing{
    left: 50%;
  }

}