﻿/*修正*/
.kl-search .font-select .common dd li a{
    padding: 0 4px;
}

/*案例、效果图页面*/
/*********list***start*******************/
.kl-list > ul{
    width:1220px;
}

.kl-list .item {
    position: relative;
    width: 285px;
    margin: 20px 20px 0 0;
    overflow: hidden;
    display: block;
    float: left;
    border: 1px solid #dfdfdf;
    background: #fff;
}

    .kl-list .item > .item-img-box {
        position: relative;
        height: 195px;
        overflow:hidden;
    }
    .kl-list .item > .item-img-box a {
        display: block;
    }

    .kl-list .item > .item-img-box img {
        width: 285px;
        height: 195px;
    }
    .kl-list .item > .item-img-box .look-big-pic{
        position:absolute;
        top:0;
        right:0;
        width:26px;
        height:26px;
    }
    .kl-list .item > .item-img-box .look-big-pic .bg{
        position:absolute;
        right:-150%;
        top:-150%;
        width:300%;
        height:300%;
        background-color: #000;
        border-radius:50%;
        opacity: 0.2;
        -moz-opacity: 0.2;
        -webkit-opacity: 0.2;
        filter: alpha(opacity=20);
    }
    .kl-list .item > .item-img-box .look-big-pic .bigpic{
        position:relative;
        top: 6px;
        left: 1px;
        width: 24px;
        height: 24px;
        font-weight:bold;
        display: inline-block;
        border: none;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 24px;
        background-image: url("data:image/svg+xml,%3Csvg t='1629170444955' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='1123' width='200' height='200'%3E%3Cpath d='M645.20465066 652.77769919c87.74906347-83.36907413 124.03052053-207.39595413 95.06725013-324.92020586A336.9679072 336.9679072 0 0 0 177.05551679 168.04067519C46.11822933 297.84564586 43.81354666 508.78054399 171.89637653 641.41084479c128.0755488 132.63394133 338.96311467 137.691136 473.25730133 11.3668544h0.0509728z m35.42949013 36.75477334c-154.1552352 148.8504608-399.79144533 144.5542112-548.64554666-9.5973824C-16.86914881 525.78349546-12.57289921 280.14364479 141.58233599 131.28954346c154.1552352-148.85410133 399.79144533-144.56149333 548.64554667 9.5973824 148.85410133 154.15159467 144.56149333 399.79144533-9.59374187 548.64554667z m0 0' fill='%23ffffff' p-id='1124'%3E%3C/path%3E%3Cpath d='M669.35466666 685.73866666c-14.21402987-12.4336352-4.88607253-21.15720533 8.0791328-34.39911787 17.40709013-17.78574187 20.50912747-22.380544 34.72679787-9.95054933l280.1518368 249.27709867c24.64881813 21.495808 27.68896 30.081024 14.68370453 46.268416-12.5319392 15.60120853-29.20357013 16.03083413-43.42852267 3.59719786L669.35466666 685.73866666z m57.41681813-20.73122133' fill='%23ffffff' p-id='1125'%3E%3C/path%3E%3Cpath d='M555.80626453 380.95621653a25.52263147 25.52263147 0 0 1 25.52263146 25.52263146 25.52263147 25.52263147 0 0 1-25.52263146 25.526272H276.89233066a25.52263147 25.52263147 0 1 1 0-51.04890346h278.91393387z m0 0' fill='%23ffffff' p-id='1126'%3E%3C/path%3E%3Cpath d='M445.51281813 551.40078933a25.526272 25.526272 0 0 1-51.04526294 0V272.48321386a25.52263147 25.52263147 0 0 1 51.04526294 0v278.91757547z m0 0' fill='%23ffffff' p-id='1127'%3E%3C/path%3E%3C/svg%3E");
    }
    .kl-list .item > .item-img-box .look-big-pic.active .bigpic{
        background-image: url("data:image/svg+xml,%3Csvg t='1629207702686' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='973' width='200' height='200'%3E%3Cpath d='M645.20465066 652.77769919c87.74906347-83.36907413 124.03052053-207.39595413 95.06725013-324.92020586A336.9679072 336.9679072 0 0 0 177.05551679 168.04067519C46.11822933 297.84564586 43.81354666 508.78054399 171.89637653 641.41084479c128.0755488 132.63394133 338.96311467 137.691136 473.25730133 11.3668544h0.0509728z m35.42949013 36.75477334c-154.1552352 148.8504608-399.79144533 144.5542112-548.64554666-9.5973824C-16.86914881 525.78349546-12.57289921 280.14364479 141.58233599 131.28954346c154.1552352-148.85410133 399.79144533-144.56149333 548.64554667 9.5973824 148.85410133 154.15159467 144.56149333 399.79144533-9.59374187 548.64554667z m0 0' fill='%2319fa28' p-id='974'%3E%3C/path%3E%3Cpath d='M669.35466666 685.73866666c-14.21402987-12.4336352-4.88607253-21.15720533 8.0791328-34.39911787 17.40709013-17.78574187 20.50912747-22.380544 34.72679787-9.95054933l280.1518368 249.27709867c24.64881813 21.495808 27.68896 30.081024 14.68370453 46.268416-12.5319392 15.60120853-29.20357013 16.03083413-43.42852267 3.59719786L669.35466666 685.73866666z m57.41681813-20.73122133' fill='%2319fa28' p-id='975'%3E%3C/path%3E%3Cpath d='M555.80626453 380.95621653a25.52263147 25.52263147 0 0 1 25.52263146 25.52263146 25.52263147 25.52263147 0 0 1-25.52263146 25.526272H276.89233066a25.52263147 25.52263147 0 1 1 0-51.04890346h278.91393387z m0 0' fill='%2319fa28' p-id='976'%3E%3C/path%3E%3Cpath d='M445.51281813 551.40078933a25.526272 25.526272 0 0 1-51.04526294 0V272.48321386a25.52263147 25.52263147 0 0 1 51.04526294 0v278.91757547z m0 0' fill='%2319fa28' p-id='977'%3E%3C/path%3E%3C/svg%3E");
    }
    .kl-list .item > .item-img-box .item-link{
        position: absolute;
        width: 285px;
        height: 36px;
        left:0;
        bottom: 0;
        -webkit-transition: all .2s ease-in;
        -o-transition: all .2s ease-in;
        -moz-transition: all .2s ease-in;
        transition: all .2s ease-in;
        -webkit-transform: translate(0, 100%);
        -moz-transform: translate(0, 100%);
        -ms-transform: translate(0, 100%);
        -o-transform: translate(0, 100%);
        transform: translate(0, 100%);
    }
    .kl-list .item:hover .item-link {
        -webkit-transform: translate(0,0);
        -moz-transform: translate(0,0);
        -ms-transform: translate(0,0);
        -o-transform: translate(0,0);
        transform: translate(0,0);
    }

    .kl-list .item > .item-img-box .item-link-tag {
        float:left;
        position:relative;
        width:49%;
        line-height:36px;
        text-align:center;
        color:#fff;
    }
    .kl-list .item > .item-img-box .item-link-tag:last-child {
        float:right;
    }
    .kl-list .item > .item-img-box .item-link-tag .bg{
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        background-color: #fa7b19;
        opacity: 0.8;
        -moz-opacity: 0.8;
        -webkit-opacity: 0.8;
        filter: alpha(opacity=80);
    }
    .kl-list .item > .item-img-box .item-link-tag .txt {
        position:relative;
        top:0;
        left:0;
    }

    .kl-list .item > .item-tit-box{
        padding: 0 10px;
        font-size: 16px;
        color: #333;
        display: block;
        line-height: 25px;
        margin-top: 10px;
        overflow: hidden;
        white-space: unset;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .kl-list .item > .item-flag-box{
        padding: 10px 10px 0 10px;
        overflow: hidden;
        margin-bottom: 14px;
    }

    .kl-list .item > .item-flag-box .flag{
        color: #666;
        border: 1px solid #e5e5e5;
        height: 28px;
        line-height: 28px;
        padding: 0 10px;
        margin-right: 10px;
        display: block;
        float: left;
    }
    .kl-list .item > .item-flag-box .flag.active{
        color:#4e97f7;
    }
    .kl-list .item > .item-flag-box .flag:hover {
        color: #fff !important;
        background-color: #01af63;
        border: 1px solid #01af63;
    }

/*免费设计报价按钮box*/
.kl-btn-box {
    position: absolute;
    width: 200px;
    right: 0px;
    top: 58px;
    padding-right: 10px;
}
/*********list***end*******************/