html,
body {
  margin: 0;
  padding: 0;
  min-width: 1300px;
}

body {
  background: #1497e9;
}

* {
  box-sizing: border-box;
}

body .ui-btn {
  transition: transform 0.2s ease,
 filter 0.2s ease;
}

body .ui-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

body .ui-btn:active {
  transform: translateY(0);
  filter: brightness(1);
}

body .wrap {
  width: 100%;
}

body .wrap .wrap1,
body .wrap .wrap2,
body .wrap .wrap3 {
  width: 100%;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: auto 100%;
}

body .wrap .inWrap {
  width: 1300px;
  margin: 0 auto;
  position: relative;
}

body .wrap .wrap1 {
  background-image: url("https://static.web.sdo.com/dn/pic/dn_26act/2603xf/wrap1bg.jpg");
}

body .wrap .wrap1 .inWrap {
  height: 998px;
}

body .wrap .wrap1 .wrap1-btns {
  position: absolute;
  left: 50%;
  bottom: 35px;
  display: flex;
  gap: 90px;
  transform: translateX(-50%);
}

body .wrap .wrap1 .wrap1-btn {
  display: block;
  width: 240px;
  height: 79px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 240px 79px;
}

body .wrap .wrap1 .wrap1-btn-reserve {
  background-image: url("https://static.web.sdo.com/dn/pic/dn_26act/2603xf/btn-reserve-lg.png");
}

body .wrap .wrap1 .wrap1-btn-download {
  background-image: url("https://static.web.sdo.com/dn/pic/dn_26act/2603xf/btn-download-lg.png");
}

body .wrap .wrap2 {
  background-image: url("https://static.web.sdo.com/dn/pic/dn_26act/2603xf/wrap2bg.jpg");
}

body .wrap .wrap2 .inWrap {
  height: 744px;
}

body .wrap .wrap3 {
  background-image: url("https://static.web.sdo.com/dn/pic/dn_26act/2603xf/wrap3bg.jpg");
}

body .wrap .wrap3 .inWrap {
  height: 1311px;
}

body .wrap .wrap3 .reserve-count {
  position: absolute;
  top: 304px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 1px;
  color: #ffeabd;
}

body .wrap .wrap3 .reserve-count span {
  margin-left: 12px;
  font-size: 32px;
}

body .wrap .wrap3 .account-info {
  display: none;
  position: absolute;
  top: 154px;
  right: 9%;
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 1px;
}

body .wrap .wrap3 .account-info span {
  margin-right: 20px;
}

body .wrap .wrap3 .account-info.is-show {
  display: flex;
}

body .wrap .wrap3 .account-info a {
  color: #ffffff;
}

body .wrap .wrap3 .account-info a:hover {
  color: #ffffff;
}

body .wrap .wrap3 .account-info a:visited {
  color: #ffffff;
}

body .wrap .wrap3 .reward-btns {
  position: absolute;
  top: 366px;
  left: 50%;
  width: 1185px;
  display: flex;
  justify-content: space-between;
  transform: translateX(-50%);
}

body .wrap .wrap3 .reward-item {
  position: relative;
  width: 190px;
  height: 284px;
  display: flex;
  align-items: center;
  flex-direction: column;
  align-content: center;
  justify-content: flex-end;
}

body .wrap .wrap3 .hover {
  position: absolute;
  top: 18px;
  left: 50%;
  width: 160px;
  height: 160px;
  transform: translateX(-50%);
  border-radius: 100%;
  z-index: 6;
  cursor: pointer;
}

body .wrap .wrap3 .reward-btn {
  display: block;
  width: 138px;
  height: 33px;
  line-height: 33px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: #ffebb7;
  letter-spacing: 0;
  text-decoration: none;
  background: url("https://static.web.sdo.com/dn/pic/dn_26act/2603xf/btn-basic.png") no-repeat center/138px 33px;
}

body .wrap .wrap3 .reward-btn.disabled {
  cursor: none;
  pointer-events: none;
}

body .wrap .wrap3 .reward-preview {
  position: absolute;
  left: 50%;
  bottom: 48px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(8px);
  transition: opacity 0.2s ease,
 transform 0.2s ease;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  z-index: 5;
}

body .wrap .wrap3 .reward-preview-1 {
  width: 981px;
  height: 473px;
  background-image: url("https://static.web.sdo.com/dn/pic/dn_26act/2603xf/1.png");
}

body .wrap .wrap3 .reward-preview-2 {
  width: 677px;
  height: 372px;
  background-image: url("https://static.web.sdo.com/dn/pic/dn_26act/2603xf/2.png");
}

body .wrap .wrap3 .reward-preview-3 {
  width: 677px;
  height: 372px;
  background-image: url("https://static.web.sdo.com/dn/pic/dn_26act/2603xf/3.png");
}

body .wrap .wrap3 .reward-item-has-preview .hover:hover ~ .reward-preview {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

body .wrap .wrap3 .exclusive-benefits {
  position: absolute;
  top: 750px;
  left: 50%;
  width: 442px;
  height: 111px;
  transform: translateX(-50%);
  background: url("https://static.web.sdo.com/dn/pic/dn_26act/2603xf/exclusive-benefits.png") no-repeat center/442px 111px;
}

body .fixed-bar {
  position: fixed;
  top: 50%;
  right: 92px;
  width: 180px;
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

body .fixed-bar .fixed-btn {
  display: block;
  width: 180px;
  height: 55px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 180px 55px;
}

body .fixed-bar .fixed-btn-register {
  margin-top: 10px;
  background-image: url("https://static.web.sdo.com/dn/pic/dn_26act/2603xf/btn-register-sm.png");
}

body .fixed-bar .fixed-btn-download {
  background-image: url("https://static.web.sdo.com/dn/pic/dn_26act/2603xf/btn-download-sm.png");
}

body .fixed-bar .fixed-qrcode {
  width: 180px;
  height: 252px;
  margin: 8px auto 0;
  background: url("https://static.web.sdo.com/dn/pic/dn_26act/2603xf/sidebar-qrcode.png") no-repeat center/180px 252px;
}

body .popup-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  z-index: 80;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}

body .popup-mask.is-show {
  opacity: 1;
  visibility: visible;
}

body .popup {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 660px;
  height: 380px;
  transform: translate(-50%, -50%);
  background: #fffdf6;
  border: 4px solid #0aa4ff;
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  color: #353535;
}

body .popup.is-show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body .popup-close {
  position: absolute;
  right: -76px;
  top: -6px;
  width: 65px;
  height: 65px;
  border: 0;
  padding: 0;
  background: url("https://static.web.sdo.com/dn/pic/dn_26act/2603xf/close-btn.png") no-repeat center/65px 65px;
  cursor: pointer;
}

body .popup-inner {
  width: 100%;
  height: 100%;
  padding: 22px 64px 30px;
}

body .popup-title {
  margin: 0;
  text-align: center;
  color: #1a67b7;
  font-size: 30.38px;
  line-height: 1.1;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

body .popup-title::after {
  content: "";
  background-image: url(https://static.web.sdo.com/dn/pic/dn_26act/2603xf/tips-zs.png);
  width: 357px;
  height: 23px;
}

body .popup-subtitle {
  margin: 18px 0 34px;
  text-align: center;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 700;
}

body .popup-form {
  width: 820px;
  margin: 0 auto;
  font-size: 18px;
}

body .popup-row {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

body .popup-row label {
  width: 93px;
  color: #666;
  font-weight: bold;
}

body .popup-row input {
  width: 419px;
  height: 48px;
  border: 2px solid #9b9b9b;
  border-radius: 10px;
  padding: 0 16px;
  outline: none;
}

body .popup-code-input {
  width: 276px !important;
}

body .popup-send-code {
  margin-left: 16px;
  color: #888;
  text-decoration: none;
}

body .popup-send-code em {
  color: #ff8d1a;
  font-style: normal;
}

body .popup-confirm {
  display: block;
  width: 161px;
  height: 42px;
  position: absolute;
  bottom: 40px;
  left: 0;
  margin: auto;
  right: 0;
  line-height: 42px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: #ffebb7;
  text-decoration: none;
  background: url("https://static.web.sdo.com/dn/pic/dn_26act/2603xf/btn-basic-tips.png") no-repeat center;
}

body .popup-success-box {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 28px;
  gap: 26px;
}

body .popup-success-qrcode {
  width: 140px;
  height: 160px;
  font-weight: 400;
  background: url("https://static.web.sdo.com/dn/pic/dn_26act/2603xf/qr2.png") no-repeat center;
}

body .popup-success-text {
  margin: 0;
  color: #666;
  line-height: 1.55;
  font-weight: 700;
  font-size: 18px;
}

body .popup-tip-text {
  margin: 92px 0 0;
  text-align: center;
  color: #666;
  font-weight: 700;
}

body .popup-special {
  width: 1100px;
  height: 540px;
}

body .popup-special .popup-inner {
  padding: 30px 64px 30px;
  font-size: 18px;
  color: #5f5f5f;
}

body .popup-special-desc {
  margin: 0 0 16px;
  text-align: center;
  line-height: 1.35;
}

body .popup-special-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: #ffe8ba;
}

body .popup-special-table th,
body .popup-special-table td {
  border: 2px solid #fff6e6;
  padding: 8px 10px;
  text-align: center;
  vertical-align: middle;
  line-height: 1.35;
}

body .popup-special-table th {
  font-size: 16px;
  font-weight: 700;
  color: #5a4a33;
  background: #ffe8ba;
}

body .popup-special-table td {
  font-size: 14px;
  color: #5f5f5f;
  background: #ffd8b2;
}

body .popup-special-table td span {
  color: #c73805;
}

body .popup-special-foot {
  margin: 12px 0 0;
  text-align: center;
  font-size: 14px;
  color: #5f5f5f;
}

body.show-popup {
  overflow: hidden;
}

body.show-fixed-bar .fixed-bar {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}