a:link,
a:hover,
a:active,
a:visited {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

button {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  cursor: pointer;
}

ol,
ul,
li {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

* {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

img {
  width: auto;
  /* 禁止长按呼出菜单 */
  -webkit-touch-callout: none;
  /* 禁止用户选择图片 */
  user-select: none;
}

em {
  font-style: normal;
}

input {
  background: none;
  outline: none;
  border: 0px;
}

input:focus {
  outline: none;
}

.clear {
  clear: both;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  /* scrollbar-width: none;
  -ms-overflow-style: none; */
}

body {
  min-width: 1200px;
  overflow: auto;
  overflow-x: hidden;
}

/* body::-webkit-scrollbar {
  display: none;
} */


@font-face {
  font-family: 'SourceHanSansCN-Regular';
  src: url('./font/SourceHanSansSC-Regular.otf') format('opentype');
  font-display: swap;
}

#app {
  width: 100%;
}


#app .wrap {
  width: 100%;
  position: relative;
}

/* 顶部下载 */
.top-download {
  width: 100%;
  height: 1080px;
  background: url(../images/bg/bg_1.jpg) center top no-repeat;
}

.top-download .top-download-wrap {
  width: 1200px;
  margin: 0 auto;
  position: relative;
}

.top-download .top-download-content {
  width: 660px;
  position: absolute;
  top: 670px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


.top-download .top-download-content .logo_sgdmx {
  width: 197px;
  margin: 0 auto;
  margin-bottom: 10px;
}

.top-download .top-download-content>ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-download .top-download-content>ul>li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.top-download .top-download-content>ul>li.ios_download_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.top-download .top-download-content>ul>li .code_download {
  display: flex;
  align-items: center;
  margin-right: 4px;
}

.top-download .top-download-content>ul>li .code_download p {
  font-family: SourceHanSansCN-Regular;
  font-size: 20px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 2px;
  color: #ffffff;
  /* 文字竖向 */
  writing-mode: vertical-lr;
  /* 文字描边 */
  /* -webkit-text-stroke: 1px #0D2050; */
  text-shadow: 2px -2px 0 #0D2050, 2px -2px 0 #0D2050, -2px 2px 0 #0D2050, 2px 2px 0 #0D2050;

}

.top-download .top-download-content>ul>li .code_download img {
  width: 139px;
  background-color: #ffffff;
  border: solid 3px #dfc378;
  border-radius: 50%;
}



.top-download .top-download-content>ul>li .ios_download {
  width: 226px;
}

.top-download .top-download-content>ul>li .android_download {
  width: 225px;
}

.top-download .top-download-content>ul>li .gift {
  width: 141px;
}

.top-download .top-download-content>ul>li .age16 {
  width: 103px;
}


/* 新闻资讯 */
.news-content {
  width: 100%;
  height: 905px;
  background: url(../images/bg/bg_2.jpg) center top no-repeat;
}

.news-content .news-content-wrap {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  top: 140px;
  left: 50%;
  transform: translateX(-50%);
}

.news-content .news-content-wrap .title-news {
  width: 685px;
  margin: 0 auto;
  margin-bottom: 75px;
}

.news-content .news-content-wrap .news-content-box {
  display: flex;
  justify-content: center;
}

.news-content .news-content-wrap .news-content-box .news-left {}

.news-content .news-content-wrap .news-content-box .news-left-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.news-content .news-content-wrap .news-content-box .news-left-top .news-swiper {
  width: 702px;
  height: 429px;
  overflow: hidden;
}

.news-content .news-content-wrap .news-content-box .news-left-top .news-swiper .swiper-slide > img{
  width: 100%;
  height: 100%;
}

.news-content .news-content-wrap .news-content-box .news-left .news-swiper-pagination-box {
  width: 702px;
  height: 1px;
  background: url(../images/news-swiper/news-pagination-bg.png) center top no-repeat;
  position: relative;
  margin-top: 16px;
}

.news-content .news-content-wrap .news-content-box .news-left .news-swiper-pagination-box .swiper-pagination {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translate3d(0, 0, 0);
  display: flex;
}


.news-content .news-content-wrap .news-content-box .news-left .swiper-pagination-bullet.news-swiper-pagination {
  width: 13px;
  height: 4px;
  background-color: #b3bec7;
  border-radius: 0;
  opacity: 1;
  margin: 0 8px;
}

.news-content .news-content-wrap .news-content-box .news-left .swiper-pagination-bullet-active.news-swiper-pagination {
  width: 45px;
  height: 4px;
  background-color: #bd3e3e;
  border-radius: 0;
  opacity: 1;
}

.news-content .news-content-wrap .news-content-box .news-left-top .news-split {
  width: 4px;
  height: 429px;
  margin-left: 21px;
  background: url(../images/news-split.png) center top no-repeat;
}


.news-content .news-right {
  height: 429px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-left: 30px;
}

.news-content .news-right .news-right-tab ul {
  display: flex;
  align-items: center;
}

.news-content .news-right .news-right-tab ul>li {
  margin-right: 7px;
  width: 120px;
  height: 58px;
  cursor: pointer;
  background: url(../images/new-tab-bg.png) center top no-repeat;
  text-align: center;

}

.news-content .news-right .news-right-tab ul>li.active {
  background: url(../images/new-tab-bg-active.png) center top no-repeat;
}

.news-content .news-right .news-right-tab ul>li span {
  font-family: SourceHanSansCN-Regular;
  font-size: 36px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #ffffff;
  line-height: 53px;
}

.news-content .news-right .news-right-content {
  margin-top: 50px;
  max-height: 321px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.news-content .news-right .news-right-content::-webkit-scrollbar {
  display: none;
}

.news-content .news-right .news-right-content ul {
  width: 668px;
}

.news-content .news-right .news-right-content ul>li {
  width: 100%;
  height: 74px;
  border-top: 5px solid #C2C5D3;
  border-image: url(../images/news-border.png) 5 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.news-content .news-right .news-right-content ul>li:nth-last-of-type(1) {
  border-bottom: 5px solid #C2C5D3;
}



/* 游戏图鉴 */
.game-atlas {
  width: 100%;
  height: 1080px;
  background: url(../images/bg/bg_3.jpg) center top no-repeat;
}

.game-atlas .game-atlas-wrap {
  width: 1374px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
}

.game-atlas .game-atlas-wrap .title-atlas {
  width: 685px;
  margin: 0 auto;
  margin-bottom: 100px;
}

.game-atlas .game-atlas-wrap .game-atlas-box {
  width: 926px;
  height: 639px;
  position: relative;
  background: url(../images/game-atlas/left-bg.png) center top no-repeat;
  display: flex;
}

.game-atlas .game-atlas-wrap .game-atlas-box .game-atlas-box-right {
  width: 541px;
  height: 771px;
  background: url(../images/game-atlas/right-bg.png) center top no-repeat;
  position: absolute;
  right: -58%;
  top: -56px;
}

.game-atlas .game-atlas-wrap .game-atlas-box .game-atlas-box-right>img {
  width: 529px;
  transform: translate(-8px, 18px);
}

.game-atlas .game-atlas-wrap .game-atlas-box .game-atlas-box-right .gif-div {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}

.game-atlas .game-atlas-wrap .game-atlas-box .game-atlas-box-right .gif-div canvas{
  background-color: transparent;
  position: absolute;
  left: 50%;
  top: -170px;
  transform: translateX(-50%);
}

.game-atlas .game-atlas-wrap .game-atlas-box .game-atlas-box-right .gif-div img.role-img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.game-atlas .game-atlas-wrap .game-atlas-box .game-atlas-box-right .atlas-name {
  position: absolute;
  top: 92px;
  right: 57px;
  z-index: 2;
  width: 58px;
  height: 225px;
  background: url(../images/game-atlas/atlas-name-bg.png) center top no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.game-atlas .game-atlas-wrap .game-atlas-box .game-atlas-box-right .atlas-name .quality-img {
  width: 90px;
  position: absolute;
  top: -48px;
  left: 50%;
  transform: translateX(-50%);
}

.game-atlas .game-atlas-wrap .game-atlas-box .game-atlas-box-right .atlas-name .atlas-name-text {
  font-family: Tianshi-Diaoyu;
  font-size: 38px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 4px;
  color: #ffffff;
  writing-mode: vertical-lr;
  padding-top: 50px;
  word-break: keep-all;
}

.game-atlas .game-atlas-wrap .game-atlas-box .game-atlas-box-right .atlas-swiper-box {
  position: absolute;
  bottom: 35px;
  right: -30px;
  z-index: 3;
}

.game-atlas .game-atlas-wrap .game-atlas-box .game-atlas-box-right .atlas-swiper-box .atlas-swiper-box-wrap {
  width: 100%;
  height: 280px;
  overflow: hidden;
}

.game-atlas .game-atlas-wrap .game-atlas-box .game-atlas-box-right .atlas-swiper-box .atlas-swiper-box-wrap .swiper-slide {
  width: 93px !important;
  height: 93px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.game-atlas .game-atlas-wrap .game-atlas-box .game-atlas-box-right .atlas-swiper-box .atlas-swiper-box-wrap .swiper-slide .avatar-img {
  width: 75px;
  height: 75px;
}

.game-atlas .game-atlas-wrap .game-atlas-box .game-atlas-box-right .atlas-swiper-box .atlas-swiper-box-wrap .swiper-slide.swiper-slide-active .game-atlas-head-chose {
  display: block;
}

.game-atlas .game-atlas-wrap .game-atlas-box .game-atlas-box-right .atlas-swiper-box .atlas-swiper-box-wrap .swiper-slide .game-atlas-head-chose {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}


.atlas-swiper-box .atlas-swiper-box-prev {
  position: absolute;
  width: 55px;
  height: 33px;
  background: url(../images/game-atlas/arrow-top.png) center top no-repeat;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
}

.atlas-swiper-box .atlas-swiper-box-next {
  position: absolute;
  width: 55px;
  height: 33px;
  background: url(../images/game-atlas/arrow-bottom.png) center top no-repeat;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
}



.game-atlas .game-atlas-wrap .game-atlas-box .atlas-type {
  width: 100%;
  position: absolute;
  bottom: -62px;
  left: 0;
}

.game-atlas .game-atlas-wrap .game-atlas-box .atlas-type ul {
  display: flex;
  align-items: center;
}

.game-atlas .game-atlas-wrap .game-atlas-box .atlas-type ul>li {
  width: 183px;
  height: 76px;
  cursor: pointer;
}


.game-atlas .game-atlas-wrap .game-atlas-box .second-type {
  width: 225px;
  position: relative;
  transform: translateX(-20px);
}

.game-atlas .game-atlas-wrap .game-atlas-box .second-type .left-line {
  width: 12px;
  height: 621px;
  background: url(../images/game-atlas/left-line.png) center top no-repeat;
  position: absolute;
  left: -5px;
  top: 0;
}

.game-atlas .game-atlas-wrap .game-atlas-box .second-type ul {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 28px 0;
}

.game-atlas .game-atlas-wrap .game-atlas-box .second-type ul>li {
  width: 199px;
  height: 75px;
  background: url(../images/game-atlas/second-unchosed.png) center top no-repeat;
  font-family: SourceHanSansCN-Regular;
  font-size: 35px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 4px;
  color: #ffa5a5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.game-atlas .game-atlas-wrap .game-atlas-box .second-type ul>li.active {
  width: 216px;
  height: 84px;
  background: url(../images/game-atlas/second-chosed.png) center top no-repeat;
  color: #b20000;
}



.game-atlas .game-atlas-wrap .game-atlas-box .atlas-type ul>li:nth-of-type(1) {
  background: url(../images/game-atlas/56c5b14e58.png) center top no-repeat;
}

.game-atlas .game-atlas-wrap .game-atlas-box .atlas-type ul>li:nth-of-type(1).active {
  background: url(../images/game-atlas/56c5b14e58-active.png) center top no-repeat;
}

.game-atlas .game-atlas-wrap .game-atlas-box .atlas-type ul>li:nth-of-type(2) {
  background: url(../images/game-atlas/df949e67c7.png) center top no-repeat;
}

.game-atlas .game-atlas-wrap .game-atlas-box .atlas-type ul>li:nth-of-type(2).active {
  background: url(../images/game-atlas/df949e67c7-active.png) center top no-repeat;
}

.game-atlas .game-atlas-wrap .game-atlas-box .atlas-type ul>li:nth-of-type(3) {
  background: url(../images/game-atlas/a9afdeca88.png) center top no-repeat;
}

.game-atlas .game-atlas-wrap .game-atlas-box .atlas-type ul>li:nth-of-type(3).active {
  background: url(../images/game-atlas/a9afdeca88-active.png) center top no-repeat;
}

.game-atlas .game-atlas-wrap .game-atlas-box .atlas-type ul>li:nth-of-type(4) {
  background: url(../images/game-atlas/0ce2262004.png) center top no-repeat;
}

.game-atlas .game-atlas-wrap .game-atlas-box .atlas-type ul>li:nth-of-type(4).active {
  background: url(../images/game-atlas/0ce2262004-active.png) center top no-repeat;
}

.game-atlas .game-atlas-wrap .game-atlas-box .atlas-type ul>li:nth-of-type(5) {
  background: url(../images/game-atlas/37ec6058c6.png) center top no-repeat;
}

.game-atlas .game-atlas-wrap .game-atlas-box .atlas-type ul>li:nth-of-type(5).active {
  background: url(../images/game-atlas/37ec6058c6-active.png) center top no-repeat;
}


.game-atlas .game-atlas-wrap .game-atlas-box .game-atlas-content {}

.game-atlas .game-atlas-wrap .game-atlas-box .game-atlas-content .game-atlas-content-title {
  text-align: center;
  height: 238px;
}

.game-atlas .game-atlas-wrap .game-atlas-box .game-atlas-content .game-atlas-content-title>img {
  width: 381px;
  margin: 0 auto;
  transform: translateY(-34px);
}


.game-atlas .game-atlas-wrap .game-atlas-box .game-atlas-content .game-atlas-content-title>p {
  font-family: SourceHanSansCN-Regular;
  width: 637px;
  font-size: 24px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 36px;
  letter-spacing: 0px;
  color: #ffffff;
  word-wrap: break-word;
  text-align: left;
}

.game-atlas .game-atlas-wrap .game-atlas-box .game-atlas-content .game-atlas-content-skill {
  text-align: center;
}

.game-atlas .game-atlas-wrap .game-atlas-box .game-atlas-content .game-atlas-content-skill>img {
  margin: 0 auto;
  width: 381px;
}

.game-atlas .game-atlas-wrap .game-atlas-box .game-atlas-content .game-atlas-content-skill .skill-box {
  max-width: 560px;
  height: 98px;
  overflow-x: auto;
  overflow-y: hidden;
  text-align: center;
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

.game-atlas .game-atlas-wrap .game-atlas-box .game-atlas-content .game-atlas-content-skill .skill-box ul {
  height: 98px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
}

.game-atlas .game-atlas-wrap .game-atlas-box .game-atlas-content .game-atlas-content-skill .skill-box ul>li {
  width: 98px;
  height: 98px;
  border-radius: 50%;
  position: relative;
  margin-left: 26px;
  cursor: pointer;
}

.game-atlas .game-atlas-wrap .game-atlas-box .game-atlas-content .game-atlas-content-skill .skill-box ul>li:hover .tips {
  display: block;
}

.game-atlas .game-atlas-wrap .game-atlas-box .game-atlas-content .game-atlas-content-skill .skill-box ul>li .tips {
  width: 468px;
  height: 146px;
  position: absolute;
  bottom: -156%;
  left: 50%;
  transform: translateX(-50%);
  background: url(../images/game-atlas/skill-des-bg.png) center top no-repeat;
  text-align: left;
  display: none;
}

.game-atlas .game-atlas-wrap .game-atlas-box .game-atlas-content .game-atlas-content-skill .skill-box ul>li .tips>div {
  padding: 0 17px;
  width: 100%;
  height: 122px;
  overflow-y: auto;
  box-sizing: border-box;
  margin-top: 17px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.game-atlas .game-atlas-wrap .game-atlas-box .game-atlas-content .game-atlas-content-skill .skill-box ul>li .tips>div::-webkit-scrollbar {
  display: none;
}

.game-atlas .game-atlas-wrap .game-atlas-box .game-atlas-content .game-atlas-content-skill .skill-box ul>li .tips .tips-title {
  font-family: SourceHanSansCN-Regular;
  font-size: 24px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #fff3ae;
}

.game-atlas .game-atlas-wrap .game-atlas-box .game-atlas-content .game-atlas-content-skill .skill-box ul>li .tips .tips-content {
  font-family: SourceHanSansCN-Regular;
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #ffffff;
  max-width: 100%;
  word-wrap: break-word;
  margin-top: 10px;
}

/* 特色玩法 */
.feature-play {
  width: 100%;
  height: 1080px;
  background: url(../images/bg/bg_4.jpg) center top no-repeat;
}

.feature-play .feature-play-wrap {
  width: 1492px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
}

.feature-play .feature-play-wrap .title-feature-play {
  width: 685px;
  margin: 0 auto;
  margin-bottom: 34px;
}

.feature-play .feature-play-wrap .feature-play-box {
  width: 1492px;
  height: 754px;
  background: url(../images/feature-play/play-bg.png) center top no-repeat;
  position: relative;
}


.feature-play .feature-play-wrap .feature-play-box .feature-play-content {
  width: 988px;
  height: 556px;
  position: absolute;
  top: 128px;
  right: 78px;
  overflow: hidden;
}

.feature-play .feature-play-wrap .feature-play-box .feature-play-content .swiper-slide > img{
  width: 100%;
}

.feature-play .feature-play-wrap .feature-play-box .play-tool-box {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-30px);
}

.feature-play .feature-play-wrap .feature-play-box .feature-play-pagination-box .feature-swiper-pagination {
  display: flex;
  align-items: center;
}

.feature-play .feature-play-wrap .feature-play-box .feature-play-pagination-box .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: #d0c8e3;
  border-radius: 50%;
  opacity: 1;
  margin-left: 14px;
}

.feature-play .feature-play-wrap .feature-play-box .feature-play-pagination-box .swiper-pagination-bullet-active {
  width: 23px;
  height: 23px;
  background: url(../images/feature-play/play-point.png) center top no-repeat;
  opacity: 1;
}

.feature-play .feature-play-wrap .feature-play-box .play-tool-box .feature-swiper-box-prev {
  width: 72px;
  height: 72px;
  background: url(../images/feature-play/play-left.png) center top no-repeat;
  position: absolute;
  left: -280px;
  top: 50%;
  transform: translateY(-57%);
}

.feature-play .feature-play-wrap .feature-play-box .play-tool-box .feature-swiper-box-next {
  width: 72px;
  height: 72px;
  background: url(../images/feature-play/play-right.png) center top no-repeat;
  position: absolute;
  right: -280px;
  top: 50%;
  transform: translateY(-57%);
}

/* 三国印象 */
.three-impression {
  width: 100%;
  height: 1080px;
  background: url(../images/bg/bg_5.jpg) center top no-repeat;
}

.three-impression .three-impression-wrap {
  width: 1604px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
}

.three-impression .three-impression-wrap .title-three-impression {
  width: 685px;
  margin: 0 auto;
  margin-bottom: 62px;
}

.three-impression .three-impression-wrap .three-impression-box {
  width: 100%;
}

.three-impression .three-impression-wrap .three-impression-box .three-impression-content {
  width: 100%;
}

.three-impression .three-impression-wrap .three-impression-box .three-impression-content .three-impression-img {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

}

.three-impression .three-impression-wrap .three-impression-box .three-impression-content .three-impression-img>li {
  width: 534px;
  height: 334px;
  background: url(../images/three-impression/impression-bg.png) center top no-repeat;
  position: relative;
}

.three-impression .three-impression-wrap .three-impression-box .three-impression-content .three-impression-img>li>div {
  position: absolute;
  left: 45px;
  top: 33px;
  width: 434px;
  height: 254px;
  overflow: hidden;
}

.three-impression .three-impression-wrap .three-impression-box .three-impression-content .three-impression-img>li>div>img {
  width: 100%;
  height: 100%;
  transition: all 0.4s;
  object-fit: cover;
}

.three-impression .three-impression-wrap .three-impression-box .three-impression-content .three-impression-img>li>div>img:hover{
  transform: scale(1.1);
}

.three-impression .three-impression-wrap .three-impression-box .three-impression-content .three-impression-video {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  display: none;
}

.three-impression .three-impression-wrap .three-impression-box .three-impression-content .three-impression-video>li {
  width: 534px;
  height: 334px;
  background: url(../images/three-impression/impression-bg.png) center top no-repeat;
  position: relative;
}

.three-impression .three-impression-wrap .three-impression-box .three-impression-content .three-impression-video>li>div {
  position: absolute;
  left: 45px;
  top: 33px;
  width: 434px;
  height: 254px;
  cursor: pointer;
  overflow: hidden;
}

.three-impression .three-impression-wrap .three-impression-box .three-impression-content .three-impression-video>li>div:hover .mask {
  transform: translateY(0);
}

.three-impression .three-impression-wrap .three-impression-box .three-impression-content .three-impression-video>li>div:hover .drawing-square{
  stroke-dashoffset: 0;
}

.three-impression .three-impression-wrap .three-impression-box .three-impression-content .three-impression-video>li>div>img {
  width: 100%;
  height: 100%;
}

.three-impression .three-impression-wrap .three-impression-box .three-impression-content .three-impression-video>li>div .mask {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(100%);
  transition: all 0.3s;
}

.three-impression .three-impression-wrap .three-impression-box .three-impression-content .three-impression-video>li>div .mask .video-play {
  width: 86px;
  height: 85px;
  background: url(../images/three-impression/video-play.png) center top no-repeat;
  animation: breath 2s linear infinite;
  transition: all 0.5s;
  z-index: 1;
}

.three-impression .three-impression-wrap .three-impression-box .three-impression-content .three-impression-video>li>div .mask .mx-auto{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}

.three-impression-video>li>div .mask .mx-auto .drawing-square{
  transition: stroke-dashoffset 0.6s ease-in-out; /* 设置过渡效果 */
  transition-delay: 0.3s;
  stroke-dasharray: 1288; /* 设置虚线长度 */
  stroke-dashoffset: 1288; /* 设置虚线偏移量 */
}

@keyframes breath {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.8);
  }

  100% {
    transform: scale(1);
  }
}


.three-impression .three-impression-wrap .three-impression-box .three-impression-tab {
  width: 537px;
  height: 124px;
  background: url(../images/three-impression/impression-tab-bg.png) center top no-repeat;
  position: relative;
  margin: 0 auto;
  margin-top: 13px;
}

.three-impression .three-impression-wrap .three-impression-box .three-impression-tab ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  left: 21px;
  top: 17px;
  cursor: pointer;
}

.three-impression .three-impression-wrap .three-impression-box .three-impression-tab ul>li:nth-of-type(1) {
  width: 247px;
  height: 80px;
  background: url(../images/three-impression/impression-tab-1.png) center top no-repeat;
}

.three-impression .three-impression-wrap .three-impression-box .three-impression-tab ul>li:nth-of-type(1).active {
  width: 247px;
  height: 80px;
  background: url(../images/three-impression/impression-tab-1-active.png) center top no-repeat;
}

.three-impression .three-impression-wrap .three-impression-box .three-impression-tab ul>li:nth-of-type(2) {
  width: 247px;
  height: 80px;
  background: url(../images/three-impression/impression-tab-2.png) center top no-repeat;
}

.three-impression .three-impression-wrap .three-impression-box .three-impression-tab ul>li:nth-of-type(2).active {
  width: 247px;
  height: 80px;
  background: url(../images/three-impression/impression-tab-2-active.png) center top no-repeat;
}


/* 公众号 */
.wechat-public {
  width: 100%;
  height: 682px;
  background: url(../images/bg/bg_6.jpg) center top no-repeat;
}

.wechat-public .wechat-public-wrap {
  width: 939px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  top: 190px;
  left: 50%;
  transform: translateX(-50%);
}

.wechat-public .wechat-public-wrap ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wechat-public .wechat-public-wrap ul>li {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wechat-public .wechat-public-wrap ul>li .code-div {
  width: 237px;
  height: 236px;
  background: url(../images/pr_code_bg.png) center top no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 19px;
}

.wechat-public .wechat-public-wrap ul>li .code-div>img {
  width: 208px;
  height: 208px;
}


.wechat-public .wechat-public-wrap ul>li .code-div.kf>img {
  width: 208px;
  height: 208px;
}

.wechat-public .wechat-public-wrap ul>li p:nth-of-type(1) {
  font-family: SourceHanSansCN-Medium;
  font-size: 28px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 24px;
  letter-spacing: 2px;
  color: #ffffff;
}

.wechat-public .wechat-public-wrap ul>li p:nth-of-type(2) {
  font-family: SourceHanSansCN-Normal;
  font-size: 22px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 24px;
  letter-spacing: 2px;
  color: #fff3f3;
  margin-top: 15px;
}

.wechat-public .wechat-public-wrap ul>li p:nth-of-type(2) span.qq-copy{
  cursor: pointer;
  color: #409EFF;
}


/* 页脚 */
.footer {
  width: 100%;
  height: 273px;
  background: url(../images/bg/bg_7.jpg) center top no-repeat;
}

.footer .footer-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer .footer-wrap .footer-content {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.footer .footer-wrap .footer-content img.footer-content-logo {
  width: 244px;
}

.footer .footer-wrap .footer-content .footer-content-right {
  border-left: 1px solid #ffffff;
  padding-left: 15px;
  font-family: SourceHanSansCN-Regular;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 24px;
  letter-spacing: 1px;
  color: #ffffff;
  max-width: 910px;
  word-break: break-all;
  margin-left: 13px;
}

.footer .footer-wrap .footer-content .footer-content-right a {
  color: #409EFF;
}


/* 悬浮下载 */
.floating-download {
  width: 236px;
  height: 516px;
  background: url(../images/bg/float-download-bg.png) center top no-repeat;
  position: fixed;
  top: 100px;
  right: -213px;
  z-index: 1000;
}

.floating-download .operate {
  width: 35px;
  height: 79px;
  position: absolute;
  left: -10px;
  top: 222px;

}

.floating-download .operate.open {
  background: url(../images/open.png) center top no-repeat;
}

.floating-download .operate.close {
  background: url(../images/close.png) center top no-repeat;
}


.floating-download .floating-download-content {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 90px;
}

.floating-download .floating-download-content>img {
  margin: 0 auto;
}

.floating-download .floating-download-content .float-download-code {
  text-align: center;
}

.floating-download .floating-download-content .float-download-code p {
  font-family: SourceHanSansCN-Regular;
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 1px;
  color: #000000;
  margin-top: 8px;
}

.floating-download .floating-download-content .float-download-code img {
  width: 152px;
  height: 152px;
  border-radius: 50%;
  background-color: #ffffff;
}

.floating-download .floating-download-content .float-download-ios {
  width: 160px;
  margin-top: 19px;
  cursor: pointer;
}

.floating-download .floating-download-content .float-download-android {
  width: 164px;
  cursor: pointer;
}

.floating-download .floating-download-content .offical-download {
  width: 158px;
  cursor: pointer;
}

.floating-download .floating-download-content .offical-download:hover+.pr-code{
  display: block;
}

.floating-download .floating-download-content .pr-code {
  width: 160px;
  height: 160px;
  margin-top: 13px;
  position: relative;
  display: none;
}

.floating-download .floating-download-content .pr-code .pr-code-img {
  width: 100%;
  height: 100%;
}

.floating-download .floating-download-content .pr-code .pr-code-move {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  animation: pr-code-move 2s linear infinite;
}

@keyframes pr-code-move {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(150px);
  }
}

/* 官方专属礼包码 */
.official-gift-code {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1001;
  display: none;
}

.official-gift-code .mask {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

.official-gift-code .official-gift-code-content {
  width: 670px;
  height: 410px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.official-gift-code .official-gift-code-content .official-gift-code-content-wrap {
  width: 670px;
  height: 410px;
  background: url(../images/popup/popup_bg.png) center top no-repeat;
}

.official-gift-code .official-gift-code-content .official-gift-code-content-wrap .gift-code-left {
  width: 98px;
  height: 435px;
  position: absolute;
  left: -51px;
  top: -12px;
}

.official-gift-code .official-gift-code-content .official-gift-code-content-wrap .gift-code-close {
  width: 61px;
  height: 67px;
  position: absolute;
  right: -40px;
  top: -40px;
  cursor: pointer;
}

.official-gift-code .official-gift-code-content .official-gift-code-content-wrap .gift-code-content-box {
  padding-left: 50px;
  padding-top: 88px;
  text-align: center;
}

.official-gift-code .official-gift-code-content .official-gift-code-content-wrap .gift-code-content-box .gift-code-content-box-top {
  position: relative;
  width: 461px;
  height: 78px;
  margin: 0 auto;
  margin-left: 62px;
}

.official-gift-code .official-gift-code-content .official-gift-code-content-wrap .gift-code-content-box .gift-code-content-box-top>div {
  width: 100%;
  height: 100%;
  background: url(../images/popup/gift_code_bg.png) center top no-repeat;
  font-family: SourceHanSansCN-Regular;
  font-size: 24px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 38px;
  letter-spacing: 0px;
  color: #ffffff;
  box-sizing: border-box;
  padding-right: 104px;
}

.official-gift-code .official-gift-code-content .official-gift-code-content-wrap .gift-code-content-box .gift-code-content-box-top>div span {
  line-height: 73px;
}

.official-gift-code .official-gift-code-content .official-gift-code-content-wrap .gift-code-content-box .gift-code-content-box-top>button {
  width: 141px;
  height: 66px;
  background: url(../images/popup/copy_bg.png) center top no-repeat;
  border-radius: 0;
  border: none;
  outline: none;
  cursor: pointer;
  font-family: SourceHanSansCN-Regular;
  font-size: 32px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 38px;
  letter-spacing: 0px;
  color: #ffffff;
  position: absolute;
  right: -26px;
  top: 3px;
}

.official-gift-code .official-gift-code-content .official-gift-code-content-wrap .gift-code-content-box .gift-code-content-box-bottom {
  margin-top: 53px;
}

.official-gift-code .official-gift-code-content .official-gift-code-content-wrap .gift-code-content-box .gift-code-content-box-bottom>img {
  width: 294px;
}

.official-gift-code .official-gift-code-content .official-gift-code-content-wrap .gift-code-content-box .gift-code-content-box-bottom>p {
  font-family: SourceHanSansCN-Regular;
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 38px;
  letter-spacing: 1px;
  color: #455068;
  margin-top: 28px;
}

/* 适龄提示 */
.age-prompt {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1001;
  display: none;
}

.age-prompt .mask {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

.age-prompt .age-prompt-content {
  width: 752px;
  height: 435px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.age-prompt .age-prompt-content .age-prompt-content-wrap {
  width: 752px;
  height: 435px;
  background: url(../images/popup/age_bg.png) center top no-repeat;
  position: relative;
}

.age-prompt .age-prompt-content .age-prompt-content-wrap .age-prompt-title {
  width: 339px;
  height: 60px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -15px;
}

.age-prompt .age-prompt-content .age-prompt-content-wrap .age-prompt-close {
  width: 61px;
  height: 67px;
  position: absolute;
  right: 22px;
  top: -33px;
  cursor: pointer;
}

.age-prompt .age-prompt-content .age-prompt-content-wrap .age-prompt-content-box {
  padding: 0 40px;
  padding-top: 70px;
}

.age-prompt .age-prompt-content .age-prompt-content-wrap .age-prompt-content-box .age-prompt-content-box-text {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  max-height: 292px;
  overflow-y: auto;
  word-wrap: break-word;
  padding: 0 10px;
}

.age-prompt .age-prompt-content .age-prompt-content-wrap .age-prompt-content-box .age-prompt-content-box-text::-webkit-scrollbar {
  width: 5px;
  background-color: #a84545;
}

.age-prompt .age-prompt-content .age-prompt-content-wrap .age-prompt-content-box .age-prompt-content-box-text::-webkit-scrollbar-thumb {
  width: 5px;
  background-color: #333333;
}