/* ----------------------------- */
/* ----------- imports --------- */
/* ----------------------------- */

@font-face {
    font-family: Microsoft Jheng Hei;
    src: url(../fonts/Microsoft-JhengHei.ttf);
}

@font-face {
    font-family: Microsoft Jheng Hei Bold;
    src: url(../fonts/Microsoft-JhengHei-Bold.ttf);
}

@font-face {
    font-family: Roboto Bold;
    src: url(../fonts/Roboto-Bold.ttf);
}

@font-face {
    font-family: Roboto;
    src: url(../fonts/Roboto-Regular.ttf);
}

/* ----------------------------- */
/* ---------- settings --------- */
/* ----------------------------- */

html, body, header, nav, section, aside, article, footer, div,
span, applet, object, iframe, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: Roboto;
}

*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

a{
	text-decoration: none;
	text-transform: none;
	color: #fff;
}

/* ----------------------------- */
/* ---------- inputs ----------- */
/* ----------------------------- */

input{border: 1px solid #000; outline: none; padding: 5px;}
.quest-img-body {width: 850px;}
.quest-img-body img {width: 100%;}
@media (max-width: 1200px) {  .quest-img-body {width: 100%;} }
::-webkit-input-placeholder {color:#5f6163;}
::-moz-placeholder          {color:#5f6163;}
:-moz-placeholder           {color:#5f6163;}
:-ms-input-placeholder      {color:#5f6163;}

::-webkit-input-placeholder       {opacity: 1; transition: opacity 0.3s ease;}
::-moz-placeholder                {opacity: 1; transition: opacity 0.3s ease;}
:-moz-placeholder                 {opacity: 1; transition: opacity 0.3s ease;}
:-ms-input-placeholder            {opacity: 1; transition: opacity 0.3s ease;}
:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}
:focus::-moz-placeholder          {opacity: 0; transition: opacity 0.3s ease;}
:focus:-moz-placeholder           {opacity: 0; transition: opacity 0.3s ease;}
:focus:-ms-input-placeholder      {opacity: 0; transition: opacity 0.3s ease;}

/* ----------------------------- */
/* -------- checkbox ----------- */
/* ----------------------------- */

.checkbox > .checkbox-input {
	display: none;
}

.checkbox > .checkbox-custom {
	position: relative;
	width: 20px;
	height: 20px;
	border: 1px solid #363840;
	cursor: pointer;
}

.checkbox > .checkbox-custom,
.checkbox > .label {
	display: inline-block;
	vertical-align: middle;
}

.checkbox > .label{
	padding-left: 10px;
	color: #b9b9ba;
	font-family: Microsoft Jheng Hei Bold;
}

.checkbox > .checkbox-input:checked + .checkbox-custom::before {
	content: "";
	display: block;
	position: absolute;
	top: 4px;
	right: 4px;
	bottom: 4px;
	left: 4px;
	background: linear-gradient(45deg, #fe924c, #fd686f);
}

/* ----------------------------- */
/* ---------- messages --------- */
/* ----------------------------- */

.msg{
	width: 500px;
	position: fixed;
	right: 40px;
	bottom: 40px;
	z-index: 9999;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding: 25px;
}

/* ------- messages green ------ */

.msg-green{
	background: linear-gradient(30deg, #181f15 0%, #1c2419 100%);
}

.msg-green > .info{
	width: calc( 100% - 150px );
}

.msg-green > .info > .title{
	font-family: Microsoft Jheng Hei Bold;
	font-size: 20px;
	color: #fff;
}

.msg-green > .info > .text{
	font-family: Microsoft Jheng Hei Bold;
	font-size: 12px;
	color: #dfffa6;
}

.msg-green > .wnd-button{
	width: 150px;
	height: 50px;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	position: relative;
	border: 1px solid transparent;
	-moz-border-image: -moz-linear-gradient(to left, #9be89e 0%, #d1fb7b 100%);
	-webkit-border-image: -webkit-linear-gradient(to left, #9be89e 0%, #d1fb7b 100%);
	border-image: linear-gradient(to left, #9be89e 0%, #d1fb7b 100%);
	border-image-slice: 1;
	background: #34452e;
	font-family: Microsoft Jheng Hei Bold;
	font-size: 16px;
	color: #fff;
	cursor: pointer;
	text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);
	margin: -1px;
	z-index: 1;
}

.msg-green > .wnd-button:hover:after{
	opacity: 1;
}

.msg-green > .wnd-button > span{
	position: relative;
	z-index: 2;
}

.msg-green > .wnd-button:after{
	content: '';
	width: 100%;
	height: 100%;
	background: linear-gradient(to left, #9be89e 0%, #d1fb7b 100%);
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
	transition: all .2s ease-in-out;
	opacity: 0;
}

/* -------- messages red ------- */

.msg-red{
	background: linear-gradient(30deg, #2d252d 0%, #211a22 100%);
}

.msg-red > .info{
	width: 100% - 150px;
}

.msg-red > .info > .title{
	font-family: Microsoft Jheng Hei Bold;
	font-size: 20px;
	color: #fff;
}

.msg-red > .info > .text{
	font-family: Microsoft Jheng Hei Bold;
	font-size: 12px;
	color: #f37a81;
}

.msg-red > .msg-close{
	position: absolute;
	top: 15px;
	right: 15px;
	font-size: 16px;
	color: #754148;
	cursor: pointer;
	transition: all .2s ease-in-out;
}

.msg-red > .msg-close:hover{
	color: #f37a81;
}

/* ----------------------------- */
/* ----------- popup ----------- */
/* ----------------------------- */

.popup, .popup-t{
	position: fixed;
	z-index: 8888;
	display: none;
	transition: all .5s ease-in-out;
}
.popup-t {
	padding: 35px;
}
.popup-t> .popup-btn-t {
	display: block;
	width: 100%;
	height: 60px;
	border: 1px solid transparent;
	-moz-border-image: -moz-linear-gradient(to left, #9be89e 0%, #d1fb7b 100%);
	-webkit-border-image: -webkit-linear-gradient(to left, #9be89e 0%, #d1fb7b 100%);
	border-image: linear-gradient(to left, #9be89e 0%, #d1fb7b 100%);
	border-image-slice: 1;
	background: transparent;
	margin-top: 5px;
	cursor: pointer;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 2;
	margin-top: 35px;
}
.popup-btn-t:hover:after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	background: linear-gradient(to left, #9be89e 0%, #d1fb7b 100%);
	z-index: 1;
	transition: all .2s ease-in-out;
	opacity: 0;
}
.popup-t> .popup-btn-t span {
	font-family: Microsoft Jheng Hei Bold;
	font-size: 18px;
	color: #fff;
	position: relative;
	z-index: 2;
}
.popup-content, .popup-content-t{
	width: 100%;
	height: 100%;
	overflow-y: auto;
}

.popup-bg, .popup-bg-t {
	width: 100%;
	height: 100vh;
	background: rgba(0,0,0,0.6);
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 8887;
	display: none;
}

.popup > .popup-closed, .popup-t > .popup-closed-t{
	position: absolute;
	top: 12px;
	right: 15px;
	font-size: 20px;
	color: #5b5c60;
	cursor: pointer;
	transition: all .2s ease-in-out;
}

.popup > .popup-closed:hover{
	color: #fff;
}
.popup-t>.popup-closed-t:hover{
	color: #fff;
}

.blur-block{
	filter: blur(5px);
}

.popup-btn{
	cursor: pointer;
}

/* ----------------------------- */
/* ----------------------------- */
/* ----------------------------- */

body{
	background: #14151b;
	overflow-x: hidden;
}

.page{
	width: 100%;
	min-height: 100vh;
	padding-top: 88px;
	padding-left: 231px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}

nav{
	width: 100%;
	height: 88px;
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/bg/nav_bg.jpg) top left;
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 10;
}

aside{
	width: 231px;
	height: calc( 100vh - 88px );
	border-right: 1px solid #2f3035;
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/bg/live_drop_bg.jpg) #0b0c11 top left no-repeat;
	position: fixed;
	top: 88px;
	left: 0px;
}

#content{
	width: 100%;
	height: initial;
	min-height: calc( 100vh - 88px );
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/bg/content_bg.jpg) #0d1015 top no-repeat;
	background-size: 100% auto;
	overflow-x: hidden;
}

.content-dota{
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/bg/content_dota_bg.jpg) #17181c top no-repeat !important;
	background-size: 100% auto !important;
}

.w100{
	width: calc( 100% - 80px );
	margin: 0 auto;
	margin-top: 40px;
}

/* ----------------------------- */
/* ----------- logo ------------ */
/* ----------------------------- */

nav .logo-block{
	width: 230px;
	height:100%;
	/*height: 98%;!* ---------- 万圣节 ----------- *!*/
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: flex-end;
	border-bottom: 1px solid #1e1f27;
	/*background: url(../images/halloween/Halloweenlogobc.png)center;!* ---------- 万圣节 ----------- *!*/
}

nav .logo-block > a{
	width: 164px;
	/*height: 87px; ---------- 元旦 ----------- *!*/
	height: 45px;
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/logo.png);
	/*background: url(../images/pg11.png);!* ---------- 元旦 ----------- *!*/
	margin-bottom: 20px;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
}

nav .logo-block > a:before{
	content: '';
	display: block;
	width: 100px;
	height: 100px;
	margin-left: 11px;
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/nav_icons/logo_hover.png);
	background-size: 100% 100%;
	transition: all .2s ease-in-out;
	opacity: 0;
	mix-blend-mode: hard-light;
}

nav .logo-block > a:hover:before{
	opacity: 0.6;
	width: 150px;
}

/* ----------------------------- */
/* -------- navigation --------- */
/* ----------------------------- */

/* ---------- switch ----------- */

nav .navigatin-block{
	width: calc( 100% - 238px );
	height: 100%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-end;
	border-bottom: 1px solid #2f3035;
	/*background: url(../images/halloween/eggnavbc.png)center;!* ---------- 圣诞节 ----------- *!*/
}

nav .navigatin-block .game-switch{
	width: 150px;
	height: 70px;
	background: rgba(40,42,46,0.4);
	border-top: 1px solid #2f3035;
	border-left: 1px solid #2f3035;
	border-right: 1px solid #2f3035;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
}

nav .navigatin-block .game-switch > a{
	width: 50%;
	height: 100%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	position: relative;
}

nav .navigatin-block .game-switch > a:nth-child(1){
	border-right: 1px solid #2f3035;
}

nav .navigatin-block .game-switch > a:hover .hover{
	opacity: 1;
}

nav .navigatin-block .game-switch > .active > .hover,
nav .navigatin-block .game-switch > .active > .active,
nav .navigatin-block .game-switch > .active > .border_bottom{
	opacity: 1;
}

nav .navigatin-block .game-switch > a > img{
	position: absolute;
}

nav .navigatin-block .game-switch > a > .hover{
	opacity: 0;
	transition: all .2s ease-in-out;
}

nav .navigatin-block .game-switch > a > .active{
	opacity: 0;
	transition: all .2s ease-in-out;
	mix-blend-mode: hard-light;
}

nav .navigatin-block .game-switch > a > .border_bottom{
	width: 70%;
	height: 3px;
	background: linear-gradient(to left, #fe924c, #fd686f);
	position: absolute;
	bottom: -2px;
	opacity: 0;
}

/* ----------- menu ------------ */

nav .menu{
	height: 100%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
}

nav .navigatin-block .menu > a{
	height: 100%;
	padding-left: 50px;
	padding-right: 12px;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	position: relative;
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/nav_icons/menu_hover.png) bottom repeat-x;
	background-size: 100% 0px;
	transition: all .2s ease-in-out;
	margin-left: 10px;
	margin-right: 10px;
	font-size: 14px;
}

nav .navigatin-block .menu > a:hover {
	background-size: 100% 50%;
}

nav .navigatin-block .menu > a:hover .hover{
	opacity: 1;
}

nav .navigatin-block .menu > a:hover .text{
	color: #ea814c;
}

nav .navigatin-block .menu > .active{
	background-size: 100% 50%;
}

nav .navigatin-block .menu > .active > .active{
	opacity: 1;
}

nav .navigatin-block .menu > .active > .hover{
	opacity: 1;
}

nav .navigatin-block .menu > a > img{
	position: absolute;
	left: 12px;
}

nav .navigatin-block .menu > a > .hover{
	opacity: 0;
	transition: all .2s ease-in-out;
}

nav .navigatin-block .menu > a > .active{
	width: 100%;
	height: 1px;
	background: linear-gradient(to left, #fe924c, #fd686f);
	position: absolute;
	left: 0px;
	bottom: -1px;
	opacity: 0;
}

nav .navigatin-block .menu > a > .text{
	font-family: Microsoft Jheng Hei Bold;
	font-size: 14px;
	color: #fff;
	transition: all .2s ease-in-out;
}

/* -------- lang-switch -------- */

nav .lang-switch{
	width: 90px;
	height: 100%;
	border-left: 1px solid #1d1e24;
	border-right: 1px solid #1d1e24;
	position: relative;
}

nav .lang-switch .lang-active{
	width: 100%;
	height: 100%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	color: #fff;
	cursor: pointer;
	transition: all .2s ease-in-out;
}

nav .lang-switch .lang-active:hover{
	background: #17191f;
}

nav .lang-switch .lang-active > .lang-arrow{
	width: 10px;
	height: 6px;
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/nav_icons/lang_arrow.png);
	margin-left: 7px;
	opacity: 0.5;
}

nav .lang-switch .lang-list{
	width: 160px;
	position: absolute;
	right: -1px;
	top: calc( 100% + 1px );
	background: #232529;
	border-left: 1px solid #2f323a;
	border-right: 1px solid #2f323a;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	display: none;
}

nav .lang-switch .lang-list > a{
	width: 100%;
	height: 50px;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #2f323a;
	padding-top: 12px;
	padding-bottom: 12px;
}

nav .lang-switch .lang-list > a:hover{
	background: #27292d;
}

nav .lang-switch .lang-list > a:hover .icon{
	background: linear-gradient(90deg, #99df96 50%, #cdfa7e);
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
}

nav .lang-switch .lang-list > a > .name{
	font-size: 14px;
	color: #868788;
	padding-left: 20px;
	padding-right: 20px;
}

nav .lang-switch .lang-list > a > .icon{
	font-size: 14px;
	color: #48494c;
	padding-left: 20px;
	padding-right: 20px;
	font-family: Roboto Bold;
}
#lotteryDataDiv{
	/*background: url(../images/halloween/egglotterybc.png)center;!* ---------- 圣诞节 ----------- *!*/
	/*background: url(https://skinsbase.oss-cn-hangzhou.aliyuncs.com/activity/piggycase/egglotterybc.png)center;*/
}
/* ------------ user ----------- */

nav .nav-user{
	width: 270px;
	height: 100%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	padding-right: 25px;
}

nav .nav-user .top-up-balance{
	width: 70px;
	height: 100%;
	border-left: 1px solid #1d1e24;
	border-right: 1px solid #1d1e24;
	position: relative;
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/nav_icons/donate_icon.png) center center no-repeat;
	cursor: pointer;
	transition: all .2s ease-in-out;
}

nav .nav-user .top-up-balance:hover{
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/nav_icons/donate_icon.png) #17191f center center no-repeat;
}

nav .nav-user .user-avatar{
	width: 53px;
	height: 53px;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	border-radius: 53px;
	overflow: hidden;
}

nav .nav-user .user-avatar img{
	width: 100%;
	height: 100%;
}

nav .nav-user .user-information{
	width: calc( 100% - 53px - 70px );
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	padding-left: 20px;
	padding-right: 20px;
}

nav .nav-user .user-information .user-name{
	width: 100%;
	font-family: Roboto Bold;
	color: #fff;
	text-align: right;
	margin-top: auto;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

nav .nav-user .user-information .user-balance{
	width: 100%;
	font-family: Roboto;
	color: #fff;
	font-size: 14px;
	text-align: right;
	margin-bottom: auto;
}

nav .nav-user .user-information .user-balance span{
	background: linear-gradient(90deg, #99df96 50%, #cdfa7e);
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
}

/* --------- authorize --------- */

nav .authorize{
	width: 300px;
	height: 100%;
	padding-right: 25px;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
}

nav .authorize .login-button{
	width: calc( ( 100% - 70px ) / 2 );
	height: calc( 100% - 40px );
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	position: relative;
	border: 1px solid transparent;
	-moz-border-image: -moz-linear-gradient(to left, #ff9944 0%, #fc6076 100%);
	-webkit-border-image: -webkit-linear-gradient(to left, #ff9944 0%, #fc6076 100%);
	border-image: linear-gradient(to left, #ff9944 0%, #fc6076 100%);
	border-image-slice: 1;
	background: linear-gradient(180deg, #131317 0%, #281e1c 100%);
	font-family: Microsoft Jheng Hei Bold;
	font-size: 16px;
	color: #fff;
	cursor: pointer;
	text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);
}

nav .authorize .login-button:hover:after{
	opacity: 1;
}

nav .authorize .login-button span{
	position: relative;
	z-index: 2;
}

nav .authorize .login-button:after{
	content: '';
	width: 100%;
	height: 100%;
	background: linear-gradient(to left, #ff9944 0%, #fc6076 100%);
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
	transition: all .2s ease-in-out;
	opacity: 0;
}

nav .authorize .steam-login-button{
	width: 65px;
	height: calc( 100% - 40px );
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	position: relative;
	border: 1px solid transparent;
	-moz-border-image: -moz-linear-gradient(to left, #9ae89e 0%, #c2f685 100%);
	-webkit-border-image: -webkit-linear-gradient(to left, #9ae89e 0%, #c2f685 100%);
	border-image: linear-gradient(to left, #9ae89e 0%, #c2f685 100%);
	border-image-slice: 1;
	background: linear-gradient(180deg, #131317 0%, #281e1c 100%);
	font-family: Microsoft Jheng Hei Bold;
	font-size: 16px;
	color: #fff;
	cursor: pointer;
	margin: auto 5px;
}
nav .authorize .qq-login-button{
	width: 50px;
	height: calc( 100% - 40px );
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	position: relative;
	border: 1px solid transparent;
	-moz-border-image: -moz-linear-gradient(to left, #9ae89e 0%, #c2f685 100%);
	-webkit-border-image: -webkit-linear-gradient(to left, #9ae89e 0%, #c2f685 100%);
	border-image: linear-gradient(to left, #9ae89e 0%, #c2f685 100%);
	border-image-slice: 1;
	background: linear-gradient(180deg, #131317 0%, #281e1c 100%);
	font-family: Microsoft Jheng Hei Bold;
	font-size: 16px;
	color: #fff;
	cursor: pointer;
}
nav .authorize .steam-login-button:hover:after{
	opacity: 1;
}

nav .authorize .steam-login-button i{
	position: relative;
	z-index: 2;
	font-size: 24px;
	background: linear-gradient(90deg, #99df96 50%, #cdfa7e);
    background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

nav .authorize .steam-login-button:after{
	content: '';
	width: 100%;
	height: 100%;
	background: linear-gradient(to left, #1f211d 50%, #353326 100%);
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
	transition: all .2s ease-in-out;
	opacity: 0;
}

nav .authorize .register-button{
	width: calc( ( 100% - 70px ) / 2 );
	height: calc( 100% - 40px );
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	position: relative;
	font-family: Microsoft Jheng Hei Bold;
	font-size: 16px;
	color: #a4a4a5;
	cursor: pointer;
	border: 1px solid #111217;
	transition: all .2s ease-in-out;
	margin-right: 5px;
}

nav .authorize .register-button:hover{
	color: #fff;
	border: 1px solid #404147;
}

/* ---- navigation-switch ------ */

nav .open-navigation{
	width: 88px;
	height: 100%;
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/nav_icons/icon_nav.png) center center no-repeat;
	cursor: pointer;
	display: none;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	display: none;
}

nav .open-navigation:hover:after{
	opacity: 1;
}

nav .open-navigation:after{
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/nav_icons/game_active.png);
	background-size: 100% 100%;
	transition: all .2s ease-in-out;
	mix-blend-mode: hard-light;
	opacity: 0;
}

nav .close-navigation{
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/nav_icons/close_nav.png) center center no-repeat;
}

/* ----------------------------- */
/* --------- live drop --------- */
/* ----------------------------- */

/* ---------- settings --------- */

aside .ld-setting{
	width: 100%;
	border-bottom: 1px solid #1e1f27;
	padding: 20px 25px 20px 25px;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
}

aside .ld-setting span{
	font-family: Microsoft Jheng Hei;
	font-size: 14px;
	color: #fff;
}

aside .ld-setting .ld-switch{
	width: 43px;
	height: 23px;
	border-radius: 20px;
	border: 1px solid #23252a;
	padding: 3px;
	cursor: pointer;
}

aside .ld-setting .ld-switch > .tumb{
	width: 15px;
	height: 15px;
	border-radius: 20px;
	background: #e96763;
	box-shadow: 0px 0px 10px 0px #ed5371;
	pointer-events: none;
	transition: all .2s ease-in-out;
	float: right;
}

aside .ld-setting .ld-switch > .tumb-off{
	background: #41444b;
	box-shadow: none;
	transform: translateX(-20px);
}

/* ------ live drop items ------ */

aside .ld-item{
	width: 100%;
	height: 126px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #1e1f27;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	position: relative;
	-moz-user-select: none;
	-khtml-user-select: none;
	user-select: none;
}

aside .ld-item:hover .icon,
aside .ld-item:hover .name{
	opacity: 0;
}

aside .ld-item:hover .ld-winner{
	opacity: 1;
}

aside .ld-item > .type{
	position: absolute;
	top: 10px;
	left: 0px;
	pointer-events: none;
	z-index: 1;
}

aside .ld-item > .icon{
	width: calc( 100% - 120px );
	margin-top: 5px;
	pointer-events: none;
	position: relative;
	z-index: 2;
	transition: all .2s ease-in-out;
	opacity: 1;
}

aside .ld-dota-item{
	overflow: hidden;
}

aside .ld-dota-item > .icon{
	width: auto !important;
	height: 100% !important;
	position: absolute;
	margin-top: 0px;
	top: 0px;
	left: 5px;
	z-index: 1;
}

aside .ld-dota-item:before{
	content: '';
	width: 70px;
	height: 100%;
	background: #fff;
	position: absolute;
	top: 0px;
	right: 0px;
	z-index: 2;
	background: linear-gradient(to left, rgba(21,22,26,1) 20%, rgba(66,67,66,0) 100%);
}

aside .ld-item > .name{
	width: 100%;
	padding: 0px 25px 0px 25px;
	color: #fff;
	font-size: 12px;
	text-align: center;
	margin-top: 0px;
	position: relative;
	z-index: 2;
	transition: all .2s ease-in-out;
	opacity: 1;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}

aside .ld-item > .name > span{
	color: #6c6d70;
}

aside .ld-item > .ld-winner{
	width: 100%;
	height: 100%;
	background: linear-gradient(to left, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 100%);
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	opacity: 0;
	transition: all .2s ease-in-out;
}

aside .ld-item > .ld-winner > .case{
	width: calc( 100% - 50px );
	top: 5px;
	position: absolute;
	opacity: 0.2;
}

aside .ld-item > .ld-winner > .avatar{
	width: 50px;
	height: 50px;
	border: 1px solid #ff9944;
	border-radius: 50px;
	padding: 5px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-top: 18px;
}

aside .ld-item > .ld-winner > .avatar > img{
	width: 100%;
	height: 100%;
	border-radius: 100%;
}

aside .ld-item > .ld-winner > .username{
	font-family: Roboto Bold;
	width: 100%;
	padding: 0px 25px 0px 25px;
	color: #fff;
	font-size: 12px;
	text-align: center;
	margin-top: -10px;
}

aside .ld-item > .ld-winner > .time{
	font-family: Microsoft Jheng Hei Bold;
	width: 100%;
	padding: 0px 25px 0px 25px;
	color: #fff;
	font-size: 12px;
	text-align: center;
	color: #6c6d70;
	margin-top: -14px;
}

/* ----------------------------- */
/* ------ site-statistic ------- */
/* ----------------------------- */

.site-statistic{
	width: 100%;
	border-bottom: 1px solid #2f3035;
	-webkit-box-shadow: 0px 20px 24px -4px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 20px 24px -4px rgba(0,0,0,0.2);
	box-shadow: 0px 20px 24px -4px rgba(0,0,0,0.2);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.site-statistic > .box{
	width: 25%;
	padding: 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.site-statistic > .box:nth-child(1){
	background: none;
}
.site-statistic > .box:nth-child(2){
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/bg/stat-line.png) bottom left no-repeat;
}
.site-statistic > .box:nth-child(3){
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/bg/stat-line.png) bottom left no-repeat;
}
.site-statistic > .box:nth-child(4){
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/bg/stat-line.png) bottom left no-repeat;
}

.site-statistic > .box > .info{
	font-family: Roboto Bold;
	font-size: 24px;
	color: #fff;
}

.site-statistic > .box > .info span{
	display: block;
	font-family: Microsoft Jheng Hei Bold;
	font-size: 14px;
	color: #7c7d7e;
}

/* ----------------------------- */
/* ----- announce message ------ */
/* ----------------------------- */

.announce-msg{
	min-height: 60px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	border: 1px solid #2f3035;
	margin: 0 auto;
	margin-top: 40px;
	position: relative;
}

.announce-msg .announce-msg-icon{
	margin: 10px;
}
.doller-icon-pb {
	font-family: Roboto Bold;
	background: linear-gradient(45deg, #99df96 50%, #cdfa7e);
	background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.announce-msg .announce-msg-button{
	width: 90px;
	height: 60px;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	position: relative;
	border: 1px solid transparent;
	-moz-border-image: -moz-linear-gradient(to left, #9be89e 0%, #d1fb7b 100%);
	-webkit-border-image: -webkit-linear-gradient(to left, #9be89e 0%, #d1fb7b 100%);
	border-image: linear-gradient(to left, #9be89e 0%, #d1fb7b 100%);
	border-image-slice: 1;
	background: linear-gradient(180deg, #24292b 0%, #272a29 100%);
	font-family: Microsoft Jheng Hei Bold;
	font-size: 16px;
	color: #fff;
	cursor: pointer;
	text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);
	margin: -1px;
	z-index: 1;
}

.announce-msg .announce-msg-button:hover:after{
	opacity: 1;
}

.announce-msg .announce-msg-button span{
	position: relative;
	z-index: 2;
}

.announce-msg .announce-msg-button:after{
	content: '';
	width: 100%;
	height: 100%;
	background: linear-gradient(to left, #9be89e 0%, #d1fb7b 100%);
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
	transition: all .2s ease-in-out;
	opacity: 0;
}

.announce-msg .announce-msg-text{
	font-family: Microsoft Jheng Hei Bold;
	width: calc( 100% - 55px - 90px );
	padding-right: 10px;
	background: linear-gradient(45deg, #99df96 50%, #efff7b);
	background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 14px;
	padding-top: 10px;
	padding-bottom: 10px;
}

/* ----------------------------- */
/* --------- case box ---------- */
/* ----------------------------- */

.case-box{
	display: block;
	min-height: 35px;
}

.case-box .case-box-title{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	cursor: pointer;
	float: left;
}

.case-box .case-box-title span{
	font-family: Roboto Bold;
	color: #fff;
	font-size: 26px;
	margin-left: 20px;
}

.case-box .case-box-title .case-box-title-arrow{
	width: 10px;
	height: 6px;
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/nav_icons/lang_arrow.png);
	margin-left: 20px;
	opacity: 0.5;
	transform: scale(1, -1);
}

.case-box .case-box-title .title-arrow-open{
	transform: scale(1, 1);
}

.case-box .cases{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}

.case-box .cases > .case{
	width: 20%;
	padding-bottom: 9px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	position: relative;
	z-index: 1;
	margin-top: 45px;
	margin-bottom: 15px;
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/bg/border_case.png) bottom left no-repeat,
				url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/bg/border_bottom_case.png) bottom center no-repeat;
	background-size: auto, 100% auto;
}

.case-box .cases > .case:nth-child(2n){
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/bg/border_case.png) bottom left no-repeat,
				url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/bg/border_bottom_case.png) bottom center no-repeat;
	background-size: auto, 100% auto;
}

.case-box .cases > .case:nth-child(3n){
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/bg/border_case.png) bottom left no-repeat,
				url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/bg/border_bottom_case.png) bottom center no-repeat;
	background-size: auto, 100% auto;
}

.case-box .cases > .case:nth-child(4n){
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/bg/border_case.png) bottom left no-repeat,
				url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/bg/border_bottom_case.png) bottom center no-repeat;
	background-size: auto, 100% auto;
}

.case-box .cases > .case:nth-child(5n){
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/bg/border_case.png) bottom right no-repeat,
				url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/bg/border_bottom_case.png) bottom center no-repeat,
				url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/bg/border_case.png) bottom left no-repeat;
	background-size: auto, 100% auto, auto;
}

.case-box .cases > .case:last-child{
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/bg/border_case.png) bottom right no-repeat,
				url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/bg/border_bottom_case.png) bottom center no-repeat,
				url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/bg/border_case.png) bottom left no-repeat;
	background-size: auto, 100% auto, auto;
}

.case-box .cases > .case > .case-content{
	width: calc( 100% - 18px );
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	position: relative;
}

.case-box .cases > .case > .case-content:hover .gun{
	animation: fly 1.5s ease-in-out infinite both;
}

.case-box .cases > .case > .case-content:hover .hover{
	opacity: 1;
}

@keyframes fly
{
	50% {transform: translateY(-20px);}
}

.case-box .cases > .case > .case-content > .bg{
	width: 100%;
	position: relative;
	z-index: 1;
	pointer-events: none;
}

.case-box .cases > .case > .case-content > .case{
	width: 100%;
	position: absolute;
	margin-top: -10px;
	z-index: 2;
	pointer-events: none;
}

.case-box .cases > .case > .case-content > .gun{
	width: 100%;
	position: absolute;
	top: -25px;
	z-index: 3;
	pointer-events: none;
}

.case-box .cases > .case > .case-content > .hover{
	width: 100%;
	position: absolute;
	margin-top: -95px;
	z-index: 4;
	pointer-events: none;
	mix-blend-mode: hard-light;
	opacity: 0;
	transition: all .5s ease-in-out;
	pointer-events: none;
}

.case-box .cases > .case > .case-content > .price{
	width: 110px;
	height: 40px;
	position: absolute;
	z-index: 4;
	font-family: Roboto Bold;
	color: #fff;
	font-size: 16px;
	background: #191b1f;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	bottom: -28px;
}

.case-box .cases > .case > .case-content > .name{
	bottom: 25px;
	position: absolute;
	z-index: 4;
	font-family: Roboto Bold;
	color: #fff;
	font-size: 16px;
}

.border_id_1{
	border: 1px solid transparent;
	-moz-border-image: -moz-linear-gradient(to left, #fd588b 0%, #f88e69 100%);
	-webkit-border-image: -webkit-linear-gradient(to left, #fd588b 0%, #f88e69 100%);
	border-image: linear-gradient(to left, #fd588b 0%, #f88e69 100%);
	border-image-slice: 1;
}
.case-box .cases > .case > .case-content >.border_id_1:hover{
	background: linear-gradient(to left, #c70074 0%, #bb6753 100%);
}
.case-box .cases > .case > .case-content >.border_id_1:active{
	background: linear-gradient(to left, #ff0097 0%, #e47d66 100%);
}
.border_id_2{
	border: 1px solid transparent;
	-moz-border-image: -moz-linear-gradient(to left, #9be89e 0%, #d1fb7b 100%);
	-webkit-border-image: -webkit-linear-gradient(to left, #9be89e 0%, #d1fb7b 100%);
	border-image: linear-gradient(to left, #9be89e 0%, #d1fb7b 100%);
	border-image-slice: 1;
}
.case-box .cases > .case > .case-content >.border_id_2:hover{
	background: linear-gradient(to left, #67a16a 0%, #96be5f 100%);
}
.case-box .cases > .case > .case-content >.border_id_2:active{
	background: linear-gradient(to left, #7abb7d 0%, #b5df70 100%);
}
.border_id_3{
	border: 1px solid transparent;
	-moz-border-image: -moz-linear-gradient(to left, #7733c2 0%, #c84ac7 100%);
	-webkit-border-image: -webkit-linear-gradient(to left, #7733c2 0%, #c84ac7 100%);
	border-image: linear-gradient(to left, #7733c2 0%, #c84ac7 100%);
	border-image-slice: 1;
}
.case-box .cases > .case > .case-content >.border_id_3:hover{
	background: linear-gradient(to left, #6a2daf 0%, #a640a5 100%);
}
.case-box .cases > .case > .case-content >.border_id_3:active{
	background: linear-gradient(to left, #7c32c6 0%, #d24bd1 100%);
}
.border_id_4{
	border: 1px solid transparent;
	-moz-border-image: -moz-linear-gradient(to left, #0096ff 0%, #62d8ff 100%);
	-webkit-border-image: -webkit-linear-gradient(to left, #0096ff 0%, #62d8ff 100%);
	border-image: linear-gradient(to left, #0096ff 0%, #62d8ff 100%);
	border-image-slice: 1;
}
.case-box .cases > .case > .case-content >.border_id_4:hover{
	background: linear-gradient(to left, #0071d3 0%, #519ec2 100%);
}
.case-box .cases > .case > .case-content >.border_id_4:active{
	background: linear-gradient(to left, #0085ee 0%, #5dc3ea 100%);
}
.border_id_5{
	border: 1px solid transparent;
	-moz-border-image: -moz-linear-gradient(to left, #ffba00 0%, #ffee7c 100%);
	-webkit-border-image: -webkit-linear-gradient(to left, #ffba00 0%, #ffee7c 100%);
	border-image: linear-gradient(to left, #ffba00 0%, #ffee7c 100%);
	border-image-slice: 1;
}
.case-box .cases > .case > .case-content >.border_id_5:hover{
	background: linear-gradient(to left, #cc9200 0%, #cdbc67 100%);
}
.case-box .cases > .case > .case-content >.border_id_5:active{
	background: linear-gradient(to left, #dfa100 0%, #ddcc70 100%);
}
/* ----------------------------- */
/* -------- page-title --------- */
/* ----------------------------- */

.page-title{
	width: 100%;
	border-bottom: 1px solid #2f3035;
	-webkit-box-shadow: 0px 20px 24px -4px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 20px 24px -4px rgba(0,0,0,0.2);
	box-shadow: 0px 20px 24px -4px rgba(0,0,0,0.2);
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}

.page-title > .icon{
	width: 95px;
	height: 77px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.page-title > .icon a{
	width: 100%;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	transition: all .2s ease-in-out;
	opacity: 0.3;
}

.page-title > .icon a:hover{
	opacity: 1;
}

.page-title > .page-name{
	width: calc( 100% - 95px );
	height: 77px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/bg/stat-line.png) bottom left no-repeat;
	background-size: auto 65%;
	padding-left: 36px;
	font-size: 14px;
	font-family: Microsoft Jheng Hei Bold;
	color: #fff;
}

/* ----------------------------- */
/* ---------- profile ---------- */
/* ----------------------------- */

.profile{
	margin-top: 40px;
	border: 1px solid #2e3138;
	-webkit-box-shadow: 0px 20px 24px -4px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 20px 24px -4px rgba(0,0,0,0.2);
	box-shadow: 0px 20px 24px -4px rgba(0,0,0,0.2);
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}

/* ------- profile user -------- */

.profile > .profile-user{
	width: calc( ( 100% - 340px ) / 2 );
	align-self: stretch;
	border-right: 1px solid #2e3138;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
}

.profile > .profile-user > .top{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding: 30px;
}

.profile > .profile-user > .top > .user{
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
}

.profile > .profile-user > .top > .user > img{
	width: 70px;
	height: 70px;
	border-radius: 70px;
}

.profile > .profile-user > .top > .user > .info{
	width: 150px;
	padding-left: 20px;
}

.profile > .profile-user > .top > .user > .info > .name{
	width: 100%;
	font-family: Roboto Bold;
	font-size: 25px;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-top: -3px;
	margin-bottom: 3px;
}

.profile > .profile-user > .top > .user > .info > .desc{
	width: 100%;
	font-family: Microsoft Jheng Hei Bold;
	font-size: 14px;
	background: linear-gradient(90deg, #f2636c 50%, #e98746);
    background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.profile > .profile-user > .top > .balance{
	display: block;
}

.profile > .profile-user > .top > .balance > .count{
	width: 100%;
	font-family: Roboto Bold;
	font-size: 25px;
	color: #fff;
	/*margin-top: -3px;*/
	margin-top: -30px;
	margin-bottom: 3px;
	text-align: right;
}

.profile > .profile-user > .top > .balance > .count span{
	font-family: Roboto Bold;
	background: linear-gradient(45deg, #99df96 50%, #cdfa7e);
    background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.profile > .profile-user > .top > .balance > .desc{
	width: 100%;
	font-family: Microsoft Jheng Hei Bold;
	font-size: 14px;
	text-align: right;
	color: #8f8f8f;
}

.profile > .profile-user > .bottom{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid #2e3138;
	margin-top: auto;
}

.profile > .profile-user > .bottom > .open-balance-history{
	width: 300px;
	height: 56px;
	margin: -1px;
	padding-left: 30px;
	padding-right: 30px;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	font-family: Microsoft Jheng Hei Bold;
	font-size: 14px;
	text-align: right;
	color: #fff;
	transition: all .2s ease-in-out;
}

.profile > .profile-user > .bottom > .open-balance-history:hover{
	color: #99df96;
}

.profile > .profile-user > .bottom img{
	margin-right: 15px;
}

.profile > .profile-user > .bottom > .add-balance{
	width: calc( ( 100% - 300px ) );
	height: 56px;
	margin: -1px;
	border: 1px solid transparent;
	-moz-border-image: -moz-linear-gradient(to top, #b5f18d 0%, #2d3037 100%);
	-webkit-border-image: -webkit-linear-gradient(to top, #b5f18d 0%, #2d3037 100%);
	border-image: linear-gradient(to top, #b5f18d 0%, #2d3037 100%);
	border-image-slice: 1;
	background: linear-gradient(to top, rgba(174, 238, 146, 0.1) 50%, rgba(46, 48, 55, 0.1) 100%);
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	font-family: Microsoft Jheng Hei Bold;
	font-size: 14px;
	text-align: right;
	color: #fff;
	transition: all .2s ease-in-out;
	cursor: pointer;
}

.profile > .profile-user > .bottom > .add-balance:hover{
	color: #99df96;
}

/* ------ trade settings ------- */

.profile > .trade-settings{
	/*width: calc( ( 100% - 340px ) / 2 );*/
	/*width: calc( ( 100% - 540px ) / 2 );*/
	/*align-self: stretch;*/
	/*border-right: 1px solid #2e3138;*/
	/*padding: 30px;*/

	width: 540px;
	align-self: stretch;
	border-right: 1px solid #2e3138;
	padding: 30px;
}

.profile > .trade-settings > .title{
	width: 100%;
	font-family: Microsoft Jheng Hei Bold;
	font-size: 25px;
	color: #fff;
	margin-top: 5px;
}

.profile > .trade-settings > .desc{
	width: 100%;
	font-family: Microsoft Jheng Hei Bold;
	font-size: 14px;
	background: linear-gradient(90deg, #f2636c 50%, #e98746);
    background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-top: 3px;
}

.profile > .trade-settings > form{
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	position: relative;
	margin-top: 20px;
}

.profile > .trade-settings > form > input{
	width: 100%;
	height: 46px;
	background: none;
	border: none;
	border-bottom: 1px solid #33363c;
	font-family: Roboto;
	font-size: 14px;
	color: #929294;
	padding: 0px;
	padding-right: 40px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	position: relative;
	z-index: 1;
}

.profile > .trade-settings > form > button{
	position: absolute;
	top: 0px;
	right: 0px;
	width: 20px;
	height: 40px;
	padding: 0;
	margin: 0;
	border: none;
	background: none;
	cursor: pointer;
	z-index: 2;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	opacity: 0.7;
	transition: all .2s ease-in-out;
}

.profile > .trade-settings > form > button:hover{
	opacity: 1;
}

/* ------ social network ------- */

.profile > .social-network{
	width: 340px;
	align-self: stretch;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}
.profile > #csgo-bit,
.profile > #dota-bit{
	display: none;
}


.profile > .social-network > .top{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding: 30px;
}

.profile > .social-network > .top > .title{
	width: 100%;
	font-family: Microsoft Jheng Hei Bold;
	font-size: 25px;
	color: #fff;
	margin-top: 5px;
}

.profile > .social-network > .top > .desc{
	width: 100%;
	font-family: Microsoft Jheng Hei Bold;
	font-size: 14px;
	background: linear-gradient(90deg, #f2636c 50%, #e98746);
    background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-top: 3px;
}

.profile > .social-network > .bottom{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid #2e3138;
	margin-top: auto;
}

.profile > .social-network > .bottom > .info{
	width: calc( 100% - 97px );
	height: 56px;
	margin: -1px;
	border: 1px solid transparent;
    -moz-border-image: -moz-linear-gradient(to top, #b5f18d 0%, #2d3037 100%);
    -webkit-border-image: -webkit-linear-gradient(to top, #b5f18d 0%, #2d3037 100%);
    border-image: linear-gradient(to top, #b5f18d 0%, #2d3037 100%);
    border-image-slice: 1;
    background: linear-gradient(to top, rgba(174, 238, 146, 0.1) 50%, rgba(46, 48, 55, 0.1) 100%);
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all .2s ease-in-out;
}

.profile > .social-network > .bottom > .info:hover{
	background: linear-gradient(to top, rgba(174, 238, 146, 0.2) 50%, rgba(46, 48, 55, 0.2) 100%);
}

.profile > .social-network > .bottom > .info > img{
	margin-right: 15px;
	width: 20px;
	height: 20px;
}

.profile > .social-network > .bottom > .info > .text{
	width: calc( 100% - 80px );
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
    font-family: Roboto Bold;
    font-size: 14px;
    color: #8d8f8e;
}

/* ------- social-switch ------- */

.social-switch{
	width: 100px;
	height: 56px;
	border-left: 1px solid #1d1e24;
	border-right: 1px solid #1d1e24;
	position: relative;
	margin: -1px;
	border: 1px solid transparent;
    -moz-border-image: -moz-linear-gradient(to top, #b5f18d 0%, #2d3037 100%);
    -webkit-border-image: -webkit-linear-gradient(to top, #b5f18d 0%, #2d3037 100%);
    border-image: linear-gradient(to top, #b5f18d 0%, #2d3037 100%);
    border-image-slice: 1;
    background: linear-gradient(to top, rgba(174, 238, 146, 0.1) 50%, rgba(46, 48, 55, 0.1) 100%);
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    font-family: Microsoft Jheng Hei Bold;
    font-size: 14px;
    color: #fff;
    transition: all .2s ease-in-out;
}

.social-switch:hover .social-active > .social-arrow{
	opacity: 1;
}

.social-switch .social-active{
	width: 100%;
	height: 100%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	color: #fff;
	cursor: pointer;
	transition: all .2s ease-in-out;
}

.social-switch .social-active > .social-arrow{
	width: 10px;
	height: 6px;
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/nav_icons/lang_arrow.png);
	margin-left: 15px;
	opacity: 0.5;
	transition: all .2s ease-in-out;
}

.social-switch .social-list{
	width: calc( 100% + 2px );
	position: absolute;
	top: calc( 100% + 1px );
	background: #202423;
	border: 1px solid transparent;
    -moz-border-image: -moz-linear-gradient(to top, #b5f18d 0%, #2d3037 100%);
    -webkit-border-image: -webkit-linear-gradient(to top, #b5f18d 0%, #2d3037 100%);
    border-image: linear-gradient(to top, #b5f18d 0%, #2d3037 100%);
    border-image-slice: 1;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	display: none;
}

.social-switch .social-list .social-item{
	width: 100%;
	height: 46px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transition: all .2s ease-in-out;
	border-bottom: 1px solid #2a322b;
}

.social-switch .social-list .social-item:hover .social-hover > .social-hover-tumb{
	opacity: 1;
}

.social-switch .social-list .social-item > .social-hover{
	width: 10px;
	height: 10px;
	border: 1px solid transparent;
    -moz-border-image: -moz-linear-gradient(to top, #b5f18d 0%, #97e6a0 100%);
    -webkit-border-image: -webkit-linear-gradient(to top, #b5f18d 0%, #97e6a0 100%);
    border-image: linear-gradient(to top, #b5f18d 0%, #97e6a0 100%);
    border-image-slice: 1;
    margin-left: 15px;
    display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.social-switch .social-list .social-item > .social-hover > .social-hover-tumb{
	width: 4px;
	height: 4px;
	background: #bef587;
	opacity: 0;
	transition: all .2s ease-in-out;
}
/* ------ trade settings ------- */

/*.profile > .trade-settings{*/
	/*width: 340px;*/
	/*align-self: stretch;*/
	/*border-right: 1px solid #2e3138;*/
	/*padding: 30px;*/
/*}*/

.profile > .trade-settings > .title{
	width: 100%;
	font-family: Microsoft Jheng Hei Bold;
	font-size: 25px;
	color: #fff;
	margin-top: 5px;
}

.profile > .trade-settings > .desc{
	width: 100%;
	font-family: Microsoft Jheng Hei Bold;
	font-size: 14px;
	background: linear-gradient(90deg, #f2636c 50%, #e98746);
	background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-top: 3px;
}

.profile > .trade-settings > form{
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	position: relative;
	margin-top: 20px;
}

.profile > .trade-settings > form > input{
	width: 100%;
	height: 46px;
	background: none;
	border: none;
	border-bottom: 1px solid #33363c;
	font-family: Roboto;
	font-size: 14px;
	color: #929294;
	padding: 0px;
	padding-right: 40px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	position: relative;
	z-index: 1;
}

.profile > .trade-settings > form > button{
	position: absolute;
	top: 0px;
	right: 0px;
	width: 20px;
	height: 40px;
	padding: 0;
	margin: 0;
	border: none;
	background: none;
	cursor: pointer;
	z-index: 2;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	opacity: 0.7;
	transition: all .2s ease-in-out;
}

.profile > .trade-settings > form > button:hover{
	opacity: 1;
}

/* ------ social network ------- */
/* roll鎴�*/

.profile > .social-network{
	/*width: calc( ( 100% - 340px ) / 2 );*/
    width: 425px;
	height: 186px;
	align-self: stretch;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}
.profile > .social-network p{
	color: #8f8f8f;
    font-size: 12px;
    padding-left: 5px;
}
.profile > .social-network > .roll_item_box{
	width: 226px;
	height: 100%;
	position: relative;
}
.profile > .social-network > .roll_item_box:hover{

    background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/roll/roll_item_bg.png) no-repeat;
}
.profile > .social-network > .roll_item_box > .roll_items{
	position: relative;
}
.profile .social-network .roll_items .item_bg{
	position: absolute;
	width: 104px;
	height: 104px;
	left: 50%;
	transform: translateX(-50%);
	top: 40px;
}
.profile .social-network .roll_items .roll_item{
	position: absolute;
	width: 128px;
	left: 50%;
	transform: translateX(-50%);
	top: 40px;
}
.profile .social-network .roll_items .roll_item img{
	width: 180px;
	position: absolute;
	top: -34px;
	left: -30px;
}
.profile .social-network .roll_item_box .roll_item_price{
	position: absolute;
	color: #fff;
	font-size: 14px;
	left: 10px;
	bottom: 10px;
}
.profile .social-network .roll_item_box .roll_item_price span{
	font-family: Roboto Bold;
	background: linear-gradient(90deg, #99df96 50%, #cdfa7e);
	background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.profile > .social-network > .roll_info{
	width: calc(100% - 226px);
}

.profile > .social-network > .roll_info > .top{
	display: flex;
	justify-content: space-between;
	padding-top: 10px;
	padding-right: 10px;
}
.profile .roll_info .top .top_info1,
.profile .roll_info .top .top_info2{
	position: relative;
	width: 50%;
}
.profile .roll_info .top .top_info1 .name{
	font-size: 18px;
	color: #fff;
	line-height: 1.5em;
}
.profile .roll_info .top .top_info1 .name .span1{
	font-weight: 700;
	background: linear-gradient(to left, #99df96 30%, #cdfa7e 50%);
	background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.profile .roll_info .top .top_info1 .name #span2{
	color: #c306f9;
}
.profile .roll_info .top .top_info1 .quality{
	font-size: 14px;
	color: #ffff00;
}
.profile .roll_info .top .top_info1 .condition span,
.profile .roll_info .top .top_info1 .condition a{
	font-size: 14px;
	background: linear-gradient(90deg, #f2636c 50%, #e98746);
	background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-top: 6px;
}
.profile .roll_info .top .top_info1 .condition{
	position: absolute;
	top: 90px;
    font-size: 14px;
    color: white;
    text-align: center;
	padding: 5px 10px;
    border: 1px solid transparent;
    border-image: linear-gradient(to top, #b5f18d 0%, #2d3037 100%);
    background: linear-gradient(to top, rgba(174, 238, 146, 0.1) 50%, rgba(46, 48, 55, 0.1) 100%);
    border-image-slice: 1;
}
.profile .roll_info .top .top_info1 .roll-end{
	position: absolute;
	top: 90px;
	font-size: 16px;
	color: white;
	text-align: center;
	padding: 5px 10px;
	border-image: linear-gradient(to top, #b5f18d 0%, #2d3037 100%);
	border-image-slice: 1;
	font-weight: 700;
	background: linear-gradient(to left, #99df96 30%, #cdfa7e 50%);
	background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.profile .roll_info .top .top_info1 .condition span,
.profile .roll_info .top .top_info1 .condition a{
	display: inline-block;
	font-size: 12px;
	transform: scale(0.83);
	margin-top: 0px;
	margin-left: -9px;
}
.profile .roll_info .top .top_info1 .condition a{
	background: #fff;
	background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.profile .roll_info .top .top_info1 .condition {
	cursor: pointer;
}
.profile .roll_info .top .top_info2 .title{
	font-size: 18px;
	color: #fff;
	text-align: right;
}
.profile .roll_info .top .top_info2 .roll_date{
	color: #888;
	font-size: 12px;
	text-align: right;
	margin-top: 5px;
}
.profile .roll_info .top .top_info2 .people_number{
	font-size: 12px;
	color: #fff;
	text-align: right;
	margin-top: 3px;
}
.profile .roll_info .top .top_info2 .people_number span{
	font-size: 24px;
	font-family: Roboto Bold;
	background: linear-gradient(to top, #99df96 30%, #cdfa7e 50%);
	background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.profile .roll_info .top .top_info2 .roll_ends{
	font-size: 18px;
	color: #fff;
	text-align: right;
}
.profile .roll_info .top .top_info2 .roll_ends span{
	font-family: Roboto Bold;
	background: linear-gradient(to top, #99df96 30%, #cdfa7e 50%);
	background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.profile .roll_info .bottom{
	width: 100%;
	margin-top: 5px;
	height: 48px;
	border: 1px solid transparent;
	-moz-border-image: -moz-linear-gradient(to top, #b5f18d 0%, #2d3037 100%);
	-webkit-border-image: -webkit-linear-gradient(to top, #b5f18d 0%, #2d3037 100%);
	border-image: linear-gradient(to top, #b5f18d 0%, #2d3037 100%);
	border-image-slice: 1;
	background: linear-gradient(to top, rgba(174, 238, 146, 0.1) 50%, rgba(46, 48, 55, 0.1) 100%);
	display: flex;
	justify-content: space-between;
}
.profile .roll_info .bottom .bottom_info1{
	display: flex;
	width: 20%;
	font-size: 12px;
	color: #fff;
	align-items: center;
	text-align: center;
	justify-content: center;
	border-right: 1px solid #2d3037;
}
.profile .roll_info .bottom .bottom_info2{
	display: flex;
	width: 50%;
	font-size: 14px;
	color: #fff;
	align-items: center;
	justify-content: left;
	border-right: 1px solid #2d3037;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border-right: 1px solid #2d3037;
}
.profile .roll_info .bottom .bottom_info3{
	display: flex;
	align-items: center;
	justify-content: space-around;
	cursor: pointer;
	width: 30%;
}
.profile .roll_info .bottom .bottom_info3 .avatar{
	width: 36px;
	height: 36px;
}
.profile .roll_info .bottom .bottom_info3 .avatar img{
	width: 36px;
	height: 36px;
	border-radius: 50%;
}
.profile .roll_info .bottom .bottom_info3 .nick{
	font-size: 12px;
	color: #fff;
	width: 40%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.social-network>.win-info{
	background-color: #262627;
	width: 100%;
	z-index: 5;
	max-height: 345px;
}
.social-network>.win-info> .winning-user-items{
	width: 100%;
	position: relative;
	margin-bottom: 5px;
	/* border: 1px solid red; */
;
}
.social-network>.win-info> .winning-user-items>.win-goods{
	width: 226px;
	height: 115px;
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/roll/roll-goods-bg.png) no-repeat;
	/* display: flex; */
	/* flex-wrap: wrap; */
	/* justify-content: center; */
	/* align-items: center; */
	position: relative;
	/* pointer-events: none; */

}
.social-network>.win-info> .winning-user-items>.win-goods>img{
	width: 120px;
	position: absolute;
	left: 55px;

}
.social-network>.win-info> .winning-user-items>.win-goods>.roll_goods_price{
	position: absolute;
	color: #fff;
	font-size: 14px;
	left: 10px;
	bottom: 10px;
}
.social-network>.win-info> .winning-user-items>.win-goods>.roll_goods_price>span{
	font-family: Roboto Bold;
	background: linear-gradient(90deg, #99df96 50%, #cdfa7e);
	background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.social-network>.win-info> .winning-user-items>.rightc{
	width: 2px;
	height: 100%;
	border-radius: 1px;
	position: absolute;
	bottom: -1px;
	left: 225px;

}
.social-network>.win-info> .winning-user-items>.win-roll-user-info{
	width: 64%;
	background-color: #0d1015;
	height: 100%;
	position: absolute;
	bottom: -1px;
	left: 36%;
}
.social-network>.win-info> .winning-user-items>.win-roll-user-info>.info{
	height: 100%;
	width: 55%;
	margin-left: 10px;
	position: absolute;
}
.social-network>.win-info> .winning-user-items>.win-roll-user-info>.info>p:nth-child(1){
	color: white;
	font-size: 16px;
	margin-top: 10px;
}
.social-network>.win-info> .winning-user-items>.win-roll-user-info>.info>p:nth-child(1)>span{
	color: #C4C4C4;
	font-size: 12px;
	margin-left: 6px;
}
.social-network>.win-info> .winning-user-items>.win-roll-user-info>.info>p:nth-child(2){
	color: white;
	font-size: 18px;
	margin-top: 10px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.social-network>.win-info> .winning-user-items>.win-roll-user-info>.info>p:nth-child(3){
	/*color: white;*/
	font-size: 16px;
	margin-top: 10px;
}
.social-network>.win-info> .winning-user-items>.win-roll-user-info>.winner-avatar{
	position: absolute;
	top: 10px;
	left: 65%;
	width: 120px;
	text-align: center;
	margin-right: 20px;
}
.social-network>.win-info> .winning-user-items>.win-roll-user-info>.winner-avatar>p{
	color: white;
	font-size: 14px;
}
.social-network>.win-info> .winning-user-items>.win-roll-user-info>.winner-avatar>img{
	width: 70px;
	height: 70px;
	border-radius: 50%;
}
/* 切换roll房 */
.social-network > .roll_item_box> .item-switch {
	width: 43px;
	height: 23px;
	border-radius: 20px;
	border: 1px solid #23292a;
	padding: 3px;
	cursor: pointer;
	background-color: #1b1e1f;
	position: absolute;
	right: 10px;
	top: 10px;
}

.social-network > .roll_item_box>  .item-switch > .tumb {
	width: 15px;
	height: 15px;
	border-radius: 20px;
	background: #8bc34a;
	box-shadow: 0px 0px 10px 0px #8bc34a;
	pointer-events: none;
	transition: all .2s ease-in-out;
	float: right;
}
.social-network > .roll_item_box>  .item-switch > .tumb-off {
	box-shadow: none;
	transform: translateX(-20px);
	background: #e96763;
	box-shadow: 0px 0px 10px 0px #ed5371;
}
.dota-right-line1{
	background: #ffffff;
}
.dota-gc-color1{
	color: #ffffff;
}
.dota-right-line2{
	background:#9dc2e5;
}
.dota-gc-color2{
	color: #9dc2e5;
}
.dota-right-line3{
	background: #0271c0;
}
.dota-gc-color3{
	color: #0271c0;
}
.dota-right-line4{
	background: #a73ce1;
}
.dota-gc-color4{
	color: #a73ce1;
}
.dota-right-line5{
	background: #ffc002;
}
.dota-gc-color5{
	color: #ffc002;
}
.dota-right-line6{
	background: #ff1ad1;
}
.dota-gc-color6{
	color: #ff1ad1;
}
.dota-right-line7{
	background:#c1ffab;
}
.dota-gc-color7{
	color: #c1ffab;
}


.csgo-right-line1{
	background: #ffffff;
}
.csgo-gas-color1{
	color:#ffffff;
}
.csgo-right-line2{
	background:#3e63ff;
}
.csgo-gas-color2{
	color:#3e63ff;
}
.csgo-right-line3{
	background:#7cb0f4;
}
.csgo-gas-color3{
	color:#7cb0f4;
}
.csgo-right-line4{
	background: #4b0082;
}
.csgo-gas-color4{
	color:#a73ce1;
}
.csgo-right-line5{
	background:#fc21ff;
}
.csgo-gas-color5{
	color:#fc21ff;
}
.csgo-right-line6,
.csgo-right-line9,
.csgo-right-line12{
	background: #ffff05;
}
.csgo-gas-color6,
.csgo-gas-color9,
.csgo-gas-color12{
	color:#ffff05;
}


/* ----------------------------- */
/* --------- inventory --------- */
/* ----------------------------- */

.inventory{
	margin-top: 40px;
}

.inventory > .title{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	border-bottom: 1px solid #2c3038;
}

.inventory > .title > .item-count{
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	font-family: Microsoft Jheng Hei Bold;
    font-size: 20px;
    color: #fff;
}

.inventory > .title > .item-count > span{
	font-family: Roboto Bold;
    font-size: 24px;
    color: #fff;
    background: linear-gradient(90deg, #f2636c 50%, #e98746);
    background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	padding-top: 3px;
	margin-left: 10px;
}

.inventory > .title > .item-box{
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	font-family: Microsoft Jheng Hei Bold;
    font-size: 20px;
    color: #fff;
    margin-left: 30px;
}

.inventory > .title > .item-box > span{
	font-family: Roboto Bold;
    font-size: 24px;
    color: #fff;
	background: linear-gradient(90deg, #99df96 50%, #cdfa7e);
    background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	padding-top: 3px;
	margin-left: 10px;
}
.inventory > .title > .item-sell-info:hover{
    background: linear-gradient(to bottom, rgba(174, 238, 146, 0.1) 50%, rgba(46, 48, 55, 0.1) 100%);
}
.inventory > .title > .item-sell-info{
	width: 240px;
	height: 56px;
	margin-bottom: -1px;
	margin-left: auto;
	border: 1px solid transparent;
    -moz-border-image: -moz-linear-gradient(to bottom, #b5f18d 0%, #2d3037 100%);
    -webkit-border-image: -webkit-linear-gradient(to bottom, #b5f18d 0%, #2d3037 100%);
    border-image: linear-gradient(to bottom, #b5f18d 0%, #2d3037 100%);
    border-image-slice: 1;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    font-family: Microsoft Jheng Hei Bold;
    font-size: 14px;
    color: #fff;
}

.inventory > .title > .item-sell-info > .icon{
	margin-right: 10px;
}

.inventory > .title > .item-sell-info > .price{
	font-family: Roboto Bold;
    font-size: 14px;
    color: #fff;
    margin-left: 15px;
}

.inventory > .title > .item-sell-info > .price span{
	font-family: Roboto Bold;
	background: linear-gradient(90deg, #99df96 50%, #cdfa7e);
    background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* ----------------------------- */
/* ----------- items ----------- */
/* ----------------------------- */

/* -------- item types --------- */

/* -1 ---- item piggy bonus ---- */

.item-piggy-bonus{
	border: 1px solid transparent;
    -moz-border-image: -moz-linear-gradient(to bottom, #363840 50%, #c533ca 100%);
    -webkit-border-image: -webkit-linear-gradient(to bottom, #363840 50%, #c533ca 100%);
    border-image: linear-gradient(to bottom, #363840 50%, #c533ca 100%);
    border-image-slice: 1;
}
.item-piggy-bonus > .bottom{border-top: 1px solid #c533ca;background: #1c1821;}
.item-piggy-bonus > .middle{height: calc( 100% - 70px ) !important;}
.item-piggy-bonus > .middle > img{width: 80% !important;}
.item-piggy-bonus > .bottom > .info > .name{
	font-size: 20px !important;
	width: 100%;
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding-left: 10px;
}
.item-piggy-bonus > .bottom > .info > .name > span{
	font-family: Roboto Bold;
	background: linear-gradient(90deg, #99df96 50%, #cdfa7e);
    background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.item-piggy-bonus > .bottom > .icon{width: 7px;height: 45px;background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/item_types/icon_classified.png);}


/* -1 ------ item card -------- */

.item-card{
	border: 1px solid transparent;
    -moz-border-image: -moz-linear-gradient(to bottom, #363840 50%, #c533ca 100%);
    -webkit-border-image: -webkit-linear-gradient(to bottom, #363840 50%, #c533ca 100%);
    border-image: linear-gradient(to bottom, #363840 50%, #c533ca 100%);
    border-image-slice: 1;
}
.item-card > .bottom{border-top: 1px solid #c533ca;background: #1c1821;}
.item-card > .middle{height: calc( 100% - 70px ) !important;}
.item-card > .middle > img{width: 80% !important;}
.item-card > .bottom > .info{width: 100% !important;padding-right: 10px;}
.item-card > .bottom > .info > .name{
	font-size: 18px !important;
	width: 100%;
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.item-card > .bottom > .info > .name > span{
	font-family: Roboto Bold;
	background: linear-gradient(90deg, #99df96 50%, #cdfa7e);
    background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* 0 ------- not active -------- */

.item-not-active > .middle{
	filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url(/static/images/grayscale.svg#greyscale);
    filter: gray;
    -webkit-filter: grayscale(1);
}

/* ----------- items ----------- */

.items{
	width: calc( 100% + 20px );
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	margin-left: -10px;
	margin-top: 10px;
}

.items > .item{
	width: calc( 20% - 20px );
	height: 276px;
	background: #16171c;
	margin: 10px;
	position: relative;
}

.inventory .items > .item:hover .hover,
.data-items .items > .item:hover .hover,
.op-inventory .items > .item:hover .hover{
	opacity: 1;
}

.items > .item-shop{
	margin-bottom: 70px;
	border: 1px solid transparent;
	-moz-border-image: -moz-linear-gradient(to bottom, #363840 50%, #ffffff 100%);
	-webkit-border-image: -webkit-linear-gradient(to bottom, #363840 50%, #ffffff 100%);
	border-image: linear-gradient(to bottom, #363840 50%, #ffffff 100%);
	border-image-slice: 1;
}

.item-shop > .bottom{border-top: 1px solid #ffffff;background: #1b1d23;}
.item-shop > .bottom > .icon{width: 7px;height: 45px;background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/item_types/icon_consumables.png);}
.item-shop > .bottom > .info > .property{color: #ffffff;}
.item-shop > .top > .property{color: #ffffff;}
.item-shop > .top > .status{color: #ffffff;}

.items > .item-shop > .hover{
	cursor: pointer;
}

.items > .item-shop > .buy-button{
	position: absolute;
	width: calc( 100% + 2px );
	height: 50px;
	border: 1px solid transparent;
	-moz-border-image: -moz-linear-gradient(to top, #b5f18d 0%, #2d3037 100%);
	-webkit-border-image: -webkit-linear-gradient(to top, #b5f18d 0%, #2d3037 100%);
	border-image: linear-gradient(to top, #b5f18d 0%, #2d3037 100%);
	border-image-slice: 100%;
	border-image-slice: 1;
	background: linear-gradient(to top, rgba(174, 238, 146, 0.1) 50%, rgba(46, 48, 55, 0.1) 100%);
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	font-family: Roboto Bold;
	font-size: 16px;
	text-align: right;
	color: #fff;
	transition: all .2s ease-in-out;
	bottom: -60px;
	left: -1px;
}

.items > .item-shop > .buy-button > span{
	font-family: Roboto Bold;
	background: linear-gradient(90deg, #99df96 50%, #cdfa7e);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-left: 15px;
	margin-right: 5px;
}

.items > .item-shop > .buy-button:hover:after{
	opacity: 1;
}

.items > .item-shop > .buy-button:after{
	content: '';
	width: 100%;
	height: 100%;
	border: 1px solid transparent;
	-moz-border-image: -moz-linear-gradient(to top, #b5f18d 0%, #2d3037 100%);
	-webkit-border-image: -webkit-linear-gradient(to top, #b5f18d 0%, #2d3037 100%);
	border-image: linear-gradient(to top, #b5f18d 0%, #2d3037 100%);
	border-image-slice: 100%;
	border-image-slice: 1;
	background: linear-gradient(to top, rgba(174, 238, 146, 0.1) 50%, rgba(46, 48, 55, 0.1) 100%);
	position: absolute;
	top: -1px;
	left: -1px;
	z-index: 1;
	transition: all .2s ease-in-out;
	opacity: 0;
}

.items > .item > .hover{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/bg/item_hover.png);
	background-size: 100% 100%;
	opacity: 0;
	transition: all .2s ease-in-out;
	cursor: pointer;
	z-index: 3;
}

.items > .item > .top{
	width: 100%;
	height: 48px;
	border-bottom: 1px solid transparent;
	-moz-border-image: -moz-linear-gradient(to left, rgba(54, 56, 64, 1) 0%, rgba(54, 56, 64, 0) 70%);
	-webkit-border-image: -webkit-linear-gradient(to left, rgba(54, 56, 64, 1) 0%, rgba(54, 56, 64, 0) 70%);
	border-image: linear-gradient(to left, rgba(54, 56, 64, 1) 0%, rgba(54, 56, 64, 0) 70%);
	border-image-slice: 1;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.items > .item > .top > .status{
	width: calc( 50% + 2px );
	height: calc( 100% + 2px );
	margin: -1px;
	font-family: Microsoft Jheng Hei Bold;
	font-size: 14px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	padding-left: 12px;
}
.items > .item > .top > .status-search:hover{
	background: linear-gradient(to bottom, rgba(255, 120, 68, 0.1) 50%, rgba(46, 48, 55, 0.1) 100%);
}
.items > .item > .top > .status-search{
	border-top: 1px solid transparent;
	border-left: 1px solid transparent;
	border-right: 1px solid transparent;
	-moz-border-image: -moz-linear-gradient(to bottom, #ab5b57 0%, #2d3037 100%);
	-webkit-border-image: -webkit-linear-gradient(to bottom, #ab5b57 0%, #2d3037 100%);
	border-image: linear-gradient(to bottom, #ab5b57 0%, #2d3037 100%);
	border-image-slice: 1;

}

.items > .item > .top > .status > img{
	margin-left: 12px;
}

.items > .item > .top > .price{
	width: calc( 50% + 1px );
	height: calc( 100% + 2px );
	margin: -1px;
	font-family: Roboto Bold;
	font-size: 14px;
	color: #fff;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	padding-right: 12px;
}
.items > .item > .top > .price-selling:hover{
	background: linear-gradient(to bottom, rgba(174, 238, 146, 0.1) 50%, rgba(46, 48, 55, 0.1) 100%);
}
.items > .item > .top > .price-selling{
	border-top: 1px solid transparent;
	border-left: 1px solid transparent;
	border-right: 1px solid transparent;
	-moz-border-image: -moz-linear-gradient(to bottom, #b5f18d 0%, #2d3037 100%);
	-webkit-border-image: -webkit-linear-gradient(to bottom, #b5f18d 0%, #2d3037 100%);
	border-image: linear-gradient(to bottom, #b5f18d 0%, #2d3037 100%);
	border-image-slice: 1;

}

.items > .item > .top > .price > span{
	font-family: Roboto Bold;
	font-size: 14px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	background: linear-gradient(90deg, #99df96 50%, #cdfa7e);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-right: 5px;
	margin-left: 5px;
}

.items > .item > .top > .property{
	width: calc( 50% + 1px );
	height: calc( 100% + 2px );
	margin: -1px;
	font-family: Roboto Bold;
	font-size: 14px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	padding-right: 12px;
}

.items > .item > .middle{
	width: 100%;
	height: calc( 100% - 48px - 72px );
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/bg/item_bg.png) center center repeat-x;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	position: relative;
	pointer-events: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	user-select: none;
}

.items > .item:hover .middle > img{
	transform: scale(1.1,1.1);
}

.items > .item > .middle > img{
	width: 60%;
	position: absolute;
	-webkit-filter: drop-shadow(0px 25px 5px rgba(0,0,0,0.4));
	filter: drop-shadow(0px 25px 5px rgba(0,0,0,0.4));
	display: block;
	transition: all .2s ease-in-out;
}

.items > .item > .bottom{
	width: 100%;
	height: 70px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.items > .item > .bottom > .info{
	width: calc( 100% - 41px );
	margin-left: 12px;
}

.items > .item > .bottom > .info > .type{
	font-family: Roboto Bold;
	font-size: 14px;
	color: #fff;
}

.items > .item > .bottom > .info > .name{
	font-family: Roboto Bold;
	font-size: 14px;
	color: #fff;
}

.items > .item > .bottom > .info > .property{
	font-family: Microsoft Jheng Hei Bold;
	font-size: 14px;
}

.items > .item > .bottom > .icon{
	margin-left: auto;
	margin-right: 12px;
}

/* 1 ------- consumables Base ------- */

.item-type-csgo-Consumer{
	border: 1px solid transparent !important;
    -moz-border-image: -moz-linear-gradient(to bottom, #363840 50%, #ffffff 100%) !important;
    -webkit-border-image: -webkit-linear-gradient(to bottom, #363840 50%, #ffffff 100%) !important;
    border-image: linear-gradient(to bottom, #363840 50%, #ffffff 100%) !important;
    border-image-slice: 1 !important;
}
.item-type-csgo-Consumer > .bottom{border-top: 1px solid #ffffff;background: #1b1d23;}
.item-type-csgo-Consumer > .bottom > .icon{width: 7px;height: 45px;background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/item_types/icon_consumables.png);}
.item-type-csgo-Consumer > .bottom > .info > .property{color: #ffffff;}
.item-type-csgo-Consumer > .top > .property{color: #ffffff;}
.item-type-csgo-Consumer > .top > .status{color: #ffffff;}

.item-type-csgo-Base{
	border: 1px solid transparent !important;
	-moz-border-image: -moz-linear-gradient(to bottom, #363840 50%, #ffffff 100%) !important;
	-webkit-border-image: -webkit-linear-gradient(to bottom, #363840 50%, #ffffff 100%) !important;
	border-image: linear-gradient(to bottom, #363840 50%, #ffffff 100%) !important;
	border-image-slice: 1 !important;
}
.item-type-csgo-Base > .bottom{border-top: 1px solid #ffffff;background: #1b1d23;}
.item-type-csgo-Base > .bottom > .icon{width: 7px;height: 45px;background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/item_types/icon_consumables.png);}
.item-type-csgo-Base > .bottom > .info > .property{color: #ffffff;}
.item-type-csgo-Base > .top > .property{color: #ffffff;}
.item-type-csgo-Base > .top > .status{color: #ffffff;}
/* 2 -------- industrial -------- */

.item-type-csgo-Industrial{
	border: 1px solid transparent !important;
    -moz-border-image: -moz-linear-gradient(to bottom, #363840 50%, #7cb0f4 100%) !important;
    -webkit-border-image: -webkit-linear-gradient(to bottom, #363840 50%, #7cb0f4 100%) !important;
    border-image: linear-gradient(to bottom, #363840 50%, #7cb0f4 100%) !important;
    border-image-slice: 1 !important;
}
.item-type-csgo-Industrial > .bottom{border-top: 1px solid #7cb0f4;background: #181c23;}
.item-type-csgo-Industrial > .bottom > .icon{width: 7px;height: 45px;background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/item_types/icon_industrial.png);}
.item-type-csgo-Industrial > .bottom > .info > .property{color: #7cb0f4;}
.item-type-csgo-Industrial > .top > .property{color: #7cb0f4;}
.item-type-csgo-Industrial > .top > .status{color: #7cb0f4;}


/* 3 ---------- milspec --------- */
/* High */
.item-type-csgo-Mil-Spec{
	border: 1px solid transparent !important;
    -moz-border-image: -moz-linear-gradient(to bottom, #363840 50%, #3e63ff 100%) !important;
    -webkit-border-image: -webkit-linear-gradient(to bottom, #363840 50%, #3e63ff 100%) !important;
    border-image: linear-gradient(to bottom, #363840 50%, #3958c3 100%) !important;
    border-image-slice: 1 !important;
}
.item-type-csgo-Mil-Spec > .bottom{border-top: 1px solid #3e63ff;background: #181923;}
.item-type-csgo-Mil-Spec > .bottom > .icon{width: 7px;height: 45px;background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/item_types/icon_milspec.png);}
.item-type-csgo-Mil-Spec > .bottom > .info > .property{color: #3e63ff;}
.item-type-csgo-Mil-Spec > .top > .property{color: #3e63ff;}
.item-type-csgo-Mil-Spec > .top > .status{color: #3e63ff;}

.item-type-csgo-High{
	border: 1px solid transparent !important;
	-moz-border-image: -moz-linear-gradient(to bottom, #363840 50%, #3e63ff 100%) !important;
	-webkit-border-image: -webkit-linear-gradient(to bottom, #363840 50%, #3e63ff 100%) !important;
	border-image: linear-gradient(to bottom, #363840 50%, #3958c3 100%) !important;
	border-image-slice: 1 !important;
}
.item-type-csgo-High > .bottom{border-top: 1px solid #3e63ff;background: #181923;}
.item-type-csgo-High > .bottom > .icon{width: 7px;height: 45px;background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/item_types/icon_milspec.png);}
.item-type-csgo-High > .bottom > .info > .property{color: #3e63ff;}
.item-type-csgo-High > .top > .property{color: #3e63ff;}
.item-type-csgo-High > .top > .status{color: #3e63ff;}


/* 4 -------- Classified Exotic -------- */

.item-type-csgo-Classified{
	border: 1px solid transparent !important;
    -moz-border-image: -moz-linear-gradient(to bottom, #363840 50%, #fc21ff 100%) !important;
    -webkit-border-image: -webkit-linear-gradient(to bottom, #363840 50%, #fc21ff 100%) !important;
    border-image: linear-gradient(to bottom, #363840 50%, #fc21ff 100%) !important;
    border-image-slice: 1 !important;
}
.item-type-csgo-Classified > .bottom{border-top: 1px solid #fc21ff;background: #191822;}
.item-type-csgo-Classified > .bottom > .icon{width: 7px;height: 45px;background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/item_types/icon_classified.png);}
.item-type-csgo-Classified > .bottom > .info > .property{color: #fc21ff;}
.item-type-csgo-Classified > .top > .property{color: #fc21ff;}
.item-type-csgo-Classified > .top > .status{color: #fc21ff;}

.item-type-csgo-Exotic{
	border: 1px solid transparent !important;
	-moz-border-image: -moz-linear-gradient(to bottom, #363840 50%, #fc21ff 100%) !important;
	-webkit-border-image: -webkit-linear-gradient(to bottom, #363840 50%, #fc21ff 100%) !important;
	border-image: linear-gradient(to bottom, #363840 50%, #fc21ff 100%) !important;
	border-image-slice: 1 !important;
}
.item-type-csgo-Exotic > .bottom{border-top: 1px solid #fc21ff;background: #191822;}
.item-type-csgo-Exotic > .bottom > .icon{width: 7px;height: 45px;background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/item_types/icon_classified.png);}
.item-type-csgo-Exotic > .bottom > .info > .property{color: #fc21ff;}
.item-type-csgo-Exotic > .top > .property{color: #fc21ff;}
.item-type-csgo-Exotic > .top > .status{color: #fc21ff;}


/* 5 -------- restricted Remarkable -------- */
.item-type-csgo-Restricted{
	border: 1px solid transparent !important;
    -moz-border-image: -moz-linear-gradient(to bottom, #363840 50%, #4B0082  100%) !important;
    -webkit-border-image: -webkit-linear-gradient(to bottom, #363840 50%, #4b0082 100%) !important;
    border-image: linear-gradient(to bottom, #363840 50%, #4b0082 100%) !important;
    border-image-slice: 1 !important;
}
.item-type-csgo-Restricted > .bottom{border-top: 1px solid #4b0082;background: #1c1821;}
.item-type-csgo-Restricted > .bottom > .icon{width: 7px;height: 45px;background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/item_types/icon_restricted.png);}
.item-type-csgo-Restricted > .bottom > .info > .property{color: #4b0082;}
.item-type-csgo-Restricted > .top > .property{color: #4b0082;}
.item-type-csgo-Restricted > .top > .status{color: #4b0082;}

.item-type-csgo-Remarkable{
	border: 1px solid transparent !important;
	-moz-border-image: -moz-linear-gradient(to bottom, #363840 50%, #4B0082  100%) !important;
	-webkit-border-image: -webkit-linear-gradient(to bottom, #363840 50%, #4b0082 100%) !important;
	border-image: linear-gradient(to bottom, #363840 50%, #4b0082 100%) !important;
	border-image-slice: 1 !important;
}
.item-type-csgo-Remarkable > .bottom{border-top: 1px solid #4b0082;background: #1c1821;}
.item-type-csgo-Remarkable > .bottom > .icon{width: 7px;height: 45px;background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/item_types/icon_restricted.png);}
.item-type-csgo-Remarkable > .bottom > .info > .property{color: #4b0082;}
.item-type-csgo-Remarkable > .top > .property{color: #4b0082;}
.item-type-csgo-Remarkable > .top > .status{color: #4b0082;}

/* 6 ---------- covert ---------- */

.item-type-csgo-Covert{
	border: 1px solid transparent !important;
    -moz-border-image: -moz-linear-gradient(to bottom, #363840 50%, #b92f30 100%) !important;
    -webkit-border-image: -webkit-linear-gradient(to bottom, #363840 50%, #b92f30 100%) !important;
    border-image: linear-gradient(to bottom, #363840 50%, #b92f30 100%) !important;
    border-image-slice: 1 !important;
}
.item-type-csgo-Covert > .bottom{border-top: 1px solid #b92f30;background: #1d191e;}
.item-type-csgo-Covert > .bottom > .icon{width: 7px;height: 45px;background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/item_types/icon_covert.png);}
.item-type-csgo-Covert > .bottom > .info > .property{color: #b92f30;}
.item-type-csgo-Covert > .top > .property{color: #b92f30;}
.item-type-csgo-Covert > .top > .status{color: #b92f30;}


/* 7 ----------- rare ----------- */

.item-type-csgo-Contraband{
	border: 1px solid transparent !important;
    -moz-border-image: -moz-linear-gradient(to bottom, #363840 50%, #ffff05 100%) !important;
    -webkit-border-image: -webkit-linear-gradient(to bottom, #363840 50%, #ffff05 100%) !important;
    border-image: linear-gradient(to bottom, #363840 50%, #ffff05 100%) !important;
    border-image-slice: 1 !important;
}
.item-type-csgo-Contraband > .bottom{border-top: 1px solid #ffff05;background: #1d1c1d;}
.item-type-csgo-Contraband > .bottom > .icon{width: 7px;height: 45px;background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/item_types/icon_rare.png);}
.item-type-csgo-Contraband > .bottom > .info > .property{color: #ffff05;}
.item-type-csgo-Contraband > .top > .property{color: #ffff05;}
.item-type-csgo-Contraband > .top > .status{color: #ffff05;}


.item-type-csgo-Extraordinary{
	border: 1px solid transparent !important;
	-moz-border-image: -moz-linear-gradient(to bottom, #363840 50%, #ffff05 100%) !important;
	-webkit-border-image: -webkit-linear-gradient(to bottom, #363840 50%, #ffff05 100%) !important;
	border-image: linear-gradient(to bottom, #363840 50%, #ffff05 100%) !important;
	border-image-slice: 1 !important;
}
.item-type-csgo-Extraordinary > .bottom{border-top: 1px solid #ffff05;background: #1d1c1d;}
.item-type-csgo-Extraordinary > .bottom > .icon{width: 7px;height: 45px;background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/item_types/icon_rare.png);}
.item-type-csgo-Extraordinary > .bottom > .info > .property{color: #ffff05;}
.item-type-csgo-Extraordinary > .top > .property{color: #ffff05;}
.item-type-csgo-Extraordinary > .top > .status{color: #ffff05;}


/* DOTA 2 */

/* 1 ------- consumables ------- */

.item-type-dota-Arcana{
	border: 1px solid transparent !important;
    -moz-border-image: -moz-linear-gradient(to bottom, #363840 50%, #c1ffab 100%) !important;
    -webkit-border-image: -webkit-linear-gradient(to bottom, #363840 50%, #c1ffab 100%) !important;
    border-image: linear-gradient(to bottom, #363840 50%, #c1ffab 100%) !important;
    border-image-slice: 1 !important;
    background: #403f40 !important
}

.item-type-dota-Arcana > .middle{height: calc( 100% - 70px ) !important;overflow: hidden;position: relative;z-index: 1;background: none !important;}
.item-type-dota-Arcana > .middle > img{width: 60% !important;bottom: 10px !important;}
.item-type-dota-Arcana > .top{position: relative;z-index: 2;border: none !important;position: absolute;}

.item-type-dota-Arcana > .bottom{border-top: 1px solid #c1ffab;background: #1b1d23;}
.item-type-dota-Arcana > .bottom > .icon{width: 7px;height: 45px;background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/item_types/icon_consumables.png);}
.item-type-dota-Arcana > .bottom > .info > .property{color: #c1ffab;}
.item-type-dota-Arcana > .top > .property{color: #c1ffab;}
.item-type-dota-Arcana > .top > .status{color: #c1ffab;}
.categoryinfo>.dota-consumables{color: #c1ffab;}

/* 2 -------- industrial -------- */

.item-type-dota-Legendary{
	border: 1px solid transparent !important;
    -moz-border-image: -moz-linear-gradient(to bottom, #363840 50%, #ff1ad1 100%) !important;
    -webkit-border-image: -webkit-linear-gradient(to bottom, #363840 50%, #ff1ad1 100%) !important;
    border-image: linear-gradient(to bottom, #363840 50%, #ff1ad1 100%) !important;
    border-image-slice: 1 !important;
    background: #403f40 !important;
}

.item-type-dota-Legendary > .middle{height: calc( 100% - 70px ) !important;overflow: hidden;position: relative;z-index: 1;background: none !important;}
.item-type-dota-Legendary > .middle > img{width: 60% !important;bottom: 10px !important;}
.item-type-dota-Legendary > .top{position: relative;z-index: 2;border: none !important;position: absolute;}

.item-type-dota-Legendary > .bottom{border-top: 1px solid #ff1ad1;background: #191822;}
.item-type-dota-Legendary > .bottom > .icon{width: 7px;height: 45px;background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/item_types/icon_consumables.png);}
.item-type-dota-Legendary > .bottom > .info > .property{color: #ff1ad1;}
.item-type-dota-Legendary > .top > .property{color: #ff1ad1;}
.item-type-dota-Legendary > .top > .status{color: #ff1ad1;}
.categoryinfo>.dota-industrial{color: #ff1ad1;}

/* 3 ---------- milspec --------- */

.item-type-dota-Immortal{
	border: 1px solid transparent !important;
    -moz-border-image: -moz-linear-gradient(to bottom, #363840 50%, #ffc002 100%) !important;
    -webkit-border-image: -webkit-linear-gradient(to bottom, #363840 50%, #ffc002 100%) !important;
    border-image: linear-gradient(to bottom, #363840 50%, #ffc002 100%) !important;
    border-image-slice: 1 !important;
    background: #403f40 !important;
}

.item-type-dota-Immortal > .middle{height: calc( 100% - 70px ) !important;overflow: hidden;position: relative;z-index: 1;background: none !important;}
.item-type-dota-Immortal > .middle > img{width: 60% !important;bottom: 10px !important;}
.item-type-dota-Immortal > .top{position: relative;z-index: 2;border: none !important;position: absolute;}

.item-type-dota-Immortal > .bottom{border-top: 1px solid #ffc002;background: #1d1c1d;}
.item-type-dota-Immortal > .bottom > .icon{width: 7px;height: 45px;background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/item_types/icon_consumables.png);}
.item-type-dota-Immortal > .bottom > .info > .property{color: #ffc002;}
.item-type-dota-Immortal > .top > .property{color: #ffc002;}
.item-type-dota-Immortal > .top > .status{color: #ffc002;}
.categoryinfo>.dota-milspec {color: #ffc002;}

/* 4 -------- restricted -------- */

.item-type-dota-Mythical{
	border: 1px solid transparent !important;
    -moz-border-image: -moz-linear-gradient(to bottom, #363840 50%, #a73ce1 100%) !important;
    -webkit-border-image: -webkit-linear-gradient(to bottom, #363840 50%, #a73ce1 100%) !important;
    border-image: linear-gradient(to bottom, #363840 50%, #a73ce1 100%) !important;
    border-image-slice: 1 !important;
    background: #403f40 !important;
}

.item-type-dota-Mythical > .middle{height: calc( 100% - 70px ) !important;overflow: hidden;position: relative;z-index: 1;background: none !important;}
.item-type-dota-Mythical > .middle > img{width: 60% !important;bottom: 10px !important;}
.item-type-dota-Mythical > .top{position: relative;z-index: 2;border: none !important;position: absolute;}

.item-type-dota-Mythical > .bottom{border-top: 1px solid #a73ce1;background: #1c1821;}
.item-type-dota-Mythical > .bottom > .icon{width: 7px;height: 45px;background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/item_types/icon_consumables.png);}
.item-type-dota-Mythical > .bottom > .info > .property{color: #a73ce1;}
.item-type-dota-Mythical > .top > .property{color: #a73ce1;}
.item-type-dota-Mythical > .top > .status{color: #a73ce1;}
.categoryinfo>.dota-restricted {color: #a73ce1;}

/* 5 -------- classified -------- */

.item-type-dota-Uncommon{
	border: 1px solid transparent !important;
    -moz-border-image: -moz-linear-gradient(to bottom, #363840 50%, #9dc2e5 100%) !important;
    -webkit-border-image: -webkit-linear-gradient(to bottom, #363840 50%, #9dc2e5 100%) !important;
    border-image: linear-gradient(to bottom, #363840 50%, #9dc2e5 100%) !important;
    border-image-slice: 1 !important;
    background: #403f40 !important;
}

.item-type-dota-Uncommon > .middle{height: calc( 100% - 70px ) !important;overflow: hidden;position: relative;z-index: 1;background: none !important;}
.item-type-dota-Uncommon > .middle > img{width: 60% !important;bottom: 10px !important;}
.item-type-dota-Uncommon > .top{position: relative;z-index: 2;border: none !important;position: absolute}

.item-type-dota-Uncommon > .bottom{border-top: 1px solid #9dc2e5;background: #1c1821;}
.item-type-dota-Uncommon > .bottom > .icon{width: 7px;height: 45px;background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/item_types/icon_consumables.png);}
.item-type-dota-Uncommon > .bottom > .info > .property{color: #9dc2e5;}
.item-type-dota-Uncommon> .top > .property{color: #9dc2e5;}
.item-type-dota-Uncommon > .top > .status{color: #9dc2e5;}
.categoryinfo>.dota-covert{color: #9dc2e5;}

/* 6 ---------- covert ---------- */

.item-type-dota-Rare{
	border: 1px solid transparent !important;
    -moz-border-image: -moz-linear-gradient(to bottom, #363840 50%, #0271c0 100%) !important;
    -webkit-border-image: -webkit-linear-gradient(to bottom, #363840 50%, #0271c0 100%) !important;
    border-image: linear-gradient(to bottom, #363840 50%, #0271c0 100%) !important;
    border-image-slice: 1 !important;
    background: #403f40 !important;
}

.item-type-dota-Rare > .middle{height: calc( 100% - 70px ) !important;overflow: hidden;position: relative;z-index: 1;background: none !important;}
.item-type-dota-Rare > .middle > img{width: 60% !important;bottom: 10px !important;}
.item-type-dota-Rare > .top{position: relative;z-index: 2;border: none !important;position: absolute;}

.item-type-dota-Rare > .bottom{border-top: 1px solid #0271c0;background: #1d191e;}
.item-type-dota-Rare > .bottom > .icon{width: 7px;height: 45px;background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/item_types/icon_consumables.png);}
.item-type-dota-Rare > .bottom > .info > .property{color: #0271c0;}
.item-type-dota-Rare > .top > .property{color: #0271c0;}
.item-type-dota-Rare > .top > .status{color: #0271c0;}
.categoryinfo>.dota-classified{color: #0271c0;}

/* 7 ----------- rare ----------- */

.item-type-dota-Common{
	border: 1px solid transparent !important;
    -moz-border-image: -moz-linear-gradient(to bottom, #363840 50%, #ffffff 100%) !important;
    -webkit-border-image: -webkit-linear-gradient(to bottom, #363840 50%, #ffffff 100%) !important;
    border-image: linear-gradient(to bottom, #363840 50%, #ffffff 100%) !important;
    border-image-slice: 1 !important;
    background: #403f40 !important;
}

.item-type-dota-Common > .middle{height: calc( 100% - 70px ) !important;overflow: hidden;position: relative;z-index: 1;background: none !important;}
.item-type-dota-Common> .middle > img{width: 60% !important;bottom: 10px !important;}
.item-type-dota-Common > .top{position: relative;z-index: 2;border: none !important;position: absolute;}

.item-type-dota-Common> .bottom{border-top: 1px solid #ffffff;background: #1d1c1d;}
.item-type-dota-Common> .bottom > .icon{width: 7px;height: 45px;background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/item_types/icon_consumables.png);}
.item-type-dota-Common > .bottom > .info > .property{color: #ffffff;}
.item-type-dota-Common> .top > .property{color: #ffffff;}
.item-type-dota-Common > .top > .status{color: #ffffff;}
.categoryinfo>.dota-rare{color: #ffffff;}

.item-type-dota-{
	border: 1px solid transparent !important;
	-moz-border-image: -moz-linear-gradient(to bottom, #363840 50%, #ffffff 100%) !important;
	-webkit-border-image: -webkit-linear-gradient(to bottom, #363840 50%, #ffffff 100%) !important;
	border-image: linear-gradient(to bottom, #363840 50%, #ffffff 100%) !important;
	border-image-slice: 1 !important;
	background: #403f40 !important;
}

.item-type-dota- > .middle{height: calc( 100% - 70px ) !important;overflow: hidden;position: relative;z-index: 1;background: none !important;}
.item-type-dota- > .middle > img{width: 60% !important;bottom: 10px !important;}
.item-type-dota- > .top{position: relative;z-index: 2;border: none !important;position: absolute}

.item-type-dota- > .bottom{border-top: 1px solid #ffffff;background: #1d1c1d;}
.item-type-dota- > .bottom > .icon{width: 7px;height: 45px;background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/item_types/icon_consumables.png);}
.item-type-dota- > .bottom > .info > .property{color: #ffffff;}
.item-type-dota- > .top > .property{color: #ffffff;}
.item-type-dota- > .top > .status{color: #ffffff;}
.categoryinfo>.dota-rare{color: #ffffff;}

/* ----------------------------- */
/* ------------ shop ----------- */
/* ----------------------------- */

.info-shop{
	margin-top: 40px;
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.info-shop > .title{
	font-family: Microsoft Jheng Hei Bold;
    font-size: 28px;
    color: #fff;
}

.info-shop > .title > span{
	display: block;
	font-family: Microsoft Jheng Hei Bold;
    font-size: 14px;
    color: #b9b9ba;
}

.info-shop > .search{
	width: 500px;
	height: 60px;
	position: relative;
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.info-shop > .search > form{
	width: 100%;
	height: 100%;
	position: relative;
}

.info-shop > .search > form > input{
	width: 100%;
	height: 100%;
	background: none;
	border: 1px solid #363840;
	padding-left: 20px;
	font-size: 16px;
	color: #fff;
	position: relative;
	z-index: 1;
	padding-right: 70px;
}

.info-shop > .search > form > button{
	width: 60px;
	height: 100%;
	position: absolute;
	top: 0px;
	right: 0px;
	z-index: 2;
	border: none;
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/icon/search_icon.png) center center no-repeat;
	opacity: 0.4;
	transition: all .2s ease-in-out;
	cursor: pointer;
}

.info-shop > .search > form > button:hover{
	opacity: 1;
}

/* --------- shop items -------- */

.shop-items{
	margin-top: 40px;
}

.shop-items > .title{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #2c3038;
}

.shop-items > .title > .item-switch{
	width: 200px;
	height: 56px;
	border: 1px solid #2c3038;
	margin: -1px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}

.shop-items > .title > .item-switch > .item-switch-button{
	width: 50%;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	position: relative;
	font-family: Microsoft Jheng Hei Bold;
    font-size: 16px;
	color: #606163;
	transition: all .2s ease-in-out;
}

/*.shop-items > .title > .item-switch > .item-switch-button:hover{*/
	/*color: #fe7e5c;*/
/*}*/

.shop-items > .title > .item-switch > .item-switch-button:nth-child(1){
	border-right: 1px solid #2c3038;
}

.shop-items > .title > .item-switch > .item-switch-button > .border_bottom {
    width: 70%;
    height: 3px;
    background: linear-gradient(to left, #fe924c, #fd686f);
    position: absolute;
    bottom: -2px;
    opacity: 0;
}

.shop-items > .title > .item-switch > .active{
	color: #fff;
}

.shop-items > .title > .item-switch > .active > .border_bottom{
	opacity: 1;
}

.shop-items > .title > .filters{
	height: 54px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.shop-items > .title > .filters > .filter{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-left: 60px;
}

/* ----------------------------- */
/* ----------- items ----------- */
/* ----------------------------- */

.info-items{
	margin-top: 40px;
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.info-items > .title{
	font-family: Microsoft Jheng Hei Bold;
    font-size: 28px;
    color: #fff;
}

.info-items > .title > span{
	display: block;
	font-family: Microsoft Jheng Hei Bold;
    font-size: 14px;
    color: #b9b9ba;
}

.info-items > .search{
	width: 500px;
	height: 60px;
	position: relative;
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.info-items > .search > form{
	width: 100%;
	height: 100%;
	position: relative;
}

.info-items > .search > form > input{
	width: 100%;
	height: 100%;
	background: none;
	border: 1px solid #363840;
	padding-left: 20px;
	font-size: 16px;
	color: #fff;
	position: relative;
	z-index: 1;
	padding-right: 70px;
}

.info-items > .search > form > button{
	width: 60px;
	height: 100%;
	position: absolute;
	top: 0px;
	right: 0px;
	z-index: 2;
	border: none;
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/icon/search_icon.png) center center no-repeat;
	opacity: 0.4;
	transition: all .2s ease-in-out;
	cursor: pointer;
}

.info-items > .search > form > button:hover{
	opacity: 1;
}

/* --------- data items -------- */

.data-items{
	margin-top: 40px;
}

.data-items > .title{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #2c3038;
}

.data-items > .title > .items-selects{
	width: 400px;
	height: 56px;
	border: 1px solid #2c3038;
	margin: -1px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}

.data-items > .title > .items-selects > .select-block:nth-child(1),
.data-items > .title > .items-selects > .select-block:nth-child(2){
	border-right: 1px solid #2c3038;
}
.data-items > .title > .items-selects > .select-blocks:nth-child(1){
	border-right: 1px solid #2c3038;
}
.data-items > .title > .items-selects > .select-block{
	width: calc( 100% / 3 );
	height: 100%;
	position: relative;
}
.data-items > .title > .items-selects > .select-blocks{
	width: calc( 100% / 2 );
	height: 100%;
	position: relative;
}

.data-items > .title > .items-selects > .select-block > .select-arrow{
	width: 14px;
	height: 8px;
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/icon/arrow_bottom_icon.png);
	position: absolute;
	top: calc( 50% - 4px );
	right: 15px;
	opacity: 0.5;
	pointer-events: none;
}
.data-items > .title > .items-selects > .select-blocks > .select-arrow{
	width: 14px;
	height: 8px;
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/icon/arrow_bottom_icon.png);
	position: absolute;
	top: calc( 50% - 4px );
	right: 15px;
	opacity: 0.5;
	pointer-events: none;
}

.select-block > select{
	width: 100%;
	height: 100%;
	color: #fff;
	background: none;
	border: none;
	appearance: none;
	-webkit-appearance: none;
	padding: 10px;
	cursor: pointer;
	font-family: Microsoft Jheng Hei Bold;
    font-size: 16px;
    color: #9b9b9b;
    position: relative;
}

.select-blocks > select{
	width: 100%;
	height: 100%;
	background: none;
	border: none;
	appearance: none;
	-webkit-appearance: none;
	padding: 10px;
	cursor: pointer;
	font-family: Microsoft Jheng Hei Bold;
	font-size: 16px;
	color: #9b9b9b;
	position: relative;
}

.select-block > select option {
    background: #17181d;
    color: #fff;
    border: 1px solid #2c3038;
}
.select-blocks > select option {
	background: #17181d;
	color: #fff;
	border: 1px solid #2c3038;
}

.data-items > .title > .filters{
	height: 54px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-left: auto;
}

.data-items > .title > .filters > .filter{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-left: 40px;
}

.data-items > .title > .filters > .filter > .filter-toggle{
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	font-family: Microsoft Jheng Hei Bold;
    font-size: 16px;
    color: #9b9b9b;
    padding-right: 35px;
    background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/icon/filter_off_icon.png) right center no-repeat;
    cursor: pointer;
    transition: all .2s ease-in-out;
}

.data-items > .title > .filters > .filter > .filter-toggle:hover{
	color: #fff;
}

.data-items > .title > .filters > .filter > .on{
	 background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/icon/filter_on_icon.png) right center no-repeat;
}

.data-items > .title > .cancel-filters{
	width: 100px;
	height: 40px;
	border: 1px solid #2c3038;
	font-family: Microsoft Jheng Hei Bold;
    font-size: 16px;
    color: #9b9b9b;
    display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transition: all .2s ease-in-out;
	margin-left: 40px;
}

.data-items > .title > .cancel-filters:hover{
	border: 1px solid #fff;
	color: #fff;
}

/* ----------------------------- */
/* ------- other profile ------- */
/* ----------------------------- */

.other-profile{
	margin-top: 40px;
	padding-top: 30px;
}

.other-profile > .avatar{
	width: 70px;
	height: 70px;
	display: block;
	margin: 0 auto;
}

.other-profile > .username{
	width: 100%;
	font-family: Roboto Bold;
	font-size: 25px;
	color: #fff;
	text-align: center;
	margin-top: 15px;
}

.other-profile > .desc{
	width: 100%;
	text-align: center;
	font-family: Microsoft Jheng Hei Bold;
	font-size: 14px;
	background: linear-gradient(90deg, #f2636c 50%, #e98746);
    background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* -- other profile inventory--- */

.op-inventory{
	margin-top: 40px;
}

.op-inventory > .title{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	border-bottom: 1px solid #2c3038;
}

.op-inventory > .title > .item-count{
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	font-family: Microsoft Jheng Hei Bold;
    font-size: 20px;
    color: #fff;
    height: 55px;
}


.op-inventory > .title > .item-count > span{
	font-family: Roboto Bold;
    font-size: 24px;
    color: #fff;
    background: linear-gradient(90deg, #f2636c 50%, #e98746);
    background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	padding-top: 3px;
	margin-left: 10px;
}

/* ----------------------------- */
/* ---------- partner ---------- */
/* ----------------------------- */

/* -------- partner info-------- */

.partner-info{
	margin-top: 40px;
	border: 1px solid #2e3138;
	-webkit-box-shadow: 0px 20px 24px -4px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 20px 24px -4px rgba(0,0,0,0.2);
	box-shadow: 0px 20px 24px -4px rgba(0,0,0,0.2);
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
}

.partner-info > .rank-block > .title{
	width: 100%;
	font-family: Microsoft Jheng Hei Bold;
    font-size: 20px;
    color: #fff;
    text-align: center;
    margin-bottom: 20px;
}

.partner-info > .ref-block > .title,
.partner-info > .code-block > .title{
	width: 100%;
	font-family: Microsoft Jheng Hei Bold;
    font-size: 20px;
    color: #fff;
    margin-bottom: 20px;
}

.partner-info > .rank-block{
	width: calc( 100% / 3);
	padding: 30px;
	border-right: 1px solid #2e3138;
	align-self: stretch;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
}

.partner-info > .ref-block{
	width: calc( 100% / 3);
	padding: 30px;
	border-right: 1px solid #2e3138;
	align-self: stretch;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
}

.partner-info > .ref-block > input{
	height: 38px;
	width: 100%;
	border: none;
	background: none;
	font-family: Roboto Bold;
	background: linear-gradient(to left, #ff9a44 50%, #fc6076 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #fff;
    border-bottom: 1px solid #2e3138;
    padding-left: 0;
    margin-top: 13px;
}

.partner-info > .code-block{
	width: calc( 100% / 3);
	padding: 30px;
	align-self: stretch;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
}

/* ------ partner statistic----- */

.partner-statistic{
	margin-top: 40px;
	border: 1px solid #2e3138;
	-webkit-box-shadow: 0px 20px 24px -4px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 20px 24px -4px rgba(0,0,0,0.2);
	box-shadow: 0px 20px 24px -4px rgba(0,0,0,0.2);
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
}

.partner-statistic > .column{
	width: 20%;
	padding: 30px;
	align-self: stretch;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
}

.partner-statistic > .column:not(:last-child){
	border-right: 1px solid #2e3138;
}

.partner-statistic > .column:nth-child(1),
.partner-statistic > .column:nth-child(3){
}

.partner-statistic > .column:nth-child(5){
}

.partner-statistic > .column > .title{
	width: 100%;
	font-family: Microsoft Jheng Hei Bold;
    font-size: 16px;
    color: #919193;
    text-align: center;
    margin-bottom: 10px;
}

.partner-statistic > .column > .number{
	width: 100%;
	font-family: Roboto;
    font-size: 48px;
    color: #fff;
    text-align: center;
}

.partner-statistic > .column > .number > span{
	font-family: Roboto;
	background: linear-gradient(90deg, #99df96 50%, #cdfa7e);
    background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.partner-statistic > .column > .desc{
	margin: 0 auto;
	font-family: Microsoft Jheng Hei Bold;
    font-size: 16px;
    text-align: center;
    background: linear-gradient(to left, #ff9a44 50%, #fc6076 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: 10px;
}

/* ------- partner table ------- */

.partner-table{
	margin-top: 40px;
}

.partner-table > .title{
	width: 100%;
	font-family: Microsoft Jheng Hei Bold;
    font-size: 24px;
    color: #fff;
    text-align: center;
    margin-bottom: 40px;
}

.partner-table > .row{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.partner-table > .row > .column{
	width: calc( 25% + 1px );
	margin-right: -1px;
	margin-bottom: -1px;
	padding: 10px;
	border: 1px solid #2e3138;
	align-self: stretch;
	position: relative;
}

.partner-table > .row > div:before{
	content: attr(data-label);
	display: none;
	width: 100%;
	font-family: Microsoft Jheng Hei Bold;
    color: #fd6f69;
	font-size: 12px;
	height: 30px;
	text-align: center;
}
.partner-table > .row-title{
}


.partner-table > .row-title > .column{
	font-family: Microsoft Jheng Hei Bold;
    font-size: 16px !important;
    color: #fd6f69 !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

.partner-table > .row > .column > img{
}

.partner-table > .row > .column:nth-child(1){
	width: 148px;
	text-align: center;
}

.partner-table > .row > .column:nth-child(2) > span,
.partner-table > .row > .column:nth-child(4) > span{
	background: linear-gradient(90deg, #99df96 50%, #cdfa7e);
    background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-family: Roboto Bold;
}

.partner-table > .row > .column:nth-child(3) > span{
	background: linear-gradient(90deg, #fd7365 50%, #fe934a);
    background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-family: Roboto Bold;
}

.partner-table > .row > .column:nth-child(2),
.partner-table > .row > .column:nth-child(3),
.partner-table > .row > .column:nth-child(4){
	width: calc( ( 100% - 148px ) / 3 );
	padding-left: 20px;
	font-family: Roboto Bold;
	font-size: 25px;
	color: #fff;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}

/* ----------------------------- */
/* ---------- roulette --------- */
/* ----------------------------- */

.roulette{
	height: 246px;
	margin-top: 150px;
	border-top: 1px solid #c4f683;
	border-bottom: 1px solid #c4f683;
	background: rgba(0,0,0,0.3);
    /*background: url(../images/halloween/open-box-bg.jpg)center;*/
	padding: 20px;
	position: relative;
	margin-bottom: 140px;
}

/* --------- items line -------- */

.roulette > .items-line{
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.roulette > .items-line > .items{
	width: 30000px !important;
	height: 100%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	margin: 0px !important;
	margin-left: 50% !important;
	transform: translateX( -840px );
	opacity: 0.3;
	/*opacity: 0.8;*/
}

.roulette > .items-line > .items > .item,
.zoom-wnd > .circle > .items > .item{
	width: 220px !important;
	height: 100% !important;
	margin: 0px !important;
	margin-right: 10px !important;
	margin-left: 10px !important;
}

.roulette > .items-line > .items > .item > .middle,
.zoom-wnd > .circle > .items > .item > .middle{
	width: 100%;
	height: calc( 100% - 50px ) !important;
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/bg/item_bg.png) center center repeat-x;
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: relative;
    pointer-events: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}

.roulette > .items-line > .items > .item > .middle > img,
.zoom-wnd > .circle > .items > .item > .middle > img{
	width: 60%;
	position: absolute;
	-webkit-filter: drop-shadow(0px 25px 5px rgba(0,0,0,0.4));
  	filter: drop-shadow(0px 25px 5px rgba(0,0,0,0.4));
  	display: block;
}

.roulette > .items-line > .items > .item > .bottom,
.zoom-wnd > .circle > .items > .item > .bottom{
	width: 100%;
	height: 50px;
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.roulette > .items-line > .items > .item > .bottom > .icon,
.zoom-wnd > .circle > .items > .item > .bottom > .icon{
	height: 30px;
	background-size: 100% 100%;
}

/* ---------- zoom wnd -------- */

.zoom-wnd{
	width: 583px;
	height: 319px;
	position: absolute;
	z-index: 2;
	top: calc( 50% - ( 319px / 2 ) );
	left: calc( 50% - ( 583px / 2 ) );
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.zoom-wnd > .marker{
	width: 45px;
	height: 344px;
	position: absolute;
	top: calc( 50% - ( 344px / 2 ) );
	left: calc( 50% - ( 45px / 2 ) );
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/bg/marker_bg.png);
	transform: scale(0.95,0.95);
}

.zoom-wnd > .circle{
	width: 583px;
	height: 583px;
	position: absolute;
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/bg/opening_bg.png) #12161a center center;
	border-radius: 600px;
	overflow: hidden;
	display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    top: calc( ( 100% - 583px ) / 2 );
}

.zoom-wnd > .circle > .items{
	width: 30000px !important;
	height: 204px;
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	margin: 0px !important;
	margin-left: 50% !important;
	transform: translateX( 346px ) scale(1.3);
	margin-top: auto !important;
	margin-bottom: auto !important;
	transition: all 5000ms cubic-bezier(0.4, 0, 1, 1);
}

.roulette > .opening-progress{
	width: 180px;
	left: calc( 50% - ( 180px / 2 ) );
	position: absolute;
	bottom: -80px;
	opacity: 0;
	pointer-events: none;
}

.roulette > .opening-progress > .text{
	width: 100%;
	text-align: center;
	font-family: Microsoft Jheng Hei Bold;
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;
}

.roulette > .opening-progress > .progress{
	width: 100%;
	height: 2px;
	background: #5d4029;
}

.roulette > .opening-progress > .progress > .bar{
	width: 0%;
	height: 100%;
	background: linear-gradient(to left, #fe924c, #fd686f);
}

/* --------- this case -------- */

.roulette > .this-case{
	width: 583px;
	height: 319px;
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/bg/win_item_bg.png);
	/*background: url(../images/halloween/rottl_bg.png);!* ---------- 圣诞节 ----------- *!*/
	background-size: 100% 100%;
	position: absolute;
	z-index: 2;
	top: calc( 50% - ( 319px / 2 ) );
	left: calc( 50% - ( 583px / 2 ) );
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}

.roulette > .this-case:hover .case_gun{
	transform: scale(1.1,1.1);
}

.roulette > .this-case > .case_icon{
	width: 70%;
	position: absolute;
	top: 40px;
	z-index: 1;
}

.roulette > .this-case > .case_gun{
	width: 60%;
	position: absolute;
	top: 30px;
	z-index: 2;
	transition: all .4s ease-in-out;
}

.roulette > .this-case > .open-case-btn{
	position: absolute;
	width: 170px;
	height: 56px;
	left: calc( 50% - ( 170px / 2 ) );
	bottom: -56px;
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
	-moz-border-image: -moz-linear-gradient(to bottom, #2e3139 0%, #d45466 100%);
	-webkit-border-image: -webkit-linear-gradient(to bottom, #2e3139 0%, #d45466 100%);
	border-image: linear-gradient(to bottom, #2e3139 0%, #d45466 100%);
	border-image-slice: 1;
	background: #1e191b;
	cursor: pointer;
	transition: all .2s ease-in-out;

}

.roulette > .this-case > .open-case-btn:hover{
	background: #342b2f;
}

.roulette > .this-case > .open-case-btn > span{
	font-family: Microsoft Jheng Hei Bold;
    font-size: 18px;
	color: #fff;
}

.roulette > .this-df-case > .case_gun{
	width: 80%;
	position: absolute;
	top: 0px;
	z-index: 2;
	transition: all .4s ease-in-out;
}

.roulette > .this-df-case > .open-case-btn{
	position: absolute;
	width: 170px;
	height: 56px;
	left: calc( 50% - ( 170px / 2 ) );
	bottom: -56px;
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
	border-left: 1px solid transparent;
	border-right: 1px solid transparent;
	border-bottom: 1px solid transparent;
	-moz-border-image: -moz-linear-gradient(to top, #b5f18d 0%, #2d3037 100%);
	-webkit-border-image: -webkit-linear-gradient(to top, #b5f18d 0%, #2d3037 100%);
	border-image: linear-gradient(to top, #b5f18d 0%, #2d3037 100%);
	border-image-slice: 1;
	background: #1e2222;
	cursor: pointer;
	transition: all 0.1s cubic-bezier(0.25,5,5,0.1);
}

.roulette > .this-df-case > .open-case-btn:hover{
	background: #242b2a;
}

/* ---------- win item -------- */

.roulette > .win-item{
	width: 583px;
	height: 319px;
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/bg/win_item_bg.png);
	background-size: 100% 100%;
	position: absolute;
	z-index: 2;
	top: calc( 50% - ( 319px / 2 ) );
	left: calc( 50% - ( 583px / 2 ) );
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    transition: all .3s ease-in-out;
    display: none;
}

.opan-case-roulette{
	margin-top: 8px !important;
}

.roulette > .win-df-item{
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/bg/win_df_item_bg.png);
	background-size: 100% 100%;
}

.roulette > .win-item > .title{
	width: 100%;
	font-family: Microsoft Jheng Hei Bold;
    font-size: 40px;
	background: linear-gradient(90deg, #99df96 50%, #cdfa7e);
    background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
    text-align: center;
    position: absolute;
	top: -70px;
    left: 0px;
}

.roulette > .win-item > .middle-button{
	width: 200px;
	height: 56px;
	position: absolute;
	left: calc( 50% - 100px );
	bottom: -55px;
	border: 1px solid transparent;
	-moz-border-image: -moz-linear-gradient(to top, #b5f18d 0%, #2d3037 100%);
	-webkit-border-image: -webkit-linear-gradient(to top, #b5f18d 0%, #2d3037 100%);
	border-image: linear-gradient(to top, #b5f18d 0%, #2d3037 100%);
	border-image-slice: 1;
	background: linear-gradient(to top, rgba(174, 238, 146, 0.1) 50%, rgba(46, 48, 55, 0.1) 100%);
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	font-family: Microsoft Jheng Hei Bold;
	font-size: 18px;
	text-align: right;
	color: #fff;
	transition: all .2s ease-in-out;
	cursor: pointer;
}

.roulette > .win-item > .middle-button > span{
	background: linear-gradient(90deg, #99df96 50%, #cdfa7e);
    background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 18px;
	font-family: Roboto Bold;
	margin-left: 20px;
}

.roulette > .win-item > .middle-button:hover{
	color: #a1ec66;
}

.roulette > .win-item > .button{
	width: 140px;
	height: 56px;
	position: absolute;
	bottom: -55px;
	-moz-border-image: -moz-linear-gradient(to top, #f08c47 0%, #32343e 100%);
	-webkit-border-image: -webkit-linear-gradient(to top, #f08c47 0%, #32343e 100%);
	border-image: linear-gradient(to top, #f08c47 0%, #32343e 100%);
	border-image-slice: 1;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	font-family: Microsoft Jheng Hei Bold;
	font-size: 14px;
	text-align: right;
	color: #fff;
	transition: all .2s ease-in-out;
	cursor: pointer;
}

.roulette > .win-item > .button > img{
	margin-right: 10px;
}

.roulette > .win-item > .button:hover{
	color: #ff8a00;
}

.roulette > .win-item > .take-item-btn{
	left: 51px;
	border-left: 1px solid transparent;
	border-bottom: 1px solid transparent;
}

.roulette > .win-item > .retry-opening-btn{
	right: 52px;
	border-right: 1px solid transparent;
	border-bottom: 1px solid transparent;
}

.roulette > .win-item > .item{
	width: 80% !important;
	position: relative;
	border: none;
}

.roulette > .win-item > .item > .middle{
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	height: 200px;
}

.roulette > .win-item > .item > .middle > img{
	width: 60% !important;
	-webkit-filter: drop-shadow(0px 25px 5px rgba(0,0,0,0.4));
  	filter: drop-shadow(0px 25px 5px rgba(0,0,0,0.4));
  	margin-top:40px;
}

.roulette > .win-df-item > .item > .middle > img{
	width: 80% !important;
	-webkit-filter: drop-shadow(0px 25px 5px rgba(0,0,0,0.4));
  	filter: drop-shadow(0px 25px 5px rgba(0,0,0,0.4));
  	margin-top: 0 !important;
}

.roulette > .win-item > .item > .bottom{
	background: none !important;
	border: none !important;
	margin-top: 28px;
}

.roulette > .win-item > .item > .bottom > .info > .type{
	background: linear-gradient(90deg, #99df96 50%, #cdfa7e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	font-size: 20px;
	font-family: Roboto Bold;
}

.roulette > .win-item > .item > .bottom > .info > .name{
	color: #fff;
	font-size: 26px !important;
	font-family: Roboto Bold;
}

.roulette > .win-item > .item > .bottom > .icon{
	display: none;
}

.case-items > .items > .item > .bottom > .info > .property,
.roulette > .items-line > .items > .item > .bottom > .info > .property,
.roulette > .zoom-wnd > .circle > .items > .item > .bottom > .info > .property{
	display: none !important;
}

.roulette > .win-item > .item > .bottom > .info > .property {
	font-family: Microsoft Jheng Hei Bold;
	font-size: 16px;
	color: #a6a9aa;
}


/* --------- daily info -------- */

.daily-info{
	margin-top: 40px;
	border: 1px solid #2c3038;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	position: relative;
	padding-top: 30px;
	padding-bottom: 30px;
}

.daily-info > .title{
	font-family: Microsoft Jheng Hei Bold;
	font-size: 30px;
	color: #fff;
	text-align: center;
	padding: 10px;
	background: #0f1217;
	top: -30px;
	position: absolute;
}

.daily-info > .title > span{
	font-family: Microsoft Jheng Hei Bold;
	font-size: 30px;
	background: linear-gradient(90deg, #99df96 50%, #cdfa7e);
    background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.daily-info > .column{
	width: calc( 100% / 3);
	padding: 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.daily-info > .column > .icon{
	width: 60px;
	height: 60px;
	border: 1px solid transparent;
	-moz-border-image: -moz-linear-gradient(to top, #d2fc7a 0%, #97e6a0 100%);
	-webkit-border-image: -webkit-linear-gradient(to top, #d2fc7a 0%, #97e6a0 100%);
	border-image: linear-gradient(to top, #d2fc7a 0%, #97e6a0 100%);
	border-image-slice: 1;
	font-family: Roboto Bold;
	font-size: 30px;
	color: #fff;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.daily-info > .column > .text{
	width: calc( 100% - 60px );
	padding-left: 10px;
	font-family: Microsoft Jheng Hei Bold;
	font-size: 16px;
	color: #c4c4c4;
}

.case-items{
	margin-top: 40px;
}

.case-items > .title{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #2c3038;
}

.case-items > .items > .item > .middle{
	height: calc( 100% - 70px ) !important;
}

.case-items > .title > .item-switch{
	width: 200px;
	height: 56px;
	border: 1px solid #2c3038;
	margin: -1px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}

.case-items > .title > .item-switch > .item-switch-button{
	width: 50%;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	position: relative;
	font-family: Microsoft Jheng Hei Bold;
    font-size: 16px;
	color: #606163;
	transition: all .2s ease-in-out;
}

.case-items > .title > .item-switch > .item-switch-button:hover{
	color: #fe7e5c;
}

.case-items > .title > .item-switch > .item-switch-button:nth-child(1){
	border-right: 1px solid #2c3038;
}

.case-items > .title > .item-switch > .item-switch-button > .border_bottom {
    width: 70%;
    height: 3px;
    background: linear-gradient(to left, #fe924c, #fd686f);
    position: absolute;
    bottom: -2px;
    opacity: 0;
}

.case-items > .title > .item-switch > .active{
	color: #fff;
}

.case-items > .title > .item-switch > .active > .border_bottom{
	opacity: 1;
}

.case-items > .title > .count{
	width: 56px;
	height: 56px;
	border: 1px solid #2c3038;
	margin: -1px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	color: #606163;
}

/* -------- daily history ------ */

.daily-history{
	margin-top: 40px;
}

.daily-history > .title{
	width: 100;
	font-family: Microsoft Jheng Hei Bold;
	font-size: 24px;
	color: #fff;
	margin-bottom: 40px;
	text-align: center;
}

.daily-history > .table{
	width: 500px;
	margin: 0 auto;
	border: 1px solid #30323a;
	padding: 10px;
}

.daily-history > .table > .line{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.daily-history > .table > .line:not(:last-child){
	border-bottom: 1px solid #30323a;
}

.daily-history > .table > .line > .row{
	width: 30%;
	font-family: Microsoft Jheng Hei;
	font-size: 16px;
	color: #9d9d9d;
	padding: 15px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.daily-history > .table > .line > .row:nth-child(1){
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	width: 40%;
}

.daily-history > .table > .line > .row:nth-child(3){
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	color: #b7f189;
	width: 20%;
}

/* ----------------------------- */
/* --------- open case --------- */
/* ----------------------------- */

.open-case-title{
	margin-top: 40px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.open-case-title > .left{
	width: 580px;
	font-family: Roboto Bold;
	font-size: 46px;
	color: #fff;
}

.open-case-title > .left > span{
	font-family: Microsoft Jheng Hei Bold;
	font-size: 18px;
	color: #b7b5b5;
	display: block;
}

.open-case-title > .right{
	width: 580px;
	font-family: Roboto Bold;
	font-size: 48px;
	color: #fff;
	text-align: right;
}

.open-case-title > .right > span{
	background: linear-gradient(90deg, #99df96 50%, #cdfa7e);
    background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.open-case-title > .right > .desc{
	font-family: Microsoft Jheng Hei Bold;
	font-size: 18px;
	color: #b7b5b5;
	display: block;
}

/* ----------------------------- */
/* --------- item page --------- */
/* ----------------------------- */

/* ------- view item box ------- */

.view-item-box{
	margin-top: 40px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
}

/* --------- item panel -------- */

.view-item-box > .item-panel{
	width: 580px;
}

/* ---------- item info -------- */

.view-item-box > .item-panel > .item-info{
	width: 100%;
	height: 318px;
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/bg/big_item_bg.png);
	background-size: 100% 100%;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.view-item-box > .item-panel > .item-info:hover img{
	transform: scale(1.1,1.1);
}

.view-item-box > .item-panel > .item-info > img{
	width: 55%;
	-webkit-filter: drop-shadow(0px 25px 5px rgba(0,0,0,0.4));
	filter: drop-shadow(0px 25px 5px rgba(0,0,0,0.4));
	z-index: 1;
	transition: all .4s ease-in-out;
}

.view-item-box > .item-panel > .item-info > .item-setting{
	width: 150px;
	padding: 20px 25px 20px 25px;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	position: absolute;
	top: 0px;
	right: 20px;
	z-index: 2;
}

.view-item-box > .item-panel > .item-info > .item-setting span{
	font-family: Microsoft Jheng Hei;
	font-size: 14px;
	color: #fff;
}

.view-item-box > .item-panel > .item-info > .item-setting .item-switch{
	width: 43px;
	height: 23px;
	border-radius: 20px;
	border: 1px solid #23252a;
	padding: 3px;
	cursor: pointer;
}

.view-item-box > .item-panel > .item-info > .item-setting .item-switch > .tumb{
	width: 15px;
	height: 15px;
	border-radius: 20px;
	background: #e96763;
	box-shadow: 0px 0px 10px 0px #ed5371;
	pointer-events: none;
	transition: all .2s ease-in-out;
	float: right;
}

.view-item-box > .item-panel > .item-info > .item-setting .item-switch > .tumb-off{
	background: #41444b;
	box-shadow: none;
	transform: translateX(-20px);
}

.view-item-box > .item-panel > .item-info > .item-desc{
	width: 100%;
	position: absolute;
	left: 50px;
	bottom: 20px;
}

.view-item-box > .item-panel > .item-info > .item-desc > .type{
	width: 100%;
	font-family: Roboto Bold;
	font-size: 30px;
	color: #a9ec95;
}

.view-item-box > .item-panel > .item-info > .item-desc > .name{
	width: 100%;
	font-family: Roboto Bold;
	font-size: 30px;
	color: #fff;
}

.view-item-box > .item-panel > .item-info > .item-desc > .state{
	width: 100%;
	font-family: Roboto Bold;
	font-size: 18px;
	color: #a7a8a9;
}


/* ----------item nav --------- */

.view-item-box > .item-panel > .item-nav{
	width: calc( 100% - 100px );
	height: 56px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/bg/border_bottom_case.png) bottom center no-repeat;
	background-size: 100% auto;
	background-position: 0px calc( 100% + 1px );
	margin: 0 auto;
}

.view-item-box > .item-panel > .item-nav > .view-var-button{
	height: 100%;
	font-family: Microsoft Jheng Hei Bold;
    font-size: 16px;
	color: #fff;
	transition: all .2s ease-in-out;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	padding-left: 15px;
	padding-right: 15px;
}

.view-item-box > .item-panel > .item-nav > .view-var-button:hover{
	color: #f07c54;
}

.view-item-box > .item-panel > .item-nav > .view-var-button > img{
	margin-right: 5px;
}

.view-item-box > .item-panel > .item-nav > .rank-buttons{
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.view-item-box > .item-panel > .item-nav > .rank-buttons > .button{
	font-family: Microsoft Jheng Hei Bold;
    font-size: 16px;
	color: #fff;
	transition: all .2s ease-in-out;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	padding-left: 15px;
	padding-right: 15px;
	height: 100%;
	border-left: 1px solid transparent;
	border-right: 1px solid transparent;
	border-bottom: 1px solid transparent;
}

.view-item-box > .item-panel > .item-nav > .rank-buttons > .button:hover{
	color: #9fe99b;
}

.view-item-box > .item-panel > .item-nav > .rank-buttons > .active{
	border-left: 1px solid transparent;
	border-right: 1px solid transparent;
	border-bottom: 1px solid transparent;
	-moz-border-image: -moz-linear-gradient(to top, #b5f18d 0%, #2d3037 100%);
	-webkit-border-image: -webkit-linear-gradient(to top, #b5f18d 0%, #2d3037 100%);
	border-image: linear-gradient(to top, #b5f18d 0%, #2d3037 100%);
	border-image-slice: 1;
	background: linear-gradient(to top, rgba(174, 238, 146, 0.1) 50%, rgba(46, 48, 55, 0.1) 100%);
}

/* -------- price panel -------- */

.view-item-box > .price-panel{
	width: 420px;
	height: 318px;
	margin-left: 20px;
}

.view-item-box > .price-panel > .price-line{
	width: 100%;
	height: 63px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	opacity: 0.5;
	position: relative;
}

.view-item-box > .price-panel > .active > .price:before{
	content: attr(data-label);
	position: absolute;
	right: 0px;
	bottom: -10px;
	font-family: Microsoft Jheng Hei Bold;
	font-size: 13px;
	color: #8a8a8a;
}

.view-item-box > .price-panel > .active{
	opacity: 1;
}

.view-item-box > .price-panel > .active > .price{
	font-size: 46px !important;
	position: relative;
}

.view-item-box > .price-panel > .active > .rank{
	font-size: 46px !important;
}

.view-item-box > .price-panel > .price-line > .price{
	font-family: Roboto Bold;
	font-size: 36px;
	color: #fff;
	transition: all .2s ease-in-out;
}

.view-item-box > .price-panel > .price-line > .price > span{
	font-family: Roboto Bold;
	background: linear-gradient(90deg, #9be89e 50%, #c5f682);
    background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.view-item-box > .price-panel > .price-line > .rank{
	font-family: Microsoft Jheng Hei Bold;
	font-size: 36px;
	background: linear-gradient(90deg, #ff9349 50%, #fd6e69);
    background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-left: 10px;
	transition: all .2s ease-in-out;
}

/* ------- item case box ------- */

.item-case-box > .title{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #2c3038;
}

.item-case-box > .title > .item-title{
	height: 56px;
	border: 1px solid #2c3038;
	margin: -1px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	padding-left: 20px;
	padding-right: 20px;
	font-family: Roboto Bold;
    font-size: 16px;
	color: #fff;
	position: relative;
}

.item-case-box > .title > .item-title > span{
	font-family: Microsoft Jheng Hei Bold;
    font-size: 16px;
	color: #606163;
	margin-left: 10px;
}

.item-case-box > .title > .item-title > .border_bottom {
    width: calc( 100% - 40px );
    height: 3px;
    background: linear-gradient(to left, #fe924c, #fd686f);
    position: absolute;
    bottom: -2px;
}

/* ----------------------------- */
/* ------------ faq ------------ */
/* ----------------------------- */

.question-block{
	margin-top: 40px;
	color: #fff;
	font-size: 16px;
	font-family: Microsoft Jheng Hei Bold;
}

.question-block > .title{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	border-bottom: 1px solid #2c3038;
	margin-bottom: 20px;
}

.question-block > .title > .number{
	width: 56px;
	height: 56px;
	border: 1px solid #2c3038;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin: -1px;
	font-family: Roboto Bold;
    font-size: 26px;
	color: #fe8952;
}

.question-block > .title > .text{
	width: calc( 100% - 56px );
	font-family: Microsoft Jheng Hei Bold;
    font-size: 26px;
	color: #fff;
	padding-left: 20px;
	margin-top: -4px;
}

/* ----------------------------- */
/* ---------- footer ----------- */
/* ----------------------------- */

footer{
	width: 100%;
	padding-left: 40px;
	padding-right: 40px;
	padding-top: 40px;
	padding-bottom: 40px;
	margin-top: 60px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	border-top: 1px solid #181b1f;
}

footer > .left{
	/*width: calc( 100% - 572px );*/
	width: 450px;
	font-family: Roboto;
	font-size: 12px;
	color: #7d7d7f;
	text-align: left;
	padding-right: 40px;
}

footer > .left > .title, footer>.middle>.title{
	font-family: Roboto Bold;
	width: 100%;
	font-size: 14px;
	color: #fff;
	text-align: left;
	margin-bottom: 20px;
}

footer > .left > .title > span{
	font-family: Roboto Bold;
	background: linear-gradient(90deg, #fc6076 50%, #ff9746);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

footer > .left > .f-nav{
	width: 100%;
}

footer > .left > .f-nav > ul > li{
	display: inline;
}

footer > .left > .f-nav > ul > li > a{
	font-family: Microsoft Jheng Hei Bold;
	font-size: 14px;
	color: #a4a5a5;
	margin-right: 30px;
}

footer > .left > .f-nav > ul > li > a:hover{
	color: #fff;
}
footer>.middle {
	width: calc(100% - 572px - 450px);
	position: relative;
}
footer>.middle>.middle-box {
	position: absolute;
	bottom: 0;
}
.trust-box{
	display: flex;
	align-items: center;
}
.trust-box>.trust-logo {
	width: 90px;
	height: 90px;
	margin-right: 15px;
}
.trust-box>.trust-logo>img {
	width: 100%;
}
.trust-link>.middle-title {
	/*display: flex;*/
	align-items: center;
	margin-bottom: 5px;
	text-align: left;
}
.trust-link>.middle-title>h1 {
	margin: 0;
	padding: 0;
	font-size: 14px;
	font-family: Roboto Bold;
	background: linear-gradient(90deg, #fc6076 50%, #ff9746);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	padding-bottom: 5px;
}
.trust-link>.middle-title>span {
	font-size: 10px;
	display: block;
	color: #a4a5a5;
	font-weight: 500;
	/*padding-left: 10px;*/
}
footer > .right{
	width: 572px;
}

footer > .right > .title{
	font-family: Microsoft Jheng Hei Bold;
	width: 100%;
	font-size: 14px;
	color: #fff;
	text-align: left;
	margin-bottom: 20px;
}

footer > .right > img{
	width: 100%;
}

/* ----------------------------- */
/* --------- pagination -------- */
/* ----------------------------- */

.pagination{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	border-top: 1px solid #1d1d20;
	margin-top: 25px;
	padding-top: 20px;
}

.pagination > a{
	width: 40px;
	height: 40px;
	border: 1px solid #363840;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin: 5px;
	color: #929394;
	transition: all .2s ease-in-out;
}

.pagination > a:hover{
	color: #fff;
	border: 1px solid #fff;
}

.pagination > .active:hover{
	border-bottom: 1px solid transparent;
	border-left: 1px solid transparent;
	border-right: 1px solid transparent;
    -moz-border-image: -moz-linear-gradient(to top, #b5f18d 0%, #2d3037 100%);
    -webkit-border-image: -webkit-linear-gradient(to top, #b5f18d 0%, #2d3037 100%);
    border-image: linear-gradient(to top, #b5f18d 0%, #2d3037 100%);
    border-image-slice: 1;
    background: linear-gradient(to bottom, rgba(174, 238, 146, 0.1) 50%, rgba(46, 48, 55, 0.1) 100%);
    color: #fff;
}

.pagination > .active{
	border-bottom: 1px solid transparent;
	border-left: 1px solid transparent;
	border-right: 1px solid transparent;
    -moz-border-image: -moz-linear-gradient(to top, #b5f18d 0%, #2d3037 100%);
    -webkit-border-image: -webkit-linear-gradient(to top, #b5f18d 0%, #2d3037 100%);
    border-image: linear-gradient(to top, #b5f18d 0%, #2d3037 100%);
    border-image-slice: 1;
    background: linear-gradient(to bottom, rgba(174, 238, 146, 0.1) 50%, rgba(46, 48, 55, 0.1) 100%);
    color: #fff;
}

/* ----------------------------- */
/* ------ save vallet wnd ------ */
/* ----------------------------- */

.save-vallet-wnd{
	width: 600px;
	height: 200px;
	background: #17191d;
	border: 1px solid #363840;
	left: calc( ( 100% - 600px ) / 2 );
	top: calc( ( 100% - 200px ) / 2 );
	padding: 30px;
	padding-top: 70px;
}

.save-vallet-wnd > .title{
	width: 250px;
	height: 60px;
	background: #17191d;
	border: 1px solid #363840;
	position: absolute;
	left: calc( 50% - 125px );
	top: -30px;
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    font-family: Microsoft Jheng Hei Bold;
    font-size: 16px;
    color: #fff;
}

.save-vallet-wnd > .title > .border-bottom{
	width: 70%;
	height: 3px;
	background: linear-gradient(to left, #fe924c, #fd686f);
	position: absolute;
	bottom: -2px;
}

.save-vallet-wnd > form{
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	position: relative;
	margin-top: 20px;
}

.save-vallet-wnd > form > input{
	width: 100%;
	height: 46px;
	background: none;
	border: none;
	border-bottom: 1px solid #33363c;
	font-family: Roboto;
	font-size: 14px;
	color: #cbf87f;
	padding: 0px;
	padding-right: 40px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	position: relative;
	z-index: 1;
}

.save-vallet-wnd > form > button{
	position: absolute;
	top: 0px;
	right: 0px;
	width: 20px;
	height: 40px;
	padding: 0;
	margin: 0;
	border: none;
	background: none;
	cursor: pointer;
	z-index: 2;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	opacity: 0.7;
	transition: all .2s ease-in-out;
}

.save-vallet-wnd > form > button:hover{
	opacity: 1;
}

/* ----------------------------- */
/* --------- money wnd --------- */
/* ----------------------------- */

.money-wnd{
	width: 450px;
	height: 680px;
	left: calc( ( 100% - 450px ) / 2 );
	top: calc( ( 100% - 600px ) / 2 );
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/bg/green_wnd_bg.png) #17191d top center no-repeat;
	background-size: 100% auto;
	border: 1px solid #3e4f4a;
	padding: 35px;
}

@media (max-height: 600px){
	.money-wnd{
		height: 100vh;
		top: 0px;
		overflow-y: auto;
	}
}

.money-wnd::-webkit-scrollbar{
    width: 4px;
	height: 2px;
	background: none;
}

.money-wnd::-webkit-scrollbar-thumb{
    background-color: #46484b;
}

.money-wnd::-webkit-scrollbar-thumb:hover{
    background-color: #63676d;
}

.money-wnd > .title{
	width: 100%;
	font-family: Microsoft Jheng Hei Bold;
    font-size: 30px;
    color: #fff;
    text-align: center;
}

.money-wnd > .input-block{
	width: 100%;
	margin-top: 50px;
}

.money-wnd > .input-block > .title{
	font-family: Microsoft Jheng Hei Bold;
    font-size: 14px;
    color: #606262;
    text-align: center;
}

.money-wnd > .input-block > .input{
	width: 100%;
	position: relative;
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.money-wnd > .input-block > .input > .icon{
	height: 100%;
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: calc( ( 100% - 230px ) / 2 );
    top: 0px;
    font-family: Roboto Bold;
    font-size: 40px;
    background: linear-gradient(90deg, #99df96 50%, #cdfa7e);
    background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;

}

.money-wnd > .input-block > .input > input{
	display: block;
	width: 230px;
	height: 90px;
	border: none;
	border-bottom: 1px solid #3e4f4a;
	font-family: Roboto Bold;
    font-size: 40px;
    color: #fff;
    text-align: center;
    background: none;
    margin: 0 auto;
}

.money-wnd > .input-block > .input > .bonus{
	position: absolute;
	bottom: -10px;
	left: -63px;
}

.money-wnd > .input-block > .input > .bonus > .count{
	width: 100%;
	text-align: right;
	font-family: Roboto Bold;
    font-size: 20px;
	background: linear-gradient(90deg, #99df96 50%, #cdfa7e);
    background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: 10px;
}

.money-wnd > .input-block > .input > .bonus > .flag{
	width: 126px;
	height: 44px;
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/bg/flag_bg.png);
	font-family: Microsoft Jheng Hei Bold;
    font-size: 14px;
    color: #000;
    text-align: center;
    padding-top: 6px;
}

.money-wnd > .desc{
	width: 100%;
	font-family: Microsoft Jheng Hei Bold;
    font-size: 14px;
    color: #606262;
    text-align: center;
    margin-top: 20px;
}

.money-wnd > .button{
	display: block;
	width: 100%;
	height: 60px;
	border: 1px solid transparent;
    -moz-border-image: -moz-linear-gradient(to left, #d3fc7a 0%, #96e6a1 100%);
    -webkit-border-image: -webkit-linear-gradient(to left, #d3fc7a 0%, #96e6a1 100%);
    border-image: linear-gradient(to left, #d3fc7a 0%, #96e6a1 100%);
    border-image-slice: 1;
    background: linear-gradient(to left, #36402e 0%, #2e3c32 100%);
    margin-top: 25px;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
}

.money-wnd > .button:hover:after{
	opacity: 1;
}

.money-wnd > .button > span{
	font-family: Microsoft Jheng Hei Bold;
    font-size: 18px;
    color: #fff;
    position: relative;
    z-index: 2;
}

.money-wnd > .button:after{
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	background: linear-gradient(to left, #d3fc7a 0%, #96e6a1 100%);
	z-index: 1;
	transition: all .2s ease-in-out;
	opacity: 0;
}

.money-wnd > .bonus-code-block{
	width: 100%;
	height: 60px;
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top: 40px;
    z-index: 1;
    margin-bottom: 35px;
}

.money-wnd > .bonus-code-block > input{
	width: 100%;
	height: 100%;
	border: none;
	border-bottom: 1px solid transparent;
	-moz-border-image: -moz-linear-gradient(to left, #d3fc7a 0%, #96e6a1 100%);
    -webkit-border-image: -webkit-linear-gradient(to left, #d3fc7a 0%, #96e6a1 100%);
    border-image: linear-gradient(to left, #d3fc7a 0%, #96e6a1 100%);
    border-image-slice: 1;
	font-family: Roboto Bold;
    font-size: 20px;
    color: #fff;
    background: none;
    position: relative;
    z-index: 1;
    padding-right: 90px;
}

.money-wnd > .bonus-code-block > .button{
	display: block;
	width: 90px;
	height: 100%;
	border: 1px solid transparent;
    -moz-border-image: -moz-linear-gradient(to left, #d3fc7a 0%, #96e6a1 100%);
    -webkit-border-image: -webkit-linear-gradient(to left, #d3fc7a 0%, #96e6a1 100%);
    border-image: linear-gradient(to left, #d3fc7a 0%, #96e6a1 100%);
    border-image-slice: 1;
    margin-top: 25px;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 2;
    right: 0px;
    bottom: 0px;
}

.money-wnd > .bonus-code-block > .button:hover:after{
	opacity: 1;
}

.money-wnd > .bonus-code-block > .button > span{
	font-family: Microsoft Jheng Hei Bold;
    font-size: 18px;
    color: #fff;
    position: relative;
    z-index: 2;
}

.money-wnd > .bonus-code-block > .button:after{
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	background: linear-gradient(to left, #d3fc7a 0%, #96e6a1 100%);
	z-index: 1;
	transition: all .2s ease-in-out;
	opacity: 0;
}

.withdraw-wnd{
	height: 730px !important;
	top: calc( ( 100vh - 730px ) / 2 ) !important;
}

@media (max-height: 750px){
	.withdraw-wnd{
		height: 100vh !important;
		top: 0px !important;
		overflow-y: auto !important;
	}
}

.money-wnd > .purse{
	width: 100%;
}

.money-wnd > .purse > input{
	width: 100%;
	height: 50px;
	border: none;
	border-bottom: 1px solid transparent;
	-moz-border-image: -moz-linear-gradient(to left, #d3fc7a 0%, #96e6a1 100%);
    -webkit-border-image: -webkit-linear-gradient(to left, #d3fc7a 0%, #96e6a1 100%);
    border-image: linear-gradient(to left, #d3fc7a 0%, #96e6a1 100%);
    border-image-slice: 1;
	font-family: Roboto Bold;
    font-size: 14px;
    color: #fff;
    background: none;
    position: relative;
    z-index: 1;
    margin-top: 20px;
    margin-bottom: 10px;
}

.money-wnd > .info_1{
	width: 100%;
	font-family: Roboto;
    font-size: 14px;
    color: #696c6c;
    margin-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #3e4f4a;
}

.money-wnd > .info_2{
	width: 100%;
	font-family: Roboto;
    font-size: 14px;
    color: #fff;
    margin-top: 20px;
    padding-bottom: 30px;
}

.select-pay-method{
	width: 100%;
	height: 60px;
	border: 1px solid transparent;
    -moz-border-image: -moz-linear-gradient(to left, #d3fc7a 0%, #96e6a1 100%);
    -webkit-border-image: -webkit-linear-gradient(to left, #d3fc7a 0%, #96e6a1 100%);
    border-image: linear-gradient(to left, #d3fc7a 0%, #96e6a1 100%);
    border-image-slice: 1;
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.select-pay-method > .title{
	width: 110px;
	height: 100%;
	font-family: Microsoft Jheng Hei Bold;
    font-size: 16px;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #3e4f4a;
}

.select-pay-method > .select-block{
	width: calc( 100% - 110px );
	height: 100%;
	position: relative;
}

.select-pay-method > .select-block > .view-method{
	width: 100%;
	height: 100%;
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
    cursor: pointer;
    position: relative;
}

.select-pay-method > .select-block > .view-method:hover .arrow{
	opacity: 1;
}

.select-pay-method > .select-block > .view-method > .arrow{
	width: 14px;
	height: 8px;
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/icon/arrow_bottom_icon.png);
	opacity: 0.5;
	transition: all .2s ease-in-out;
}

.select-pay-method > .select-block > .methods{
	width: calc( 100% + 2px );
	top: calc( 100% + 1px );
	left: -1px;
	background: #17191d;
	border-left: 1px solid #3e4f4a;
	border-right: 1px solid #3e4f4a;
	position: absolute;
	display: none;
	z-index: 5;
}

.select-pay-method > .select-block > .methods > .method{
	width: 100%;
	height: 60px;
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #3e4f4a;
    padding-left: 20px;
    padding-right: 20px;
    font-family: Microsoft Jheng Hei Bold;
    font-size: 16px;
    color: #fff;
    transition: all .2s ease-in-out;
    cursor: pointer;
}

.select-pay-method > .select-block > .methods > .method:hover{
	background: #23272b;
}

.select-pay-method > .select-block > .methods > .method:hover .hover > .hover-tumb{
	opacity: 1;
}

.select-pay-method > .select-block > .methods > .method > img{
	height: 20px;
}

.select-pay-method > .select-block > .methods > .method > .hover{
	width: 10px;
	height: 10px;
	border: 1px solid transparent;
    -moz-border-image: -moz-linear-gradient(to top, #b5f18d 0%, #97e6a0 100%);
    -webkit-border-image: -webkit-linear-gradient(to top, #b5f18d 0%, #97e6a0 100%);
    border-image: linear-gradient(to top, #b5f18d 0%, #97e6a0 100%);
    border-image-slice: 1;
    margin-left: 15px;
    display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.select-pay-method > .select-block > .methods > .method > .hover > .hover-tumb{
	width: 4px;
	height: 4px;
	background: #bef587;
	opacity: 0;
	transition: all .2s ease-in-out;
}


/* ----------------------------- */
/* ---- balance history wnd ---- */
/* ----------------------------- */

.form-wnd{
	width: 450px;
	top: calc( ( 100% - 650px ) / 2 );
	left: calc( ( 100% - 450px ) / 2 );
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/bg/red_wnd_bg.png) #17191d bottom center no-repeat;
	background-size: 100% auto;
	border: 1px solid #363840;
}

@media (max-height: 650px){
	.form-wnd{
		height: 100vh !important;
		top: 0px !important;
		overflow-y: auto !important;
	}
}

.form-wnd::-webkit-scrollbar{
    width: 4px;
	height: 2px;
	background: none;
}

.form-wnd::-webkit-scrollbar-thumb{
    background-color: #46484b;
}

.form-wnd::-webkit-scrollbar-thumb:hover{
    background-color: #63676d;
}

.authorize-wnd{
	top: calc( ( 100vh - 650px ) / 2 ) !important;
}

.popup > .switch{
	width: 100%;
	height: 60px;
	border-bottom: 1px solid #363840;
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.popup > .switch > .button:nth-child(1){
	border-right: 1px solid #363840;
}

.popup > .switch > .button{
	width: 50%;
	height: 100%;
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-family: Microsoft Jheng Hei Bold;
    font-size: 16px;
    color: #78797a;
    transition: all .2s ease-in-out;
    position: relative;
}

.popup > .switch > .button:hover{
	color: #f69145;
}

.popup > .switch > .button > .border_bottom {
    width: 90%;
    height: 3px;
    background: linear-gradient(to left, #fe924c, #fd686f);
    position: absolute;
    bottom: -2px;
    opacity: 0;
}

.popup > .switch > .active{
	color: #fff;
}

.popup > .switch > .active > .border_bottom{
	opacity: 1 !important;
}

.popup > .switch-content{
	width: 100%;
	padding: 35px;
	position: relative;
	height: initial;
	display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
}

.popup > .switch-content > .switch-block{
	width: 100%;
	height: initial;
	position: relative;
	color: #fff;
	display: none;
}

.popup > .switch-content > .active{
	display: block;
}

.wnd-form{
	width: 100%;
	display: block;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.wnd-form > .input{
	width: 100%;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 25px;
}

.wnd-form > .input > input{
	width: 100%;
	height: 50px;
	border: none;
	border-bottom: 1px solid #363840;
	font-family: Roboto;
    font-size: 16px;
    color: #fff;
    background: none;
    position: relative;
    z-index: 1;
    padding-left: 40px;
}

.wnd-form > .input > img{
	position: absolute;
	left: 0px;
	z-index: 2;
}

.wnd-form > label{
	margin-bottom: 20px;
}

.wnd-form > label > .label{
	color: #9d9d9d;
}

.wnd-form > label a:hover{
	color: #fd7a5e;
}

.wnd-form > .form-button{
	display: block;
	width: 100%;
	height: 60px;
	border: 1px solid transparent;
    -moz-border-image: -moz-linear-gradient(to left, #ff9944 0%, #fc6076 100%);
    -webkit-border-image: -webkit-linear-gradient(to left, #ff9944 0%, #fc6076 100%);
    border-image: linear-gradient(to left, #ff9944 0%, #fc6076 100%);
    border-image-slice: 1;
    background: linear-gradient(to left, #3e2d25 0%, #492b2e 100%);
    margin-top: 5px;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
}

.wnd-form > .form-button:hover:after{
	opacity: 1;
}

.wnd-form > .form-button > span{
	font-family: Microsoft Jheng Hei Bold;
    font-size: 18px;
    color: #fff;
    position: relative;
    z-index: 2;
}

.wnd-form > .form-button:after{
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	background: linear-gradient(to left, #ff9944 0%, #fc6076 100%);
	z-index: 1;
	transition: all .2s ease-in-out;
	opacity: 0;
}

.wnd-form > .center-link{
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	color: #9d9d9d;
}

.wnd-form > .center-link:hover{
	color: #fd7a5e;
}

/* ----------------------------- */
/* --------- forgot wnd -------- */
/* ----------------------------- */

.forgot-wnd, .confirm-wnd, .repass-wnd,.join-roll-pwd, .join-roll-yboo, .form-wnd join-roll-common, .join-roll-yboo-join, .join-roll-pay, .join-roll-openBox, .join-roll-extensioncode, .pay-ranking, .loss-ranking, .get-ranking{
	padding: 35px;
}

.repass-wnd{
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/bg/green_bottom_wnd_bg.png) #17191d bottom center no-repeat !important;
	background-size: 100% auto !important;
}

.form-wnd > .title{
	width: 100%;
	font-family: Microsoft Jheng Hei Bold;
    font-size: 30px;
    color: #fff;
    text-align: center;
}

.form-wnd > .desc{
	width: 100%;
	font-family: Microsoft Jheng Hei Bold;
    font-size: 14px;
    color: #747576;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 30px;
}

.wnd-form > .form-green-button{
	display: block;
	width: 100%;
	height: 60px;
	border: 1px solid transparent;
    -moz-border-image: -moz-linear-gradient(to left, #d4fc79 0%, #96e6a1 100%);
    -webkit-border-image: -webkit-linear-gradient(to left, #d4fc79 0%, #96e6a1 100%);
    border-image: linear-gradient(to left, #d4fc79 0%, #96e6a1 100%);
    border-image-slice: 1;
    background: linear-gradient(to left, #3f4a33 0%, #2e3d33 100%);
    margin-top: 5px;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
}

.wnd-form > .form-green-button:hover:after{
	opacity: 1;
}

.wnd-form > .form-green-button > span{
	font-family: Microsoft Jheng Hei Bold;
    font-size: 18px;
    color: #fff;
    position: relative;
    z-index: 2;
}

.wnd-form > .form-green-button:after{
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	background: linear-gradient(to left, #d4fc79 0%, #96e6a1 100%);
	z-index: 1;
	transition: all .2s ease-in-out;
	opacity: 0;
}

/* ----------------------------- */
/* ---- balance history wnd ---- */
/* ----------------------------- */

.balance-history-wnd{
	width: 1000px;
	height: calc( 100% - 200px );
	top: 100px;
	left: calc( ( 100% - 1000px ) / 2 );
	background: #17191d;
	border: 1px solid #363840;
	padding-top: 60px;
	padding-left: 60px;
	padding-right: 60px;
	padding-bottom: 60px;
}

.balance-history-wnd > .title{
	width: 250px;
	height: 60px;
	background: #17191d;
	border: 1px solid #363840;
	position: absolute;
	left: calc( 50% - 125px );
	top: -30px;
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    font-family: Microsoft Jheng Hei Bold;
    font-size: 16px;
    color: #fff;
}

.balance-history-wnd > .title > .border-bottom{
	width: 70%;
	height: 3px;
	background: linear-gradient(to left, #fe924c, #fd686f);
	position: absolute;
	bottom: -2px;
}

.balance-history-title{
	width: 100%;
	font-family: Microsoft Jheng Hei Bold;
    font-size: 28px;
    color: #fff;
}

.balance-history-title > span{
	display: block;
	font-family: Microsoft Jheng Hei Bold;
    font-size: 14px;
    color: #fff;
}

.balance-history-table{
	width: 100%;
	display: block;
	color: #fff;
	margin-top: 20px;
}

.balance-history-table > .row{
	width: 100%;
	display: block;
	border-top: 1px solid #23252b;
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.balance-history-table > .row:nth-child(1){
	color: #fff;
}

.balance-history-table > :last-child{
	border-bottom: 1px solid #23252b;
}

.balance-history-table > .row > div{
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 20px;
	padding-right: 20px;
	position: relative;
	color: #7f8493;
}

.balance-history-table > .row > div:before{
	content: attr(data-label);
	display: none;
	width: 100%;
	border-bottom: 1px solid #1e2025;
	padding-bottom: 10px;
	margin-bottom: 10px;
	color: #fff;
}

.balance-history-table > .row > div:nth-child(1){
	text-align: center;
	width: 25%;
	border-right: 1px solid #23252b;
	border-left: 1px solid #23252b;
}

.balance-history-table > .row > div:nth-child(2){
	text-align: center;
	width: 15%;
	border-right: 1px solid #23252b;
}

.balance-history-table > .row > div:nth-child(3){
	text-align: center;
	width: 15%;
	border-right: 1px solid #23252b;
}

.balance-history-table > .row > div:nth-child(4){
	text-align: center;
	width: 45%;
	border-right: 1px solid #23252b;
}

/* ----------------------------- */
/* ------------ chat ----------- */
/* ----------------------------- */

.open-chat-button{
	width: 79px;
	height: 79px;
	border-radius: 79px;
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/chat/chat_open_button.png);
	position: fixed;
	bottom: 30px;
	right: 30px;
	z-index: 7777;
	cursor: pointer;
	transition: all .5s ease-in-out;
}

.open-chat-button:hover{
	transform: rotate(360deg);
	filter: brightness(2);
}

.support-chat .close-chat-button{
	width: 60px;
	height: 60px;
	border-radius: 60px;
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/chat/chat_close_button.png) #191c20 center center no-repeat;
	position: absolute;
	top: -30px;
	right: 40px;
	z-index: 10;
	cursor: pointer;
	transition: all .2s ease-in-out;
	border: 1px solid #3c3e46;
}

.support-chat .close-chat-button:hover{
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/chat/chat_close_button.png) #21252a center center no-repeat;
}

.support-chat{
	width: 400px;
	height: 500px;
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/bg/chat_bg.jpg);
	background-size: 100% 100%;
	position: fixed;
	bottom: -0px;
	right: 0px;
	z-index: 7776;
	transition: all .5s ease-in-out;
	border-left: 1px solid #3c3e46;
	border-top: 1px solid #3c3e46;
	transition: all .3s ease-in-out;
}

.support-chat-hide{
	bottom: -430px;
	opacity: 0;
	pointer-events: none;
}

.support-chat .operator-info{
	width: 100%;
	display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    padding-left: 30px;
    border-bottom: 1px solid #3c3e46;
    height: 100px;
}

.support-chat .operator-info > .info{
	font-family: Microsoft Jheng Hei Bold;
    font-size: 18px;
    color: #fff;
    padding-left: 15px;
}

.support-chat .operator-info > .info > span{
	display: block;
	font-family: Microsoft Jheng Hei Bold;
    font-size: 14px;
    background: linear-gradient(45deg, #99df96 50%, #cdfa7e);
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.support-chat > .dialog-box{
	width: 100%;
	height: calc( 100% - 100px - 80px - 30px );
	overflow: auto;
	overflow: -moz-scrollbars-none;
}

.support-chat > .dialog-box::-webkit-scrollbar{
    width: 4px;
	height: 2px;
	background: none;
}

.support-chat > .dialog-box::-webkit-scrollbar-thumb{
    background-color: #46484b;
}

.support-chat > .dialog-box::-webkit-scrollbar-thumb:hover{
    background-color: #63676d;
}

.support-chat > .dialog-box > .messages-line{
	width: 100%;
	height: initial;
	padding: 30px;
}

.messages-line > .left-line{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
}

.messages-line > .left-line > .message{
	padding: 10px;
	color: #fff;
	font-size: 12px;
	position: relative;
	background: linear-gradient(to left, #425b47 50%, #54643f 100%);
	margin-top: 5px;
	max-width: 70%;
}

.messages-line > .left-line > .message:before {
	content: "";
	width: 0; height: 0;
	position: absolute;
	right: 100%;
	top: calc(50% - 6px);
	border-top: 6px solid transparent;
	border-right: 6px solid #54643f;
	border-bottom: 6px solid transparent;
}

.messages-line > .left-line > .time{
	width: 100%;
	font-size: 12px;
	color: #5c5e5e;
	padding-bottom: 10px;
	padding-top: 10px;
	position: relative;
}

.messages-line > .right-line{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-start;
}

.messages-line > .right-line > .message{
	padding: 10px;
	color: #fff;
	font-size: 12px;
	position: relative;
	background: linear-gradient(to left, #23262b 50%, #30343b 100%);
	margin-top: 5px;
	max-width: 70%;
}

.messages-line > .right-line > .message:before {
	content: "";
	width: 0; height: 0;
	position: absolute;
	left: 100%;
	top: calc(50% - 6px);
	border-top: 6px solid transparent;
	border-left: 6px solid #23262b;
	border-bottom: 6px solid transparent;
}

.messages-line > .right-line > .time{
	width: 100%;
	font-size: 12px;
	color: #5c5e5e;
	padding-bottom: 10px;
	padding-top: 10px;
	text-align: right;
}

.support-chat > .chat-announce{
	width: 100%;
	height: 30px;
	padding-left: 30px;
	font-size: 12px;
	color: #797a7b;
	display: flex;
	flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}

.support-chat > .chat-announce > .icon{
	margin-right: 10px;
}

.support-chat > .input_form{
	border-top: 1px solid #3c3e46;
	width: 100%;
	height: 80px;
}

.support-chat > .input_form > form{
	width: 100%;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
}

.support-chat > .input_form > form > textarea{
	width: calc( 100% - 80px );
	min-height: 40px;
	padding: 15px 0px 15px 30px; 
    border: 0px;
    background: none;
    color: #fff;
    font-size: 14px;
    -webkit-appearance: none;
    outline: none;
    resize: none;
    font-family: Roboto;
    margin-top: 17px;
}

.support-chat > .input_form > form > button{
	width: 80px;
	height: 80px;
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/chat/send_icon.png) center center no-repeat;
	border: none;
	cursor: pointer;
}
.user-ranking{
	position: relative;
	width: calc( 100% - 80px );
	margin: 0 auto;
	margin-top: 30px;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-end;
	background: url(https://pigcase.oss-cn-shenzhen.aliyuncs.com/img/rank/BG.png)no-repeat;
}
.ranking{
	display: inline-block;
	cursor: pointer;
}
.ranking img{
	width: 200px;
	margin-left: 210px;
}
.user-ranking .week img{
	width: 140px;
	position: absolute;
	left: -230px;
	top: -44px;
}
.time_zhou{
    font-size: 14px;
    color: white;
    position: absolute;
    top: 35px;
}

.time_zhou span {
    padding:0px 5px;
    font-family: Roboto Bold;
    background: linear-gradient(to top, #99df96 30%, #cdfa7e 50%);
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.support-chat > .input_form > form > button:hover{
	filter: brightness(2);
}

textarea::-webkit-scrollbar{
    width: 4px;
	height: 2px;
	background: none;
}

textarea::-webkit-scrollbar-thumb{
    background-color: #46484b;
}

textarea::-webkit-scrollbar-thumb:hover{
    background-color: #63676d;
}
/**link**/
.out-link>li{
	float: left;
	position: relative;
	margin-right: 10px;
	height: 50px;
	min-width: 50px;
	cursor: pointer;
}
.out-links>li {
	float: left;
	position: relative;
	margin-right: 10px;
	height: 30px;
	min-width: 100px;
	cursor: pointer;
}
.out-link>li>.link-content>.no_hover{
	z-index: 1;
	/*width: 100%;*/
	width: 50px;
	position: absolute;
	left: 0;
}
.out-links>li>.link-content>.no_hover {
	z-index: 1;
	/*width: 100%;*/
	width: 100px;
	position: absolute;
	left: 0;
}
.out-link>li>.link-content>.hover {
	z-index: 2;
	opacity: 0;
	position: absolute;
	/*width: 100%;*/
	width: 50px;
	left: 0;
}
.out-links>li>.link-content>.hover {
	z-index: 2;
	opacity: 0;
	position: absolute;
	/*width: 100%;*/
	width: 100px;
	left: 0;
}
.out-link>li>.link-content>.pg-title{
	background: linear-gradient(90deg, #fc6076 50%, #ff9746);
	background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 50px;
	text-align: right;
	font-size: 12px;
}
.out-link>li>.link-content>.hover:hover, .out-links>li>.link-content>.hover:hover {
	opacity: 1;
}
@media (max-width: 500px) {
	.out-link, .out-links {
		margin-left: 20px;
	}
}
.hide-link {
	opacity: 0;
}
.hide-link>li {
	padding: 0 !important;
	margin: 0 !important;
}
.hide-link>li> a{
	pointer-events:none;
	cursor: default;
}
.post-tag>h3>a, .rec-tag>h3>a {
	font-size: 14px;
	color: #fe8952;
	float: left;
}