* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif; font-size: 14px; color: #333; background: #f5f5f5; -webkit-tap-highlight-color: transparent; max-width: 750px; margin: 0 auto; }
a { text-decoration: none; color: #333; }
ul, ol, li { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
.clearfix::after { content: ''; display: block; clear: both; }

.HeaerBox { width: 100%; position: relative; z-index: 1000000; }
.HeaerBox:before { content: ''; display: block; padding-top: 50px; }
.HeaerBox .infos { position: fixed; width: 100%; left: 0; top: 0; }
.HeaerBox .infos:before { content: ''; display: block; padding-top: 50px; background: #32B6CD; }
.HeaerBox .infos li { position: absolute; }
.HeaerBox .infos li.home { width: 50px; height: 50px; overflow: hidden; left: 0; top: 0; background: url('../images/home.png') center center no-repeat; background-size: 65% 60%; cursor: pointer; z-index: 10; }
.HeaerBox .infos li.home a { display: block; width: 50px; height: 50px; }
.HeaerBox .infos li.sitename { width: 100%; height: 50px; left: 0; top: 0; text-align: center; overflow: hidden; z-index: 5; }
.HeaerBox .infos li.sitename a { display: inline-block; line-height: 50px; margin: 0 50px; font-size: 18px; color: #FFF; letter-spacing: 3px; text-decoration: none; }
.HeaerBox .infos li.members { width: auto; height: 50px; overflow: hidden; right: 10px; top: 0; cursor: pointer; z-index: 10; }
.HeaerBox .infos li.members a { display: inline-block; line-height: 50px; color: #fff; font-size: 14px; padding: 0 8px; text-decoration: none; }

.BigsortBox { clear: both; height: 45px; position: relative; z-index: 10000; }
.BigsortBox .BoxIn { position: fixed; width: 100%; left: 0; top: 50px; background: #FFF; }
.BigsortBox .BoxIn ul { max-width: 640px; margin: auto; position: relative; border-bottom: #DDD solid 1px; }
.BigsortBox .BoxIn ul ol { position: relative; margin-right: 40px; height: 45px; overflow: hidden; }
.BigsortBox .BoxIn ul ol div span { display: table; height: 45px; }
.BigsortBox .BoxIn ul ol div span a { display: table-cell; vertical-align: middle; padding: 0 15px; white-space: nowrap; color: #666; font-size: 14px; }
.BigsortBox .BoxIn ul ol div span a.ck { color: #D43D3D; }
.BigsortBox .BoxIn ul li { width: 40px; height: 45px; position: absolute; right: 0; top: 0; border-left: #DDD solid 1px; cursor: pointer; }
.BigsortBox .BoxIn ul li span { display: none; }

.MoreSorts { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 2000; background: rgba(0,0,0,0.5); }
.MoreSorts .BackBox { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.MoreSorts dl { position: relative; z-index: 1; background: #fff; border-bottom: 1px solid #eee; }
.MoreSorts dl dt { padding: 12px 15px; }
.MoreSorts dl dt a { color: #333; font-size: 15px; }
.MoreSorts .exit { position: relative; z-index: 1; text-align: center; padding: 15px; background: #fff; }
.MoreSorts .exit span { color: #32B6CD; font-size: 16px; cursor: pointer; }

.MainContainerBox { margin-top: 0; padding-bottom: 80px; }
.MainSlideBox { margin-top: 0; overflow: hidden; }
.SlideBox { position: relative; width: 100%; overflow: hidden; background: #eee; }
.SlideBox .slideimgs ul { position: relative; display: flex; transition: transform 0.3s ease; }
.SlideBox .slideimgs ul li { flex-shrink: 0; width: 100%; height: 180px; overflow: hidden; }
.SlideBox .slideimgs ul li a { display: block; width: 100%; height: 100%; }
.SlideBox .slideimgs ul li img { width: 100%; height: 100%; object-fit: cover; }
.SlideBox .listnum { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; }
.SlideBox .listnum li { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.5); margin: 0 3px; }
.SlideBox .listnum li.ck { background: #32B6CD; }
@media (min-width: 480px) {
    .SlideBox .slideimgs ul li { height: 220px; }
}
@media (min-width: 768px) {
    .SlideBox .slideimgs ul li { height: 280px; }
}

.ListConts { padding: 0 10px; }
.ListMorpic { background: #fff; border-radius: 6px; margin-top: 10px; padding: 10px; overflow: hidden; }
.ListMorpic .title { font-size: 15px; font-weight: bold; line-height: 1.5; margin-bottom: 8px; }
.ListMorpic .title a { color: #333; }
.ListMorpic .title a:hover { color: #32B6CD; }
.ListMorpic > a > ul { display: flex; margin: 0 -3px; }
.ListMorpic > a > ul > li { flex: 1; padding: 0 3px; }
.ListMorpic > a > ul > li span { display: block; overflow: hidden; border-radius: 4px; }
.ListMorpic > a > ul > li span img { width: 100%; height: auto; transition: transform 0.2s; }
.ListMorpic .moreinfo { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: #999; }

.pic_word { display: flex; background: #fff; border-radius: 6px; margin-top: 10px; padding: 10px; }
.pic_word ol { flex-shrink: 0; width: 110px; margin-right: 10px; }
.pic_word ol a { display: block; border-radius: 4px; overflow: hidden; }
.pic_word ol a span { display: block; padding-top: 68.75%; position: relative; }
.pic_word ol a span img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s; }
.pic_word li { flex: 1; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.pic_word li .title { font-size: 15px; line-height: 1.4; font-weight: bold; }
.pic_word li .title a { color: #333; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pic_word li p { font-size: 13px; color: #999; line-height: 1.5; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pic_word li .moreinfo { display: flex; justify-content: space-between; font-size: 12px; color: #bbb; margin-top: 8px; }
.pic_word li .moreinfo dt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.pic_word li .moreinfo dd { flex-shrink: 0; }

.footerSpac { padding: 15px 10px; font-size: 12px; color: #999; line-height: 2; }
.footerSpac a { color: #666; }
.footerSpac span { font-weight: bold; color: #666; }

#copyright { clear: both; width: 100%; padding: 15px 0 60px; text-align: center; line-height: 20px; color: #666; border-top: #DDD solid 1px; }
#copyright a { color: #666; }

footer.footer { position: fixed; bottom: -1px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 750px; z-index: 10000; display: flex; justify-content: center; background: #fff; height: 50px; padding-top: 2px; }
footer.footer div { width: 20%; height: 45px; position: relative; flex-shrink: 0; }
footer.footer div a { display: block; width: 100%; color: #555; padding-top: 30px; line-height: 25px; font-size: 12px; text-align: center; text-decoration: none; }
footer.footer div a:hover { color: #555; }
footer.footer div a:active { color: #555; }
footer.footer div a:visited { color: #555; }
footer.footer div a.site-1 { background: url('../images/site-1.png') center 5px no-repeat; background-size: 30px 30px; }
footer.footer div a.image-0 { background: url('../images/image-0.png') center 5px no-repeat; background-size: 30px 30px; }
footer.footer div a.book-0 { background: url('../images/book-0.png') center 5px no-repeat; background-size: 30px 30px; }
footer.footer div a.joke-0 { background: url('../images/joke-0.png') center 5px no-repeat; background-size: 30px 30px; }

footer.footer div a.home-1 {
    width: 60px; height: 60px; padding: 0;
    background: #ff3300;
    margin: -24px auto 0 auto;
    position: relative; border-radius: 50%;
    line-height: normal;
}
footer.footer div a.home-1:before {
    content: '';
    display: block;
    position: absolute;
    width: 80%; height: 80%;
    left: 10%; top: 10%;
    background: #FFF url('../images/home-1.png') center center no-repeat;
    background-size: 70% 70%;
    border-radius: 50%;
}

.ShowMoreArtic { text-align: center; padding: 20px; color: #999; font-size: 13px; }

.MiddleAdBox { margin-top: 10px; border-radius: 6px; overflow: hidden; }
.MiddleAdBox img { width: 100%; }