﻿/***************choice-group*****************/

.choice-group-container 
{
    width:1170px;
    margin:0 auto;
    margin-top:30px;
    margin-bottom:80px;
}

.choice-group 
{
    width:1170px;
    height:70px;
    transition:height 0.5s ease;
}

/*.choice-group:nth-child(2) {
    border-top: 1px solid #ccc !important;
}*/

/*.choice-group:nth-of-type(1) .choice-title, .choice-group:nth-of-type(1) .choice-container {
    height:70px;
}*/

.choice-group li
{
    cursor:pointer;
}

.choice-group li:hover 
{
    color:#966;
}

.choice-title 
{
    width:200px;
    height:70px;
    background:#eee;
    text-align:center;
    line-height:70px;
    font-size:16px;
    color:#333;
    border:1px solid #ccc;
    border-bottom: none;
    box-sizing:border-box;
    float:left;
    transition:height 0.5s ease;
}

.choice-container
{
    width:970px;
    height:70px;
    line-height:70px;
    float:left;
    border:1px solid #ccc;
    border-bottom: none;
    border-left: none;
    box-sizing:border-box;
    padding:5px;
    padding-left:10px;
    transition:height 0.5s ease;
}

.item-type-title {
    border-bottom:1px solid #ccc;
}

.item-type-group {
    border-bottom:1px solid #ccc;
}

.choice-item-group 
{
    width:800px;
    height:60px;
    float:left;
}

.choice-item-group ul 
{
    height:60px;
    overflow:hidden;
    transition:height 0.5s ease;
}

.choice-item-group ul li 
{
    float:left;
}

.choice-item-group ul li.choice-item
{
    height:60px;
    width:100px;
    margin-bottom:0px;
    position: relative;
}

.choice-item input
{
    width:0;
    height:0;
}

.choice-seller-name {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:60px;
    box-sizing: border-box;
    /*border:2px solid #999;*/
    background: #f7f7f7;
    line-height: 56px;
    text-align: center;
    box-shadow: 0 0 3px rgba(0,0,0,0.3) inset;
    display: block;
    opacity: 0;
    transition:opacity 0.1s ease;
    border-radius: 0px;
}

.choice-item input:checked ~div{
    /*display: block;*/
    opacity: 1;
}

.choice-item input:hover ~div {
    /*display: block;*/
    opacity: 1;
}

.choice-item img 
{
    width:40px;
    margin:10px 23px;
    height:40px;
    cursor:pointer;
}

.choice-option 
{
    float:right;
    width:150px;
    line-height:60px;
}

.multiple
{
    float:right;
    color:#696;
    margin-right:10px;
    cursor:pointer;
}

.more 
{
    color:#696;
    float:right;
    cursor:pointer;
}

.paper-size 
{
    width: 80px;
    padding: 0 10px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    /* text-indent: 1em; */
    margin-right:20px;
    box-sizing: border-box;
}

.paper-focus {
    /*border: 1px solid #999;*/
    line-height: 50px;
    box-shadow: 0 0 3px rgba(0,0,0,0.3) inset;
}

.paper-style 
{
    margin-right: 20px;
    height:40px;
    line-height:40px;
    padding:0 10px;
    box-sizing: border-box;
}

.paper-style-focus
{
    /*border: 1px solid #999;*/
    line-height: 38px;
    box-shadow: 0 0 3px rgba(0,0,0,0.3) inset;
}

.paper-weight
{
    margin-right: 20px;
    height:40px;
    line-height:40px;
    padding:0 10px;
    box-sizing: border-box;
}

.paper-weight-focus {
    /*border: 1px solid #999;*/
    line-height: 38px;
    box-shadow: 0 0 3px rgba(0,0,0,0.3) inset;
}

.amount 
{
    padding:0 20px;
    height:40px;
    line-height:40px;
    text-align: center;
}

.amount-focus {
    box-shadow: 0 0 3px rgba(0,0,0,0.3) inset;
}

.amount:first-child 
{
    margin-left:0;
}

.more-option 
{
    width:100%;
    height:10px;
    background:#ccc;
    position:relative;
    cursor:pointer;
}

.more-option-content 
{
    width:100px;
    height:30px;
    background:#ccc;
    position:absolute;
    left:50%;
    margin-left:-50px;
    text-align:center;
    line-height:30px;
}

.more-option-content:hover {
    color:#333;
}

.more-option-content i {
    font-size:14px;
    margin-left:3px;
}

/*****************items-container******************/

.main-items-container 
{
    width:100%;
    padding-bottom:30px;
    background:#f9f9f9;
}

.sorts-container 
{
    width:100%;
    height:30px;
    
}

.sort-container 
{
    width:1170px;
    height:20px;
    margin:20px auto;
}

.item-sort-option .item-sort 
{
    float:left;
    width:42px;
    /*height:20px;*/
    line-height:20px;
    padding:2px 2px 2px 4px;
    border:1px solid #85cd99;
    font-size:12px;
    text-align:center;
    /*border-radius:10px;*/
    margin-right:5px;
    transition:background 0.3s ease;
    cursor:pointer;
}

.option-down span{
    color:#eee;
}

.option-down i {
    color:#eee;
}

.item-sort span {

}

.item-sort:hover {
    background:#ccc;
    color:#fff;
}

.item-sort-option {
    /*clear:both;*/
    margin-left:10px;
    /*margin-top:20px;*/
    float:left;
}

.right-sort-container 
{
    width:282px;
    float:right;
}

.send-area 
{
    float:left;
    border:1px solid #999;
    padding:3px;
    cursor:pointer;
}

.sort-page-container 
{
    float:right;
    line-height:20px;
}


.top-page-arr 
{
    display:inline-block;
    width:20px;
    height:20px;
    border:1px solid #999;
    text-align:center;
}

.top-page-arr-left i {
    font-size:14px;
    cursor:pointer;
}

.top-page-arr-left i:hover {
    color:#999;
}

.top-page-arr-right i {
    font-size:14px;
    cursor:pointer;
}

.top-page-arr-right i:hover {
    color:#999;
}

.items-container 
{
    width:1170px;
    margin:0 auto;
}

.item-container 
{
    width:214px;
    height:300px;
    float:left;
    box-sizing:border-box;
    margin:20px 10px;
    text-align:center;
    position:relative;
    overflow:hidden;
    border:1px solid #ddd;
    transition:transform 0.3s ease, box-shadow 0.3s ease;
    background:rgb(250,250,250);
}

.item-container:hover
{
    transform:translateY(-3px);
    box-shadow:0 3px 10px rgba(50,50,50,0.6);
}

.item-container:hover .item-info {
    top:230px;
}

.item-pic 
{
    width:214px;
    height:200px;
    position:relative;
    overflow:hidden;
    background:#fff;
}

/*.item-pic:nth-of-type(1) 
{
    background:url("../images/材料供应/1.jpg") no-repeat center center;
    background-size:cover;
}

.item-pic:nth-of-type(2) 
{
    background:url("../images/材料供应/2.jpg") no-repeat center center;
    background-size:cover;
}*/

.item-pic:nth-child(3) 
{
    background:url("../images/材料供应/3.jpg") no-repeat center center;
    background-size:cover;
}

.item-off-tip {
    position:absolute;
    top:-69px;
    left:181px;
    line-height:180px;
    width:100px;
    height:100px;
    background:red;
    color:#fff;
    transform:rotate(45deg);
}

.item-title 
{
    height:30px;
    line-height:30px;
}

.item-pic:hover {
    cursor:pointer;
}

.item-title:hover {
    cursor:pointer;
    color:#333;
}

.item-seller-price 
{
    font-size:12px;
}

.item-price 
{
    height:30px;
    font-size:22px;
    line-height:30px;
}

.item-seller-container 
{
    position:absolute;
    width:100%;
    height:24px;
    line-height:24px;
    border-top:1px solid #ddd;
    bottom:0;
}

.item-seller-container .seller-name 
{
    float:left;
    margin-left:10px;
}

.item-seller-container .seller-place 
{
    float:right;
    margin-right:10px;
}

.item-info 
{
    position:absolute;
    top:300px;
    width:100%;
    height:170px;
    background:#f3f3f3;
    transition:top 0.5s ease;
    box-shadow: 0 -3px 5px rgba(50,50,50,0.1);
}

.commit-container 
{
    height:30px;
    line-height:30px;
}

.pay-amount
{
    /*float:left;*/
    margin:5px;
}

.commit-amount
{
    /*float:right;*/
    margin:5px;
}

.cart-container 
{
    position:relative;
}

.follow
{
    width:60px;
    height:20px;
    line-height:20px;
    position:absolute;
    left:15px;
    top:5px;
    text-align:center;
    border:1px solid #333;
    border-radius:3px;
    padding:3px;
    cursor:pointer;
    transition:background 0.3s ease;
    display: none;
}

.follow i {
    font-size:14px;
    margin-right:2px;
}

.cart
{
    width:160px;
    height:20px;
    line-height:20px;
    /*position:absolute;*/
    /*left:95px;*/
    margin:0 auto;
    /*top:10px;*/
    /*margin-top:5px;*/
    text-align:center;
    border:1px solid #333;
    padding:3px;
    border-radius:3px;
    cursor:pointer;
    color:#990000;
    transition:background 0.3s ease;
    display: inline-block;
}

.cart i {
    font-size:14px;
    margin-right:2px;
}

.follow:hover, .cart:hover 
{
    background:#fff;
}

/*****************page-index-container******************/

.page-index-container 
{
    position:relative;
    width:100%;
    height:30px;
    margin:20px 0;
}

.page-container 
{
    width:800px;
    margin:0 auto;
    height:30px;
    text-align:center;
}

.pages 
{
    margin-right:30px;
}

.pages span
{
    display:inline-block;
    height:20px;
    line-height:20px;
    padding:3px;
    min-width:20px;
}

.page
{
    border:1px solid #999;
    cursor:pointer;
}

.page:hover 
{
    background:#ccc;
}

.page-focus
{
    background:#333;
    color:#eee;
}

.page-focus 
{
    
}

#page-index 
{
    width:24px;
    height:24px;
}

.goto-page 
{
    padding:3px;
    border:1px solid #999;
    background:#ccc;
    cursor:pointer;
}

.goto-page:hover
{
    background:#fff;
}

