/*==========卡包背景==========*/
div.pack_frame{
	height:180px;min-width:160px;
	display:inline-block;
	position:relative;
	text-align: center;
}
div.pack_frame div.pack_frame_title{
	height:24px;
}
div.pack_frame div.pack_frame_title a{
	line-height:24px;
}
div.pack_frame div.pack_frame_title h2{
	line-height:24px;
}
div.pack_frame div.pack_frame_content{
	height:128px;
}
div.pack_border{
	display:inline-block;
	position:relative;
	width:128px;height:128px;
	background-image: url('../../img/cards/pack_border.png');
}
.pack_icon{
	position:absolute;
	left:0px;bottom:0px;
	width:128px;height:128px;
	-webkit-mask-image: url('../../img/cards/pack_mask.png');
	mask-image: url('../../img/cards/pack_mask.png');
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	z-index:5;
}
.pack_title_button{
	width:128px;padding: 7px 0!important;
}
/*==========卡片基础显示==========*/
.cardframe_show div{
	position:absolute;
}
.cardframe_show span{
	font-weight:normal;
}
.cardframe_show span.b{
	font-weight:bold;
}
.lockcard
{
	filter:alpha(opacity=0.55); -moz-opacity:0.55;opacity: 0.55;
}
div.cardpanel
{
	position:absolute; white-space:nowrap;
	left:0px; top:0px; 
	padding:10px;
	height:460px; width:710px; 
	text-align:left; 
	overflow-x:auto; overflow-y:hidden;
}
div.cardpack_bar{
	position:relative;
	height:40px;
	width:160px;
}
div.cardpack_bar img.cardpack_bg{
	position:absolute;
	left:0px;
	top:0px;
}
div.cardpack_bar div.cardpack_cnt{
	position:absolute;
	right:5px;
	top:8px;
}
div.cardpack_bar div.cardpack_czone{
	position:absolute;
	left:0px;
	top:0px;
	height:40px;
	width:160px;
	cursor:pointer;
}
div.card_row{
	display:inline-block;
	width:175px;
	vertical-align:top;
}
div.card_bar{
	height:25px;
	width:170px;
}
div.pt{cursor:pointer;}
div.card_bar img.card_bg{
	position:absolute;
	top:0px; 
	left:0px;
}
div.card_bar div.card_name{
	position:absolute;
	top:4px;
	left:4px;
}
div.card_bar div.card_czone{
	position:absolute;
	top:0px;
	left:0px;
	height:25px;
	width:170px;
}
div.card_bar div.card_err{
	position:absolute;
	top:0px;
	left:0px;
	height:25px;
	width:170px;
}
div.card_frame_inner rt{
	font-size:12px; 
	transform: scale(1);
	-webkit-transform: scale(1);
}

div.card_newflag {position:absolute;z-index:20;top:-2px;left:10px;text-shadow:1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000;}
/*==========卡片动画显示==========*/
div.cardbox
{
	/* 使该盒子具有3D属性 */
  transform-style: preserve-3d;

  /*动画效果历时1秒 */
  transition: 1s;
  
  transform-origin: 50% 50%;
  
  width:240px; height:320px;
}

.showfront {
	/* 让卡片背面与正面重合 */
  position: absolute;
  
  /* 隐藏卡片背面 */
  backface-visibility: hidden;
}

.showback {
	/* 让卡片背面与正面重合 */
  position: absolute;
  
  /* 隐藏卡片背面 */
  backface-visibility: hidden;
  
  /* 让在背面显示的内容转到背面 */
  transform: rotateY(180deg);
}

/* 点击时切换的样式 */
.card_flipped {
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -moz-transform: perspective(800) rotateY(180deg);
  -webkit-transform: perspective(800) rotateY(180deg);
  transform: perspective(800) rotateY(180deg);
}

img.cardback{
	width:240px;height:320px;
	-moz-border-radius:9px; 
	-webkit-border-radius:9px;
	border-radius:9px;
}

img.card_locked_logo{width:150px;height:150px;position:absolute;z-index:30;top:110px;left:45px;}

img.card_achieved{width:35px;height:20px;position:absolute;z-index:20;top:-13px;left:11px;}

div.card_highlight{
	-moz-border-radius:9px; 
	-webkit-border-radius:9px;
	border-radius:9px;
}

div.card_highlight.hl_cyan{
	box-shadow: 0 0 18px rgba(  0,255,255,  1);
	-webkit-box-shadow: 0 0 18px rgba(  0,255,255,  1);
	-moz-box-shadow: 0 0 18px rgba(  0,255,255,  1);
}

div.card_highlight.hl_gold{
	box-shadow: 0 0 18px rgba(252,174, 10,  1);
	-webkit-box-shadow: 0 0 18px rgba(252,174, 10,  1);
	-moz-box-shadow: 0 0 18px rgba(252,174, 10,  1);
}

div.card_highlight.hl_purple{
	box-shadow: 0 0 18px rgba(192,  0,192,  1);
	-webkit-box-shadow: 0 0 18px rgba(192,  0,192,  1);
	-moz-box-shadow: 0 0 18px rgba(192,  0,192,  1);
}

div.card_frame_outer
{
	position:relative;
	-moz-border-radius:12px; 
	-webkit-border-radius:12px;
	border-radius:12px;
	height:320px; width:240px;
	overflow:hidden; 
	background-color:rgba(144,144,144,0.6); *BACKGROUND:rgb(144,144,144); *filter:alpha(opacity=60);
}

div.card_frame_middler
{
	position:absolute;z-index:10;
}

div.frame_S{background-color:rgba(252,174,10,0.6); *BACKGROUND:rgb(252,174,10); *filter:alpha(opacity=60);}
div.frame_A{background-color:rgba(90,240,255,0.6); *BACKGROUND:rgb(90,240,255); *filter:alpha(opacity=60);}
div.frame_B{background-color:rgba(250,128,110,0.6); *BACKGROUND:rgb(250,128,110); *filter:alpha(opacity=60);}

div.card_frame_inner
{
	display: flex;
	position:relative;
	align-items: center;
	justify-content: center;
	-moz-border-radius:9px; 
	-webkit-border-radius:9px;
	border-radius:9px;
	width:234px;
	margin:3px;
	background-color:rgba(0,0,0,0.7); *BACKGROUND:rgb(0,0,0); *filter:alpha(opacity=70);
	text-align:center;
}

div.card_frame_inner .watermark
{
	position:absolute;bottom:3px;right:6px;z-index:-5;
	color: #000; font:bold 18pt "Arial";
	filter:alpha(opacity=0.15); -moz-opacity:0.15; opacity:0.15; -khtml-opacity: 0.15;
}

div.card_frame_float_left
{
	margin:0 3px;float:left;
}

div.card_frame_float_right
{
	margin:0 3px;float:right;
}

div.card_frame_inner span#cname
{
	font:bold 12pt "微软雅黑";
}

.card_hexagon {
	top:12px;left:3px;
  width: 50px;
  height: 28px;
  background: #888;
  position: absolute;
  text-align:center;
  z-index:15;
}

.card_hexagon span {
	position: relative;font:bold 18pt "微软雅黑";color:#000;
	line-height:28px;
}

.card_hexagon:before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 12px solid #888;
}
.card_hexagon:after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 12px solid #888;
}

div.hexagon_S{background:rgb(252,174,10);}
div.hexagon_S:before{ border-bottom: 12px solid rgb(252,174,10);}
div.hexagon_S:after{ border-top: 12px solid rgb(252,174,10);}

div.hexagon_A{background:rgb(90,220,240);}
div.hexagon_A:before{ border-bottom: 12px solid rgb(90,220,240);}
div.hexagon_A:after{ border-top: 12px solid rgb(90,220,240);}

div.hexagon_B{background:rgb(220,108,90);}
div.hexagon_B:before{ border-bottom: 12px solid rgb(220,108,90);}
div.hexagon_B:after{ border-top: 12px solid rgb(220,108,90);}

div.card_blink_container {
	position: absolute;
	top: 0;
  left: 0;
  width: 240px;
  height: 320px;
  z-index:11;
  overflow:hidden;
  -moz-border-radius:9px; 
	-webkit-border-radius:9px;
	border-radius:9px;
	
	-webkit-mask-image: url("../../img/card_blink_mask_2.png");
	mask-image: url("../../img/card_blink_mask_2.png");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

div.blink_maskii {
	-webkit-mask-image: url("../../img/card_blink_mask_3.png");
	mask-image: url("../../img/card_blink_mask_3.png");
}

div.card_blink {
	position: absolute;
	top: -1300px;
	left: 400px;
	width:200px;
	height:2000px;
  animation: rotation 6s infinite linear;
}

div.card_blinkii {
	position: absolute;
	top: -1300px;
	left: 400px;
	width:200px;
	height:2000px;
  animation: rotation 6s infinite linear;
}

div.blink_gold {
  background: linear-gradient(90deg, transparent, #ffeebb, transparent);
}

div.blink_cyan {
  background: linear-gradient(90deg, transparent, #ddffff, transparent);
}

div.blink_brickred {
  background: linear-gradient(90deg, transparent, #ffbbaa, transparent);
}

div.blink_grey {
  background: linear-gradient(90deg, transparent, #cccccc, transparent);
}

@keyframes rotation{
	0% {
		transform: rotateZ(0deg);
	}
	100% {
		transform: rotateZ(360deg);
	}
}