body {
    margin: 0;
    font-family: Microsoft JhengHei,Helvetica,Hiragino Sans GB,Microsoft Yahei,微软雅黑,Arial,sans-serif;
    /* 设置页面的边距和字体 */
  }

  .app {
    background-image: url(images/pc-bg4.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;
    height: 130vh;
    /* 设置背景图、位置、重复规则、尺寸及页面宽高 */
  }

  .title {
    position: relative;
    /*background-image: url(images/pc-stitle.png);*/
    background-size: 100%;
    background-repeat: no-repeat;
    width: 50%;
    height: 1vh;
    min-width: 700px;
    min-height: 80px;
    max-width: 1013px;
    max-height: 99px;
    display: inline-block;
    margin-top: 1vw;
    margin-left: 37vw;
    /* 标题容器，带背景图片，设置大小和位置，响应式支持 */
  }

  .stitle {
    /*background-image: url(images/pc-stitle.png);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 50%;
    height: 8vh;
    min-width: 700px;
    min-height: 60px;
    max-width: 1047px;
    max-height: 71px;
    position: relative;
    bottom: -4vw;
    left: 0;
    /* 副标题样式，绝对定位在标题下面 */
  }
  
  	.banner {
      /*background-image: url(banner.365.png);*/
      width: 90%;
      height: 50%;
      max-width: unset;
      max-height: auto;
      min-width: unset;
      min-height: unset;
	  justify-content: center;  /* 水平居中 */
	  align-items: center;      /* 垂直居中 */
	  /*margin: 10% 5% 5% 5%;*/
      /*bottom: -1vh;*/
      /* 副标题针对移动设备的样式 */
	  display: block; /* 将图片设置为块级元素 */
	  /*margin: 2% auto; /* 自动水平居中 */
	  margin: 5% auto;
    }

  .content {
    display: flex;
    flex-wrap: wrap;
    margin-left: 37vw;
    margin-top: 1vw;
    width: 50%;
    min-width: 680px;
	justify-content: space-around;
    /* 内容区域使用flex布局，支持响应式，设置间距和宽度 */
  }

  .btn {
    background-size: 100%;
    background-repeat: no-repeat;
    /*width: 22vw;*/
    height: 3.5vw;
    /*max-width: 485px;*/
    min-width: 350px;
    min-height: 80px;
    margin-bottom: 1vw;
	/* 按钮样式，设置背景图，尺寸和间距 */
	transition: box-shadow 0.3s ease, transform 0.3s ease; /*添加阴影和缩放效果的平滑过渡 */
  }
  
  
.btn:hover {
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.7); /* 指针移到按钮上时的光亮效果 */
  transform: scale(1.1); /* 按钮轻微放大 */
  outline: none
  /* 去除链接或按钮被选中时的边框轮廓，优化 UI 显示 */
}

  a {
    text-decoration: none;
    /* 去除链接下划线 */
  }

  a:nth-child(odd) {
    /*margin-right: 5%;*/
    /* 每个奇数链接的右边添加间距 */
  }
  .text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 48%;
    margin-left: 60%;
    margin-top: 12px;
    /* 文本区域设置为flex布局，文本左对齐 */
  }

  h2 {
    color: #fff;
    margin: 0;
    font-size: 29px;
    /* 主标题文字样式 */
  }

  p {
    color: #fff;
    margin: 0;
    font-size: 18px;
    font-weight: 550;
    /* 段落文字样式 */
  }

  .btn1 {
    background-image: url(images/pc-bet365.png);
    /* 第一个按钮的背景图片 */
  }

  .btn2 {
    background-image: url(images/pc-188jbb.png);
    /* 第二个按钮的背景图片 */
  }

  .btn3 {
    background-image: url(images/pc-betway.png);
    /* 第三个按钮的背景图片 */
  }

  .btn4 {
    background-image: url(images/pc-tyc.png);
    /* 第四个按钮的背景图片 */
  }

  .btn5 {
    background-image: url(images/pc-yl.png);
    /* 第五个按钮的背景图片 */
  }

  .btn6 {
    background-image: url(images/pc-kaiyun.png);
    /* 第六个按钮的背景图片 */
  }
  
  .btn7 {
    background-image: url(images/pc-wlxe.png);
    /* 第七个按钮的背景图片 */
  }
  
  .btn8 {
    background-image: url(images/pc-weide.png);
    /* 第八个按钮的背景图片 */
  }
  
  .btn9 {
    background-image: url(images/pc-12bet.png);
    /* 第九个按钮的背景图片 */
  }
  
  .btn10 {
    background-image: url(images/pc-bwin.png);
    /* 第十个按钮的背景图片 */
  }
  
  .btn11 {
    background-image: url(images/pc-3377.png);
    /* 第十一个按钮的背景图片 */
  }
  
  .btn12 {
    background-image: url(images/pc-baowei.png);
    /* 第十二个按钮的背景图片 */
  }
    
  .btn13 {
    background-image: url(images/pc-xpj.png);
    /* 第十三个按钮的背景图片 */
  }
      
  .btn14 {
    background-image: url(images/pc-wns.png);
    /* 第十四个按钮的背景图片 */
  }
        
  .btn15 {
    background-image: url(images/pc-ljj.png);
    /* 第十五个按钮的背景图片 */
  }
          
  .btn16 {
    background-image: url(images/pc-w88.png);
    /* 第十六个按钮的背景图片 */
  }
            
  .btn17 {
    background-image: url(images/pc-m88.png);
    /* 第十七个按钮的背景图片 */
  }
  
  .btn18 {
    background-image: url(images/pc-wlxebwin.png);
    /* 第十七个按钮的背景图片 */
  }

  .logo {
    display: inline-block;
    width: 50%;
    margin-left: 37vw;
    margin-top: 30px;
    min-width: 680px;
    /* Logo区域的样式，设置宽度和间距 */
  }

  img {
    width: 100%;
    /* 图片宽度设置为100%以适应父容器 */
  }

  @media (max-width: 1750px) {
    .text {
      margin-top: 9px;
    }

    h2 {
      font-size: 27px;
    }

    p {
      font-size: 17px;
    }
    /* 针对宽度小于1750px的屏幕，调整文本区域和字体大小 */
  }

  @media (max-width: 1650px) {
    .title {
      margin-top: 2vw;
    }

    .text {
      margin-top: 8px;
    }

    h2 {
      font-size: 23px;
    }

    p {
      font-size: 15px;
    }
    /* 针对宽度小于1650px的屏幕，调整标题和文本样式 */
  }

  @media (max-width: 1450px) {
    .title {
      margin-top: 2vw;
    }

    .text {
      margin-top: 7px;
    }

    h2 {
      font-size: 22px;
    }

    p {
      font-size: 14px;
    }
    /* 针对宽度小于1450px的屏幕，进一步调整标题和文本样式 */
  }
  
    @media (max-width: 1366px) {
  /*.content {
    display: flex;
    flex-wrap: wrap;
    margin-left: 37vw;
    margin-top: 1vw;
    width: 50%;
    min-width: 680px;
	justify-content: space-around;
    /* 内容区域使用flex布局，支持响应式，设置间距和宽度 */
    
    /*display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px; /* 图片之间的间距 */
  /*}*/
  
  .app {
    height: 150vh;
  }
  
  .title {
    margin-left: 41vw;
    /* 标题容器，带背景图片，设置大小和位置，响应式支持 */
  }
    .content {
    width: 60%;
    /*justify-content: space-between; /* 使列之间有间隙 */
}


  .title {
    margin-top: 2vw;
  }
  /* 针对宽度小于1366px的屏幕，调整content中的图片为两列显示 */
}

  @media (max-width: 1350px) {
    .title {
      margin-top: 2vw;
    }
    /* 针对宽度小于1350px的屏幕，调整标题的上边距 */
  }

  @media (max-width: 1250px) {

    .title,
    .logo,
    .content {
      margin-left: 30vw;
    }

    .stitle {
      bottom: -5vw;
    }
    /* 针对宽度小于1250px的屏幕，调整布局间距 */
  }

  @media (max-width: 1080px) {

    .title,
    .logo,
    .content {
      margin-left: 25vw;
    }

    .stitle {
      bottom: -5vw;
    }
    /* 针对宽度小于1080px的屏幕，进一步调整布局 */
  }

  @media (max-width: 768px) {
    .app {
      background-image: url(images/bg-mb.jpg);
      height: auto;
      min-height: 100vh;
      position: relative;
      /* 移动设备样式：更换背景图，调整页面高度 */
    }

    .title {
      background-image: url(images/pd-tyc-3.png);
      width: 96%;
      height: 100%;
      max-width: unset;
      max-height: unset;
      min-width: unset;
      min-height: unset;
      margin: 2%;
      margin-top: 1vh;
      /* 标题区域针对移动设备的样式 */
    }


/* 新增链接层样式 */
.title-link {
  position: absolute;
  /*top: 0;
  left: 0;*/
  width: 100%;
  height: 50%;
  /*z-index: 1;  /* 在banner下层 */
  cursor: pointer;
}

/* 确保原有banner内容在上层 */
/*.banner, .banner a {
/*  position: relative;  /* 新建层叠上下文 */
/*  /*z-index: 2;*/
/*}

/* 可选：添加交互效果 */
/*.title-link:hover {*/
/*  opacity: 0.9;*/
/*  transition: opacity 0.3s;*/
/*}*/


    .stitle {
    }
	
	.banner {
      width: 90%;
      height: 80%;
      max-width: unset;
      max-height: unset;
      min-width: unset;
      min-height: unset;
	  /*margin: 10% 5% 5% 5%;*/
      bottom: -1vh;
      /* 副标题针对移动设备的样式 */
	  display: block; /* 将图片设置为块级元素 */
	  /*margin: 2% auto; /* 自动水平居中 */
	  margin: 25% auto;
    }

    .content {
      margin: 1;
      min-width: unset;
      margin: 0% auto auto;
      width: 92%;
      /* 内容区域的移动设备样式，居中显示 */
    }

    a {
      width: 46%; /* 每个按钮占46%的宽度 */
      margin-bottom: 2%;
      margin-right: 2%; /* 给按钮的右边添加间距 */
    }

    .text {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      width: 50%;
      margin-left: 42%;
      margin-top: 3.5vw;
      /* 文本区域针对移动设备的样式 */
    }

    h2 {
      font-size: 4.5vw;
    }

    p {
      font-size: 2.5vw;
      font-weight: 550;
      /* 移动设备上的字体大小和样式调整 */
    }

    .btn {
      width: 44%;
      height: 50px;
      max-width: unset;
      min-width: unset;
      min-height: 50px;
      /* 按钮在移动设备上的尺寸调整 */
	  /*margin-left: 2.5%;*/
	  /* 给按钮在左边留2.5位置对齐 */
    }

    .btn1 {
      background-image: url(images/mb-bet3652.png);
      margin-right: 0;
    }

    .btn2 {
      background-image: url(images/mb-188bet.png);
      margin-right: 0;
    }

    .btn3 {
      background-image: url(images/mb-betway.png);
      margin-right: 0;
    }

    .btn4 {
      background-image: url(images/mb-tyc3.png);
      margin-right: 0;
    }

    .btn5 {
      background-image: url(images/mb-yl.png);
      margin-right: 0;
    }

    .btn6 {
      background-image: url(images/mb-kaiyun2.png);
      margin-right: 0;
    }
	
	.btn7 {
      background-image: url(images/mb-wlxe.png);
      margin-right: 0;
    }
	
	.btn8 {
      background-image: url(images/mb-wd.png);
      margin-right: 0;
    }
	
	.btn9 {
      background-image: url(images/mb-12bet.png);
      margin-right: 0;
    }
	
	.btn10 {
      background-image: url(images/mb-bwin.png);
      margin-right: 0;
    }
    
    .btn11 {
      background-image: url(images/mb-3377.png);
      margin-right: 0;
    }
    
    .btn12 {
      background-image: url(images/mb-baowei2.png);
      margin-right: 0;
    }
        
    .btn13 {
      background-image: url(images/mb-xpj.png);
      margin-right: 0;
    }
            
    .btn14 {
      background-image: url(images/mb-wns.png);
      margin-right: 0;
    }
                
    .btn15 {
      background-image: url(images/mb-ljj.png);
      margin-right: 0;
    }
                    
    .btn16 {
      background-image: url(images/mb-w88.png);
      margin-right: 0;
    }
    
    .btn17 {
      background-image: url(images/mb-m88.png);
      margin-right: 0;
    }
    
    .btn18 {
      background-image: url(images/mb-wlxebwin.jpg);
      margin-right: 0;
    }

    .logo {
      display: block;
      margin: 0 auto;
      min-width: unset;
      width: 80%;
      /* Logo在移动设备上的显示方式 */
    }
  }
  
    @media (max-width: 966px) {
    .app {
      background-image: url(images/bg-mb.jpg);
      height: auto;
      min-height: 100vh;
      position: relative;
      /* 移动设备样式：更换背景图，调整页面高度 */
    }

    .title {
      background-image: url(images/pd-tyc-3.png);
      width: 96%;
      height: 100%;
      max-width: unset;
      max-height: unset;
      min-width: unset;
      min-height: unset;
      margin: 2%;
      margin-top: 1vh;
      /* 标题区域针对移动设备的样式 */
    }

    .stitle {
    }
	
	.banner {
      width: 90%;
      height: 80%;
      max-width: unset;
      max-height: unset;
      min-width: unset;
      min-height: unset;
	  /*margin: 10% 5% 5% 5%;*/
      bottom: -1vh;
      /* 副标题针对移动设备的样式 */
	  display: block; /* 将图片设置为块级元素 */
	  /*margin: 2% auto; /* 自动水平居中 */
	  margin: 25% auto;
    }

    .content {
      margin: 1;
      min-width: unset;
      margin: 0% auto auto;
      width: 92%;
      /* 内容区域的移动设备样式，居中显示 */
    }

    a {
      width: 46%; /* 每个按钮占46%的宽度 */
      margin-bottom: 2%;
      margin-right: 2%; /* 给按钮的右边添加间距 */
    }

    .text {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      width: 50%;
      margin-left: 42%;
      margin-top: 3.5vw;
      /* 文本区域针对移动设备的样式 */
    }

    h2 {
      font-size: 4.5vw;
    }

    p {
      font-size: 2.5vw;
      font-weight: 550;
      /* 移动设备上的字体大小和样式调整 */
    }

    .btn {
      width: 44%;
      height: 50px;
      max-width: unset;
      min-width: unset;
      min-height: 50px;
      /* 按钮在移动设备上的尺寸调整 */
	  /*margin-left: 2.5%;*/
	  /* 给按钮在左边留2.5位置对齐 */
    }

    .btn1 {
      background-image: url(images/mb-bet3652.png);
      margin-right: 0;
    }

    .btn2 {
      background-image: url(images/mb-188bet.png);
      margin-right: 0;
    }

    .btn3 {
      background-image: url(images/mb-betway.png);
      margin-right: 0;
    }

    .btn4 {
      background-image: url(images/mb-tyc3.png);
      margin-right: 0;
    }

    .btn5 {
      background-image: url(images/mb-yl.png);
      margin-right: 0;
    }

    .btn6 {
      background-image: url(images/mb-kaiyun2.png);
      margin-right: 0;
    }
	
	.btn7 {
      background-image: url(images/mb-wlxe.png);
      margin-right: 0;
    }
	
	.btn8 {
      background-image: url(images/mb-wd.png);
      margin-right: 0;
    }
	
	.btn9 {
      background-image: url(images/mb-12bet.png);
      margin-right: 0;
    }
	
	.btn10 {
      background-image: url(images/mb-bwin.png);
      margin-right: 0;
    }
    
    .btn11 {
      background-image: url(images/mb-3377.png);
      margin-right: 0;
    }
    
    .btn12 {
      background-image: url(images/mb-baowei2.png);
      margin-right: 0;
    }
        
    .btn13 {
      background-image: url(images/mb-xpj.png);
      margin-right: 0;
    }
            
    .btn14 {
      background-image: url(images/mb-wns.png);
      margin-right: 0;
    }
                
    .btn15 {
      background-image: url(images/mb-ljj.png);
      margin-right: 0;
    }
                    
    .btn16 {
      background-image: url(images/mb-w88.png);
      margin-right: 0;
    }
                        
    .btn17 {
      background-image: url(images/mb-m88.png);
      margin-right: 0;
    }

    .logo {
      display: block;
      margin: 0 auto;
      min-width: unset;
      width: 80%;
      /* Logo在移动设备上的显示方式 */
    }
  }

  @media (max-width: 530px) {
    .title {
      height: 19vh;
      /* 针对小屏设备调整标题高度 */
    }

    .stitle {
      height: 11vh;
      bottom: -7vh;
      /* 副标题的高度和位置调整 */
    }

    .text {
      margin-top: 3vw;
      /* 调整文本区域的上边距 */
    }

    h2 {
      font-size: 4.5vw;
      /* 小屏设备的标题字体大小 */
    }

    p {
      font-size: 2.5vw;
      font-weight: 550;
      /* 小屏设备的段落文字大小 */
    }

    .btn {
      margin-bottom: 4vw;
      /* 小屏设备上的按钮间距 */
    }

    .logo {
      width: 80%;
      /* 小屏设备上的Logo宽度 */
    }
  }