@import "dark-background.css";

a, abbr, address, blockquote, body, caption, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, html, iframe, img, ins, label, legend, li, object, ol, p, pre, q, small, span, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, ul {
    
    border: 0;
    margin: 0;
    padding: 0;

}

a {

	text-decoration:none

}

img {

	border:none;

}

button {

	margin: 0;
	padding: 0;
	border: none;
	outline: none;
	background-color:transparent;

}

body {

	overflow: auto;
	min-width: 0;
    margin: 0;
    padding: 0;
    height: 100%;
    color: #fcfcfc;

}

.footer{
	
	max-width: 2000px;

}

footer p, footer p > *{
		
	color: #9a9da0 !important;

}

.main{
	
	margin: auto;
	width: 94%;
	max-width: 1300px;
                   
}

.part{
	
	margin-bottom: 60px;

}

.part-1{
	
	padding-top: 45px;

}

.part > .title{
	
	display: inline-block;
	position: relative;
	font-size: 18px;
	color: #f7931e;
	letter-spacing: 1px;
	top: 5px;/*原始数据为4px，因为下面border-bottom-width从3变5了，这里要加1来遮住下方的灰线*/
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 3px;
	border: solid 3px #5b5e62;
	border-bottom-color: #272b30 !important;
	height: 31px;
	border-radius: 10px;
	border-bottom-width: 5px;/*解决标题底边框上下两侧有一条灰色细线的bug*/
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;

}

.part > .title:before{ /*填补缺口*/
	
	content: '';
    position: absolute;
    background: #5b5e62;
    left: -3px;
    top: 10px;
    bottom: auto;
    right: auto;
    height: 20px;
    width: 3px;

}

.part > .content{
	
	border: solid 3px #5b5e62;
	border-radius: 10px;

}

.part > .content{

	border-top-left-radius: 0;
	padding-top: 30px;
	padding-bottom: 30px;
	padding-left: 3%;
	padding-right: 3%;

}

@media screen and (min-width: 768px){
	.part > .content{
		padding-top: 20px;
		padding-bottom: 20px;
	}
}

.part-1 .before-line{
	
	margin-right: 10px;

}

.part-1 .after-line{

	margin-left: 10px;

}

.part-1 .line{

	display: inline-block;
	position: relative;
	border-radius: 5px;
	border: solid 1px;
	top: -20px;
	height: 0px;
	width: 150px;

}

@media screen and (max-width: 530px) {
	
	.part-1 .line{

		width: 90px;

	}

}

@media screen and (max-width: 360px) {
	
	.part-1 .line{

		width: 50px;

	}

}


.part-1 .tank .bar{ /*#f8a22d * 0.5*/

	fill: #fbd096;
	color: #fbd096;
	border-color: #fbd096;

}

.part-1 .tank .before-line, .part-1 .tank .after-line{ /*#f8a22d * 0.8*/

	border-color: #f9b555;

}

.part-1 .damage .bar{ /*#e71d26 * 0.8*/

	fill: #f38e93;
	color: #f38e93;
	border-color: #f38e93;

}

.part-1 .damage .before-line, .part-1 .damage .after-line{ /*#e71d26 * 0.8*/

	border-color: #ec4a51;

}

.part-1 .support .bar{ /*#00a345 * 0.5*/

	fill: #7fd1a2;
	color: #7fd1a2;
	border-color: #7fd1a2;

}

.part-1 .support .before-line, .part-1 .support .after-line{ /*#00a345 * 0.5*/

	border-color: #33b56a;

}

/*固定宽高比的英雄头像*/
.intrinsic-ratios-box > div{

    height: 0;
    padding-bottom: 140.812%;/*宽高比*/
    width: 100%;
    position: relative;

}

.intrinsic-ratios-box > div > div{

    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

}

.update-history{

	padding-bottom: 20px;

}

.hero-select-box .hero-head{
	
	display: inline-block;
	position: relative;
	overflow: hidden;
	transition: transform 0.25s;
	border: solid 2px #a9aaac;
	border-radius: 5px;
	z-index: 0;
	margin: 5px 4px;

}

.hero-select-box .hero-head .hero-color{
	
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0.5;

}

.hero-select-box .hero-head:hover .hero-color{
	
	display: block;

}

.hero-select-box .hero-head:hover{
	
	z-index: 1;
	background-color: #fff;

}

/*手机端优化*/

.touch-screen .hero-select-box .hero-head{
	
	border: none;
	margin: 7px 8px;
	background-color: #fff;

}

body:not(.touch-screen) .hero-select-box .hero-head:hover{
	
	transform: scale(1.15) translate3d(0,0,0);

}

.touch-screen .hero-select-box .hero-color{
	
	display: block;

}

/*end*/

.part-1 .bar{
	

	overflow: hidden;
	height: 44px;
	margin: 20px auto;
	text-align: center;

}

.touch-screen .part-1 .bar{
	
	margin: 12px auto;

}

.part-1 .icon{
	
	display: inline-block;
	width: 44px;
	height: 44px;
	position: relative;
	border-radius: 50%;
	border: solid 2px;
	border-color: inherit;

}

.part-1 .icon-svg{

	width: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 0 auto;
	transform: translate(-50%,-50%);

}

.part-1 .bar .text{
	
	display: inline-block;
	letter-spacing: 6px;
	color: inherit;
	font-size: 21px;
	padding-left: 10px;
	top: 50%;
	transform: translateY(-50%);

}

/*手机端适配*/
@media screen and (min-width: 0px){
}
@media screen and (min-width: 386px){
}
@media screen and (min-width: 402px){
}
@media screen and (min-width: 430px){
}
@media screen and (max-width: 459px){
}
@media screen and (max-width: 469px){
	.part > .content{
	    padding-left: 2%;
	    padding-right: 2%;
	}
}
@media screen and (max-width: 495px){
	.main{
		width: 95%;
	}
	.part-1 .content .name{
		height: 30px;
	}
}

.content .img{
	
	position: absolute;
	width: 100%;

}

.content .name{
	
	font-family: "Big Noodle Too","microsoft yahei",impact,sans-serif;
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 40px;
	background: rgba(255,255,255,0.6);
	font-size: 18px;
	font-weight: bold;
	color: #272b30;

}

.content .name > span{

	position: absolute;
	text-align: center;
	width: 100%;
	top: 50%;
	transform: translateY(-50%);

}

.smaller-size{

	font-size: 0.97em;

}

.bigger-size{

	font-size: 1.03em;

}

.part-2-4 > .content .col{
	
	padding-left: 0;
	padding-right: 0;
	margin-top: 5px;
	margin-bottom: 5px;

}

.part-2-4 > .content a{
	
	display: inline-block;
	position: relative;
	overflow: hidden;
	padding-left: 0;
	padding-right: 0;
	margin-right: 5px;
	margin-left: 5px;
	height: 250px;
	border: solid 2px #a9aaac;
	border-radius: 5px;

}

.part-2-4 > .content .img{
	
	position: relative;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);

}

/*min*/
@media screen and (min-width: 0px){
	body{background-size: 400px;}
	.part-2-4 > .content a{height: 180px;}
}
@media screen and (min-width: 576px){
	body{background-size: 500px;}
	.part-2-4 > .content a{height: 185px;}
}
@media screen and (min-width: 768px){
	.part-2-4 > .content a{height: 170px;}
}
@media screen and (min-width: 992px){
	body{background-size: 600px;}
	.part-2-4 > .content a{height: 200px;}
}
@media screen and (min-width: 1200px){
	body{background-size: 700px;}
	.part-2-4 > .content a{height: 250px;}
}

.trivia{
	
	margin-top: 20px;
	margin-bottom: 20px;
	height: 180px;
	color: #a9aaac;
	border: solid 2px #97989b;

}

.show-the-first-2 div:nth-of-type(1), .show-the-first-2 div:nth-of-type(2){

	display: block;

}

.show-the-first-2 .trivia{

	display: none;

}

.trivia > a{
	
	display: block;
	height: 100%;
	
}

.trivia .left-img{
	
	float: left;
	padding-left: 10px;
	height: 90%;
	position: relative;
	top: 50%;
	transform: translateY(-50%);

}

.trivia .right-content{

	overflow: hidden;
	height: 100%;
	padding-left: 3%;
	padding-right: 3%;

}

.trivia .right-content .title{
	
	color: #fcfcfc;
	letter-spacing: 1px;
	margin-top: 10px;

}

.trivia .right-content .introduction{
	
	margin-top: 8px;
	color: #c9c9c9;
	height: 120px;
	height: calc(100% - 56px);/* 标题28px,标题margin-top 10px,简介margin-top 8px margin-down 10px ，共56px*/
	overflow: hidden;
	text-overflow: ellipsis;

}

.page-catalog{
	
	text-align: center;
	width: 100%;

	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

}

.part-3 .page-catalog{
	
	margin-top: 35px;
	margin-bottom: 20px;

}

.page-catalog .page-button{
	
	display: inline-block;
	margin: auto;
	height: 36px;
	margin-left: 8px;
	margin-right: 8px;
	cursor: pointer;

}

.page-catalog .page-num{
	
	color: black;
	font-size: 18px;
	width: 36px;
	border-radius: 50%;
	border: solid 1px #f7931e;
	transition: all 0.15s;

}

.page-catalog .page-button > div{

	display: block;
	position: relative;
	top: 50%;
	transform: translateY(-50%);

}

.page-catalog .page-num.active{
	
	background-color: #f7931e;

}

.page-catalog .page-num:not(.active){
	
	color: #f7931e;

}

.page-catalog .page-num:hover{
	
	background-color: #f7931e;
	color: black;

}


.page-catalog .page-turn{
	
	color: #f7931e;

}

.show-page-select .page-load-more-div{
	
	display: none !important;

}

.show-page-select .page-select-div{
	
	display: inline-block !important;

}

.page-catalog .page-load-more-div{
	
	display: inline-block;

}

.page-catalog .page-select-div{

	display: none;

}

.page-catalog .page-load-more{
	
	color: black;
	letter-spacing: 1px;
	font-size: 18px;
	width: 135px;
	border-radius: 18px;
	border: solid 1px #f7931e;
	transition: all 0.15s;

}

.page-load-more .fa-angle-down{

	margin-right: 5px;
	position: relative;
	top: -1px;

}

.page-catalog .page-load-more:not(.active){
	
	color: #f7931e;

}

.page-catalog .page-load-more:hover{
	
	background-color: #f7931e;
	color: black;

}

.part-4 .column{
	
	float: left;
	margin-top: 12px;
    margin-bottom: 12px;
    padding: 0 2%;

}

.gameMap .container-fluid{
	
	padding: 0 1%;
	
}

.part-4 .container-fluid:after{

    clear: both;

}

.map {

    background-size: cover;
    display: block;
    padding-top: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 6px 0 rgba(0,0,0,.28);

}

.part .gameMap{

	padding-left: 1%;
	padding-right: 1%;

}

.map.m-16-9 {

    padding-top: 56.25%;

}

.map-gradient {

    position: absolute;
    display: inline-block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(180deg,hsla(0,0%,100%,0) 40%,rgba(0,0,0,.5));

}

.map-name-wrapper {

    position: absolute;
    vertical-align: middle;
    text-align: right;
    bottom: 0;
    width: 100%;
    padding-right: 4%;
    padding-bottom: 2%;

}

.u-font-shadow {

    text-shadow: 1px 2px 3px rgba(51,51,51,.5);

}

.map-flag {

    height: 3.14vw;
    margin-right: 5px;
    display: inline-block;
    position: relative;

}

@media only screen and (min-width: 768px) {
    .map-flag {height:1.82vw}
}
@media only screen and (min-width: 992px) {
    .map-flag {height:17px}
}

.map-name {

    font-style: italic;
    font-size: 5vw;
    font-family: Big Noodle Too,impact,sans-serif;
    display: inline-block;
    position: relative

}

.container-fluid{
	
	display: flex;
	flex-wrap: wrap;
	
}

@media only screen and (min-width: 768px) {
	.map-name {font-size:2.5vw}
}
@media only screen and (min-width: 992px) {
    .map-name {font-size:2vw}
}
@media only screen and (min-width: 1280px) {
    .map-name {font-size:24px}
}

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

}

.map-category {

    padding-top: 3px;
    color: #f0edf2;
    display: inline-block;
    vertical-align: middle

}

.map-category-icon svg {

    width: 28.92px;
    overflow: hidden;
    height: 24px;
    fill: #f0edf2;
    stroke: #f0edf2;
    stroke-width: 0;

}

.map-category-name {

    padding-left: 6px;
    padding-right: 14px;
    font-size: 13px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: .5px;
}


/*max*/
@media screen and (max-width: 305px){
}
@media screen and (max-width: 423px){
}
@media screen and (max-width: 575px){
}
@media screen and (max-width: 767px){
	.trivia{
		height: 110px;
	}
	.trivia .right-content .title {
		font-size: 17px;
	}
	.trivia .right-content .introduction {
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	.part-1{
		padding-top: 30px;
	}
	.part > .content {
	    padding-top: 20px;
	    padding-bottom: 20px;
	}
	.part-3 .page-catalog {
	    margin-top: 25px;
	    margin-bottom: 10px;
	}
}

.dropbtn {
	color: #f7931e;
	font-size: 16px;
	border: none;
	cursor: pointer;
	padding: 5px;
}


.dropbtn:hover{
	background-color: #f7931e;
	color:#000;
	border: none;
}

.dropdown {
	position: relative;
	display: inline-block;
	float: right;
	margin: 0 20px;
	border: none;
}

.dropdown >button{
	border: 1px solid #f7931e;
	border-radius: 8px;
	line-height: 22px;
	margin-top: -10px;
}


.dropdown-content {
	display: none;
	position: absolute;
	min-width: 160px;
	overflow: auto;
	z-index: 1;
	background-color: #343a40;
}

.dropdown-content a {
	color: #fff;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}
.dropdown-content>a:hover{
	background-color: #f7931e;
	color: #000 !important;
	cursor:pointer
}
.show{display: block}
.backTop{
	display: none;
	position:fixed;
	bottom: 3%;
	right: 3%;
	cursor: pointer;
	opacity: 0.8;
}