﻿body .headback {width:5px;padding:0;}
body .headback button {display:None}
.rightranklist {padding:0;}
.rightranklist ul {display:block;font-size:0;}
.rightranklist ul li {display:block;padding:0px 0 0px 28px;position:relative;}
.rightranklist ul li:hover {}
.rightranklist li:after {content:"";display:block;clear:both;height:0;}
.rightranklist .cover {width:36%;height:auto;float:left;margin-right:15px;}
.rightranklist .infos {font-size:1rem;position:relative;height:3rem;line-height:3rem;}
.rightranklist .infos .name {display:block;padding:0px 0;font-size:1.1rem;font-weight:normal;white-space:nowrap;overflow:hidden;max-width:60%;text-overflow:ellipsis;}
.rightranklist .infos .desc {display:block;font-size:.9rem;line-height:1.4rem;height:4.2rem;overflow:hidden;color:#666;}
.rightranklist .infos .listdata {position:absolute;top:50%;height:1rem;line-height:1rem;font-size:.8rem;color:#999;right:0;margin-top:-.5rem;}
.rightranklist .infos .listdata .txt b {font-size:.9rem;font-weight:normal;}
.rightranklist .infos .listdata .txt b em {font-style:normal;font-size:1rem;}
.rightranklist li>span.num {display:block;width:20px;height:20px;text-align:center;font-size:1rem;color:#fff;background-color:#bababa;line-height:20px;position:absolute;top:50%;margin-top:-10px;left:0;z-index:1;}
.rightranklist li:first-child {padding:5px 0 5px 0;margin-bottom:10px;border-bottom:0;}
.rightranklist li:first-child>span.num {top:auto;bottom:5px;margin:unset;background-color:#f60;transform:scale(1.25);transform-origin:left bottom;}
.rightranklist li:nth-child(2)>span.num,
.rightranklist li:nth-child(3)>span.num {background-color:#f90;}
.rightranklist li:first-child .infos {height:100%;position:unset;}
.rightranklist li:first-child .infos .listdata {top:auto;margin:unset;padding:10px 0 0 0;bottom:0;margin:auto auto 5px 15px;left:36%;right:auto;}
.rightranklist li:first-child .infos .name {font-size:1.6rem;padding:0px 0 10px 0;}
.topicbox {margin:0 auto;max-width:var(--maxscreenwidth);padding:20px 10px 0 10px;}
@media screen and (min-width:768px){
    @keyframes topic {0%{transform: translateX(0%);}30%{transform: translateX(0%);}33%{transform: translateX(-100%);}63%{transform: translateX(-100%);}66%{transform: translateX(-200%);}97%{transform: translateX(-200%);}100%{transform: translateX(0%);}}
}
@media screen and (max-width:768px){
    @keyframes topic {
        0%{transform: translateX(0%);}
        10%{transform: translateX(0%);}
        11%{transform: translateX(-11.11%);}
        21%{transform: translateX(0%);}
        22%{transform: translateX(-22.22%);}
        32%{transform: translateX(0%);}
        33%{transform: translateX(-33.33%);}
        43%{transform: translateX(0%);}
        44%{transform: translateX(-44.44%);}
        100%{transform: translateX(0%);}
    }
}
.topicbanner { display: block; width: auto; margin: 0 -10px; padding:0px;overflow:hidden;}
.topicbanner ul { font-size: 0; display: block;white-space:nowrap;width:auto;position:relative;transition: all 0.5s;transform: translateX(0%);padding-bottom:30px;}
.topicbanner.li1 ul {transform: translateX(0%);}
.topicbanner.li2 ul {transform: translateX(-100%);}
.topicbanner.li3 ul {transform: translateX(-200%);}
.topicbanner ul li { display: inline-block; vertical-align: top; width: 33.33%; box-sizing: border-box; padding:5px  10px 0 10px; }
.topicbanner ul li a { display: block; border: 1px solid #ddd; border-radius: 0px; overflow: hidden; background-color: #fff;position:relative;}
.topicbanner ul li a:hover { box-shadow: 0 4px 15px rgba(0,0,0,0.1) }
.topicbanner ul li a:hover h3 { color: var(--color-main) }
.topicbanner ul li a h3 { display: block; padding: 15px 0px 12px 15px; text-align: left; font-size: 16px; position: relative; line-height: 100%;border-right:30px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
html.novel .topicbanner ul li a h3 {color:#333;}
.topicbanner ul li a:after { content: ""; display: block; width: 6px; height: 6px; border-top: 2px solid #ccc; border-right: 2px solid #ccc; position: absolute; bottom:17px; right: 10px;transform: rotate(45deg) }
.topicnav {display:block;font-size:0;text-align:center;position:absolute;left:0;bottom:0;width:100%;height:auto;}
.topicnav>div {display:inline-block;width:auto;}
.topicnav span {display:inline-block;vertical-align: top;width:20px;height:20px;}
.topicnav span button {display:block;width:20px;height:20px;border:0;background-color:transparent;opacity:1;}
.topicnav span button:after {content:"";display:block;width:10px;height:10px;margin:5px;border-radius:50%;background-color:#ddd;}
.topicbanner.li1 .topicnav span.tbn1 button:after,
.topicbanner.li2 .topicnav span.tbn2 button:after,
.topicbanner.li3 .topicnav span.tbn3 button:after,
.topicbanner.li4 .topicnav span.tbn4 button:after,
.topicbanner.li5 .topicnav span.tbn5 button:after,
.topicbanner.li6 .topicnav span.tbn6 button:after,
.topicbanner.li7 .topicnav span.tbn7 button:after,
.topicbanner.li8 .topicnav span.tbn8 button:after,
.topicbanner.li9 .topicnav span.tbn9 button:after
{background-color:var(--color-main);opacity:1;}
@media screen and (max-width:1280px) {
.rightranklist li:first-child .infos .name {font-size:1.5rem;}
}
@media screen and (max-width:980px) {
.rightranklist .infos {height:auto;line-height:1.5rem;}
.rightranklist .infos .name {max-width:100%;}
.rightranklist li>span.num {top:5px;margin-top:0;}
.rightranklist .infos .listdata .txt b {font-size:.8rem;}
.rightranklist .infos .listdata {top:auto;right:auto;margin:0;position:relative;}
.rightranklist li:first-child .infos .listdata {right:unset;left:36%;margin:0 0 0 15px;position:absolute;}
.rightranklist ul li {padding:5px 0 10px 28px;}
.rightranklist li:first-child .infos .name {font-size:1.3rem;}
}
@media screen and (max-width:767px) {
.rightranklist li:first-child .infos .name {font-size:1.3rem;height:2.6rem;line-height:1.3rem;white-space:normal;overflow:hidden;}
.rightranklist .infos .listdata .txt {}
.rightranklist .infos .listdata .txt:before {content:"NEW";display:inline-block;width:auto;height:16px;font-size:10px;color:#fff;background-color:var(--color-main);border-radius:3px;padding:0 3px;line-height:16px;margin-right:4px;font-weight:bold;display:none;}
.topicbox {padding-top:10px;}
.topicbox amp-script {height:auto;}
.topicbanner ul {width:900%;}
.topicbanner ul li {width:11.11%;}
.topicbanner.li1 ul {transform: translateX(0%);}
.topicbanner.li2 ul {transform: translateX(-11.11%);}
.topicbanner.li3 ul {transform: translateX(-22.22%);}
.topicbanner.li4 ul {transform: translateX(-33.33%);}
.topicbanner.li5 ul {transform: translateX(-44.44%);}
.topicbanner.li6 ul {transform: translateX(-55.55%);}
.topicbanner.li7 ul {transform: translateX(-66.66%);}
.topicbanner.li8 ul {transform: translateX(-77.77%);}
.topicbanner.li9 ul {transform: translateX(-88.88%);}
.topicnav span, .topicnav span button {width:30px;height:30px;}
.topicnav span button:after {width:10px;height:10px;margin:10px 5px;background-color:#eee;}
.topicbanner.li1 .topicnav span.tbn1 button:after,
.topicbanner.li2 .topicnav span.tbn2 button:after,
.topicbanner.li3 .topicnav span.tbn3 button:after,
.topicbanner.li4 .topicnav span.tbn4 button:after,
.topicbanner.li5 .topicnav span.tbn5 button:after,
.topicbanner.li6 .topicnav span.tbn6 button:after,
.topicbanner.li7 .topicnav span.tbn7 button:after,
.topicbanner.li8 .topicnav span.tbn8 button:after,
.topicbanner.li9 .topicnav span.tbn9 button:after
{width:16px;height:16px;margin:7px 2px;}
}