.public-banner {
    margin-top: 20px;
}

.public-banner .fl .swiper-container {
    position: relative;
    height: 380px;
    background-color: #fff;
    box-shadow: 0 0 10px rgb(0 0 0 / 5%);
    border-radius: 6px;
    overflow: hidden;
}

.public-banner .fl .swiper-container .swiper-slide {
    width: 100%;
    height: 380px;
}

.public-banner .fl .swiper-container .swiper-slide a.swiper-img {
    display: block;
    width: 100%;
    height: 100%;
}

.public-banner .fl .swiper-container .swiper-slide a.swiper-img img {
    width: 100%;
    height: 100%;
}

.public-banner .fl .swiper-container .swiper-pagination {
    text-align: left;
    text-indent: 20px;
}

.public-banner .fl .swiper-container .swiper-pagination-bullet {
    width: 60px;
    height: 5px;
    border-radius: 2px;
    background-color: #fff;
}

.public-banner .fl .swiper-container .swiper-pagination-bullet-active {
    background-color: #fff;
}

.public-user {
    width: 100%;
    height: 380px;
    position: relative;
    background-color: #fff;
    box-shadow: 0 0 10px rgb(0 0 0 / 5%);
    border-radius: 6px;
    overflow: hidden;
}

.public-banner .fr .public-user .welcome {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.public-banner .fr .public-user .welcome .user-portrait {
    width: 80px;
    height: 80px;
    margin-top: 30px;
    border-radius: 50px;
    background-color: #fff;
    background-image: url(../img/portrait.png);
    background-repeat: no-repeat;
    background-size: 100%;
    box-shadow: 0 0 20px rgb(0 0 0 / 8%);
}

.public-banner .fr .public-user .welcome .user-text {
    font-size: 14px;
    margin-top: 15px;
    color: #333;
}

.public-banner .fr .public-user .welcome .buts {
    width: 260px;
    display: flex;
    justify-content: space-evenly;
    margin-top: 15px;
}

.public-banner .fr .public-user .welcome .buts a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 110px;
    height: 35px;
    font-size: 14px;
    color: #FF9800;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #FF9800;
}

.public-banner .fr .public-user .welcome .buts a:hover {
    background: #FF9800;
    color: #fff;
}

.public-banner .fr .public-user .welcome .buts a:nth-child(2) {
    background-color: #ff5722;
    background-image: linear-gradient(to right, #ff9800 , #ff5722);
    color: #fff;
    border: 0;
}

.public-banner .fr .public-user .welcome .buts a:nth-child(2):hover {
    background: #ff5722;
}

.public-banner .fr .public-user .welcome .icons {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 152px;
    margin-top: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    justify-content: center;
}

.public-banner .fr .public-user .welcome .icons .tit {
    font-size: 14px;
    color: #FF9800;
    width: 100%;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
    position: relative;
}

.public-banner .fr .public-user .welcome .icons .tit:after {
    position: absolute;
    content: '';
    top: -6px;
    right: 120px;
    width: 32px;
    height: 32px;
    background: url("../img/indexusertiticon.png") no-repeat;
    background-size: 100%;
    opacity: .4;
}

.public-banner .fr .public-user .welcome .icons .tit:before {
    position: absolute;
    content: '';
    top: -6px;
    left: 120px;
    width: 32px;
    height: 32px;
    background: url("../img/indexusertiticon.png") no-repeat;
    background-size: 100%;
    opacity: .4;
}

.public-banner .fr .public-user .welcome .icons .wrap {
    width: 280px;
    display: flex;
    flex-wrap: wrap;
}

.public-banner .fr .public-user .welcome .icons .item {
    width: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 7px 0;
}

.public-banner .fr .public-user .welcome .icons .item i {
    width: 25px;
    height: 25px;
    background-image: url('../img/indexusericon.png');
    background-repeat: no-repeat;
    background-size: 100px;
}

.public-banner .fr .public-user .welcome .icons .item:nth-child(2) i {
    background-position: -25px;
}

.public-banner .fr .public-user .welcome .icons .item:nth-child(3) i {
    background-position: -50px;
}

.public-banner .fr .public-user .welcome .icons .item:nth-child(4) i {
    background-position: -75px;
}

.public-banner .fr .public-user .welcome .icons .item p {
    font-size: 12px;
    margin-left: 6px;
    line-height: 25px;
    color: #666;
}

.public-banner .fr .public-user .logged {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
}

.public-banner .fr .public-user .logged .user-portrait {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgb(0 0 0 / 10%);
}

.public-banner .fr .public-user .logged .user-portrait img {
    width: 100%;
    height: 100%;
    background: #fff;
}

.public-banner .fr .public-user .logged .username {
    margin-top: 20px;
    color: #333;
}

.public-banner .fr .public-user .logged .userinfo {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10px;
    font-size: 14px;
    padding-bottom: 30px;
    border-bottom: 1px solid #efefef;
}

.public-banner .fr .public-user .logged .userinfo .userid {
    background: #fff2e0;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 14px;
    color: #ff5722;
    margin-right: 5px;
}

.public-banner .fr .public-user .logged .userinfo .uservip {
    color: #fff;
    background-color: #ff5722;
    background-image: linear-gradient(to right, #ff9800 , #ff5722);
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 14px;
    margin-left: 5px;
}

.public-banner .fr .public-user .logged .icons {
    padding-top: 30px;
    width: 100%;
    height: 152px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
}

.public-banner .fr .public-user .logged .icons .item {
    width: 160px;
    height: 40px;
    font-size: 14px;
    color: #fff;
    background-color: #ff5722;
    background-image: linear-gradient(to right, #ff9800 , #ff5722);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.public-banner .fr .public-user .logged .icons .item:hover {
    background: #ff9800;
}

.public-banner .fr .public-user .logged .icons .item:nth-child(2) {
    color: #333;
    background: #fff;
    border: 1px solid #ccc;
    margin-top: 20px;
}

.public-banner .fr .public-user .logged .icons .item:nth-child(2):hover {
    color: #FF9800;
    border-color: #FF9800;
}

.public-index-list {
    margin-top: 20px;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.public-index-list.fixed {
    justify-content: flex-end;
}

.public-index-list-nav {
    width: 100%;
}

.public-index-list .public-index-list-nav-wrap {
    padding: 10px 5px;
    background: #fff;
    border-radius: 6px;
}

.public-index-list.fixed .public-index-list-nav-wrap {
    position: fixed;
    top: 0;
    box-shadow: 0 0 20px rgb(0 0 0 / 10%);
}

.public-index-list-nav .list-nav-title {
    font-size: 24px;
    margin-bottom: 16px;
    text-indent: 48px;
    position: relative;
}

.public-index-list-nav .list-nav-title:after {
    position: absolute;
    content: '';
    top: 4px;
    left: 10px;
    width: 32px;
    height: 32px;
    background: url("../img/indexusertiticon.png") no-repeat;
    background-size: 100%;
}

.public-index-list-nav .list-nav-wrap {
    width: 100%;
    display: flex;
    flex-flow: wrap;
}

.public-index-list-nav .list-nav-wrap .item {
    padding: 6px 10px;
    margin: 5px 10px;
    color: #333;
    border-radius: 20px;
    cursor: pointer;
    transition: .3s;
}

.public-index-list-nav .list-nav-wrap .item.this,
.public-index-list-nav .list-nav-wrap .item:hover {
    color: #fff;
    background-color: #ff5722;
    background-image: linear-gradient(to right, #ff9800 , #ff5722);
}

.public-index-list-nav .list-nav-dd-wrap {
    width: 100%;
    margin-top: 10px;
    padding: 0 10px;
    display: none;
}

.public-index-list-nav .list-nav-dd-wrap.ing {
    display: block;
}

.public-index-list-nav .list-nav-dd-title {
    font-size: 18px;
    text-indent: 16px;
    position: relative;
}

.public-index-list-nav .list-nav-dd-title:after {
    position: absolute;
    content: '';
    top: 4px;
    left: 0;
    width: 6px;
    height: 20px;
    color: #fff;
    background-color: #ff5722;
    background-image: linear-gradient(to right, #ff9800 , #ff5722);
    border-radius: 2px;
    box-shadow: 4px 0 0 rgb(255 152 0 / 35%);
}

.public-index-list-nav .list-nav-dd-wrapper {
    width: 100%;
    display: flex;
    flex-flow: wrap;
    margin-top: 10px;
}

.list-nav-dd-item {
    padding: 0 5px;
    margin: 5px 10px;
    cursor: pointer;
}

.list-nav-dd-item:hover,
.list-nav-dd-item.this {
    color: #FF9800;
}

.public-index-list-wrap {
    width: calc(100% + 20px);
    margin: 0 -10px;
    overflow-x: auto;
}

.public-index-list-wrap .wrap {
    display: flex;
    flex-flow: wrap;
    align-content: flex-start;
}

.public-index-list-wrap .item {
    width: calc(100% / 6);
    height: 335px;
    padding: 10px;
}

.public-index-list-wrap .item a {
    display: flex;
    flex-direction: column;
    padding: 15px;
    background-color: #fff;
}

.public-index-list-wrap .item .pic {
    width: 170px;
    height: 170px;
}

.public-index-list-wrap .item .pic img {
    width: 100%;
    height: 100%;
    background-color: #fff7f5;
    border-radius: 4px;
}

.public-index-list-wrap .item .title {
    margin-top: 6px;
    width: 100%;
    height: 50px;
    font-size: 15px;
    line-height: 25px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.public-index-list-wrap .item .money {
    margin-top: 4px;
    height: 30px;
    line-height: 30px;
    font-size: 18px;
    color: #FF9800;
}

.public-index-list-wrap .item .label {
    display: flex;
    margin-top: 4px;
}

.public-index-list-wrap .item .label .mode {
    display: flex;
    padding: 0 5px;
    height: 22px;
    font-size: 12px;
    align-items: center;
    color: #fff;
    background-color: #ff5722;
    background-image: linear-gradient(to right, #ff9800 , #ff5722);
    border-radius: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-index-list-wrap .item .label .stock {
    display: flex;
    padding: 0 5px;
    height: 22px;
    font-size: 12px;
    align-items: center;
    color: #ff9800;
    background-color: #fff2e0;
    border-radius: 4px;
    margin-left: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-index-list-wrap .GetGoodsList-animation,
.public-index-list-wrap .GetGoodsList-footer {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7a7a7a;
}

.public-shoplist {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 20px;
    background: #fff;
    box-shadow: 0 0 10px rgb(0 0 0 / 5%);
    border-radius: 8px;
    display: flex;
    flex-flow: wrap;
    align-content: flex-start;
}

.public-shoplist .item {
    width: calc(100% / 6);
    height: 315px;
    padding: 10px;
}

.public-shoplist .item a {
    display: flex;
    flex-direction: column;
    padding: 15px;
    background-color: #f7f7f7;
}

.public-shoplist .item .pic {
    width: 160px;
    height: 160px;
}

.public-shoplist .item .pic img {
    width: 100%;
    height: 100%;
    background-color: #2a2a2a;
    border-radius: 4px;
}

.public-shoplist .item .title {
    margin-top: 6px;
    width: 100%;
    height: 50px;
    font-size: 15px;
    line-height: 25px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.public-shoplist .item .money {
    margin-top: 4px;
    height: 30px;
    line-height: 30px;
    font-size: 18px;
    color: #ffe0b0;
}

.public-shoplist .item .label {
    display: flex;
    margin-top: 4px;
}

.public-shoplist .item .label .mode {
    display: flex;
    padding: 0 5px;
    height: 22px;
    font-size: 12px;
    align-items: center;
    color: #766756;
    background-color: #fdc890;
    border-radius: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-shoplist .item .label .stock {
    display: flex;
    padding: 0 5px;
    height: 22px;
    font-size: 12px;
    align-items: center;
    color: #fdc890;
    background-color: #35353c;
    border-radius: 4px;
    margin-left: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-buy {
    margin-top: 20px;
}

.public-buy-buy {
    width: 100%;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgb(0 0 0 / 5%);
    display: flex;
    justify-content: space-between;
}

.public-buy-left {
    width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

.public-buy-left img {
    width: 400px;
    height: 400px;
    border-radius: 4px;
}

.public-buy-left .goods-id-sales {
    margin-top: 20px;
    width: 100%;
    display: flex;
}

.public-buy-left .goods-id-sales .item {
    display: flex;
    padding: 0 10px;
    height: 30px;
    font-size: 14px;
    color: #666;
    background-color: #f7f7f7;
    align-items: center;
    border-radius: 4px;
    margin-right: 10px;
}

.public-buy-right {
    width: calc(100% - 440px);
    overflow: hidden;
}

.public-buy-right h1.title {
    font-size: 28px;
    color: #333;
    line-height: 1.5;
}

.public-buy-right .label {
    margin-top: 20px;
    display: flex;
}

.public-buy-right .label .mode {
    display: flex;
    padding: 0 14px;
    height: 36px;
    font-size: 14px;
    color: #fff;
    align-items: center;
    border-radius: 4px;
    margin-right: 10px;
}

.public-buy-right .label .mode.z1 {
    background-color: #0c63e4;
}

.public-buy-right .label .mode.z2 {
    background-color: #fc5a85;
}

.public-buy-right .label .bq {
    display: flex;
    padding: 0 14px;
    height: 36px;
    font-size: 14px;
    align-items: center;
    border-radius: 4px;
    margin-right: 10px;
}

.public-buy-right .label .bq:nth-child(2) {
    background-color: #dcf2f5;
    color: #00bcd4;
}

.public-buy-right .label .bq:nth-child(3) {
    background-color: #ffebee;
    color: #f44336;
}

.public-buy-right .label .bq:nth-child(4) {
    background-color: #f3e5f5;
    color: #9c27b0;
}

.public-buy-right .money {
    margin-top: 20px;
    padding: 20px;
    background-color: #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.public-buy-right .money .fl,
.public-buy-right .money .fr {
    display: flex;
    align-items: center;
}

.public-buy-right .money .timelimit {
    display: flex;
    padding: 0 10px;
    height: 30px;
    font-size: 14px;
    background-color: #f44336;
    color: #fff;
    align-items: center;
    border-radius: 4px;
    margin-right: 10px;
}

.public-buy-right .money .price {
    font-size: 14px;
    display: flex;
    align-items: center;
}

.public-buy-right .money .price em {
    font-size:32px;
    color: #f44336;
}

.public-buy-right .money .price span {
    font-size: 20px;
    color: #f44336;
}

.public-buy-right .money .costprice {
    margin-left: 40px;
    color: #999;
    text-decoration: line-through;
}

.public-buy-right .money .fr {
    display: flex;
}

.public-buy-right .money .fr .item {
    text-indent: 10px;
    color: #666;
    font-size: 14px;
    display: flex;
    align-items: center;
    margin-left: 20px;
}

.public-buy-right .money .fr .item i {
    display: block;
    width: 30px;
    height: 30px;
    background: url("../img/buy-service.png") no-repeat;
    background-color: #f7f7f7;
    background-size: 90px;
}

.public-buy-right .money .fr .item:nth-child(2) i {
    background-position: -30px;
}

.public-buy-right .money .fr .item:nth-child(3) i {
    background-position: -60px;
}

.public-buy-right .tips {
    margin-top: 20px;
    color: #666;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: center;
}

.public-buy-right .tips i {
    width: 12px;
    height: 12px;
    border-radius: 10px;
    border: 2px solid #ff5722;
    background-color: #fff;
    margin-right: 10px;
}

.public-buy-right .tips span {
    color: #ff5722;
    margin: 0 5px;
    cursor: pointer;
}

.public-buy-right .buybut {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 280px;
    height: 50px;
    font-size: 18px;
    background-color: #ff5722;
    background-image: linear-gradient(to right, #ff9800 , #ff5722);
    color: #fff;
    border-radius: 25px;
}

.public-buy-right .buybut:hover {
    background: #ff9800;
}

.public-buy-right .buybut.nos {
    background-color: #16161a;
    border: 1px solid #25252c;
    color: #767676;
    font-size: 14px;
}

.public-buy-info {
    margin-top: 20px;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 0 10px rgb(0 0 0 / 5%);
    border-radius: 6px;
    overflow: hidden;
}

.public-buy-info .title {
    width: 100%;
    height: 40px;
    color: #ff5722;
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-bottom: 1px dashed #efefef;
}

.public-buy-info .body {
    padding: 20px;
    line-height: 1.5;
    color: #333;
}

.public-buy-info .body a {
    color: #ff5722;
}

.public-buy-info .body img {
    max-width: 100%;
}

.public-createorder {
    margin: 40px auto 80px;
    display: flex;
    flex-flow: wrap;
    width: 840px;
    justify-content: center;
}

.public-createorder-info {
    width: 100%;
    height: fit-content;
    padding: 20px;
    background: #fff;
    box-shadow: 0 0 10px rgb(0 0 0 / 5%);
    border-radius: 8px;
}

.public-createorder-info .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.public-createorder-info .title {
    font-size: 24px;
    color: #ff5722;
}

.public-createorder-info .info {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
}

.public-createorder-info .info .fl {
    width: 120px;
    height: 120px;
}

.public-createorder-info .info .fl img {
    width: 100%;
    height: 100%;
    border-radius: 6px;
}

.public-createorder-info .info .fr {
    width: calc(100% - 140px);
}

.public-createorder-info .info .fr .fr-title {
    font-size: 18px;
    line-height: 1.5;
}

.public-createorder-info .info .fr .fr-bq {
    margin-top: 16px;
    display: flex;
    align-items: center;
}

.public-createorder-info .info .fr .fr-money {
    color: #ff5722;
    font-size: 24px;
}

.public-createorder-info .info .fr .fr-type {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 30px;
    color: #03a9f4;
    background-color: #e1f5fe;
    border-radius: 4px;
    margin-left: 10px;
}

.public-createorder-order {
    width: 100%;
    margin-top: 20px;
    padding: 20px;
    background: #fff;
    box-shadow: 0 0 10px rgb(0 0 0 / 5%);
    border-radius: 8px;
}

.public-createorder-order .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.public-createorder-order .top .title {
    font-size: 24px;
    color: #ff5722;
}

.public-createorder-order .top .tips {
    display: flex;
    align-items: center;
}

.public-createorder-order .top .tips span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 280px;
    height: 30px;
    font-size: 12px;
    color: #ff5722;
    background-color: #fbe9e7;
    border-radius: 15px 0 0 15px;
    margin-right: -8px;
}

.public-createorder-order .top .tips em {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    color: #fff;
    background-color: #ff5722;
    background-image: linear-gradient(to right, #ff9800 , #ff5722);
    border-radius: 25px;
}

.public-createorder-order .top .tips em i {
    font-size: 24px;
}

.public-createorder-order .order {
    margin-top: 20px;
}

.public-createorder-order .order .item {
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.public-createorder-order .order .item span {
    width: 120px;
    font-size: 14px;
    color: #666;
}

.public-createorder-order .order .item .fr {
    width: calc(100% - 120px);
}

.public-createorder-order .order .item input.fr {
    height: 35px;
    border: 1px solid rgb(0 0 0 / 0%);
    background-color: #f7f7f7;
    color: #333;
    border-radius: 5px;
    font-size: 14px;
    text-indent: 10px;
    transition: .3s;
}

.public-createorder-order .order .item input.fr:focus {
    border: 1px solid rgb(0 0 0 / 5%);
}

.public-createorder-order .order .item .money {
    font-size: 14px;
    color: #ff0000;
    font-weight: bold;
}


.public-createorder-order .order .item .order-pay-type-header {
    width: 100%;
    height: 30px;
    display: flex;
}

.public-createorder-order .order .item .order-pay-type-header-item {
    display: flex;
    padding: 0 12px;
    height: 30px;
    align-items: center;
    font-size: 14px;
    color: #666;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: .3s;
}

.public-createorder-order .order .item .order-pay-type-header-item.hover,
.public-createorder-order .order .item .order-pay-type-header-item:hover {
    color: #ff5722;
    border-bottom-color: #ff5722;
}

.public-createorder-order .order .item .order-pay-type-content {
    width: 100%;
    margin-top: 10px;
}

.public-createorder-order .order .item .order-pay-type-content-item {
    display: none;
}

.public-createorder-order .order .item .order-pay-type-content-item.hover {
    display: block;
}

.public-createorder-order .order .item .order-pay-type-content-item .junka-wrap {
    width: 100%;
    background: #efefef;
    border-radius: 8px;
    padding: 8px;
}

.public-createorder-order .order .item .order-pay-type-content-item .junka-wrap .label {
    width: 100%;
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
}

.public-createorder-order .order .item .order-pay-type-content-item .junka-wrap textarea {
    width: 100%;
    min-height: 120px;
}

.public-createorder-order .order .item .pay {
    display: flex;
    flex-wrap: wrap;
}

.public-createorder-order .order .item .pay span {
    display: flex;
    height: 35px;
    width: fit-content;
    padding: 0 17px;
    margin: 5px;
    white-space: nowrap;
    align-items: center;
    border: 1px solid rgb(0 0 0 / 10%);
    border-radius: 5px;
    cursor: pointer;
    transition: .3s;
}

.public-createorder-order .order .item .pay span i {
    margin-right: 5px;
}

.public-createorder-order .order .item .pay span:hover {
    border-color: rgb(0 0 0 / 20%);
}

.public-createorder-order .order .item .pay span.hover {
    color: #fff;
    background-color: #ff5722;
    background-image: linear-gradient(to right, #ff9800 , #ff5722);
    border-color: rgb(255 255 255 / 20%);
}

.public-createorder-order .order .item .paybut {
    width: 100%;
    height: 40px;
    color: #fff;
    background-color: #ff5722;
    background-image: linear-gradient(to right, #ff9800 , #ff5722);
    border: 0;
    border-radius: 5px;
    transition: .3s;
}

.public-createorder-order .order .item .paybut:hover {
    background: #ff9800;
}

.public-buy-good {
    width: 800px;
    padding: 20px;
    background: #fff;
    box-shadow: 0 0 10px rgb(0 0 0 / 5%);
    border-radius: 8px;
    margin: 40px auto 50px;
}

.public-buy-good .title {
    font-size: 32px;
    color: #FF9800;
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgb(255 255 255 / 10%);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.public-buy-good .title::before {
    position: absolute;
    content: '';
    top: 8px;
    right: 270px;
    width: 32px;
    height: 32px;
    background: url("../img/indexusertiticon.png") no-repeat;
    background-size: 100%;
    opacity: .8;
}

.public-buy-good .title::after {
    position: absolute;
    content: '';
    top: 8px;
    left: 270px;
    width: 32px;
    height: 32px;
    background: url("../img/indexusertiticon.png") no-repeat;
    background-size: 100%;
    opacity: .8;
}

.public-buy-good .wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.public-buy-good .wrap .bg {
    width: 100px;
    height: 100px;
    background: url('../img/buygoodbg.png') no-repeat;
    background-size: 100%;
    margin: 20px 0;
}

.public-buy-good .wrap .order-item {
    margin: 10px 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.public-buy-good .wrap .order-item span {
    color: #999;
    width: 120px;
    display: flex;
    justify-content: flex-end;
}

.public-buy-good .wrap .order-item div {
    width: calc(100% - 120px);
    color: #333;
}

.public-buy-good .wrap .order-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}

.public-buy-good .wrap .order-btn a {
    display: flex;
    width: 200px;
    height: 50px;
    border-radius: 2px;
    justify-content: center;
    align-items: center;
}

.public-buy-good .wrap .order-btn a:nth-child(1) {
    color: #fff;
    background-color: #ff5722;
    background-image: linear-gradient(to right, #ff9800 , #ff5722);
}

.public-buy-good .wrap .order-btn a:nth-child(1):hover {
    background: #ff9800;
}

.public-buy-good .wrap .order-btn a:nth-child(2) {
    border: 1px solid #ff9800;
    color: #ff9800;
    margin-left: 20px;
}

.public-buy-good .wrap .order-btn a:nth-child(2):hover {
    background: #ff9800;
    color: #fff;
    border-color: #ff9800;
}

.public-doclist,
.public-doc {
    width: 100%;
    padding: 20px;
    background: #fff;
    box-shadow: 0 0 10px rgb(0 0 0 / 5%);
    border-radius: 8px;
    margin: 40px auto 50px;
}

.public-doclist .title,
.public-doc .title {
    color: #FF9800;
    font-size: 32px;
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgb(255 255 255 / 10%);
    position: relative;
    text-indent: 40px;
}

.public-doclist .title::after,
.public-doc .title::after {
    position: absolute;
    content: '';
    top: 8px;
    left: 0;
    width: 32px;
    height: 32px;
    background: url("../img/indexusertiticon.png") no-repeat;
    background-size: 100%;
}

.public-doclist .wrap {
    border-bottom: 1px solid rgb(0 0 0 / 10%);
    margin-bottom: 20px;
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
}

.public-doclist .wrap .item {
    width: 48%;
    height: 60px;
    margin-bottom: 10px;
    line-height: 30px;
}

.public-doclist .wrap .item .tit {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
    font-size: 16px;
}

.public-doclist .wrap .item:hover .tit {
    color: #FF9800;
}

.public-doclist .wrap .item span {
    width: 200px;
    text-align: right;
    color: #999;
    margin-right: 10px;
}

.public-doclist .nodoc {
    width: 100%;
    padding: 180px 0;
    font-size: 46px;
    text-align: center;
    color: #999;
}

.public-doc .bq {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.public-doc .bq .item {
    color: #999;
}

.public-doc .wrap {
    font-size: 15px;
    line-height: 1.5;
    color: #333;
}

.public-doc .wrap h3,
.public-buy-info .body h3{position:relative;padding:5px 0 15px;color:#333;font-size:18px;display:-webkit-inline-box;border-bottom:1px solid rgb(255 255 255 / 10%);cursor:pointer;z-index:16;font-weight:700;line-height:30px}

.public-doc .wrap h4,
.public-buy-info .body h4{font-size: 18px;font-weight: 700;margin: 25px 0 20px;border-left: 4px solid #ff5722;color: #333;padding: 0 0 0 10px;line-height: 17px;}

.public-doc .wrap h5,
.public-buy-info .body h5{font-size:18px;color:#ff5722;background:#f7f7f7;padding:5px 10px;margin:0 0 15px;font-weight:600}

.public-doc .wrap h6,
.public-buy-info .body h6{font-size:18px;color: #333;background: #f7f7f7;padding:5px 10px;margin:0 0 15px;font-weight:600;border-left: 4px solid #ff5722;}

.public-doc .wrap h3:before,
.public-buy-info .body h3:before{position:absolute;top:35px;left:0;z-index:-1;width:45%;height:2px;background:#ff5722;content:" ";border-radius:20px;transition:all .5s;}

.public-doc .wrap h3:hover:before,
.public-buy-info .body h3:hover:before{width:100%;transition:all .5s}

.public-doc .wrap ol,
.public-buy-info .body ol{color:#424242;font-size:15px;margin:5px 0 15px}

.public-doc .wrap ol li,
.public-buy-info .body ol li{position:relative;padding-left:15px}

.public-doc .wrap ol li:before,
.public-buy-info .body ol li:before{position:absolute;top:15.5px;left:8px;width:3px;height:3px;border-radius:10px;background:#333;content:" "}

.public-doc .wrap ol li p,
.public-buy-info .body ol li p{padding:2px 10px!important;font-size:15px!important;margin-bottom:5px!important;}

.public-doc .wrap ol li:last-child p,
.public-buy-info .body ol li:last-child p{margin-bottom:0!important}

.public-doc .wrap img,
.public-buy-info .body img{max-width:100%;height:auto!important;margin:10px 0;}

.public-doc .wrap img:hover,
.public-buy-info .body img:hover{opacity:.9}
.public-doc .wrap p,
.public-buy-info .body p{display:block;line-height:30px;margin-bottom:10px;font-size: 15px;}

.public-pricelist {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 20px;
    background: #fff;
    box-shadow: 0 0 10px rgb(0 0 0 / 5%);
    border-radius: 8px;
}

.public-pricelist-title {
    font-size: 16px;
    color: #ff5722;
    height: 24px;
    line-height: 24px;
    text-indent: 14px;
    position: relative;
    margin-bottom: 20px;
}

.public-pricelist-title:after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background-color: #ff5722;
    background-image: linear-gradient(to top, #ff9800 , #ff5722);
    border-radius: 4px;
}

.public-pricelist .table {
    border: 1px solid #25252c;
}

.public-pricelist th,
.public-pricelist  td {
    color: #d3d3d3;
    padding: 10px 20px;
}

.public-pricelist tbody tr td:nth-child(3) {
    color: #999;
    text-decoration: line-through;
}

.public-pricelist tbody tr td:nth-child(4) {
    color: #ffe0b0;
}

.public-pricelist tbody tr.up td:nth-child(5) {
    color: #f44336;
    position: relative;
    display: flex;
    align-items: center;
}

.public-pricelist tbody tr.up td:nth-child(5) i {
    display: block;
    width: 0;
    height: 0;
    margin-top: -6px;
    margin-left: 10px;
    border: 5px solid transparent;
    border-bottom-color: #f44336;
}

.public-pricelist tbody tr.down td:nth-child(5) {
    color: #4caf50;
    position: relative;
    display: flex;
    align-items: center;
}

.public-pricelist tbody tr.down td:nth-child(5) i {
    display: block;
    width: 0;
    height: 0;
    margin-top: 2px;
    margin-left: 10px;
    border: 5px solid transparent;
    border-top-color: #4caf50;
}

.public-pricelist .no-pricelist {
    padding: 280px 0;
    font-size: 46px;
    color: #999;
}