/* ============================================================
 * 生肖网 公共样式 common.css
 * 包含：reset、字体、顶栏、Banner、导航、面包屑、Section、Footer
 * ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"STKaiti","KaiTi","STSong","SimSun",serif;
  background:#fdf6e3 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><path d='M0 30 Q15 15 30 30 T60 30' stroke='%23e6c98a' fill='none' opacity='.25'/></svg>");
  color:#3a2b1a;
  line-height:1.85;
}
a{color:#8b0000;text-decoration:none}
a:hover{color:#c0392b;text-decoration:underline}
img{max-width:100%;height:auto;border:0}

/* 通用容器 */
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}

/* 顶部信息条 */
.topbar{background:#8b0000;color:#f5e9c8;font-size:13px;padding:6px 0}
.topbar .wrap{display:flex;justify-content:space-between;flex-wrap:wrap}
.topbar a{color:#f5e9c8;margin:0 6px}
.topbar a:hover{color:#fff}

/* 主 Banner */
header.banner{
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><path d='M0 40 Q20 20 40 40 T80 40' stroke='%23d4a017' fill='none' opacity='.22'/></svg>"),
    linear-gradient(180deg,#c0392b,#8b0000);
  color:#fff7d6;text-align:center;
  padding:36px 16px;
  border-bottom:4px double #d4a017;
  position:relative;
}
header.banner::before,
header.banner::after{
  content:"";position:absolute;top:50%;width:80px;height:2px;
  background:linear-gradient(90deg,transparent,#d4a017,transparent);
  transform:translateY(-50%);pointer-events:none;
}
header.banner::before{left:6%}
header.banner::after{right:6%}
header.banner h1{
  font-size:38px;letter-spacing:6px;margin-bottom:8px;
  text-shadow:0 2px 0 #5a0e0e;position:relative;z-index:1;
}
header.banner p,header.banner .date{font-size:16px;color:#f9e9b5;position:relative;z-index:1}
.brand-logo{height:54px;display:inline-block;margin-bottom:12px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
.zx-search{
  margin:18px auto 0;max-width:520px;display:flex;
  background:rgba(255,247,214,.95);
  border:2px solid #d4a017;border-radius:30px;
  overflow:hidden;position:relative;z-index:1;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
}
.zx-search input{
  flex:1;border:none;outline:none;background:transparent;
  padding:10px 18px;font-size:15px;font-family:inherit;color:#5a2a1a;
}
.zx-search input::placeholder{color:#a8896a}
.zx-search button{
  background:#8b0000;color:#fff7d6;border:none;
  padding:0 24px;font-family:inherit;font-size:15px;letter-spacing:4px;
  cursor:pointer;
}
.zx-search button:hover{background:#5a0e0e}
.zx-result{
  max-width:520px;margin:8px auto 0;
  background:#fffbe9;border:1px solid #e6c98a;border-radius:8px;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
  position:relative;z-index:2;text-align:left;
  max-height:340px;overflow:auto;
}
.banner-seal{
  width:100px;height:100px;
  display:block;margin:0 auto 14px;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.32));
  position:relative;z-index:1;
  animation:seal-in .6s ease-out;
}
@keyframes seal-in{
  0%{opacity:0;transform:scale(.6) rotate(-12deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}

/* 主导航 */
nav.mainnav{
  background:#fff;border-bottom:2px solid #c9a45c;
  position:sticky;top:0;z-index:9;
}
nav.mainnav ul{display:flex;flex-wrap:wrap;justify-content:center;list-style:none}
nav.mainnav li a{
  display:block;padding:12px 18px;
  color:#5a2a1a;font-size:16px;
}
nav.mainnav li a:hover,
nav.mainnav li a[aria-current="page"]{
  background:#fbeac5;color:#8b0000;text-decoration:none;
}

/* 面包屑 */
.breadcrumb{padding:14px 0;font-size:14px;color:#7a5a3a}
.breadcrumb a{margin:0 4px}

/* 主内容区 */
main{padding:8px 0 40px}
section{
  background:#fffbe9;border:1px solid #e6c98a;border-radius:6px;
  padding:22px 24px;margin-bottom:24px;
  box-shadow:0 2px 0 rgba(212,160,23,.08);
}
h2.section-title{
  font-size:24px;color:#8b0000;
  border-left:6px solid #d4a017;padding-left:12px;
  margin-bottom:16px;letter-spacing:2px;
}

/* FAQ 通用 */
.faq dt{
  font-weight:bold;color:#8b0000;font-size:16px;
  margin-top:14px;padding-left:24px;position:relative;
}
.faq dt::before{
  content:"问";position:absolute;left:0;top:0;
  background:#c0392b;color:#fff;font-size:12px;
  width:18px;height:18px;line-height:18px;text-align:center;border-radius:50%;
}
.faq dd{
  margin:6px 0 0 24px;color:#3a2b1a;
  position:relative;padding-left:24px;
}
.faq dd::before{
  content:"答";position:absolute;left:0;top:0;
  background:#d4a017;color:#fff;font-size:12px;
  width:18px;height:18px;line-height:18px;text-align:center;border-radius:50%;
}

/* 友情链接 */
.friend-links{font-size:14px}
.friend-links a{margin-right:14px;display:inline-block;padding:2px 0}

/* 标签云 */
.tag a{
  display:inline-block;background:#fbeac5;color:#8b0000;
  padding:3px 10px;border-radius:12px;font-size:13px;margin:3px 4px 3px 0;
}
.tag a:hover{background:#c0392b;color:#fff;text-decoration:none}

/* Footer */
footer{
  background:#5a0e0e;color:#f5e9c8;text-align:center;
  padding:18px 16px;font-size:13px;line-height:2;
}
footer a{color:#f9e9b5;margin:0 6px}
footer a:hover{color:#fff}

/* 响应式 */
@media(max-width:768px){
  header.banner h1{font-size:26px;letter-spacing:3px}
  section{padding:16px}
  h2.section-title{font-size:20px}
  nav.mainnav li a{padding:10px 12px;font-size:14px}
}