.com_con{
  width: 100%;
    height: 100%;
    position: relative;
    padding: 0.08rem 0.08rem;
    box-sizing: border-box;
    display: flex
;
    flex-direction: column;
    justify-content: space-between;
}
.com_con .cc_top{
  width: 100%;
  aspect-ratio: 750 / 79;
  background: url(../img/com_nav_bar.png) center center no-repeat;
  background-size: 100% 100%;
  display: flex;
    justify-content: space-between;
}
.com_con .cc_bottom{
    width: 100%;
    aspect-ratio: 748 / 194;
    background: url(../img/com_nav_bg.png) center center no-repeat;
    background-size: 100% 100%;
    margin-bottom: 0.2rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 0.18rem;
    align-items: center;
}

.com_con .cc_top .top_left{
    position: relative;
    z-index: 1;
}
.com_con .cc_top .top_left::after{
  content: "";
  width: 2.8rem;
    /* height: 1.1rem; */
    aspect-ratio: 257 / 69;
    background: url(../img/com_nav_home.png) center center no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.com_con .cc_top .top_left .nav_home{
  width: 0.9rem;
  height: 0.8rem;
    position: relative;
    z-index: 2;
    cursor: pointer;
}

.com_con .cc_top .top_right{
  display: flex;
  align-items: center;
  position: relative;
  z-index: 2;
}

.com_con .cc_top .top_right .recharge_btn{
  width: 2.12rem;
  aspect-ratio: 216 / 70;
  background: url(../img/com_nav_store.png) center center no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}

.com_con .cc_top .top_right .facebook_btn{
  width: 0.72rem;
  aspect-ratio: 72 / 72;
  background: url(../img/com_nav_fb.png) center center no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}

.com_con .cc_top .top_right .kefu_btn{
  width: 0.72rem;
  aspect-ratio: 72 / 72;
  background: url(../img/com_nav_kefu.png) center center no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}

.com_con .cc_top .top_right .more_btn{
  width: 0.72rem;
  aspect-ratio: 68 / 68;
  /* background: url(../img/com_nav_more.png) center center no-repeat;
  background-size: 100% 100%; */
  cursor: pointer;
  position: relative;
}

.com_con .cc_bottom .gift_icon{
  width: 1.75rem;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  position: relative;
}

.com_con .cc_bottom .gift_icon img{
  position: absolute;
  top: -0.05rem;
  left: 0;
}

.com_con .cc_bottom .btn_list{
  display: flex
  ;
      flex-direction: row;
      flex-wrap: wrap;
      width: 62%;
      align-items: center;
      justify-content: center;
      align-content: center;
      gap: 0.1rem;
}

.com_con .cc_bottom .btn_list img{
   width: 2.2rem;
   cursor: pointer;
}

.com_con .cc_bottom .gift_icon .giftTxt {
  width: 100%;
    height: 100%;
    position: relative;
  z-index: 2;
}

.com_con .cc_bottom .gift_icon .giftTxt .numTxt{
  width: 0.8rem;
    position: absolute;
    font-size: 0.28rem;
    display: flex;
    flex-direction: column;
    right: 0rem;
    top: -0.04rem;
    gap: 0rem;
    font-weight: bold;
    font-size: 0.2rem;
    text-align: center;
    color: #fbf4db;
}

.com_con .cc_bottom .gift_icon .giftTxt .numTxt span:last-child{
  margin-left: 0.28rem;
  font-size: 0.2rem;
}

.com_con .cc_bottom .gift_icon .giftTxt .recharge_txt{
  width: 100%;
  position: absolute;
  bottom: 0.18rem;
  font-size: 0.26rem;
  text-align: center;
  font-weight: bold;
  color: #fbf4db;
}

.imgNoClick{
  pointer-events: none;
}

.menu-icon{width: 50px;height: 38px;position: absolute;left: 50%;margin-left: -22px;top: 19px;}
.menu-icon i{background: linear-gradient(#f1e1b2, #f7e8ba, #fdfcf8);-webkit-text-fill-color: transparent;color: transparent;position: absolute;top: 0;left: 0;width: 48px;height: 9px;border-radius: 5px;-webkit-transition: all .3s ease-in-out;transition: all .3s ease-in-out;z-index: 999;}
.menu-icon .line-1{-webkit-transform: translateY(0) rotate(0);transform: translateY(0) rotate(0);}
.menu-icon .line-2{top: 14px;}
.menu-icon .line-3{top: 28px;}

.menu-panel {
  position: absolute;
  top: 83px;
  background: rgba(0, 0, 0, .8);
  right: 0px;
    font-size: 14px;
    display: none;
    width: 198px;
    height: 126px;
}

.menu-info {
  width: 196px;
    height: 123px;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    display: flex
;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 0.28rem;
}

.menu-info li{
  display: block;
  flex: 1;
  width: 100%;
  position: relative;
}

.menu-info li:nth-child(1)::after{
  content: "";
  width: 100%;
  border-bottom: 1px solid #9a9a9a;
  position: absolute;
  bottom: 0;
  left: 0;
}

.menu-info li a{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fbf4db;
}

.menu-open {
  /* background: #2a2a2a; */
}

/* .menu-open{background: #2a2a2a;} */
.menu-open .line-1{-webkit-transform: translateY(12px) rotate(45deg);transform: translateY(12px) rotate(45deg);background: #c3c3c3;}
.menu-open .line-2{top: 12px;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);background: #c3c3c3;}
.menu-open .line-3{opacity: 0;}

.banner_vid_btn{
  position: absolute;
  bottom: 6.2rem;
  left: 50%;
  margin-left: -73px;
}

.top_vid_btn {
  width: 180px;
  aspect-ratio: 190 / 191;
  background: url(../img/impression/btn_playVid.png) center center no-repeat;
  background-size: 100% 100%;
  border: 0;
  cursor: pointer;
}

/* 禁止页面滚动的样式类 */
.body-fixed {
  overflow: hidden;  /* 核心：阻断页面滚动行为，保留滚动高度 */
  width: 100%;       /* 关键：防止滚动条消失后页面宽度跳动 */
  height: 100%;      /* 可选：限制body高度为视口高度，增强固定效果 */
}