/* 公共 */



/* 产品购买 */
.pro-show-box{
    display: flex;
    padding: 60px 0;
    border-bottom: 1px solid #e2e2e2;
}
.pro-show-box .pro-pic-show{
    width: 500px;
    max-height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pro-show-box .pro-pic-show img{
    max-width: 100%;
    max-height: 100%;
}
.buy-area-box{
    flex: 1;
    margin-left: 40px;
}
.buy-area-box-short{
    margin: 20px;
}
.buy-area-box .big-title{
    display: flex;
    align-items: baseline;
}
.buy-area-box .big-title h1{
    font-size:20px;
    color:#333;
    font-weight: bold;
    max-width: 70%;
}
.buy-area-box .start-show{
    padding-left: 50px;
    display: flex;
    align-items: center;
    color:#999;
}
.price-mode{
    display: flex;
    align-items: baseline;
    color:#888;
    padding: 20px 0 0 0;
}
.price-mode .lt-text{
    width: 80px;
}
.price-mode .rt-content{
    flex: 1;
}
.delete-line{
    text-decoration: line-through;
}
.rt-content .price-show .big-price{
    font-size: 22px;
    color:#333;
    padding: 0 10px 0 0px;
    font-weight: bold;
}
.rt-content .price-about{
    color:#888;
    font-size: 12px;
    padding-left: 20px;
}
.rt-content .price-acition{
    display: flex;
    align-items: center;
}
.choose-weight ul{
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 16px;
    padding-top: 20px;
}
.choose-weight li{
    background: #f3f3f3;
    padding: 10px 8px;
    text-align: center;
    color: #333;
    cursor: pointer;
}
.choose-weight li.on{
    background: #E0C785;
}
.tips-pro{
    font-size: 12px;
    color: #888;
    padding: 30px 0 50px 0;
}
/* 翻页 */
.page-change-box{
    margin: 50px 0;
}
.page-change-box ul{
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-change-box li{
    height: 30px;
    line-height: 30px;
    min-width: 30px;
   /*   padding: 0 10px; */
    box-sizing: border-box;
    border: 1px solid #999;
    text-align: center;
    margin: 0 5px;
    cursor: pointer;
}
.page-change-box li.on{
    background: #E4CE92;
    border: 1px solid #E4CE92;
}
/* 5星 */
.start-icon{
    height: 14px;
   /*  width: 72px;
    background:url(../image/start.png) left center repeat;
    background-size: auto 100%; */
    display: block;
    position: relative;
    top: 2px;
    margin: 0 10px;
}


.start-icon-1{
  
    width: 72px;
    background:url(../image/start.png) left center repeat;
    background-size: auto 100%; 
   
}

/* 下拉选择 */
.select-box-2{
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    justify-content: space-between;
    width: 100%;
    border:1px solid #ddd;
    padding: 0px 10px;
    margin-left: 0px;border-radius:3px;
}
.select-box-2 .txt{
    cursor: pointer;   
    display: flex; 
    justify-content: space-between;
    width:100%;
    padding: 6px 0px;
}
.select-box-2 .arraw-down{
    width: 0;
    height: 0;
    border-top: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 10px solid #999;
    margin-left: 20px;
}
.select-box-2.on .arraw-down{
    border-top: 10px solid #999;
    border-bottom: 0;
}
.select-box-2 .select-choose-box{
    display: none;
    position: absolute;
    left: 0;
    width: 100%;
    top: 30px;
    box-sizing: border-box;
    padding:0px 0px 0 0;
    border: 1px solid #ddd;
    border-radius:3px;
    background: #fff;
}

.select-box-2.on .select-choose-box{
    display: block;
}
.select-box-2 .select-choose-box .select-choose-box-inner{
    display: flex;
    flex-wrap: wrap;
}
 .select-box-2 .select-choose-box .select-choose-box-left{ 
    margin:3px;
    flex: 1;
}
.select-box-2 .select-choose-box .select-choose-box-left li{padding:10px 12px; }
.select-box-2 .select-choose-box .select-choose-box-right{
    margin:3px;
    height:300px;
    overflow: auto;
    flex: 9;background: #F3F3F3;
}
.select-box-2 .select-choose-box .select-choose-box-right .server-search{padding:10px;}
.select-box-2 .select-choose-box .select-choose-box-right .server-search input{
    width: 100%;
    height: 30px;
    padding: 0 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
    margin-bottom: 10px;
}

.select-box-2 .select-choose-box .select-choose-box-right .select-server-child{ 
    border-left:  1px solid #ddd;
    display: none;
    
}
.select-box-2 .select-choose-box .select-choose-box-right ul{ 
   
    min-height:300px;
}
.select-box-2 .select-choose-box .select-choose-box-right ul li{ padding: 10px 12px;background:none;}
 .select-choose-box li{
    background: #fff;
}
.select-box-2  .select-choose-box .select-choose-box-right ul li:hover, .select-box-2  .select-choose-box li.hover{background-color: #E0E0E0;}


/* 计数器 */
.count-box{
    display: flex;
    align-items: center;
}
.count-box .del-btn,.count-box .add-btn{
    background: #F3F3F3;
    width: 32px;
    height: 32px;
    line-height: 32px;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
}
.count-box .del-btn{
    border-radius: 10px 0 0 10px;
}
.count-box .add-btn{
    border-radius: 0 10px 10px 0;
}
.count-box .num-btn{
    background: #F3F3F3;
    height: 32px;
    line-height: 32px;
    width: 100px;
    text-align: center;
    margin: 0 3px;border:0px;
}
/* 购买/分享 */
.buy-btn-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.buy-btn-box .lt-buy-btn{
    display: flex;
    align-items: center;
}
.buy-btn-box .lt-buy-btn .car{
    border-radius: 50px 0 0 50px;
    background: #E3CF94;
    color:#555;
    line-height: 44px;
    padding: 0 10px;
    text-align: center;
    width:120px;
}
.buy-btn-box .lt-buy-btn .buy-now{
    border-radius: 0 50px 50px 0;
    background: #363636;
    color: #fff;
    line-height: 44px;
    padding: 0 10px;
    width:120px;
    text-align: center;
}
.buy-btn-box .rt-share{
    display: flex;
    align-items: center;
}
.buy-btn-box .rt-share a{
    margin-left: 5px;
    width: 60px;
    height: 60px;
    display: block;
}
.buy-btn-box .rt-share .s1{
    background: url(../image/share-icon.png) -4px 0px no-repeat;
    background-size: auto 100%;
}
.buy-btn-box .rt-share .s2{
    background: url(../image/share-icon.png) -57px 0px no-repeat;
    background-size: auto 100%;
}
.buy-btn-box .rt-share .s3{
    background: url(../image/share-icon.png) -116px 0px no-repeat;
    background-size: auto 100%;
}
.buy-btn-box .rt-share .s4{
    background: url(../image/share-icon.png) -170px 0px no-repeat;
    background-size: auto 100%;
}
.buy-btn-box .rt-share .s5{
    font-size:36px;
    display: flex; align-items: center; justify-content: center;
}

.buy-btn-box .rt-share .s5.on{color:#E0C785}
.buy-btn-box .rt-share .s5 i{font-size:36px;}



/* 文字介绍 */
.text-about-box{
    padding: 20px 0 50px 0;
    border-bottom: 1px solid #e2e2e2;
    font-size: 16px; line-height: 28px;
}
.text-about-box h1{font-weight: bold;margin-bottom: 20px;font-size: 20px;}
.text-about-box h2{font-weight: bold;margin-bottom: 20px;font-size: 18px;}
.text-about-box p{margin-bottom: 10px;}
.text-about-box .about-title{
    font-size: 18px;
    font-weight: bold;
    color:#333;
    padding-top: 30px;
}
.text-about-box .about-txt{
    font-size: 13px;
    color:#555;
    padding-top: 20px;
    line-height: 150%;
}
/* 评论 */
.ask-box{
    margin-top: 40px;
}
.remark-box{
    background: #F3F3F3;
    padding:14px 20px;
    margin-top: 20px;
}
.remark-list{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.remark-list .remark-lt{
    display: flex;
    align-items: center;
}
.remark-list .remark-lt .head-icon{
    width: 60px;
    height: 60px;
    border-radius: 199px;
}
.remark-list .remark-txt{
    padding-left: 20px;
}
.remark-list .remark-txt .name{
    font-size: 14px;
    color:#333;
}
.remark-list .remark-txt p{
    font-size: 12px;
    color:#888;
    padding-top: 6px;
}
.remark-list .remark-rt{
    text-align: right;
}
.remark-list .start-icon{
    height: 18px;
    /* width: 92px;
    background:url(../image/start.png) left center repeat;
    background-size: auto 100%; */
    display: block;
    position: relative;
    top: 2px;
    margin: 0 10px;color: #E6CD94;
    font-size: 12px;
}
.link-icon{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 14px;
    color:#888;
}
.link-icon .zan{
    width: 20px;
    margin-right: 14px;
}
.remark-box .remark-box{
    border-top: 1px solid #ddd;
    padding: 0 0 10px 30px;
}
.remark-box .remark-box .remark-list{
    margin-top: 20px;
}
.remark-box .remark-box .remark-list .remark-lt .head-icon{
    width: 50px;
    height: 50px;
}
.remark-box .remark-box .remark-list .remark-txt .name{
    font-size: 13px;
}
/* 手机版 */
@media (max-width: 768px) {
    .content-body-h{
        width: 100%;
        padding: 0 3vw;
        max-width: 100%;
        min-width: 100%;
    }
    .pro-show-box{
        padding: 4vw 0;
        flex-wrap: wrap;
    }
    .pro-show-box .pro-pic-show{
        width: 96vw;
        height: 96vw;
    }
    .buy-area-box{
        flex: none;
        width: 100%;
        margin: 0;
    }
    
    .buy-area-box .big-title{
        flex-wrap: wrap;
    }
    .buy-area-box .big-title h1{
        width: 100%;
        max-width: 100%;
        padding: 4vw 0;
    }
    .buy-area-box .start-show{
        width: 100%;
        padding:0;
    }
    .rt-content .price-acition{
        flex-wrap: wrap;
    }
    .rt-content .price-about{
        padding: 2vw 0;
        width: 100%;
    }
    .price-mode .lt-text{
        width: 16vw;
    }
    .choose-weight ul{
        grid-template-columns: repeat(4, 1fr);
    }
    .price-mode{
        padding-top: 4vw;
    }
    .rt-content .tips-pro{
        padding: 4vw 0 3vw 0;
    }
    .buy-btn-box{
        flex-wrap: wrap;
        justify-content: right;
    }
    .buy-btn-box .rt-share{
        width: 100%;
        justify-content: left;
        padding-left: 12vw;
    }
    .buy-btn-box .lt-buy-btn{
        padding: 3vw 0;
    }
    .buy-btn-box .lt-buy-btn .car{
        width: 39vw;
    }
    .buy-btn-box .lt-buy-btn .buy-now{
        width: 39vw;
    }
    .buy-btn-box .rt-share a{
        width: 12vw;
        height: 14vw;
    }
    .text-about-box{
        padding: 0 0 8vw 0;
    }
    .ask-box{
        margin-top: 5vw;
    }
    .remark-list .start-icon{
        width: 20vw;
        height: 4vw;
    }
    .remark-box{
        padding:3vw 4vw;
        margin-top: 5vw;
    }
    .remark-list .remark-txt{
        padding-left: 4vw;
    }
    .remark-list .remark-lt .head-icon{
        width: 14vw;
        height: 14vw;
    }
    .remark-box .remark-box .remark-list .remark-lt .head-icon{
        width: 12vw;
        height: 12vw;
    }
    #register-dialog,#login-dialog{
        width: 92%;
    }
    .dialog-box .dialog-content{
        padding: 3vw 4vw;
    }
    .login-info-box .sure{
        width: 5vw;
        height: 5vw;
    }
    .login-info-box .input-box .input-txt{
        height: 10vw;
        line-height: 10vw;
    }
    .login-info-box .share-box a{
        width: 10vw;
        height: 10vw;
    }
    #add-car-dialog,#buy-now-dialog{
        width: 92%;
    }
    .addcart-dialog-box .pro-list-box{
        height: 52vw;
        display: flex;
        gap: 4vw;
        overflow-x: scroll;
        flex-wrap: nowrap;
    }
    .addcart-dialog-box .pro-list-box li{
        width: 30vw;
    }
    .pro-list-box li .img{
        width: 30vw;
        height: 30vw;
    }
    .addcart-dialog-box .sure-btn{
        margin-top: 6vw;
    }
    .buy-info-box .input-ul li .input-box{
        flex-wrap: wrap;
    }
    .input-box .radio-list{
        width: 48%;
        margin: 1vw 2% 1vw 0;
    }
    .dialog-box .add-car-dialog-title{
        padding: 3vw 4vw;
    }
    .buy-info-box .input-box.file-bg::after{
        top: 9px;
    }
}