@charset "UTF-8";

/* 首页头部 */
html,body{height:100%;width:100%;}
body { position: relative; background: #f0f0f0; }
body::-webkit-scrollbar { width: 0px; }
.inner{width:1360px;margin:0 auto;box-sizing: border-box;}
.container{margin-top:52px;width:100%;min-width: 1108px;position: relative;}
.container-wrapper{background-color:#000;}
.container-bj{position: absolute;left:0;top:0;height:100%;width:100%;background:url(https://dn-18jdm.qbox.me/image/index/video-bg.jpg) no-repeat center bottom;}
.container-bj video{object-fit: fill;position: absolute;right: 0;bottom: 0;min-width: 100%;min-height: 100%;background-size: cover;overflow: hidden;}
.popularity, .popularity-wrapper, .popularity-wrapper-content, .comic_bg, .logo, .popularity-nav, .popularity-nav li, .popularity-nav a p, .popularity-nav a span{-webkit-transition:all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;transition:all 0.3s;}
.popularity .popularity-wrapper{padding-top:30px;}
.popularity .popularity-wrapper-content{position: relative;}
.popularity .logo{position:absolute;}
.popularity .logo img{height:100%}
.popularity .logo-large{height:67px;left:48px;top:3px;}
/*.popularity .logo-small{opacity:0;width:100px;top:2px;}*/
.popularity .popularity-nav{padding-left:310px;background:#292929;border: 1px solid #3b3b3b;}
.popularity .popularity-nav li{float:left;}
.popularity .popularity-nav .nav_item{display: block;box-sizing: border-box;text-align: center;color:#bebebe;border-left:1px solid #3b3b3b;border-right:1px solid #000;font-size:10px;}
.popularity .popularity-nav li.last .nav_item{border-right:none;}
.popularity .popularity-nav .nav_item p{font-size:1.4em;line-height:1;padding-top:17px;}
.popularity .popularity-nav .nav_item span{display: block;line-height:1;padding:12px 0 14px 0;font-size:1.4em;white-space: nowrap;}
.comic_cover{padding-top:37.7%;border-top:none;overflow: hidden;height:0;}
.popularity .popularity-nav li .comic_bg{display: block;width: 100%;visibility: hidden;position: absolute;left: 0;overflow: hidden;}
.popularity .popularity-nav li .comic_bg:before{content:'';display: block;padding-top:37.5%;height: 0;}
.popularity .popularity-nav li .comic_bg .obj{position: absolute;left: 0;top: -100%;}
.popularity .popularity-nav li .comic_bg .swf{display: block;position: absolute;left: 0;top: 0;}
.popularity .popularity-nav li.on .nav_item{color:#fff;background-color: #3d3d3d;padding-top: 2px;margin-top: -2px;}
.popularity .popularity-nav li.on .comic_bg{visibility: visible;}
.comics{padding:31px 0 12px 0;position:relative;}
.comics .inner{position: relative;}
.comics .comics-wrapper{width:100%;visibility:hidden;overflow: hidden;}
.comics .comics-wrapper .icon{width: 43px;height: 70px;cursor:pointer;background: url(https://dn-18jdm.qbox.me/image/index/icon.png) no-repeat;position: absolute;top: 50%;margin-top: -35px;}
.comics .comics-wrapper .icon.prev{display: none;background-position: 0 0;left:-64px;}
.comics .comics-wrapper .icon.next{background-position: -43px 0;right:-64px;}
.comics .comic-list{width:2780px;min-width:2780px;position:relative;left: 100%;top: 0;}
.comics .comic-list li{margin-right:20px;font-size:0;width:325px;}
.comics .comic-list li a{display: block;}
.comics .comic-list li .comic-wrapper{border: 1px solid #4d4d4d;border-radius: 3px;position: relative;overflow: hidden;}
.comics .comic-list li .comic-wrapper:before{content: '';display: block;padding-top: 70.27863777%;}
.comics .comic-list .comic-img{display: block;position:absolute;left: 0;top: 0;width:100%;height: 100%;background-color: #fff;}
.comics .comic-list .comic-img img{width:100%;}
.comics .comic-list .comic-info{position: absolute;left: 0;bottom: 0;width:100%;height:40px;border-top: 1px solid #4d4d4d;color:#e3dfdf;font-size: 16px;z-index: 10;}
.comics .comic-list .name{display:block;padding-left: 12px;padding-top:12px;line-height:1;font-size:1em;font-weight:bold;}
.comics .comic-list .desc{display:block;padding-right: 12px;padding-top:14px;line-height:1;font-size:0.875em;width: 58.771%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;text-align: right;}
.comics .comic-list .bg{width:100%;height:40px;background-color: #000;-moz-opacity:0.5;-khtml-opacity:0.5;opacity: 0.5;filter:alpha(opacity=50);position: absolute;left: 0;bottom: 0;z-index: 1;}
.comics .comic-list .news{height:49px;width: 74px;position: absolute;right: 0;top: 0;background: url(../images/pc/news.gif) no-repeat left top;}
.comics .comic-list li .comic-wrapper:hover{border: 1px solid #7fdbff;}
.comics .updated{padding-right:30px;position:absolute;left:2px;top:-30px;font-size: 20px;line-height:21px;color:#fff;-webkit-text-shadow:0 0 10px #f0ecec, 0 0 20px #f0ecec;-moz-text-shadow:0 0 10px #f0ecec, 0 0 20px #f0ecec;text-shadow:0 0 10px #f0ecec, 0 0 20px #f0ecec;background: url(https://dn-18jdm.qbox.me/image/index/sj.png) no-repeat center right;}
.video-mask{;margin-top:-36px;width:100%;min-width: 1108px;height: 52px;background:url(https://dn-18jdm.qbox.me/image/index/videoMask.png) no-repeat center top;position: relative;z-index:2;}
.anime{padding-bottom: 50px;min-width: 1108px;background:#0a3a6a url(https://dn-18jdm.qbox.me/image/index/anime-bg.jpg) no-repeat center top;}
.anime-title{margin: 0 0 8px -13px;background:url(https://dn-18jdm.qbox.me/image/index/anime.png) no-repeat left top;height: 82px;}
.animate{margin-bottom: 30px;}
.animate a{display: block;border: 1px solid #4d4d4d;position: relative;min-height: 379px;}
.animate a:hover{border: 1px solid #7fdbff;-webkit-box-shadow: 0 0 10px #fff;-moz-box-shadow: 0 0 10px #fff;box-shadow: 0 0 10px #fff;}
.animate .animate-img{background-color:#0a3a6a;}
.animate .animate-img:before{content:'';display: block;padding-top: 38.7334315%;}
.animate .animate-img img{position: absolute;left: 0;top: 0;width:100%;}
.animate-text{position: absolute;right: 107px;bottom: 21px;width:440px;background: #000;background-color: rgba(0, 0, 0, 0.4);filter: alpha(opacity=40); -moz-opacity: 0.4;border-radius: 8px;color:#fff;}
.animate-text .title{padding: 13px 0 18px 18px;line-height: 1;font-size: 25px;-webkit-text-shadow:0 0 10px #f0ecec, 0 0 20px #f0ecec;-moz-text-shadow:0 0 10px #f0ecec, 0 0 20px #f0ecec;text-shadow:0 0 10px #f0ecec, 0 0 20px #f0ecec;}
.animate-text .desc{padding: 0 27px 20px 36px;line-height: 30px;font-size: 18px;text-indent: 2em;}
@media only screen and (max-width:1480px){
    .inner{width:1120px;}
    .comics .comic-list li{width:265px;}
    .comics .comic-list .comic-info{font-size: 15px;}
    .popularity .logo-large {height: 63px;left: 24px;}
    .popularity .popularity-nav{padding-left: 242px;}
    .popularity .popularity-nav .nav_item p{padding-top: 14px;}
    .popularity .popularity-nav .nav_item span{padding: 11px 0 14px 0;}
}
@media only screen and (max-width:1200px){
    .inner{width:980px;}
    .comics .comic-list li{width:230px;}
    .comics .comic-list .comic-info{font-size: 13px;}
    .popularity .logo-large {height: 51px;left: 11px;}
    .popularity .popularity-nav{padding-left: 179px;}
    .popularity .popularity-nav .nav_item{font-size:9px}
    .popularity .popularity-nav .nav_item p{padding-top: 9px;}
    .popularity .popularity-nav .nav_item span{padding: 12px 0 10px 0;}

}