@charset "UTF-8";

body {
  font-family: '微軟正黑體', 'Malgun Gothic', Dotum, Tahoma, sans-serif;
  background-color: #111111;
  color: #fff;
  overflow-x: hidden;
}

* {
  margin: 0px;
  padding: 0px;
}

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

:focus {
  outline: none;
}

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

button:focus {
  outline: none;
}

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

#fireworks {
  padding-top: 5vh;
  min-height: 100vh;
}

/* header */
#header {
  background: url(../image/yubiley_main.jpg) no-repeat 50% 100%;
  background-size: cover;
  height: 100vh;
  position: relative;
  padding-top: 50px;
}

#header .title {
  position: absolute;
  bottom: 16vh;
  left: 0;
  right: 0;
}

/* header */

/* sidebar */
.fixedBox {
  position: fixed;
  overflow: hidden;
  bottom: 8vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
}

.LinkBtn {
  margin: 0 16px;
}

.sideBtn {
  position: fixed;
  top: 14vh;
  right: 1vw;
  z-index: 999;
}

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

.sideBtn ul>li {
  margin: 0 0 -8px;
}

.sideBtn ul>li>a {
  display: block;
  padding: 0;
  text-align: center;
  text-decoration: none;
}

.sideBtn ul>li>a:hover,
.sideBtn ul>li>a:focus,
.sideBtn ul>li>a.active,
.LinkBtn:hover {
  outline: none;
  filter: brightness(150%);
}

/* 清除navbar.css重疊樣式 */
.sideBtn .nav-link:hover,
.nav-link:active,
.nav-link:focus {
  background: none;
}

.nav {
  transition: .6s all;
}

.btn-on {
  background: none;
  border: none;
  transform: rotate(0deg);
  transition: .6s all;
}

.btn-on.open {
  transform: rotate(-180deg);
}

.sideBtn .nav.off {
  transform: translateX(100%);
  transition: .6s all;
}

/* sidebar */

#tab {
  background: transparent url(../image/yubiley_bg.jpg) no-repeat 50% 0;
  background-size: cover;
  position: relative;
  z-index: 2;
  padding: 0 0 150px;
  overflow: hidden;
  text-align: center;
}

.mirac {
  position: relative;
  background: transparent url(../image/yubiley_bg1.png) no-repeat 50% 0;
  margin: 4vh auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.mirac::before {
  content: '';
  position: absolute;
  background: transparent url(../image/yubiley_deco.png) no-repeat 0 0;
  width: 1301px;
  height: 261px;
  top: -208px;
}

.mirac::after {
  content: '';
  position: absolute;
  background: transparent url(../image/yubiley_deco1.png) no-repeat 0 0;
  width: 399px;
  height: 104px;
  right: 0;
  bottom: 6vw;
}

.mirac img {
  margin: 9.5vh 1vw;
}

.tabs {
  max-width: 1360px;
  margin: 0 auto;
  margin-top: 6vh;
}

.tabs img {
  margin: 0 0.6vw;
}

.tabs .tab:nth-of-type(1) {
  background: transparent url(../image/yubiley_bt11.png) no-repeat 50% 0;
  background-size: contain;
}

.tabs .tab:nth-of-type(2) {
  background: transparent url(../image/yubiley_bt22.png) no-repeat 50% 0;
  background-size: contain;

}

.tabs .tab:nth-of-type(3) {
  background: transparent url(../image/yubiley_bt33.png) no-repeat 50% 0;
  background-size: contain;

}

.tabs img:hover,
.tabs .tab .active {
  opacity: 0;
}

.tab-content {
  position: relative;
  max-width: 1637px;
  margin: 0 auto;
}

.tab-content::before {
  content: '';
  position: absolute;
  background: transparent url(../image/yubiley_deco2.png) no-repeat 0 0;
  width: 267px;
  height: 97px;
  left: -8vw;
  top: 15vh;
}

.tab-content .tab-pane {
  padding: 6vh 0;
}

.tab-content .tab-pane:nth-of-type(1) {
  background: transparent url(../image/yubiley_cbg1.png) no-repeat 50% 0;
  padding-bottom: 0;
}

.tab-content .tab-pane:nth-of-type(2) {
  background: transparent url(../image/yubiley_cbg2.png) no-repeat 50% 0;
}

.tab-content .tab-pane:nth-of-type(3) {
  background: transparent url(../image/yubiley_cbg3.png) no-repeat 50% 0;
}

#charInfo1>div {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  max-width: 1208px;
  margin: 0 auto;
  margin-top: 2vh;
}

#charInfo1 img {
  margin: 2vh 1vw;
}

#charInfo1 img:nth-of-type(14) {
  margin: 0;
  margin-top: -1vh;
}

#charInfo1 img:last-of-type {
  transform: translateX(5.6vw);
  margin: 0;
}

#charInfo2>div {
  display: flex;
  flex-wrap: wrap;
  max-width: 1230px;
  margin: 6vh auto;
  align-items: center;
}

#charInfo2>div p {
  text-align: left;
  margin-top: 2vh;
}

#charInfo2>div>img:last-of-type {
  transform: translate(5vw, 15vh);
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

.imgblock {
  margin: 12vh auto 0 auto;
  display: block;
}

.note {
  color: #e86e4b;
  font-weight: bold;
}

/* 角色選單 */
.charWrap {
  text-align: center;
}

@media (max-width: 1440px) {

  .mirac {
    justify-content: space-evenly;
  }

  .mirac img {
    margin: 8vh 0vw;
  }

  .tab-content .tab-pane {
    padding: 4vh 0;
  }

}

@media (max-width: 1024px) {
  .fixedBox {
    left: 16%;
    transform: initial;
  }

  .mirac {
    background-size: cover !important;
    padding: 10vw 0;
  }

  .mirac::before,
  #charInfo1 img:last-of-type,
  .tab-content::before,
  #charInfo2>div>img:last-of-type {
    display: none;
  }

  .mirac img {
    margin: 0;
  }

  .tab-content .tab-pane {
    background-size: cover !important;
    padding: 4vh 0;
  }

  #charInfo1>div {
    margin-top: 0;
  }

  #charInfo1 img {
    margin: 0.4vw 0.4vw;
  }

  #charInfo2>div {
    margin: 2vh auto;
  }
}

@media (max-width: 850px) {
  .fixedBox {
    left: 8%;
  }

  #charInfo2>div>img:first-child,
  .mirac::after {
    display: none;
  }
}

@media (max-width: 770px) {
  #charInfo1 img:nth-of-type(14) {
    margin: 0;
    margin-top: inherit;
  }
}

@media (max-width: 480px) {

  .sideBtn {
    width: 22vw;
  }

  .fixedBox {
    left: 0%;
    bottom: 4%;
  }

  .LinkBtn {
    margin: 2px;
    width: 30vw;
  }

  #header .title {
    top: 40vh;
    width: 80vw;
  }

  .tabs img {
    width: 30vw;
  }

  .mirac {
    background: none;
    padding: 0;
  }

  #charInfo1 img:nth-of-type(14) {
    width: 50vw;
  }

}