@charset "utf-8";
/* CSS Document */
body{
  margin: 0;
  padding: 0;
  width: 100%;
  /* min-width: 1200px; */
  background: #000 url(../images/bg.jpg) top center  no-repeat;
  -moz-background-size: cover;
  background-size: cover;
  overflow-x:hidden;
}
ol, ul {
  list-style: none;
}
.logo, .btn-l1, .btn-l2, .btn-l3, .btn-l4, .btn-r1, .btn-r2, .btn-r3, .btn-sec2 {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
#bg{
  height: 100%;
  width: 100%;
}

img{border:none;vertical-align: middle;}
a {
  /* text-decoration: none; */
  /* -webkit-transition: all 0.3s ease-in; */
  -moz-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
}
.bg{
  max-width: 1200px;
}
header {
  background-color: #000;
  width: 100%;
  height: 54px;
  position: relative;
  z-index: 300;
  position: fixed;
}
header a {
  color: #fff;
  font-size: 16px;
  font-weight: 900;
}
header a:hover {
  color: #f2eb2c;
  text-decoration: none;
}


.headertext {
  float: right;
  margin-top: 20px;
  margin-left: 12px;
}

.bh, .fb {
  float: right;
  font-size: 0px;
  margin-top: 5px;
  margin-left: 5px;
  width: 49px;
  height: 49px;
}
.bh:hover, .fb:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
}

.bh {
  background: url("https://landing.mangot5.com/template/hot/event/common/bh.png") top center no-repeat;
}

.fb {
  background: url("https://landing.mangot5.com/template/hot/event/common/fb.png") top center no-repeat;
}

.main{ 
    width:100%; 
  height:auto;
}
.main div{ 
    /*width:100%;*/
}
#float01{height:5264px;position: relative;}
#float02{height: 739px;position: relative;}
#float03{height: 703px;position: relative;}
#float04{height: 558px;position: relative;}
#float05{height: 790px;position: relative;}

div.floatCtro{
  width: 140px;
  height: 350px;
  position: absolute;
  right: 0;
  top: 0;
  margin-left: 10px;
  z-index: 5;
  font-family: "微軟正黑體";
}
div.floatCtro p{
  width: 126px;
  text-align:center;
  /*font-weight:bold;*/
  height: 50px;
  line-height: 45px;
  font-family: "微軟正黑體";
  font-size: 16px;

  margin: 0;
  padding: 0;
  cursor: pointer;
  background: url(../images/btn.png) no-repeat top center;
  text-decoration: none;
  color: #58b2e8;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
}
div.floatCtro a{
  display: inline-block;
  cursor: pointer;
  text-align: center;
  background-image: url(../images/btn02.png);
  background-repeat: no-repeat;
  width: 178px;
  height: 41px;
  color: #af986e;
  font-size: 16px;
  font-weight: bold;
  line-height: 41px;
}
div.floatCtro a span{
  display: block;
  width: 200px;
  height: 44px;
  line-height: 22px;
  font-size: 14px;
  text-align: center;
  _margin: -10px 0 0 16px;
  margin-top: 155px;
  margin-right: 16px;
  margin-bottom: 8px;
  margin-left: 1px;
}
div.floatCtro a:hover{
  color: #58b2e8;
  zoom: 1;
  font-size: 18px;

}
  div.floatCtro p:hover{
  background: url(../images/btn.png) no-repeat top center;
  color: #58b2e8;
  font-size: 18px;
}
  div.floatCtro p.cur{
    background: url(../images/btn.png) no-repeat top center;
    color: #ede30d;
    font-size: 18px;
}
.pluitem + .add[style]{
  display:none;
  position:absolute;
  top:-1000000px;
  visibility:hidden
}
.banner + .add[style]{
  display:none;
  position:absolute;
  top:-1000000px;
  visibility:hidden
}
.add:last-child{
  display:none;
  position:absolute;
  top:-1000000px;
  visibility:hidden
}
.add:first-child{
  display:none;
  position:absolute;
  top:-1000000px;
  visibility:hidden;
}
.fdad,.ad,.adbka{
  display:none;
  position:absolute;
  top:-1000000px;
  visibility:hidden;
}
.f01_content{
  position: relative;
  height: 5264px;
}
.f02_content{
  height: 506px;
  margin: 0 auto;
}


/*footer CSS*/
.footer {
  position: relative;
  background: url(../images/footer.jpg) no-repeat top center;
  width: 100%;
  min-width: 1000px;
  height: 96px;
  margin: 0 auto;
}

#menu{
  width:690px;
  margin:0 auto;
}

.navbar-light .navbar-nav .nav-link {
    text-indent: -9999px;
}
.top { height: 58px; background-color: rgba(0,0,0,.55); position: fixed; width: 100%; z-index: 99; border-bottom: 1px solid rgba(255,255,255,.15); }
.topwrap { width:1420px; margin:0 auto; position:relative;}

ul.menu li a.facebook:hover { background-position-x: -746px; }
.navbar-light .navbar-nav .nav-link {
    color: #fff;
}
.boxbtn{
  background-image: url(../images/boxbtn.png);
    width: 450px;
    height: 300px;
    position: absolute;
    top: 435px;
    left: 50%;
    margin-left: 165px;
}
.boxbtn:hover{
  transform:translateY(0.75em);
}

/*top*/
.bg-light {
    z-index: 7;
}
.navbar-expand-lg {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    /*-ms-flex-flow: row nowrap;
    flex-flow: row nowrap;*/
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    position: fixed!important;
    z-index: 999;
    width: 100%;
}
/*內容*/
.top1{
  background: url(../images/top1.png) no-repeat top center;
  position: relative;
  width: 909px;
  height: 774px;
  margin: 220px auto 0;
  z-index: 2;
}
.top2{
  position: relative;
  width: 1050px;
  height: 680px;
  margin: 45px auto 0;
  z-index: 2;
}
.top2_1{
  background: url(../images/top6.png) no-repeat top center;
  position: relative;
  width: 1050px;
  height: 55px;
  margin: 0 auto;
  z-index: 2;
}
.top3{
  background: url(../images/top2.png) no-repeat top center;
  position: relative;
  width: 1050px;
  height: 592px;
  margin: 0 auto;
  z-index: 2;
}
.top4{
  background: url(../images/top3.png) no-repeat top center;
  position: relative;
  width: 1050px;
  height: 573px;
  margin: 0 auto 0;
  z-index: 2;
}
.top5{
  background: url(../images/top4.png) no-repeat top center;
  position: relative;
  width: 1050px;
  height: 496px;
  margin: 0 auto 0;
  z-index: 2;
}
.top6{
  background: url(../images/top5.png) no-repeat top center;
  position: relative;
  width: 1050px;
  height: 474px;
  margin: 0 auto 0;
  z-index: 2;
}
/*END*/
/*內容2*/
.cont1{
  background: url(../images/cont1.png) no-repeat top center;
  width: 1250px;
  height: 800px;
  position: absolute;
  top: 80px;
  left: 50%;
  margin-left: -600px;
}
.cont2{
  background: url(../images/cont2.png) no-repeat top center;
  width: 1250px;
  height: 800px;
  position: absolute;
  top: 80px;
  left: 50%;
  margin-left: -710px;
}
.cont3{
  background: url(../images/cont3.png) no-repeat top center;
  width: 1250px;
  height: 800px;
  position: absolute;
  top: 105px;
  left: 50%;
  margin-left: -639px;
}
.cont4{
  background: url(../images/cont4.png) no-repeat top center;
  width: 1250px;
  height: 800px;
  position: absolute;
  top: 85px;
  left: 50%;
  margin-left: -638px;
}
.btn1{
  background: url(../images/btn01.png) no-repeat top center;
  width: 203px;
  height: 67px;
  position: absolute;
  top: 47%;
  left: 50%;
  margin-left: -307px;
}
/*END*/
.bigbtnall{
  position: fixed;
  top: 215px;
  right: 25px;
  z-index: 200;
}
.fb2{
  background: url("../images/facebook.jpg") center top no-repeat;
  width: 265px;
  height: 67px;
  display: block;
  position: absolute;
  top: 520px;
  left: 50%;
  margin-left: -155px;
}
.fb2 a{
  display: block;
}
.bigbtn {
  background: url("../images/bigbtn.png") center top no-repeat;
  width: 125px;
  height: 135px;
  background-position-x: 0;
  display: block;
  font-size: 0;
  /* margin-top: -20px; */
}
[class*="bigbtn"]:hover{background-position-x: -126px;}
.bigbtnmember{background-position-y: 0;}
.bigbtndownload{background-position-y: -129px;}
.bigbtnfb{background-position-y: -262px;}

.btnz{background: url(../images/icon.png) no-repeat top center;}

.btn05{
    background-position: -533px 0px;
    height: 80px;
    width: 130px;
    text-indent: -9999px;
}
.btn06{
    background-position: -533px -86px;
    height: 80px;
    width: 130px;
    text-indent: -9999px;
}
.btn05:visited{
    background-position: -533px 0px;
}
.btn06:visited{
    background-position: -533px -86px;
}
.btn05:hover{
    background-position: -533px 0px;
}
.btn06:hover{
    background-position: -533px -86px;
}
.btn05.active{
    background-position: -533px 0px;
}
.btn06.active{
    background-position: -533px -86px;
}
#canvas{
  position:absolute;
  left: 0;
  top:0;
  z-index: 2;
}
#cd-2 {
  float: left;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -126px;
}
#cd-3 {
  float: left;
  position: absolute;
  top: 0;
  left: 50%;
}
#cd-2 a{
  display: block;
}
#cd-3 a{
  display: block;
}
#cd-2:visited {
  float: left;
  margin: -1px 0 0 280px;
}
#cd-3:visited {
  float: left;
  margin: -2px 0 0 -4px;
}

.modal-header .close {
  margin-top: -62px;
}
.close {
  text-shadow:inherit;
  opacity:1;
}
.modal {
  top: 20%;
}
#wrapper2 {
  height: 413px;
  width: 1000px;
  max-width: 100%;
  margin: 85px auto 0;
}
.jp-audio {
  position: absolute;
  top: 16px;
  right: 20px;
  z-index: 99;
}
.modal-content{
  background-image: url(../images/a01.png);
  height: 276px;
  background-color:inherit;
  border:inherit;
}
.modal-header{
  border-bottom:hidden;
}
.modal-footer{
  border-top:hidden;
}
.close {
font-size: 6rem;
font-weight: 200;
color: #293ca3;
}
.close:hover {
  color: #e8e8e8;
}
.btn{
  /* background-image: url(../images/btn02.png); */
  background-repeat: no-repeat;
  width: 129px;
  height: 70px;
}
.btn-primary{
  /* background-color: #af986e; */
  /* border-color: #af986e; */
}
@media (min-width: 576px){
.modal-dialog {
width: 657px;
}

}

@media (min-width: 600px) and (max-width: 1800px) {
  #cd-2 {
    top: 80px;
    left: 0;
    margin-left: 0; 
  }
  #cd-3 {
    top: 154px;
    left: 0;
  }
}
@media (min-width: 600px) and (max-width: 1200px) {

  .top2 {
    width: 620px;
}
}
@media screen and (max-width:767px){
body{
  background-image: url(../images/bg_m.jpg);
  overflow-x:hidden!important;
}
.btn1 {
  top: 45%;
  margin-left: -111px;
}
.footer{
  background: url(../images/footer_m.jpg) no-repeat 0px 0px;
  background-size: contain;
  height: 406px;
  bottom: 0;
}
.modal-content {
  height: 149px;
  width: 100%;
  background-size: contain;
}
.modal-header .close {
  margin-top: -27px;
}
.jp-audio {
  right: 100px;
}
#wrapper2 {
  width: 32%;
  max-width: 100%;
  margin-left: -20px;
}
div.floatCtro {
  right: 0;
  top: 0;
  margin-left: 0;
  margin-top: 10px;
}
ul.menu {
  position: inherit;
  right: inherit;
  top: inherit;
}
.navbar-nav {
  float: inherit;
  margin: 0;
}
ul.menu li a {
  background-image:inherit;
  font-size: 2.5rem;
}
ul.menu li {
  float:inherit;
  width: 100%;
}
.btn {
  width:100%;
}
#menu{display: none;}
div.floatCtro p {
  display: none;
}
#cd-2 {
  top: 80px;
  left: 0;
  margin-left: 0; 
}
#cd-3 {
  top: 154px;
  left: 0;
}
.top1 {
  width: 548px;
  height: 1390px;
  position: absolute;
  left: 50%;
  top: 18%;
  margin-left: -278px;
  background: url(../images/top1_m.png) no-repeat top center;
  background-size: 65%;
}
.top2 {
  top: 22%;
  margin-left: 20px;
}
.top2_1 {
  width: 548px;
  height: 55px;
  position: absolute;
  left: 50%;
  top:-8%;
  margin-left: -627px;
  background: url(../images/top6_m.png) no-repeat top center;
  background-size: 65%;
}
.top3 {
  width: 548px;
  height: 824px;
  position: absolute;
  left: 50%;
  top: 53%;
  margin-left: -278px;
  background: url(../images/top2_m.png) no-repeat top center;
  background-size: 65%;
}
.top4 {
  width: 548px;
  height: 824px;
  position: absolute;
  left: 50%;
  top: 64%;
  margin-left: -278px;
  background: url(../images/top3_m.png) no-repeat top center;
  background-size: 65%;
}
.top5 {
  width: 548px;
  height: 824px;
  position: absolute;
  left: 50%;
  top: 75%;
  margin-left: -278px;
  background: url(../images/top4_m.png) no-repeat top center;
  background-size: 65%;
}
.top6 {
  width: 548px;
  height: 824px;
  position: absolute;
  left: 50%;
  top: 87%;
  margin-left: -278px;
  background: url(../images/top5_m.png) no-repeat top center;
  background-size: 65%;
}
.cont1 {
  width: 548px;
  height: 469px;
  position: absolute;
  left: 50%;
  top: 74%;
  margin-left: -278px;
  background: url(../images/cont1_m.png) no-repeat top center;
  background-size: 65%;
}
.cont2 {
  width: 548px;
  height: 469px;
  position: absolute;
  left: 50%;
  top: 52%;
  margin-left: -278px;
  background: url(../images/cont2_m.png) no-repeat top center;
  background-size: 65%;
}
.cont3 {
  width: 548px;
  height: 469px;
  position: absolute;
  left: 50%;
  top: 40%;
  margin-left: -278px;
  background: url(../images/cont3_m.png) no-repeat top center;
  background-size: 65%;
}
.cont4 {
  width: 548px;
  height: 469px;
  position: absolute;
  left: 50%;
  top: 25%;
  margin-left: -278px;
  background: url(../images/cont4_m.png) no-repeat top center;
  background-size: 65%;
}
}