blockquote,body,button,code,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,img,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}body{background:url() center top no-repeat;background-color:#79d1f9;overflow:hidden;color:#555;font-size:13px;font-family:microsoft yahei,Simsun,Tahoma}caption,td,th{font-size:14px}h1,h2,h3,h4,h5,h6{font-weight:400;font-size:100%}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}a{color:#000;text-decoration:none}a:hover{text-decoration:none}img{border:none}li,ol,ul{list-style:none}button,input,select,textarea{font-size:14px}table{border-collapse:collapse}html{overflow-y:scroll}#container{width:1200px;margin:0 auto;margin-top:10px}
.nav{width:100%;margin-bottom:10px;border-radius:6px;overflow:hidden;box-shadow:0 0 20px 6px rgba(0,0,0,.12),0 0 20px 6px rgba(0,0,0,.12)}
.nav li{float:left;text-align:center;display:block;width:120px;height:40px;line-height:40px;background:#55555540;font-weight:700;font-size:20px;transition:color .5s,background-color .5s;text-shadow:.1em .1em .1em #000;overflow:hidden}
.nav li:hover{color:#fff;background:#ff6ea1}.toptips{width:100%;background:#fff;margin-bottom:2px;border-radius:6px 6px 0 0;overflow:hidden;box-shadow:0 0 20px 6px rgba(0,0,0,.12),0 0 20px 6px rgba(0,0,0,.12)}.toptips li{float:left;position:relative;display:block;width:100%;height:40px;line-height:40px;font-size:14px;color:red;overflow:hidden}.toptips li b{width:16px;height:16px;font-weight:700;background:#43a9e4;color:#fff;padding:2px 8px;margin-left:4px;font-size:13px;border-radius:2px}.good{width:100%;background:#fff;margin-bottom:5px;border-radius:0 0 6px 6px;overflow:hidden;box-shadow:0 0 20px 6px rgba(0,0,0,.12),0 0 20px 6px rgba(0,0,0,.12)}
.good li{float:left;text-align:center;display:block;width:150px;height:40px;line-height:40px;font-size:14px;transition:color .5s,background-color .5s;overflow:hidden}.good li:hover{color:#fff;background:#ff6ea1}.cate{width:100%;background:#fff;margin-bottom:10px;border-radius:6px;overflow:hidden;box-shadow:0 0 20px 6px rgba(0,0,0,.12),0 0 20px 6px rgba(0,0,0,.12)}.cate_name{height:40px;width:100%;background:#f7f7f7;overflow:hidden}.cate .pink{background:#fd6ea3}.cate .red{background:#c52622}.cate .green{background:#23be9b}.cate .yellow{background:#fcc800}.cate .gray{background:#788daa}.cate .orange{background:#f76e25}.cate .black{background:#333}.cate_name p{font-size:16px;font-weight:700;line-height:40px;color:#000;margin-left:20px}.cate li{float:left;text-align:center;display:block;width:119px;height:40px;line-height:40px;border-right:1px solid #e6e6e6;border-bottom:1px solid #e6e6e6;font-size:14px;transition:color .5s,background-color .5s;overflow:hidden}.cate li:hover{color:#fff;background:#ff6ea1}.cate li b{width:16px;height:16px;font-weight:400;background:#2cbafc;color:#fff;padding:1px 3px;margin-left:4px;font-size:12px;border-radius:2px}.cate_ul{margin:0 auto;position:relative;max-width:960px}.cate_img{margin-left:8px;width:48px;height:48px}.banner img{width:100%;margin-bottom:5px;transition:opacity .5s;border-radius:6px}.banner img:hover{opacity:.7}.footerapp img{width:100%;margin-bottom:-8px;transition:opacity .5s}.footerapp img:hover{opacity:.7}.footer{border-radius:6px 6px 0 0;height:auto;margin-bottom:0;opacity:.7}
.footer p{text-align:center;line-height:40px;color:#333}.footer p a{color:#333}.clear{clear:both;height:0}.side{position:fixed;bottom:10px;width:66px;left:50%;margin-left:606px}
.side_div{width:66px;height:32px;line-height:32px;text-align:center;color:#fff;margin-top:3px;background:#3e3939;border-radius:5px}.faq{position:fixed;bottom:10px;width:70px;right:50%;margin-right:606px}.faq_scj{width:66px;height:66px;line-height:32px;text-align:center;color:#fff;margin-top:1px}.faq_div{width:66px;height:32px;line-height:32px;text-align:center;color:#fff;margin-top:3px;background:#3e3939;border-radius:5px}
.xm{position:fixed;bottom:0;left:initial;right:0;z-index:1;font-size:0;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-transform:translateY(3px);-ms-transform:translateY(3px);transform:translateY(3px)}
.xm img{width:100px}#scj{background:url(../img/scj.png)}#top{background:url(../img/top.jpg)}#dizhi{background:url(../img/dizhi.jpg)}#guestbook{text-align:center;line-height:32px;transition:background-color .3s}#guestbook:hover{background:#fd6ea3}.btn{padding:0;margin:0}
.app{box-shadow:0 0 15px rgba(100,100,100,.1);overflow:hidden;border-radius:2px;background-color:#fff}.navi{font-size:0;padding:5px}.appico{width:calc(10% - 10px);margin:0;height:auto;box-sizing:border-box;display:inline-block;position:relative}
.appico p{width:100%;height:25px;line-height:14px;text-align:center;font-size:12px;margin:0;color:#000;overflow:hidden}
.naicon{border-radius:10px;overflow:hidden;font-size:0;margin:3px}
.appico img{width:100%}.appico:hover .btn-raised{-webkit-box-shadow:0 0 12px 4px rgba(0,0,0,.24),0 0 2px -2px rgba(0,0,0,.4),0 1px 12px 0 rgba(0,0,0,.22);box-shadow:0 0 12px 4px rgba(0,0,0,.24),0 0 2px -2px rgba(0,0,0,.4),0 1px 12px 0 rgba(0,0,0,.22)}
@media screen and (max-width:1200px){.side{display:none}.faq{display:none}.xm{display:none}}
@media screen and (max-width:960px){body{background-size:150%}#container{width:98%;margin-top:1%}
.nav li{width:20%;margin-right:-2px;height:35px;line-height:35px}
.toptips li{width:100%;margin-right:-2px;height:35px;line-height:35px}
.good li{width:25%;height:35px;line-height:35px}
.cate li{width:20%;margin-right:-1px;height:35px;line-height:35px}
.cate_name{height:35px}.cate_name p{font-size:21px;line-height:35px}
.appico{width:calc(22% - 10px)}}
@media screen and (max-width:800px){.nav li{font-size:15px;height:30px;line-height:30px}.toptips li{font-size:14px;height:auto;line-height:30px}.good li{font-size:15px;height:30px;line-height:30px}.cate li{font-size:15px;height:30px;line-height:30px}.cate_name{height:30px}.cate_name p{font-size:20px;line-height:30px}}@media screen and (max-width:640px){.nav li{width:25%;font-size:12px;height:30px;border:1px solid #79d1f9;line-height:30px}.toptips li{width:100%;font-size:12px;height:auto;line-height:30px}.good li{width:25%;font-size:11px;height:30px;line-height:30px}.cate li{width:25%;font-size:11px;height:30px;line-height:30px}.cate_name{height:30px}.cate_name p{font-size:17px;line-height:30px}.cate li b{width:16px;height:16px;font-weight:400;background:#2cbafc;color:#fff;padding:2px 3px;margin-left:4px;font-size:11px;border-radius:2px}}

/* 1. 容器处理：让 a 标签包裹住内部元素，并作为角标的参考坐标 */
.cate a {
    position: relative; /* 必须：给角标一个定位参考点 */
    display: block;
    float: left;
    width: 119px; /* 匹配你 li 的宽度 */
    text-decoration: none;
}

/* 2. 恢复 li 的原始样式：确保文字绝对居中 */
.cate a li {
    width: 119px !important;
    text-align: center !important; /* 强制居中 */
    padding: 0 !important;        /* 彻底清除避让空间 */
    margin: 0 !important;
    float: none !important;        /* 由父级 a 负责浮动 */
    display: block;
}

/* 3. 角标处理：像贴纸一样贴在右上角，不占位置 */
.cate a b {
    position: absolute !important; /* 核心：绝对定位脱离文档流 */
    top: 0 !important;            /* 贴顶 */
    right: 0 !important;          /* 贴右 */
    
    background: #ff0000;          /* 红色背景 */
    color: #fff !important;       /* 白色文字 */
    font-size: 10px;              /* 角标文字小一点 */
    padding: 0 3px;               /* 左右留点边距 */
    height: 14px;
    line-height: 14px;
    
    border-radius: 0 0 0 5px;     /* 左下角圆角 */
    z-index: 100;                 /* 确保浮在最上层 */
    font-weight: normal;
    white-space: nowrap;          /* 防止文字换行 */
    
    /* 呼吸闪烁动画 */
    animation: badge-blink 1.2s infinite ease-in-out;
}
/* 绿色：免费风格 */
.cate a b.free {
    background: #23be9b; /* 这是一个非常漂亮的亮绿色 */
    animation: badge-blink-green 1.2s infinite ease-in-out;
}
/* 4. 闪烁动画定义 */
@keyframes badge-blink {
    0%, 100% { opacity: 1; filter: brightness(1); }
    50% { opacity: 0.8; filter: brightness(1.3); }
}
/* 土豪金风格样式 */
.cate a b.gold {
    background: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c) !important;
    color: #5d4000 !important; /* 金色配深啡色文字比白色更高档 */
    font-weight: bold !important;
    animation: badge-blink-gold 1.5s infinite linear !important;
    box-shadow: 0 0 2px rgba(179, 135, 40, 0.5);
}

/* 土豪金光泽流动动画 */
@keyframes badge-blink-gold {
    0% { filter: brightness(1) contrast(1.2); }
    50% { filter: brightness(1.3) contrast(1.5); box-shadow: 0 0 8px #ffd700; }
    100% { filter: brightness(1) contrast(1.2); }
}
/* 5. 手机端适配：保持比例 */
@media screen and (max-width: 640px) {
    .cate a { width: 25%; }
    .cate a li { width: 100% !important; }
}