@charset "utf-8";
/*初始化*/
html{ font-size: 10px;}
body,h1,h2,h3,h4,h5,h6,a,p,dl,div,dt,dd,ul,ol,li,select,table,tr,button,input,textarea,th,td {margin:0; padding:0;box-sizing: border-box;}
body{color:#333; font-family:"微软雅黑"; font-size: 14px; max-width: 750px; margin-left: auto; margin-right: auto;}
a{text-decoration:none;-webkit-tap-highlight-color:rgba(255,255,255,0);}
input,select,textarea{outline:none; -webkit-appearance: none;}
[type^="checkbox"]{ -webkit-appearance: checkbox;}
textarea{ resize:none}
input:focus{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-user-modify:read-write-plaintext-only;}
a:hover{color:#00a0e9; text-decoration: none;}
ul,dl{list-style-type:none;}
img,input{border:0;}
small,em,i{font-weight:normal; font-style:normal;}
li{list-style:none;}
p{word-wrap:break-word}
/*常用类*/
.fl{float: left;}
.fr{float: right;}
.clearfix::before ,.clearfix::after,.clearfix:before ,.clearfix:after{content: "";height: 0;line-height: 0;display: block;visibility: hidden;clear: both;}
.txt-hide{overflow: hidden; text-overflow: ellipsis; word-break: keep-all; white-space: nowrap; -o-text-overflow:ellipsis; -icab-text-overflow: ellipsis; -khtml-text-overflow: ellipsis; -moz-text-overflow: ellipsis; -webkit-text-overflow: ellipsis; }
.txt-hide2{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
.txt-hide3{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}
.tc{ text-align: center;}
.tl{ text-align: left;}
.tr{ text-align: right;}
.img-res{display:block; max-width:100%; height:auto;}
.table-box{display: table; text-align: center;}
.table-middle{display: table-cell; vertical-align: middle;}
.bgf5{ background: #F5F5F5;}
.mb15{ margin-bottom: 0.75rem;}
.mt10{ margin-top: 0.5rem;}
.plr30{ padding-left: 0.75rem; padding-right: 0.75rem;}
.mt30{ margin-top: 0.75rem;}
.pb20{ padding-bottom: 1rem;}
.pb10{ padding-bottom: 0.5rem;}
.mask-bg{position: fixed; width: 100%; height: 100%; background: rgba(0,0,0,.6); z-index: 99; top: 0; left: 0; display: none;}
.h60{ height: 3rem;}
.h50{ height: 2.5rem}
.bgh8{ height: 8px; width: 100%;}
.arrow{float: right; height: 14px; margin-left: 5px; transition: all .5s;}
.rotate{ transform: rotate(90deg);}
.main-input{position: absolute;overflow-y: scroll;-webkit-overflow-scrolling: touch;}
.h45{ height: 45px;}
.h40{ height: 40px;}
.bgh8{ height: 8px; background: #F5F5F5;}
.layout{ max-width: 750px; margin-left: auto; margin-right: auto;}
.mt-1{ margin-top: -1px;}
.col{ color: #db5658;}
.font16{ font-size: 16px;}
.col-green{ color: #007876;}
#load{ background: #fff url(../img/load.gif) no-repeat center center; position: fixed; z-index: 999; left: 0; top: 0; width: 100%; height: 100%;}
.mask {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .6);
z-index: 1;
top: 0;
left: 0;
}
.middle-box {
position: absolute;
top: 50%;
left: 0;
width: 100%;
transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
z-index: 99;
}
/*轮播图*/
.index-banner .swiper-pagination-bullet{ opacity: 1; background: transparent; border: 1px solid #4eabe4;}
.index-banner .swiper-container-horizontal > .swiper-pagination{ bottom: 5px;}
.index-banner .swiper-pagination-bullet-active{ background: #4eabe4; opacity: 1;}
/*头部*/
.head{ width: 100%; height: 40px; background-size: 100% 40px; position: fixed; top: 0; left: 0; z-index: 99;}
.head .layout{ width: 100%; position: relative; padding: 0 45px; background: url(../img/bg2.jpg) no-repeat;}
.head .item{width: 45px; height: 40px; position: absolute; top: 0; padding-top: 2px; }
.head .btn-left{left: 0; }
.head .item .icon{ height: 16px; display: block; margin: 2px auto 2px;}
.head p{ color: #FFFFFF; font-size: 12px; text-align: center;}
.head .btn-right{ right: 0;}
.head .cont{ width: 100%; height: 40px;}
.head .sel-box{ position: relative; padding: 5px 10px;}
.head .sel-box .form-txt{ width: 100%; height: 30px; background: #fff url(../img/icon7.png) no-repeat 10px center; background-size: 16px; border: 0; border-radius: 20px; padding-left: 35px; color: #333;}
/*尾部*/
.foot{ width: 100%; height: 45px; border-top: 1px solid #bfbfbf; background: #fff; position: fixed; z-index: 99; bottom: 0; left: 0;}
.foot-list{ width: 100%; height: 45px; display: flex;}
.foot-list li{ flex-grow: 1; text-align: center; -webkit-flex-grow: 1;}
.foot-list li.active a{ color: #db5658;}
.foot-list a{display: block; color: #999; font-size: 12px;}
.foot-list span{ display: block; height: 18px; width: 25px; margin: 5px auto 3px; background-size: auto 18px; background-position: center center; background-repeat: no-repeat;}
.icon-foot1{ background-image: url(../img/foot1.png); }
.icon-foot2{ background-image: url(../img/foot2.png); }
.icon-foot3{ background-image: url(../img/foot3.png); }
.icon-foot4{ background-image: url(../img/foot4.png); }
.active .icon-foot1{ background-image: url(../img/foot1_act.png); }
.active .icon-foot2{ background-image: url(../img/foot2_act.png); }
.active .icon-foot3{ background-image: url(../img/foot3_act.png); }
.active .icon-foot4{ background-image: url(../img/foot4_act.png); }
body,
h1,
h2,
h3,
h4,
h5,
h6,
a,
p,
dl,
div,
dt,
dd,
ul,
ol,
li,
select,
table,
button,
input,
textarea,
th,
td {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
color: #333;
font-family: "微软雅黑";
font-size: 14px;
}
a {
text-decoration: none;
color: #555;
}
input {
outline: none;
}
textarea {
resize: none
}
a:hover {
text-decoration: none;
}
ul,
dl {
list-style-type: none;
}
img {
border: 0;
}
small,
em,
i {
font-weight: normal;
font-style: normal;
}
li {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0
}
img,
input {
border: 0;
}
p {
word-wrap: break-word
}
/*常用类*/
.fl {
float: left;
}
.fr {
float: right;
}
.clearfix::before,
.clearfix::after,
.clearfix:before,
.clearfix:after {
content: "";
height: 0;
line-height: 0;
display: block;
visibility: hidden;
clear: both;
}
.txt-hide {
overflow: hidden;
text-overflow: ellipsis;
word-break: keep-all;
white-space: nowrap;
-o-text-overflow: ellipsis;
-icab-text-overflow: ellipsis;
-khtml-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
}
.txt-hide2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.txt-hide3 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.tc {
text-align: center;
}
.tl {
text-align: left;
}
.tr {
text-align: right;
}
.font30 {
font-size: 30px;
}
.font28 {
font-size: 28px;
}
.font26 {
font-size: 26px;
}
.font24 {
font-size: 24px;
}
.font22 {
font-size: 22px;
}
.font20 {
font-size: 20px;
}
.font18 {
font-size: 18px;
}
.font16 {
font-size: 16px;
}
.font14 {
font-size: 14px;
}
.font12 {
font-size: 12px;
}
.img-res {
display: block;
max-width: 100%;
height: auto;
}
.table-box {
display: table;
text-align: center;
}
.table-middle {
display: table-cell;
vertical-align: middle;
}
.list-disc {
list-style: disc inside;
}
.word-spacing {
word-spacing: 8px;
letter-spacing: 1px;
}
.goBackStyle {
background: url(../__PUBLIC__/gzh/img/goblck.png) no-repeat;
width: 50px;
height: 50px;
position: fixed;
background-size: 50px;
bottom: 25px;
right: 25px;
z-index: 999;
display: none;
}
.mt20 {
margin-top: 20px;
}
.mt30 {
margin-top: 30px;
}
.ml30 {
margin: 30px;
}
.fl {
float: left;
}
.fr {
float: right;
}
.clearfix::before,
.clearfix::after,
.clearfix:before,
.clearfix:after {
content: "";
height: 0;
line-height: 0;
display: block;
visibility: hidden;
clear: both;
}
.banner-swiper {
padding: 20rpx 25rpx;
}
.banner-swiper .swiperbox {
width: 100%;
height: 240rpx;
border-radius: 6px;
overflow: hidden;
}
.banner-swiper .slide-img {
width: 100%;
height: 240rpx;
display: block;
}
.bgcolor {
height: 140rpx;
}
.title {
padding: 15px 10px;
}
.title span {
height: 16px;
line-height: 16px;
border-left: 4px solid #00a0e9;
padding-left: 4px;
color: #333;
font-size: 14px;
font-weight: bold;
display: inline-block;
}
.title .fr {
font-size: 14px;
color: #00a0e9;
}
.title .arrow {
width: 7px;
height: 13px;
margin-top: 3px;
float: right;
margin-left: 5px;
}
.attr-list {
padding: 0 8px 15px;
}
.attr-list .attr-item {
/* width: 25%; */
width: 50%;
text-align: center;
/* padding: 0 2px;*/
float: left;
margin-bottom: 5px;
}
.attr-list .content,
.goods .box {
border: 1px solid #d3d5d6;
border-radius: 5px;
text-align: center;
font-size: 10px;
padding: 10px 0;
line-height: 1.8;
/* height: 80px; */
display: block;
}
.attr-list .content{
border-radius: 0;
}
.attr-list .content.active {
/*border-color: #63b5e7;*/
background-color: #fff;
}
.attr-list .content.active .price {
color: #f2837e;
}
.col-fd6550, .price {
color: #fd6550;
}
.attr-list .price,
.goods .price {
height: 22px;
line-height: 22px;
}
.attr-list .price span,
.goods .price span {
font-size: 18px;
}
.attr-list .name,
.goods .name {
color: #333;
font-size: 12px;
font-weight: bold;
}
.attr-list .date {
color: #999;
}
.attr-list .tit {
color: #333;
font-size: 14px;
}
.btn-slide {
position: fixed;
bottom: 0;
left: 0;
padding: 5px 10px;
width: 100%;
}
.btn-slide .btn {
font-size: 15px;
border-radius: 50px;
line-height: 45px;
height: 45px;
display: block;
text-align: center;
}
.btn-slide .btn::after {
display: none;
}
.buy-fixed .content {
background: #fff;
border-radius: 8px 8px 0 0;
padding: 10px;
}
.buy-fixed .top {
margin: 0 -2px;
}
.buy-fixed .goods {
width: 30%;
padding: 0 2px;
float: left;
}
.buy-fixed .info {
float: right;
width: 68%;
padding-top: 20px;
}
.buy-fixed .info .tips {
color: #333;
font-size: 14px;
line-height: 1.8;
}
.buy-fixed .info .date {
font-size: 12px;
color: #18c785;
}
.btn-close {
position: absolute;
right: 0;
top: 0;
padding: 6px;
}
.goods .name {
margin-bottom: 2px;
}
.cartbox {
padding: 20px 0 40px;
line-height: 25px;
}
.cartbox .cart {
float: right;
text-align: center;
}
.cart .btn {
width: 25px;
height: 25px;
line-height: 23px;
display: inline-block;
background-color: #f8f9fd;
color: #666;
font-size: 15px;
vertical-align: top;
padding: 0;
}
.cart .btn-reduce.active {
color: #ccc;
}
.cart .form-input {
display: inline-block;
height: 25px;
line-height: 25px;
width: 30px;
background-color: #f8f9fd;
color: #333;
vertical-align: top;
margin: 0 5px;
text-align: center;
}
.buy-fixed .btn-sub {
width: 100%;
height: 45px;
line-height: 45px;
font-size: 16px;
border-radius: 50px;
}
/*.bottom-box {
transform: translate3d(0, 100%, 0);
-webkit-transform: translate3d(0, 100%, 0);
transition: all 0.4s;
}
.fixed-box.active .bottom-box {
-webkit-transform: translate3d(0, 0, 0);
}*/
.explain {
text-align: center;
}
.explain .content {
width: 100%;
}
.explain .adimg {
width: 100%;
display: block;
}
.explain .imgbox {
padding-top: 15px;
font-size: 0;
display: block;
}
.explain .imgbox .bimg {
width: 5px;
}
.explain .close {
width: 30px;
height: 30px;
display: block;
margin: -2px auto 0;
}
.explain .middle-box {
transform: translate3d(0, -50%, 0);
}
.explain.active .middle-box {
}
.ios {
padding: 300rpx 0 0;
text-align: center;
}
.bgh20 {
height: 10px;
background-color: #f5f5f5;
}
.tab {
height: 40px;
line-height: 40px;
width: 100%;
background-color: #4eabe4;
z-index: 90;
position: fixed;
top: 0;
left: 0;
padding: 0 5%;
display: flex;
display: -webkit-flex;
}
.tab-item {
height: 40px;
float: left;
text-align: center;
font-size: 13px;
color: #bfdff3;
position: relative;
flex: 1;
}
.tab-item.active a {
color: #fff;
}
.tab-item.active::after {
content: '';
position: absolute;
width: 20px;
height: 2px;
left: 50%;
margin-left: -10px;
bottom: 2px;
background: #fff;
z-index: 80;
}
.tab2 .tab-item.active::after {
width: 50px;
height: 2px;
left: 50%;
margin-left: -25px;
bottom: 0;
background: #fff;
z-index: 80;
}
.tab-item a {
display: inline-block;
padding: 0 10px;
color: #bfdff3;
line-height: 32px;
height: 40px;
}
.h40 {
height: 40px;
}
.main {
padding: 10px 0 0;
}
.mask {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
z-index: 1;
top: 0;
left: 0;
}
.middle-box {
position: fixed;
top: 50%;
left: 0;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
z-index: 80;
width: 100%;
}
.fixed-box {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
height: 100%;
}
.btn-blue {
background: #4eabe4;
color: #fff;
}
.btn-yel {
background: #d7ae71;
color: #fff;
}
.bottom-box{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #fff;
z-index: 78;
}
input,select,textarea {
outline: none;
-webkit-appearance: none;
}