html,
body {
  width: 100%;
  height: auto;
  scroll-behavior: smooth;
  margin: 0;
}

.logo-wrap {
  width: 550px;
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: column;
}

.company-logo {
  width: 80%;
  height: 20%;
  background: no-repeat center;
  -webkit-background-size: contain;
  background-size: contain;
  display: none;
}

.company-logo2 {
  height: 54px;
  width: 200px;
  position: absolute;
  bottom: 12px;
  left: 12px;
}

.company-logo2-img{
  height: 100%;
  width: 100%;
}


.default-show {
  display: block;
}

.game-logo {
  width: 100%;
  height: 60%;
  background: no-repeat center;
  -webkit-background-size: contain;
  background-size: contain;
}

.loading_bg {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: no-repeat center;
  background-size: cover;
}

.loading_start {
  /* z-index: 1; */
  width: 100%;
  height: 100%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.loading_frame {
  display: flex;
  align-items: center;
  width: 280px;
  height: 20px;
  position: relative;
  margin-top: 10px;
  padding: 0 4px;
  background-position-y: 2px;
  box-sizing: border-box;
  background: linear-gradient(rgb(51 45 45), rgb(10 11 34));
  border-radius: 15px;
  box-shadow: 2px 2px 3px 0 #535353cf, inset 4px 2px 2px 0px #413126;
  background-image: linear-gradient(to bottom, #8a674d -50%,#241b15 50%, #8a674d 100%), linear-gradient(to bottom, #f0ae6d 0%, #683401 50%,#f0ae6d 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 2px double transparent;
}

.loading_filled {
  -webkit-transition: width 1s;
  /* Safari */
  transition: width 1s;
  min-width: 10px;
  background-position: left;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0px 0px 3px 3px #dd8936;
}

.dra-loading {
  width: 100%;
  height: 100%;
  background-color: #020104;
  position: fixed;
  z-index: 9992;
  display: none;
  justify-content: center;
  align-items: center;
}

.loading-msg {
  font-size: 25px;
  font-weight: bold;
  word-break: break-word;
  font-family: Helvetica, Verdana, Arial, sans-serif;
  text-align: center;
  display: inline-block;
  width: 100%;
  height: 70px;
}

.logo-wrap.center-logo {
  top: auto;
}

.certification {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  opacity: 0.6;
}

.certification-text {
  color: #ffffff;
  margin-bottom: 10px;
  font-size: 16px;
}

.certification-logos {
  display: flex;
  align-items: center;
  gap: 20px;
}

.certification-logos img:nth-of-type(1) {
  height: 26px;
}

.certification-logos img:nth-of-type(2) {
  height: 50px;
}

.certification2 {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  opacity: 0.6;
}

.certification2-text {
  color: #ffffff;
  margin-bottom: 10px;
  font-size: 16px;
}

.certification2-logos {
  display: flex;
  align-items: center;
  gap: 20px;
}

.certification2-logos img:nth-of-type(1) {
  height: 26px;
}

.certification2-logos img:nth-of-type(2) {
  height: 50px;
}
/*minify size, 1 橫的以高度為主*/

@media (orientation: landscape) {
  @media only screen and (max-height: 680px) {
    .logo-wrap {
      width: 450px;
      height: 525px;
    }
    .loading-msg {
      width: 100%;
    }
  }
  @media only screen and (max-height: 430px) {
    .company-logo {
      width: 55%;
      height: 12%;
    }
    .company-logo2 {
      height: 38px;
    }
    .game-logo {
      width: 65%;
      height: 50%;
    }
    .logo-wrap {
      width: 300px;
      height: 100%;
      position: fixed;
    }
    .loading-msg {
      width: 100%;
      height: 45px;
      display: inline-block;
      font-size: 12px;
    }
    .certification-text {
      font-size: 12px;
    }

    .certification-logos img:nth-of-type(1) {
      height: 18px;
    }
    
    .certification-logos img:nth-of-type(2) {
      height: 38px;
    }

    .certification2-text {
      font-size: 12px;
    }

    .certification2-logos img:nth-of-type(1) {
      height: 18px;
    }
    
    .certification2-logos img:nth-of-type(2) {
      height: 38px;
    }
  }
  .dra-loading-extra11 {
    width: 100vmin;
    height: 100vmax;
    transform-origin: top left;
    transform: rotate(90deg) translate(0, -100vmax);
  }
  .dra-loading-extra11 .logo-wrap {
    position: static;
    top: auto;
  }
}

/*minify size, 2 直的以寬度為主*/

@media (orientation: portrait) {
  @media only screen and (max-width: 768px) {
    .logo-wrap {
      width: 350px;
      height: 580px;
    }
    .loading-msg {
      width: 100%;
      font-size: 18px;
    }
  }
  @media only screen and (max-width: 680px) {
    .company-logo {
      height: 20%;
    }
    .company-logo2 {
      height: 38px;
    }
    .game-logo {
      height: 50%;
    }
    
    .certification-text {
      font-size: 12px;
    }

    .certification-logos img:nth-of-type(1) {
      height: 18px;
    }
    
    .certification-logos img:nth-of-type(2) {
      height: 38px;
    }

    .certification2-text {
      font-size: 12px;
    }

    .certification2-logos img:nth-of-type(1) {
      height: 18px;
    }
    
    .certification2-logos img:nth-of-type(2) {
      height: 38px;
    }

    .logo-wrap {
      width: 300px;
      height: 450px;
    }
    .loading-msg {
      width: 100%;
    }
  }
  @media only screen and (max-width: 460px) {
    .company-logo2 {
      height: 30px;
    }
    .certification2-logos {
      gap: 10px;
    }
    .certification2-logos img:nth-of-type(1) {
      height: 12px;
    }
    
    .certification2-logos img:nth-of-type(2) {
      height: 32px;
    }
  }
}