.sp-number-page span {
    color: #000;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 16px;
    padding: 5px 10px;
    display: block;
    font-family: "Tahoma", sans-serif;
    background: #fff;
    float: left;
    margin-right: 10px;
    border: none;
    border-radius: 3px;
}

.sp-number-page span.curlink,
.sp-number-page span:hover
{
    background: #f60;
    color: #fff;
}
.sp-number-page span.curlink {
    padding: 6px 12px;
}
.sp-number-page span a{
    color: #000;
    font-size: 14px;
    font-weight: bold;
    line-height: 16px;
    text-transform: uppercase;
    padding: 0;
    margin: 0;
    display: block;
    font-family: "Tahoma", sans-serif;
    height: auto;
}
.sp-number-page span:hover a{
    color: #fff;
}

.sp-content-r-rk ul li > .col-txt-r.ranking h4 {
    font-size: 15px;
}

@media (min-width: 240px) and (max-width: 478px) {
    .sp-generation > .g2 > .col-gen2{width: 45%;display: inline-block;}
    .sp-generation > .g2 > .col-gen2.right{
        float: right;
    }
    .sp-generation > .g2 > .col-gen2 > .area {
        padding: 10px;
        border: #666 1px solid;
        margin-top: 0px;
        float: left;
        box-sizing: border-box;
        width: 100%;
    }
    .sp-generation > .g2 > .col-gen2 > .area > a > .sp-txt > h3 {text-align:center; color:#CCC; font-size:14px; font-weight:normal; margin:0; overflow:hidden; height:32px; padding:10px;}
    .sp-generation > .g2 > .col-gen2 > .area > a > .sp-txt > h3 > i {font-size:18px;}

    /*.sp-generation .g3{display: inline-block;}*/
    .sp-generation .g3 > .sp-title {text-align:center; font-size:14px; color:#fff; position: absolute; left:0; right:0; margin-top: 180px;}
    .sp-generation .g3 > .area01 {padding:10px; border:#666 1px solid;margin-top:60px;float:left; box-sizing:border-box;width:50%;}
    .sp-generation .g3 > .area01:before {
        content: '';
        height: 60px;
        background: #666;
        position: absolute;
        width: 1px;
        margin-left: 28px;
        margin-top: -71px;
    }
    .sp-generation .g3 > .area01 > a > .sp-txt > h4 {text-align:center; color:#CCC; font-size:13px; font-weight:normal;margin:0;overflow:hidden;height:50px;padding:10px;}
    .sp-generation .g3 > .area01 > a > .sp-txt > h4 > i {font-size:18px;}

    .box-vdo .txt > img {
        margin-bottom: 14%;
        width: 45px;
    }
}
@media screen and (max-width: 1024px) {
    .sp-content-kennels ul li img {
        height: 172px;
    }
}
@media (min-width: 768px) and (max-width: 992px) { 
    .sp-generation > .g1 > .area {
        margin-top: 82%;
    }

    .sp-generation > .g2 {width:55%; float:left; box-sizing:border-box;}
    .sp-generation > .g2 > .sp-title {text-align:center; font-size:18px; color:#fff;width: 40%;}
    .sp-generation > .g2 > .col-gen2 {width: 100%; display: inline-block;}
    .sp-generation > .g2 > .col-gen2 > .area {padding:10px; border:#666 1px solid; width: 48%; display: inline-block;margin-top: 20%;}
    .sp-generation > .g2 > .col-gen2 > .area.last{margin-top: 18%;}
    /*.sp-generation > .g2 > .col-gen2 > .area > a > .sp-pic {width:50%; float:left; box-sizing:border-box;}*/
    /*.sp-generation > .g2 > .col-gen2 > .area > a > .sp-txt {width:50%; float:left; box-sizing:border-box;}*/
    .sp-generation > .g2 > .col-gen2 > .area > a > .sp-txt > h3 {text-align:center; color:#CCC; font-size:14px; font-weight:normal;margin:0; overflow:hidden; height:43px; padding:10px;}
    .sp-generation > .g2 > .col-gen2 > .area > a > .sp-txt > h3 > i {font-size:18px;}

    .sp-generation > .g2 > .area02 {
        margin-top: 10%;
    }
    .sp-generation > .col-01 > .line01 {
        margin-top: 820%;
    }
    .sp-generation > .col-01 > .line02 {
        margin-top: 474%;
    }

    .sp-generation .g3 {width:38%; float:right; box-sizing:border-box;display: inline-block;margin: 0 0 10px 0;}
    .sp-generation .g3.first {margin-top: -26px;}
    .sp-generation .g3 > .sp-title {text-align:center; font-size:18px; color:#fff;margin-bottom: 10px;}
    .sp-generation .g3 > .area01 {padding:10px; border:#666 1px solid;display: inline-block;margin-bottom: 3px;}
    .sp-generation .g3 > .area01.top:before {
        content: '';
        height: 1px;
        background: #666;
        position: absolute;
        width: 34px;
        margin-left: -45px;
        margin-top: 100px;
    }

    .sp-generation .g3 > .area01.buttom:before {
        content: '';
        height: 1px;
        background: #666;
        position: absolute;
        width: 34px;
        margin-left: -45px;
        margin-top: 72px;
    }


    /*.sp-generation .g3 > .area01 > a > .sp-pic {width:30%; float:left; box-sizing:border-box;}*/
    /*.sp-generation .g3 > .area01 > a > .sp-txt {width:70%; float:left; box-sizing:border-box;}*/
    .sp-generation .g3 > .area01 > a > .sp-txt > h4 {text-align:center; color:#CCC; font-size:14px; font-weight:normal;margin:0; overflow:hidden; height:43px; padding:5px;}
    .sp-generation .g3 > .area01 > a > .sp-txt > h4 > i {font-size:18px;}

    .box-vdo .txt > img {
        margin-bottom: 14%;
        width: 45px;
    }

    .sp-content-kennels ul li img {
        height: 140px;
    }
}

@media (max-width: 1279px) and (min-width: 993px){
    /*.sp-generation > .g1 > .area {
        margin-top: 82%;
    }*/

    .sp-generation > .g2 {width:65%; float:left; box-sizing:border-box;}
    .sp-generation > .g2 > .sp-title {text-align:center; font-size:18px; color:#fff;width: 40%;}
    .sp-generation > .g2 > .col-gen2 {width: 100%; display: inline-block;}
    .sp-generation > .g2 > .col-gen2 > .area {
        padding: 6px;
        border: #666 1px solid;
        width: 44%;
        display: inline-block;
        margin-top: 6%;
    }
    .sp-generation > .g2 > .col-gen2 > .area.last{margin-top: 3%;}
    .sp-generation > .g2 > .col-gen2 > .area > a > .sp-pic {width:50%; float:left; box-sizing:border-box;}
    .sp-generation > .g2 > .col-gen2 > .area > a > .sp-txt {width:50%; float:left; box-sizing:border-box;}
    .sp-generation > .g2 > .col-gen2 > .area > a > .sp-txt > h3 {text-align:center; color:#CCC; font-size:14px; font-weight:normal;margin:0; overflow:hidden; height:43px; padding:10px;}
    .sp-generation > .g2 > .col-gen2 > .area > a > .sp-txt > h3 > i {font-size:18px;}

    .sp-generation > .g2 > .area02 {
        margin-top: 10%;
    }
    /*.sp-generation > .col-01 > .line01 {
        margin-top: 820%;
    }
    .sp-generation > .col-01 > .line02 {
        margin-top: 474%;
    }*/

    .sp-generation .g3 {width:46%; float:right; box-sizing:border-box;display: inline-block;margin: 0 0 10px 0;}
    .sp-generation .g3.first {margin-top: -26px;}
    .sp-generation .g3 > .sp-title {text-align:center; font-size:18px; color:#fff;margin-bottom: 10px;}
    .sp-generation .g3 > .area01 {padding:6px; border:#666 1px solid;display: inline-block;margin-bottom: 3px;}
    .sp-generation .g3 > .area01.top:before {
        content: '';
        height: 1px;
        background: #666;
        position: absolute;
        width: 50px;
        margin-left: -58px;
        margin-top: 36px;x;
    }

    .sp-generation .g3 > .area01.buttom:before {
        content: '';
        height: 1px;
        background: #666;
        position: absolute;
        width: 50px;
        margin-left: -58px;
        margin-top: 24px;
    }


    .sp-generation .g3 > .area01 > a > .sp-pic {width:30%; float:left; box-sizing:border-box;}
    .sp-generation .g3 > .area01 > a > .sp-txt {width:70%; float:left; box-sizing:border-box;}
    .sp-generation .g3 > .area01 > a > .sp-txt > h4 {text-align:center; color:#CCC; font-size:14px; font-weight:normal;margin:0; overflow:hidden; height:43px;}
    .sp-generation .g3 > .area01 > a > .sp-txt > h4 > i {font-size:18px;}

    .box-vdo .txt > img {
        margin-bottom: 12%;
        width: 45px;
    }
}
@media (min-width: 1280px) {

    .sp-generation > .g2 {width:65%; float:left; box-sizing:border-box;}
    .sp-generation > .g2 > .sp-title {text-align:center; font-size:18px; color:#fff;width: 40%;}
    .sp-generation > .g2 > .col-gen2 {width: 100%; display: inline-block;}
    .sp-generation > .g2 > .col-gen2 > .area {padding:10px; border:#666 1px solid; width: 40%; display: inline-block; margin-top: 6%;}
    .sp-generation > .g2 > .col-gen2 > .area.last{margin-top: 5%;}
    .sp-generation > .g2 > .col-gen2 > .area > a > .sp-pic {width:50%; float:left; box-sizing:border-box;}
    .sp-generation > .g2 > .col-gen2 > .area > a > .sp-txt {width:50%; float:left; box-sizing:border-box;}
    .sp-generation > .g2 > .col-gen2 > .area > a > .sp-txt > h3 {text-align:center; color:#CCC; font-size:14px; font-weight:normal;margin:0; overflow:hidden; height:43px; padding:10px;}
    .sp-generation > .g2 > .col-gen2 > .area > a > .sp-txt > h3 > i {font-size:18px;}

    .sp-generation > .g2 > .area02 {
        margin-top: 10%;
    }

    .sp-generation .g3 {width:50%; float:right; box-sizing:border-box;display: inline-block;margin: 0 0 10px 0;}
    .sp-generation .g3.first {margin-top: -26px;}
    .sp-generation .g3 > .sp-title {text-align:center; font-size:18px; color:#fff;margin-bottom: 10px;}
    .sp-generation .g3 > .area01 {padding:10px; border:#666 1px solid;display: inline-block;}
    .sp-generation .g3 > .area01:before {
        content: '';
        height: 1px;
        background: #666;
        position: absolute;
        width: 60px;
        margin-left: -70px;
        margin-top: 40px;
    }


    .sp-generation .g3 > .area01 > a > .sp-pic {width:30%; float:left; box-sizing:border-box;}
    .sp-generation .g3 > .area01 > a > .sp-txt {width:70%; float:left; box-sizing:border-box;}
    .sp-generation .g3 > .area01 > a > .sp-txt > h4 {text-align:center; color:#CCC; font-size:14px; font-weight:normal;margin:0; overflow:hidden; height:43px; padding:5px;}
    .sp-generation .g3 > .area01 > a > .sp-txt > h4 > i {font-size:18px;}

    .box-vdo .txt > img{
        margin-bottom: 12%;
    }

    .sp-content-kennels ul li img {
        height: 164px;
    }
}
@media screen and (max-width: 420px) {
    .sp-content-kennels ul li img {
        height: 145px;
    }
}
@media screen and (max-width: 380px) {
    .sp-content-kennels ul li img {
        height: 129px;
    }
}
@media screen and (max-width: 320px) {
    .sp-content-kennels ul li img {
        height: 145px;
    }
}