@import 'select.css';

/*搜索页*/
.search-breadcrumb {
    min-height: 37px;
    line-height: 37px;
}
.search-breadcrumb .glyphicon-home {
    padding-top: 9px;
    font-size: 16px;
    color: #898989;
}
.search-breadcrumb > span, .search-breadcrumb > div, .search-breadcrumb > i {
    float: left;
}
.search-breadcrumb .icon-arrow-right {
    margin: 0 10px;
    color: #6e6e6e;
}
.search-breadcrumb .search-text, .search-breadcrumb .search-text input {
    background-color: white;
}
.search-text {
    display: inline-block;
    /* width: 112px; */
    height: 22px;
    border: 1px solid #b8b7b9;
    background-color: #f2f2f2;
    vertical-align: middle;
}
.search-text i {
    display: inline-block;
    float: left;
    line-height: 22px;
    cursor: pointer;
    font-size: 14px;
    margin-right: 5px;
}
.search-text .search-input {
    display: inline-block;
    float: left;
    width: 90px;
    height: 20px;
    padding: 0 5px;
    border: none;
    font-size: 14px;
    background-color: #f2f2f2;
}
/*列表*/
.selectcont {
    line-height: 35px;
    position: relative
}
.selectcont > span {
    position: absolute;
    /*left:0;*/
}
.selectcont > ul {
    width: 100%;
    padding-left: 65px;
}
.selectcont li {
    position: relative;
    float: left;
    height: 25px;
    line-height: 25px;
    padding: 0 26px 0 10px;
    background-color: #eeeded;
    font-size: 12px;
    margin-left: 10px;
    margin-bottom: 5px;
    max-width: calc(100% - 10px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius:4px;
}

.selectcont .icon-delete {
    position: absolute;
    right: 8px;
    top: 0;
    font-size: 14px;
    cursor: pointer;
    color: #909090;
}

    .selectcont .icon-delete:hover {
        color: #333;
    }
.list01 li {
    position: relative;
    padding: 0;
    border-left: solid 1px #ccc;
    border-top: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
    background-color: white;
}
.list01-img {
    display: block;
    height: 315px;
    line-height: 315px;
    vertical-align: middle;
    text-align: center;
}
.list01-img img {
    max-width: 100%;
    max-height: 100%;
}
.list01-title {
    display: -webkit-box;
    height: 20px;
    line-height: 20px;
    font-size: 16px;
    color: #666;
}
.list01 .coll, .au-list-box .coll {
    display: none;
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 28px;
    cursor: pointer;
}
.list01 .coll.act, .au-list-box .coll.act {
    color: #D9534F;
}

/*列表页-3列*/
.list01--3 li {
    overflow: hidden;
}
.list01--3 li:nth-child(n+4){
    margin-top: -1px;
}
.list01--3 li:nth-child(3n) {
    border-right: solid 1px #ccc;
}
.list01--3 li:last-child {
    border-right: solid 1px #ccc;
}
/*列表页-4列*/
.list01--4 li {
    overflow: hidden;
    height: 430px;
    height: 405px;
}
.list01--4-s li {
    width: 300px;
}
.list01--4 .list01-img {
    height: 278px;
    line-height: 278px;
}
.list01--4 .list01-img img{
    /*width:278px;*/
}
.list01--4 .list-style{
    padding:0 20px;
}
.list01--4 .list01-title {
    display: -webkit-box;
    height: auto;
    max-height: 40px;
    line-height: 20px;
    font-size: 16px;
    font-family: myFontBold;
    color: #565656;
}
.list01--4 .list01-model{
    height:20px;
    line-height:20px;
    color:#999;
}
.list01--4 .list01-price {
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    font-family: myFontBold;
    color: #c33a32;
}
.list01--4 .list01-view {
    height: 30px;
    line-height:28px;
    width: 114px;
    padding: 0;
    font-size: 12px;
    border-color: #d9d9d9;
}
.list01--4 .list01-view2 {
    position:absolute;
    bottom:25px;
    left:50%;
    margin-left:-101px;
    height: 30px;
    line-height: 30px;
    width: 202px;
    padding: 0;
    border: none;
    background-color: #9ECB5E;
    color: white;
    outline: none;
}
.list01--4 .list01-view2:hover, .list01--4 .list01-view2:focus {
    background-color: #7DB235;
    color: white;
    outline: none;
}
.selectline{
    min-height:37px;
    line-height:37px;
}
.selectline .glyphicon-home{
    position: absolute;
    left: 0;
    top: 10px;
}
/*catalog 列表页*/
.patio-left{
    width:285px;
    padding-left:0;
    padding-right:0;
}
.patio-right {
    width: 915px;
    padding-left: 20px;
    padding-right: 0;
}
    .patio-right .location {
        position: relative;
        padding-right: 300px;
        line-height:40px;
        margin-top:25px;
    }
    .patio-right .location .checked-list{
        padding-top:2px;
    }
.patio-right .location-right{
    position:absolute;
    right:0;
    /*width:300px;*/
    text-align:right;
}
.patio-right .location-right .form-select{
    display:inline-block;
    width:200px;
    margin-left:10px;
    width: 200px;
    height: 40px;
    /*border-color: #567776;*/
}
.patio-right .checked-list
{
    font-size:14px;
}
.patio-right .patiointro-r{
    float: none;
    display: block;
    width:100%;
}
.patio-filter{
    padding-bottom: 40px;
}
.patio-filter>p{
    font-family:myFontBold;
    padding-right:20px;
    font-size:16px;
}
.patio-filter ul{
    overflow:hidden;
}
.patio-filter div>p{
    margin-top:15px;
    font-family:myFontBold;
    color:#565656;
}
.category-item.disabled>p {
    color: #CBCBCB;
}
.category-item.disabled .checkbox {
    pointer-events: none;
}
.category-item.disabled .checkbox label{
    color: #CBCBCB;
}
.patio-filter .checkbox{
    /*margin: 6px 0 2px;*/
    padding-left:0;
}
.patio-filter .checkbox::before {
    content:none;
}
.patio-filter .checkbox label{
    color: #565656;
    white-space: nowrap;
    width: 95%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.patio-filter .iconfont{
    position:absolute;
    right:0;
}
.patio-filter .iconfont.collapsed{
    transform:rotate(180deg);
}
.patio-filter .iconfont.down {
    transform: rotate(-180deg);
}
.patio-filter ul{
    /*max-height: 210px;*/
    /*overflow-y: auto;*/
}
.patio-filter li
{
    float: left;
    width: 50%;
    margin-top:10px;
}
.patio-filter ul::-webkit-scrollbar {
    width: 4px;
}

.patio-filter ul::-webkit-scrollbar-track {
    background-color: #eee;
}

.patio-filter ul::-webkit-scrollbar-thumb {
    background-color: #c2c2c2;
}

.patio-filter ul::-webkit-scrollbar-thumb:hover {
    background-color: #bbb;
}
.checkbox-color{
    position:relative;
}
.checkbox-color input {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border-color:transparent;
}
.checkbox.checkbox-color input:checked{
    border-color:transparent;
}
.checkbox-color input:checked+.iconfont{
    display:block;
}
.checkbox-color .iconfont {
    display: none;
    position: absolute;
    left: 1px;
    top: -1px;
    color: #fff;
}
.rangeline {
    color: #CBCBCB;
    margin-bottom: 5px;
}
.rangeline .input {
    position:relative;
    display:inline-block;
    padding-left:20px;
    width: 100px;
    height: 28px;
    border: 1px solid #CBCBCB;
    border-radius:2px;
}
.rangeline .input-text{
    position:absolute;
    left:0;
    top:0;
    display:inline-block;
    width:20px;
    height:100%;
    line-height:26px;
    text-align:center;
    background-color:#fff;
}
.rangeline input {
    width: 100%;
    height: 100%;
    border:none;
    padding-left:0;
    border-radius:2px;
}
.rangeline button {
    width:70px;
    height:28px;
    line-height:26px;
    padding-left:0;
    padding-right:0;
    border-radius:4px;
}

@media (max-width:768px) {
    .list01--4 li {
        border: solid 1px #ccc;
        height: auto;
    }

        .list01--4 li:nth-child(n+3) {
            margin-top: -1px;
        }

        .list01--4 li:nth-child(2n+2) {
            margin-left: -1px;
        }

        .list01--4 li:last-child {
            border-bottom: 1px solid #ccc;
        }
    .list01--4 .list01-title{
        font-size:14px;
    }
    .list01--4 .list01-img {
        height: 150px;
        line-height: 150px;
    }

    .list01--4 .list-style {
        padding: 10px;
        height: 115px;
    }
    .list01--4 .list01-view2 {
        width: calc(100% - 20px);
        bottom: 10px;
        left: 10px;
        margin-left: 0;
    }

    .patio_logo::before {
        width: 60px;
    }
    .list01--3 li {
        border: solid 1px #ccc;
    }

        .list01--3 li:nth-child(n+2) {
            margin-top: -1px;
        }

        .list01--3 li:last-child {
            border-bottom: 1px solid #ccc;
        }
    .patiotime-banner .fs44 {
        font-size: 26px;
    }

    .diy-banner .fs44 {
        font-size: 26px;
    }
    .brand-type {
        padding: 0;
    }

        .brand-type a {
            width: 50%;
        }

        .brand-type .all {
            width: 100%;
        }
    .selectcont {
        padding-left: 15px;
    }
    .selectline .select-s {
        margin-bottom: 10px;
    }
    .listbanner-search {
        width: 100%;
        padding: 23px 15px;
    }

    .typepanel, .category09 {
        display: none !important;
    }

    .listbanner-search {
        width: auto;
        height: 200px;
    }

    .viewbtns {
        float: none;
    }

    .selectline .col-xs-12.plr0 {
        padding: 0 15px;
    }

    .patio-left {
        width: 100%;
    }
    .patio-right {
        width: 100%;
    }
        
    .diy-banner{
        height:180px;
    }
    .diy-banner .pt90{
        padding-top:70px;
    }
}
@media(min-width:769px){
    .list01 li:hover {
        position: relative;
        z-index: 999;
    }
    .patio-filter.show-pc {
        display: block !important;
    }
}
@media (min-width: 768px) and (max-width: 990px) {
    .list01--3 li:nth-child(n+3) {
        margin-top: -1px;
    }

    .list01--3 li:nth-child(3n) {
        border-right: none;
    }

    .list01--3 li:nth-child(2n), .list01--3 li:last-child {
        border-right: solid 1px #ccc;
    }
    .list01--4 li:nth-child(n+3) {
        margin-top: -1px;
    }

    .list01--4 li:nth-child(3n) {
        border-right: none;
    }

    .list01--4 li:nth-child(2n), .list01--4 li:last-child {
        border-right: solid 1px #ccc;
    }
    .patio-right {
        width: 493px;
    }
        
}
@media (min-width:768px) and (max-width:1120px) {
    .listbanner-search {
        width: 100%;
        padding: 23px 10px;
    }
}
@media (max-width:990px) {
    .listbanner-search {
        padding: 23px 0;
    }
}
@media (min-width: 990px) and (max-width:1200px) {
    .list01--4 li:nth-child(n+4) {
        margin-top: -1px;
    }

    .list01--4 li:nth-child(4n) {
        border-right: none;
    }

    .list01--4 li:nth-child(3n), .list01--4 li:last-child {
        border-right: solid 1px #ccc;
    }

    .list01--4-s li {
        width: 323.3px;
    }
    .brand-type {
        padding: 0 30px;
    }

        .brand-type a {
            width: 130px;
        }
    .patio-right {
        width: 740px;
    }
    
}
@media (min-width: 1200px) {
    .list01--4 li:nth-child(3) {
        border-right: none;
    }

    .list01--4 li:nth-child(n+5) {
        margin-top: -1px;
    }

    .list01--4-s li:nth-child(3) {
        border-right: solid 1px #ccc;
    }

    .list01--4-s li:nth-child(n+5) {
        margin-top: 0;
    }

    .list01--4 li:nth-child(4n) {
        border-right: solid 1px #ccc;
    }

    .list01--4 li:last-child {
        width:calc(25% + 1px);
        border-right: solid 1px #ccc;
    }
    .list01--4 li:last-child:nth-child(4n){
        width:25%;
    }
}
.catelist>li{
    position:relative;
    float:left;
    width:285px;
    margin-right:20px;
    margin-bottom:30px;
    transition:all .4s;
    padding:0;
}
.catelist > li:hover{
    box-shadow: 1px 1px 5px 0px rgba(77, 77, 77, 0.15);
}
.catelist>li:nth-child(3n){
    margin-right:0;
}
.catelist-img{
    display:block;
    width:285px;
    height:190px;
    text-align:center;
}
.catelist-img img{
    position:relative;
    top:50%;
    max-width:100%;
    max-height:100%;
    transform:translateY(-50%);
}
.catelist-info{
    font-size:16px;
    padding:15px;
    height:170px;
    line-height:16px;
    box-sizing:border-box;
}
/*.catelist-info a{
    display:block;
}*/
.catelist-btns {
    position: absolute;
    left: 0;
    bottom: -60px;
    width:100%;
    text-align:center;
    opacity: 0;
    transition: all .6s;
    transition: all .4s;
}
.catelist .btn-det2 {
    display:inline-block;
    width: 120px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    text-align: center;
    border: none;
    background: #FFFFFF;
    font-weight: 500;
    color: #323232;
    box-shadow: 0px 0 5px 0px rgba(77, 77, 77, 0.25);
}
.catelist .btn-det3 {
    display: inline-block;
    width: 120px;
    height: 30px;
    margin-left:15px;
    line-height: 30px;
    font-size: 14px;
    text-align: center;
    border: none;
    background: #567776;
    font-weight: 500;
    color: #fff;
    box-shadow: 0px 0 5px 0px rgba(77, 77, 77, 0.25);
}
.catelist > li:hover .catelist-btns {
    opacity: 1;
    bottom: 20px;
}
.catelist .btn-det2:hover, .catelist .btn-det3:hover {
    box-shadow: 0px 0 5px 0px rgba(77, 77, 77, 0.45);
}
.icarousel {
    position: absolute;
    bottom:15px;
}
.icarousel-wrap {
    position: relative;
    width: 228px;
    margin: 0 14px;
    overflow: hidden;
    background-color: white;
}
.icarousel-imglist {
    height: 70px;
    line-height: 70px;
    overflow:hidden;
}

    .icarousel-imglist li {
        float: left;
        margin: 0 3px;
        width: 70px;
        height: 70px;
        line-height: 66px;
        text-align: center;
        border: 1px solid #fff;
        cursor: pointer;
        box-sizing:border-box;
    }

    .icarousel-imglist li:hover {
        border-color: #EFEFEF;
    }
    .icarousel-imglist a{
        display:block;
    }
    .icarousel-imglist img {
        max-width: 66px;
        max-height: 66px;
        vertical-align: middle;
    }
.icarousel > span {
    position: absolute;
    top: 25px;
    display: block;
    width: 14px;
    height: 20px;
    line-height: 20px;
    cursor: pointer;
    font-size: 18px;
    color: #444;
}
.icarousel > span:hover{
    color:#000;
}
.icarousel > .noclick {
    cursor: default;
    color: #bbb;
}
.icarousel > .noclick:hover {
    color: #bbb;
}
.icarousel .icarousel-prev {
    left: -4px;
}
.icarousel .icarousel-next {
    right: 0;
}

.checked-list{
    display:inline-block;
    overflow:hidden;
    vertical-align:middle;
}
    .checked-list li, .checked-list-item {
        float: left;
        padding: 4px 10px 4px 12px;
        margin: 5px;
        border-radius: 4px;
        line-height: 16px;
        background-color: #EAEAEA;
    }
        .checked-list li .iconfont, .checked-list-item .iconfont {
            padding: 3px;
            margin-left: 3px;
            font-size: 12px;
            color: #333;
            vertical-align: middle;
            cursor: pointer;
            transition: background .4s;
            border-radius: 50%;
        }
.checked-list li .iconfont:hover, .checked-list-item .iconfont:hover {
    background-color:#ccc;
}
.location .checked-list-item {
    height:28px;
    line-height: 1;
    padding: 6px 10px 4px 12px;
}
/*系列详情页 列表2列*/
.itemlist > li {
    width: 585px;
    margin-right: 30px;
    margin-bottom: 50px;
    border: 1px solid #EAEAEA;
    border-radius: 10px;
}
.itemlist > li:nth-child(3n) {
    margin-right: 30px;
}
.itemlist > li:nth-child(2n) {
    margin-right: 0;
}

.itemlist .catelist-img {
    width: 100%;
    height: 500px;
    border-radius:10px 10px 0 0;
    overflow:hidden;
}
.itemlist .catelist-info {
    padding: 10px 20px;
    height: 70px;
    font-size: 14px;
    line-height: 22px;
}
    .itemlist .catelist-info > a {
        font-size: 18px;
        line-height: 22px;
        height: initial;
    }
.itemlist > li:hover .catelist-btns{
    bottom: 40px;
}
.itemlist .btn-det2 {
    width: 340px;
    height: 40px;
    line-height: 38px;
    border: solid 1px #567776;
    color: #567776;
    box-shadow: none;
    font-size: 16px;
}
/*系列详情页 列表3列*/
.itemlist-3 > li {
    width: 380px;
}
.itemlist-3 > li:nth-child(2n) {
    margin-right: 30px;
}
.itemlist-3 > li:nth-child(3n) {
    margin-right: 0;
}
.itemlist-3 .catelist-img {
    height: 380px;
}
.itemlist-3 .btn-det2 {
    width: 190px;
    height: 35px;
    line-height: 33px;
}
@media(min-width:1560px){
    .patio-left {
        width: 345px;
    }
    .patio-right {
        width: 1215px;
        padding-left: 60px;
    }
    .catelist .btn-det2, .catelist .btn-det3{
        width:140px;
        height:35px;
        line-height:35px;
    }
    .catelist-info {
        padding: 30px 15px;
        height: 230px;
    }
    .catelist-info .ells_2{
        line-height:18px;
        height:38px;
    }
    .catelist > li {
        width: 345px;
        margin-right: 60px;
        margin-bottom: 60px;
    }
    .catelist-img {
        width: 345px;
        height: 230px;
    }
    .catelist+.ht-page {
        margin-top: -40px;
    }
    .icarousel {
        bottom: 30px;
    }
    .icarousel-wrap {
        width: 285px;
        margin: 0 19px;
    }
    .icarousel-imglist {
        height: 80px;
        line-height: 80px;
    }
    .icarousel-imglist li {
        margin: 0 8px;
        width: 79px;
        height: 79px;
        line-height: 76px;
    }
    /*系列详情页 列表2列*/
    .itemlist > li {
        width: 760px;
        margin-right: 38px;
        margin-bottom:60px;
    }
    .itemlist > li:nth-child(3n) {
        margin-right: 38px;
    }
    .itemlist > li:nth-child(2n) {
        margin-right: 0;
    }

    .itemlist .catelist-img {
        height: 650px;
    }
    .itemlist .catelist-info {
        padding: 10px 30px;
    }
    .itemlist > li:hover .catelist-btns{
        bottom:50px;
    }
    .itemlist .btn-det2 {
        width: 425px;
        height: 50px;
        line-height: 48px;
    }
    /*系列详情页 列表3列*/
    .itemlist-3 > li {
        width: 494px;
    }
    .itemlist-3 > li:nth-child(2n) {
        margin-right: 40px;
    }
    .itemlist-3 > li:nth-child(3n) {
        margin-right: 0;
    }
    .itemlist-3 .catelist-img {
        height: 494px;
    }
    .itemlist-3 .btn-det2 {
        width: 244px;
        height: 45px;
        line-height: 43px;
    }
}
/*收藏列表*/
.favorlist li {
    border: 1px solid #E7E7E7;
    margin-right: 30px;
}
.favorlist .catelist-info {
    height: 130px;
    font-size:14px;
}
.favorlist .catelist-info a{
    line-height:18px;
}
.favorlist-btns{
    position:absolute;
    bottom:0;
    left:0;
    overflow:hidden;
    width:100%;
}
.favorlist .favorlist-btns > button {
    float: left;
    width: 50%;
    height:36px;
    line-height:34px;
    margin:0;
}
.favorlist-btns .btn-det2{
    color:#565656;
    border-top:solid 1px #e7e7e7;
    background-color:#f7f7f7;
}
/*.favorlist-btns .btn-det3[disabled] {
    background-color: #88A09F;
    pointer-events:none;
}*/
.favorlist .invalid .catelist-img::after {
    position: absolute;
    content: 'Invalid';
    top: 0;
    left: 0;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    line-height:190px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    background-color: rgba(255,255,255,.75);
}
.favorlist .nostock .catelist-img::after {
    position: absolute;
    content: 'Out of stock';
    top: 50%;
    left: 50%;
    z-index: 2;
    display: block;
    width: 160px;
    height: 45px;
    line-height: 45px;
    font-size:20px;
    font-weight:bold;
    background: rgba(255,255,255,.85);
    border: 1px solid #E7E7E7;
    transform: translate(-50%,-50%);
}
.remove-area {
    z-index:3;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding:80px 25px;
    background-color: #fff;
    text-align:center;
}
.remove-area>p{
    font-size:16px;
}
.remove-area>div{
    margin-top:85px;
}
.remove-area .btn{
    width:110px;
    border-radius:4px;
    height:36px;
    line-height:34px;
    padding:0;
}
.remove-area .btn:hover{
    opacity:.9;
}
.remove-area .btn-outline-secondary{
    background-color:#F7F7F7;
    border-color:#e7e7e7;
}
.remove-area .btn-outline-secondary:hover{
    background-color:#F7F7F7;
    border-color:#e7e7e7;
}
.remove-area .btn-outline-success{
    background-color:#F0F5F5;
    border-color:#567776;
    margin-left: 9px;
}
.remove-area .btn-outline-success:hover{
    background-color:#F0F5F5;
    border-color:#567776;
    color:#567776;
}

.searchlist > li:nth-child(3n) {
    margin-right: 20px;
}
.searchlist > li:nth-child(4n) {
    margin-right: 0;
}
@media(min-width:1560px) {
    .searchlist > li:nth-child(3n) {
        margin-right: 60px;
    }
    .searchlist > li:nth-child(4n) {
        margin-right: 0;
    }
    .favorlist li {
        width: 360px;
        margin-right: 60px;
        margin-bottom: 60px;
    }
    .favorlist .catelist-img {
        width: 360px;
        height: 240px;
    }
    .favorlist .invalid .catelist-img::after{
        line-height:240px;
    }
}