﻿.contain.food{
    width:100%;
    float:left;
}

.banner{ 
    height:300px;
    width:1200px;
    margin:0px auto;
/*    background:url(../images/banner1.png) no-repeat;
    background-size:100%;
    background-position: center;*/
    margin-bottom:40px;
}
.banner img{
    width: 1200px;
}
.bannerBox .crumbs{
    margin:0px auto !important;
    padding:11px 0px !important;   
    font-size: 12px;
    font-weight: 400;
    color: #666666;
}
.transitionCss{
transition: all 0.3s ;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
}
.width_1200px{
    width:1200px;
}
.width_100{
    width:100%;
}
.mt24{
    margin-top:24px;
}
.menueNav{ margin:0px auto; overflow:hidden; white-space:nowrap;}
.menueNav .search-outline{
    width:410px;
    height: 36px;
    position: relative;
    display: inline-block;
}
.menueNav .search-outline input{
    width:312px;
    height:32px;
    border: 1px solid #00B061;
    padding-left:32px;
    line-height: 32px;
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
}
.menueNav .search-outline .search-img{
    width: 13px;
    height: 13px;
    position: absolute;
    top: 12px;
    left: 10px;
}
.menueNav .search-outline .search-btn{
    width: 62px;
    height: 36px;
    background-color: #00B061;
    line-height: 36px;
    text-align: center;
    color: #FFFFFF;
    font-size: 14px;
    display: inline-block;
    vertical-align: top;
    margin-left: -4.5px;
    border-radius: 0px 100px 100px 0px;
    cursor: pointer;
}
.menueNav .search-outline .search-close{
    width: 14px;
    height: 14px;
    position: absolute;
    right: 70px;
    top: 12px;
    cursor:pointer;
    display: none;
}
.menueNav .menue_bar {
    transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    -webkit-transition: all 0.4s;
    font-size: 16px;
    font-weight: bold;
    color: #666666;
    position: relative;
    top: 25px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    margin: 0px 90px;
    width: 70px;
    letter-spacing: 1.5px;
}
.menueNav .menue_bar.active{
color: #000000;
}
.menueNav .keywords{
    width:770px;
    display: inline-block;
    margin-left: 15.5px;
    vertical-align: top;
}
.menueNav .keywords .keyword-item {
    padding: 11px 12px 11px 10px;
    border-radius: 0px 100px 100px 0px;
    display: inline-block;
    background-color: #ffffff;
    margin-right: 20px;
    margin-bottom: 10px;
    line-height: 14px;
    cursor:pointer;
    margin-left: 771px;
}
.menueNav .keywords .on{
    box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.16);
}
.menueNav .keywords .on .keyword-item-radius{
    background-color: #00B061 !important;
}
.menueNav .keywords .on span{
    color: #00B061 !important;
}
.menueNav .keywords .keyword-item:last-of-type{
    margin-right: 0 !important;
}
.menueNav .keywords .keyword-item .keyword-item-radius {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #D8D8D8;
    display: inline-block;
    margin-right: 4px;
    vertical-align: top;
    margin-top: 5px;
}
.menueNav .keywords .keyword-item span{
    color: #333333;
    font-size: 14px;
}
.menueNav .menue_bar .line{ 
display:block;
height: 2px;
background: #000000;
border-radius: 1px;
width:0px;
opacity:0;
margin:0px auto;
transition: all 0.3s ;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
position:relative;
top:15px;
}
/*活动中的状态*/
.menueNav .menue_bar.active .line {
width: 68px;
opacity: 1;
}
.menueNav .menue_bar:hover{
color: #000000;
}
.menueNav .menue_bar:hover .line{
width: 68px;
opacity: 1;
}
/*作品数量*/
.rightTips{
    position:absolute;
    right:0px;
    bottom:14px;
    font-size: 14px;
    color: #333333;
}
/*搜索*/
.search{
    position:absolute;
    left:0px;
    top:30px;
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    cursor:pointer;
    width: 320px;
    padding:11px 0px;
    background: #F2F2F2;
    border: 1px solid #00B062;
    text-align:left;

}
.cursor{
    cursor:pointer;
}
.icon {
    background: url(/Activity/FoodPackaging/images/search.png) no-repeat;
    background-size: 100%;
    background-position: center;
    transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    width: 14px;
    height: 14px;
    display: inline-block;
    cursor: pointer;
}
.icon.small{
    width:13px !important;
    height:12px !important;
}
.search .searchIcon{
    position:relative;
    margin-right:7px;
    margin-left:10px;
    top:2px;
}
.search.active .searchIcon {
    display: inline-block;
    background: url(/Activity/FoodPackaging/images/search-active.png) no-repeat;
    background-size: 100%;
    background-position: center;
    position: relative;
    margin-right: 7px;
    margin-left: 10px;
    top: 2px;
}
.search:hover .searchIcon {
    display: inline-block;
    background: url(/Activity/FoodPackaging/images/search-active.png) no-repeat;
    background-size: 100%;
    background-position: center;
    position: relative;
    margin-right: 7px;
    margin-left: 10px;
    top: 2px;
}
.searchBox{
    position:absolute;
    left:0px;
    bottom:-167px;
    width: 320px;
    height:139px;
    background: #FFFFFF;
  
    border: 1px solid #CCCCCC;
    box-shadow: 0px 4px 22px 10px rgba(0, 0, 0, 0.2);
    border-radius: 0px 0px 4px 4px;
    display:none;
    z-index:1;
}
.inputBox{
    width: 319px;
    padding:7px 0px;
    background: #FFFFFF;
    border: 0.5px solid #00B062;
    margin:0px auto 18px auto;
    position:relative;
    text-align:left;
}
.inputBox .searchIcon{
   
    position:relative;
    top:1px;
    left:11px;
    margin-right:7px;
}
.inputBox .closeIcon{
    position:absolute;
    right:9px;
    top:9px;
    width:14px;
    height:14px;
    display:none;
    cursor:pointer;
}
    .inputBox:hover .searchIcon {
        display: inline-block;
        width: 14px;
        height: 14px;
        background: url(/Activity/FoodPackaging/images/search-active.png) no-repeat;
        background-size: 100%;
        background-position: center;
        letter-spacing: 2px;
    }
.inputBox .input{
  border:none;
  
  font-size: 14px;
  padding-left:5px;
  color: #000000;
}
 input:-ms-input-placeholder {
    color: #666666;
}/* Internet Explorer 10+ */

input::-webkit-input-placeholder {
    color: #666666;
}/* WebKit browsers */

input::-moz-placeholder {
    color: #666666;
}/* Mozilla Firefox 4 to 18 */

input:-moz-placeholder {
    color: #666666;
}
.labelBox{
    text-align:center;
}
.labelBox .label{
font-size: 12px;
font-weight: 400;
color: #999999;
cursor:pointer;
margin:0px 5px;

}
.labelBox .label:hover {
color:#00B062;
}
.labelBox .label.active {

color:#00B062;
}
.btnBox{
    margin-top: 5px;
}
.btnBox .btn{
display:inline-block;
width: 72px;
padding:6px 0px;
border-radius: 4px;
font-weight: 400;
font-size:14px;
text-align:center;
position:relative;
top: 14px;
cursor:pointer;

}
.btn.sure{
background: #00B062;
color: #FFFFFF;
margin-right:20px;

border: 0.5px solid #00B062;
}
.btn.cancel{
color: #666666;

border: 0.5px solid #999999;
}
.listBox{
    margin:0px auto;
    width: 1200px;
    min-height:680px;
    padding-bottom: 35px;
    position:relative;
}
.empty-box{
    width: 234px;
    margin: 0 auto;
    padding-top: 80px;
    padding-bottom: 80px;
    text-align:center;
    display: none;
}
.empty-box img{
    width: 143px;
    height: auto;
    margin-bottom: 19px;
}
.empty-box .empty-box-title{
    font-size: 14px;
    color: #000000;
    line-height: 14px;
    margin-bottom: 33px;
}
.empty-box .contact{
    width: 110px;
    height: 42px;
    background-color: #00B062;
    border-radius: 4px;
    line-height: 42px;
    text-align: center;
    font-size: 16px;
    color: #ffffff;
    margin: 0 auto;
    cursor: pointer;
}
.list_item {
    box-sizing: border-box;
    text-align: center;
    color: #565656;
    zoom: 1;
    display: inline-block;
    margin-right: 25.5px;
    width: 380px;
    height: 386px;
    vertical-align: top;
    margin-top: 30px;
}
    .list_item:hover .list_item_inner {
        margin-top: -10px;
        margin-bottom: 10px;
        -webkit-transition: .3s ease all;
        -moz-transition: .3s ease all;
        -ms-transition: .3s ease all;
        -o-transition: .3s ease all;
        transition: .3s ease all;
    }
    .list_item:hover .list_item_inner .list_item_div_box {
        box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.2);
        -webkit-transition: box-shadow .3s ease-in;
        -moz-transition: box-shadow .3s ease-in;
        -ms-transition: box-shadow .3s ease-in;
        -o-transition: box-shadow .3s ease-in;
        transition: box-shadow .3s ease-in
    }
.list_item:nth-child(3n){
    margin-right: 0;
}
.list_item_inner {
    width: 380px;
    height: 274.99px;
    position: relative;
    padding-top: 111.01px;
    -webkit-transition: .3s ease all;
    -moz-transition: .3s ease all;
    -ms-transition: .3s ease all;
    -o-transition: .3s ease all;
    transition: .3s ease all;
}
.list_item_inner .list_designer{
    position: absolute;
    top: 332px;
    left: 0;
    width: 380px;
    height: 26px;
    z-index: 4;
}
.list_item_inner .list_a {
    display: inline-block;
    width: 380px;
    height: 386px;
    position: absolute;
    top: 0;
    left: 0;
    color: #000000;
    z-index: 3;
}
.list_item_inner .picture {
    width: 352px;
    height: 264px;
    border-radius: 4px;
    position: absolute;
    top: 0;
    left: 14px;
    z-index: 2;
    box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.16);
}
.list_item_inner .list_a img{
    width:280px;
    height:210px;
}
.list_item_inner .list_info {
    height:18px;
    line-height: 18px;
    border-left: 4px solid #00B061;
    background: #FFFFFF;
    font-size: 18px;
    color: #333333;
    padding-left: 20px;
    font-weight: bold;
}
.list_item_inner .list_info .desc{
    font-size: 14px;
    font-weight: 400;
    color: #000000;
}
.list_item_inner .list_bt {
    height: 26px;
    background: #FFFFFF;
    padding: 20px 24px 27px 24px;
}
.list_item_inner .list_item_div_box{
    z-index: 1;
    height: 91px;
    padding-top: 183px;
    background-color:#ffffff;
        box-shadow: none;
        -webkit-transition: box-shadow .3s ease-in;
        -moz-transition: box-shadow .3s ease-in;
        -ms-transition: box-shadow .3s ease-in;
        -o-transition: box-shadow .3s ease-in;
        transition: box-shadow .3s ease-in
}
.list_item_inner .list_item_div {
    text-align: left;
}
.list_item_inner .list_item_div .smallImg {
    width: 26px;
    vertical-align: middle;
    margin: 0 10px 0 0;
    border-radius: 50%;
}
.list_item_div.list_bt .list_design {
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    vertical-align: top;
    line-height: 26px;
}
.list_item_div.list_bt .list_num {
    font-size: 14px;
    line-height: 26px;
    color: #666666;
    display: inline-block;
    float: right;
}
.pageBox{
    width:1200px;
    padding: 15px 0 50px 0;
    margin:0 auto !important;
    text-align: center;
}
.pageBox .pre-next-btn{
    height: 34px;
    line-height: 34px;
    text-align: center;
    padding: 0 12px;
    background: #FFFFFF;
    border-radius: 4px;
    border: 1px solid #CCCCCC;
    color:#999999;
    font-size: 16px;
    display:inline-block;
    cursor: pointer;
    vertical-align: top;
}
.pageBox .pre-next-btn:hover{
    background-color: #00B062;
    border-color: #00B062;
    color:#ffffff;
}
#pre {
    margin-right: 2.5px;
}
#next {
    margin-left: 2.5px;
}
.pageBox .disappear{
    display:none;
}
.pageBox .page-line{
    display: inline-block;
    vertical-align: top;
}
.pageBox .page-line .page-item{
    font-size: 16px;
    height: 34px;
    line-height: 34px;
    border: 1px solid #CCCCCC;
    padding: 0 12px;
    border-radius: 4px;
    background-color: #FFFFFF;
    text-align: center;
    color: #999999;
    display: inline-block;
    margin: 0 5px;
    cursor: pointer;
}
.pageBox .page-line .page-item:hover{
    background-color: #00B062;
    border-color: #00B062;
    color:#ffffff;
}
.pageBox .page-line .page-ellipsis{
font-size: 16px;
    height: 34px;
    line-height: 24px;
    padding: 0 10px;
    border-radius: 4px;
    text-align: center;
    color: #999999;
    display: inline-block;
    vertical-align: top;
    margin: 0 -4.5px;
}
.pageBox .page-line .active{
    background-color: #00B062;
    color: #ffffff;
    border-color: #00B062;
}
.pageBox .skip-line{
    width: 107px;
    height: 34px;
    line-height: 34px;
    display: inline-block;
    margin: 0 10px 0 16px;
    vertical-align: top;

}
.pageBox .skip-line .skip-text {
    font-size: 16px;
    color: #999999;
    vertical-align: top;
    line-height: 34px;
    display: inline-block;
}
.pageBox .skip-line .skip-input{
    width: 30px;
    height: 34px;
    background: #FFFFFF;
    border-radius: 4px;
    border: 1px solid #CCCCCC;
    display: inline-block;
    margin: 0 5.5px;
    padding: 0 10px;
    vertical-align: top;
}
.pageBox .sub-btn{
    width: 50px;
    height: 34px;
    display: inline-block;
    line-height: 34px;
    text-align: center;
    background-color: #00B062;
    color: #ffffff;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
}


.pageBox_inner {
    width: auto;
    float: left;
    position: relative;
}
.contain.food .page{
    display:inline-block;
}
.contain.food .page li a:hover, .page li.on a {
    background: #00B062;
    border:none;
    text-decoration: none;
    color: #fff;
}
.contain.food .pageTo{
display:inline-block;
font-size: 12px;
color: #000000;
position:absolute;
right:-150px;
top:20px;
}
.contain.food .pageInput{
 display:inline-block;
width: 42px;
padding:7px 0px;
background: #FFFFFF;
border: 1px solid #D2D2D2;
text-align:center;
margin-right:6px;
margin-left:6px;
}
.contain.food .pageSure{
display:inline-block;
width: 42px;
padding:6px 0px;
background: #FFFFFF;
border: 1px solid #D2D2D2;
text-align:center;
margin-left:6px;
font-size:12px;
}
.contain.food .pageSure:hover{

background: #00B062;
border: 1px solid #EDEDED;
color: #FFFFFF;
}