MediaWiki:Common.css

/* 这里放置的CSS将应用于所有皮肤 */
html {
	scroll-padding-top: 60px;
}

/* 背景 */
body {
	background:url("https://message.biliimg.com/bfs/im/091b99c8bff3aef1c823126bf18d992c22555b66.png") no-repeat fixed 50% 0;
	background-size:cover;
}
.mw-special-ApiHelp {
    background: url("https://message.biliimg.com/bfs/im/10b1343d53bd88ecae885d93fb6793c78794b7b9.png") no-repeat fixed 50% 0;
background-size:cover;
color:#ffffff
}

p {margin: 0;}

.resp-tab-content p {
	margin:0;
}

.full-width {
	width: 100% !important;
}

.mw-indicators {
	display: none;
}

.comment-container {
    margin-top: 1em;
    background: white;
}

/* Nav */
.wiki-header {
	z-index: 1;
}

 .wiki-header .wiki-nav-celling {
	background: transparent;
} 
.wiki-header .wiki-nav .celling-box {
	background: #2D2D2D;
	box-shadow: 0 6px 12px 0 rgba(0,0,0,0.6);
}


.menu-wrap .wiki-menu-li-1 {
	background: transparent;
}

.menu-wrap .wiki-menu-li-1>a {
	color: white;
}

/* Sep out local notice */
#bodyContent, #flowthread {
	padding: 2rem;
    background: white;
}

@media (min-width: 768px){
.game-bg {
    background: transparent;
    padding: 0;
    box-shadow: none;
}
.firstHeadingTools {
    margin-bottom: 0px;
    background: #fff;
    padding-left: 10px;
	
}
#firstHeading {
    background: #fff;
    padding-left: 10px;
}
.mw-body h1, .mw-body-content h1, .mw-body-content h2 {
    margin-bottom: 0px;
}
}

@media (max-width: 759px) {
#bodyContent {
	padding: 0;
}
}

.page-首页 > .game-bg > .mw-body > #bodyContent {
	padding: 0;
}

/*#contentSub{
	display:none;
} */

@media (min-width: 982px){
.client-js #mw-content-text {
    margin: 0;
}
}


/*  TOC: Table of Content*/
@media screen and (max-width: 600px){
#toc {
    background-color: #fff!important;
}
}

/* site notice */
.sitenotice-menu-wrapper{
grid-template-columns: repeat(5, 1fr);
}

.sitenotice-menu-item-container {
	background-color: #2b2b2b; 
	box-shadow: 0 6px 12px 0 rgba(0,0,0,0.6); 
	padding: 0.4em;
	background: linear-gradient(to bottom, #2b2b2b 50%, #0099DD 50%) top;
    background-size: 100% 200%;
	transition: 0.5s ease;
}

.sitenotice-menu-item-container:hover{
	background-position: bottom;
}

.sitenotice-menu-item-icon {
	max-width: 100px;
	width: 100%;
}

.sitenotice-menu-item-title {
	font-size: 1.6em; 
	font-weight: bold; 
	color: white;
}

.sitenotice-menu-item-container:hover > p > img {
    filter: brightness(0);
}

.sitenotice-menu-item-container:hover > p {
    color: #000;
}

.home-theme-button {
    background: url(https://patchwiki.biligame.com/images/arknights/0/0f/j0dux3ti6ynowvqihs6r8ix4zcpiooz.png) no-repeat;
    background-size: cover;
    border-radius: 8px;
    box-shadow: 0px 5px 5px rgb(0,0,0,0.6);
    padding: 1em 2.4em;
    font-weight: bold;
    color: black;
}

/* Homepage screen wrappers */
.home-screen-wrapper {
	height: 100vh;
	padding: 1rem;
	scroll-margin: 50px;
}

.home-screen-wrapper.dark-theme {
	background: #333;
}

.home-screen-wrapper.light-theme {
	background: #fff;
}

.home-block-wrapper {
    display: grid;
    gap: .5em;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    grid-auto-flow: dense;
    width: 100%;
    grid-auto-rows: 200px;
}

/* Remove wrapper height restriction on mobile display */
@media only screen and (max-width:759px){
.home-screen-wrapper {
	height: auto;
}

.home-block-wrapper {
	grid-auto-rows: auto;
}
}

.dark-block {
	padding: 1rem 1.4rem;
	border: 1px solid #535353;
	color: white;
}

.dark-block-hoverable:hover {
    box-shadow: 0px 0px 5px white;
}

.light-block {
	padding: 1rem 1.4rem;
	background-color: #e9e9e9 !important;
}

/* Dark-theme-block: 
 * Define a layout of
 *
 * "main | content | right sidebar"
 * "     |         |              "
 * "title|         |              "
 * 
 * Current usage: 
 * - Events
 * - Guides
 */

.home-block-wrapper > .dark-theme-block:first-child(){
  grid-column: span 1;
  grid-row: span 1;
}

.home-block-wrapper  > .dark-theme-block:nth-child(2){
  grid-column: span 1;
  grid-row:  span 2;
  grid-column-start: 1;
}

.home-block-wrapper  > .dark-theme-block:nth-child(3){
  grid-column: span 2;
  grid-row: span 3;
}


.home-block-wrapper  > .dark-theme-block:nth-child(4){
  grid-column: span 1;
  grid-row: span 3;
}

/* single column on xs:
 * fixes the display on mobile
 * use this class on grid that spans more than 1 column
 */
 
@media screen and (max-width:759px) {
.single-column-on-xs {
  grid-column: span 1 !important;
}
}

/* Home-block title: shared padding and blue border decor
 * further define bg color and text color in "theme" class
 * Note: "theme" refers to the color theme of the block
 * The title uses contrast color of the block theme
 */
.home-block-title {
    border-left: 5px solid #0099DD !important;
    font-size: 4rem;
    font-weight: bold; 
	padding: 1rem 1.4rem;
	text-align: right;
}

.home-block-title-sub {
	color: #888; 
	font-size: 1.2rem;
	font-weight: normal;
}

.operator-title-decor {
	background: url(https://patchwiki.biligame.com/images/arknights/2/20/n1g9uj7azpvtbpgitqsla213jdbyic9.png) no-repeat;
	background-position: -2rem calc(100% + 3rem);
}

.operation-title-decor {
	background: url(https://patchwiki.biligame.com/images/arknights/b/b4/12z8nkw0ftuoij80o821w7iwest2pxq.png) no-repeat;
	background-position: -2rem calc(100% + 3rem);
}

.guide-title-decor {
	background: url(https://patchwiki.biligame.com/images/arknights/0/0d/7wz3l7ulnfhuh4slix3armpj76teq56.png) no-repeat;
    background-position: -2rem -2rem;
}

.event-title-decor {
	background: url(https://patchwiki.biligame.com/images/arknights/7/70/j8doacms0thfv556r08kwys8qgs4uq8.png) no-repeat;
	background-position: -2rem calc(100% + 3rem);
}

/* Further break down in each screen */
.dark-theme-block > .centered {
	grid-column: span 2;
    grid-row: span 3;
}

.dark-theme-block > .bottom-left {
	grid-column: span 1;
	grid-row: span 2;
}

.dark-theme-block > .bottom-right {
	grid-column: span 1;
	grid-row: span 2;
}

/* === Other UI components used in home-blocks === */
.secondary-main-menu-wrapper{
	display: grid;
	grid-template-columns:repeat(3,1fr);
	grid-template-rows: repeat(2, 40px); 
	gap: .5em;
}

.article-title-list-tag {
	padding: .2em .4em; 
	color: white; 
	border-radius: 4px; 
	font-size: 0.8em;
	flex-shrink: 0;
}

.dark-hr {
	background: #535353;
	margin: 1em 0;
}

.main-plot-hr {
	background: #888;
    border-top: white;
    margin: 1em 0;
}

.home-block-subtitle {
	color: #2bf;
    font-size: 1.6rem;
    font-weight: bold;
}

.blue-button {
	background: #2bf; 
	color: #000; 
	justify-content: flex-end; 
	font-size: .8em; 
	padding: 0 .4rem;
	align-self: flex-end;
}

.stat-label {
	font-size: .8em; 
	color: #ddd;
}

.scroll-to-top-button {
	margin-top: 1em;
    margin-right: 1em;
    color: #2bf;
    text-decoration: underline;
    cursor: pointer;
}

/* four-to-two-col-wrapper:
 * defines a grid display that has 4 cols on the PC
 * and has 2 cols on mobile
 */
.four-to-two-col-wrapper {
	display: grid;
    gap: 0.5em;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    grid-auto-flow: dense;
}

/* two-by-two-grid-wrapper:
 * defines a grid display that has 2 cols and 2 rows
 * and a fixed 40px height for each row
 */
.two-by-two-grid-wrapper {
	display: grid;
    gap: 0.5em;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 40px;
}

.user-follow-wrap .user-item-detail {
	background: url(https://patchwiki.biligame.com/images/arknights/0/0f/j0dux3ti6ynowvqihs6r8ix4zcpiooz.png) no-repeat;
}

/* breadcrum */
.breadcrum {
	position: relative;
	height: 50px;
	padding: 0.3em;
    border: 2px solid black;
    border-left: none;
    border-right: none;
    margin: 25px 0px;
}

.breadcrum-logo {
	position: absolute;
	width: 100px;
	top: -25px;
	left: 0px;
}

.breadcrum-logo-left-decor {
	position: absolute;
    left: 0;
    top: 0px;
    clip-path: polygon(0% 0%, 65% 0%, 0%100%);
    background: black;
    width: 40px;
    height: 40px;
}

.breadcrum-action-btn-group {
	height: 100%;
    justify-content: flex-end;
    margin-right: 0.5em;
}

.breadcrum-action-btn-group-bg{
	clip-path:polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
	width:150px;
	height:50px;
	background:black;
	position: absolute;
	right: 0px;
}

.breadcrum-action-btn-group-decor {
  position: absolute;
  top: -3px;
  right: 110px;
  height: 20px;
  width: 40px;
  background: black;
  clip-path:polygon( 0 0, 100% 0,50% 100%);
}

.breadcrum-body {
	position: absolute; 
	left: 100px; 
	right: 150px; 
	top: 0; 
	bottom: 0;
	border: 1px solid black;
    border-right: none;
    border-left: none;
    margin: 3px;
}

/* Front page */
.top-gradient-label {
	width: 100%;
    background: linear-gradient(to bottom, black, transparent);
    color: white;
    text-align: center;
    padding: 0.4em 0.8em;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.front-page-menu-item-title {
	background: linear-gradient(to top, black, transparent); 
	color: white; 
	padding: 1em 1.4em; 
	font-size: 1.2em; 
	font-weight: bold;
	width: 100%;
	transition: 0.5s ease;
	text-shadow: 0px 0px 5px black;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

.front-page-menu-item-title:hover {
	height: 100%;
	background: rgba(0,0,0,0.6);
	justify-content: center;
}

.front-page-menu-item-title-wrapper {
	display: flex;
	align-items: flex-end;
}

.front-page-menu-block {
	display: grid; 
	grid-template-columns: repeat(6, 1fr); 
	grid-template-rows: repeat(3, 200px); 
	gap: 4px; 
	width: 100%;
}

.menu-interactive-black-mask {
	background-color: transparent; 
	background: linear-gradient(to left, transparent 50%, rgba(0,0,0,0.6) 50%) right;
    background-size: 200%;
	transition: 0.5s ease;
	position: absolute; 
	left: 0; 
	right: 0; 
	top: 0; 
	bottom: 0;
}

.menu-interactive-black-mask:hover {
	background-position: left;
}

/* Operation */
.annil-operation-menu-item{
background:url('https://patchwiki.biligame.com/images/arknights/4/44/0m40hn4xxbs4susbhe8l8dbkluxpsmi.png') no-repeat;
background-size: cover;
background-position: center;
padding: .4em .8em;
}

.annil-operation-menu-area{
background: white;
width: 4.5em;
height: 1.2em;
border-radius: 1em;
}

.annil-operation-menu-name {
	color: white;
	font-size: 1.2em;
	font-weight: bold;
}

.home-block-wrapper > .operation-block-frame.left{
	grid-column: span 1;
	grid-row: span 3;
}

.home-block-wrapper  > .operation-block-frame.center{
	grid-column: span 2;
	grid-row: span 3;
}

.home-block-wrapper  > .operation-block-frame.right{
	grid-column: span 1;
	grid-row: span 3;
}

.operation-block-frame > .two-rows {
	grid-row: span 2;
}

.operation-block-frame > .one-row {
	grid-row: span 1;
}

.operation-block {
	padding: 1rem 1.4rem;
	background: url('https://patchwiki.biligame.com/images/arknights/1/1b/oc0sat9vfqegruqvcy4ox13ryyf9og8.png') no-repeat;
	background-size: contain;
	background-position: 0% 100%;
	background-color: #e9e9e9;
}

.operation-block-title-container{
	background: url('https://patchwiki.biligame.com/images/arknights/3/3a/jlk8c7dhlycfdh0lxi4607jl62q63uw.png') no-repeat;
    background-size: cover;
    background-position: left;
    box-shadow: 0px 5px 5px rgba(0,0,0,0.6);
}

/* Operator: share a lot of frame classes with Operation */
.operator-center-grid-wrapper {
	display: grid; 
	gap: .5em;
	grid-template-columns: repeat(3, 1fr); 
	grid-template-rows: repeat(3, 200px); 
}

.operator-center-grid-wrapper > div {
	position: relative;
}

.operation-img-cover {
	object-fit: cover;
}

.operation-img-cover-one-row {
	height: 200px;
}

.operation-img-cover-two-rows {
	height: 400px;
}


/* Front-page event */
.field {
	padding: .4em .8em;
	border-bottom: 1px solid #535353;
}

.field:last-child {
	border-bottom: none;
}

/* Text */
.white-color {
	color: white;
}

.single-line {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow:hidden;
}

/* Flex container */
.flex-container {
	display: flex;
}

.col-direction {
	flex-direction: column;
}

@media only screen and (max-width:759px){
.trans-dir-on-xs {
	flex-direction: column;
}
}

.center-on-x-axis {
	justify-content: center;
}

.center-on-y-axis {
	align-items: center;
}

.between-on-x-axis {
	justify-content: space-between;
}

.small-gap {
	gap: 4px;
}

.medium-gap {
	gap: 8px;
}

.large-gap {
	gap: 16px
}

.no-shrink {
	flex-shrink: 0;
}

.equal-divide {
	flex: 1;
}
.equal-entitle{
text-align:right;
font-family:times;
}

.img-cover {
	object-fit:cover;
	width: 100%;
	height: 120px;
}

/* Only applicable to chip cover */
.img-chip {
	object-position: 50% 80%;
}

.handbook-item-arrow {
	position: absolute; 
	right: 1em; 
	bottom: 2em; 
	width: 2em; 
	height: 2em;
}

.handbook-item-type {
	background: black; 
	width: 20px; 
	position: absolute; 
	left: .4em; 
	top: .4em;
}


/* Main plot page */
.main-plot-block-wrapper {
	display: grid; 
	grid-template-columns: repeat(auto-fit,minmax(100px,max-content));
	gap: 0.5em;
	grid-auto-rows: 40px;
}

@media screen and (max-width:759px) {
.main-plot-block-wrapper {
grid-template-columns: repeat(auto-fit,minmax(100px,1fr));
}
}

.main-plot-wrapper > * {
	padding: .4em .8em;
}

.main-plot-wrapper > .cover {
	background: #333; 
}

.main-plot-wrapper > .content {
	background: #ddd; 
}

.main-plot-wrapper > .content > .title {
	background: #333; 
	color: white; 
	text-align: center; 
	font-weight: bold;
	padding: .4em .8em;
}

.main-plot-wrapper > .content > .unlock {
	background: white; 
}

.main-plot-wrapper > .content > .unlock > .tag {
	background: #333; 
	color: #fff; 
	display:inline-block; 
	margin-right: 1rem;
	padding: .4em .8em;
}

.main-plot-act-title {
	background: #000;
	color: white;
	padding: .4em .8em;
	font-size: 1.6em;
	font-weight: bold;
	box-shadow: 0px 5px 5px rgba(0,0,0,0.6);
	margin-bottom: .5em;
	margin-top: 1em;
}


/* Outfit page */
.outfit-gallery-title {
    background: url(https://patchwiki.biligame.com/images/arknights/1/1b/b3l7bjy3opms7zmrlzpq1gufqe748p9.png) no-repeat;
    padding: 0.5em;
    color: white;
    text-align: center;
    background-position: center;
    font-weight: bold;
    margin: 1em 0;
}

.outfit-collection-logo {
    filter: invert(1);
    max-width: 100%;
}

.outfit-collection-logo:hover {
    filter: drop-shadow(2px 4px 6px black);
}

.outfit-right-col-section-header{
	padding:1rem;
	font-size:1.2em;
	font-weight:bold;
	color:#fff;
	text-align:center;
}
.outfit-left-col-card{
	background:#eee;
	padding:1rem;
}
.outfit-cover{
	padding: 1rem; 
	border: 5px solid #ddd; 
	overflow: hidden;
}
.outfit-cover-img-container{
	background: url(https://patchwiki.biligame.com/images/arknights/3/34/flolowdyfd9g9ojpe8y1ctr01bk3ajm.png);
    background-size: 70%;
    flex: 2;
}
.outfit-cover-right{
	justify-content: flex-end;
	align-items: flex-end;
	padding: 1em; 
	min-width: 200px;
	flex-shrink: 0; 
	position: relative;
}
.watermark-logo{
	filter:brightness(0.9);
}
.outfit-cover-photo{
	max-height: 600px;
	width:100%;
	height:auto;
}

.outfit-collection-menu-wrapper {
	display: grid; 
	grid-template-columns: repeat(auto-fit,minmax(150px,max-content)); 
	gap: .5em;
}

.outfit-collection-menu{
box-shadow: 0px 3px 3px rgba(0,0,0,0.4);
width: 150px;
min-height: 250px;
}
.outfit-collection-menu:hover {
box-shadow: 0px 5px 3px rgba(0,0,0,0.4);
}
.outfit-collection-menu-tag {
	position: absolute; 
	top: 100px; 
	left: -.5rem; 
	background: orange; 
	box-shadow: 0px 3px 3px rgba(0,0,0,0.3); 
	padding: .5em; 
	font-size: .8em;
	color: white;
	z-index: 600;
}

/* Roguelike dialog */
.roguelike-dialog-avatar{
	box-shadow: 0px 0px 3px #000;
	
}
.roguelike-dialog-box{
	background: #000; 
	color: #fff; 
	border: 1px solid #ddd; 
	padding: .4em .8em;
}

/* USED IN TEMPLATE:data */
.itembox{
display: inline-block;
position:relative;
width: 60px;
height: 60px;
margin:2px;
}  
.itembox:hover{
box-shadow: 0 0 2px #000;
}
.itemattr{
position: absolute;
bottom: 0px;
right:5px;
font-size:17px;
color:#fff;
font-weight: bolder;
text-shadow: #000 -1px 0 0,#763c12 0 -1px 0,#5d2b08 1px 0 0,#1d1515 0 1px 0;
font-family:Arial
} 
.itemname{
position: absolute;
bottom: 0px;
  left:2px;
font-size:10px;
color:#fff;
font-weight: bolder;
text-shadow: #000 -1px 0 0,#763c12 0 -1px 0,#5d2b08 1px 0 0,#1d1515 0 1px 0;
width: 60px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display:inline-block;
} 
.itemNOname{display:none}
.iteminfo{
position:absolute;
float:left;
top:60px;
left:0px;
z-index:1000;
width:300px;
background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(83, 83, 83, 0.9));
box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.3);
padding:10px;
text-align:left
}
.itemdrop {
    position: absolute;
    top: 0px;
    text-align: center;
    font-size: 10px;
}
.itemSp {
    position: absolute;
    top: 0px;
    text-align: center;
    font-size: 10px;
    right:-1px;
}
/* 首页CSS */
.BILIBILI-BOX {width:100%;margin-bottom:20px;}
.BOX-title-1 {width:100%;font-size:14px;padding:7px 10px;font-weight: bold;background:#404040;color:#fff;}
.BOX-title-2 {padding: 10px 0px 5px 0px;font-size: 14px;font-weight: bold;border-bottom: 1px solid #384348;}
.BOX-N {width:100%;padding:0px;}
.BOX-GD {color:#f7f7f7;border: 1px solid #f7f7f7;padding: 0px 5px;border-radius: 50%;}
.BOX-AN-50 {width:50%}
.BOX-AN-25 {width:25%}
.BOX-AN-20 {width:20%}
.BOX-AN2 {width:100%;display: inline-block;height:30px;line-height:30px;padding-left:35px;padding-right:5px;color:#404040;}
.BOX-AN2:hover {background:#000;color:#f7f7f7;}
@media only screen and (max-width:759px){
.BOX-AN-25 {width:50%}
.BOX-AN-20 {width:50%}
}

.update-log .log-title {display: none;}
.update-log .bili-list-group {padding: 0px 0px;}
.update-log .read-more {display: none;}

.carousel.big-carousel {
    margin: 0;
}

.carousel.big-carousel .carousel-indicators li, .carousel.big-carousel .carousel-indicators li.active {width: 8px;height: 8px;}
.carousel.big-carousel .carousel-indicators {bottom: .4em;margin-left: -30%;}

.BOX-1 .BOX-title-2 {padding: 10px 0px 5px 0px;}
.BOX-1 {background:#f7f7f7;border:1px solid #404040;}
.BOX-1 .BOX-N {padding:5px 10px;}

.BOX-2 .BOX-title-1 {border-radius: 8px;}
.BOX-2 {border:1px solid #404040;border-radius: 4px;padding:2px}
.BOX-2 .BOX-2-1 {background:#f7f7f7;border:1px solid #404040;border-radius: 8px;padding:10px;}

.BOX-3 .BOX-title-1 {border-radius: 8px;}
.BOX-3 {background:#f7f7f7;border-radius: 8px;padding:10px}

.BOX-4 .BOX-title-1 {border-radius: 8px 8px 0px 0px;}
.BOX-4 {background:#f7f7f7;border-radius: 8px;padding:0px;}
.BOX-4 .BOX-N {padding:5px 10px;}

.BOX-5 .BOX-title-1 {border-radius: 8px 8px 0px 0px;background:#262626;color:#f7f7f7;}
.BOX-5 .BOX-title-2 {padding: 10px 0px 5px 0px;border-bottom: 1px solid #262626;}
.BOX-5 {background:#404040;border-radius: 8px;padding:0px;}
.BOX-5 .BOX-N {padding:5px 10px;border:2px solid #262626;border-top:0px solid ;box-shadow: inset 0 0 1px 2px #000;color:#f7f7f7;border-radius: 0px 0px 8px 8px;}
.BOX-5 .bili-section-normal,.BOX-5 .bili-section-primary {color: #f7f7f7;background: #626262;border: 1px solid rgb(0, 0, 0);}
.BOX-5 .bili-section-normal:hover {color: #fff;background: #000;border: 1px solid rgba(0, 0, 0, 0.1);cursor: pointer;}
.BOX-5 .BOX-zt {color:#f7f7f7}
.BOX-5 .update-log a {color: #f7f7f7 !important;}
.BOX-5 .BOX-AN2 {width:100%;display: inline-block;height:30px;line-height:30px;padding-left:35px;padding-right:5px;color: #f7f7f7;background: #626262;}
.BOX-5 .BOX-AN2:hover {color: #fff;background: #000;}

/*标题编辑隐藏*/
h1 .mw-editsection ,h2 .mw-editsection,h3 .mw-editsection ,h4 .mw-editsection,h5 .mw-editsection{white-space: nowrap;unicode-bidi: -moz-isolate;display: none;
}
/* 弹窗警告 */
.alert-success {
	color: #000;
	background-color: #f2f2f2;
	border-color: #d6e9c6;
	width: 600px;
	z-index: 1000;
	bottom: 130px;
	position: fixed;
	left: 400px;
	height: 250px;
}

/* 黑幕 */
.heimu {
background:#000;
color:#000;
}
.heimu:hover {
    background:#000;color:#fff;
}

.wiki-header {
    padding: 20px 0 0px;
}

@media (max-width: 768px){
.alert-dismissible .close {
    position: relative;
    top: -45px;
    right: -21px;
    color: inherit;
}
}

/*logo修正*/
.wiki-header .wiki-nav .wiki-logo {
    width: 188px;
}

.close {
	font-size: 21px;
	font-weight: 700;
	line-height: 1;
	color: #a60a0a;
	text-align: center;
	margin: 60px;
	float: none;
	opacity: inherit;
}


.home-an {
    width:105px;
    height: 40px;
    line-height: 38px;
    color: #414141;
    border: 1px solid #000;
    display: block;
    text-align: center;
    background: #fff;
    margin-left: 150px;
}

.home-an:hover {
    transition: all 0.3s linear 0s;
    background: #747474;
    color: #fff;
}


@media only screen and (max-width:759px){
.alert-success {
    color: #000;
    background-color: #f2f2f2;
    border-color: #d6e9c6;
    width: 80%;
    z-index: 1000;
    bottom: 200px;
    position: fixed;
    left: 0px;
    height: 350px;
    margin: 0px 30px;
    top: 30%;
}
.home-an {
    margin-left: 0px;
}
}


/*图片自适应*/
.invert-color {
	filter: invert(1);
}

img{max-width:100%;height:auto;margin:0 auto;text-align:center;}
/*头像*/
.img-tx img {
    width: 40px;
    height: 40px;
    box-shadow: 0 0 2px #000;
    margin: 0 2px;
}
.img-tx2 img {
    width: 30px;
    height: 30px;
    box-shadow: 0 0 2px #000;
    margin: 0 2px;
}
@media only screen and (max-width:759px){
.img-tx img {
    width: 20px;
    height: 20px;
    box-shadow: 0 0 1px #000;
    margin: 0 1px;
}	
.poke-zt {
	font-size:10px;
}
}		
	
.round-corner-img {
	border-radius: 4px;
}

#bili-header-m .nav-wrapper-left li:not([report-id=playpage_main]),
#bili-header-m .nav-wrapper-right li[report-id=big_tab_click] {
 display: none;
}

/*攻略组*/
ul.mainpage-editor-list{list-style: none; padding: 0 0px;margin-left: 2px;}
ul.mainpage-editor-list>li{margin: 0 0 5px;}
ul.mainpage-editor-list>li>div{display: inline-block;}
ul.mainpage-editor-list .editor-image{margin-right: 5px;}
ul.mainpage-editor-list .editor-image img{width: 30px; height: 30px; box-shadow: 0 0 2px #000;border-radius: 7px;}
ul.mainpage-editor-list .editor-name{font-size: 0.86em; font-weight: bold;}
ul.mainpage-editor-list>li {display: inline-block;width: 99%;}


/*首页布局*/
.home-box {
    width:100%;
    overflow:hidden;
    padding-bottom: 30px;
}
.home-left {
    float: left;
    width: calc(100% - 385px);
    padding: 15px;
    border-right: 1px solid #d5d5d5;
    border-left: 1px solid #d5d5d5;
}
.home-right {
    float: left;
    width: 370px;
    padding: 15px;
}
@media only screen and (max-width:759px){
.home-box {
    width:100%;
    overflow:hidden;
    padding: 0px;
    border: 0px;
}
.home-left {
    float:none;
    width:100%;
    padding: 0px;
    border: 0px solid #d5d5d5;
}
.home-right {
    float:none;
    width:100%;
    margin-right: 0px;
    padding:0px;
}
.gk-logo {
	width:28%;
}
}

/*视频大小*/
.video-player {width:694px;height:500px;}

@media only screen and (max-width:759px){

.video-player {width:100%;height:200px;}
}


.home-box-1 {
    display: table;
    border-collapse: separate;
    border-spacing: 15px;
    width: 100%;
}
.home-box-1 + .home-box-1 {
    margin-top: -15px;
}
.home-box-tb {
    display: table-cell;
    vertical-align: top;
}

.home-box-bg-1 {
    background: #f3f3f3;
    padding: .4em;
    display: grid;
    gap: .5em;
    grid-template-columns: repeat(5,1fr);
    grid-auto-rows: 40px;
}
.home-box-bg-2 {
    background: #d8d8d8;
    padding: .4em;
    display: grid;   
    gap: .5em;
    grid-template-columns: repeat(5,1fr);
    grid-auto-rows: 40px;
}
.home-box-bg-3 {
    background: #595959;
    padding: .4em;
    display: grid;
    gap: .5em;
    grid-template-columns: repeat(5,1fr);
    grid-auto-rows: 40px;
}

.box-bbc {
    overflow: hidden;
    margin-bottom: 15px;
    box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.30);
    padding: 10px;
}


.title-1 {
    border-bottom: 1px solid #CECECE;
    height: 40px;
    line-height: 36px;
    font-size: 18px;
    margin-bottom: 10px;
    background:#454545;
    font-weight: bold;
    color:#fff;
    border-radius: 0px;
    padding-left: 15px;
    text-shadow:#000 3px 0 0,#763c12 0 -1px 0,#5d2b08 1px 0 0,#1d1515 0 1px 0;
}

.title-2 {
    border-bottom: 1px solid #CECECE;
    height: 30px;
    line-height: 28px;
    font-size: 16px;
    margin: 10px 0px;
    font-weight: bold;
    color: #323232;
    border-radius: 0px;
    padding-left: 15px;
}


.title-top {
    margin-top: 20px;
}

.home-box-3 {width: 50%;}
.home-box-2 {width: 100%;}
.home-box-4 {margin-top:15px;}


@media only screen and (max-width:759px){
.home-box-1 {display: block; margin-bottom: 0px; border-collapse: inherit; overflow: hidden;}
.home-box-tb {display: block;margin-bottom: 15px;}
.home-box-3,.home-box-2{width: 100%;}
.home-box-1 + .home-box-1 {
    margin-top: 0px;
}
.box-bbc {
    overflow: hidden;
    margin-bottom: 15px;
    box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.30);
    padding: 0px;
}
}

.home-tag {
    color: #414141;
    border-top: 7px solid #333;
    text-align: center;
    background: #fff;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.30);
    width: 100%;
    height: 100%;
}

.home-tag:hover {
    transition: all 0.3s linear 0s;
    background: #747474;
    color: #fff;
}
.home-tag-red {
    color: #414141;
    float: left;
    background: #ea5b5b;
}
.home-tag-blue {    
    color: #fff;
    background: #0075a8;
}
.home-tag-tr {
    color: #ffffff;
    background: #777777;
}

.home-tag-red:hover {
    transition: all 0.3s linear 0s;
    background: #747474;
    color: #fff;
}
.home-tag-tr:hover {
    transition: all 0.3s linear 0s;
    background: #fdffdd;
    color: #4f4f4f;
}


.home-tag-top {
    display: block;
    height: 40px;
    font-size: 18px;
    line-height: 36px;
    margin: 10px;
    color:#414141;
    font-weight: bold;
    border: 1px solid #c2c2c2;
    border-radius: 50px;
    text-align: center;
}
.home-tag-top:hover {
    transition: all 0.3s linear 0s;
    border: 1px solid #a8a9e3;
    background: #ecf0ff;
}

.tag-top-logo {
    margin: 5px 15px;
    text-align:center;
    padding: 0 10px;
}


.tag-top-logo:hover {
    transition: all 0.3s linear 0s;
}

@media only screen and (max-width:759px){
.tag-top-logo {
    margin: 2px;
    padding:0px;
}
}


/*隐藏更新日志标题*/
.update-log .log-title {
    font-size: 16px;
    line-height: 24px;
    border-bottom: none;
    display: none;
}
.update-log .bili-list-group .bili-list-group-item .log-content {
    width: 210px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/*图片自适应*/
.img-kk {
	display: inline-block;
	height: auto;
	padding: 0px;
	max-width:100%;
	line-height: 1.42857143;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out
}

.img-tj {
    height: 700px;
    margin: 0 auto;
    width: auto;
}

.img-bg {
    background:url(https://patchwiki.biligame.com/images/arknights/7/7f/ns10yeedihxbmuodsb1xva8zlm02o6z.png);
    display: inline-block;
    height: auto;
    padding: 0px;
    max-width:100%;
    line-height: 1.42857143;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

/*图片自适应*/
.img-yx {
	width:200px;
	height: auto;
}

@media only screen and (max-width:780px){
.img-yx {
	width:100px;
	height: auto;
}
.img-tj {
    height: auto;
}
}
/*干员图鉴*/
.tjbgbox1 {
background:url(https://patchwiki.biligame.com/images/arknights/7/7f/ns10yeedihxbmuodsb1xva8zlm02o6z.png);
}
/*头像背景*/



/*关卡图鉴*/
.home-box-gk-left {
    float: right;
    width: calc(100% - 465px);
}
.home-box-gk-right {
    float: right;
    width: 450px;
    margin-left: 15px;
}
@media only screen and (max-width:759px){
.home-box-gk-left {
    float:none;
    width:100%;
}
.home-box-gk-right {
    float:none;
    width:100%;
    margin-left: 0px;
}
}


/*攻击范围*/
.bg-gjfw {
    padding: 10px 20px 10px 0px;
}
.gjfw-0 {
    float: left;
    margin: 2px;
    width: 20px;
    height: 20px;
}
.gjfw-1 {
    float: left;
    margin: 2px;
    width: 20px;
    height: 20px;
    border: 2px solid #aaa;
}
.gjfw-2 {
    float: left;
    margin: 2px;
    width: 20px;
    height: 20px;
    background: #b1b1b1;
}
.gjfw-3 {
    float: left;
    margin: 2px;
    width: 20px;
    height: 20px;
    border: 2px dashed #d7d7d7;
}



/*隐藏首页标题*/
.page-首页 #firstHeading{display:none;}

/*隐藏首页分类*/
.page-首页 #catlinks{display:none;}

/*隐藏侧边栏*/
#mw-panel{display:none;}

/*a*/
a:link {color:#00b6ff;}
a:visited {color:#397BBD;}

/*标题*/
#firstHeading{
	font-family: Reeji-CloudSongDa-GB-Regular;
	font-size: 30px;
	color: rgba(0,0,0,0.85);
	line-height: 40px;
}

.mw-body-content h1 {
   font-family: Reeji-CloudSongDa-GB-Regular;
   font-size: 24px;
   color: rgba(0,0,0,0.85);
   line-height: 32px;
}

.mw-body-content h2 {
    font-family: Reeji-CloudSongDa-GB-Regular;
    border-bottom: 1px solid #CECECE;
    height: 40px;
    line-height: 36px;
    font-size: 18px;
    margin-bottom: 10px;
    background: #454545;
    font-weight: bold;
    color: #fff;
    border-radius: 0px;
    padding-left: 15px;
    text-shadow: #000 3px 0 0,#763c12 0 -1px 0,#5d2b08 1px 0 0,#1d1515 0 1px 0;
}

.mw-body-content h3 {
   font-size: 18px;
margin: 20px 0px 10px 0px;
font-weight: bold;
color: #363636;
padding: 6px 0px;
text-align: left;
border-bottom: 1px solid #2f2f2f;
}

/*表格*/
.wikitable {
    max-width: 100%;
    display: table;
}

table.wikitable > tr > th, table.wikitable > * > tr > th {
    background: #404040;
    height: auto;
    border-right: 1px solid rgba(0,0,0,.1);
    color: #efefef;
}


.wikitable tr:nth-child(2n) {background:#efefef}
.wikitable tr:nth-child(2n+1) {background:#e1e1e1}
table.wikitable > tr > td, table.wikitable > * > tr > td {background-color: transparent;color: #333;
}

table.wikitable > tr > th, table.wikitable > tr > td, table.wikitable > * > tr > th, table.wikitable > * > tr > td {
	border: 1px #fff solid;
	padding: 5px 5px;
}

table.wikitable{border: 1px solid rgba(0,0,0,0.10);margin: 10px 0px 0px 0px;font-family: SourceHanSansCN;}


.wikitable.eventCalendar {
    background: transparent;
}

table.wikitable.eventCalendar > * > tr {
	background: none;
}

table.wikitable.eventCalendar > tr > th,
table.wikitable.eventCalendar> tr > td, 
table.wikitable.eventCalendar> * > tr > th, 
table.wikitable.eventCalendar> * > tr > td {
    border-color: #5d5d5d;
    color: white;
    background: none;
}

/*首页链接颜色*/
.update-log a{
    font-family: MicrosoftYaHei;
    font-size: 14px;
    color: rgba(0,0,0,0.85) !important;
    line-height: 22px;
}


/*隐藏SMW帮助*/
.smw-editpage-help {
    display: none;
}
/*隐藏特殊页面帮助*/
.mw-body #mw-indicator-mw-helplink {
    display: none;
}
/*更新日志样式修复*/
.update-log .bili-list-group {
    padding: 10px 0px;
    margin-left: 0;
}
/*更新日志标签变色*/
.bili-label-purple {
    background: rgba(0,182,255,0.10);
    color: #00B6FF;
}

.bili-label-pink {
    background: rgba(0,182,255,0.10);
    color: #00B6FF;
}

.bili-label-green {
    background: rgba(0,182,255,0.10);
    color: #00B6FF;
}


/*按钮
.vectorMenu {
    direction: ltr;
    float: right;
    cursor: pointer;
    position: relative;
    line-height: 1.125em;
    font-size:14px;
}*/

.user-follow-wrap {width: 100%;}
.user-follow-wrap .user-item-detail .detail-des {padding: 0 0px 0 10px;}
.smw-template-furtherresults {display:none}
/*按钮*/
.box-icon {
float:left;
width:25%;
padding:5px;
}
/*弹窗表格*/
table.popuptable > tr > th, table.popuptable > * > tr > th {
	background:#e9edf2;height:40px;
	border-right: 1px solid rgba(0, 0, 0, .1);

}

table.popuptable > tr > td, table.popuptable > * > tr > td{
	background-color: #fff;height:40px;
	border-right: 1px solid rgba(0, 0, 0, .1)
}

table.popuptable > tr > th, table.popuptable > tr > td, table.popuptable > * > tr > th, table.popuptable > * > tr > td {
	border: 1px #ccc solid;padding: 5px 5px;
}

table.popuptable{max-width:500px;border: 1px solid rgba(0,0,0,0.10);;margin: 0px 0px 0px 0px;font-family: SourceHanSansCN;}

.bili-dialog {
    position: absolute;
    width: 100%;
    min-width: 500px;
    bottom: 35px;
    left: 70px;
    height: auto;
    max-height: 280px;
    background-color: #fff;
    box-shadow: 0 24px 48px 0 rgba(59,73,97,.25);
    z-index: 999;
}

.bili-box {
	display: inline-block;
    border-radius: 30px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    border: 3px solid #f5d68e;
    margin-top:2rem;
    padding: 2rem;
    box-shadow: 0 4px 4px 0 #948d6e;
    box-sizing: border-box;
    color: #181818;
}

.bili-card {
	display: inline-block;
    border-radius: 30px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    border: 1px solid #9c9cb8;
    box-shadow: 0 5px 2px 0 #a4aec6;
}

.bili-section-normal, .bili-section-primary {
	min-width:125px;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

.section-wrap:hover{
	background-color:#FAFAFA ;
	color:#f55591;
}


.about-us {
	color:#181818;
    background-color: #FFFFFF;
	display: inline-block;
    border-radius: 30px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    padding: 20px 20px 60px 20px;
    border: 3px solid #f5d68e;
    box-shadow: 0 2px 2px 0 #948d6e;
    box-sizing: border-box;
}


/*条件筛选页面*/
.select-grid {
	width: 100%;
    padding: 10px 0 35px 0;
    display: table;
    margin: 0 0 40px 0;
    border-bottom: 1px solid #a2a9b1;
}

.select-grid table td {
    padding: 5px 10px 0 0;
}

.filter {
    display: block;
    clear: both;
}

span.select-wrap {
	width:120px;
	height:30px;
	margin:0 15px 5px 0;
	padding: 8px 0;
	font-family: SourceHanSansCN-Regular;
    font-size: 14px;
    display: inline-block;
    color: rgba(0,0,0,.85);
    text-align: center;
    line-height: 14px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.1);
}

/*手机端hover伪类显示异常，magic，只能靠js了*/
span.select-wrap.hover{
	color: #000;
    border: 2px solid rgb(133, 146, 239);
    cursor: pointer;
    background:#FFF;
}

span.select-wrap.active {
	border: 1px solid rgba(119,132,222);
    color:rgba(119,132,222);
}

.filter li {
    list-style:none;
    float:left;
}
/*筛选按钮被选中*/
li.btn.cardSelectOption.selected {
    color: #333 !important;
    background-color: #e6e6e6;
    border-color: #adadad;
	outline: 0;
    -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}
/*干员图鉴*/
.tj-bg {background-color: rgba(72, 72, 72, 0.7);color:#fff;padding:10px;margin:5px;float:left;width:360px;}
.bg-left {float:left;margin-right:20px;margin-bottom:20px;}
.tj-btl {
    font-size: 18px;
    margin: 20px 0px 10px 0px;
    font-weight: bold;
    color: #363636;
    padding: 6px 0px;
    text-align: left;
    border-bottom: 1px solid #2f2f2f;
}
.tj-btl2 {font-size: 16px;margin: 10px 0px 10px 0px;font-weight: bold;background-color: rgba(0, 0, 0, 0.63);color: #fff;padding: 6px 10px;text-align: left;}
.tj-btl3 {font-size: 16px;margin: 10px 0px 10px 0px;font-weight: bold;background-color: rgba(0, 0, 0, 0.63);color: #fff;padding: 6px 10px;text-align: left;}
.tj-table {background-color: rgba(210, 210, 210, 0.7);padding:10px;margin:5px 0px;}
.tj-big {width: 100%;overflow: hidden;}
.tj-bg-left {float:left;width:650px;margin-right:10px;}
.tj-bg-right {float:left;width:calc(100% - 660px);}
.tj-bgs {background-color: #F3F3F3;padding: 5px 15px;margin-bottom:10px;}
@media only screen and (max-width:759px){
.tj-bg-left {float:none;width:100%;margin-right:0px;}
.tj-bg-right {float:none;width:100%;}
.tj-bgs {font-size:12px;}
}

.tj-bg table.wikitable {
    margin: 0;
    background-color: rgba(72,72,72,0.7);
    border: 0px solid #fff;
    border-collapse: collapse;
    color: #fff;
}

.tj-bg table.wikitable > tr > th, .tj-bg table.wikitable > * > tr > th {
    background-color: rgba(0, 0, 0, 0.56);
    color: #fff;
}

.tj-bg table.wikitable > tr > th, .tj-bg table.wikitable > tr > td, .tj-bg table.wikitable > * > tr > th, .tj-bg table.wikitable > * > tr > td {
    border: 1px solid rgba(255,255,255,0.62);
    padding: 0.5em 0.5em;
    height: auto;
}
.tj-bg table.wikitable > tr > td, .tj-bg table.wikitable > * > tr > td {
    background-color: transparent;color: #fff;
}
.tj-bg .wikitable tr:nth-child(2n) {background: transparent}
.tj-bg .wikitable tr:nth-child(2n+1) {background: transparent}
.bg-gjfw tr:nth-child(2n) {background: transparent !important}
.bg-gjfw tr:nth-child(2n+1) {background: transparent !important}

/* 悬浮 */
.iteminfo {display:none;}
.itemhover:hover  .iteminfo{display:block;}
/* end */

/* 注释用的悬浮 */
.hovertext{
	position:relative;
}
.hoverinfo{
	display:none;
	position:absolute;
}
.hovertext:hover .hoverinfo{
	display:block;
}
/* end */

.resp-tabs-list li.active .tab-panel, .tab-panel:hover {
    font-family: MicrosoftYaHei-Bold;
    color: rgba(255, 255, 255);
    text-align: center;
    background: rgba(51, 51, 51, 0.7);
    box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.30);
}
.tab-panel:hover {
    cursor: pointer;
}

.tab-panel {
	display: block;
	height: 40px;
	line-height: 38px;
	padding: 0 20px;
	color: #ddd;
	text-decoration: none;
	background: transparent;
	box-shadow: 0 0px 0px 0 rgba(0,0,0,0.30);
	white-space: nowrap;
}
.resp-tabs .resp-tabs-list {
	white-space: normal;
	overflow-x: auto;
	background: url(https://patchwiki.biligame.com/images/arknights/c/c2/d8vh59u261cla4w4g249yfuqrr1akng.png) no-repeat;
	background-size: cover;
	background-position: left;
	display: flex;
	flex-wrap: wrap;
	text-align:center;
}
.resp-tabs-list li {border-left: 0px solid rgba(255, 255, 255, 0.16); margin: 0;}
.resp-tabs-list li.active .tab-panel, .tab-panel:hover {
	font-family: MicrosoftYaHei;
	color: rgba(255,255,255);
	text-align: center;
	background: #0099DD;
	box-shadow: 0 0px 0px 0 rgba(0,0,0,0.30);
}
.resp-tabs-list li:last-child {border-right: 0px solid rgba(0, 0, 0, 0.16);}
.mw-parser-output ul {margin: 0px;}
@media (max-width: 768px){
.tab-panel {padding:0px 10px;text-align:center;margin-right:0px}
}

/* 干员技能tab样式
 * 比较hacky，其实建议换个方式写技能代码
 */
.show.paneltitle.collapsed > .panel-title > .tab-an {
    background: #404040;
}
.show.paneltitle > .panel-title > .tab-an {
    background: #0099DD;
}

.toc h2 {
    font-size: 14px;
    background: transparent !important;
    font-weight: bold;
    color: #000 !important;
    padding: 7px 15px;
    margin-bottom: 10px;
    border: 0px solid #fff;
    text-shadow:none;
}


.enemy-left {float:left;margin-right:20px;}
@media only screen and (max-width:759px){
.enemy-left {float:none;margin-right:0px;}
}


.tab .TabLabelText {display: inline-block;padding: 1px;cursor: pointer;}
.tab .TabLabel {z-index: 2;position: relative;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;-o-user-select: none;user-select: none;}
.tab .TabLabelText.selected {border-top: 3px solid green;padding: 1px;background: white;border-left: 1px solid #aaa;border-right: 1px solid #aaa;}
.tab .TabContent {background: white;padding: 20px 30px;position: relative;z-index: 1;border: 1px solid #aaa;min-height: 0px;}
.tab .TabContentText {display: none;}
.tab .TabContentText.selected {display: block;}
.Tabs .Tab {border-bottom: 1px solid #aaa;}
.Tabs .Tab:first-child {border-top: 1px solid #aaa;}
.Tabs .Tab .TabLabelText {padding: 7px;}
.Tabs .Tab .TabContentText {padding: 3px;}
.TabsMH {min-height: 250px;}

/* tabber选项卡 */
ul.tabbernav li {
    display: inline-block;
    padding: 12px 0px;
}


.tabber .tabbertab {
    padding: 10px;
    border: 1px solid #404040;
        border-top-color: rgb(64, 64, 64);
        border-top-style: solid;
        border-top-width: 1px;
    border-top: 0;
}
ul.tabbernav {
	margin: 0;
	padding: 0px;
	border: 0px solid #404040;
	font: bold 12px Verdana,sans-serif;
	background: #404040;
	border-left: 0px;
	border-right: 0px;
}
ul.tabbernav li a {
	padding: 12px 10px;
	margin: 0px;
	border: 0px solid #404040;
	border-bottom: none;
	background: #404040;
	text-decoration: none;
}
ul.tabbernav li.tabberactive a {
	background-color: #fff;
	border-bottom: 1px solid #fff;
	border-left: 1px solid #404040;
	border-top: 1px solid #404040;
    color: #404040 !important;
}
ul.tabbernav li a:link {
    color: #fff;
}
ul.tabbernav li a:hover {
	color: #404040;
	background: #fff;
	border-color: #404040;
	border: 1px solid #404040;
	border-right: 0px;
}
ul.tabbernav li.tabberactive a:hover {
    color: #404040 !important;
    background: #fff;
    border-bottom: 1px solid #fff;
}
@media only screen and (max-width:759px){
ul.tabbernav li a {
	height: 40px;
	display: inline-block;
}
ul.tabbernav {
    padding: 0px;
}
ul.tabbernav li {
    display: inline-block;
    padding: 0px 0px;
}
}


hr {
    background: #313131;
    height: 1px;
    border-top: 1px solid #1a1a1a;
    margin: 3px;
}

/*看板娘用css 本功能来自公主连结BWIKI*/
         .animechara {
            display: block;
            width: 130px;
            height: 190px;
            position: fixed;
            bottom: 0px;
            left: 10px;
            z-index: 9999;
        }

        #message {
            position: absolute;
            border-radius: 6px;
            box-shadow: 0 0 1px #eeeeee;
            border: 1px;
            border-color: pink;
            background: rgba(255, 170, 170, 0.555);
            width: auto !important;
            color: #191919;
            outline: none;
            text-align: center;
            font-size: small;
            padding: 5px;
            line-height: 170%;
            min-height: 1em;
            text-align: left;
            z-index: 10000;
            bottom: 100%;
        }
        #message::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: rgba(255, 170, 170, 0.555) transparent transparent transparent;
        }
        /*看板娘相关*/
        .chara {
            width: 130px;
            height: 190px;
            background: url("https://patchwiki.biligame.com/images/arknights/e/e0/5jq0o7rm7rj90qxsvreu0m6moaplgdg.gif") no-repeat;
            background-size: contain;
            position: relative;
        }

/*将UID数字替换为B站个人动态页面 源自CQ WIKI*/
.mw-userlink bdi:hover {
    opacity: 0.8;
    -webkit-filter: unset;
    -moz-filter: unset;
    -ms-filter: unset;
    -o-filter: unset;
    filter: unset;
}
.mw-userlink bdi {
    background-image: url(/images/blhx/1/1e/khjb32eg6r2emnmadvzi9mx3zqdmkmg.png);
    background-repeat: no-repeat;
    background-size:15px 15px;
/*    background-position: center center;*/
    width: 15px;
    height: 15px;
    padding-left: 16px;
    -webkit-filter: grayscale(90%);
    -moz-filter: grayscale(90%);
    -ms-filter: grayscale(90%);
    -o-filter: grayscale(90%);
    filter: grayscale(90%);
    filter: gray;
}


/*音频组件，转自食之契约BWIKI*/
.audio-wrapper audio {
    position: fixed;
    left: -99999px;
}
.audio-controls {
	display: inline-block;
    width: 30px;
    height: 30px;
    padding: 0;
    position: relative;
    text-align: center;
    background-color: #f8f9fa;
    cursor: pointer;
    border-radius: 50%;
    border: 1px solid #dddddd;
    box-sizing: border-box;
}
.audio-controls .icon-btn {
    display: inline-block;
    width: 100%;
    height: 100%;
}
.audio-controls .icon-play {
    background: url("https://patchwiki.biligame.com/images/szqy/0/05/1tg75ar2mq110pxbmcze33cy0xlbrk0.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.audio-controls .icon-pause {
    background: url("https://patchwiki.biligame.com/images/szqy/d/db/afe454y0obdwci3azwzc66j7jx9ge0r.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}
/*音频样式*/
div#content h2.flow-board-header-title {
    margin-right: 10px;
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: 0;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 24px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 32px;
}

/* new character menu*/
.character-menu-bg{
    background-color: #2b2b2b;
    box-shadow: 0 6px 12px 0 rgba(0,0,0,0.6);
    padding: 0.4em;
    background: linear-gradient(to bottom,#2b2b2b 50%,#0099DD 50%) top;
    background-size: 100% 200%;
    transition: 0.5s ease;
}
.character-menu-text{
    font-size: 1.6em;
    font-weight: bold;
    color: white;
    text-align:center;
}
.character-menu-line{
    grid-template-columns: repeat(5,1fr);
    margin: 0.8em 0;
    display: grid;
    gap: 10px;
}

/* SmartClick修正 */
.popover-content{
word-break:break-all;
}
/* 模板:光荣之路奖章对可镀层奖章的调整 */
.pic-container{display:inline-block;}
.pic-container .orig-pic{display:inline-block;}
.pic-container .hover-pic{display:none;}
.pic-container:hover .orig-chg{display:none;}
.pic-container:hover .hover-chg{display:inline-block;}

/* 干员一览页面
 * 因为单独放在一个css文件里加载太慢了，合并到common.css里
 */
.operator-handbook-item-wrapper {
  position: relative;
}

.operator-handbook-item-wrapper:hover {
    box-shadow: 0px 0px 10px grey;
}

.operator-handbook-item-component {
  position: absolute;
}

.operator-handbook-item-decor-main {
  background: black;
  width: 100%;
  height: 100%;
  clip-path: polygon(0% 0%, 100% 50%, 100% 100%, 30% 100%, 0% 85%);
}

.operator-handbook-item-decor-main-wrap {
  width: 100%;
  height: 30%;
  bottom: 0;
}

.operator-handbook-item-name {
  bottom: 5px;
  right: 5px;
  color: white;
}

.operator-handbook-item-career {
  top: 5px;
  left: 5px;
}

.operator-handbook-item-star {
  top: 5px;
  left: 30px;
}

.operator-handbook-item-decor-topleft {
  top: 0;
  left: 0;
  background: black;
  width: 50px;
  height: 50px;
  clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
}

.operator-handbook-item-label-container {
  bottom: calc(20% + 10px);
  right: -5px;
  font-size: .8em;
}

.operator-handbook-item-label {
	max-width: 50px;
    max-height: 30px;
    box-shadow: -2px 2px 5px #333;
    color: white;
    text-align: center;
    margin-top: 0.5em;
    padding: 0.5em 1em;
    border-radius: 50px 0 0 50px;
}

.operator-handbook-item-label.free {
  background: #2ca4d9;
}

.operator-handbook-item-label.limited {
  background: linear-gradient(
      217deg,
      rgba(255, 0, 0, 0.8),
      rgba(255, 0, 0, 0) 70.71%
    ),
    linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
    linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%);
}

.operator-handbook-item-label.alter {
	background: #e1164c;
}

.operator-handbook-item-label.transform {
	background: #a72323;
}

.operator-handbook-item-label.collaboration {
	background: #87a852;
}

.operator-handbook-item-module-container {
  bottom: 20px;
  left: -5px;
  display: flex;
}

.operator-handbook-item-module {
	max-width: 50px;
}

.operator-handbook-item-decor-main-wrap.six-star{
	filter: drop-shadow(0px -5px 5px #eec037);
}

.operator-handbook-item-decor-main-wrap.five-star{
	filter: drop-shadow(0px -5px 5px #f2dd9e);
}

.operator-handbook-item-decor-main-wrap.four-star{
	filter: drop-shadow(0px -5px 5px #e6e2f1);
}

.operator-handbook-item-decor-main-wrap.three-star{
	filter: drop-shadow(0px -5px 5px #00b1ff);
}

.operator-handbook-item-decor-main-wrap.two-star{
	filter: drop-shadow(0px -5px 5px #d8e22b);
}

.operator-handbook-item-decor-main-wrap.one-star{
	filter: drop-shadow(0px -5px 5px white);
}

.front-page-headhunting-up-arrow{
	width:30px;
	filter: drop-shadow(0px 0px 10px gold);
	margin-right: .5em;
}

@media screen and (max-width:759px) {
.operator-handbook-item-name {
	font-size: .8em;
}

.operator-handbook-item-career {
	width: 20px;
}

.operator-handbook-item-module {
    max-width: 40px;
}

.operator-handbook-item-decor-topleft.alter {
  background: #e1164c;
}
}

/* 干员页面CSS */
.switch-tab.operator{
  border-right: 1px solid #5c5c5c;
  font-weight: bold;
  text-align: center;
}

.switch-tab.operator:last-child{
  border-right: none;
}

.switch-tab.operator {
  color: white;
  min-width: 100px;
  padding: .5em;
  background: linear-gradient(to left,#454545 50%,#0099DD 50%) right;
  background-size: 200% 100%;
  transition: 0.5s ease;
  cursor: pointer;
  flex:1;
}

.switch-tab.operator:hover {
  background-position: left;
}

.switch-tab.operator.active {
  background: #0099DD;
}

.switch-tab-contents > .switch-tab-content {
  display: block;
}

.switch-tab-contents > .switch-tab-content ~ .switch-tab-content{
  display: none;
}

.operator-page-label-cell {
	background: #333;
    color: white;
    padding: .5em;
    text-align: center;
    width: 80px;
    flex-shrink: 0;
}
.operator-page-value-cell {background: #fff;padding: .5em;}
.operator-page-division-row {
	background: #333;
    color: white;
    padding: .5em;
    text-align: center;
    font-weight: bold;
}
.operator-page-rounded-label {
	padding: .5em;
    background: #333;
    border-radius: 5px;
    width: 100%;
    color: white;
    font-weight: bold;
    text-align: center;
}
.operator-page-section-wrapper {border: 2px solid #333;}
.operator-page-voice-lines-wrapper{display: grid; grid-template-columns: max-content 50px auto;}
@media screen and (max-width:759px) {
	.operator-page-voice-lines-wrapper{grid-template-columns: 70px 50px auto;}
}

/* 模组页面CSS */
/* 模组/级别数字页面 */
.operator-module-level-number {
color: white; font-size: 100px; font-weight: bold; position: absolute; top: calc(50% - 75px); left: calc(50% - 30px);
}
.operator-module-level-decor {
position: absolute; background: white;
}
.operator-module-level-decor.top-left {
 left: 0; top: 0; width: 20px; height: 20px;
}
.operator-module-level-decor.top-right {
right: 0; top: 0; width: 40px; height: 40px; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 100%, 50% 50%, 0% 50%);
}
.operator-module-level-decor.bottom-left {
right: 0; bottom: 0; width: 20px; height: 20px;
}
.operator-module-level-decor.bottom-right {
left: 0; bottom: 0; width: 40px; height: 40px; clip-path: polygon(0% 0%, 50% 0%, 50% 50%, 100% 50%, 100% 100%, 0% 100%);
}
.operator-module-level-decor-stage {
color: white; font-size: 20px; font-weight: bold; position: absolute; bottom: -5px;left: 43px;
}

/* 模组/级页面 */
.operator-module-level-container {
position:relative; background:#333; min-height: 200px; padding: 1em;
}

.operator-module-level-subtitle {
	color: #ddd;
    font-size: 1.2em;
    font-weight: bold;
    background: linear-gradient(45deg, black, transparent);
    padding: 0.5em;
}

/* 模组/个页面 */
.operator-module-image-container {
	flex: 1;
    border: 5px solid #eee;
    padding: 1em;
}

.opreator-module-code {
	font-size: 1.2em; 
	background: linear-gradient(to right,transparent, black, transparent); 
	color: white;
	font-weight: bold;
	margin-bottom: .8em;
	padding: .4em .8em;
}

.operator-module-general-subtitle {
padding: .5em; background: #333; color: white; text-align: center; font-weight: bold; border-radius: 5px;
}

.operator-module-story-content {
	border-bottom: 5px solid #eee; padding: 1em;
}

/* 阿米娅升变系统导航 */
.amiya-transit-box{background: #333; flex: 1; padding: .5em; border-right: 1px solid #888;}
.amiya-transit-box:last-child{border: none;}
.amiya-transit-logo:hover{filter: drop-shadow(2px 4px 6px white);}
@media screen and (max-width:759px) {
	.amiya-transit-box{border-bottom: 1px solid #888;}
}

/* Loading JS Spinner */
.spinner {width: 50px;height: 50px;border: 5px solid #ddd; border-radius: 50%;border-top-color: #0099ff;animation: spin 2s linear infinite;}
@keyframes spin {
from {transform: rotate(0deg);} to {transform: rotate(360deg); }
}

/* 材料 - 加工站信息 */
.base-info > * > tr > th {font-weight: bold; color: #fff; background: #333; padding: .4em .8em; width: 125px;}
.base-info > * > tr > td {padding: .4em .8em;}
.base-info > * > tr:not(:last-child){border-bottom: 1px solid #ddd;}
.side-drop-rates{grid-template-columns: repeat(8, minmax(max-content, 200px));display: grid; border: 2px solid #333;}
@media screen and (max-width: 759px){
.add-border-on-xs{border-bottom: 1px solid #ddd;}
.side-drop-rates{grid-template-columns: repeat(2, 1fr);}
}