/*全局样式*/
* { font-family:'Hiragino Sans GB',"Microsoft Yahei", Arial, "Helvetica Neue", Helvetica, sans-serif;-webkit-font-smoothing:antialiased; }
body { margin: 0; padding: 0;font-size: 14px; }
a { text-decoration: none; color: #666; }
img { border: 0; }
.cl { clear: both; }
.maxsize { max-width: 1180px; margin: 0 auto;position: relative; }
.nowrap,.nowrapall,.nowrapall * { white-space: nowrap;text-overflow:ellipsis; overflow:hidden; }
.break,.breakall,.breakall * { word-wrap:break-word; word-break: break-all; }
.animate , .animateall , .animateall * { transition: all 0.2s ease-out;-webkit-transition: all 0.2s ease-out;-o-transition: all 0.2s ease-out;-moz-transition: all 0.2s ease-out; }
@media screen and (max-width: 1180px) {
	.maxsize { padding: 0 10px; }
}

/*首页*/
.topbar { background: #333; height: 50px; color: #fff; z-index: 9; position: fixed; width: 100%; }
.topblank { height: 50px; width: 100%; }
.topbar .navbtn { position: absolute; top: 10px; right: 10px; background: #444; border: 1px solid #4a4a4a; box-shadow: 1px 1px 3px rgba(0,0,0,0.2); width: 20px; height: 20px;border-radius: 2px; padding: 5px;cursor: pointer; display: none; }
.topbar .navbtn .bar { width: 100%; height: 2px; background: #666; margin-top: 4px; }
.topbar .nav a { color: #999; }
.topbar .nav a:hover { color: #aaa; }
.topbar .nav h1 { font-size: 16px; font-weight: 300; line-height: 50px; margin: 0; padding: 0;display: none; }
.topbar .nav .navlinks { margin: 0; padding: 0; list-style: none; color: #666; }
.topbar .nav .navlinks li { float: left;}
.topbar .nav .navlinks li a {line-height: 50px; padding: 0 8px;}

#navlink.show { display: block !important; }

.topbar .profile { position: absolute; top: 0; right: 0; color: #999; }
.topbar .profile a { color: #ccc; }
.topbar .profile .avatar { position: absolute; width: 40px; height: 40px; top: 5px; left: 5px; border-radius: 9999px; background: #fff; }
.topbar .profile .avatar img { width: 40px; height: auto;}
.topbar .profile .info { padding-left: 55px; line-height: 50px; }

.flexslider { overflow: hidden; z-index: 0; border-radius: 0; }
.flex-control-nav {display: none !important}

.topbg { background: #ececec; }

.main .items { padding: 10px 0; }
.main .items .item { position: relative;float: left; width: 25%; }
@media screen and (max-width: 600px) {
	.main .items .item { width: 50%; }
}
@media screen and (max-width: 320px) {
	.main .items .item { width: 100%; }
}
.main .items .item .con { border: 1px solid #ececec; margin: 2px; }
.main .items .item .face { position: relative; text-align: center;}
.main .items .item .face .img { position: relative; padding: 10px 0; }
.main .items .item .face .img  img { width: 128px; height: 128px;  }
.main .items .item .face .img .amount {position: absolute; display: inline-block; padding: 2px 5px; color: #fff; bottom: 10px; right: 10px; font-size: 12px; background:#f60;  font-weight: 600;}
.main .items .item .face .img .enchanttip {position: absolute; display: inline-block; padding: 2px 5px; color: #fff; top: 10px; left: 10px; font-size: 12px; background:#2a2; font-weight: 600;}
.main .items .item .face .img .quality { position: absolute; display: inline-block; padding: 2px 5px; color: #fff; right: 10px; bottom: 10px; font-size: 12px; background:#000; font-weight: 600; }
.main .items .item .face .img .quality.statu1 { background: #2a2; }
.main .items .item .face .img .quality.statu2 { background: #92AA22; }
.main .items .item .face .img .quality.statu3 { background: #AA8922; }
.main .items .item .face .img .quality.statu4 { background: #FFC549; }
.main .items .item .face .img .quality.statu5 { background: #FF8049; }
.main .items .item .face .img .quality.statu6 { background: #F00; }
.main .items .item .face .name { font-family: 'Microsoft Yahei'; padding: 15px; text-align: left; }
.main .items .item .face .name p {line-height: 20px; font-size: 12px; margin: 0; }
.main .items .item .face .name p span { color: #666 !important; }
.main .items .item .face .name p.price { text-align: right; }
.main .items .item .iteminfo { display: none; position: absolute; background: #101; left: 0px; top: 0; color: #fff; z-index: 8; width: 100%; }
/*.main .items .item:hover .iteminfo { display: inline-block; }*/
.main .items .item .iteminfo .infocon { padding: 10px; border: 2px solid rgb(33,0,82); border-radius: 4px;  }
.main .items .item .iteminfo p { margin: 0; padding: 0;  line-height: 1;}
.main .items .item .iteminfo .name { }
.main .items .item .iteminfo .enchant {margin-top: 5px; color: #aaa; }
.main .items .item .iteminfo .lore {margin-top: 5px; }


@media screen and (max-width: 1180px) {
	.topbar .maxsize { padding: 0; }
	.topbar .profile { padding: 0 10px; }
}
@media screen and (max-width: 600px) {
	/*.topbar .nav h1 { display: block; padding-left: 10px; }*/
	.topbar .navbtn { display: block;  }
	.topbar .nav { border-bottom: 1px solid #222; }
	.topbar .nav .navlinks { position: absolute; top: 51px;display: none; width: 100%;z-index: 99; background: #333; }
	.topbar .nav .navlinks li { display: block; float: none; width: 100%; }
	.topbar .nav .navlinks li a { display: block; width: 100%; padding: 0; line-height: 40px; text-align: center;border-bottom: 1px solid #2a2a2a; }
	.topbar .nav .navlinks li a:hover { background: #222; }
	.topbar .nav .navlinks span { display: none; }
	.topbar { background: #ececec; height: auto; }
	.topbar .nav { background: #333; height: 50px; }
	.main .items .item .face .name p { font-size: 14px; }
/*	.topbar .profile { position: relative; padding: 20px; background: #ececec; text-align: center; }
	.topbar .profile a { color: #666; }
	.topbar .profile .avatar { position: static; display: inline-block; width: 128px; height: 128px;}
	.topbar .profile .avatar img { width: 128px; height: auto; }
	.topbar .profile .info { padding: 0; line-height: 1; margin-top: 10px; }*/
	.topbar .profile { position: absolute; top: 0; left: 10px; right: 0;margin-right: 50px;}
}

.itemdetial  { position: fixed;width: 100%; top: 0; display: none; text-align: center; top: 50px; }
.itemdetial  img.hover {  position: fixed;top: 0px; left: 0;width: 100%; height: 100%;z-index: 0;  }
.itemdetial .close { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; line-height: 30px; font-size: 30px; cursor: pointer; color: #999;z-index: 9; }
.itemdetial .blank { width: 100%; height: 10px; }
.itemdetial .item { z-index: 10; padding: 10px; color: #666; }
.itemdetial .item .face { text-align: center; position: relative;   }
.itemdetial .item .face img { padding: 15px;   }
.itemdetial .durable {  margin: 0 auto; width: 100px;position: relative; }
.itemdetial .durable p { font-size: 10px; padding-top: 5px;  }
.itemdetial .durable .fullbar { margin-top: -5px;height: 4px; width: 100%; background: #eee; }
.itemdetial .durable .fullbar .currentbar { width: 50%; height: 100%; background: #2a2; }
.itemdetial .item .info { text-align: center; position: relative; padding: 10px 0;}
.itemdetial .item .info .arrowtop { text-align: center; position: relative; }
#hideinfo { display: inline-block;text-align: left;background: #101; color: #fff; z-index: 10; }
#hideinfo .infocon { padding: 10px; border: 2px solid rgb(33,0,82); border-radius: 4px;  }
#hideinfo p { margin: 0; padding: 0;  line-height: 1;}
#hideinfo .name { }
#hideinfo .enchant {margin-top: 5px; color: #aaa; }
#hideinfo .lore {margin-top: 5px; }
.itemdetial .trade { display: inline-block; }
.itemdetial .trade .btn { background: #2a2; color: #fff; display: inline-block; padding: 5px 15px; cursor: pointer; border-bottom: 3px solid #191;margin-right: 2px; }
.itemdetial .trade .btn.grey {background: #999; border-bottom: 3px solid #888;}


@media screen and (max-width: 320px) {
	.itemdetial .item .face img { width: 64px; height: 64px; padding: 10px; }
	.itemdetial .item { padding: 0; }
}

.page { text-align: right; }
.page .pagelist { display: inline-block; margin: 0; padding: 0; list-style: none; }
.page .pagelist li { float: left; margin: 1px; }
.page .pagelist li a { display: inline-block; line-height: 30px; padding: 0 10px; text-align: center; border: 1px solid #ececec; }
.page .pagelist li a:hover { background: #ececec; }

.footer { background: #333; padding: 10px 0; }
.footer .copyright { color: #fff; font-size: 12px; line-height: 30px; }
.footer .copyright a { color: #fff; }

/*登录页*/
.login { position: fixed; top: 0; left: 0; width: 100%; height: 100%; text-align: right; }
canvas { display: none;z-index: -1; }
.login form { z-index: 9; }
@media screen and (min-width: 0px) {
	canvas { display: block; }  /*Show Canvas IE9+ Only*/
}
#bodybg {width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #333 url(../images/bodybg.jpg) no-repeat top center; background-size: 100% auto; background-attachment: fixed; }

.ui.frame { position: relative; margin: 10px; max-width: 600px; border-radius: 4px; background: #333; margin: 0 auto; width: 100%;margin-top: 100px; }
@media screen and (min-width: 0px) {
	.ui.frame {background: rgba(0,0,0,0.45); }
}
.ui.frame .pdcon { padding: 50px 25px; }
.ui.frame .title { text-align: left;  }
.ui.frame .title h1 { line-height: 1; margin: 0; color: #fff; font-size: 16px; margin-bottom: 10px; }

.login .line { margin-bottom: 20px; }
.login .line p { font-size: 14px; line-height: 1; margin: 0; padding: 0; margin-bottom: 5px; color: #fff;text-align: left; }
.login .line p.tip { margin-top: 5px; color: #ccc; }
.login input.input { background: #fff; border: 0; display: block; line-height: 30px; width: 100%; border-radius: 2px; text-align: left; }
.login input.submit { background: #2a2; border: 0; border-radius : 0; border-bottom: 3px solid #191; color: #fff; padding: 10px 20px; }


/*订单页面*/
.order { position: relative; margin: 50px 0;}
.order table { width: 100%;border-collapse:collapse; margin: 10px 0;}
.order table th,.order table td { border: 1px solid #ececec; padding: 5px 10px; color: #666; text-align: left; }
.order .filter { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid #ececec; padding-left: 5px; }
.order .filter li { display: inline-block; margin: 1px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid #ececec; background: #fff; margin-bottom: -1px; background: #f9f9f9; }
.order .filter li:hover,
.order .filter li.active { border-bottom: 0; background: #fff; padding-bottom: 1px;}
.order .filter li a { display: inline-block; padding: 5px 15px; }

.order p { margin: 0; padding: 0; }
.order .row { position: relative; border: 1px solid #ececec; margin-bottom: 10px; font-size: 14px; color: #666; }
.order .row .pdcon { padding: 10px; }
.order .row .top { border-bottom: 1px solid #ececec; font-size: 12px; position: relative; background: #f9f9f9; }
.order .row .top .oid { position: absolute; margin: 0; padding: 0; top: 10px; right: 10px; }
.order .row .fl { float: left;  }
.order .row .info { height: 120px; }
.order .row.main { background: #ececec; border: 1px solid #dadada; margin-top: 10px; }
.order .row .item { width: 60%; position: relative; }
.order .row .item .face { width: 100px; height: 100px; position: absolute; top: 10px; left: 10px; }
.order .row .item .text { padding-left: 110px;  }
.order .row .item .text .loretext { max-height: 72px;  overflow: hidden;font-size: 12px;margin-top: 10px;  }
.order .row .item .text .loretext span { color: #666 !important; line-height: 18px;font-size: 12px;  }
.order .row .item .text p.out span { color: #666 !important; }
.order .row .item .face img { width: 100%; height: auto; }
.order .row .amount { width: 10%; }
.order .row .price { width: 10%;}
.order .row .who { width: 20%;  }
.order .row .hideinfo { display: none; background: #101; color: #fff; position: absolute;z-index: 9; }
.order .row .item:hover .hideinfo { display: inline-block; }
@media screen and (max-width: 480px) {
	.order .row .pdcon { padding: 5px; }
	.order .row .top .oid { display: none; }
	.order .row .info { height: 84px; }
	.order .row .item { width: 50%; }
	.order .row .item .face { width: 64px; height: 64px; display: none; }
	.order .row .item .text { padding-left: 0px; font-size: 12px; }
	.order .row .amount { width: 10%; font-size: 12px; }
	.order .row .price { width: 10%;font-size: 12px; }
	.order .row .who { width: 30%; font-size: 12px; }
}

/*产品管理*/
.manage { position: relative; }
.manage table { width: 100%;border-collapse:collapse; margin: 10px 0;}
.manage table th,.manage table td { border: 1px solid #ececec; padding: 5px 10px; color: #666; text-align: left; }
.manage .btn { display: inline-block; padding: 3px 10px; background: #2a2; color: #fff; margin: 1px; cursor: pointer; }
.manage .btn.unload { background: #f60; }
.tradestatu { padding: 10px 0; background: #333; color: #fff; display: none; position: fixed; bottom: 0; left: 0;z-index: 999; width: 100%;}
.tradestatu p { line-height: 30px; margin: 0; padding: 0; display: inline-block;padding-left: 10px; font-size: 16px; }
.spinner{width:20px;height:20px;position:relative; display: inline-block;}
.container1>div,.container2>div,.container3>div{width:6px;height:6px;background-color:#fff;border-radius:100%;position:absolute;-webkit-animation:bouncedelay 1.2s infinite ease-in-out;animation:bouncedelay 1.2s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.spinner .spinner-container{position:absolute;width:100%;height:100%}
.container2{-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg)}
.container3{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg)}
.circle1{top:0;left:0}
.circle2{top:0;right:0}
.circle3{right:0;bottom:0}
.circle4{left:0;bottom:0}
.container2 .circle1{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}
.container3 .circle1{-webkit-animation-delay:-1.0s;animation-delay:-1.0s}
.container1 .circle2{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}
.container2 .circle2{-webkit-animation-delay:-0.8s;animation-delay:-0.8s}
.container3 .circle2{-webkit-animation-delay:-0.7s;animation-delay:-0.7s}
.container1 .circle3{-webkit-animation-delay:-0.6s;animation-delay:-0.6s}
.container2 .circle3{-webkit-animation-delay:-0.5s;animation-delay:-0.5s}
.container3 .circle3{-webkit-animation-delay:-0.4s;animation-delay:-0.4s}
.container1 .circle4{-webkit-animation-delay:-0.3s;animation-delay:-0.3s}
.container2 .circle4{-webkit-animation-delay:-0.2s;animation-delay:-0.2s}
.container3 .circle4{-webkit-animation-delay:-0.1s;animation-delay:-0.1s}
@-webkit-keyframes bouncedelay{0%,80%,100%{-webkit-transform:scale(0.0)}
40%{-webkit-transform:scale(1.0)}
}
@keyframes bouncedelay{0%,80%,100%{transform:scale(0.0);-webkit-transform:scale(0.0)}
40%{transform:scale(1.0);-webkit-transform:scale(1.0)}
}
/*图标管理*/
i.priceunit { display: inline-block; width: 14px; height: 14px;position: relative;  }
i.priceunit img { width: 30px; height: 30px;position: absolute;top: -5px;left: -8px; }

/*装修*/
.designbtn { display: inline-block; padding: 0 10px; line-height: 25px; font-size: 12px; background: #2a2; color: #fff; border-radius: 4px; }
.themes { position: relative; margin-bottom: 50px; }
.themes .theme { float: left;width: 33.3%; }
.themes .theme .con { margin: 2px; border: 1px solid #dadada; border-radius: 6px; overflow: hidden; }
.themes .theme .face { background: #fafafa;position: relative; max-height: 240px;overflow: hidden; }
.themes .theme .face img { width: 100%; height: auto }
.themes .theme .face .themehover { height: 100px; width: 100%; position: absolute; bottom:0; left: 0; background: url('../images/themehover.png') repeat-x bottom center; }
.themes .theme .face .tags { position: absolute; top: 10px; right: 10px; }
.themes .theme .face .tags .tag { display: inline-block; padding: 2px 5px; background: #FF7530; color: #fff;margin: 1px; border-radius: 4px; font-size: 12px; border: 1px solid #f60;}
.themes .theme .text { padding: 10px;color: #444; }
.themes .theme .text h2 { line-height: 1;font-size: 16px;margin:0;padding: 0; }
.themes .theme .text p { line-height: 1;font-size: 14px;margin:0;padding: 0;margin-top: 5px;color: #666; }
.themes .theme .btns { border-top: 1px solid #dadada;background: #fafafa; padding: 10px; }
.themes .theme .btns .btn { border: 1px solid #191;background: #2a2; color: #fff; display: inline-block; padding: 4px 10px;cursor: pointer;margin-right:1px;cursor: pointer; }
.themes .theme .btns .btn.highlight { border: 1px solid #c11;background: #e22; color: #fff; display: inline-block; padding: 4px 10px;cursor: pointer; }
@media screen and (max-width: 768px) {
	.themes .theme { width: 50%; }
}
@media screen and (max-width: 400px) {
	.themes .theme { width: 100%; }
}

.tradeway { text-align: center;position: fixed;top: 0; left: 0; background: rgba(0,0,0,0.5); width: 100%; height: 100%; z-index: 999;  }
.tradeway .detial { display: inline-block; background: #fff; text-align: left; box-shadow: 5px 5px 10px rgba(0,0,0,0.25); position: relative;margin-top: 100px;color: #666; max-width: 1180px;min-width: 300px;width: 50%;border: 1px solid #d1d1d1;border-radius: 6px; overflow: hidden;  }
.tradeway .detial .title { position: relative; padding: 10px; border-bottom: 1px solid #d1d1d1; }
.tradeway .detial .title h1 {  margin: 0; padding: 0; line-height: 1; font-size: 20px; font-weight: normal; }
.tradeway .detial .title .close { position: absolute; top: 10px; right: 10px; line-height: 20px;font-size: 12px; }
.tradeway .detial .cont { padding: 10px; }

.tradeway .detial .cont .way .tab { border: 1px dashed #e1e1e1; padding: 10px;margin: 0; line-height: 1; margin: 10px 0;cursor: pointer; }
.tradeway .detial .cont .way .tab p { margin: 0; } 
.tradeway .detial .cont .way .tab.active,.tradeway .detial .cont .way .tab:hover { border: 1px solid #2a2;background: #2a2;color: #fff; }
.tradeway .hl { padding: 0 5px; color: #f60; font-weight: 600; }
.tradeway .confirm { border-top: 1px solid #d1d1d1; text-align: right; padding: 10px; }
.tradeway .confirm .btn {  background: #2a2; border: 1px solid #191; color: #fff; display: inline-block; padding: 5px 15px; margin-left: 1px;}
.tradeway .info { display: none; }
.tradeway .error {  display: none;}
.tradeway .error span.btn { background: #2a2; border: 1px solid #191;color: #fff; padding: 2px 5px; }