@charset "UTF-8";

.page-choose-context {
    padding: 0 px2rem(25);
    padding-bottom: px2rem(100);
    .mod-input {
        margin-top: px2rem(35);
        @include clearfix;
        .input {
            display: block;
            float: left;
            width: px2rem(605);
            height: px2rem(66);
            line-height: px2rem(66);
            text-indent: px2rem(25);
            background: #f5f5f5;
            border-radius: 5px;
            font-size: px2rem(26);
            color: #000;
        }
        .btn {
            display: block;
            float: right;
            font-size: px2rem(34);
            color: $blackFont;
            background: transparent;
            line-height: px2rem(66);
        }
    }
    .mod-list {
        h3 {
            color: $grayFont;
            font-size: px2rem(30);
            margin-top: px2rem(30);
        }
        li {
            padding: px2rem(32) 0;
            position: relative;
            border-bottom: 1px solid $borderColor;
            label {
                display: block;
                @include clearfix;
                img {
                    float: left;
                    width: px2rem(80);
                    height: px2rem(80);
                    border-radius: 50%;
                    margin-right: px2rem(21);  
                }
                p {
                    float: left;
                    line-height: px2rem(80);
                    font-size: px2rem(32);
                    color: $blackFont;
                }
                input {
                    display: none;
                }
                .check-box {
                    float: right;
                    width: px2rem(36);
                    height: px2rem(36);
                    border: 2px solid #000;
                    border-radius: 50%;
                    background: #fff;
                    margin-top: px2rem(26);
                }
                input:checked+.check-box {
                    position: relative;
                    &:after {
                        width: 100%;
                        height: 100%;
                        content: "";
                        position: absolute;
                        top: 0;
                        left: 0;
                        border: 1px solid #fff;
                        border-radius: 100%;
                        background: $mainColor;
                        box-sizing: border-box;
                    }
                }
            }
        }
    }
    .mod-ft {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: px2rem(100);
        background: #f5f5f5;
        padding: px2rem(18) 0;
        .ft-inner {
            width: px2rem(700);
            margin: 0 auto;
            position: relative;
            ul {    
                @include clearfix;
                // width: px2rem(506);
                margin-right: -px2rem(24);
                li {
                    width: px2rem(64);
                    height: px2rem(64);
                    float: left;
                    margin-right: px2rem(24);
                    img {
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                    }
                }
            }
            .submit {
                position: absolute;
                width: px2rem(120);
                height: px2rem(64);
                background: $mainColor;
                font-size: px2rem(34);
                color: #fff;
                line-height: px2rem(64);
                right: 0;
                top: 0;
                border-radius: 5px;
            }
            .more {
                display: none;
                position: absolute;
                font-size: px2rem(32);
                width: px2rem(48);
                height: px2rem(49);
                top: px2rem(7);
                line-height: px2rem(64);
                right: px2rem(140);
                text-align: center;
                z-index: 5;
                background: url(../img/icon-ellipsis.png) no-repeat;
                background-size: 100% 100%; 
                // span {
                //     display: inline-block;
                //     width: px2rem(5);
                //     height: px2rem(5);
                //     background: #666;
                //     margin: 0 px2rem(3);
                //     border-radius: 50%;
                // }
            }
        }
    }
}   