/* ===== Reset & Base ===== */
html,body,div,span,h1,h2,h3,h4,h5,h6,p,a,ul,li,em { margin: 0; padding: 0; }
* { box-sizing: border-box; }
body { color: #333; background: #f0f0f0; font: 14px/1.5 "Microsoft Yahei", Arial, sans-serif; }
h2 { font-weight: normal; }
em { font-style: normal; }
li { list-style: none; }
a { color: #333; text-decoration: none; }
a:hover { color: #01a0e2; }

/* ===== Layout ===== */
.w1200 { width: 1200px; margin: 0 auto; }
.clearfix::after { content: ""; display: table; clear: both; }

/* ===== Header: 搜索框 ===== */
.header .search { float: right; margin-top: 22px; }
.header .search input[type="text"] {
    width: 180px; height: 36px; padding: 0 10px; border: none; border-radius: 4px 0 0 4px;
    background: #555; color: #fff; font-size: 13px; outline: none; vertical-align: top;
}
.header .search input[type="text"]::placeholder { color: #aaa; }
.header .search input[type="button"] {
    width: 40px; height: 36px; border: none; border-radius: 0 4px 4px 0;
    background: #01a0e2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398l3.85 3.85a1 1 0 0 0 1.415-1.415l-3.868-3.833zm-5.242 1.156a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11z'/%3E%3C/svg%3E") center no-repeat;
    cursor: pointer; vertical-align: top;
}

/* ===== Header ===== */
.header { width: 100%; background: #333; box-shadow: 0 0 10px rgba(0,0,0,.4); }
.header .w1200 { height: 82px; overflow: hidden; }
.header .logo { display: block; float: left; width: 210px; height: 74px; margin-top: 4px;
                background: url(/static/pc/images/pc-logo.png) no-repeat left center; background-size: contain; }
.header .nav { float: left; margin: 14px 0 0 60px; }
.header .nav a { display: inline-block; float: left; font-size: 16px; color: #b9dcff;
                 height: 54px; line-height: 54px; padding: 0 15px; margin-right: 20px; }
.header .nav a:hover { color: #fff; }

/* ===== About: 侧边导航 + 内容 ===== */
.about { width: 1200px; margin: 30px auto; display: flex; gap: 20px; align-items: flex-start; }

.about > .nav { width: 160px; flex-shrink: 0; background: #fff; border-radius: 6px;
                box-shadow: 0 1px 4px rgba(0,0,0,.08); padding: 10px 0; }
.about > .nav li a { display: flex; align-items: center; gap: 10px; padding: 13px 20px;
                     color: #555; font-size: 14px; border-left: 3px solid transparent; }
.about > .nav li a:hover,
.about > .nav li a.hover { color: #01a0e2; background: #f0f8ff; border-left-color: #01a0e2; }
.about > .nav li a em { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: #ccc; flex-shrink: 0; }
.about > .nav li a.hover em,
.about > .nav li a:hover em { background: #01a0e2; }

.about > .intro { flex: 1; background: #fff; border-radius: 6px;
                  box-shadow: 0 1px 4px rgba(0,0,0,.08); padding: 30px 35px; }
.about > .intro h2 { font-size: 20px; font-weight: 600; color: #333;
                     margin-bottom: 18px; padding-bottom: 12px; border-bottom: 2px solid #01a0e2; }
.about > .intro p { line-height: 2; color: #555; margin-bottom: 10px; }

/* ===== Footer ===== */
.footer { background: #333; color: #ddd; margin-top: 30px; }
.footer .w1200 { padding: 35px 0; line-height: 34px; text-align: center; }
.footer a { color: #ddd; }
.footer a:hover { color: #fff; }
.footer span { color: #01a0e2; }