/*Vue闪屏问题*/
[v-cloak] {
    display: none;
}
/*定于字体*/
@font-face {
  font-family: 'WsGameFont';
  src: url('./fonts/造字工房乐真体.ttf');
}

.ws-font-game{
    font-family: 'WsGameFont', sans-serif;
}

page {
    /* margin: 0px; */
    /* background-color: #fefefe; */
    /* height: 100%; */
    font-size: 16px;
    /* line-height: 1.6; */
    height: 100%;
    /* display: flex !important; */
    /* flex-direction: column !important; */
    /* justify-content: space-between !important; */
}

/*tp5分页那 个样式*/
.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}
.pagination > li {
    display: inline;
}
.pagination > li > a,
.pagination > li > span {
    position: relative;
    float: left;
    padding: 6px 12px;
    line-height: 1.42857143;
    text-decoration: none;
    color: #ffffff;
    background-color: #75b9e6;
    border: 1px solid #3498da;
    margin-left: -1px;

    background-color: #fff;
    border: 1px solid #eee;
    color: #333;

}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
    margin-left: 0;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
    color: #ffffff;
    background-color: #4aa3de;
    border-color: #3498da;

    background-color: #009688;
    border-color: #00a697;

}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    z-index: 2;
    color: #ffffff;
    background-color: #3498da;
    border-color: #3498da;
    cursor: default;

    background-color: #009688;
    border-color: #00a697;
}
.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
    color: #ffffff;
    background-color: #b6daf2;
    border-color: #b6daf2;
    cursor: not-allowed;


    background-color: #FFFFFF;
    color: #d2d2d2;
    border-color: #eee;
}
.pagination-lg > li > a,
.pagination-lg > li > span {
    padding: 10px 16px;
    font-size: 18px;
}
.pagination-lg > li:first-child > a,
.pagination-lg > li:first-child > span {
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px;
}
.pagination-lg > li:last-child > a,
.pagination-lg > li:last-child > span {
    border-bottom-right-radius: 6px;
    border-top-right-radius: 6px;
}
.pagination-sm > li > a,
.pagination-sm > li > span {
    padding: 5px 10px;
    font-size: 12px;
}
.pagination-sm > li:first-child > a,
.pagination-sm > li:first-child > span {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
}
.pagination-sm > li:last-child > a,
.pagination-sm > li:last-child > span {
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
}

/* 背景白色 */
.body{
    background-color: #e90e0e;
    width: 100%;
    height: 100%;
}
/* 主要内容 */
.content{
    padding: 0 10px;
}
.content-non{
    margin:0 -10px
}

/* 轮播图 */
.swiper {
    height: 150px;
    width: 100%;
}
.swiper-image {
    height: 100%;
    width: 100%;
}
.slide-image{
    height: 100%;
    width: 100%;
}
.swiper-goods {
    height: 400px;
    width: 100%;
}

/* 横向排列 */
.rows {
    display: flex;
    flex-direction: row;
}

/* 文字底部对其 */
.rows-align-bottom {
	display: flex;
	flex-direction: row;
	align-items: baseline;
}

.rows-right {
	display: flex;
	flex-direction: row-reverse;
}

.rows-left {
	display: flex;
	flex-direction: row-reverse;
}

.rows-top {
	display: flex;
	flex-direction: column-reverse;
}

.rows-bottom {
	display: flex;
	flex-direction: column;
}

/* 纵向排列 */
.cols {
    display: flex;
    flex-direction: column;
}

/* 平铺 */
.box {
    display: flex;
    justify-content: space-between;
}
.box-h {
    display: flex;
    justify-content: space-between;
}

.box-v {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 横向排列 */
.rows-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

/* 左侧平铺 */
.box-wrap-start {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

/* 间距相同平铺 包括两端*/
.box-wrap-space-around {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

/* 间距相同平铺 两侧无边距*/
.box-wrap-space-between {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* 横向沾满 */
.full-width {
    width: 100%;
}

.full-height {
    height: 100%;
}

.full {
    width: 100%;
    height: 100%;
}

/* 文字中轴线对其 */
.base-line {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 剧中 */
.center {
    text-align: center;
}


.space-between {
    justify-content: space-between;
}
.text-align-center{
    text-align: center;
}
.text-align-left{
    text-align: left;
}
.text-align-right{
    text-align: right;
}

/* 居中 */
.text-center {
    text-align: center;
}




.text-xs{
    font-size: 10px;
}
.text-sm{
    font-size: 13px;
}
.text-df{
    font-size: 16px;
}
.text-md{
    font-size: 19px;
}
.text-lg{
    font-size: 22px;
}


.text-white{
    color: #FFF;
}

.text-white *{
    color: #FFF;
}

/* 文本垂直居中 */
.text-center-v {
    display: flex;
    align-items: center;
    /* justify-content: center; */
}

.text-center-h {
    display: flex;
    /* align-items: center; */
    justify-content: center;
}

.text-center-hv {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 强制文本不换行 */
.text-inline {
    line-height: 20px;
    height: 20px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* 文字自动换行 */
.text-auto{
    word-break:break-all;
}
/*文本省略号*/
.text-ellipsis{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

/* 头像*/
.avatar {
    background-color: #d0d0d0;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
}
/* 头像*/
.avatar-fission {
    background-color: #d0d0d0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
}

/* 头像*/
.avatar-sm {
    background-color: #d0d0d0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
}

/* 图片背景色 */
.img-bg{
    background-color: #d0d0d0;
}

.img {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    overflow: hidden;
}

.img-navi {
    width: 25px;
    height: 25px;
    overflow: hidden;
}


.mm {
    margin: 10px;
}

.mh {
    margin-left: 10px;
    margin-right: 10px;
}

.mv {
    margin-top: 10px;
    margin-bottom: 10px;
}

.ml {
    margin-left: 10px;
}

.mr {
    margin-right: 10px;
}

.mt {
    margin-top: 10px;
}

.mb {
    margin-bottom: 10px;
}

.mm-xs {
    margin: 2px;
}

.mh-xs {
    margin-left: 2px;
    margin-right: 2px;
}

.mv-xs {
    margin-top: 2px;
    margin-bottom: 2px;
}

.ml-xs {
    margin-left: 2px;
}

.mr-xs {
    margin-right: 2px;
}

.mt-xs {
    margin-top: 2px;
}

.mb-xs {
    margin-bottom: 2px;
}

.mm-sm {
    margin: 5px;
}

.mh-sm {
    margin-left: 5px;
    margin-right: 5px;
}

.mv-sm {
    margin-top: 5px;
    margin-bottom: 5px;
}

.ml-sm {
    margin-left: 5px;
}

.mr-sm {
    margin-right: 5px;
}

.mt-sm {
    margin-top: 5px;
}

.mb-sm {
    margin-bottom: 5px;
}

.mm-md {
    margin: 15px;
}

.mh-md {
    margin-left: 15px;
    margin-right: 15px;
}

.mv-md {
    margin-top: 15px;
    margin-bottom: 15px;
}

.ml-md {
    margin-left: 15px;
}

.mr-md {
    margin-right: 15px;
}

.mt-md {
    margin-top: 15px;
}

.mb-md {
    margin-bottom: 15px;
}

.mm-lg {
    margin: 20px;
}

.mh-lg {
    margin-left: 20px;
    margin-right: 20px;
}

.mv-lg {
    margin-top: 20px;
    margin-bottom: 20px;
}

.ml-lg {
    margin-left: 20px;
}

.mr-lg {
    margin-right: 20px;
}

.mt-lg {
    margin-top: 20px;
}

.mb-lg {
    margin-bottom: 20px;
}

/* xs sm md lg */
.pp{
    padding: 10px;
}
.ph{
    padding-left: 10px;
    padding-right: 10px;
}
.pv{
    padding-top: 10px;
    padding-bottom: 10px;
}
.pl{
    padding-left: 10px;
}
.pr{
    padding-right: 10px;
}
.pt{
    padding-top: 10px;
}
.pb{
    padding-bottom: 10px;
}

.pp-xs{
    padding: 2px;
}
.ph-xs{
    padding-left: 2px;
    padding-right: 2px;
}
.pv-xs{
    padding-top: 2px;
    padding-bottom: 2px;
}
.pl-xs{
    padding-left: 2px;
}
.pr-xs{
    padding-right: 2px;
}
.pt-xs{
    padding-top: 2px;
}
.pb-xs{
    padding-bottom: 2px;
}

.pp-sm{
    padding: 5px;
}
.ph-sm{
    padding-left: 5px;
    padding-right: 5px;
}
.pv-sm{
    padding-top: 5px;
    padding-bottom: 5px;
}
.pl-sm{
    padding-left: 5px;
}
.pr-sm{
    padding-right: 5px;
}
.pt-sm{
    padding-top: 5px;
}
.pb-sm{
    padding-bottom: 5px;
}

.pp-md{
    padding: 15px;
}
.ph-md{
    padding-left: 15px;
    padding-right: 15px;
}
.pv-md{
    padding-top: 15px;
    padding-bottom: 15px;
}
.pl-md{
    padding-left: 15px;
}
.pr-md{
    padding-right: 15px;
}
.pt-md{
    padding-top: 15px;
}
.pb-md{
    padding-bottom: 15px;
}

.pp-lg{
    padding: 20px;
}
.ph-lg{
    padding-left: 20px;
    padding-right: 20px;
}
.pv-lg{
    padding-top: 20px;
    padding-bottom: 20px;
}
.pl-lg{
    padding-left: 20px;
}
.pr-lg{
    padding-right: 20px;
}
.pt-lg{
    padding-top: 20px;
}
.pb-lg{
    padding-bottom: 20px;
}

/* 最上层 */
.top{
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 100;
    /* background-color: #f0f0f0e0; */
    /* background-color:rgba(240,240,240,0.9); */
}

.bottom{
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 100;
}

/* 商品价格 */
.text-price{
    color: #e90e0e;
}
.text-key{
    color: #333333;
}
.text-value{
    color: #666666;
}

.text-pricepricepricepriceprice{
    color: #f39200;
}

/*a{*/
/*text-decoration:none;*/
/*color:#000000;*/
/*}*/

.btn--action{
    color: #717171;
    background-color: #ecedee;
    border-color: #f8f9fa;
}

.hidden {
    display: none !important
}

/*排序角标*/
.text-order{
    font-size: 25px;
}

.text-color-1 {
    color: #111111;
}

.text-color-2 {
    color: #222222;
}

.text-color-3 {
    color: #333333;
}

.text-color-4 {
    color: #444444;
}

.text-color-5 {
    color: #555555;
}

.text-color-6 {
    color: #666666;
}

.text-color-7 {
    color: #777777;
}

.text-color-8 {
    color: #888888;
}

.text-color-9 {
    color: #999999;
}

.text-color-a {
    color: #aaaaaa;
}

.text-color-b {
    color: #bbbbbb;
}

.text-color-c {
    color: #cccccc;
}

.text-color-d {
    color: #dddddd;
}

.text-color-e {
    color: #eeeeee;
}

.text-color-f {
    color: #ffffff;
}

.input-radius {
    border-radius: 20px;

}

.text-black{
    color: #000;
}

.text-bold{
    font-weight: bold;
}
.text-italic{
    font-style: italic;
}

.text-bolder{
    font-weight: bolder;
}

.text-price{
    color: #FF402E;
}

.relative{
    position: relative;
}
.absolute{
    position: absolute;
}
.absolute-0{
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.cols-1,
.cols-2,
.cols-3,
.cols-4,
.cols-5,
.cols-6,
.cols-7,
.cols-8,
.cols-9,
.cols-10,
.cols-11,
.cols-12 {
    float: left;
}

.cols-12 {
    width: 100%;
}

.cols-11 {
    width: 91.66666667%;
}

.cols-10 {
    width: 83.33333333%;
}

.cols-9 {
    width: 75%;
}

.cols-8 {
    width: 66.66666667%;
}

.cols-7 {
    width: 58.33333333%;
}

.cols-6 {
    width: 50%;
}

.cols-5 {
    width: 41.66666667%;
}

.cols-4 {
    width: 33.33333333%;
}

.cols-3 {
    width: 25%;
}

.cols-2 {
    width: 16.66666667%;
}

.cols-1 {
    width: 8.33333333%;
}

.bg-white {
    background: #FFFFFF;
}
.bg-black {
    background: #000000;
}


.line-wx {
    width: 100%;
    background: #F5F5F5;
    height: 5px;
}

.line-wx-sm {
    width: 100%;
    background: #F5F5F5;
    height: 2px;
}

.line-wx-xs {
    width: 100%;
    background: #F5F5F5;
    height: 1px;
}

.line-wx-md {
    width: 100%;
    background: #F5F5F5;
    height: 10px;
}
.line-wx-15 {
    width: 100%;
    background: #F5F5F5;
    height: 15px;
}

.line-wx-lg {
    width: 100%;
    background: #F5F5F5;
    height: 20px;
}
.line-wx-bg{
    background: #F5F5F5;
}

/* 文本不换行 */
.inline {
    display: inline;
}

.text-underline{text-decoration:underline}

.text-left-title{
    font-size: 18px;
}

.text-1 { font-size: 1px; }
.text-2 { font-size: 2px; }
.text-3 { font-size: 3px; }
.text-4 { font-size: 4px; }
.text-5 { font-size: 5px; }
.text-6 { font-size: 6px; }
.text-7 { font-size: 7px; }
.text-8 { font-size: 8px; }
.text-9 { font-size: 9px; }
.text-10 { font-size: 10px; }
.text-11 { font-size: 11px; }
.text-12 { font-size: 12px; }
.text-13 { font-size: 13px; }
.text-14 { font-size: 14px; }
.text-15 { font-size: 15px; }
.text-16 { font-size: 16px; }
.text-17 { font-size: 17px; }
.text-18 { font-size: 18px; }
.text-19 { font-size: 19px; }
.text-20 { font-size: 20px; }
.text-21 { font-size: 21px; }
.text-22 { font-size: 22px; }
.text-23 { font-size: 23px; }
.text-24 { font-size: 24px; }
.text-25 { font-size: 25px; }
.text-26 { font-size: 26px; }
.text-27 { font-size: 27px; }
.text-28 { font-size: 28px; }
.text-29 { font-size: 29px; }
.text-30 { font-size: 30px; }
.text-31 { font-size: 31px; }
.text-32 { font-size: 32px; }
.text-33 { font-size: 33px; }
.text-34 { font-size: 34px; }
.text-35 { font-size: 35px; }
.text-36 { font-size: 36px; }
.text-37 { font-size: 37px; }
.text-38 { font-size: 38px; }
.text-39 { font-size: 39px; }
.text-40 { font-size: 40px; }
.text-41 { font-size: 41px; }
.text-42 { font-size: 42px; }
.text-43 { font-size: 43px; }
.text-44 { font-size: 44px; }
.text-45 { font-size: 45px; }
.text-46 { font-size: 46px; }
.text-47 { font-size: 47px; }
.text-48 { font-size: 48px; }
.text-49 { font-size: 49px; }
.text-50 { font-size: 50px; }
.text-51 { font-size: 51px; }
.text-52 { font-size: 52px; }
.text-53 { font-size: 53px; }
.text-54 { font-size: 54px; }
.text-55 { font-size: 55px; }
.text-56 { font-size: 56px; }
.text-57 { font-size: 57px; }
.text-58 { font-size: 58px; }
.text-59 { font-size: 59px; }
.text-60 { font-size: 60px; }
.text-61 { font-size: 61px; }
.text-62 { font-size: 62px; }
.text-63 { font-size: 63px; }
.text-64 { font-size: 64px; }
.text-65 { font-size: 65px; }
.text-66 { font-size: 66px; }
.text-67 { font-size: 67px; }
.text-68 { font-size: 68px; }
.text-69 { font-size: 69px; }
.text-70 { font-size: 70px; }
.text-71 { font-size: 71px; }
.text-72 { font-size: 72px; }
.text-73 { font-size: 73px; }
.text-74 { font-size: 74px; }
.text-75 { font-size: 75px; }
.text-76 { font-size: 76px; }
.text-77 { font-size: 77px; }
.text-78 { font-size: 78px; }
.text-79 { font-size: 79px; }
.text-80 { font-size: 80px; }
.text-81 { font-size: 81px; }
.text-82 { font-size: 82px; }
.text-83 { font-size: 83px; }
.text-84 { font-size: 84px; }
.text-85 { font-size: 85px; }
.text-86 { font-size: 86px; }
.text-87 { font-size: 87px; }
.text-88 { font-size: 88px; }
.text-89 { font-size: 89px; }
.text-90 { font-size: 90px; }
.text-91 { font-size: 91px; }
.text-92 { font-size: 92px; }
.text-93 { font-size: 93px; }
.text-94 { font-size: 94px; }
.text-95 { font-size: 95px; }
.text-96 { font-size: 96px; }
.text-97 { font-size: 97px; }
.text-98 { font-size: 98px; }
.text-99 { font-size: 99px; }
.text-100 { font-size: 100px; }


.bg-mask{
    background: #00000099;
}
.img-arrow{
    color: #C7C6CB;width: 20px;height: 20px;
}

.img-menu{
    color: #2D2D2D;width: 30px;height: 30px;
}

.btn-option {
    background: #F4F4F4;
    color: #333;
    border-radius: 50px;
    padding: 0px 8px;
    border: none;
}
.btn-option-action {
    background-image: linear-gradient(to right, #067d15, #797e0b);
    color: #FFF;
}
.btn-pay-v {
    padding: 8px 30px;
}
.input-none{
    outline-style: none ;
    border: 0px;
}

.text-bottom {
    align-self: flex-end;
}

.text-end {
    align-self: flex-end;
}

.btn-none {
	background: none;
	padding: 0;
	margin: 0;
	border-radius: 0;
	line-height:1 ;
	font-weight: normal;
    border: none;
}

.btn-none::after {
	border: none;
}



.rotate-0{
	transform: rotate(0deg);
}
.rotate-90{
	transform: rotate(90deg);
}
.rotate-180{
	transform: rotate(180deg);
}
.rotate-270{
	transform: rotate(270deg);
}