body,dd,dl,dt,form,h1,h2,h3,h4,h5,h6,li,ol,p,ul{margin:0;padding:0}
li,ol,ul{list-style:none;overflow:hidden}
html,body {margin: 0 auto;max-width:640px;padding:0;font-size:16px;background-color:#f5efe2;color:#333;}
a{color:#483724;text-decoration:none;}
a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);}
img {margin:0;}
hr{height:1px;border:none;border-top:1px dotted #666;}
table{ border-collapse:collapse; border:dashed 1px solid #c9c9c9; margin-bottom:0px;width: 100%;}
table td{ height:20px; border:dashed 1px #c9c9c9; padding:5px;width: 20%;}
.wrapper,#wraper{overflow:hidden;width:100%;}
.header{ margin:0; height:39px;overflow:hidden;background:#f54646;line-height:20px; width:100%;}
.header .logo_m{float:left;padding:5px 0 0 5px;}
.header .mini_nav{float:right;color:#fff;margin-top:11px;padding:0 10px;text-align:right;font-weight: bold;}
.header .mini_nav a{color:#f6f6f6;margin-right:5px;}
.header .sitemap{float:right;width:23px;margin-top:11px;text-align:right;margin-right:10px;}

.class_nav{margin-top:6px;font-size:14px;overflow:hidden;}
.class_nav a{color:#666;padding:6px 6px 4px 6px;margin:auto 3px;border:1px solid #cfc4b6;border-radius:2px;background-color:#fff;line-height: 32px;}
.nav{text-align:center; width:100.7%; font-size:15px; font-weight:800; padding-bottom:4px;}
.nav ul{list-style-type:none;margin:0px auto;padding-left:0px;width:100%;border-left:#cfc4b6 1px solid;border-top:#cfc4b6 1px solid;overflow:hidden;}
.nav li{float:left;width:19.68%;text-align:center;border-right:#ede2cb 1px solid; border-bottom:#ede2cb 1px solid;line-height:34px;}
.correl{font-size:14px;overflow:hidden;text-align:center;}
.correl ul{padding:0;margin:0;float:left; width:100%;border-left:#cfc4b6 1px solid;border-top:#cfc4b6 1px solid;}
.correl ul li{float:left;width:24.62%;padding-top:1px;line-height:24px; border-right:#ede2cb 1px solid; border-bottom:#ede2cb 1px solid;line-height:32px;}
.correl ul li a{color:#444;}

.place{margin:6px 0px 0px 0px;height:35px;line-height:36px;background:#fff;padding-left:8px;border:1px solid #cfc4b6;border-radius:2px;font-size:15px;color:#666;margin-bottom: 3px;}
.place a{color:#666;}
.viewbox{margin:3px 0px 2px 0px; background:#fff;border:1px solid #cfc4b6;border-radius:2px;}
.viewbox .title{padding:8px 0;border-bottom:1px solid #dcd3c9;color:#333;}
/* 最近节日 */
.viewbox .zjjr {
    padding: 4px 0;
    border-bottom: 1px solid #dcd3c9;
    color: #333333;
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    transition: all 0.3s ease;
}

/* 悬停效果 */
.viewbox .zjjr:hover {
    color: #ba2636;
    border-bottom-color: #ba2636;
}
.sub_title{padding-left:10px;font-size:16px;}
.viewbox h2{font-size:120%;text-align:center;color:#FF7A18;}
.viewbox h3{padding-left: 15px; line-height: 30px; border-left: 5px solid #f54646; font-size: 18px; background: #F5F5F5; margin: 8px 0;}

.viewbox .info{color:#666;text-align:center;padding-top:5px;line-height:25px;}
.viewbox .content{color:#666;text-align:left;padding-top:5px;line-height:150%;}
.viewbox .content .yunshi a{color:#FFF;border:0;}
.viewbox .content a{color:#00F;text-decoration: none;border-bottom-width: 1px;border-bottom-style: dotted;border-bottom-color: #5c3716;}

.viewbox .tbzb{margin:15px auto;line-height:1px;padding:0px 10px;font-size:12px;color:#252525;}
.viewbox .tbzb table{margin:auto;border-collapse:collapse;border:1px solid #c9c9c9;width:100%;}
.viewbox .tbzb table td{font-size:14px;line-height:32px;border:1px solid #c9c9c9; padding:5px;text-align:center;}

.viewbox .inform,.viewbox .inform_vip{font-size:100%;margin:2px 8px 8px 8px;padding:12px 0px 12px 0px;background-color:#f2f2f2;line-height:42px;border-radius: 4px;}
.viewbox .inform form,.viewbox .inform_vip form{width:90%;margin:auto;}
.viewbox .inform .xmint,.viewbox .inform .cmint,.viewbox .inform_vip .xmint,.viewbox .inform_vip .cmint{padding: 2px;font-size:16px;line-height: 26px;color:#333;height:26px;border:1px solid #d0ad9a;background-color:#fff;margin-bottom:6px;}

.viewbox .zbbtn,.viewbox .zbbtn2{font-size:14px;color:#fff;height:32px;width:92px;border:1px solid #ff6651;border-radius:3px;background:#f54646 no-repeat;background-position: 0 0;text-align:center;outline:none;line-height:24px;margin-top:6px;}
.viewbox .corr_nav{margin:auto 20px;font-size:100%;} 
.viewbox .content{margin:8px 12px;font-size:100%;color:#333;}
.viewbox .content p {margin-bottom: 10px;line-height:180%;}
.viewbox .moreinfo{margin:5px 12px;color:gray;}
.viewbox .note{float:right;width:70px;border: 1px solid #ccc;font-size: 14px;border-radius:8px;color:#aaa;text-align: center;line-height: 24px; margin-bottom: 10px;}

.yunshi{margin-bottom:20px;text-align:center;}
.yunshi .ys_btn{background-color:#ff7a18;outline:none;border:1px #ff7a18 solid;border-radius:4px;height:35px;color:#fff;width:90%;margin:auto;font-size:16px;}
.yunshi a{width:95%;font-size:16px;overflow: hidden;border: 0;text-align: center;margin:5px auto 10px auto;height:38px;line-height:38px;background:#FF8A11;color:#fff;border-radius: 6px;display:block;-webkit-appearance: none;}

.viewbox .content .sm_list{width:95%;margin:auto;}
.viewbox .content .sm_list a{padding:4px 8px 4px 8px;height:26px;color:#666;margin:0px 3px;line-height:42px;background-color:#fff2e8;border:1px #ffe3ca solid;border-radius:4px;}
.viewbox .content .sm_list a.this{background-color:#fff;color:#ffa859;}
.listbox {margin:4px 3px; background:#fff; border:1px solid #cfc4b6;border-radius:2px;overflow:hidden;}
.listbox .title{height:35px;line-height:35px;border-bottom:1px solid #DCD3C9;}
.listbox .title h2{float: left;font-size:100%;padding-left:10px;color:#555;}
.listbox .title h2 span{color:#f54646;font-size:18px;}
.listbox .title .more{float:right;padding-right:20px;padding-top:3px;margin:0;line-height: 32px;}
.listbox .title .more a{color:#ff7209;font-size:14px;}

.listbox .content{padding:10px;line-height:150%;line-height:150%;}
.listbox .list {padding-bottom:10px;}
.listbox .list ul {margin:0;padding:0;}
.listbox .list ul.sm{margin:2px 10px}
.listbox .list ul.sm li{padding:8px 5px;border-bottom:1px solid #f8f8f8;list-style-type:none;line-height:150%;}
.viewbox .content .sm_list li{width:33%;list-style-type:none;float:left;padding:0;margin:0 auto;text-align:center;}
.listbox .list ul.sm li a{width: 30%;float: left;display: block;border-radius: 5px;white-space:nowrap;text-align:center;padding:6px 0px;list-style-type:none;background-color:#F2F2F2;margin:5px 3px;}
.listbox .list ul.arc{margin:2px 5px}
.listbox .list ul.arc li{padding:2px 5px;border-bottom:1px solid #f2f2f2;list-style-type:none;background:url(../images/rt_arrow.png) no-repeat right center;background-size:20px auto;font-size:14px;}

.listbox .list ul.arc{margin:2px 5px}
.listbox .list ul.arc li{background: url(../images/arrow.gif) center left no-repeat;margin-left:10px;padding:5px 13px;border-bottom:1px solid #f2f2f2;list-style-type:none;font-size:16px;line-height:180%;}
.listbox .list ul.arc li a{display:block;}
.listbox .list ul.arc li a:active{background-color:#f2f2f2;}

.pagelist{padding:2px 10px 15px 10px;line-height:normal;overflow:hidden;}
.pagelist li{list-style-type:none;float:left;margin:5px 5px;float:left;font:12px/1.5 Tahoma,Helvetica,Arial,'����',sans-serif;padding:3px 6px;text-align:center;height:16px;border:1px solid #ccc;}
.pagelist .thisclass{color:#f00;}
.pagelist a,.pagelist span.pageinfo{display:block;color:#666;font-weight:normal;text-decoration:none;letter-spacing:0px;}

.footer{ text-align:center; margin-top:15px; padding:10px 0; border-top:1px solid #e1dad2; }
.footer a{color:#d9c08e;}

.gray,.gray a{color:gray;}
.f12{font-size:12px;}
.p10{padding:10px;}
.mt10{margin-top:10px;}
.red{color:red;}
.blue{color:blue;}
.green{color:green;}
.clear{clear:both;overflow:hidden;display:block;font-size:0;height:0;line-height:0;}
.fright{float:right;}
.center{text-align:center;}
.frightxs {
  float: right;
  margin: 0;  /* 默认 margin 为 0，避免默认样式影响 */
  margin-left: 5px;  /* 控制图片左侧的外边距（防止紧贴左边内容） */
  margin-right: 0;    /* 右侧外边距（可根据需要调整） */
  display: inline-block;  /* 让元素紧凑包裹图片 */
}

.xingshi {
  padding: 0;  /* 如果不需要内边距，设为 0 */
  display: inline-block;  /* 保持与浮动元素一致 */
}
/* zidian */
ul.zidian,.hanzi{margin:0;padding:5px;overflow:hidden;}
.zidian li{width: 25px;height: 25px;line-height: 25px;text-align: center;margin: 6px;display: inline;float: left;background: url(../images/right_zidian.gif);font-size: 16px;}
.hanzi li{width: 28px;height: 28px;line-height: 28px;text-align: center;margin: 6px;display: inline;float: left;background: url(../images/zidian.gif);font-size: 18px;}
.hanzi li a:link{border:0;}

/* qiming */
.qiming_list{overflow:hidden;padding:10px 10px;}
.qiming_list li{min-width: 28.6%; max-width: 200px;list-style:none;float:left;margin:5px;font-size:18px;border:1px solid #E0E0E0;padding:2px 8px;center;margin: 2px;padding: 5px;border-radius: 5px;}
.qiming_button{width: 95%;margin-bottom:20px;margin-top:10px;text-align:center;margin-bottom:4px;text-align:center;height:38px;line-height:38px;font-size:16px;padding:0 20px;background:#e63710d1;color:#fff;border-radius:5px;margin:auto;text-align:center; text-decoration:none;display:block;border:0;-webkit-appearance: none;}

/* form */
.ipt {border: 1px solid #d0ad9a;background: #fff;padding: 0px;font-size: 16px;color: #333;line-height: 26px;padding-left: 0.36em;border-radius: 3px;}
.select {color: #3e4144;font-size: 14px;line-height: 26px;padding: 2px;border: 1px solid #d0ad9a;height:28px;border-radius: 3px;}
.line {border-top: 1px dashed #dcc4b0;margin: 8px;}
.button{width: 95%;font-size:16px;overflow: hidden;border: 0;text-align: center;margin:5px auto 10px auto;height:38px;line-height:38px;background:#ff6651;color:#fff;border-radius: 6px;display:block;-webkit-appearance: none;}


/*#myFormsm .button,#myFormqm .button{width: 35%;font-size:16px;overflow: hidden;border: 0;text-align: center;margin:0px;height:32px;line-height:32px;background:#ff6651;color:#fff;border-radius: 6px;display:inline-block;-webkit-appearance: none;}

.btn_select_all{border-radius:6px; background:#093;color:#fff; display:inline-block; padding:0px 10px;height:32px;line-height:32px;}*/

/* 分类选项样式 */
.rzfxx{
  text-align: center;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: -1px 0;
  padding: 1px;
}
/* 分类选项复选框样式 */
.rzfxx input[type="checkbox"] {
  margin: 0 -4px 0 0;
  vertical-align: middle;
  position: relative;
  top: 0px;
}






.sbutton{overflow: hidden;font-size:14px;margin: 5px; padding:8px;font-weight:bold;border-radius: 5px;border: 0;text-align: center;text-decoration: none;background:#ff6651;color:#fff;-webkit-appearance: none;}

/* loader */
.loader{background-color:#FFFFFF;position: fixed;left: 0px;top: 0px;width: 100%;height: 100%;z-index:100000;}
.loader-animate{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEUAAABFCAMAAAArU9sbAAAAllBMVEUAAAA5kv85kv85kv85kv85kv85kv85kv85kv85kv85kv85kv85kv85kv85kv85kv85kv85kv85kv85kv85kv85kv85kv85kv85kv85kv85kv85kv85kv85kv85kv85kv85kv85kv85kv85kv85kv85kv85kv85kv85kv85kv85kv85kv85kv85kv85kv85kv85kv85kv98v3f9AAAAMXRSTlMA+u4H8xwSDeG7KBapjYhP28EE9jfmpJoxItOALLFuQcxrZOrXdnPHVDyVe11aSIN5drPNPgAAAx5JREFUWMOlmOl2qlAMhbcyySCiBUFRUazzVXve/+Vuk2NZTgwHvx+uVjBk2MmJopxRkvvecBn0gqXt+ecZ1DEW8654ZO3lLhTQznZHvKNj70dohrWNRDm9rYZ6Rqsiki/7uBhkiZNkg208LLyL/qGOcCkk39eD9hhm5veEZDirdsS/eRGHby9nY+lRZ1VVmJ200XfLb4mlnbmJEhzpsWegCseWEZfcFXJau3vUkX9xsZy3RvjaboJ6Zt/8vNmbK+zJWGsmKZvF/PJEg3PSb6zuMd0emE/v7hSMMGxmjgf6HI5Sr3FQC9yRsSI1qGBNSX7OnSbpjbUBNRydHo2CDbkygCo5faxoTVfnpKgzpA7XIKEW1F2oM6OeWoExyZUr2hBTJ4xALFq5wkzIGdl40xe9qWlvzsFRph20IyPNUBzp7x9LtGRE7ZcD2LGQW8L19QCLEjRBWw6keuBCxUJrRjTbZliwS+0Zchccf19PaA1/3ofNumnPimMJfl9DtGfA46HLJWpPSGcTqNAmKnCT6r7mGpP+raqG64qxW2uFxoKBcjw6vxYjlJHQiYKophfngliGVeJdgg7LqsgtXy4JsVlRI9beoMmSsM7L9cJDb1OniUAQO+nz63mYYttk/msnnVeo/ms1ydEzLpzjWgxPENH5uad1zqspuNT1ZFNB2M5LibojObxzNN9hO/59WOltfPtcqka4sVyci5pKH1bcTgr9mOzkhvl3f1LkI+BaNeVfxMtsqhWHow3ihxJkoSlWn8UcXCjEr2JrcPVX4TURs2fAv1sa+uSMCQWkmPUrubIFI/06QgXtxNvxQy58+vcAFVjMj/uhFZEKTKhxJiNT7WFIkATVMH396fgYqy7NjHk9PYqAvx/84EMc7rQNPiT8kkF9yKBTfJP73EzvgM/IuoKI3Wq5pW5NiqfyzNhY5cVNdbHe17RHfGuO1MA7Jn1dtrNWk5zo73eJ3Hg2sRgKSZA1G0JMMN4MQscwzUm4//F64oZ+0lCPS26X0k2basHcTEtsLFcWFEj86auJ1IEy5mUbD4NIF3r0bR+3lwov/gPz4J/MfidXggAAAABJRU5ErkJggg==);background-size:100% 100%;width:34px;height:34px;position:fixed;top:50%;left:50%;margin:-17px 0 0 -17px;-webkit-animation:loading-rotate 1s linear infinite;animation:loading-rotate 1s linear infinite}
@-webkit-keyframes loading-rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}
@keyframes loading-rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}

#btn_top{opacity:.6;background:#666 url(../images/to_top.png) center 50% no-repeat;border-radius:17px;position:fixed;right:1px;bottom:50px;border:solid 1px #555;width:32px;height:32px;display:block;z-index:100001;}

/* read all */
.read-content{overflow: hidden;width: 100%;} 
.read-contentnew {
    overflow: hidden;
    width: 100%;
    /* 新增图片样式 */
}
.read-contentnew img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover; /* 保持宽高比并填充容器 */
    display: block; /* 避免图片底部间隙 */
}
.read-box{ position: relative; z-index: 9; padding: 0 0 25px; margin-top: -220px; text-align: center; }
.read_mask {height: 200px; background: -webkit-gradient(linear,0 top,0 bottom,from(rgba(255,255,255,0)),to(#FFF)); background: -o-linear-gradient(bottom,rgba(255,255,255,.1),rgba(255,255,255,0)); }
.read-box .read_mod {background-color: #FFF; }
.read-button, .read-button:focus, .read-button:link, .read-button:visited {font-size: 1rem; color: #FF6651; background: #FFF; border-radius: .25rem; border: 1px solid #FF6651; line-height: 1.875rem; }
.read-box .read_mod a{border: 1px solid #FF7A18; width: 15rem; height: 2.5rem; line-height: 2.5rem; display:inline-block; vertical-align: top;color:#FF7A18;}
.read-box .read_mod a:hover{color:#FF7A18;}
.read-box .read_mod img{ display:inline; width: .9375rem; height: auto; margin: 1.0625rem 0 0 .3125rem; vertical-align: top; }
.caishenfw {color: #ffffff;text-align:center;font-size:26px;background-color:#D03D3D;width:100px;display: block;margin: 0 auto;font-weight:800;border-radius:2px;line-height:46px;}

/* 抽签样式开始 */
.lingqian {margin:10px 10px;}
.lingqian h3 {color: #FF6651;line-height: 1;font-size: 15px;text-overflow:clip; white-space:nowrap; overflow:hidden; font-weight: bold}
.lingqian h3 a{color: #FF6651;}
.lingqian ul {list-style: none;padding: 0;overflow: hidden;margin: 0 -5px 0 0}
.lingqian ul:after {display: block;content: '';clear: both}
.lingqian li {font-size:14px;text-align:center;width:31%;padding-right: 5px;margin-bottom: 5px;display: inline-block;overflow:hidden;vertical-align: top}
.lingqian li img {margin:auto;height:180px;width:100px;padding:0;display:block;}
/* 抽签样式结束 */

/* 整体容器样式 */
.name-analysis-container {
    padding: 15px;
    background: linear-gradient(135deg, #ffffff, #f1f1f1);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 整体表格样式 */
.name-analysis-table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    font-family: Arial, sans-serif;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform-style: preserve-3d; /* 保留 3D 效果 */
    perspective: 1000px; /* 保留透视效果 */
    transform: translateZ(20px); /* 保留 3D 立体效果 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 保留动画过渡 */
}

.name-analysis-table:hover {
    transform: translateZ(30px) rotateX(5deg) rotateY(5deg); /* 保留悬停时 3D 倾斜 */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); /* 保留悬停时阴影加深 */
}

/* 姓名详情表格样式 */
.name-details {
    width: 100%;
    border-collapse: collapse;
}

.name-details td, .name-details th {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.9);
    transition: background-color 0.3s ease, transform 0.3s ease; /* 保留单元格动画 */
}

.name-details th {
    background-color: #4CAF50;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    transform: translateZ(10px); /* 保留表头 3D 效果 */
}

.name-details td:hover {
    background-color: rgba(240, 240, 240, 0.9);
    transform: translateZ(15px); /* 保留悬停时单元格凸起 */
}

/* 姓名字符样式 */
.name-character {
    font-size: 24px;
    font-weight: bold;
    font-family: 'Brush Script MT', cursive;
    color: #c33;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

/* 繁体字样式 */
.name-traditional {
    font-size: 18px;
    color: #666;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* 拼音样式 */
.name-pinyin {
    font-size: 16px;
    color: #333;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* 笔划样式 */
.name-stroke {
    font-size: 16px;
    color: #555;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* 五行样式 */
.name-element {
    font-size: 16px;
    color: #444;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* 吉凶样式 */
.name-luck {
    font-size: 16px;
    color: #d00;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* 姓名结构分析表格样式 */
.structure-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.1px 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateZ(20px); /* 保留 3D 立体效果 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 保留动画过渡 */
}

.structure-table:hover {
    transform: translateZ(30px) rotateX(5deg) rotateY(5deg); /* 保留悬停时 3D 倾斜 */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); /* 保留悬停时阴影加深 */
}

.structure-table td, .structure-table th {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.9);
    transition: background-color 0.3s ease, transform 0.3s ease; /* 保留单元格动画 */
}

.structure-table th {
    background-color: #2196F3;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    transform: translateZ(10px); /* 保留表头 3D 效果 */
}

.structure-table td:hover {
    background-color: rgba(240, 240, 240, 0.9);
    transform: translateZ(15px); /* 保留悬停时单元格凸起 */
}

/* 动画效果 */
@keyframes float {
    0% {
        transform: translateZ(20px) rotateX(0deg) rotateY(0deg);
    }
    50% {
        transform: translateZ(30px) rotateX(5deg) rotateY(5deg);
    }
    100% {
        transform: translateZ(20px) rotateX(0deg) rotateY(0deg);
    }
}

.name-analysis-table, .structure-table {
    animation: float 6s ease-in-out infinite; /* 保留浮动动画 */
}

/* 响应式调整 */
@media (max-width: 768px) {
    .name-analysis-container {
        padding: 10px;
    }

    .name-analysis-table, .structure-table {
        margin: 10px 0;
    }

    .name-details td, .name-details th, .structure-table td, .structure-table th {
        padding: 8px;
    }

    .name-character {
        font-size: 20px;
    }

    .name-traditional {
        font-size: 16px;
    }

    .name-pinyin, .name-stroke, .name-element, .name-luck {
        font-size: 14px;
    }

    /* 调整 3D 效果强度 */
    .name-analysis-table, .structure-table {
        transform: translateZ(10px);
    }

    .name-analysis-table:hover, .structure-table:hover {
        transform: translateZ(20px) rotateX(3deg) rotateY(3deg);
    }

    .name-details th, .structure-table th {
        transform: translateZ(5px);
    }

    .name-details td:hover, .structure-table td:hover {
        transform: translateZ(10px);
    }

    /* 调整动画强度 */
    @keyframes float {
        0% {
            transform: translateZ(10px) rotateX(0deg) rotateY(0deg);
        }
        50% {
            transform: translateZ(20px) rotateX(3deg) rotateY(3deg);
        }
        100% {
            transform: translateZ(10px) rotateX(0deg) rotateY(0deg);
        }
    }
}
    /* 喜用神 */
:root {
    --progress-bar-top-offset: 2px; /* 定义一个 CSS 变量，用于控制进度条的顶部偏移量，初始值为 0px */
}

.se_jin, .se_shui, .se_mu, .se_huo, .se_tu {
    display: inline-block;
    height: 16px;
    margin-left: 6px;
    border-radius: 3px;
    animation: pulseGlow 2s infinite;
    position: relative; /* 设置为相对定位，以便使用 top 属性调整位置 */
    top: var(--progress-bar-top-offset); /* 使用 CSS 变量来设置顶部偏移量 */
}

.se_jin { 
    background: #EBEBEB;
    box-shadow: 0 0 10px #C0C0C0;
}
.se_shui { 
    background: #000000;
    box-shadow: 0 0 10px #3333FF;
}
.se_mu { 
    background: #008000;
    box-shadow: 0 0 10px #00FF00;
}
.se_huo { 
    background: #ff0000;
    box-shadow: 0 0 10px #FF3300;
}
.se_tu { 
    background: #ffff00;
    box-shadow: 0 0 10px #FFCC00;
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 2px; }
    50% { box-shadow: 0 0 5px; }
}
        /* 回首页定义通用按钮样式 */
        .common-button {
            position: fixed;
            right: 15px;
            background-color: #000000;
            color: white;
            padding: 12px;
            border-radius: 50%;
            text-decoration: none;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            width: 20px; /* 显式设置宽度 */
            height: 20px; /* 显式设置高度 */
            opacity: 0.5; /* 设置默认透明度 */
            transition: opacity 0.1s ease; /* 透明度过渡效果 */
        }

        /* 鼠标悬停时通用按钮的样式 */
        .common-button:hover {
            background-color: #404040;
            opacity: 1; /* 悬停时完全不透明 */
        }

        /* 回到顶部按钮位置 */
        .top-button {
            bottom: 150px;
            display: none;
        }

        /* 回到首页按钮位置 */
        .home-button {
            bottom: 70px;
        }
        
        
        
        
        
 .title_sm{/* margin:6px auto; */border-bottom:2px solid #c33;width:540px;/* height:40px; */overflow:hidden;}
 .title_sm h2{ margin:0px;padding:0px;display:block; overflow:hidden;font-size:14px;line-height:30px;float:left;color:#333;text-align:left; padding-left:10px;}
 .title_sm h2 a{ float:left; margin-right:10px;display:inline-block; cursor:pointer;    text-decoration: none;
}

 .title_sm h2 a.on{color:#fff; background:#ba2636; padding:0px 10px;}





.hide{ display:none}
.fuzhi_wx_btn{outline: none;
    font-size: 15px;
    color: #fff;
    height: 28px;
    width: 60px; /* 必须有固定宽度 */
    line-height: 28px;
    margin: 6px auto 0; /* 修改这里：上边距6px，左右auto */
    border: 1px solid #ba2636;
    border-radius: 3px;
    text-align: center;
    background-position: 0 0;
    background-color: #ffffff;
    cursor: pointer;
    display: block; /* 关键：块级元素才能用margin auto居中 */
    color: #ba2636 !important;
    padding: 0px 10px;
}
    
    
    
    
    
    
    .mystic-loader {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 0 auto;
}

.energy-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: #9b59b6;
    animation: spin 1.5s linear infinite;
}

.energy-ring:nth-child(1) {
    animation-delay: 0s;
}

.energy-ring:nth-child(2) {
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
    border-top-color: #3498db;
    animation-delay: 0.2s;
}

.energy-ring:nth-child(3) {
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
    border-top-color: #e74c3c;
    animation-delay: 0.4s;
}

.mystic-loader .core {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, #fff, #9b59b6);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(155, 89, 182, 0.5);
    animation: pulse 2s ease-in-out infinite;
}

.thinking-text {
    margin-top: 12px;
    font-family: "楷体", KaiTi, serif;
    font-size: 14px;
    color: #666;
    opacity: 0.8;
    animation: fade 2s ease-in-out infinite; text-align:center ;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.5;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }
}

@keyframes fade {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 1;
    }
}

/* 服务条款基础样式 */
.fwtk {
  text-align: center;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 1px 0;
  padding: 1px;
}

/* 复选框样式 */
.fwtk input[type="checkbox"] {
  margin: 0 -6px 0 0;
  vertical-align: middle;
  position: relative;
  top: 0px;
}

/* 标签样式 */
.fwtk label {
  margin: 0;
  padding: 0;
  cursor: pointer;
}

/* 专用链接样式 - 通过辅助类名隔离 */
.fwtk-link {
  color: #0000ff; /* 直接控制链接颜色 */
  text-decoration: none; /* 可选：去除下划线 */
  margin-left: -7px;
}

/* 鼠标悬停效果 */
.fwtk-link:hover {
  text-decoration: underline; /* 可选：悬停下划线 */
}
.hide{ display:none}
    
/* 使用指南 开始 */
.syzn {
    max-width: 800px;
    margin: 2px auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 0 8px 8px 0;
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    color: #2d3748;
    line-height: 1.7;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.highlight-text {
    color: #e74c3c;
    font-weight: 500;
}

.syzn p {
    margin: -10px 0;
    padding: 0;
    font-size: 15px;
}

.syzn p:first-child {
    margin-bottom: 16px;
    color: #4a5568;
}

.syzn p:last-child {
    color: #718096;
    font-size: 14px;
    padding: 8px 12px;
    background-color: #f7fafc;
    border-radius: 4px;
    text-align: center; 
}
/* 使用指南 结束 */

/* 24节气内容页 */
.jieqi_div {
    margin: 1rem auto;
    max-width: 1000px;
    width: 100%;
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding: 0 0.5rem;
}

/* 表格整体样式 */
.jieqi_div table {
    width: 96%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0.5rem 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    overflow: hidden;
    background: white;
    min-width: 320px;
}

/* 表头样式 */
.jieqi_div thead th {
    padding: 0.8rem 0.5rem;
    text-align: center;
    font-weight: 600;
    position: relative;
    font-size: 0.9rem;
}

/* 季节标题行 */
.jieqi_div thead tr:first-child th {
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    padding: 1rem 0.5rem;
    color: white;
}

/* 列标题行 */
.jieqi_div thead tr:nth-child(2) th {
    background: #f8f9fa;
    color: #495057;
    font-size: 0.85rem;
    padding: 0.7rem 0.5rem;
}

/* 表格内容样式 */
.jieqi_div tbody td {
    padding: 0.7rem 0.5rem;
    text-align: center;
    border-bottom: 1px solid #f1f3f5;
    color: #495057;
    font-size: 0.85rem;
}

.jieqi_div tbody tr:last-child td {
    border-bottom: none;
}

/* 行悬停效果 */
.jieqi_div tbody tr:hover td {
    background: rgba(0, 0, 0, 0.02);
}

/* 节气名称单元格特殊样式 */
.jieqi_div tbody td:first-child {
    font-weight: 600;
    color: #212529;
}

/* 季节特色配色 */
.jieqi_div .chun thead tr:first-child th {
    background: linear-gradient(135deg, #a8e063, #56ab2f);
}

.jieqi_div .xia thead tr:first-child th {
    background: linear-gradient(135deg, #36d1dc, #5b86e5);
}

.jieqi_div .qiu thead tr:first-child th {
    background: linear-gradient(135deg, #f9d423, #e65c00);
}

.jieqi_div .dong thead tr:first-child th {
    background: linear-gradient(135deg, #a8c0ff, #3f2b96);
}

/* 周末特殊标记 */
.jieqi_div tbody td:nth-child(5):contains("日") {
    color: #f03e3e;
    font-weight: 600;
}

/* 图片样式调整 */
.jieqi_div p[style*="text-align:center"] {
    text-align: center !important;
    margin: 1.5rem auto;
    width: 100%;
    max-width: 1000px;
    padding: 0 0.5rem;
    box-sizing: border-box;
}

.jieqi_div p[style*="text-align:center"] img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    display: block;
    margin: 0 auto;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* 文字内容样式*/
div.jieqi_hanyi {
    padding: 2rem;
    font-family: 'Inter', sans-serif;
    max-width: 900px;
    margin: 2rem auto;
    background-color: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* 主标题（精确限定作用域） */
div.jieqi_hanyi > hy {
    display: block; /* 确保占据整行 */
    text-align: center; /* 文字水平居中 */
    font-size: 18px;
    font-weight: 800;
    margin: 0 auto 1.5rem; /* 上下边距 + 水平居中 */
    color: #1e293b;
    border-bottom: 2px solid #60a5fa;
    padding-bottom: 0.5rem;
    position: relative;
    max-width: 80%; /* 控制宽度避免拉伸 */
    line-height: 1.3; /* 优化垂直居中 */
}

/* 段落（仅限直接子元素） */
div.jieqi_hanyi > p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    color: #475569;
}

/* 季节标题（精确层级控制） */
div.jieqi_hanyi > jijie {
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #2c3e50;
    display: flex;
    align-items: center;
}

div.jieqi_hanyi > jijie::before {
    content: '';
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-color: #3b82f6;
    border-radius: 50%;
    margin-right: 0.75rem;
}

/* 列表系统（严格限定） */
div.jieqi_hanyi > ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

div.jieqi_hanyi > ul > li {
    width: calc(50% - 0.5rem);
    font-size: 1rem;
    line-height: 1.6;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background-color: #f8fafc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

div.jieqi_hanyi > ul > li:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

div.jieqi_hanyi > ul > li strong {
    color: #1e40af;
    font-weight: 600;
}

/* 顺口溜部分 */
div.jieqi_shunkouliu {
    margin-top: 2rem;
    text-align: center;
    padding: 1.5rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

div.jieqi_shunkouliu > tr {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 1.25rem;
    color: #1e293b;
}

div.jieqi_shunkouliu p {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #334155;
    margin: 0.5rem 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
    div.jieqi_hanyi > ul > li {
        width: 100%;
    }
    
    div.jieqi_hanyi > h3:first-child {
        font-size: 1.75rem;
    }
    
    div.jieqi_hanyi > h4 {
        font-size: 1.25rem;
    }
    
    div.jieqi_shunkouliu > tr {
        font-size: 1.5rem;
    }
}
/* 24节气内容页结束 */

    /* 24节气倒计时 */
    .jieqi-countdown {
        width: 100%;
        height: 80px; /* 增加高度以适应更多内容 */
        background: #ffffff;
        border-radius: 1px;
        border: 0px solid #e0e0e0; /* 整体边框颜色 */
        border-top: 2px solid #e74c3c; /* 上边框特殊颜色和粗细 */
        box-shadow: 10 2px 8px rgba(0, 0, 0, 0.1);
        padding: 6px;
        box-sizing: border-box;
        font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        text-align: center;
        overflow: hidden;
        margin-top: 2px; /* 与栏目距离控制 */
        transition: all 0.3s ease; /* 悬停动画效果 */
    }

    .jieqi-countdown:hover {
        border-top-color: #c0392b; /* 悬停时上边框颜色加深 */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 悬停时阴影加深 */
    }

    .jieqi-title {
        font-size: 14px;
        color: #666;
        margin-bottom: 2px;
    }

    .jieqi-date {
        font-size: 14px;
        color: #888;
        margin-bottom: 2px;
    }

    .jieqi-timer {
        font-size: 16px;
        font-weight: bold;
        color: #e74c3c;
        letter-spacing: 1px;
    }
    
    /* 节气名称样式 */
    .jieqi-name {
        color: #e74c3c;
    }
    /* 24节气倒计时结束 */


.viewboxsm {
    margin: 3px 0px 2px 0px;
    background: #fff;
    border: none;
    border-radius: 2px;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 0 20px rgba(0, 0, 0, 0.05) inset;
}

.viewboxsm::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: radial-gradient(ellipse at center, rgb(255 0 0 / 80%) 0%, rgba(255, 255, 255, 0) 70%);
    transform: perspective(50px) rotateX(30deg);
    transform-origin: top;
    z-index: 1;
}
.mainnav {margin:20px 20px;}
.mainnav ul {padding-left:8px;font-size:14px;border-bottom:1px solid #FFE3CA;overflow:hidden;}
.mainnav ul li{list-style:none;float:left;border-top:1px solid #FFE3CA;border-left:1px solid #FFE3CA;border-right:1px solid #FFE3CA;border-radius:4px 4px 0 0;line-height:28px;height:28px;margin-right:10px;text-align:center;padding:0 10px;color:#000;background-color:#FFF2E8;}
.mainnav ul li.on{background-color:#FFE3CA;}
.mainnav ul li.on a{color:red;font-weight:bold;}

/* 姓氏历史介绍开始 */
.viewbox .lishi {
  margin: 15px auto; /* 上下边距20px，左右自动居中 */
  padding: 20px; /* 内边距25px */
  max-width: 100%; /* 最大宽度限制 */
  color: #4a4a4a; /* 文字颜色 */
  font-size: 16px; /* 基础字体大小 */
  line-height: 1.8; /* 行高1.8倍 */
  text-align: justify; /* 两端对齐 */
  background: linear-gradient(to bottom, #ffffff, #f8f9fa); /* 白色渐变背景 */
  border-radius: 2px; /* 圆角0px */
  box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* 阴影效果 */
  transition: all 0.3s ease; /* 过渡动画效果 */
}

.viewbox .lishi:hover {
  box-shadow: 0 6px 16px rgba(0,0,0,0.1); /* 悬停时阴影加深 */
  transform: translateY(0px); /* 悬停时轻微上移 */
}

.viewbox .lishi p {
  margin-bottom: 16px; /* 段落下边距 */
  line-height: 1.9; /* 段落行高 */
  text-indent: 2em; /* 首行缩进2字符 */
  position: relative; /* 相对定位 */
}

.viewbox .lishi p:last-child {
  margin-bottom: 0; /* 末段取消下边距 */
  color: #666; /* 末段文字颜色变浅 */
}

/* 响应式设计 */
@media (max-width: 768px) {
  .viewbox .lishi {
    margin: 15px; /* 小屏幕边距调整 */
    padding: 20px; /* 小屏幕内边距调整 */
    font-size: 15px; /* 小屏幕字体缩小 */
  }
}
/* 姓氏历史介绍结束 */

/* 黄历术语开始 */
.listboxshuyu {
    margin: 5px auto;
    max-width: 100%;
    background: #fff;
    border: 1px solid #d4c9bb;
    border-radius: 1px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    font-family: "Microsoft YaHei", sans-serif;
}

.listboxshuyu .title {
    height: 45px;
    line-height: 45px;
    border-bottom: 1px solid #e5dcd1;
    background: linear-gradient(to right, #f8f3ed, #f0e6d8);
    padding: 0 12px;
}

.listboxshuyu .title h2 {
    float: left;
    font-size: 18px;
    color: #8c4e1a;
    font-weight: bold;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
    margin: 0;
}

.listboxshuyu .title h2 span {
    color: #d14343;
    font-size: 22px;
    margin-right: 1px;
}

.listboxshuyu .content {
    padding: 0;
}

.listboxshuyu .content p {
    margin: 0;
    padding: 12px 15px;
    border-bottom: 1px solid #f0eae2;
    color: #555;
    font-size: 15px;
    line-height: 1.5;
    transition: all 0.2s ease;
}

.listboxshuyu .content p:nth-child(odd) {
    background-color: #fbf9f7;
}

.listboxshuyu .content p:nth-child(even) {
    background-color: #f5f1ec;
}

.listboxshuyu .content p:hover {
    background-color: #f0e6d8;
    color: #8c4e1a;
}

.listboxshuyu .content p:last-child {
    border-bottom: none;
}

.listboxshuyu .content p strong {
    color: #b74a4a;
    font-weight: normal;
}
/* 黄历术语结束 */

/* 生肖查询开始 */
.contentsxcx {
    font-family: "Microsoft YaHei", "Segoe UI", Arial, sans-serif; /* 设置首选字体族 */
    line-height: 1.6; /* 设置行高为1.6倍 */
    color: #333; /* 设置文字颜色为深灰色 */
    max-width: 580px; /* 设置最大宽度为580px */
    margin: 10px auto; /* 上下边距20px，水平居中 */
    padding: 20px; /* 内边距20px */
    background-color: #f9f9f9; /* 设置浅灰色背景 */
    border-radius: 1px; /* 设置1px圆角 */
    box-shadow: 10 2px 10px rgba(0, 0, 0, 0.1); /* 添加轻微阴影效果 */
}

.contentsxcx p {
    margin-bottom: 15px; /* 段落底部间距15px */
    text-align: justify; /* 文本两端对齐 */
}

.contentsxcx .red {
    color: #e74c3c; /* 设置红色文字 */
    font-weight: bold; /* 文字加粗 */
}

.contentsxcx font[color="#ff0000"] {
    font-size: 18px; /* 设置18px字号 */
    display: block; /* 块级显示 */
    margin-bottom: 20px; /* 底部间距20px */
    padding-bottom: 10px; /* 底部内边距10px */
    border-bottom: 1px solid #eee; /* 底部1px浅灰色边框 */
}

.contentsxcx .fright {
    float: right; /* 向右浮动 */
    margin-left: 20px; /* 左侧外边距20px */
    margin-bottom: 15px; /* 底部外边距15px */
}

.contentsxcx .p10 {
    padding: 5px; /* 内边距5px */
    background: white; /* 白色背景 */
    border: 1px solid #ddd; /* 1px浅灰色边框 */
    border-radius: 4px; /* 4px圆角 */
}

.contentsxcx b {
    color: #2c3e50; /* 深蓝色文字 */
    font-size: 17px; /* 17px字号 */
    display: block; /* 块级显示 */
    text-align: center; /* 文字居中 */
    margin-bottom: 15px; /* 底部间距15px */
}

.contentsxcx a {
    color: #3498db; /* 蓝色链接 */
    text-decoration: none; /* 去除下划线 */
    transition: color 0.3s; /* 颜色变化过渡效果0.3秒 */
}

.contentsxcx a:hover {
    color: #2980b9; /* 悬停时深蓝色 */
    text-decoration: underline; /* 悬停时显示下划线 */
}


/* 强调文本 */
.contentsxcx .red, 
.contentsxcx .red strong {
    color: #c7254e;
    font-weight: 700;
    padding: 0 3px;
    position: relative;
}

.contentsxcx .red::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #c7254e, transparent);
}

/* 响应式调整 */
@media (max-width: 600px) {
    .contentsxcx .fright {
        float: none; /* 取消浮动 */
        display: block; /* 块级显示 */
        margin: 0 auto 15px; /* 水平居中，底部间距15px */
    }
    
    .contentsxcx {
        padding: 15px; /* 内边距调整为15px */
    }
}
/* 生肖查询结束 */

.gongan-beian-icon {
    display: inline-block;
    vertical-align: middle;
    margin: 0 2px;
    width: auto; 
    height: 18px; 
}