@charset 'UTF-8';

.page-personal {
    height: 100%;
    background: #f5f5f5;    
    header {
        padding: 0 px2rem(25);
        background:#fff;
    }
    .mod-hd {
        padding: 0 px2rem(25);
        padding-top: px2rem(75);
        width: 100%;
        height: px2rem(253);
        background: url(../img/bg.jpg) no-repeat;
        background-size: 100% 100%; 
        @include clearfix;
        img {
            width: px2rem(120);
            height: px2rem(120);
            border-radius: 50%;
            float: left;
        }
        .text-wrap {
            float: right;
            width: px2rem(550);
            h3 {
                font-size: px2rem(40);
                color: #000;
                line-height: px2rem(67);
            }
            .info {
                margin-top: px2rem(5);
                span {
                    font-size: px2rem(24);
                    color: #999;
                    margin-right: px2rem(25);
                    em {
                        color: #666;
                        font-size: px2rem(24);
                    }
                }
            }
        }
    }
    .mod-bd {
        margin-top: px2rem(35);
        background: #fff;
        .tab-nav {
            @include clearfix;
            border-bottom: 1px solid $borderColor; 
            .tab-item {
                height: px2rem(90);
                width: 33.33%;
                text-align: center;
                line-height: px2rem(90);
                float: left;
                &.cur {
                    position: relative;
                    &:after {
                        content: "" ;
                        position: absolute;
                        height: 2px;
                        width: px2rem(125);
                        background: $mainColor;
                        bottom: 0px;
                        left: 50%;
                        transform: translateX(-50%);
                        border-radius: 1px;
                    }
                    a {
                        color: #000;
                        
                    }
                }
                a {
                    font-size: px2rem(30);
                    color: #999;
                }
            }
        }
        table {
            width: px2rem(700);
            margin: 0 auto;
            tr {
                border-bottom: 1px solid $borderColor;
                &:last-child {
                    border: none;
                }
                td {
                    width: 50%;
                    height: px2rem(100);
                    font-size: px2rem(32);
                    line-height: px2rem(100);
                    color: #000;
                    &:last-child {
                        text-align: right;
                        font-size: px2rem(24);
                        color: #999;
                    }
                    a {
                        display: block;
                        width: 100%;
                        height: 100%;
                    }
                    i,em {
                        display: inline-block;
                    }
                    i {
                        width: px2rem(25);
                        height: px2rem(25);
                        background: url(../img/icon-arrow.png) no-repeat;
                        background-size: 100% 100%;
                    }
                    em {
                        width: px2rem(32);
                        height: px2rem(32);
                        border-radius: 50%;
                        background: #f3493d;
                        text-align: center;
                        line-height: px2rem(32);
                        margin-right: px2rem(15);
                        color: #fff;
                        font-size: px2rem(20);
                    }
                }
            }
        }
    }
}