@media screen and(min-width:@mobile-device) {
    .container {
        margin-top: @top-nav-bar-height;
        .font-normal();
        .border-normal();
        .shadow();
        padding: 2rem;
        border-radius: @border-radius;
        margin: 1rem;
        min-height: 80vh;
        background-color: @bgColor;
        color: @textColor;
        text-align: center;

        .welcome,
        .adk,
        .avatar,
        .logo-img,
        .logo2,
        .sns-label,
        .sns-tip,
        .money-tip,
        .zhifubao,
        .weixin {
            opacity: 0;
            transform: translateY(20px);
        }

        .out {
            width: 100%;
            height: 100%;
            .flexbox(column);
        }

        .avatar {
            .ball(20rem, @themeColor);
            overflow: hidden;
            flex-shrink: 0;
        }

        .welcome {
            font-size: 3rem;
        }

        .adk {
            font-size: 2rem;
        }

        .profile {
            margin: @margin-general 0;
            font-size: @big-text;
            text-align: center;
        }

        .sns {
            margin: @padding-general 0;
            width: 80%;
            font-size: @mid-text;
            .flexbox(column);

            ul {
                margin-top: 1rem;
                display: flex;
                flex-wrap: wrap;
                max-width: 100%;
                align-items: center;
                justify-content: center;

                li {
                    margin: 5px;
                }
            }
        }

        .sns-label {
            .flexbox(column);
            width: 85px;
            height: 85px;
            .border-normal();
            padding: @padding-general;
            background-color: @bgColor;
            color: @linkColor;
            cursor: pointer;

            .svg {
                width: 42px;
                height: 42px;
                flex-shrink: 0;
            }

            p {
                font-size: @very-samll-text;
                text-align: center;
                word-break: break-all;
            }

            &:hover {
                background-color: @themeColor;
                color: @hoverTextColor;
            }
        }

        .logo {
            font-size: @big-text;
            .flexbox(column);
            margin: 3rem 0;
        }

        .money {
            margin: @margin-general 0;

            .pay {
                display: flex;

                .zhifubao,
                .weixin {
                    width: 48%;
                    max-width: 350px;
                    margin: 20px;
                    overflow: hidden;
                    .border-normal();
                    .shadow();
                }
            }
        }
    }
}


@media screen and(min-width:@smallpc-device) {
    .sns {
        ul {
            max-width: 50%;
        }
    }
}