* {
    padding: 0;
    margin: 0;
}

img,
a,
span {
    vertical-align: middle;
}

a {
    text-decoration: none;
}

.main {
    width: 100%;
}
.content-all {
    width: 1090px;
    margin: auto;
}

@media screen and (min-width: 768px) {
    .content-all {
        min-height: 810px!important;
    }
}


@media screen and (max-width: 768px) {
    .content-all {
        width: 100%;
        margin: auto;
    }
}
.colorBoxList img {
    width: 50px;
    height: 100%;
    border-radius: 3px;
}
.colorBoxList .type {
    /* width: 100px; */
    margin-top: 8px;
    margin-left: 10px;
    margin-right: 10px;
    font-size: 17px;
    overflow: hidden;
    /* text-overflow: ellipsis; */
    white-space: nowrap;
    cursor: pointer;
}
@media screen and (max-width: 768px) {
    .colorBoxList   .type{
        font-size: 16px;
    }
}
.colorBoxList {
    /* width: 15%; */
    border-radius: 5px;
    display: flex;
    height: 50px;
    /* line-height: 50px; */
    margin: 10px;
    padding: 2px;
    text-align: center;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 3px;
    max-width: 448px;
}
.detailsList {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    text-align: center;
    width: 480px;
}
@media screen and (max-width: 768px) {
    .detailsList {
        width: 341px;
    }
    .colorBoxList {
        max-width: 330px;
    }
}
.ListImg {
    height: 90px;
    width: 90px;
}
@media screen and (max-width: 768px) {
    .ListImg {
        height: 60px;
        width: 60px;
    }
}
.ListImg img {
    height: 100%;
    width: 100%;
    padding: 0 4px;
}
.ListImg img:hover {
    background-color: #fff;
    border: 2px solid red;
    box-sizing: border-box;
    height: 87px;
    width: 87px;
}
.num_flex{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.quantity-control{
    margin: 0 10px;
}
.quantity-control button {
    background-color: #5fb4e5;
    color: white; 
    border: none;
    padding: 0px 5px; 
    cursor: pointer; 
    font-size: 18px; 
    transition: background-color 0.3s ease; 
}

.quantity-control button:hover {
    background-color: #5fb4e5;
}

.quantity-control .quantity-input {
    width: 90px; 
    text-align: center;
    text-align: center; 
    padding: 0px;
    border: 1px solid #ccc; 
    font-size: 16px;
    outline: none; 
}
.quantity-control .quantity-input:focus {
    border-color: #5fb4e5;
}

.quantity-control button:active {
    transform: scale(0.95); 
}
@media screen and (max-width: 768px) {
    .num_flex{
        margin-bottom: 0;
    }
    .zb_flex{
        margin-top: 25px;
    }
    .quantity-control{
        width: 167px;
     }
    .ListImg img {
        height: 100%;
        width: 100%;
        padding: 0 4px;
    }
    .ListImg img:hover {
        background-color: #fff;
        border: 2px solid red;
        box-sizing: border-box;
        height: 57px;
        width: 47px;
    }
}
        
.arrow {
    background-color: #cdcdd1;
    color: #ddd;
    height: 90px;
    width: 20px;

    .fh-icon {
        display: block;
        margin-top: 30px;
    }
}
@media screen and (max-width: 768px) {
    .arrow {
        .fh-icon {
            margin-top: 17px;
        }
    }
}
.content-flex .left {
    height: 480px;
    width: 480px;
    background-color: rgb(245, 245, 245);
    margin-right: 20px;
}
.content-flex .left .img {
    width: 478px;
    height: 480px;
}
@media screen and (max-width: 768px) {
    .content-flex .left {
        height: 328px;
        width: 341px;
        margin: auto;
        background: #fff;
    }
}
@media screen and (max-width: 768px) {
    .content-flex .left .img {
        width: 100%;
        height: 308px;
    }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .quantity-control {
        width: 260px;
    }
    .content-flex .left {
        height: 100%;
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }
    .content-flex .left .img {
       width: 100%;
       margin: 0 auto;
       text-align: center;
    }
    .detailsList{
        width: 100%;
    }
    .ListImg{
        height: 90px;
        width: 147px;
    }
}
@media screen and (min-width: 768px) and (max-width: 768px) { 
    .quantity-control {
        width: 295px;
    }
    .content-flex .left {
        height: 100%;
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }
    .content-flex .left .img {
       width: 100%;
       margin: 0 auto;
       text-align: center;
    }
    .detailsList{
        width: 100%;
    }
    .ListImg{
        height: 90px;
        width: 139px;
    }
 } 
.content-flex .lefthide {
    height: 480px;
    width: 480px;
    background-color: rgb(245, 245, 245);
    margin-right: 20px;
}
.content-flex .lefthide .img {
    width: 460px;
    height: 460px;
    margin-top: 10px;
    margin-left: 10px;
}
.content-flex  .right .title {
    font-size: 20px;
    font-weight: 550;
    margin-bottom: 20px;
}
.content-flex  .right .right-flex{
    display: flex;
    align-items: center;
}
.content-flex  .right .right-flex .sku {
    width: 415px;
    display: flex;
    flex-wrap: wrap;
}
.content-flex  .right .right-flex .color {
    width: 110px;
    font-size: 18px;
    padding: 10px;
}
.content-flex  .right .right-flex .color-price{
    width: 110px;
    font-size: 18px;
    padding: 10px;
}
@media screen and (max-width: 768px) {
    .content-flex  .right .right-flex .color-price{
        font-size: 16px;
    }
}
.content-flex  .right .contents-flex .color {
    /* width: 130px; */
    font-size: 18px;
    padding: 10px;
}
.content-flex  .right .contents-flex .color-price{
    width: 110px;
    font-size: 18px;
    padding: 10px;
}
.content-flex  .right .contents-flex .sku {
    width: 415px;
    display: flex;
    flex-wrap: wrap;
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .content-flex  .right .contents-flex .sku {
        width: 100%;
        margin: auto;
        text-align: center;
    }
}
@media screen and (min-width: 768px) and (max-width: 768px) { 
    .content-flex  .right .contents-flex .sku {
        width: 100%;
        margin: auto;
        text-align: center;
    }
    .wenjianinput{
        margin-top: 1px!important;
    }
} 
.content-flex  .right .contents-flex {
    display: flex;
    /* align-items: center; */
    margin-bottom: 11px;
}
.content-flex  .right {
    flex: 1; /* 右侧自适应宽度 */
    position: relative;
    height: 100%;
    /* overflow: auto;  */
}
@media screen and (max-width: 768px) {
    .content-flex  .right {
        margin-top: 117px;
    }
    .wenjianinput{
        margin-top: 1px!important;
    }
    .content-flex  .right .contents-flex .sku {
        width: 266px;
    }
}
@media screen and (max-width: 768px) {
    .content-flex  .right .title {
        font-size: 17px;
    }
    .content-flex  .right .contents-flex{
        .color{
            font-size: 16px;
        }
    }
}
.content-flex {
    display: flex;
    margin-top: 200px;
}
@media screen and (min-width: 768px) and (max-width: 768px) { 
    .content-flex {
        margin-top: 71px!important;
    }
    .content-flex .right .title{
        margin-top: 20px;
    }
    .content-flex  .right {
        margin-top: 26px;
    }
} 
@media screen and (max-width: 768px) {
    .content-flex{
        display: block;
        margin-top: 143px;
    }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .content-flex{
        display: block;
        margin-top: 186px;
    }
    .content-flex .right .title{
        margin-top: 20px;
    }
}
.redBoxs {
    border: 2px solid red !important;
    box-sizing: border-box;
    border-radius: 3px;
}

.box {
    position: relative;
}

/*放大图的位置*/
.big {
    width: 400px;
    height: 400px;
    position: absolute;
    left: 530px;
    top: 10px;
    overflow: hidden;
    z-index: 99;
    display: none;
}
@media screen and (max-width: 768px) {
    .big{
        display: none!important;
    }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .big{
        display: none!important;
    }
    .content-flex  .right .right-flex .sku {
        width: 100%;
        margin: auto;
        text-align: center;
    }
}
/*小图位置*/
.small {
    position: relative;
    display: block;
    /*鼠标选择区域*/
    .mask {
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 200, 0.2);
    position: absolute;
    cursor: move;
    display: none;
}
}
@media screen and (max-width: 768px) {
    .small {
        .mask {
        display: none!important;
        }
   }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .small {
        .mask {
        display: none!important;
        }
   }
}
.pro>div {
    display: none;
}

.pro>.show {
    display: block;
}
.sku-specs{
    margin-top: 15px;
}
.sku-specs>.show {
    display: block;
}

.pros>div {
    display: none;
}

.pros>.show {
    display: block;
}
.consult-flex{
    display: flex;
    justify-content: space-around;
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .consult-flex{
        justify-content: space-around;
    }
}
/* 咨询按钮 */
.consult{
    /* margin-left: 182px; */
    margin-top: 10px;
    cursor:pointer;
}
.consult  a {
        background-color: #5FB4E5;
        display: block;
        width: 200px;
        text-align: center;
        height: 40px;
        line-height: 40px;
        border-radius: 9px;
        color: #fff;
}

 .consult div {
        background-color: #5FB4E5;
        width: 200px;
        text-align: center;
        height: 40px;
        line-height: 40px;
        border-radius: 9px;
        color: #fff;
}

.shoucang div {
    background-color: #FE8659!important;
}
@media screen and (max-width: 768px) {
    .consult div {
        width: 138px;
    }
    .consult {
        margin-top: 17px;
     }
    .consult-flex{
        position: fixed;
        bottom: 0px;
        left: 0;
        right: 0;
        background: #fff;
        height: 80px;
        /* justify-content:flex-end; */
        justify-content: center;
        z-index: 9;
    }
    .consult div{
        border-radius: 0px;
        height: 50px;
        line-height: 50px;
        font-size: 13px;
    }
    .consultButton{
        border-top-left-radius: 22px!important;
        border-bottom-left-radius: 22px!important;
    }
    #collect{
        width: 123px;
        border-top-right-radius: 22px!important;
        border-bottom-right-radius: 22px!important;
        /* margin-right: 8px; */
    }
    .shoujifooter_showgwc{
        position: fixed!important;
        bottom: 13px!important;
        right: 8px;
        /* left: 58px !important; */
    }
    .fix_line{
        bottom: 90px!important;
    }
    .gwc_back,.fix_line .a_line{
        width: 48px!important;
        height: 48px!important;
        /*line-height: 39px!important;*/
    }
    .line_tupian img{
        width: 30px;
    }
    .a_line{
        position: fixed!important;
        bottom: 13px!important;
        left: 8px!important;
    }
    .shoujifooter_showgwc img {
        width: 30px!important;
        height: 32px!important;
    }
    .gwc_number_footer{
        top: 1px !important;
        right: 14px !important;
        font-size: 11px;
    }
}
.details .title {
    color: #5FB4E5;
    font-size: 18px;
    border-bottom: 2px solid #bfc3c9;
    padding-bottom: 5px;
}
.details  img{
    width: 100%!important;
}
.details {
    border: 1px solid #d8d8d8;
    border-radius: 9px;
    padding: 35px;
    margin-bottom: 25px;
    
    
}
@media screen and (max-width: 768px) {
    .details {
        padding: 20px;
    }
}
.position-detail {
    position: relative;
    margin-bottom: 50px;

    
}
.position-detail .bottom-color {
    position: absolute;
    bottom: 0px;
    width: 72px;
    height: 3px;
    background-color: #5FB4E5;
}

.attributes {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    
    
}
.attributes .color {
    width: 2px;
    height: 16px;
    border: 1px solid #5FB4E5;
    background-color: #5FB4E5;
    margin-right: 5px;
    margin-top: 2px;
}
.attributes .goods{
    font-size: 18px;
}
.attributes-flex {
    display: flex;
    flex-flow: wrap;

    
}
.attributes-flex .contents-flex .titles {
    color: #999;
    padding-right: 20px;
    width: 293px;
}
@media screen and (max-width: 768px) {
    .attributes-flex .contents-flex .titles {
        width: 180px;
        font-size: 16px;
    }
}
.attributes-flex .contents-flex {
    display: flex;
    margin-bottom: 20px;
    margin-right: 80px;
}
.attributes-flex .contents-flex .quality {
    color: #333;
    overflow: hidden;
    /* padding-right: 25px; */
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 120px;
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .attributes-flex .contents-flex .quality {
        width: 390px;
    }
}
.attributes-img {
    margin-left: -8px;
    margin-top: 40px;
}
.zb_flex{
    display: flex;
    margin-bottom: 18px;
}
.guige,.product_num,.product_bz {
    font-size: 18px;
    padding: 10px;
}
#product_beizhu{
    margin: 0 10px;
    padding: 6px;
    width: 80%;
    outline: none;
}
@media screen and (max-width: 768px) {
    .guige,.product_num,.product_bz {
        width: 80px;
        font-size: 16px;
    }
}
.specs .classifyy {
    font-size: 18px;
    /* height: 39px; */
    line-height: 27px;
    padding: 10px;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin:0 10px 10px 10px;
 }
 @media screen and (max-width: 768px) {
    .specs .classify {
        font-size: 16px;
     }
}
.specs {
    margin-top: 10px;
    width: 400px;
    display: flex;
    flex-wrap: wrap;
    
    
}

.modal-content label {
    width: 100%;
    float: left;
}

.modal-content-button {
    width: 20%;
    margin: 0 auto;
}

@media (max-width: 992px) {
    .modal-content label {
        width: 100%;
        float: left;
    }

    .basic-grey .lform {
        float: left;
        width: 35%;
        /*text-align: right;*/
        padding-right: 10px;
        margin-top: 10px;
        color: #888;
    }

    .modal-content-button {
        width: 100%;

    }

}
.price-background{
    background-color: #E4E4E4;
    border-radius: 3px;
    margin-bottom: 10px;
}
.price{
    padding: 10px;
    display: flex;
    align-items: center;
   
    
}
.China-symbol{
    color: red;
    font-size: 16px;
}
@media screen and (max-width: 768px) {
    .China-symbol{
        color: red;
        font-size: 12px;
    }
}
.China-price{
    font-size: 24px;
    color: red;
}
@media screen and (max-width: 768px) {
    .China-price{
        color: red;
        font-size: 17px;
    }
}
.price-juli{
    width: 140px;
}
.price-juli1{
    width: 200px;
}
@media screen and (max-width: 768px) {
    .price-juli{
        width: 76px;
    }
    .price-juli1{
        width: 200px;
    }
}
.number{
    padding: 10px;
    display: flex;
    align-items: center;
}
.number-juli{
    font-size: 16px;
    width: 140px;
}
@media screen and (max-width: 768px) {
    .number-juli{
        width: 76px;
    }
}
.fixed{
    position: fixed;
    top: 0;
    left: 31%;
    transform: translate(-50%);
}
.form-groups{
    margin-bottom: 20px;
    text-align: center;
}
#compressed-image{
    margin: 0 0px 14px 4px;
	img{
        width: 100px!important;
	    height: 100px!important;
    }
}


.hover-text-visible {
    overflow: visible;
    white-space: normal;
}
#subject{
    background-color: #eee;
}
#image{
    background-color: #eee;
}
.Images{
    display: inline-block;
    margin-top: 4px;
}
.lformmargin{
    display: inline-block;
    margin: 10px 0;
}
.lformtitle{
    margin-top: -4px !important;
    margin-bottom:2px !important;
}
.label_image{
    margin-top: 9px!important;
}
#collection-successful{
    background-color: #fff;
    width: 247px;
    height: 46px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    position: fixed;
    top: 260px;
    right: 709px;
    display: flex;
    align-items: center;
    /* text-align: center; */
    border-radius: 3px;
    display: none;
}

#collection-successful img{
    width: 30px;
    height: 33px;
    margin: 0 10px;
}
#collection-successful .tip{
    font-size: 14px;
    /* display: inline; */
    display: inline-block;
}
#collection-cancel{
    background-color: #fff;
    width: 307px;
    height: 55px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    position: fixed;
    top: 35%; 
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    border-radius: 3px;
    display: none;
}
#collection-fail{
    background-color: #fff;
    width: 307px;
    height: 55px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    position: fixed;
    top: 35%; 
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    border-radius: 3px;
    display: none;
}
#collection-fail img{
    width: 30px;
    height: 33px;
    margin: 0 10px;
}
#collection-fail .titles{
    font-size: 15px;
    font-weight: 400;
    font-family: "Source Han Sans";
}
#collection-fail .denglu{
    font-size: 15px;
    font-weight: 400;
    text-decoration: underline;
    font-family: "Source Han Sans";
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
    #product_beizhu {
        margin: 2px 12px;
    }
    #collection-successful{
        top: 368px;
        right: 18%;
        transform: translateX(-50%);
    }
}
@media screen and (max-width: 768px) {
    #collection-successful{
        top: 38%;
        right: 67px;
    }
    #collection-cancel{
        top: 47%;
    }
  }
#collection-cancel img{
    width: 30px;
    height: 33px;
    margin: 0 10px;
}
#collection-cancel .tip{
    font-size: 14px;
    /* display: inline; */
    display: inline-block;
}
#collection-limit{
    background-color: #fff;
    width: 368px;
    height: 80px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    position: fixed;
    top: 176px;
    right: 663px;
    display: flex;
    align-items: center;
    /* text-align: center; */
    border-radius: 3px;
    display: none;
   
}
#collection-limit  img{
    width: 30px;
    height: 33px;
    margin: 0 10px;
}
#collection-limit .tip{
    font-size: 14px;
    /* display: inline; */
    display: inline-block;
    margin-right: 10px;
}
.box {

      border-top: none!important;

   box-shadow: none!important;
}
@media screen and (max-width: 768px) {
    /* .top_height{
        display: none!important;
    } */
    .dianhua{
        display: none!important;
    }
    .dianhua-shang{
        display: none!important;
    }
    .rates{
        display: none!important;
    }
    .attributes-img div{
        width: 100%!important;
    }
}
.sku_type{
    overflow-y: auto;
    height: 320px; 
}
@media screen and (max-width: 768px) {
    .gwc_back, .gwc_back2 {
        width: 42px!important;
        text-align: center!important;
        padding: 5px!important;
        height: 48px!important;
        line-height: 37px!important;
        border-radius: 8px!important;
    }
}
@media screen and (min-width: 768px) and (max-width: 768px) { 
    #product_beizhu {
        margin: 0 11px;
    }
    .attributes-flex .contents-flex .quality {
        width: 390px;
    }
    .attributes-flex .contents-flex .titles{
        width: 300px;
    }
 }