.banner{
    height: 500px;
    background-image: url(../img/material/banner.jpg);
}
/*搜索*/
.search-input{
    max-width: 717px;
    margin: 50px auto;
}
.search-input .form-control::-webkit-input-placeholder{
    color: #FFFFFF;
}
.form-control:focus{
    border-color: #fff;
    box-shadow: none;
}
.search-input .form-control{
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    height: 50px;
    background: transparent;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    border-right: none;
    color: #fff;
}
.search-input .input-group-addon{
    border: none;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
}

/*材料列表*/
.table-material {
    /*max-height: 780px;*/
    /*overflow: hidden;*/
}
.table-material .table-td{
    border: 1px solid #E6E6E6;
    border-radius: 6px;
    padding-left: 50px;
    padding-right: 50px;
}
.table-material .table-td:nth-child(even){
    border: 1px solid #ffffff;
}
.table-material .table-td:hover{
    border-color: rgba(32, 68, 187, 1);
    /*background: rgba(32, 68, 187, 0.1);*/
    color: #000;
}
.table-material .table-td:hover .title{
    color: #000;
}
.table-material .table-td:hover p{
    color: #000;
    opacity: 0.9;
}

/*下拉按钮 - 和评价样式重叠了*/
.material-filter.affix{
    padding: 10px 0;
}
.material-filter .btn-default{
    color: #43485E;
    border-color: #E6E6E6;
    border-radius: 4px;
}
.material-filter .btn-default:hover{
    border-color: #E6E6E6;
    background-color: #fff;
    color: #43485E;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus{
    outline:none;
    outline-offset:unset;
    box-shadow: none;
    background-color: #fff;
    border-color: var(--theme);
    color: var(--theme);
}
.btn-default:active:hover,
.btn-default.active:hover,
.open > .dropdown-toggle.btn-default:hover,
.btn-default:active:focus,
.btn-default.active:focus,
.open > .dropdown-toggle.btn-default:focus,
.btn-default:active.focus,
.btn-default.active.focus,
.open > .dropdown-toggle.btn-default.focus{
    background-color: #fff;
}
.btn-group.open .dropdown-toggle{
    box-shadow: none;
}
.material-filter button.active{
    border-color: var(--theme);
    color: var(--theme);
    box-shadow: none;
    background-color: #fff;
}
/*下拉筛选项*/
.filter-item>span{
    vertical-align: middle;
}
.filter-item .dropdown-toggle {
    width: 200px;
    height: 33px;
    padding: 1px 0 1px 10px;
    text-align: left;
    font-weight: 500;
    font-size: 14px;
}
.dropdown-toggle .iconfont{
    position: absolute;
    right: 5px;
    top: 4px;
}
.filter-item .dropdown-menu{
    width: 200px;
    min-width: 104px;
    border-color: var(--theme);
    font-size: 16px;
    text-align: center;
}
.dropdown-menu > li{
    padding: 3px 0;
    cursor: pointer;
}
.dropdown-menu > li:hover{
    opacity: 0.9;
    color: var(--theme);
}

.wrapper {
    background: #ffffff;
    width: 100%;
    position: relative;
    padding: 118px 0 32px 0;
}
.wrapper-detail{
    padding-bottom: 52px;
}
h4{
    margin: 0;
}

.wrapper .content {
    width: 1058px;
    margin: 0 auto;
    white-space: nowrap;
    background: #ffffff;
}
.wrapper .sg-instruction{
    letter-spacing: 8px;
}
.wrapper-detail .content{
    width: 1048px;
}
.wrapper .banner{
    width: 100%;
    height: 516px;
    background-image: url(../img/material/banner.jpg);
}
.wrapper .banner h1{
    padding-top: 230px;
    font-size: 42px;
    color: #fff;
    text-align: center;
    margin: 0;
}

.wrapper .content .left {
    margin-top: 70px;
}

.wrapper .content .right {
    white-space: normal;
}

.table-material {
    margin-top: 70px;
    padding: 0 3px;
    max-height: 1195px;
    overflow: hidden;
}

.table-material .table-td{
    border:1px solid #eee;
    margin-bottom: 38px;
}
.table-material .table-td > a{
    color: #000;
    display: block;
    text-decoration: none;
    padding: 22px 24px;
    transition: all .5s;
}
.table-material .table-td > a:hover,
.table-material .table-td > a:active{
    box-shadow: 0 0 10px #ccc;
}
.table-material .right{
    overflow: hidden;
}
.table-material .right .r-top .title{
    font-size: 18px;
    font-weight: bold;
}
.table-material .right .r-top div{
    font-size: 16px;
    padding: 18px 0;
}
.table-material .right p{
    color: #999;
    height: 60px;
    overflow: hidden;
}

.table-material .material-img{
    width: 264px;
    height: 155px;
    border: 1px solid #eee;
    border: 1px solid rgba(16,5,11,0.14);
    float: left;
    margin-right: 22px;
}
.table-material img {
    width: 100%;
    height: 100%;
}
.right-content-title{
    height: 154px;
}
.right-content-title h4{
    font-size: 28px;
    color: #000;
    text-align: center;
    padding-top: 66px;
    transition:all .5s;
    opacity: 0;
    transform: translateY(-80px);
}
.wrapper.active .right-content-title h4{
    opacity: 1;
    transform: translateY(0);
}

.wrapper-detail .largeImg{
    height: 740px;
}

.detail-top{
    padding-top: 26px;
}
.detail-top .icon-home{
    /* display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: middle; */
}
.detail-top,
.detail-top a{
    color: #666;
    text-decoration: none;
    font-size: 16px;
}
.detail-title {
    display: inline-block;
    font-size: 24px;
    margin-bottom: 24px;
    margin-top: 60px;
    /* font-weight: bold; */
    color: #000;
    text-align: center;
    line-height: 38px;
}
.detail-item .detail-title em{
    display: inline-block;
    width: 38px;
    height: 38px;
    margin-right: 20px;
    vertical-align: top;
    background-image: url(../img/material/spIcon01.png);
    background-repeat: no-repeat;
    background-position: 0 7px;
}
.detail-item .detail-title .icons02{
    background-position: 0 -77px;
}
.detail-item .detail-title .icons03{
    background-position: 0 -162px;
}
.detail-item .detail-title .icons04{
    background-position: 0 -246px;
}

.detail-content {
    padding-left: 56px;
    white-space: normal;
}

.chevron-down {
    position:absolute;
    top: 16px;
    width: auto!important;
    padding-left: 7px;
    padding-right: 7px;
}
.condition-list .condition-item{
    float: left;
    width: 33.33%;
}
.condition-list .select-input input{
    cursor: pointer;
    border-radius: 5px;
    height: 38px;
    border: 1px solid #aaa;
    outline: none;
    width: 130px;
    padding-left: 10px;
    color: #aaa;
}
.condition-list .condition-item .list-title{
    margin-right: 12px;
}

.condition-list .select-input>ul{
    display: none;
    position: absolute;
    width: 100%;
    background-color: #fff;
    border: 1px solid #eee;
    /* max-height: 300px;
    overflow: auto; */
    border-radius: 5px;
    z-index: 1;
}
.condition-list .select-input>ul li{
    line-height: 28px;
    cursor: pointer;
    color: #aaa;
}
.condition-list .select-input>ul li>span{
    display: block;
    padding: 4px;
    border-radius: 5px;
    transition:all .35s;
}
.condition-list .select-input>ul li:hover>span{
    color: var(--theme);
    background-color: #eee;
}
.condition-list .select-input{
    display: inline-block;
    position: relative;
    text-align: center;
}

.condition-list .select-input .icons{
    position: absolute;
    right: 12px;
    top: 14px;
    font-size: 12px;
    color: #000;
    transform: scaleX(.7);
}

.condition-list .active{
    color: var(--theme);
    background-color: #f7f7f7;
}

.condition-list li.submenu-container{
    padding: 0;
}

.condition-list .submenu {
    max-height: 0;
    transition: all 1s;
}
.condition-list .submenu >li span{
    display: inline-block;
}

.constraint-show{
    max-height: 2000px!important;
}

.constraint-hide{
    height: 0;
}

.condition-selected{
    color: var(--theme);
    border-bottom: solid 1px var(--theme);
}

.wrapper-detail div[view-pic]{
    overflow: hidden;
}
.wrapper-detail .img-container{
    width: 2000%;
    /* margin-left: 392px; */
}

.wrapper-detail .img-cell-container {
    width: 242px;
    height: 220px;
    margin: 20px 10px;
    float: left;
    border: 1px solid transparent !important;
    transition: all .5s;
}
.wrapper-detail .img-cell-container .detail-box{
    position: relative;
}
.wrapper-detail .img-cell-container.active {
    border: 1px solid #eee !important;
    box-shadow: 0 0 10px #ccc;
}
.wrapper-detail .img-cell-container .detail-box:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 172px;
    top: 0;
    left: 0;
    background-color: #000;
    opacity: 0.4;
    transition:all .5s
}
.wrapper-detail .img-cell-container.active .detail-box:after{
    opacity: 0;
}
.wrapper-detail .img-cell-container img{
    width: 100%;
    height: 172px;
}

.img-container .border-container {
    width: 100%;
    border: 1px solid #ffffff;
}

.img-container .border-container >img{
    width:100%;
}

.img-container .border-container:hover{
    border: 1px solid #e4eaee!important;
    box-shadow: 0px 0px 3px rgba(84,126,155,.26);
}

.img-container .img-name-title {
    padding: 15px;
    font-size: 16px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cursor-pointer{
    cursor: pointer;
}
.material-desc{
    float: left;
    width: 503px;
    height: 242px;
    overflow: hidden;
    border:1px solid #eee;
    border:1px solid rgba(0,0,0,.1);
    box-shadow: 0 0 10px #e2e2e2;
    transform: scaleY(0);
    transition:all .5s .5s;
}
.material-desc.r{
    transition-delay: .6s;
    float: right;
}
.wrapper.active .material-desc{
    transform: scaleY(1);
}

.material-desc .desc-content {
    height: 250px;
    padding-top: 60px;
    transition:all .5s;
}

.material-desc .desc-title {
    text-align: center;
    font-size: 20px;
    color: #000;
    margin-top: 14px;
    transition:all .5s;
}

.material-desc .desc-content .desc-icon {
    background-repeat: no-repeat;
    background-position: center;
    width: 84px;
    height: 84px;
    margin: 0 auto;
    transition:all .5s;
}

.material-desc .desc-content .desc-detail {
    margin-top: 120px;
    color:#fff;
    transition:all .35s;
    padding: 24px 30px 0;
    transform: scale(1.2);
    text-indent: 2em;
}
.material-desc .desc-content:hover{
    background-color: var(--theme);
    padding-top: 0;
}
.material-desc .desc-content:hover .desc-icon{
    height: 30px;
    transform: scale(.5);
    opacity: 0;
}
.material-desc .desc-content:hover .desc-title{
    color: #fff;
}
.material-desc .desc-content:hover .desc-detail {
    margin-top: 0;
    transform: scale(1);
}

.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.transit{
    transition: all .4s;
}

.expand {
    transform: rotate(180deg);
}

.detail-name{
    font-weight: bold;
    font-size: 16px;
    line-height: 50px;
    color: #022d49;
}

.detail-table thead td{
    font-size: 14px;
    color: #576670;
    white-space: nowrap;
}

.detail-table tbody td{
    font-size: 14px;
    color: #000000;
    border: none!important;
    padding-top: 13px!important;
    padding-bottom: 13px!important;
}


/* animate */
.wrapper .table-td{
    transform: translateX(-2000px);
    transition:all .5s;
}
.wrapper .table-td:nth-of-type(5n+1){
    transition-delay: 0s;
}
.wrapper .table-td:nth-of-type(5n+2){
    transition-delay: .1s;
}
.wrapper .table-td:nth-of-type(5n+3){
    transition-delay: .2s;
}
.wrapper .table-td:nth-of-type(5n+4){
    transition-delay: .3s;
}
.wrapper .table-td:nth-of-type(5n+5){
    transition-delay: .4s;
}
.wrapper .table-td.active{
    transform: translateX(0);
}