.my-address-page {
    width: 100%;
    background: #f0f0f0;

    .page-wrap:first-child {
        padding-bottom: pxToRem(10px);
    }

    .address-item {
        padding: pxToRem(20px) pxToRem(30px);
        color: #b0b0b0;
        background: #fff;
        border-bottom: 1px solid #e0e0e0;

        .name, .tel {
            font-size: pxToRem(30px);
            line-height: pxToRem(56px);
            color: #444;
            font-weight: bold;
        }

        .name {
            display: inline-block;
            max-width: pxToRem(380px);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .tel {
            float: right;
        }

        .address-info {
            font-size: pxToRem(24px);
            line-height: pxToRem(38px);
        }

        .action {
            font-size: pxToRem(32px);
            line-height: pxToRem(60px);
            text-align: right;

            .edit,
            .del {
                display: inline-block;
                text-align: center;
                width: pxToRem(60px);
                height: pxToRem(60px);
                color: #999;

                &:hover {
                    color: #666;
                }
            }

            .edit {
                padding-right: pxToRem(20px);
            }
        }
    }

    .add-address {
        display: block;
        margin-top: pxToRem(30px);
        margin-bottom: pxToRem(30px);
        font-size:  pxToRem(32px);
        line-height:  pxToRem(88px);
        color: #444;
        background: #fff;
        text-align: center;
        font-weight: bold;
        border-top: 1px solid #e0e0e0;
        border-bottom: 1px solid #e0e0e0;
    }

    .confim-mask {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, .5);
        z-index: 5;
    }

    .confim-box {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: pxToRem(-270px);
        margin-top: pxToRem(-144px);
        width: pxToRem(540px);
        text-align: center;
        color: #444;
        background: #fff;
        font-size: pxToRem(32px);
        font-weight: bold;
        border-radius: pxToRem(10px);

        .content {
            line-height: pxToRem(200px);
        }

        .action {
            line-height: pxToRem(88px);
            border-top: 1px solid #e0e0e0;

            span {
                display: inline-block;
                width: pxToRem(260px);

                &:first-child {
                    border-right: 1px solid #e0e0e0;
                }
            }
        }

        .confim {
            color: #d0021b;
        }
    }
}

.my-edit-address-page {
    width: 100%;
    color: #d0d0d0;
    background: #f0f0f0;

    .edit-address {
        padding: 0 pxToRem(30px);
        background: #fff;
        font-size: pxToRem(30px);
        line-height: pxToRem(88px);
        border-bottom: 1px solid #e0e0e0;

        label {
            display: block;
            position: relative;

            &:after {
                content: "";
                position: absolute;
                right: pxToRem(-30px);
                bottom: 0;
                width: pxToRem(610px);
                height: 0;
                border-top: 1px solid #e0e0e0;
            }

            &:last-of-type:after {
                content: none;
            }

            .iconfont {
                position: absolute;
                right: 0;
                top: 0;
            }
        }

        input, textarea {
            position: absolute;
            top: 0;
            right: pxToRem(40px);
            width: pxToRem(360px);
            height: pxToRem(88px);
            color: #444;
            padding: 0;
            border: none;
            -webkit-appearance: none;
        }

        .address {
            height: pxToRem(88px) * 2;
        }

        textarea {
            right: 0;
            width: pxToRem(400px);
            height: pxToRem(58px) * 2;
            padding: pxToRem(20px) 0;
            resize: none;
        }
    }

    .submit {
        margin: pxToRem(30px) auto 0;
        width: pxToRem(470px);
        height: pxToRem(88px);
        color: #fff;
        background: #444;
        text-align: center;
        font-size: pxToRem(32px);
        line-height: pxToRem(88px);

        &.highlight {
            background: rgba(0, 0, 0, 0.6);
        }
    }
}

.my-address-list-page {
    position: relative;
    width: 100%;
    color: #444;
    background: #fff;

    li {
        padding: 0 pxToRem(30px);
        font-size:  pxToRem(32px);
        line-height:  pxToRem(88px);
        border-bottom: 1px solid #e0e0e0;

        .iconfont {
            float: right;
            color: #d0d0d0;
        }

        &.highlight {
            background: #eee;
        }

        ul {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            background: #fff;
            width: 100%;
        }
    }
}