@keyframes fadeIn{0%{opacity:0;}100%{opacity:1;}}
html{-webkit-tap-highlight-color:transparent;}
body{background:#f9f9f9;font-family:"Microsoft YaHei UI", Roboto, Noto, Helvetica, Arial, sans-serif;font-size:14px;line-height:1.42857143;color:#666;padding:0;margin:0;}
::-webkit-scrollbar{ width:10px; background-color:#1e1e1e;}
::-webkit-scrollbar-thumb{ background-color:#F90;}
	
ul,li{list-style:none;padding:0;margin:0;}
input,button,select{outline:none;border:none;}
a{color:#333;text-decoration:none;-webkit-transition:color .3s;-moz-transition:color .3s;-o-transition:color .3s;transition:color .3s;}
a:hover{color:#ff7f00;text-decoration:none;}
h1{margin-bottom:2px;text-align:center;}
em{display:block;margin-bottom:2px;text-align:center;}
::-moz-selection{background:#ff7f00;color:#fff;}
::selection{background:#ff7f00;color:#fff;}
.header + .container{margin-top:60px;}
p{ margin:0; padding:0; border:0;}
@media (max-width:1300px){.container{width:95%;}}
@media (max-width:991px){.container{width:98%;}}
.header{position:relative;width:100%;height:0;padding-bottom:14.9%;font-size:0;background-position:0 center;background-color:#333;background-image:url(../images/supxxx/bg.jpg);background-size:100%;}
.header.fixed{height:48px;background:rgba(255, 255, 255, 0.9);box-shadow:0 0 8px #ddd;}
@media (min-width:767px){.header.fixed{height:55px;}
.header.fixed a{ color:#666;}}
.logo{position:absolute;left:50%;margin-left:-240px;bottom:-50px;z-index:10;display:block;height:100px;width:480px;background:url(../images/supxxx/logo.png) center center no-repeat;}
.logo img{max-width:100%;height:auto;object-fit:contain;}
.header .top_name{ display:block; width:350px; height:70px; background:url(../images/supxxx/top_name.png) left top no-repeat;}
.menu{ float:right}
.nav{display:flex;font-size:14px;float:right;}
.nav li{position:relative;}
.nav.show li{-webkit-transform:translateX(-105%);-moz-transform:translateX(-105%);-o-transform:translateX(-105%);transform:translateX(-105%);}
.nav.show li:nth-child(even){transition-duration:.4s;}
.nav li::after{content:"";position:absolute;width:0;height:3px;left:50%;bottom:0;background:#fdae03;border-radius:4px;-webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;transition:all .3s;}
.nav li.active::after, .nav li:hover::after{width:100%;margin-left:-50%;}
.nav li:hover a .fa:before{ color:#fdae03}
.nav li a{display:inline-block;color:#777;padding:0 15px 0 4px;height:55px;line-height:55px;-webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;transition:all .3s;}
.nav li a:hover{ color:#FFF}
.transparent-mark{position:fixed;top:0;left:0;width:100%;height:100%;background:transparent;}
.banner{height:90px;padding:16px 0;}
.search{ width:514px; height:auto; padding:3px; border-radius:8px; background:#fdae03; margin:5px; float:left;}
.search-type, .search-main{max-width:700px;overflow-x:auto;}
.search-type .title{color:#ccc;padding:6px 12px;white-space:nowrap;}
.search-type li{color:#ddd;padding:6px 18px;border-radius:4px 4px 0 0;margin-right:4px;white-space:nowrap;cursor:pointer;-webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;transition:all .3s;}
.search-type li:hover, .search-type li.active{color:#333;background:rgba(255, 255, 255, 0.9);}
.search-main .search-input{height:40px; width:85%; float:left;font-size:15px;padding:8px 15px;color:#555;border-color:#FFF !important;border-radius:6px;background:#FFF;}
.search-main .search-btn{transition:.2s;width:15%;height:40px;font-size:15px;color:#fff;margin-left:-1px;border-radius:0 6px 6px 0;background:#F90;cursor:pointer;}
.search-main .search-btn:hover{ background-color:#ff7f00}
.card{position:relative;background:#fff;box-shadow:0 0 8px #eee;border-radius:8px;margin:8px;overflow:hidden;}
.card .card-head{font-size:15px;padding:18px 22px;background:#FAFAFA;border-bottom:1px solid #f2f2f2;}
.card .card-head i{margin-right:6px;}
.card .card-head .more{position:absolute;right:8px;color:#666;}
.card .card-body{padding:30px 50px;}
.card .card-body .item{display:inline-block;width:14.2857143%;color:#666;font-size:14px;padding:10px 8px;border-radius:6px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;-webkit-transition:font-weight, background, transform .3s;-moz-transition:font-weight, background, transform .3s;-o-transition:font-weight, background, transform .3s;transition:font-weight, background, transform .3s;}
@media (max-width:1300px){.card .card-body .item{width:16.6666667%;}}
@media (max-width:480px){.card .card-body .item{width:33.3333333%;font-size:13px;}}
.card .card-body .item:hover{font-weight:600;background:#eee;-webkit-transform:scale(1.05);-moz-transform:scale(1.05);-o-transform:scale(1.05);transform:scale(1.05);}
.card .card-body .item .icon{display:inline-block;width:20px;height:20px;-webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;transition:all .3s;}
.card .card-body .item:hover .icon{-webkit-transform:rotateZ(360deg);-moz-transform:rotateZ(360deg);-o-transform:rotateZ(360deg);transform:rotateZ(360deg);}
.card .card-body .item .icon img{width:100%;height:100%;object-fit:cover;vertical-align:top;}
@media (max-width:480px){.card .card-body .item .name{line-height:20px;}}
.card .card-body .content{font-size:14px;}
.card .card-body .content .info{display:flex;justify-content:space-around;color:#888;font-size:13px;padding-bottom:8px;margin-bottom:10px;border-bottom:1px dashed #eee;}
.card .card-body .content img{max-width:100%;border-radius:4px;}
.card .card-body .post{display:inline-flex;width:50%;color:#555;font-size:14px;padding:8px;border-radius:8px;-webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;transition:all .3s;}
.card .card-body .post:hover{color:#555;background:#eee;}
.card .card-body .post .pic{flex:none;width:120px;height:85px;}
.card .card-body .post .pic img{width:100%;height:100%;object-fit:cover;border-radius:8px;}
.card .card-body .post .text{display:flex;width:100%;flex-direction:column;justify-content:space-between;margin-left:10px;padding:4px 0;}
.card .card-body .post .title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:15px;height:2.85714286em;}
.card .card-body .post .info{display:flex;justify-content:space-between;color:#888;font-size:12px;}
.board{display:flex;height:44px;padding:12px 8px;margin-bottom:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.board .icon{margin:0 8px 0 4px;}
.board span:last-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.top-grid{font-size:0;padding:8px;}
.top-grid .item{display:inline-flex;flex-direction:column;align-items:center;width:16.6057143%;color:#666;font-size:14px;padding:10px 8px;border-radius:6px;-webkit-transition:font-weight, background, transform .3s;-moz-transition:font-weight, background, transform .3s;-o-transition:font-weight, background, transform .3s;transition:font-weight, background, transform .3s;}
@media (max-width:480px){.top-grid .item{width:25%;padding:10px 5px;font-size:13px;}}
.top-grid .item:hover{background:#eee;font-weight:600;-webkit-transform:scale(1.05);-moz-transform:scale(1.05);-o-transform:scale(1.05);transform:scale(1.05);}
.top-grid .item .icon{width:30px;height:30px;-webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;transition:all .3s;}
@media (max-width:480px){.top-grid .item .icon{width:25px;height:25px;}}
.top-grid .item:hover .icon{-webkit-transform:rotateZ(360deg);-moz-transform:rotateZ(360deg);-o-transform:rotateZ(360deg);transform:rotateZ(360deg);}
.top-grid .item .icon img{width:100%;height:100%;object-fit:cover;}
.top-grid .item .name{width:100%;text-align:center;margin-top:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.view-list a{display:flex;padding:6px;line-height:25px;font-size:14px;color:#666;border-radius:25px;-webkit-transition:background .3s;-moz-transition:background .3s;-o-transition:background .3s;transition:background .3s;}
.view-list a:hover{background:#eee;}
.view-list a .rank{flex:none;display:inline-block;width:25px;height:25px;margin-right:10px;text-align:center;border-radius:50%;background:rgba(124, 124, 124, 0.3);}
.view-list a:nth-child(1) .rank{font-size:0;background:url("../images/supxxx/rank/1.png") no-repeat 50% 50%/85%;
/*background:#f1404b;color:#FFF;border-radius:50%;
*/ }

.view-list a:nth-child(2) .rank{font-size:0;background:url("../images/supxxx/rank/2.png") no-repeat 50% 50%/85%;
/*background:#c56831;color:#FFF;border-radius:50%;
*/ }

.view-list a:nth-child(3) .rank{font-size:0;background:url("../images/supxxx/rank/3.png") no-repeat 50% 50%/85%;
/*background:#b89e2c;color:#FFF;border-radius:50%;
*/ }
.ding{background:url(../images/supxxx/ding.gif);height:4px;top:0px;position:fixed;width:100%;Z-index:9999;}
.view-list a .icon{flex:none;width:20px;height:20px;line-height:20px;margin-right:4px;}
.view-list a .icon img{width:100%;height:100%;object-fit:cover;}
.view-list a .name{flex:auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.view-list a .view{flex:none;color:#ff7f00;font-size:15px;font-style:italic;border-radius:4px;margin-right:6px;}
.side-common{font-size:14px;}
.side-common p{margin:12px 8px;}
.side-latest.oz-timeline .oz-timeline-main{padding:3px 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.side-latest.oz-timeline .oz-timeline-main .icon{display:inline-block;width:20px;height:20px;vertical-align:middle;}
.side-latest.oz-timeline .oz-timeline-main .icon img{width:100%;height:100%;object-fit:cover;}
.side-latest.oz-timeline .oz-timeline-main .name{line-height:35px;vertical-align:middle;}
.view-box{overflow:hidden;}
.view-box div{padding:0;}
.view-box div:nth-child(2) .card{margin:8px 0;}
@media (max-width:991px){.view-box div:nth-child(2) .card{margin:8px 8px 8px 0;}
.view-box div:nth-child(3) .card{margin-top:0;}}
.part-side{float:left;width:280px;padding:20px;text-align:center;}
.part-side .site-img{width:100%;height:180px;margin-bottom:5px;border-radius:4px;box-shadow:0 0 10px #ddd;}
@media (max-width:480px){.part-side .site-img{left:auto;right:15px;width:40%;height:35%;}}
.part-side .site-img img{display:inline-block;width:100%;height:100%;object-fit:cover;border-radius:4px;}
.part-side .oz-btn{margin:5px 0;}
.part-main{display:inline-block;width:calc(100% - 280px);padding:5px;font-size:14px;vertical-align:top;}
.part-main .site-name{display:block;font-weight:600;font-size:22px;line-height:normal;text-align:center;padding-bottom:0;}
.part-main span{line-height:42px;padding:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;z-index:1;}
.part-main img{vertical-align:middle;margin-top:-4px;}
.links{clear:both;}
.links .card-head::before{content:'';position:absolute;left:5px;width:4px;height:22px;background:#ff7f00;border-radius:2px;}
.links a{display:inline-block;font-size:13px;padding:5px 12px;margin:2px;color:#666;background:#eee;border-radius:25px;-webkit-transition:color, background .3s;-moz-transition:color, background .3s;-o-transition:color, background .3s;transition:color, background .3s;}
.links a:hover{color:#fff;background:#ff7f00;}
.suspend{position:fixed;right:2%;bottom:5%;z-index:10;}
.suspend li{width:50px;height:50px;line-height:52px;font-size:13px;text-align:center;background:#F90;border-radius:50%;cursor:pointer;-webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;transition:all .3s;}
.suspend li i:before{ color:#FFF;}
.suspend li:hover{color:#fff;background:#ff7f00;}
.yulan{ display:none; position:fixed; width:50px; height:50px; line-height:52px; text-align:center; right:2%; bottom:5%; margin-bottom:54px; border-radius:50%; background:#93C; z-index:10;}
.yulan i:before{ color:#FFF;}
.footer{text-align:center; margin-top:450px;padding:50px 20px; font-size:13px; background:#fdae03; position:relative;}
.footer .bottom_bg{ position:absolute; top:-420px; left:50%; margin-left:-300px; width:600px; height:420px; background:url(../images/supxxx/bottom_bg.jpg) center bottom no-repeat;}
#checkCodeImage{height:36px;cursor:pointer;}
.pagination{padding:8px;text-align:center;}
.pagination li{display:inline-block;}
.pagination li a{display:inline-block;color:#666;background:#fff;border:1px solid #ddd;padding:4px 10px;margin:0 2px;border-radius:25px;}
.pagination li a:hover{background:#eee;}
.pagination .active a{color:#fff;background:#ff7f00;border:1px solid #ff7f00;}
.pagination .disabled{pointer-events:none;cursor:not-allowed;}
.ad{display:block;}
.ad img{width:100%;}
.side .card .post{width:100%;}
.side .card .post .pic{width:80px;height:60px;}
.side .card .post .text{padding:0;}
.side .card .post .title{font-size:14px;}
.side .card .post .info{font-size:11px;}
.side .card .post-view .post{position:relative;padding-left:30px;}
.side .post-view .post .rank{position:absolute;top:50%;left:2px;width:25px;height:25px;text-align:center;z-index:1;transform:translateY(-50%);}
.side .post-view .post:nth-child(1) .rank{font-size:0;background:url("../images/supxxx/rank/1.png") no-repeat 50% 50%/85%;}
.side .post-view .post:nth-child(2) .rank{font-size:0;background:url("../images/supxxx/rank/2.png") no-repeat 50% 50%/85%;}
.side .post-view .post:nth-child(3) .rank{font-size:0;background:url("../images/supxxx/rank/3.png") no-repeat 50% 50%/85%;}
.side .side-sort{}
.side .side-sort > a{display:inline-block;width:50%;font-size:14px;color:#666;text-align:center;padding:10px 12px;border-radius:4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;transition:all .3s;}
.side .side-sort > a:hover, .side .side-sort > a.active{background:#eee;}
.side .rand-site a{display:inline-block;width:50%;color:#666;font-size:14px;padding:10px 8px;border-radius:6px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;-webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;transition:all .3s;}
.side .rand-site a:hover{font-weight:600;background:#eee;-webkit-transform:scale(1.05);-moz-transform:scale(1.05);-o-transform:scale(1.05);transform:scale(1.05);}
.side .rand-site a .icon{display:inline-block;width:20px;height:20px;-webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;transition:all .3s;}
.side .rand-site a .icon img{width:100%;height:100%;object-fit:cover;vertical-align:top;}
.site-ranking{
margin:0;
border-radius:5px;
cursor:pointer;
display:flex;
align-items:center;
padding:5px 15px;
line-height:25px;
font-size:14px;
color:#000;
-webkit-transition:all .3s;
-moz-transition:all .3s;
-o-transition:all .3s;
transition:all .3s;}
.site-ranking img{ width:16px; height:16px; float:left; margin:2px 5px; border-radius:8px;}
.site-ranking:hover{
color:#FFF;
background:#F90;}
.site-ranking .rank{color:#F90;
flex:none;
display:inline-block;
width:20px;
height:25px;
text-align:center;
border-radius:50%;
}
.site-ranking:hover .rank{ color:#FFF;}
.site-ranking:nth-child(1) .rank{
font-size:0;
background:url('../images/supxxx/rank/1.png') no-repeat 50% 50%/100%;
/*background:#f1404b;color:#FFF;border-radius:50%;
*/ }
.site-ranking:nth-child(2) .rank{
font-size:0;
background:url('../images/supxxx/rank/2.png') no-repeat 50% 50%/100%;
/*background:#c56831;color:#FFF;border-radius:50%;
*/ }
.site-ranking:nth-child(3) .rank{
font-size:0;
background:url('../images/supxxx/rank/3.png') no-repeat 50% 50%/100%;}
.site-ranking .name{
flex:auto;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;}
.site-ranking .view{
flex:none;
color:#555;
font-size:12px;
font-style:italic;
border-radius:4px;
margin-right:6px;}