/* ===============================
   电脑端（原样，一字不改）
   =============================== */

/* 全局重置 & 基础设置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    background: linear-gradient(135deg, #fdf6e3 0%, #f5e6ca 100%);
    color: #333;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow-x: hidden;
}

/* 背景金币装饰 */
body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCI+PHBhdGggZD0iTTMwIDBDMTMuMTA0IDAgMCAxMy4xMDQgMCAzMHMyOS44OTYgMzAgMzAgMzAgMzAtMjkuODk2IDMwLTMwUzQ2Ljg5NiAwIDMwIDBaIiBmaWxsPSIjZmZkNzAwIiBvcGFjaXR5PSIwLjA1Ii8+PC9zdmc+');
    opacity: 0.3;
    z-index: -1;
}

.container {
    width: 90%;
    max-width: 1200px;
    background: #fff;
    border: 1px solid #d4af37;
    box-shadow: 0 0 30px rgba(0,0,0,0.2);
    padding: 40px;
    position: relative;
    animation: fadeIn 1s ease-out;
}




@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 头部标题 */
.header {
    text-align: center;
    margin-bottom: 30px;
    position: relative;
}

.header i {
    font-size: 28px;
    color: #d4af37;
    margin-right: 10px;
    vertical-align: middle;
}

.header h1 {
    font-size: 32px;
    color: #333;
    display: inline-block;
    letter-spacing: 2px;
}

.header .plus {
    color: #d4af37;
    font-weight: bold;
}

/* 主要内容区 */
.content-left {
    width: 65%;
    float: left;
}

.banner {
    background: #222;
    color: #d4af37;
    padding: 10px 20px;
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: bold;
    clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);
    display: flex;
    align-items: center;
}

.banner.dark-bg {
    background: #000;
    margin-top: 40px;
}

.benefits {
    list-style: none;
    margin-left: 0px;
    margin-bottom: 30px;
}

.benefits li {
    font-size: 20px;
    margin-bottom: 15px;
    color: #555;
    display: flex;
    align-items: center;
}

.benefits li i {
    color: #d4af37;
    font-size: 18px;
    margin-right: 10px;
}

.desc {
    font-size: 18px;
    line-height: 1.8;
    color: #444;
    margin-bottom: 30px;
    border-left: 1px solid #d4af37;
    padding-left: 20px;
}

/* 二维码区域 */
.qrcode-area {
    float: right;
    width: 30%;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s;
}

.qrcode-box {
    width: 200px;
    height: 200px;
    margin: 0 auto 15px;
    border: 4px solid #000;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    box-shadow: 5px 5px 0 #d4af37;
}

.mock-qr {
    font-size: 16px;
    color: #333;
    text-align: center;
}

.mock-qr i {
    font-size: 60px;
    display: block;
    margin-bottom: 10px;
    color: #000;
}

.scan-tip {
    font-size: 16px;
    color: #d4af37;
    font-weight: bold;
}

/* 右侧装饰 */
.decoration {
    float: right;
    width: 30%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.diamond-shape {
    width: 100px;
    height: 100px;
    border: 4px solid #999;
    transform: rotate(45deg);
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -50px;
}



/* HOT 条 */
.hot-bar {
    clear: both;
    background: linear-gradient(to right, #D4AF37, #ff6347);
    color: white;
    padding: 12px 20px;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    margin-top: 0px;
    border-radius: 4px;
    box-shadow: 0 4px 0 #cc3700;
}

.hot-bar i {
    font-size: 24px;
    margin-right: 10px;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* 联系表单 */
.contact-form {
    width: 100%;
    clear: both;
    margin-top: 40px;
    padding: 30px;
    background: #f9f9f9;
    border-top: 1px dashed #d4af37;
    text-align: center;
	
}

.contact-form h3 {
    margin-bottom: 20px;
    color: #333;
}

.contact-form form {
    display: flex;
    justify-content: center;
    gap: 10px;
    max-width: 500px;
    margin: 0 auto;
}

.contact-form input[type="text"] {
    flex: 1;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

.contact-form button {
    padding: 12px 25px;
    background: #d4af37;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background 0.3s;
}

.contact-form button:hover {
    background: #b8860b;
}



/* ===============================
   手机端（最终定稿版）
   =============================== */
@media (max-width: 768px) {

    /* ---- 基础重置 ---- */
    body {
        display: block;
        padding: 15px;
        font-size: 14px;
        background: #ffffff;
    }

    .container {
        width: 100%;
        max-width: 100%;
        box-shadow: none;
        padding: 20px 15px;
        margin: 0 auto;
    }

    /* ---- 取消浮动，让海报居中 ---- */
    .content-left,
    .qrcode-area,
    .decoration {
        float: none;
        width: 100%;
        text-align: center;
    }

    /* ---- 隐藏扫码 & 右侧装饰 ---- */
    .qrcode-area {
        display: none;
    }

    .decoration {
        display: none;
    }

    /* ---- 字体改小（重点标题） ---- */
    .header h1 {
        font-size: 19px !important;
        letter-spacing: 1px;
        text-align: center;
    }

    .banner {
        font-size: 18px !important;
        padding: 8px 12px;
        text-align: center;
    }

    .desc {
        font-size: 17px !important;
        line-height: 1.8;
        text-align: justify;
        padding: 0;
		text-decoration: none;
    }
    .desc a{
		text-decoration: none;
		font-weight:bold;
		font-size: 19px !important;
		
    }
    .benefits li {
        font-size: 17px !important;
        justify-content: flex-start;
        text-align: left;
    }

    .hot-bar {
        font-size: 15px !important;
        padding: 10px 12px;
        text-align: justify;
    }

    /* ---- 表单强制下移 + 居中 + 宽度限制 ---- */
    .contact-form {
        margin-top: 50px;
        padding: 15px;
        clear: both;
        text-align: center;
    }

    .contact-form h3 {
        font-size: 16px !important;
        text-align: center;
    }

    .contact-form form {
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }

    .contact-form input[type="text"],
    .contact-form button {
        font-size: 15px !important;
        width: 100%;
        max-width: 400px;
        box-sizing: border-box;
    }

    
	
/* ===== 分割线 ===== */
hr {
    border: none;
    border-top: 1px solid #eee;
    margin: 1px 0;
}


.icon-hr {
    text-align: center;
    margin: 1px 0;
    position: relative;
}
.icon-hr .icon {
    font-size: 20px;
    color: #901c25;
    background: #fff;
    padding: 0 10px;
    position: relative;
    z-index: 1;
}
.icon-hr::before {
    content: '';
    position: absolute;
    top: 70%;
    left: 0;
    right: 0;
    height: 1px;
    background: #ccc;
    z-index: 0;
}		

		
		
		
		/* 右下角悬浮 */
/* ✅ 顶部固定 + 缩小 */
.oa-float-top {
  position: fixed;

bottom: 30px;  /* ← 距离顶部 */
  right: 6px;      /* ← 靠右（可改成 left 居中） */
  z-index: 9999;

  width: 33px;      /* ← 比之前更小 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  padding: 3px 3px 3px;

  text-decoration: none;
  transition: transform .2s ease;
}

.oa-float-top:hover {
  transform: scale(1.06);
}

/* SVG 缩小 */
.oa-float-top svg {
  width: 25px;
  height: 25px;
}

/* 文字缩小 */
.oa-text {
  margin-top: 2px;
  font-size: 8px;
  color: #07c160;
  line-height: 1;
  white-space: nowrap;
}




/* =====授权须知 ===== */



.summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  font-weight: bold;
}

.left {
  white-space: nowrap;
  font-size: 15px;
}

.hint {
  color: #007BFF;
  margin-left: 4px;
}

/* ✅ 关键：虚线 */
.line {
  flex: 1;
  height: 1px;               /* 必须给高度 */
  margin: 0 8px;

  background-image: linear-gradient(
    to right,
    #bbb 40%,
    transparent 40%
  );
  background-size: 6px 1px; /* 虚线长度 / 间距 */
  background-repeat: repeat-x;

  align-self: center;        /* 垂直居中 */
  transform: translateY(2px); /* ✅ 往下移 */
}

.right {
  color: #888;
  white-space: nowrap;
}

/* 授权须知样式 */
        /* 授权须知标题 */
        .auth-title {
            color: #999999;
            font-size: 15px;
            font-weight: bold;
            margin-bottom: 6px;
			padding:0px;
        }

        /* 授权须知内容 */
        .auth-notice {
            color: #999999;
            font-size: 15px;
            line-height: 1.6;      /* 行间距缩小 */
            text-align: justify;
			padding:0px;
        }

        .auth-notice p {
            margin: 0 0 6px 0;     /* 段落间距缩小 */
        }

        .auth-notice a {
            color: #999999;
            text-decoration: underline;
        }
		
		
		  /* 底部留白 */
        .bottom-space {
            height: 0px;
        }
		
		 /* ===== 点击这里和呼吸特效 ===== */		

@keyframes breath {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.55; }
}


          .highlight {
        padding: 0em 0.12em;
          background: linear-gradient(135deg, #ffffff, #FFD700);
           border-radius: 0px;
		   color: #007BFF; 
		   animation: breath 3s ease-in-out infinite;

           }