/** common mixins **/
/* misc */
#invisible-container {
  visibility: hidden;
}
.btn-to-event,
#idx .ctr .btn,
#lose .cnt .btn {
  cursor: pointer;
}
.btn-to-event.disable-mode,
#idx .ctr .btn.disable-mode,
#lose .cnt .btn.disable-mode {
  background-color: #b4a9ba;
  color: #d6d6d6;
}
.btn-to-event.disable-mode .arr,
#idx .ctr .btn.disable-mode .arr,
#lose .cnt .btn.disable-mode .arr {
  visibility: hidden;
}
/* bg */
#bg .ctr .mobile-image {
  position: absolute;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
}
/* event */
#event.hide-mode {
  visibility: hidden;
  height: 0;
  min-height: 0;
  overflow: hidden;
}
/* video-tour */
#video-tour {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  background-color: #000000;
  background-image: url("../images/wbg.jpg");
  background-size: auto;
  background-position: center;
  background-size: cover;
  z-index: 101;
}
@media (max-width: 640px) {
  #video-tour {
    background-image: url("../images/wbg-mobile0.jpg");
    background-size: auto;
  }
}
#video-tour > .text {
  position: absolute;
  background-image: url("../images/wbg-txt.png");
  background-size: auto;
  left: 50%;
  top: 65%;
  width: 960px;
  height: 270px;
  margin-left: -480px;
  margin-top: -135px;
  background-size: contain;
  background-repeat: no-repeat;
}
#video-tour > .dote {
  background: url(../images/wdote.png) repeat center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
#video-tour > .ovl {
  background: #430d5e;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
}
#video-tour.no-background {
  background-image: none;
}
#video-tour.no-background > .text {
  display: none;
}
#video-tour #video-tour-container {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
}
#video-tour .iframe-cover {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}
#video-tour .time-text {
  position: absolute;
  left: 50px;
  bottom: 50px;
  font-family: '微軟正黑體', "Heiti TC", serif;
  font-size: 36px;
  color: white;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  padding: 2px 12px;
}
/* event fix */
@media (max-width: 640px) {
  #event {
    display: table-cell;
    vertical-align: middle;
    width: 100vw;
  }
  #event #join {
    padding: 20px 10px;
    height: auto;
    margin: 60px auto;
    left: auto;
    top: auto;
    bottom: auto;
    text-align: center;
    position: relative;
  }
}