body.gray-bg{ background:#f3f3f3;}
.activitylist li{ background:#fff; padding:1rem; clear: both;}
.activitylist{ margin-top:1.2rem; padding:0; color:#646464;}
.activitylist .media-left{width:40%; max-width:30rem;}
.activitylist h5{ color:#000; font-size:1.6rem;}


.h50{ height:50px;}
.h16{ height:16px;}
.h10{ height:10px;}
.h20{ height:20px;}

.grid9 {
    margin-top:2rem;
    background-color: #fff;
    width: 100%;  
    border-top:1px solid #e5e5e5;
}

.flex-container {
    /*display: -webkit-flex;
    display: flex;*/

    width: 100%; 
     
}
.grid9 .flex-container>div {
    /*flex:1;*/

    text-align: center; 
    padding:1rem; 
    float:left;
    width:33%;
    
    border-bottom:1px solid #e5e5e5;
    border-right:1px solid #e5e5e5;
}  

.grid9 img{ width:80px; height:80px; padding:1rem;}
.grid9 a{ display:block;}


h4.title-hrbg {font-size: 1.3rem;position: relative; z-index:1; height: 4rem;line-height: 4rem;overflow: hidden;color: #888;text-align: center;margin-top: 4rem;}
h4.title-hrbg span {background: #fff;padding: 1rem .6rem;font-size: 1.5rem; z-index: 10;}
h4.title-hrbg hr { background:#e5e5e5; height: 1px;border: 0;position: absolute;left: 0;right: 0;top: 50%;margin-top: 1px;z-index: -1;}
h4.title-hrbg a{ background:#fff; display: block;width:120px; margin:0 auto;  }

.page-header{ margin:0; padding:0; border-bottom:1px solid #888; margin-bottom:1rem; background:#337ab7;color:#fff; }
.page-header h4.title{ font-size:1.6rem;  height:4rem; line-height: 4rem; margin:0; color:#fff; position: relative; }
.page-header .titleright{ position: absolute;right:1rem; top:0rem; text-align: right; color:#fff;  font-size:1.4rem;}
.page-header .titleleft{ position: absolute;left:1rem; top:0rem; text-align: left; color:#fff;  font-size:1.4rem;}

#qrcode{ margin-top:1rem;}

div.pagination {
    display: inline-block;
    padding: 0;
    margin: 0 auto; 
}
  
div.pagination  a {
    display: inline;
    color: black; 
    padding: 8px 16px;
    text-decoration: none;
}
div.pagination   a.active,div.pagination   a.disabled {
    background-color: #4CAF50;
    color: white;
}

div.pagination   a:hover:not(.active) {background-color: #ddd;}	
div.pagination   a {
    border: 1px solid #ddd; /* Gray */
}	

@media screen and (max-width: 750px) {

    .form-horizontal .control-label{ padding-right:0;}
    .form-horizontal .form-control-static{ padding:0;}
}

.help .media a h4{ color:#000;}
.help .media a  { color:#646464;}
.help .media .media-left img{width:10rem;}
.help .media{ border-bottom:1px solid #ccc;}

.help .card-subtitle{ border:1px solid #ccc; padding:1rem; border-radius: 0.5rem;}
.help .card img{ max-width:100%;}
 
.productlist h5{ font-weight:bold; }
.productlist strong{ color:#d82e17;font-size:1.6rem;}
.productlist del{ color:#ccc; padding-left:5px; }

.productdetail{ font-size:1.2rem; padding-bottom:6rem;}
.productdetail .imglist{ border-bottom:1px solid #f5f5f5;  padding-bottom:1rem;}
.proalert .proalertred{ float:left; margin-right:0.5rem; background:#d82e17;color:white; height: 2.5rem; line-height: 2.5rem; padding-left:0.5rem;}
.proalert .proalertred span{ font-weight: bold; display:block; float: right; background:yellow; color:#d82e17;height: 2.5rem; line-height:  2.5rem; padding:0 0.5rem;  margin-left:0.5rem; }

.prostore{ clear: both; height:3rem ; line-height:3rem; color:#646464;}
.protime{border-top:1rem solid #f5f5f5; line-height: 2rem; padding:1rem 0; clear: both; }
.proguize{border-top:1rem solid #f5f5f5;}
.proguizetitle { border-bottom:1px solid #f5f5f5; font-size:1.4rem; font-weight: bold; padding-bottom:1rem; padding-left:1.5rem;}


.footbuy { height:5rem; background:yellow; color:black;border-top:1rem solid #f5f5f5; }
.footbuy .p-market{ padding-left: 1.5rem;  height:4rem; line-height:4rem; float:left; font-size:1.4rem;  }
.footbuy .btnbuy{ border:0; margin:0; border-radius: 0; width:40% ;float:right;background:#d82e17; color:white;line-height:2.8rem;height:4rem; }

.footbuy .btnbuydisabled
{ 
background-color: #ccc;
color:#888;
}


body .layui-layer-content{   -webkit-overflow-scrolling: touch;
    overflow-y: scroll; }

.sywlayerclass .layui-layer-setwin .layui-layer-close2{ right:0px; top:-10px;}

.scroll-wrapper {  
    -webkit-overflow-scrolling: touch;  
    overflow-y: scroll;  
} 

.activitybtnlist{ position: fixed; bottom:0; left:0; right:0; width:100%; height:50px; background:#f4061e;
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  z-index: 19891016;
}
.activitybtnlist a{ border-left:1px solid #888; display: block; text-align:center; line-height:50px; color:#fff;

    -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;         /* OLD - Firefox 19- */  
    -webkit-flex: 1;          /* Chrome */
    -ms-flex: 1;              /* IE 10 */
    flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.activitybtnlist a:first-child{ border-left:0;}

.divgray  {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    
    filter: grayscale(100%);
	
    filter: gray;
 }

 .historytitle { padding:0 0 20px 0;}
 
.historytitle a{  color:gray; font-weight: bold;}
.historytitle .hover a{ color:#4679b2; border-bottom:2px solid #4679b2; padding:5px;}

.historycontent{ font-size:12px;}
.historycontent .media{ background:#fff; border-radius: 10px; margin-bottom:20px;}
.historycontent .media-heading{ font-size:16px; font-weight: bold;}
.historycontent .media-body{ padding:10px;}
.historycontent .media-object{width:80px;}