/* CSS Document */
@charset "utf-8";
/*!
 * @名称：base.css
 * @功能：1、重设浏览器默认样式
 *       2、设置通用原子类
 */
*{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    /*font-family: 'fontNameRegular',microsoft yahei,arial;*/
	font-family:microsoft yahei,arial;
	word-break:break-all; /*支持IE，chrome，FF不支持*/
	word-wrap:break-word;/*支持IE，chrome，FF*/
}
/* 内外边距通常让各个浏览器样式的表现位置不同 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,figure,footer,header,hgroup,menu,nav,section {
    margin:0;
    padding:0;
}
html{
	background-color:#fff;
}
/* 要注意表单元素并不继承父级 font 的问题 */
body,button,input,select,textarea {
	font-family:microsoft yahei;
	color:#000;
}
input,select,button,textarea {
    font-size:100%;
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
}
select{
	background-color:#fff;
}
/* 去除默认边框 */
img {
    border:0;
	display:block;
}
/* 去掉 firefox 下此元素的边框 */
abbr,acronym {
    border:none;
    font-variant:normal;
}
/* 去掉列表前的标识，li 会继承 */
ol,ul {
    list-style:none;
}
i, em, var{
	font-style: normal;
}
/* 对齐是排版最重要的因素，别让什么都居中 */
caption,th {
    text-align:left;
}

button{
	overflow: visible
}
button, html input[type=button], input[type=reset], input[type=submit] {
	-webkit-appearance: button;
	cursor: pointer;
}

/* 来自yahoo，让标题都自定义，适应多个系统应用 */
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
/* A链接*/
a {color:#000; text-decoration:none;}
a:active{
	outline: 0;
}
a:focus.input:focus {
	outline: none;
}
/* 清除浮动 */
.clear {
    clear:both;
    display:block;
    font-size:0;
    height:0;
    line-height:0;
    overflow:hidden;
}
.clearfix:after {
    content: " ";
	display: block;
	visibility: hidden;
	height: 0;
	clear: both;
}
/* 设置显示和隐藏，通常用来与 js 配合 */
.hide {
    display:none;
}
.block {
    display:block;
}
/* 设置浮动，减少浮动带来的 bug */
.inline {
    display:inline;
}
.fb{
	font-weight:bold;
}
.left{
	float:left;
}
.right{
	float:right;
}

/* 懒加载样式 */
.lazy{
    width: 100%;
    height: 100%;
}

#load-box{
	background-color:#fff;
	position:fixed;
	z-index:999;
	width:100%;
	height:100%;
}
.spinner {
  margin: 0 auto;
  width: 60px;
  height: 60px;
  position: relative;
  top:40%;
}
 
.container1 > div, .container2 > div, .container3 > div {
  width: 15px;
  height: 15px;
  background-color: #222;
  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);
  }
}

.toTop{
	position:fixed;
	right:1.25rem;
    bottom:4.875rem;
	z-index:999;
	width:3.375rem;
	height:3.375rem;
	background:url(../images/go-top.png) no-repeat;
	background-size:100%;
	display:none;
}

.mask{
	background-color:rgba(0,0,0,.5);
	position:absolute;
	left:0;
	top:0;
	z-index:1;
    display: none;
}

footer{
	position:fixed;
	bottom:0;
	left:0;
	width:100%;
/*	height:4.125rem;*/
	height:4.6rem;
	background-color:#f2f2f2;
	border-top:1px solid #eeeeee;
/*	padding: 0 .625rem;*/
	display: -webkit-box;
    display: -webkit-flex;
    display: flex;
	z-index:2;
}
footer a{
	-webkit-appearance: none;
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	flex: 1;
	display: block;
	text-align:center;
	font-size:1rem;
	color:#818181;
}
footer a.hover{color:#39c71c;}
footer a i{
	display:block;
	margin:0.6rem auto 0 auto;
	width:1.875rem;
	height:2rem;
}
footer a:nth-child(1) i{
	background:url(../images/d_zhuye_normal.png) no-repeat;
	background-size:100%;
}
footer a:nth-child(2) i{
	background:url(../images/d_ce_normal.png) no-repeat;
	background-size:100% 100%;
}
footer a:nth-child(3) i{
	background:url(../images/d_xin_normal.png) no-repeat;
	background-size:100%;
}
footer a:nth-child(4) i{
	background:url(../images/d_shang_normal.png) no-repeat;
	background-size:100%;
}
footer a.hover:nth-child(1) i{
	background:url(../images/d_zhuye_press.png) no-repeat;
	background-size:100%;
}
footer a.hover:nth-child(2) i{
	background:url(../images/menu-2-act.png) no-repeat;
	background-size:100%;
}
footer a.hover:nth-child(3) i{
	background:url(../images/d_xin_press.png) no-repeat;
	background-size:100%;
}
footer a.hover:nth-child(4) i{
	background:url(../images/d_shang_press.png) no-repeat;
	background-size:100%;
}


.goods-list{
	background-color:#fff;
	overflow-y:auto;
	-webkit-overflow-scrolling : touch;  
}
.goods-list a{
	float:left;
	width:50%;
	position:relative;
	display:block;
	border-bottom:0.25rem solid #f3f5f7;
}
.goods-list > a > div{
	padding-bottom:1rem;
}
.goods-list > a:nth-child(2n-1) > div{
	border-right:0.125rem solid #f3f5f7;
}
.goods-list > a:nth-child(2n) > div{
	border-left:0.125rem solid #f3f5f7;
}
.goods-list a .pic{
	position:relative;
}
.goods-list a img{
	width:100%;
}
.goods-list a .pic .sold-out{
	width:6.75rem;
	height:6.75rem;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-3.375rem;
	margin-top:-3.375rem;
	background:url(../images/sold-out.png) no-repeat;
	background-size:100%;
}
.goods-list a .off-shelf{
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	background-color:rgba(0,0,0,.6);
}
.goods-list a .off-shelf span{
	width:6.75rem;
	height:6.75rem;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-3.375rem;
	margin-top:-3.375rem;
	background:url(../images/off-shelf.png) no-repeat;
	background-size:100%;
}
.goods-list a .store{
	background-color:rgba(115,115,115,.8);
	height:1.5rem;
	line-height:1.5rem;
	color:#fff;
	display:block;
	position:absolute;
	font-size:1.2rem;
	right:0;
	bottom:2px;
	padding:0 .5rem 0 0.75rem;
	border-radius:10px 0 0 10px;
}
.goods-list a .detail{
	clear:both;
	padding:0 0.875rem;
	margin-top:1rem;
}
.goods-list a .detail span{
	font-size:1.4rem;
	color:#000;
	overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-height:1.625rem;
	height:3rem;
}
.goods-list a .detail em{
	color:#dd1732;
	font-size:1.5rem;
	margin-top:.5rem;
	display:block;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.goods-list a .detail em:first-letter{
	font-size:1.2rem;
	display:block;
}

.empty {
    padding-top:40%;
	text-align:center;
}
.empty img {
    width: 100%;
    margin-bottom:3rem;
}
.empty span {
    color: #666;
    font-size:1.6rem;
    display: block;
    text-align: center;
    padding: 0 1rem;
}
.empty a{
	color:#222;
	font-size:1.6rem;
	height:2.75rem;
	line-height:2.75rem;
	padding:0 3.5rem;
	border:1px solid #555;
	border-radius:2px;
	display:inline-block;
	margin:1.5rem .5rem;
}
.empty p{
	padding-top:4rem;
}
.empty p a{
	width:12.5rem;
	display:block;
	margin:1.5rem auto;
}

/**********************************  动画  *********************************************/

/* animation sets */

/* move from / to  */

.pt-page-moveToLeft {
	-webkit-animation: moveToLeft .6s ease both;
	animation: moveToLeft .6s ease both;
}

.pt-page-moveFromLeft {
	-webkit-animation: moveFromLeft .6s ease both;
	animation: moveFromLeft .6s ease both;
}

.pt-page-moveToRight {
	-webkit-animation: moveToRight .6s ease both;
	animation: moveToRight .6s ease both;
}

.pt-page-moveFromRight {
	-webkit-animation: moveFromRight .6s ease both;
	animation: moveFromRight .6s ease both;
}


/********************************* keyframes **************************************/

/* move from / to  */

@-webkit-keyframes moveToLeft {
	from { }
	to { -webkit-transform: translateX(-100%); }
}
@keyframes moveToLeft {
	from { }
	to { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
}

@-webkit-keyframes moveFromLeft {
	from { -webkit-transform: translateX(-100%); }
}
@keyframes moveFromLeft {
	from { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
}

@-webkit-keyframes moveToRight { 
	from { }
	to { -webkit-transform: translateX(100%); }
}
@keyframes moveToRight { 
	from { }
	to { -webkit-transform: translateX(100%); transform: translateX(100%); }
}

@-webkit-keyframes moveFromRight {
	from { -webkit-transform: translateX(100%); }
}
@keyframes moveFromRight {
	from { -webkit-transform: translateX(100%); transform: translateX(100%); }
}


/* 弹框 */
.fullscreen-mask{
    width: 100%;
    height: 100%;
	position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: rgba(0,0,0,.6);
    display: none;
}
.alert-wrap{
	position: fixed;
    width:54%;
    top: 30%;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin-left: -27%;
    margin-top: -50px;
    left: 50%;
    background-color:#fff;
}
.alert-title {
    height:3rem;
    line-height:3rem;
    text-align: center;
    color: #fff;
    background-color: #ea4f16;
    border-radius: 5px 5px 0 0;
    font-size: 1.7em;
    word-spacing: 8px;
    letter-spacing:6px;
}
.alert-title em{
	width:3rem;
	height:3rem;
	display:inline-block;
	background:url(../images/pop_head.png) no-repeat;
	background-size:100%;
	vertical-align:bottom;
}
.alert-con {
    padding:2rem 1em;
	border-bottom: 1px solid #ea4f16;
}
.alert-con p {
    color: #333;
    padding:1rem 0;
	text-align:center;
	font-size:1.5rem;
}
.alert-btn {
    height:3.75rem;
    
	display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}
.alert-btn a {
    width:42%;
	height:3.75rem;
	line-height:3.75rem;
    display: block;
    text-align: center;
	
	color:#222;
	-webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
	font-size:1.5rem;
}
.alert-btn a:nth-child(1) {
	border-right: 1px solid #ea4f16;
	border-radius:0 0 0 3px;
}
.alert-btn a:nth-child(2) {
    background-color: #f9cab9;
	border-radius:0 0 3px 0;
}


/* 提示层 */
.tips{
	position:fixed;
	left:0;
	bottom:15%;
	width:100%;
	text-align:center;
	display:none;
}
.tips .con{
	background-color:rgba(0,0,0,.7);
	color:#fff;
	text-align:center;
	display:inline-block;
	border-radius:5px;
	font-size:1.5rem;
	max-width:80%;
}
.tips em{
	padding:.5rem 1rem;
	text-align:center;
	margin:0 auto;
	line-height:1.75rem;
}


@-webkit-keyframes tip_in {
0%{
	opacity:0;
	transform:translateY(-100px);
}
100%{
	opacity:0;
	transform:translateY(0);
}
}
@keyframes tip_in {
0%{
	opacity:0;
	transform:translateY(-100px);
}
100%{
	opacity:1;
	transform:translateY(0);
}
}
.tip_in {
	animation-duration:.5s;
	-webkit-animation-name: tip_in;
	animation-name: tip_in;
}