﻿/*---------------------------------------------
NEWFACE
---------------------------------------------*/

#home .newface {
    /*
background: url(/img/home/bg_newface.jpg) no-repeat 0px 63px ;
height:495px;
*/
    background: url(/img/home/bg_newface.jpg) repeat 0px 63px;
    height: 566px;
    width: 280px;
    position: relative;
    margin-top: 5px;
}

    #home .newface .photo {
        width: 230px;
        height: 306px;
        position: absolute;
        top: 70px;
        left: 25px;
    }

    #home .newface h3 {
        position: absolute;
        top: 380px;
        left: 25px;
        text-align: center;
        font-size: 16px;
        color: #E93F76;
    }

    #home .newface .bodysize {
        position: absolute;
        text-align: center;
        font-size: 12px;
        top: 400px;
        left: 25px;
        color: #E93F76;
    }

    #home .newface p {
        position: absolute;
        top: 474px;
        left: 25px;
        font-size: 10px;
        width: 230px;
        height: 62px;
        overflow: auto;
        text-overflow: ellipsis;
    }

    #home .newface .btn {
        position: absolute;
        top: 541px;
        left: 190px;
        font-size: 10px;
        background: #EB5788;
        text-align: center;
        padding: 3px;
    }

        #home .newface .btn a {
            color: #FFF;
        }

    #home .newface .position {
        position: absolute;
        bottom: 75px;
        right: 0px;
    }

    #home .newface ul.typeIcon li {
        text-align: center !important;
        background-image: none !important;
        display: block;
        width: calc(100%/2 - 2px);
        background-color: #ff8cc5 !important;
        color: #ffffff;
        font-size: 12px;
        margin: 1px;
        padding: 5px 0 !important;
        border: none !important;
        float: left;
        border-radius: 0;
        height: auto !important;
    }

    #home .newface ul.typeIcon {
        padding: 3px;
        position: absolute;
        bottom: 93px;
        width: calc(100% - 6px);
    }

    #home .newface .ic_girl {
        position: absolute;
        top: 0;
        left: 0;
    }


.rankBlock {
    position: absolute;
    top: 88px;
    left: 167px;
    z-index: 10;
}

    .rankBlock span {
        font-size: 16px;
        display: inline-block;
        float: right;
        padding: 2px 10px;
        transform: rotate(-5deg);
        box-shadow: 1px 1px 2px rgba(0,0,0,.5);
    }

        .rankBlock span:first-letter {
            font-size: 18px;
        }

        .rankBlock span.beginner {
            background: #ffce9e;
            background: -moz-linear-gradient(-45deg, #ffce9e 0%, #feeded 35%, #ffce9e 100%);
            background: -webkit-linear-gradient(-45deg, #ffce9e 0%,#feeded 35%,#ffce9e 100%);
            background: linear-gradient(135deg, #ffce9e 0%,#feeded 35%,#f9cc00 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffce9e', endColorstr='#ffce9e',GradientType=1 );
            color: #9a0d08;
        }

        .rankBlock span.clover {
            background: #8bb4b9;
            background: -moz-linear-gradient(-45deg, #e9f2ff 0%, #ffffff 35%, #8bb4b9 100%);
            background: -webkit-linear-gradient(-45deg, #e9f2ff 0%,#ffffff 35%,#8bb4b9 100%);
            background: linear-gradient(135deg, #e9f2ff 0%,#ffffff 35%,#8bb4b9 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9f2ff', endColorstr='#8bb4b9',GradientType=1 );
            color: #8b765c;
        }

        .rankBlock span.platinum {
            background: #d3d3d4;
            background: -moz-linear-gradient(-45deg, #caccc2 0%, #ffffff 35%, #d3d3d4 100%);
            background: -webkit-linear-gradient(-45deg, #caccc2 0%,#ffffff 35%,#d3d3d4 100%);
            background: linear-gradient(135deg, #caccc2 0%,#ffffff 35%,#d3d3d4 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#caccc2', endColorstr='#d3d3d4',GradientType=1 );
            color: #532e02;
        }

        .rankBlock span.gold {
            background: #e0b53d;
            background: -moz-linear-gradient(-45deg, #e6be3c 0%, #fffac3 35%, #e0b53d 100%);
            background: -webkit-linear-gradient(-45deg, #e6be3c 0%,#fffac3 35%,#e0b53d 100%);
            background: linear-gradient(135deg, #e6be3c 0%,#fffac3 35%,#e0b53d 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6be3c', endColorstr='#e0b53d',GradientType=1 );
            color: #532e02;
        }

        .rankBlock span.silver {
            background: #8e8e8e;
            background: -moz-linear-gradient(-45deg, #8e8e8e 0%, #dedddd 35%, #8e8e8e 100%);
            background: -webkit-linear-gradient(-45deg, #8e8e8e 0%,#dedddd 35%,#8e8e8e 100%);
            background: linear-gradient(135deg, #8e8e8e 0%,#dedddd 35%,#8e8e8e 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8e8e8e', endColorstr='#8e8e8e',GradientType=1 );
            color: #2f2f2f;
        }

        .rankBlock span.regular {
            background: #f674ad;
            background: -moz-linear-gradient(-45deg, #f87aab 0%, #fed6e0 35%, #f674ad 100%);
            background: -webkit-linear-gradient(-45deg, #f87aab 0%,#fed6e0 35%,#f674ad 100%);
            background: linear-gradient(135deg, #f87aab 0%,#fed6e0 35%,#f674ad 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f87aab', endColorstr='#f674ad',GradientType=1 );
            color: #850236;
        }