GBRSWN/CZKJ.GBRS2.Web/wwwroot/assets/scss/recuritList.scss

@import 'global.scss';
.banner{
    img{
        width:100%;
    }
}
.recurit-list{
    position:relative;
    padding: 40px 15px 60px;
    @media(min-width:768px){
        padding: 50px 90px 100px;
        margin-top: -90px;
    }
    @media(min-width:1200px){
        padding: 70px 90px 150px;
        margin-top: -90px;
    }
    background: #fff;
    h2.title{
        color: #111;
        text-align: center;
        font-size:24px;
        margin-bottom: 20px;
        @media(min-width:768px){
            font-size:36px;
            margin-bottom: 20px;
        }
        @media(min-width:1200px){
            font-size:46px;
            margin-bottom: 40px;
        }
    }
    .open-mask{
        margin: 10px 0 10px;
    }
}
.filter{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 1010;
    padding: 30px;
    overflow: auto;
    background: #eee;
    transition: all .5s ease;
    transform: translateX(100%);
    -webkit-overflow-scrolling: touch;
    &.showIn{
        transform: translateX(0);
    }
    @media(min-width:768px){
        z-index: 10;
        clear: fix;
        position: relative;
        width: 80%;
        margin: 0 auto;
        transform: translateX(0);
        background: #fff;
        overflow: inherit;
    }
    @media(min-width:992px){
        width:65%;
    }
    @media(min-width:1200px){
        width:50%;
    }
    .close-mask{
        margin-bottom: 20px;
    }
    .item{
        text-align: left;
        width: 100%;
        @media(min-width:768px){
            text-align: center;
            width: auto;
            max-width:200px;
        }
        span{
            cursor: pointer;
            display: block;
            height: 54px;
            line-height: 54px;
            color: #666;
            border-bottom: 2px solid #e0e0e0;
            font-size: 16px;
            padding: 0 30px 0 20px;
            width: 100%;
            position: relative;
            @include ellipsis(auto);
            i{
                position: absolute;
                margin-left: 5px;
                top: 20px;
                right: 8px;
                @include setArrow(8px,#999,1px,bottom);
            }
            &.cur{
                border-color: $color;
                color: $color;
                i{
                    border-color: $color;
                }
            }
        }
        .panel-box{
            background: #fff;
            position: relative;
            z-index: 1;
            left: 0;
            right: 0;
            text-align: left;
            border: 1px solid #e0e0e0;
            padding: 30px; 
            border-radius: 4px;
            display: none;
            @media(min-width:768px){
                position: absolute;
            }
            a{
                display: inline-block;
                color: #666;
                margin: 10px;
                padding: 0 10px;
                font-size: 16px;
                cursor: pointer;
                &:hover,&.cur,&:active{
                    color: $color;
                }
            }
            .close-icon{
                position: absolute;
                right: 10px;
                top: 5px;
                font-size: 24px;
                line-height: 1;
                color: #999;
                cursor: pointer;
                &:hover{
                    color: $color;
                }
            }
            &.showIn{
                display: block;
            }
        }
    }
}
.filter-con{
    padding: 10px 0;
    span{
        display: inline-block;
        background: #f0f0f0;
        padding:5px 10px;
        margin-right: 10px;
        border-radius: 10px;
        font-size: 12px;
        img{
            display: inline-block;
            vertical-align: baseline;
            padding-left: 5px;
        }
    }
}
.recurit-list ul{
    li{  
        margin-top: 20px;
        background: #f0f0f0;
        padding: 20px 40px 20px 20px;
        transition: transform .5s ease;
        @media(min-width:768px){
            padding: 20px 60px 20px 25px;
        }
        h2{
            color: $color;
            line-height: 1.4;
            margin-bottom: 10px;
            font-size: 16px;
            @media(min-width:768px){
                font-size: 20px;
            }
        }
        p{
            color: #666;
            margin-top: 5px;
            font-size: 14px;         
        }
        i{
            position: absolute;
            right: -30px;
            top: 50%;
            margin-top: -14px;
            width:28px;
            height: 28px;
            background: url("/assets/image/arrow-circle.png") no-repeat center;
            transition: all .5s ease;
            @media(min-width:768px){
                right: 0;
            }
        }
        &:hover{
            transform: translateX(10px);
        }
        a{
            position: relative;
            display: block;
        }
    }
}