@media screen and (min-width: 1920.9px) {
  .web3-banner-bg {height: calc(776 / 1920 * 100vw);}
}
/* 与主站首页中心区域统一，主站优化后删除 */
@media (min-width: 1680px) and (max-width: 1919.9px) {
  :root {--layout-padding: calc((100vw - 1440px) / 2);}
}
/* h5 start */
@media screen and (max-width: 1024.9px) {
  #footerMain {position: relative;}
  #footerLeft {position: absolute;top: -120px;}
  #footerMain dl {width: 25%;}
}

@media screen and (max-width: 992px) {
  .start-connect-wallet{flex-wrap: wrap;}
  .start-connect-wallet-right{margin-left: 0;width: 100%;display: flex;align-items: center;margin-bottom: 24rem;}

  .download-phone-bg{margin-left: 24rem;}
}

/* walletheader css, 注意权重! */
@media screen and (max-width: 768.9px) {
  /* #header-wallet .wallet-top-container {flex-direction: row-reverse;} */
  #header-wallet .wallet-top-container > button {display: none;}
  #header-wallet .wallet-top-connected-container .wallet-top-avatar {overflow: hidden;flex-shrink: 0;}
  #header-wallet .wallet-top-connected-container > span{white-space: nowrap;}
  #header-wallet .wallet-top-select {margin-right: 0px;margin-left: 16px;width: 24px;height: 24px;}
  #header-wallet .wallet-top-select .chain-icon::after {left: 10px;top: 5px;}
  #header-wallet .wallet-top-select .chain-icon::before {top: 17px;left: 10px;}
  .wallet-top-popover-dropdown > .wallet-top-userinfo {border: none;padding-bottom: 0;}
  .wallet-top-popover-dropdown > div {height: 72px;padding-left: 20px;padding-right: 16px;border-radius: 8px;background: var(--color-card-1);display: flex;align-items: center;box-sizing: border-box;margin-bottom: 8px;}
  .wallet-top-popover-dropdown > .wallet-disconnect-row svg.icon.second-nav-icon {width: 24px;height: 24px;margin: 4px 20px 4px 4px;}
  .wallet-top-popover-dropdown > .wallet-disconnect-row {margin-left: 0;margin-right: 0;}
  .wallet-top-popover-dropdown > .wallet-disconnect-row > span {font-size: 16px;line-height: 100%;}
  .wallet-top-popover-dropdown > .wallet-top-userinfo .wallet-top-avatar svg, 
  .wallet-top-popover-dropdown > .wallet-top-userinfo .wallet-top-avatar {width: 32px;height: 32px;}
  .wallet-top-popover-dropdown > .wallet-top-userinfo > .wallet-top-userinfo-right {margin-left: 8px;}
  .wallet-top-popover-dropdown .wallet-top-userinfo-right > .copyrow > .copyicon {position: relative;top: 12px;}
}

@media screen and (max-width: 768.9px) {
  ::-webkit-scrollbar {width: 4px;height: 4px;}
  /* header */
  #headLayout {padding: 10px 12px;}
  #logoSection {min-width: auto;}
  #logoSection .h1 {flex-shrink: 0;}
  #navLists {display: none;}
  section#opPanel > ul > li:not(:first-child):not(:last-child) {display: none;}
  section#opPanel > ul > li:last-child {display: block;}
  #modeStatus {margin: 0 8px;border: none;}
  #modeStatus a:first-child {display: none;}
  #modeStatus a {height: 20px;line-height: 20px;border: none;}
  #modeStatus a:last-child {border-radius: 4px;}
  .gateioToastTheme {max-width: 382px!important;word-break: break-word;}
  #opPanel li.opr-icon:hover {color: var(--color-text-1);}
  
  .footer-signup {display: none!important;}

  .web3-join {margin-bottom: 72px;}

  .web3-banner {align-items: flex-start;padding-top: 40px;}
  .web3-banner .banner-left {width: 100%;}

  .web3-futures th:nth-child(5), .web3-futures tr td:nth-child(5) {display: none;}
  .web3-futures tr::before{display: none;}
  .web3-futures th, .web3-futures tr td {width: 25%;}
  .web3-futures th:nth-child(3), .web3-futures tr td:nth-child(3) {display: none;}
  .web3-futures tr td:first-child>div span:not(:nth-child(2)) {display: none;}
  .web3-futures th h3 {white-space: nowrap;}

  .start-connect-wallet {flex-direction: column-reverse;}

  .download_dom {flex-direction: column;}
  .gateio-download-market-container {width: 100%;}
  .scan-download-text {width: auto;flex-grow: 1;word-break: break-word;}
  .download-phone-bg {margin-left: 0;margin-right: 0;width: 80%;position: static;margin-top: 27px;}
  .download-phone-bg img {position: static;height: 100%;}
  .download-market-item {padding: 13px 0;width: 122px;margin-right: 8px;}
  .download-market-item svg {width: 24px;height: 24px;}
  .gateio-download-market-list {margin-top: 11px;display: flex;justify-content: flex-start;align-items: center;grid-gap: unset;}
  .gateio-download-qrcode-container {margin-top: 24px;}
  
  /* wallet center */
  .wallet-center-main {margin-bottom: 72px;}
  .error-chain-btn {min-width: auto;}
  .error-chain > span {text-align: center;}
  .wallet-table {overflow-x: auto;overflow-y: hidden;}
  .wallet-table table {width: 130%;}
  .center-form .mantine-TextInput-input {height: 40px;}
  .center-form-btn {height: 40px;}

  .wallet-navs {flex-direction: column;margin: 0 0 24rem;}
  .wallet-navs-right {margin-top: 32px;}
  .wallet-info, .wallet-info-left {align-items: flex-start;}
  .wallet-table thead tr th:first-child {padding: 0 24rem 0 0;}
  .wallet-table tbody tr td:first-child {padding: 24rem 24rem 24rem 0;}
}

@media screen and (max-width: 414.9px) {
  .main-title{align-items: flex-start;text-align: left;}

  .web3-banner {height: 408px;}
  .web3-banner-bg img, .classic-dark .web3-banner-bg img {display: none;}
  .web3-banner-bg {background-image: url(/images/web3/web3_crypto_phone.png?v=1216);height: 544px;background-repeat: no-repeat;background-size: cover;top: -64px;}
  .classic-dark .web3-banner-bg {background-image: url(/images/web3/web3_crypto_phone_dark.png?v=1216);}
  .web3-banner .btn {flex-wrap: wrap;}
  .web3-banner .btn span {margin-bottom: 8px;}

  .web3-defi {flex-direction: column-reverse;align-items: center;}
  .web3-defi .left {width: 84.1%;margin-top: 40px;left: -2.6%;}
  .web3-defi .left .bottom { right: -10.37%;}
  .web3-defi .right {width: 100%;}

  .web3-entry-img{height: 210px;}

  .start-connect-wallet-right {align-items: flex-start;}

  .web3-home-learning-item img {margin-right: 8px;margin-left: 0;}

  .web3-experience-center-item, .web3-home-learning-item {padding: 0;}
  .web3-experience-center-item h3 {width: 100%;text-align: start;}
  .web3-experience-center-item p {text-align: start;}

  .web3-join .btn a:not(:last-child) {margin-right: 8rem;}

  .wallet-info {flex-direction: column;position: relative;margin: 48rem 0 24px;}
  .wallet-info-left .top {flex-direction: column;align-items: flex-start;}
  .wallet-info-left .top > h1 {margin-bottom: 16rem;}
  .wallet-info-right {width: 100%;}
  .wallet-info-left .bottom {position: absolute;left: 0;bottom: 0;}
}

@media screen and (max-width: 382.9px) {
  .gateioToastTheme {max-width: 358px!important;}
}

/* end */