body {
	background: url("https://hearthstone.nosdn.127.net/3/minisite/wd3rrew/cards/parchment.jpg") repeat-y 50% 0;
	background-size: cover;
	font-size: 12px;
	position: relative;
}
#app, #weibo, #gotop,#hsoa-link {
	display: none !important;
}
@media only screen and (max-width:939px){
#footer{
	overflow:hidden;
}
}
.g-header {
	background: #000 url("https://hearthstone.nosdn.127.net/3/minisite/wd3rrew/cards/intro-flat-bg.jpg") no-repeat 50% 0;
	background-size: cover;
	width: 100%;
	padding-top: 3%;
	text-align: center;
	margin-bottom: -10px;
	z-index: 1;
}
@media only screen and (max-width:640px) {
	.g-header {
		 background-image: url("https://hearthstone.nosdn.127.net/3/minisite/wd3rrew/cards/intro-flat-bg-tablet.jpg");
	}
}
.g-main{
	position: relative;
	z-index: 2;
}
@media only screen and (max-width:1000px) {
	#nav-client-header {
		display: none;
	}

}
.g-header .logo_cards {
	max-width: 500px;
	width: 60%;
	display: block;
	margin: 0 auto;
}
.g-header .logo_cards img{
	width: 100%;
}
.m-cardFilters {
	margin: 0 auto;
	width: 100%;
	position: relative;
}
.m-cardFilters ul {
	width: 786px;
	margin: 0 auto;
}
@media only screen and (max-width:786px){
    .m-cardFilters{
    	overflow-x:auto;
	    overflow-y: hidden;
    }
}

.m-cardFilters .class-item {
	width: 78px;
	height: 65px;
	display: inline-block;
	background-image: url("https://hearthstone.nosdn.127.net/3/minisite/wd3rrew/cards/card-gallery.png");
	background-repeat: no-repeat;
	transition: all 0.15s ease-in;
	-webkit-transition: all 0.15s ease-in;
	-ms-transition: all 0.15s ease-in;
	-moz-transition: all 0.15s ease-in;
	overflow: hidden;
	text-indent: -999em;
	transform: scale(0.9) translateY(10%);
	-ms-transform: scale(0.9) translateY(10%);
	-moz-transform: scale(0.9) translateY(10%);
	-webkit-transform: scale(0.9) translateY(10%);
	cursor: pointer;
}
.m-cardFilters .class-item:hover{
	filter: brightness(1.25);
	-webkit-filter: brightness(1.25);
	-moz-filter: brightness(1.25);
	-ms-filter: brightness(1.25);
}
.m-cardFilters .class-item.active {
	opacity: 1;
	filter: brightness(1.25);
	-webkit-filter: brightness(1.25);
	-moz-filter: brightness(1.25);
	-ms-filter: brightness(1.25);
	transform: scale(1.1) translateY(4%);
	-ms-transform: scale(1.1) translateY(4%);
	-webkit-transform: scale(1.1) translateY(4%);
	-moz-transform: scale(1.1) translateY(4%);
}

.m-cardFilters .heroClassDruid {
	background-position: -387px -212px;
}

.m-cardFilters .heroClassHunter {
	background-position: -307px -298px;
}

.m-cardFilters .heroClassMage {
	background-position: -387px -298px;
}

.m-cardFilters .heroClassPaladin {
	background-position: -387px -384px;
}

.m-cardFilters .heroClassPriest {
	background-position: -614px -470px;
}

.m-cardFilters .heroClassRogue {
	background-position: -694px -470px;
}

.m-cardFilters .heroClassShaman {
	background-position: 0 -587px;
}

.m-cardFilters .heroClassWarlock {
	background-position: -80px -587px;
}

.m-cardFilters .heroClassWarrior {
	background-position: -160px -587px;
}

.m-cardFilters .heroClassNeutral {
	background-position: -307px -384px;
}

.m-pageDivider {
	margin-top: -56px;
	height: 96px;
	background-image: url("https://hearthstone.nosdn.127.net/3/minisite/wd3rrew/cards/backgroundDividers2.png");
	background-repeat: no-repeat;
	background-position: center -2px;
	margin-bottom: -20px;
	position: relative;
	width: 100%;
	transform: translateY(50%);
	-webkit-transform: translateY(50%);
	-ms-transform: translateY(50%);
	-moz-transform: translateY(50%);
}

.m-tagButton {
	display: inline-block;
	position: relative;
	margin: 1.5rem 0 5.5rem;
	transform: scale(0.85);
	-webkit-transform: scale(0.85);
	-moz-transform: scale(0.85);
	-ms-transform: scale(0.85);
}

.m-tagButton:before, .m-tagButton:after {
	background-image: url("https://hearthstone.nosdn.127.net/3/minisite/wd3rrew/cards/kobolds-sprite.png");
	height: 160px;
	top: -54px;
	display: block;
	content: "";
	position: absolute;
}

.m-tagButton:before {
	left: -35px;
	background-position: -842px -1247px;
	width: 100%;
}

.m-tagButton:after {
	right: -35px;
	background-position: -1486px -1031px;
	width: 172px;
}

.m-tagButton .tagButton-cards {
	background: url("https://hearthstone.nosdn.127.net/3/minisite/wd3rrew/button_pack.png") no-repeat 0 0;
	position: absolute;
	width: 151px;
	height: 170px;
	top: -93%;
	left: -13%;
	z-index: 3;
}

.m-tagButton .button {
	color: #fff;
	font-weight: bold;
	padding: 1rem 1.3rem;
	border: none;
	border-radius: 5px;
	box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .35);
	text-shadow: 0 0 4px #000, 0 0 8px #000;
	font-size: 1rem;
	transition: all 0.2s ease-in;
	text-align: center;
	position: relative;
	vertical-align: middle;
	display: inline-block;
	padding-left: 140px;
	padding-right: 60px;
	margin-bottom: 5px;
	z-index: 2;
}

.m-tagButton .button:before, .m-tagButton .button:after {
	content: "";
	position: absolute;
	z-index: -1;
}

.m-tagButton .button:before {
	top: 2px;
	left: 2px;
	right: 2px;
	bottom: 2px;
	border-radius: 3px;
}

.m-tagButton .button:after {
	background: gray;
	background-position: 50%;
	background-repeat: repeat-y;
	background-size: contain;
	box-shadow: 0 2px 6px 0 #331e0b;
	top: 6px;
	left: 6px;
	right: 6px;
	bottom: 6px;
	transition: all 0.2s ease-in;
	border: 3px solid;
	border-radius: 2px;
}

.m-tagButton .button--primary {
	background: #bc22c7;
	background: linear-gradient(180deg, #ad9a90, #1c140d);
}

.m-tagButton .button--primary:before {
	background-color: #6f5742;
	background: linear-gradient(180deg, #6f5742, #81615d);
}

.m-tagButton .button--primary:after {
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANsAAAABCAIAAADYRExeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUuNSAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RUQ0RDNCMUFBRDAyMTFFNjk1QTNGMkIwRTAwQjA3MTAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RUQ0RDNCMUJBRDAyMTFFNjk1QTNGMkIwRTAwQjA3MTAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFRDREM0IxOEFEMDIxMUU2OTVBM0YyQjBFMDBCMDcxMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFRDREM0IxOUFEMDIxMUU2OTVBM0YyQjBFMDBCMDcxMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PlJgqloAAACnSURBVHjazJCBFYMgEEMTNuiCHavblvQSRUAXKCrHy8/lVL5fHwINtdRIynvOoFBHQnSNruiIPujQGSds9pnNRrSq8n6i0p0/aXJCPf1B3TXpnuyB8e85mRL/lpzeNW368QdLdfmn9iqqheOup4s3RaKi4PB39UroTih3fdhQHr3WJ71yFuqcGz2mJHmZclG/ARnKjuB8jFMQPbSKdW70e3ZlD/0JMAB1DqoGNYybhQAAAABJRU5ErkJggg==");
	border-image: linear-gradient(180deg, #f756fe, #661f91) 1;
	border-top-color: #f756fe;
	border-bottom-color: #661f91;
}

.m-tagButton:hover .button--primary:after {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANsAAAABCAIAAADYRExeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUuNSAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MEE4QUUxM0RBRDAzMTFFNjhFMDRCNUZGQUY3NTFCMUUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MEE4QUUxM0VBRDAzMTFFNjhFMDRCNUZGQUY3NTFCMUUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowQThBRTEzQkFEMDMxMUU2OEUwNEI1RkZBRjc1MUIxRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowQThBRTEzQ0FEMDMxMUU2OEUwNEI1RkZBRjc1MUIxRSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PjdlBcYAAACSSURBVHjavE5bDgQhCCvcYy++B9nj2VUeCjGZz9EEa6Gl8v38AKgICJnHC42Bf7DIgI7hdFGlFk1lzhoMXWVMUS0mVLqxnl259zicvT15c7jSbqw3X33w4uG8EHIkxuAMAfIBs/Kz0vBqpI9hU8FnxsYjVQgVt4N1e5LiwKYyT8kZ90RzyAyRtu4d0bTnmvwLMABZL5ltpZKYvwAAAABJRU5ErkJggg==);
}

.m-tagButton:hover .tagButton-cards {
	animation: cardShake 2s cubic-bezier(.36, .07, .19, .97) both infinite;
}

@keyframes cardShake {
	10%, 20% {
		transform: rotate(2deg)
	}

	5%, 15% {
		transform: rotate(-2deg)
	}

	25%, 95% {
		transform: rotate(0deg)
	}

}
@-webkit-keyframes cardShake {
	10%, 20% {
		transform: rotate(2deg)
	}

	5%, 15% {
		transform: rotate(-2deg)
	}

	25%, 95% {
		transform: rotate(0deg)
	}

}
@-moz-keyframes cardShake {
	10%, 20% {
		transform: rotate(2deg)
	}

	5%, 15% {
		transform: rotate(-2deg)
	}

	25%, 95% {
		transform: rotate(0deg)
	}

}
@media only screen and (min-width:1000px) {
	.m-cardFilters:after {
		content: "";
		position: absolute;
		/*background: url("https://hearthstone.nosdn.127.net/3/minisite/wd3rrew/cards/decoration.png") no-repeat  0 0;*/
		width: 157px;
		height: 107px;
		right: -4px;
		bottom: -27px;
	}

	.m-pageDivider {
		margin-left: 20px;
		width: calc(100% - 20px - 75px);
		margin-bottom: 20px;
	}

	.m-pageDivider:before, .m-pageDivider:after {
		content: "";
		top: 0;
		height: 100%;
		position: absolute;
		background-image: url("https://hearthstone.nosdn.127.net/3/minisite/wd3rrew/cards/backgroundDividers2.png");
		background-repeat: no-repeat;
		z-index: 1;
	}

	.m-pageDivider:before {
		background-position: left -106px;
		left: -20px;
		width: 60px;
	}

	.m-pageDivider:after {
		background-position: right -106px;
		right: -75px;
		width: 120px;
	}

}
.m-cardClassHeader{
	text-align: center;
	width: 305px;
	height: 84px;
	margin:0 auto 1.5%;
	line-height: 84px;
	font-size: 14px;
	color: #000;
	background: url("https://hearthstone.nosdn.127.net/3/minisite/wd3rrew/cards/card-gallery.png") no-repeat 0 -298px;
}
.m-cardClassHeader.classBg-druid{
	background-position: 0 -470px
}
.m-cardClassHeader.classBg-hunter{
	background-position: -307px -470px
}
.m-cardClassHeader.classBg-mage{
	background-position:-522px -172px
}
.m-cardClassHeader.classBg-paladin{
	background-position:0 -384px
}
.m-cardClassHeader.classBg-priest{
	background-position:-522px 0
}
.m-cardClassHeader.classBg-rogue{
	background-position:-522px -86px
}
.m-cardClassHeader.classBg-shaman{
	background-position:0 -212px
}
.m-cardClassHeader.classBg-warlock{
	background-position:-522px -258px
}
.m-cardClassHeader.classBg-warrior{
	background-position:-522px -344px
}
.m-cardClassHeader.classBg-neutral{
	background-position:0 -298px
}
.m-revealedCards{
	   max-width: 1160px;
	   display: flex;
	   -webkit-display: flex;
	   -ms-display: flex;
	   -moz-display: flex;
	   flex-wrap: wrap;
	   -webkit-flex-wrap: wrap;
	   -moz-flex-wrap: wrap;
	   -ms-flex-wrap: wrap;
	   justify-content:center;
	   -webkit-justify-content:center;
	   -moz-justify-content:center;
	   -ms-justify-content:center;
	   align-content:space-around;
	   -webkit-align-content:space-around;
	   -moz-align-content:space-around;
	   -ms-align-content:space-around;
	   min-height: 360px;
	   margin-bottom: 15px;
	   text-align: center;
	   margin:0 auto;
	   box-sizing: border-box;
	   padding-bottom: 50px;
 }
@media screen and (-webkit-min-device-pixel-ratio:0) {
	.m-revealedCards li{
         display: inline-block;
	}
} 
 .m-revealedCards li{
       width: 232px;
       margin-bottom: 30px;
       cursor: pointer;
       -webkit-tap-highlight-color:transparent;
 }
  .m-revealedCards li.noData{
  	font-size: 16px;
  	color: #000;
  }
  .m-revealedCards li img{
  	width: 100%;
  }

  /*pop*/

#boxModel{
	position: fixed;
	left: 0;
	top: 0;
	background: #000;
	opacity: 0.8;
	z-index: 99998;
	font-size: 60px;
}
#popBox{
	width: 375px;
	height: 518px;
	position: fixed;
	z-index: 99999;
	text-align: center;
}
#popBox .num{
	position: fixed;
	top: 10px;
	left: 10px;
	font-size: 14px;
}
#popBox .closeBtn{
	font-size: 16px;
	position: fixed;
	right: 20px;
	top: 20px;
	cursor: pointer;
}
#popBox .prevBtn,#popBox .nextBtn{
	width: 70px;
	height: 100px;
	position: fixed;
	top: 50%;
	margin-top: -50px;
}
#popBox .prevBtn{
	left: 20px;
}
#popBox .nextBtn{
	right: 20px;
}
#popBox .prevBtn:before,#popBox .nextBtn:before{
	background: url("https://hearthstone.nosdn.127.net/3/minisite/wd3rrew/cards/lightbox.png") no-repeat 0 0;
	content: "";
	display: block;
	width: 44px;
	height: 44px;
	position: relative;
	left: 13px;
	top: 28px;
}
#popBox .nextBtn:before{
	background-position: -40px 0
}
#popBox .prevBtn:hover:before{
	background-position: 0 -45px;
}
#popBox .nextBtn:hover:before{
	background-position: -40px -45px;
}