html {
    font-size: 3.6vw;
    letter-spacing: .1em;
}

body {
    font-family: 'Helvetica Neue', Helvetica, 'Microsoft YaHei', sans-serif;
    background-color: #e8eff1;
    min-height: 100vh;
    padding-top: 12.5vw;
    padding-bottom: 13.8vw;
    box-sizing: border-box;
}

body,
h1,
h3,
p {
    margin: 0;
}

a {
    text-decoration: none;
}

.flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}

.col {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
}

img {
    width: 100%;
    height: 100%;
}

.navibar {
    height: 12.5vw;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2;
    background-color: white;
}

.back,
.more {
    -webkit-flex-basis: 13.4vw;
    flex-basis: 13.4vw;
    background-image: url("../icon/detail_navi_icons.png");
    background-size: 26.8vw;
}

.more {
    background-position: -13.4vw 0;
}

.navitab {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    text-align: center;
}

.navitab a {
    -webkit-flex-basis: 26%;
    flex-basis: 26%;
    position: relative;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 12.5vw;
    color: black;
}

.navitab a.current span {
    color: #e80e0f;
    padding: 1.5vw 1vw;
    border-bottom: 3px solid #e80e0f;
}



.pics {
    height: 97.5vw;
}

.swiper-pagination-fraction {
    width: 12%;
    left: 80%;
    bottom: 5%;
    border-radius: 1.7vw;
    box-shadow: 0 1px 6px rgba(3, 3, 3, .3);
    letter-spacing: .1em;
}

.swiper-pagination-total {
    color: #aaa;
}

.container {
    padding: 0 4.17vw;
    background-color: white;
}

.container + .container {
    margin-top: 1.852vw;
}

/*评论banner*/

.banner {
    position: relative;
    height: 29vw;
    margin-bottom: 2vw;
}

/*好评度*/

.praise_degree {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 8vw;
    font-size: 2rem;
    font-weight: 500;
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(154, 22, 2, 1) 90%);
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(154, 22, 2, 1) 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.intro {
    padding-bottom: 1vw;
}

.intro .name {
    font-size: 1.4rem;
    margin-bottom: 2vw;
}

.intro .price {
    font-size: 1.3rem;
}

.intro .keyword {
    color: #626262;
    font-size: .9rem;
}


.option {
    font-size: 1.2rem;
}

.option_title {
    -webkit-flex-basis: 20%;
    flex-basis: 20%;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    font-weight: 500;
}

.options {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 3.6vw;
}

.option_item {
    margin: 2vw;
}

.option_label {
    padding: .8vw 2.6vw 0.6vw 4.17vw;
    border: 1px solid #bbb;
    border-radius: 2vw;
    letter-spacing: .3em;
    font-size: 1rem;
}

form > input,
.option_item input {
    display: none;
}

.option_item input:checked + .option_label {
    border-color: red;
}

.num_control {
    width: 35vw;
    border: 1px solid #cbcbcb;
    border-radius: 2vw;
    text-align: center;
    overflow: hidden;
    margin: 1vw 0 0 2vw;
}

.num_control span {
    width: 10vw;
    margin: 0;
    border: none;
    font-size: 2rem;
    background-color: white;
    -webkit-user-select: none;
    user-select: none;
}

.num_control input {
    width: 15vw;
    padding: 0;
    margin: 0;
    border: none;
    border-left: 1px solid #cbcbcb;
    border-right: 1px solid #cbcbcb;
    text-align: center;
    font-size: 1.3rem;
}


span.limit {
    background-color: #cbcbcb;
}


.comment {
    color: #424242;
    margin-top: 1.852vw;
}

.comment .total {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.comment .total h2 {
    font-size: 1.2rem;
    font-weight: normal;
    color: black;
}

.all_comments {
    font-size: .9rem;
    color: #626262;
}

.comment_tag {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 3vw;
}

.comment_tag span {
    margin-right: 10vw;
    line-height: 3em;
}

.comment_item {
    margin-top: 2vw;
    padding-bottom: 6vw;
}

.comment_top {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.avatar {
    width: 8.43vw;
    height: 8.43vw;
    border-radius: 5vw;
    overflow: hidden;
}

.middle {
    width: 52vw;
}

.nickname {
    font-size: 1rem;
    color: black;
}

.time {}

.star {
    width: 22.5vw;
    height: 4vw;
    background: url("../icon/star.png") no-repeat;
    background-size: 45vw 4vw;
}

.star4 {
    background-position: -4.5vw 0;
}

.star3 {
    background-position: -9vw 0;
}

.star2 {
    background-position: -13.5vw 0;
}

.star1 {
    background-position: -18vw 0;
}

.comment_content {
    margin: 1em 0;
    font-size: .8rem;
}

.comment_reply {
    margin-left: 1em;
    font-size: .8rem;
    line-height: 1.5em;
}

.comment_reply .czshop {
    color: #c9141d;
}


.recmd_title {
    font-size: 1.1rem;
    color: #424242;
    font-weight: normal;
    letter-spacing: .2em;
}

.recmd_goods {
    -webkit-justify-content: space-around;
    justify-content: space-around;
    margin-bottom: 5vw;
}

.item_recmd {
    -webkit-flex-basis: 40vw;
    flex-basis: 40vw;
    text-align: center;
}

.item_recmd img {
    height: 28.7vw;
}

.item_recmd .name {
    margin: 1em 0;
    color: black;
}

.item_recmd .name,
.item_recmd .price {
    font-size: .9rem;
}

.item_recmd .keyword {
    color: #737373;
    font-size: .6rem;
}

.price {
    color: red;
    font-weight: bold;
    padding: 2vw 0;
}

.to_detail {
    height: 8.24vw;
    letter-spacing: .2em;
    background-color: #e7eff1;
}

.to_detail a {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 8.24vw;
    text-align: center;
    color: #6b696a;
}

.bottombar {
    width: 100%;
    position: fixed;
    bottom: 0;
    height: 13.8vw;
    z-index: 1;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    background-color: white;
}

.home,
.cart {
    width: 13.8vw;
    height: 100%;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    color: #9f9f9f;
    box-sizing: border-box;
    border: 1px solid #898989;
    font-size: .8rem;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.home + .cart {
    border-left: none;
}

.cart {
    width: 13.8vw;
    position: relative;
}

.icon_home,
.icon_cart {
    display: inline-block;
    width: 6.67vw;
    height: 6.67vw;
    background: url("../icon/bottom_icons.png") no-repeat;
    background-size: 26.67vw 13.33vw;
}

.icon_cart {
    background-position: -13.33vw 0;
}

.cart_num {
    position: absolute;
    top: .5vw;
    left: 55%;
    display: block;
    width: 4vw;
    padding: 2vw 0;
    font-size: 3.2vw;
    font-style: normal;
    background-color: red;
    border-radius: 4vw;
    line-height: 0;
    color: white;
    vertical-align: middle;
}

.bottombar h4 {
    margin: 0;
}

.bottombar button,
.buy {
    color: white;
    font-size: 1rem;
    width: 30%;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    display: inline-block;
    height: 100%;
    line-height: 13.8vw;
    text-align: center;
    border: 0;
}

.add {
    background-color: #ff8601;
}

.buy {
    background-color: #ff0600;
}