@charset "utf-8";


/* base */
*{padding: 0;margin: 0;}
body {
    color: #666666;
    font-family: "微软雅黑" !important;
    font-size: 14px;
}
a {
    color: #666666;
    text-decoration: none;
}
img{max-width: 100%;}
.fr{float: right;}
.fl{float: left;}
.fr-clear{float:right;clear: both;}
.fl-clear{float: left;clear: both;}
.lui-blueA{color: #0091d9}
.imgBox {
    display: inline-block;
    vertical-align: middle;
}
.col-5{width: 5%}
.col-10{width:10%;}
.col-15{width:15%;}
.col-20{width:20%;}
.col-25{width:25%;}
.col-50{width:50%;}
.col-100{width:100%;}
.w50{width:50px;}
.w500{width:500px;}
.w700{width:700px;}
.mt0{margin-top:0rem !important;}
.mt2{margin-top:2rem;}
.mt1{margin-top:1rem;}
.mt40{margin-top:40px;}
.ml120{margin-left:120;}
.h50{height:50px;}
.pb05{padding-bottom:0.5rem;}
.pb1{padding-bottom:1rem;}
.vt{vertical-align: top;}
.db{display: block !important;clear: both;}
.tl{text-align:left;}
.tr{text-align:right;}
.tc{text-align:center;}
.img-box{overflow: hidden;}
xmp{white-space: pre-wrap;padding: 10px;}
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset;}

/*背景颜色*/
.BGff{background-color:#fff;}
.BGf7{background-color:#f7f7f7;}
/*对抗jquery weui*/
.weui_toast{font-size:0.7rem; max-width:90%; white-space:nowrap;}

/* 习课商城项目颜色搭配 */

.lui-header {
    background-color: #dd3034;
}
.lui-mainHeader {
    color: #fff;
}

.lui-mainHeader a {
    border-color: #fff;
    color: #fff;
}
/* layout */
.demo-box {
    margin: 10px auto;
    /* padding: 5px; */
    position: relative;
    top: 113px;
    margin: 0 auto;
    width: 272px;
    height: 485px;
    overflow: hidden;
    overflow-y: auto;
}
.iframe-left{
	width: 560px;
	margin: 50px;
	display: inline-block;
	float: left;
	margin-right: 100px;
}
.iframe-left>h1{
    font-size: 25px;
    display: block;
    border-bottom: 1px solid #ddd;
    margin-bottom: 30px;
}
.iframe-left>h5{
    font-weight: normal;
    font-size: 18px;
}
.code-content{
    border: 1px solid #ddd;
    background-color: #f5f5f5;
    min-height: 500px;
}
.iframe-right{
	width: 350px;
	display: inline-block;
	height: 700px;
	float: left;
	margin-top: 50px;
}
.iframe-right .show-box{
    background-image:url(../img/iPhone6.jpg);
    background-size: 100% auto;
    background-position: center center;
    background-repeat: no-repeat;
    width:100%;
    height: 100%;
}

/*头部*/
.header{
    height:2rem;
    line-height: 2rem;
    background-color: #DD3040;
    width: 96%;
    padding:0 2%;
    position:relative;
}
.header a.settingBtn{
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-image: url(../../images/mobile/icon-set.png);
    background-size: 1rem;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 2;
    left: 2%;
    top: 0.5rem;
}
.header a.backBtn{
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-image: url(../../images/mobile/icon-arrow2.png);
    background-size: 1rem;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 2;
    left: 2%;
    top: 0.5rem;
}
.header-title{
    position: absolute;
    width: 100%;
    height: 2rem;
    line-height: 2rem;
    top: 0;
    left: 0;
    z-index: 1;
    color: #fff;
    text-align: center;
}
.header-right{
    display: inline-block;
    position: absolute;
    z-index: 3;
    right: 2%;
    height: 2rem;
}
.header-right a{
    display:inline-block;
    width: 1rem;
    height: 1rem;
    background-size:1rem;
    background-position: center center;
    background-repeat: no-repeat;
    margin-top:0.6rem; 
    padding:0 0.2rem;
}
.header-right a.QRcodeBtn{
    background-image: url(../../images/mobile/icon-code.png);
}
.header-right a.msgBtn{
    background-image: url(../../images/mobile/icon-msg.png);
    position:relative;
}
.header-right a.msgBtn .msgTip{
	display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    background-color: #fff;
    position: absolute;
    border-radius: 1rem;
    color: #DD3040;
    text-align: center;
    font-size: 0.5rem;
    line-height: 0.8rem;
    right: -0.1rem;
    top: -0.2rem;
}
/*脚部*/
.lui-footer{
	position: fixed;
    bottom: 0;
    /* height: 2.5rem; */
    border-top: 1px solid #ddd;
    left: 0;
    background-color: #fff;
    width: 100%;
    padding: 0.2rem 0;
}
.lui-footer ul li{
	display: inline-block;
	width: 24.5%;
	float: left;
	height: 1.5rem;
	padding:0.25rem 0;
}
.lui-footer ul li a{
	display: block;
	text-align: center;
	font-size:0.45rem;
}
.lui-footer ul li.active a{color:#DD3040}
.lui-footer ul li a img{
	width: 20px;
	height: 20px;
	display: block;
	margin: 0 auto;
}

.lui-footer a > i {
  background-repeat: no-repeat;
    background-size: 100% auto;
    display: block;
    height: 1rem;
    margin: 0 auto;
    width: 1rem;
}
/*用户卡片*/
.user-card-box{
	background-color: #DD3040;
    padding: 0.5rem !important;
}
.user-head{
    width: 2.5rem !important;
    height: 2.5rem !important;
    border-radius: 100%;
    overflow: hidden;
}
.user-name{
	font-size:0.9rem !important;
	color: #fff;
}
.user-name .sign-btn{
	display:inline-block;
	padding:0 0.3rem;
	border:1px solid #ddd;
	color:#fff;
}
.user-regi{margin-top:0.3rem;}
.user-regi span{
    display: block;
    color: #fff;
    font-size: 0.7rem;
    line-height: 1rem;
    letter-spacing: 0.02rem;
}
.user-regi span ins{
	color:yellow;
	text-decoration:none;
}
.icon-arrow{
    position: absolute;
    right: 2%;
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-image: url(../../images/mobile/icon-arrow.png);
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    top: 1.8rem;
}

/*菜单栏*/
.menu-bar-box {
	padding:0.5rem 0;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	overflow: hidden;
}
.menu-bar-box ul li{
	width: 24.5%;
	display: inline-block;
	float: left;
	border-right: 1px solid #ddd;
	padding:0.3rem 0;
}
.menu-bar-box ul li:last-child{
	border: none;
}
.menu-bar-box ul li a{
    display: block;
    font-size: 0.45rem;
    text-align: center;
}
.menu-bar-box ul li a img{
    display: block;
    width: 1rem;
    height: 1rem;
    margin: 0 auto 0.2rem;
}
.pn-grids{
	background-color:#fff;
}
/*列表*/
.lui_media_desc{
    white-space: nowrap;
    display: block !important;
    line-height: 1rem !important;
}
.lui_media_info{
	list-style:none;
}
.lui_media_info li{
	display:inline-block;
	float:left;
	color:#999;
	font-size:0.65rem;
	margin-right:0.5rem;
}

/*checkbox*/
.lui-marquee-box {
    display: inline-block;
    position: relative;
    margin-right: 20px;
}
.lui-marquee {
    height: 21px;
    left: 0;
    margin: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    cursor: pointer;
}
.lui-marquee-box .lui-radio-btn, .lui-marquee-box .lui-checkbox-btn {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto 100%;
    display: inline-block;
    height: 20px;
    margin-right: 5px;
    vertical-align: middle;
    width: 19px;   
}
.lui-checkbox-btn{
	background-image: url(../../images/mobile/btn-checkbox.png);
}
.lui-radio-btn {
    background-image: url(../../images/mobile/btn-radio.png);
}
.lui-marquee:checked + .lui-radio-btn{
    background-image: url(../../images/mobile/btn-radio-act.png);
}
.lui-marquee:checked + .lui-checkbox-btn{
    background-image: url(../../images/mobile/btn-checkbox-act.png);
} 
.lui-marquee-box span{
	vertical-align:middle;
}

/*轮播*/
.swiper-container {
   width: 100%;
} 

.swiper-container img {
  display: block;
  width: 100%;
}



/**/
/*排序工具的样式*/
.sort-toolBox{
	width:100%;
	position:relative;
}
.sort-toolBox ul{
   font-size:0;
}
.sort-tool-li{
    width: 25%;
    display: inline-block;
    height: 1.5rem;
    padding: 0.25rem 0;
}
.sort-tool-li{
	color:black;
}
.sort-tool-li a:active{
   color:red;
}
.sort-tool-li a{
    display: block;
    text-align: center;
    font-size: 0.75rem;
    height: 1.5rem;
    line-height: 1.5rem;
    color: #666666;
    font-family: 微软雅黑;
}
.sort-tool-li:nth-child(1) a:after{
	content:'';
	display:inline-block;
}
.sort-tool-li a:active{
	color:red;
}
.sort-tool-li:nth-child(1) a:active:after{
	border-top: 6px solid red;
}
.choose-icon{
	content:'';
	display:inline-block;
	width:15px;
	height:13px;
	background-image: url(../img/icon-updown-arrow.png);
	background-size:50px 50px;
	background-position:-2px -30px;
}
.sort-tool-li .icons-box{
	display:inline-block;
	position:relative;
}
.sort-tool-li .icons-box span{
	height:0;
	width:0;
	display:inline-block;
	border-left: 3px solid transparent;
    border-right: 3px solid transparent;
	position:absolute;
}
.sort-tool-li .icons-box span:nth-child(2n-1){
    border-bottom: 6px solid #cccccc;
    top:-13px;
}
.sort-tool-li .icons-box span:nth-child(2n){
    border-top: 6px solid #cccccc;
	top:-3px;
	left:0;
}
.icon-show-down{
	border-top: 6px solid red !important;
}
.icon-show-up{
	border-bottom: 6px solid red;
}
/*排序工具中筛选的侧边栏的样式*/
@keyframes sidebar-slideLleft{
	from {
		left:100%;
	}
	to {
		left:0;
	}
}

@-moz-keyframes sidebar-slideLleft{
	from {
		left:100%;
	}
	to {
		left:0;
	}
}

@-webkit-keyframes sidebar-slideLleft{
	from {
		left:100%;
	}
	to {
		left:0;
	}
}
@-o-keyframes sidebar-slideLleft{
	from {
		left:100%;
	}
	to {
		left:0;
	}
}
.filter-side-left{
	animation: sidebar-slideLleft 0.2s;
	-moz-animation: sidebar-slideLleft 0.2s;	/* Firefox */
	-webkit-animation: sidebar-slideLleft 0.2s;	/* Safari 和 Chrome */
	-o-animation: sidebar-slideLleft 0.2s;
	height:100%;
	width:10%;
	display:none;
	background-color: #080808;
	-webkit-opacity: 0.5;  
    -moz-opacity: 0.5;   
    opacity: .5; 
    filter:alpha(opacity=50);  
	position:absolute;
	left:0;
	top:0;
}
@keyframes sidebar-slideRleft{
	from {
		left:100%;
	}
	to {
		left:10%;
	}
}

@-moz-keyframes sidebar-slideRleft{
	from {
		left:100%;
	}
	to {
		left:10%;
	}
}

@-webkit-keyframes sidebar-slideRleft{
	from {
		left:100%;
	}
	to {
		left:10%;
	}
}
@-o-keyframes sidebar-slideRleft{
	from {
		left:100%;
	}
	to {
		left:10%;
	}
}
.filter-sideBox{
	animation: sidebar-slideRleft 0.2s;
	-moz-animation: sidebar-slideRleft 0.2s;	/* Firefox */
	-webkit-animation: sidebar-slideRleft 0.2s;	/* Safari 和 Chrome */
	-o-animation: sidebar-slideRleft 0.2s;
	background-color: #F5F5F5;
	display:none;
	width:90%;
	position:absolute;
	left:10%;
	top:0;
	color:black;
}
.filter-sideBox:after{
	content:'';
	display: block;
	width:0;
	height:0;
	clear:both;
}
@keyframes sidebar-slideLright{
	from {
		left:0;
	}
	to {
		left:100%;
	}
}

@-moz-keyframes sidebar-slideLright{
	from {
		left:0;
	}
	to {
		left:100%;
	}
}

@-webkit-keyframes sidebar-slideLright{
	from {
		left:0;
	}
	to {
		left:100%;
	}
}
@-o-keyframes sidebar-slideLright{
	from {
		left:0;
	}
	to {
		left:100%;
	}
}
.filter-side-leftHide{
	animation: sidebar-slideLright 1s!important;
	-moz-animation:sidebar-slideLright 1s!important;	/* Firefox */
	-webkit-animation: sidebar-slideLright 1s!important;	/* Safari 和 Chrome */
	-o-animation: sidebar-slideLright 1s!important;
}

@keyframes sidebar-slideRright{
	from {
		left:10%;
	}
	to {
		left:100%;
	}
}

@-moz-keyframes sidebar-slideRright{
	from {
		left:10%;
	}
	to {
		left:100%;
	}
}

@-webkit-keyframes sidebar-slideRright{
	from {
		left:10%;
	}
	to {
		left:100%;
	}
}
@-o-keyframes sidebar-slideRright{
	from {
		left:10%;
	}
	to {
		left:100%;
	}
}
.filter-side-rightHide{
	animation: sidebar-slideRright 1s!important;
	-moz-animation:sidebar-slideRright 1s!important;	/* Firefox */
	-webkit-animation: sidebar-slideRright 1s!important;	/* Safari 和 Chrome */
	-o-animation: sidebar-slideRright 1s!important;
}
.filter-side-inforHeader,.delivery,.classifyAll,.classify-det{
	width:100%;
	height:40px;
	line-height:40px;
	border-bottom:1px solid #cccccc;
	background-color: white;
	position:relative;
	color:black;
	font-size:0.9rem;
	z-index: 1;
}
.inforHeader-title{
	width:50%;
	text-align: center;
	position:absolute;
	top:0;
	left:25%;
	height:40px;
	line-height:40px;
}
.inforHeaderbg{
    display: block;
    margin: 11px 15px;
    padding: 0px;
    width: 16px !important;
    position:absolute;
    top:0;
	left:0;
    height: 22px !important;
    background: url("../../images/mobile/icon-sprites.png") -23px 1px / 200px 200px no-repeat;
}
.inforHeader-right{
   width: 30%;
   height: 40px;
   line-height: 40px;
   position: absolute;
   left: 70%;
   text-align: center;
   top: 0;
   font-size: 0.7em;
}
 .deliveryLeft,.classify-detLeft{
    width: 50%;
    position: absolute;
    left: 0;
    top: 0;
    text-indent: 10px;
    font-size: 0.7rem;
    color: #000;
 }
.delivery{
	font-weight:bold;
	font-size:0.8rem;
}
.deliveryRight,.classify-detRight{
   width: 35%;
   position: absolute;
   left: 50%;
   text-align: right;
   top: 0;
   font-weight: normal;
   font-size: 0.7rem;
}
.inforBg{
    width: 16px;
   height: 16px;
   display: block;
   float: right;
   margin: 13px 14px 0px 8px;
   background: url("../../images/mobile/icon-sprites.png") -180px -49px / 200px 200px no-repeat;
   }
.fuzzy-classify{
	height:78px;
	width:98%;
	margin:10px 0;
	background-color: white;
	padding:0 1%;
	padding-bottom:10px;
}
 .fuzzy-classify li{
 	width:30%;
 	height:30px;
 	margin:0 1.2%;
 	line-height:30px;
 	text-align:center;
 	font-size: 0.6rem;
 	border:1px solid #cccccc;
 	float:left;
 	font-weight: lighter;
 	margin-top:7px;
 }
 .fuzzy-classify li span{
  display: inline-block;
  font-size: 0.65rem;
 }
.fuzzy-classify li span i{
  	display: hidden;
    width: 10px;
    height: 8px;
    margin-right:4px;
    background:  url('../../images/mobile/icon-red.png') 0% 0% / 25px 18px no-repeat;
    background-size: 100%
}
.fuzzy-classify:after{
	content:'';
	display:block;
	width:0;
	height:0;
	clear:both;
}
.classifyAll{
	text-indent:10px;
}
.classifiyAllleft{
	font-size:0.7rem;
}
.classifyAllleft{
	width: 50%;
	width:50%;
 	text-indent:10px;
}
.classify{
	border-top: 1px solid #cccccc;
}
.classifiyAllBg{
    width: 16px;
    height: 16px;
    display: block;
    margin: 13px 14px 0px 8px;
    background: url("../../images/mobile/icon-sprites.png") -180px -49px / 200px 200px no-repeat;
}
.classifiy{
	width:100%;
	height:auto;
}
.classify-detBox{
	width:100%;
	height:auto;
}
.sidebar-clearchooseBox{
	width:30%;
	margin:15px 35%;
	background-color: #F5F5F5;
	border:1px solid #cccccc;
}
.sidebar-clearChoose{
	width:100%;
	height:30px;
	cursor:pointer;
	line-height:30px;
	text-align: center;
	display:inline-block;
}
/*筛选中的配置地点box*/
.delivery-city{
	position: absolute;
	left:0;
	top:0;
	display: none;
	width:100%;
}
.delivery-cityPicker{
	width:100%;
	height: auto;
}
.delivery-cityPicker li{
	width: 100%;
	height: 40px;
	line-height: 40px;
	border-bottom: 1px solid #cccccc;
	text-indent:20px;
}
/*暂无数据*/
.lui-noDate-h {
    display: block;
    margin: 0 auto;
    text-align: center;
}

.lui-noDate-h img {
    width: 80%;
}


.lui-noDate-mes {
    display: inline-block;
    margin-top: 20px;
    vertical-align: middle;
}

.lui-noDate-mes > span {
    display: block;
}

.lui-noDate-mes > a {
    background-color: #efefef;
    border-radius: 10px;
    display: inline-block;
    margin-top: 10px;
    padding: 5px 20px;
}
.lui-noDate-h .lui-noDate-mes {
    display: block;
    margin: 0;
}
/*列表list-show的样式*/
.goods-show:after{
	content:'';
	clear:both;
	display:block;
	position:absolute;
	z-index:999;
}
.goods-li{
    padding: 0 2% 0.1rem;
    width: 44.5%;
    margin-top: 0.3rem;
    border: 1px solid #ddd;
    background-color: #fff;
}
.goods-li dt{
 	width:100%;
 	margin-top:6px;
}
.goods-li dd img{
 	width:100%;
}
.good-list-name{
 	color: #333;
 	font-size: 0.65rem;
 	height: 2rem;
	overflow: hidden;
}
.goods-price{
	font-size: 0.65rem;
	margin: 0.1rem 0;
}
.goods-mesBox{
 	color: red;
}
.goods-ali{
 	color:#666666;
 	display: block;
 	font-size: 0.3rem;
 	text-decoration: none;
 	opacity: 0.5;
}
.goods-list{
	overflow:hidden;
}
.goods-list dl:nth-child(2n){
 	border-right:none;
 	float:right;
}
.goods-list dl:nth-child(2n-1){
 	border-left:none;
 	float:left;
 	margin-right:2%;
}

/* 图文列表中的删除按钮 */
.lui_media_cancel {
    bottom: 10px;
    padding: 5px;
    position: absolute;
    right: 10px;
}

/* 表单选项卡 */

.lui-select-tabsContent{display:none;}


/*表单对话框*/
.auto-dialog-box{
	position:fixed;
	width:100%;
	height:100%;
	left:0;
	top:0;
	z-index:100;
}
.auto-dialog-bg,.auto-dialog-content{
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
}
.auto-dialog-bg{
	background-color:#000;
	opacity:0.7;
	z-index:101;
}
.auto-dialog-content{
	z-index:102;
}
.auto-dialog-mes{
	background-color:#fff;
	border:1px solid #eee;
	width:95%;
	margin:30% auto 0;
}
.auto-form{
	margin-top:0.3rem;
}
.auto-dialogMes-title{
	padding:0.2rem;
	text-align:center;
	font-size:0.6rem;
	color:#000;
	border-bottom:1px solid #eee;
}
.auto-form-controls{
	display:flex;
	padding:0.2rem 3%;
}
.auto-form-controls>label{
	flex:1;
	font-size:0.5rem;
	line-height:1rem;
}
.auto-controls{
	flex:3;
}
.auto-controls>input{
	width:100%;
	border:1px solid #eee;
	display:block;
	height:1rem;
}
.auto-form-tip{
	font-size:0.5rem;
	color:#DD3040;
}
.auto-btnGroup{
	display:flex;
	margin-top:0.3rem;
	background-color:#fff;
	border-top:1px solid #eee;
	height:1.2rem;
}
.auto-btnGroup>a{
	flex:1;
	text-align:center;
	height:1.2rem;
	line-height:1.2rem;
	fotn-size:0.5rem;
}
.btn-for-cancel{
	color:#777;
	border-left:1px solid #eee;
	background-color:#f7f7f7;
}
.btn-for-sure{
	color:#DD3040;
}