* {
  padding: 0;
  margin: 0;
}
.sp {
  background: url(https://static.web.sdo.com/dn/pic/dn_24act/0716gift14th/sp.png) no-repeat;
  background-repeat: no-repeat;
}
.pr {
  position: relative;
}
.pa {
  position: absolute;
}
.db {
  display: block;
  text-indent: -999em;
}
/*����*/

.pop-main {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
}

.mask {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.8);
}

.pop-con {
  position: relative;
  background-repeat: no-repeat;
  box-sizing: border-box;
}

.btn-pop-close {
  right: -20px;
  top: -22px;
  background-position: -714px 0;
  width: 55px;
  height: 55px;
  transition: 0.8s all;
}

.btn-pop-close:hover {
  transform: rotate(360deg);
}

.pop-word .pop-con {
  background-image: url(https://static.web.sdo.com/dn/pic/dn_24act/0716gift14th/pop1.png);
  width: 620px;
  height: 392px;
}

.text-pop {
  font-size: 24px;
  color: #fff;
  line-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 250px;
  padding-top: 66px;
  width: 580px;
  margin: 0 auto 15px;
}

.text-pop i {
  color: #ffd200;
  font-style: normal;
}

.text-pop img {
  display: block;
  width: 157px;
  margin-right: 10px;
}

.btn-pop-qd {
  background-position: 0 -169px;
  width: 226px;
  height: 67px;
  margin: 0 auto;
}

.pop-dl-gift .pop-con {
  background-image: url(https://static.web.sdo.com/dn/pic/dn_24act/0716gift14th/pop2.png);
  width: 850px;
  height: 582px;
}

.pop-tit {
  font-size: 36px;
  color: #ffdb7a;
  line-height: 40px;
  text-align: center;
  padding-top: 70px;
  font-weight: normal;
}

.text-act-pop {
  font-size: 22px;
  color: #fff;
  line-height: 26px;
  text-align: center;
  padding-top: 24px;
}

.btn-chiose-gift {
  position: absolute;
  background-image: url(https://static.web.sdo.com/dn/pic/dn_24act/0716gift14th/pop_gift_bg.png);
  background-repeat: no-repeat;
  width: 177px;
  height: 176px;
  font-size: 26px;
  color: #ffffff;
  line-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s all;
}

.btn-chiose-gift.on,
.btn-chiose-gift:hover {
  background-image: url(https://static.web.sdo.com/dn/pic/dn_24act/0716gift14th/pop_gift_bg_on.png);
}

.btn-chiose-gift1 {
  left: 262px;
  top: 164px;
}

.btn-chiose-gift2 {
  left: 425px;
  top: 164px;
}

.btn-chiose-gift3 {
  left: 147px;
  top: 277px;
}

.btn-chiose-gift4 {
  left: 545px;
  top: 277px;
}

.btn-chiose-gift5 {
  left: 262px;
  top: 390px;
}

.btn-chiose-gift6 {
  left: 425px;
  top: 390px;
}

.list-btn-pop {
  display: flex;
  justify-content: center;
}

.list-btn-pop li {
  width: 226px;
  margin: 0 20px;
}

.list-btn-pop li a {
  background-position: -245px -169px;
  width: 226px;
  height: 67px;
}

.list-btn-pop li:nth-child(2) a {
  background-position: -490px -169px;
}

.pop-ndj .pop-con {
  background-image: url(https://static.web.sdo.com/dn/pic/dn_26act/2603xf/goog-pop3.png);
  width: 1091px;
  height: 857px;
  transform: scale(0.9);
}

.pop-ndj .btn-pop-close {
  background-position: -692px -101px;
  top: -24px;
  right: 40px;
}

.pop-ndj .number {
  text-shadow: 1px 1px 8px #d14e4b;
  color: #fff;
  font-size: 18px;
  text-align: center;
  position: absolute;
  bottom: 13px;
  right: 400px;
  box-sizing: border-box;
  padding: 16px;
  line-height: 1.4;
}

.banner-tips {
  position: absolute;
  left: 640px;
  top: 900px;
  font-size: 18px;
  color: #fff;
  text-shadow: 1px 1px 10px #000;
}

.ndj-ani {
  width: 735px;
  height: 352px;
  left: 50%;
  margin-left: -367.5px;
  top: 180px;
}

.ndj-ani img {
  display: none;
  width: 735px;
  height: 352px;
  position: absolute;
  left: 0;
  top: 0;
}

.ndj-ani img:nth-child(1) {
  display: block;
}

.box-lot-nd {
  position: absolute;
  top: 678px;
  width: 136px;
  left: 279px;
  height: 142px;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
  opacity: 0;
}

.dan {
  background-repeat: no-repeat;
  width: 111px;
  height: 109px;
  position: absolute;
  left: 50%;
  margin-left: -55px;
  top: -109px;
  transition: 0.3s all;
}

.dan.dan1 {
  background-image: url(https://static.web.sdo.com/dn/pic/dn_24act/0716gift14th/q_gree.png);
}

.dan.dan2 {
  background-image: url(https://static.web.sdo.com/dn/pic/dn_24act/0716gift14th/q_blue.png);
}

.dan.dan3 {
  background-image: url(https://static.web.sdo.com/dn/pic/dn_24act/0716gift14th/q_red.png);
}

.box-lot-nd.z {
  opacity: 1;
}

.box-lot-nd.z .dan {
  top: 20px;
}

.btn-hqnd {
  width: 213px;
  height: 75px;
  left: 247px;
  top: 537px;
}

.btn-nyn {
  width: 172px;
  height: 76px;
  left: 608px;
  top: 537px;
}

.btn-nd-rule {
  background-position: 0 -254px;
  width: 178px;
  height: 54px;
  left: 882px;
  top: 195px;
}

.btn-list-award {
  background-position: 0 -322px;
  width: 178px;
  height: 54px;
  left: 882px;
  top: 263px;
}

.btn-nd-task {
  background-position: 0 -389px;
  width: 178px;
  height: 54px;
  left: 882px;
  top: 330px;
}

.btn-nd-jl {
  font-size: 20px;
  color: #fff;
  left: 720px;
  top: 800px;
  margin-right: 20px;
}

.pop-rule .pop-con {
  background-image: url(https://static.web.sdo.com/dn/pic/dn_24act/0716gift14th/pop4.png);
  width: 853px;
  height: 701px;
}

.pop-tit-rule {
  font-size: 36px;
  color: #ffdb7a;
  line-height: 40px;
  text-align: center;
  padding-top: 40px;
  font-weight: normal;
}

.text-rule {
  font-size: 20px;
  color: #fff;
  line-height: 1.7;
  width: 700px;
  margin: 0 auto;
  padding-top: 22px;
}
.text-rule ol {
  padding-left: 1em;
}

.table-rule {
  width: 472px;
  margin: 22px auto 0;
  font-size: 16px;
  color: #a6d4ef;
  border-radius: 20px;
  border-collapse: separate;
}

.table-rule th {
  background-color: #9ed2ef;
  font-size: 18px;
  color: #11557e;
  text-align: center;
  line-height: 22px;
  height: 40px;
}

.table-rule th:nth-child(1) {
  border-radius: 5px 0 0 5px;
}

.table-rule th:nth-child(2) {
  border-radius: 0 5px 5px 0;
  border-left: 2px solid #3e7595;
}

.table-rule td {
  background-color: #1d5371;
  height: 38px;
  text-align: center;
  border-bottom: 2px solid #9ed2ef;
}

.table-rule td:nth-child(1) {
  border-radius: 0 0 0 5px;
}

.table-rule td:nth-child(2) {
  border-radius: 0 0 5px 0;
  border-left: 2px solid #9ed2ef;
}

.pop-nd-rule .pop-con {
  background-image: url(https://static.web.sdo.com/dn/pic/dn_24act/0716gift14th/pop5.png);
  width: 793px;
  height: 482px;
}
.text-rule .tit {
  font-size: 22px;
}
.text-rule .tit .y {
  color: #ffe398;
}
.text-rule .y {
  color: #d2be84;
}
.text-rule ol {
  font-size: 18px;
}
.text-rule em {
  font-size: 18px;
  line-height: 30px;
  display: block;
  padding-left: 40px;
}

.pop-jl-list .pop-con {
  background-image: url(https://static.web.sdo.com/dn/pic/dn_26act/2603xf/pop6.png);
  width: 520px;
  height: 350px;
}

.box-jl-list {
  width: 100%;
  display: none;
  padding-top: 22px;
  height: 726px;
}

.table-list {
  margin: 0 auto 0;
  font-size: 16px;
  color: #a6d4ef;
  border-radius: 20px;
  border-collapse: separate;
}

.table-list th {
  background-color: #9ed2ef;
  font-size: 18px;
  color: #11557e;
  text-align: center;
  line-height: 22px;
  height: 40px;
}

.table-list th:nth-child(1) {
  border-radius: 5px 0 0 5px;
  width: 140px;
}

.table-list th:nth-child(2) {
  border-left: 2px solid #3e7595;
  width: 300px;
}

.table-list th:nth-child(3) {
  border-radius: 0 5px 5px 0;
  border-left: 2px solid #3e7595;
}

.table-list td {
  background-color: #1d5371;
  height: 36px;
  text-align: center;
  border-bottom: 2px solid #9ed2ef;
}

.table-list td:nth-child(1) {
  border-radius: 0 0 0 5px;
}

.table-list td:nth-child(2),
.table-list td:nth-child(3) {
  border-radius: 0 0 5px 0;
  border-left: 2px solid #9ed2ef;
}

.table-list td.g {
  color: #64ff8c;
}

.table-list td.b {
  color: #2bb1ff;
}

.table-list td.r {
  color: #ff5757;
}

.box-jl-list-page {
  display: flex;
  justify-content: center;
}

.box-jl-list-page a,
.box-jl-list-page p {
  font-size: 20px;
  color: #ffdb7a;
  line-height: 24px;
  margin: 0 16px;
}

.box-jl-list-page a:hover,
.box-jl-list-page p.on {
  border-bottom: 1px solid #ffdb7a;
}

.pop-sh-list .pop-con {
  background-image: url(https://static.web.sdo.com/dn/pic/dn_24act/0716gift14th/pop6.png);
  width: 793px;
  height: 898px;
}

.btn-gift {
  top: 30px;
  right: 50px;
  position: absolute;
  width: 218px;
  height: 243px;
  background: url(https://static.web.sdo.com/dn/pic/dn_24act/0716gift14th/btn-gift.png) no-repeat center;
}

/*动画*/

.ani_tada {
  animation: tada 2.4s ease infinite both;
  -webkit-animation: tada 2.4s ease infinite both;
  -moz-animation: tada 2.4s ease infinite both;
  -o-animation: tada 2.4s ease infinite both;
}

@keyframes tada {
  0% {
    transform: scale3d(1, 1, 1);
  }
  2.5%,
  5% {
    transform: scale3d(0.97, 0.97, 0.97) rotate3d(1, 1, 1, -9deg);
  }
  7.5%,
  12.5%,
  17.5%,
  22.5% {
    transform: scale3d(1.03, 1.03, 1.03) rotate3d(1, 1, 1, 9deg);
  }
  10%,
  15%,
  20% {
    transform: scale3d(1.03, 1.03, 1.03) rotate3d(1, 1, 1, -9deg);
  }
  25% {
    transform: scale3d(1, 1, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
  }
  5%,
  10% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97) rotate3d(1, 1, 1, -9deg);
  }
  15%,
  25%,
  35%,
  45% {
    -webkit-transform: scale3d(1.03, 1.03, 1.03) rotate3d(1, 1, 1, 9deg);
  }
  20%,
  30%,
  40% {
    -webkit-transform: scale3d(1.03, 1.03, 1.03) rotate3d(1, 1, 1, -9deg);
  }
  50% {
    -webkit-transform: scale3d(1, 1, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
  }
}

@-moz-keyframes tada {
  0% {
    -moz-transform: scale3d(1, 1, 1);
  }
  5%,
  10% {
    -moz-transform: scale3d(0.97, 0.97, 0.97) rotate3d(1, 1, 1, -9deg);
  }
  15%,
  25%,
  35%,
  45% {
    -moz-transform: scale3d(1.03, 1.03, 1.03) rotate3d(1, 1, 1, 9deg);
  }
  20%,
  30%,
  40% {
    -moz-transform: scale3d(1.03, 1.03, 1.03) rotate3d(1, 1, 1, -9deg);
  }
  50% {
    -moz-transform: scale3d(1, 1, 1);
  }
  100% {
    -moz-transform: scale3d(1, 1, 1);
  }
}

@-o-keyframes tada {
  0% {
    -o-transform: scale3d(1, 1, 1);
  }
  5%,
  10% {
    -o-transform: scale3d(0.97, 0.97, 0.97) rotate3d(1, 1, 1, -9deg);
  }
  15%,
  25%,
  35%,
  45% {
    -o-transform: scale3d(1.03, 1.03, 1.03) rotate3d(1, 1, 1, 9deg);
  }
  20%,
  30%,
  40% {
    -o-transform: scale3d(1.03, 1.03, 1.03) rotate3d(1, 1, 1, -9deg);
  }
  50% {
    -o-transform: scale3d(1, 1, 1);
  }
  100% {
    -o-transform: scale3d(1, 1, 1);
  }
}

.shareBox {
  position: absolute;
  top: 853px;
  left: 500px;
  display: flex;
}

/* .shareBox a:hover {
  transition: all 0.3s;
  filter: brightness(1.2);
} */
.shareBox::before {
  content: '';
  width: 178px;
  height: 40px;
  background: url(https://static.web.sdo.com/dn/pic/dn_26act/2603xf/btn-share.png) no-repeat 0;
}

.shareBox li {
  cursor: pointer;
  background: url(https://static.web.sdo.com/dn/pic/dn_26act/2603xf/btn-share.png) no-repeat 0;
  width: 50px;
  height: 40px;
  display: inline-block;
  font-size: 0;
  cursor: pointer;
  transition: all 0.3s;
}
.shareBox li:hover {
  filter: brightness(1.2);
}
.shareBox li:nth-child(1) {
  background-position: -175px;
}

.shareBox li:nth-child(2) {
  background-position: -221px;
}

.shareBox li:nth-child(3) {
  background-position: -270px;
}

em,
i {
  font-style: normal;
}

#pop7 .text-draw {
  display: flex;
  flex-direction: column;
  justify-content: end;
  height: 140px;
}

#pop7 .tips {
  font-size: 18px;
  color: #fff;
  margin: 10px 0 0px;
  width: 100%;
  text-align: left;
}
#pop7 .tips a {
  color: #ffd200;
}

.img-tit {
  position: relative;
}

.shareBox .img-tit .layer {
  display: none;
  position: absolute;
  bottom: 60%;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  top: 55px;
  left: 25px;
}
/* 卡片网格布局 */
.card-container {
  position: absolute;
  top: 470px;
  left: 68px;
  display: flex;
  gap: 30px;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 33px;
  font-size: 20px;
  color: #000;
}

/* 单个卡片容器：开启 3D 透视 */
.card-container .card {
  width: 260px;
  height: 97px;
  position: relative;
  transition: transform 0.6s ease-in-out;
  transform-style: preserve-3d;
  cursor: pointer;
}
.card-container .card:nth-child(3) {
  margin-left: 24px;
}
.card-container .card:nth-child(4) {
  margin-left: 17px;
}

/* 鼠标悬停时翻转 180 度 */
.card-container .card:hover {
  transform: rotateY(180deg);
}

/* 正反面共用样式 */
.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 正面样式 (A面) */
.card-front {
  transform: rotateY(0deg);
  background: url(https://static.web.sdo.com/dn/pic/dn_26act/2603xf/p2-card-A.png?v2) no-repeat;
}

/* 背面样式 (B面) */
.card-back {
  transform: rotateY(180deg);
  background: url(https://static.web.sdo.com/dn/pic/dn_26act/2603xf/p2-card-B.png?v2) no-repeat;
}

.card-container .card:nth-child(2) > div {
  background-position: -290px 0;
}
.card-container .card:nth-child(3) > div {
  background-position: -609px 0;
}
.card-container .card:nth-child(4) > div {
  background-position: -920px 0;
}