body,html{font:400 12px/20px NSimSun,Arial,sans-serif;color:#b3a987;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
*{margin:0;padding:0;image-rendering:pixelated}
a{text-decoration:none}
.cl{clear:left}
.hide{width:0;height:0;overflow:hidden}
body{background:#0e0e0e}
.wrap{margin:20px auto;width:400px;background-color:#202020;border:1px solid #000000A0}
.x2{transform:scale(2);transform-origin:0 0}
.title{margin:-2px;padding:2px;background:linear-gradient(0,#111b27,#0b326b);position:relative;line-height:20px;height:20px}
.title::after{content:'';position:absolute;border:1px transparent solid;border-image:linear-gradient(0,#1e292d,#517eb9) 1 10;display:block;width:100%;height:100%;margin:0 -2px;top:0;box-sizing:border-box}
.title::before{content:'';position:absolute;border:1px solid #000000A0;display:block;width:100%;height:100%;margin:-1px -3px;top:0}
.btn{padding:2px;background:linear-gradient(0,#071f3b,#0f3a6d);position:relative;line-height:20px;height:20px;margin:0 0 10px 10px;text-align:center;color:#b99460;border:2px solid #000000A0;float:left;cursor:pointer}
.btn:hover{background:linear-gradient(0,#0b325e,#185dae)}
.btn:active{margin:1px 0 10px 10px;padding:2px 2px 1px}
.btn.disabled{-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%)}
.btn::after{content:'';position:absolute;border:1px transparent solid;border-image:linear-gradient(0,#082343,#124683) 1 10;display:block;width:100%;height:100%;margin:0 -2px;top:0;box-sizing:border-box}
.btn::before{content:'';position:absolute;border:1px transparent solid;border-image:linear-gradient(0,#7e633a,#aa864d) 1 10;display:block;width:100%;height:100%;margin:-1px -3px;top:0}
.btn span{padding:0 10px}
.titlename{text-align:center;color:#e3d49a;text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0}
#game,#inventory{margin:10px;width:380px;height:360px;position:relative;overflow:hidden;display:none}
.active{display:block!important}
.map{position:absolute;width:100%;background-repeat:repeat-x;height:100%}
.hell{background-image:url(../img/hell.png);width:5000px}
.charac{background-image:url(../img/charac.gif);width:33px;height:39px;left:50%;margin-left:-16px;bottom:100px;position:absolute;transform:scale(2)}
.run{background-image:url(../img/run.gif)}
.walk{background-image:url(../img/walk.gif);width:39px;height:40px;margin-left:-20px}
.i_ui,.inventory_equipment .equipment,.inventory_equipment .equipment::before,.item_info .price i,.lattice:hover::before,.setinfo div,.inventory_btn div:hover::before,.inventory_btn .active::before{background:url(../img/inventory_ui.png?20200707)}
.inventory_equipment{background:url(../img/inventory_bg.png);width:380px;height:200px;background-size:100% auto;background-repeat:no-repeat;position:relative}
.inventory_equipment .equipment{width:32px;height:32px;position:absolute}
.inventory_equipment .equipment.contrast::before,.inventory_equipment .equipment:hover::before{content:'';width:28px;height:28px;position:absolute;background-position:-128px -62px;margin:2px;z-index:50;pointer-events:none}
.equipment.item_1{left:20px;top:40px;background-position:0 0}
.equipment.item_2{left:54px;top:40px;background-position:-32px 0}
.equipment.item_3{left:20px;top:74px;background-position:0 -32px}
.equipment.item_4{left:54px;top:74px;background-position:-32px -32px}
.equipment.item_5{left:20px;top:108px;background-position:0 -64px}
.equipment.item_6{right:54px;top:40px;background-position:-64px -32px}
.equipment.item_7{right:20px;top:40px;background-position:-96px -32px}
.equipment.item_8{right:20px;top:74px;background-position:-96px -64px}
.equipment.item_9{right:54px;top:74px;background-position:-32px -64px}
.equipment.item_10{right:20px;top:108px;background-position:-64px -64px}
.equipment.item_11{right:54px;top:108px;background-position:-128px 0}
.inventory_item{width:380px;height:160px;padding:0 10px;background:#000a}
.inventory_item_tool{height:30px;width:100%}
.lattice{width:26px;height:26px;background:#000a;border:1px solid #212121;float:left;margin:1px}
.lattice .item{margin:-1px}
.lattice:hover::before{content:'';width:28px;height:28px;position:absolute;background-position:-128px -62px;margin:-1px;z-index:50;pointer-events:none}
.inventory_lock{width:356px;height:26px;background:#000;border:1px solid #212121;float:left;margin:1px;cursor:pointer}
.inventory_lock:hover{border:1px solid #4e4e4e}
.inventory_lock:active{margin:2px 1px 0 1px}
.lock_icon{width:14px;height:18px;background-position:-178px -28px;margin:4px auto}
.inventory_btn{position:absolute;top:160px;left:20px}
.inventory_btn div{width:18px;height:20px;background-position:-160px -48px}
.inventory_btn div:hover::before,.inventory_btn .active::before{content:'';width:28px;height:30px;position:absolute;background-position:-128px -32px;margin: -5px}
.inventory_btn .disabled{width:22px;height:21px;background-position:-156px -69px!important;    margin: 1px 0 0 -2px;}
.inventory_btn .disabled:hover::before{display:none}
.inventory_btn .setdisplay{background-position:-160px -28px;position: absolute;left: 320px;top:0}
.inventory_charac .charac{margin-bottom:-50px}
.inventory_equipment .setinfo{position:relative;display:none}
.inventory_equipment .setinfo.active{display:block}
.inventory_equipment .setinfo div{width:26px;height:14px;position:absolute;background-position:-160px 0;z-index:51;pointer-events:none;display:none}
.inventory_equipment .setinfo .set_1{left:23px;top:54px}
.inventory_equipment .setinfo .set_2{left:57px;top:54px}
.inventory_equipment .setinfo .set_3{left:23px;top:88px}
.inventory_equipment .setinfo .set_4{left:57px;top:88px}
.inventory_equipment .setinfo .set_5{left:23px;top:122px}
.inventory_equipment .setinfo .set_6{right:57px;top:54px}
.inventory_equipment .setinfo .set_7{right:23px;top:54px}
.inventory_equipment .setinfo .set_8{right:23px;top:88px}
.inventory_equipment .setinfo .set_9{right:57px;top:88px}
.inventory_equipment .setinfo .set_10{right:23px;top:122px}
.inventory_equipment .setinfo .set_11{right:57px;top:122px}
.inventory_equipment .setinfo .set_type_1{absolute;background-position:-160px 0;display:block}
.inventory_equipment .setinfo .set_type_2{absolute;background-position:-186px 0;display:block}
.inventory_equipment .setinfo .set_type_3{absolute;background-position:-212px 0;display:block}
.inventory_equipment .setinfo .set_type_4{absolute;background-position:-160px -14px;display:block}
.inventory_equipment .setinfo .set_type_5{absolute;background-position:-186px -14px;display:block}

.item{width:28px;height:28px;position:absolute;margin:2px;z-index:10}
.iteminfo{left:832px;top:127px;position:fixed;width:190px;background:#000e;border:1px solid #3b3b3b;border-radius:3px;z-index:1000;pointer-events:none}
.iteminfo::before{content:'';position:absolute;border:2px solid #000a;display:block;width:100%;height:100%;margin:-2px -2px;top:0;border-radius:3px}
.item_info .icon{padding:5px;width:28px;height:28px;float:left}
.item_info .text{padding:5px;min-height:28px}
.item_info div{line-height:14px}
.item_info .text .add{color:red}
.item_info.normal .rare,.item_info.normal .text .name{color:#fff}
.item_info.uncommon .rare,.item_info.uncommon .text .name{color:#68d5ed}
.item_info.rare .rare,.item_info.rare .text .name{color:#b36bff}
.item_info.unique .rare,.item_info.unique .text .name{color:#f0f}
.item_info.epic .rare,.item_info.epic .text .name{color:#ffb400}
.item_info.chronicle .rare,.item_info.chronicle .text .name{color:#f66}
.item_info.legend .rare,.item_info.legend .text .name{color:#ff7800}
.item_info.myth .rare,.item_info.myth .text .name{background-image:linear-gradient(0,#cc65ea,#f8c935);-webkit-background-clip:text;color:transparent}
.item::before,.item_info .icon::before{content:'';width:28px;height:28px;position:absolute;z-index:49;pointer-events:none;background:url(../img/iconmark.png)}
.item.normal::before,.item_info.normal .icon::before{background-position:0 0}
.item.uncommon::before,.item_info.uncommon .icon::before{background-position:-28px 0}
.item.rare::before,.item_info.rare .icon::before{background-position:-56px 0}
.item.unique::before,.item_info.unique .icon::before{background-position:-84px 0}
.item.epic::before,.item_info.epic .icon::before{background-position:0 -28px}
.item.chronicle::before,.item_info.chronicle .icon::before{background-position:-56px -28px}
.item.legend::before,.item_info.legend .icon::before{background-position:-56px -28px}
.item.myth::before,.item_info.myth .icon::before{background-position:-84px -28px}
.item.myth::after,.item_info.myth .icon::after{content:'';width:28px;height:28px;position:absolute;z-index:49;pointer-events:none;background:url(../img/mythology2.png);margin:1px -28px;animation:mythology 1.2s steps(1,start) infinite;-webkit-animation:mythology 1.2s steps(1,start) infinite;animation-fill-mode:backwards;-webkit-animation-fill-mode:backwards;mix-blend-mode:screen}
.item.myth::after{margin:1px 0}
@keyframes mythology{0%{background-position:0 0}
8.25%{background-position:0 -27px}
16.5%{background-position:0 -54px}
24.75%{background-position:0 -81px}
33%{background-position:0 -108px}
41.25%{background-position:0 -135px}
49.5%{background-position:0 -162px}
57.75%{background-position:0 -189px}
66%{background-position:0 -216px}
74.25%{background-position:0 -243px}
82.5%{background-position:0 -270px}
90.75%{background-position:0 -297px}
100%{background-position:0 0}
}
@-webkit-keyframes mythology{0%{background-position:0 0}
8.25%{background-position:0 -27px}
16.5%{background-position:0 -54px}
24.75%{background-position:0 -81px}
33%{background-position:0 -108px}
41.25%{background-position:0 -135px}
49.5%{background-position:0 -162px}
57.75%{background-position:0 -189px}
66%{background-position:0 -216px}
74.25%{background-position:0 -243px}
82.5%{background-position:0 -270px}
90.75%{background-position:0 -297px}
100%{background-position:0 0}
}
.item_info .text .set{color:#79ff1f}
.item_info .frame{border-top:1px solid #141414;padding:5px}
.item_info .rare,.item_info .sub,.item_info .type{text-align:right}
.item_info .sub,.item_info .type{color:#c1a237}
.item_info .price{float:left;margin-left:20px}
.item_info .price i{width:18px;height:13px;position:absolute;background-position:-178px -62px;left:4px}
.item_info .upgrade{color:#68d5ed}
.item_info .enchant{color:#68eda1}
.item_info .flavor{color:#86784f}
.item .num{    position: absolute;
    right: 1px;
    line-height: 10px;
    color: #fff;
    text-shadow: #423f37 1px 0 0, #423f37 0 1px 0, #423f37 -1px 0 0, #423f37 0 -1px 0;
    font-size: 10.8px;
    top: 1px;pointer-events:none;}
.shadow{transform:rotateX(180deg);top:200px;width:33px;height:39px;left:50%;margin-left:-16px;position:absolute;opacity:.4}
.tab,.tab::after,.tab::before{background:url(../img/tab.png);height:19px;}
.tab{
	    position: relative;
	float:left;
	background-position:0 -23px;
	background-size: 100% 101px;
	margin:0 4px;
	color:#fff;
	margin-top: 11px;
	    text-align: center;
    color: #7a6b51;
    text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;
}
.tab::after{
	content:'';
position:absolute;
width:4px;
	background-position:-36px -3px;
	margin: -1px 0;

}
.tab::before{
	content:'';
position:absolute;
width:4px;
	background-position:0 -3px;
	margin: -1px -4px;
}
.tab:hover{background-position:0 -42px;}
.tab:hover::after{background-position:-31px -3px;}
.tab:hover::before{background-position:-5px -3px;}

.tab.active,.tab.active:hover{background-position:0 -60px;height:22px;margin-top: 8px;
    color: #b6aa90;}
.tab.active::after,.tab.active:hover::after{background-position:-26px 0;height:22px;margin:0}
.tab.active::before,.tab.active:hover::before{background-position:-9px 0;height:22px;
	margin: 0 -4px;}
.tab span{
	padding: 0 10px;pointer-events:none;
}
.inventory_item_tool .gold{float:right;padding:10px 20px 0;position:relative;
    color: #7a6b51;}
.inventory_item_tool .gold i{width:18px;height:13px;position:absolute;background-position:-178px -62px;left:0px;top:14px}
.inventory_item_tab{display:none}
.inventory_item_tab.active{display:block}