.browser-page,
.not-support {
  width: 100%;
  color: #181818;
  font-family: "Segoe UI", Arial, sans-serif;
  background: #fff;
}

.browser-page {
  position: relative;
  overflow: hidden;
}

body:has(.browser-page) .header-menu .redirect-bar {
  display: none !important;
  height: 0 !important;
}

.browser-hero {
  position: relative;
  min-height: 1238px;
  padding: 96px 0 80px;
  box-sizing: border-box;
  overflow: hidden;
}

.browser-hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -196px;
  left: 50%;
  width: 2053px;
  height: 800px;
  transform: translateX(-50%);
  background: url("../images/browser/browser-wave.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}

.browser-page__content {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(1320px, calc(100% - 48px));
  margin: 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.browser-intro {
  display: flex;
  width: 100%;
  height: 230px;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.browser-intro h1,
.browser-intro p,
.browser-connect-card h2,
.browser-connect-card p,
.browser-instructions ol {
  margin: 0;
}

.browser-intro h1 {
  width: 100%;
  color: #26262e;
  font-size: 42px;
  font-weight: 700;
  line-height: 68px;
}

.browser-intro > p {
  width: 100%;
  margin-top: 25px;
  color: #84828e;
  font-size: 26px;
  font-weight: 400;
  line-height: 35px;
}

.browser-tutorial {
  display: inline-flex;
  width: max-content;
  min-width: 169px;
  align-self: flex-start;
  height: 52px;
  margin-top: 50px;
  padding: 0 28px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 50px;
  color: #7a62f0;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  text-decoration: none;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(90deg, #a22bf6 0%, #79a9f0 100%) border-box;
  transition: background-color 180ms ease;
}

.browser-tutorial:hover {
  color: #7a62f0;
  background: #edebfc;
}

.browser-tutorial:focus-visible,
#renovate:focus-visible {
  outline: 2px solid #7a62f0;
  outline-offset: 4px;
}

.browser-connect-card {
  display: flex;
  width: 1200px;
  height: 792px;
  padding: 40px;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 60px;
  border: 1px solid #e6e6e6;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.5);
}

.browser-connect-card__header {
  display: flex;
  width: 100%;
  height: 90px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-align: center;
}

.browser-connect-card__header h2 {
  font-size: 28px;
  font-weight: 700;
  line-height: 38px;
}

.browser-connect-card__header p {
  color: #666;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
}

.browser-qr-stage {
  display: flex;
  width: 100%;
  height: 354px;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.browser-qr-frame {
  position: relative;
  display: flex;
  width: 320px;
  height: 320px;
  flex: 0 0 320px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid #9581f3;
  border-radius: 20px;
  background: #fff;
}

#qrcode {
  position: relative;
  width: 289px;
  height: 289px;
  transition: opacity 180ms ease;
}

#qrcode canvas,
#qrcode > img:not(#qrcodeicon) {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

#qrcodeicon {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 50px !important;
  height: 50px !important;
  transform: translate(-50%, -50%);
}

#renovate {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: none;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  background: rgba(255, 255, 255, 0.52);
  cursor: pointer;
}

#renovate .renovate_img {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: url("../images/browser/renovate.webp") center / cover no-repeat;
}

.browser-qr-frame.is-failed #qrcode {
  opacity: 0.34;
}

.browser-qr-frame.is-failed #renovate {
  display: flex;
}

.failedmsg {
  height: 24px;
  color: red;
  font-size: 18px;
  font-weight: 300;
  line-height: 24px;
  text-align: center;
  visibility: hidden;
}

.browser-qr-frame.is-failed + .failedmsg {
  visibility: visible;
}

.browser-instructions {
  display: flex;
  width: 100%;
  height: 148px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  color: #666;
  text-align: center;
}

.browser-instructions h2 {
  color: #181818;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
}

.browser-instructions ol {
  width: max-content;
  max-width: 100%;
  padding: 0;
  text-align: start;
  color: #666;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  list-style: decimal inside;
}

.browser-instructions li {
  margin: 0;
}

@media screen and (min-width: 1024px) {
  .browser-instructions li {
    white-space: nowrap;
  }
}

.browser-instructions a {
  color: #666;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.browser-instructions a:hover {
  color: #7a62f0;
}

.browser_show {
  display: block !important;
}

.browser_hide {
  display: none !important;
}

body:has(.browser-page) footer {
  display: flex;
  height: 458px !important;
  min-height: 458px;
  flex-direction: column;
}

body:has(.browser-page) footer .about {
  min-height: 0;
  flex: 1 1 auto;
}

body:has(.browser-page) footer .copyright {
  flex: 0 0 auto;
}

body:has(.browser-page) footer .copyright .media ul li,
body:has(.browser-page) footer .copyright .media ul li > a {
  width: 24px;
  height: 24px;
}

body:has(.browser-page) footer .copyright .media ul li img,
body:has(.browser-page) footer .copyright .media ul li svg {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain;
}

body:has(.browser-page) footer .copyright .col-md-3 > a,
body:has(.browser-page) footer .copyright .col-md-3 > a > span {
  line-height: normal;
}

.not-support {
  min-height: 700px;
  padding: 80px 24px;
  box-sizing: border-box;
}

.progress_notSupport {
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress_innerbox {
  display: flex;
  max-width: 680px;
  padding: 48px;
  flex-direction: column;
  align-items: center;
  border: 1px solid #9581f3;
  border-radius: 20px;
  text-align: center;
  background: #fff;
}

.progress_img {
  width: 210px;
  height: auto;
}

.progress_innerbox h1 {
  margin: 28px 0 0;
  font-size: 28px;
  line-height: 38px;
}

.progress_des {
  margin-top: 20px;
  color: #666;
  font-size: 18px;
  line-height: 24px;
}

.progress_des p {
  margin: 0 0 8px;
}

.progress_btn {
  display: inline-flex;
  min-width: 120px;
  height: 46px;
  margin-top: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  color: #fff;
  background: linear-gradient(90deg, #79a9f0, #a22bf6);
}

@media screen and (min-width: 1024px) and (max-width: 1319.9px) {
  .browser-hero {
    min-height: 1155px;
    padding: 66px 0 60px;
  }

  .browser-hero::before {
    top: -74px;
    width: 1024px;
    height: 681px;
    background-image: url("../images/browser/browser-wave-tablet.webp");
  }

  .browser-page__content {
    width: 1024px;
    gap: 42px;
  }

  .browser-intro {
    width: 864px;
    height: 203px;
  }

  .browser-intro h1 {
    font-size: 38px;
    line-height: 50px;
  }

  .browser-intro > p {
    font-size: 28px;
    line-height: 38px;
  }

  .browser-tutorial {
    min-width: 160px;
    height: 50px;
    margin-top: 40px;
    font-size: 18px;
    line-height: 26px;
  }

  .browser-connect-card {
    width: 800px;
    height: 784px;
  }

  .browser-instructions {
    height: 140px;
  }

  .browser-instructions ol {
    width: max-content;
    max-width: 100%;
    font-size: 16px;
    line-height: 22px;
  }

  body:has(.browser-page) footer {
    height: 468px !important;
    min-height: 468px;
  }
}

@media screen and (min-width: 481px) and (max-width: 1023.9px) {
  body:has(.browser-page) .header-menu nav {
    height: 56px;
  }

  .browser-hero {
    min-height: 1089px;
    padding: 64px 0 40px;
  }

  .browser-hero::before {
    top: -56px;
    width: 768px;
    height: 661px;
    background-image: url("../images/browser/browser-wave-768.webp");
  }

  .browser-page__content {
    width: 100%;
    gap: 30px;
  }

  .browser-intro {
    width: calc(100% - 80px);
    height: 183px;
  }

  .browser-intro h1 {
    font-size: 38px;
    line-height: 50px;
  }

  .browser-intro > p {
    font-size: 20px;
    line-height: 32px;
  }

  .browser-tutorial {
    min-width: 150px;
    height: 46px;
    margin-top: 30px;
    font-size: 18px;
    line-height: 26px;
  }

  .browser-connect-card {
    width: calc(100% - 80px);
    height: 772px;
  }

  .browser-connect-card__header {
    height: 86px;
  }

  .browser-connect-card__header p {
    font-size: 20px;
    line-height: 28px;
  }

  .browser-instructions {
    height: 132px;
  }

  .browser-instructions ol {
    width: 338px;
    font-size: 14px;
    line-height: 20px;
  }

  body:has(.browser-page) footer {
    height: 778px !important;
    min-height: 778px;
  }

  body:has(.browser-page) footer .about .container .row .col-md-3 {
    height: auto;
  }

  body:has(.browser-page) footer .copyright .container,
  body:has(.browser-page) footer .copyright .container .row,
  body:has(.browser-page) footer .copyright .container .row > div {
    height: auto;
  }
}

@media screen and (max-width: 480px) {
  .browser-hero {
    min-height: 1017px;
    padding: 44px 0 20px;
  }

  .browser-hero::before {
    display: none;
  }

  .browser-page__content {
    width: 100%;
    gap: 30px;
  }

  .browser-intro {
    width: calc(100% - 72px);
    height: 241px;
  }

  .browser-intro h1 {
    min-height: 84px;
    font-size: 32px;
    line-height: 42px;
  }

  .browser-intro > p {
    height: 56px;
    margin-top: 25px;
    font-size: 20px;
    line-height: 28px;
  }

  .browser-tutorial {
    min-width: 150px;
    height: 46px;
    margin-top: 30px;
    font-size: 16px;
    line-height: 22px;
  }

  .browser-connect-card {
    width: calc(100% - 60px);
    height: 682px;
    padding: 20px 10px;
  }

  .browser-connect-card__header {
    height: 92px;
  }

  .browser-connect-card__header h2 {
    font-size: 24px;
    line-height: 32px;
  }

  .browser-connect-card__header p {
    max-width: 280px;
    font-size: 14px;
    line-height: 20px;
  }

  .browser-qr-stage {
    height: 254px;
  }

  .browser-qr-frame {
    width: 220px;
    height: 220px;
    flex-basis: 220px;
    border-radius: 16px;
  }

  #qrcode {
    width: 197px;
    height: 197px;
  }

  #qrcodeicon {
    width: 34px !important;
    height: 34px !important;
  }

  #renovate .renovate_img {
    width: 42px;
    height: 42px;
  }

  .failedmsg {
    max-width: 280px;
    font-size: 14px;
    line-height: 20px;
  }

  .browser-instructions {
    height: 176px;
  }

  .browser-instructions h2 {
    width: 280px;
    font-size: 20px;
    line-height: 28px;
  }

  .browser-instructions ol {
    width: 280px;
    font-size: 14px;
    line-height: 20px;
  }

  .not-support {
    min-height: 620px;
    padding: 48px 20px;
  }

  .progress_innerbox {
    padding: 32px 20px;
  }

  .progress_img {
    width: 160px;
  }

  body:has(.browser-page) footer {
    height: 1183px !important;
    min-height: 1183px;
  }

  body:has(.browser-page) footer .about .container .row .col-md-3 {
    height: auto;
  }

  body:has(.browser-page) footer .copyright .container,
  body:has(.browser-page) footer .copyright .container .row,
  body:has(.browser-page) footer .copyright .container .row > div {
    height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .browser-tutorial,
  #qrcode {
    transition: none;
  }

}