.line{
    width:calc(~'100% + 30px');
    margin:0 -15px;
    height:1rem;
    background: #F6F6F7;
}

@media screen and (min-width:768px){

    .container-section ~ .header-section{
        .header-container{
            background-color: #fff;
            position: relative;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
            .nav-item{
                a{
                    color:#333;   
                }
            }
        }
    }
    .info-section ~ .footer-panel{
        background-color: #f7f7f7;
    }
    .banner-container{
        background:url('../images/recruit.png') no-repeat center;
        background-size: 100% auto;
        width:100%;
        padding-top: 14%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        margin-bottom: 5rem;
        margin-top: -7rem;
        .banner-info{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            text-align: center;
            color:#fff;
            .title{
                font-size:43px;
            }
            .subTitle{
                font-size:24px;
                margin-top: 17px;
            }
        }
    }
    .container-panel{
        display: flex;
        
        // .type-nav-panel{
        //     width: 20%;
        //     li{
        //         margin-bottom:3rem;
        //     }
        //     .type-title{
        //         font-size: 1.6rem;
        //         color:#949494;
        //         padding-bottom:1rem;
        //         border-bottom:2px solid transparent;
        //         position: relative;
        //         transition: all 0.3s;
        //         &:after{
        //             content:'\e601';
        //             font-family: 'iconfont';
        //             position: absolute;
        //             top: 0%;
        //             right: 0;
        //             transform:rotate(0deg);
        //             transition: all 0.3s;
        //         }
        //         &.active{
        //             color:#1a1a1a;
        //             border-bottom:2px solid #1a1a1a;
        //             &:after{
        //                 transform: rotate(90deg);
        //             }
        //         }
        //     }
        //     .type-sub-panel{
        //         display: none;
        //         overflow: hidden;
        //         a{
        //             color:#aeaeae;
        //             margin-top: 2.7rem;
        //             font-size:1.4rem;
        //             display: block;
        //             &.acitve{
        //                 color:#1a1a1a;
        //             }
        //             &:hover{
        //                 color:#1a1a1a;
        //             }
        //         }
        //     }
        // }
        .info-panel{
            width:80%;
            padding-left:95px;
            
            .title-panel{
                border-bottom:10px solid #F6F6F7;
                .title-label{
                    font-size:1.8rem;
                }
                .title-type{
                    font-size: 18px;
                    color:#4d4d4d;
                }
                .title{
                    font-size:3.6rem;
                    padding:1.7rem 0 4rem;
                    span{
                        font-weight: 600;
                    }

                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .login{
                        background: #0066cb;
                        color:#fff;
                        padding:0.8rem 1.5rem;
                        border-radius: 2rem;
                        font-size:1.4rem;
                        
                    }
                }
            }
            .info-content{
                min-height:60rem;
                margin:5rem 0 5rem;
                font-size:1.6rem;
                p{
                    width:100% !important;
                }
            }
            .search-input{
                display: flex;
                align-items: center;
                justify-content: center;
                border:1px solid#0066cb;
                padding:0.5rem 1.5rem;
                border-radius:10rem;
                margin:5rem 0rem;
                input{
                    border:0;
                    flex:1;
                    font-size:1.4rem;
                }
                .icon{
                    font-size:1.6rem;
                    color:#959595;
                }
                #search-btn{
                    cursor: pointer;
                    transition: all 0.3s;
                    border:0;
                    background: transparent;
                    &:hover{
                        color: #0066cb;
                        font-weight: bold;
                    }
                }
            }
            .position-search-panel{
                .title{
                    font-size: 1.6rem;
                    padding:1rem 0 1rem;
                    border-bottom:2px solid #828080;
                    font-weight: 600;
                }
                .search-panel{
                    padding:3rem 0;
                    li{
                        display: flex;
                        margin-bottom:2rem;
                        .search-label{
                            color:#040000;
                            font-size:1.4rem;
                            min-width:4em;
                            margin-right:2rem;
                            text-align-last: justify;

                        }
                        .search-item{
                            display: flex;
                            align-items: center;
                            flex-wrap: wrap;
                            flex:1;
                            .item{
                               font-size:1.4rem;
                               color:#040000;
                               padding:0.1rem 0.5rem;
                               margin:0 0.5rem 1.5rem;
                            //    margin-bottom:1.5rem;
                               cursor: pointer;
                            //    font-weight: bold;
                               &:hover{
                                   color:#0066cb;
                               }
                               &.active{
                                color:#0066cb;
                                border:1px solid #0066cb;
                                border-radius: 3px;
                               }
                               
                            }
                        }
                    }
                }
            }
            
        }
        .table-box{
            padding-top: 6rem;
            tr{
                cursor: pointer;
                &:hover{
                    background: #f7f7f7;
                }
            }
        }
        .change-panel{
            background: url('../images/change-bg.png') no-repeat center;
            width:100%;
            height:45rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 5rem;

            .change-flex{
                width: 60%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .change-item{
                    background:#fff;
                    border-radius: 15px;
                    margin:0 1rem;
                    text-align: center;
                    width:12rem;
                    transition: all 0.2s;
                    cursor: pointer;
                    .pic{
                        width:30%;
                        margin:2rem auto;
                    }
                    span{
                        border-top: 1px solid #ddd;
                        display: block;
                        padding: 1rem 1em;
                        color:#0066cb;
                        font-size: 1.4rem;
                    }
                    &:hover{
                        box-shadow: 0 0 1.5rem #ddd;
                    }
                } 
            }
            
        }
        .position-panel{
            .title{
                font-size: 1.6rem;
                padding:4rem 0 1rem;
                border-bottom:2px solid #828080;
            } 
            .poistion-info{
                padding-bottom:5rem;
                ul{
                    padding:4rem 0;
                    li{
                        display: flex;
                        color:#666;
                        margin-bottom: 1rem;
                        .item-label{
                            color:#666;
                        font-size:1.4rem;

                        }
                        .item{
                            color:#666;
                        font-size:1.4rem;

                        }
                    }
                }
                .tool-panel{
                    display:flex;
                    align-items: center;
                    .button{
                        padding:0.6rem 3rem;
                        color:#fff;
                        background:#2157a3;
                        border-radius:30px;
                        min-width:6rem;
                        transition: all 0.3s;
                        margin-right: 5rem;
                        &:hover{
                            opacity: 0.8;
                        }
                    }
                    .link{
                        color:#666;
                        &:hover{
                            color:#000;
                        }
                    }
                }
            }
        }
        .recruit-info{
            padding-bottom: 5rem;
            .title{
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 2.4rem;
                padding:0rem 0 3rem;
                border-bottom:2px solid #828080;
                
                span{
                    font-weight: 600;
                }
                .goback{
                    color:#999;
                    font-size:1.6rem;
                }
            }
        }   
        .recruit-detail{
            // border-top: 10px solid #F6F6F7;
            margin-top: 43px;
            .detail-date{
                color:#777777;
                font-size:1.4rem;
                margin-bottom: 1.5rem;
            }
            p{
                width:auto !important;
            }
            .title{
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 1.6rem;
                padding:0rem 0 2rem;
                border-bottom:2px solid #828080;
                .goback{
                    color:#999;
                    font-size:1.4rem;
                }
            }
            .detail-panel{
                padding: 0rem 0 0rem;
                .col-item{
                    border:1px solid #ddd;
                    font-size: 1.4rem;
                    padding:1rem 1.5rem;
                    border-left:0;

                    span{
                        color:#999;
                    }
                    
                }
                .col-item:nth-child(n+7){
                        border-top: 0;
                }
                .col-item:nth-child(6n+1){
                    border-left: 1px solid #ddd;
                        
                }
                .detail-dec{
                    .dec-title{
                        margin-top: 3rem;
                        font-weight: bold;
                        font-size:1.6rem;
                        line-height: 3.2rem;
                    }
                    .dec-panel{
                        padding-left: 3rem;
                        p{
                            font-size: 1.3rem;
                            color:#666;
                        }
                    }
                }
                
            }
            .submit{
                width:100%;
                padding:0.8rem 1rem;
                display: block;
                color:#fff;
                background: #0066cb;
                border-radius: 5px; 
                font-size:1.4rem;
                text-align: center;
                cursor: pointer;
                margin-top: 5rem;
                &:hover{
                    opacity: 0.8;
                }
            }
        }
        .catalog-panel{
             font-size:1.6rem;
             margin: 5rem 0 3rem;
             a{
                 font-size:1.6rem;
                 &:hover{opacity: 0.8;}
             }
             .catalog-btn{
                margin-bottom: 2rem;
                &:last-child{
                    margin-bottom: 0;
                }
             }
        }
        .recruit-status{
            width: 100%;
            min-height:30rem;
            display: flex;
            align-items: center;            
            justify-content: center;
            .status{
                img{
                    width: 6rem;
                    height:auto;
                }
                span{
                    display: block;
                    font-size: 1.4rem;
                    color:#2157a3;
                    text-align: center;
                    margin-top: 1rem;
                }
            }
            .emty-status{
                img{
                    width: 6rem;
                    height:auto;
                }
                span{
                    display: block;
                    font-size: 1.4rem;
                    color:#999;
                    text-align: center;
                    margin-top: 1rem;
                }
            }
        }
        .recruit-list{
            // border-top: 10px solid #F6F6F7;
            padding: 2rem 0 0;
            margin: 1rem 0 0;
            .title{
                font-size: 1.6rem;
                padding:4rem 0 1rem;
                border-bottom:2px solid #828080;
                font-weight: bold;
            }
            ul{
                li{
                    a{
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding: 2rem 0.5rem;
                        font-size:1.4rem;
                        border-bottom:1px solid #d3d2d2;
                        &:hover{
                            background:#f7f7f7;
                        }
                    }
                    .item-date{
                        color:#999;
                    }
                }
            }
        }
        
    }
    .login-model{
        .modal-content{
            width:330px;
        }
        .modal-header{
            border-bottom:0;
            .close{
                color:#0066cb;
            }
        }
        .modal-body{
            padding:40px 30px;
            .title{
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom:5.6rem;
                .img{
                    width:3rem;
                }
                span{
                    color:#2157a3;
                    font-size: 2.2rem;
                    margin-left: 1.5rem;
                    font-weight: 600;
                }
            }
            .btn{
                padding:0.8rem 1rem;
                border-radius: 6px;
                outline: none;
                font-weight: 600;
                font-size:1.6rem;
                &.btn-primary{
                    background:#0066cb;
                    border-color: #0066cb;
                }
                &.btn-default{
                    border-color: #0066cb;
                }
            }
            .btn:nth-child(n+1){
                margin-top: 2.5rem;
            }
            .tips{
                font-size:1.4rem;
                color:#ff1d25;
                text-align: center;
                margin-top: 6rem;
            }
        }
    }
    .info-section{
        margin-top: 14rem;

    }
}

@media screen and (max-width:768px){
    .line{
        width:calc(~'100% + 30px');
        margin:0 -15px;
        height:1rem;
        background: #F6F6F7;
    }
    .info-section{
        margin-top:6.5rem;
    
    .banner-container{
        background-image:url('../images/change-bg.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% auto;
        width:calc(~'100% + 30px');
        margin:0 -15px 0rem;
        padding-top: 40%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        .banner-info{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            text-align: center;
            color:#fff;
            p{
                margin-bottom: 0;

            }
            .title{
                font-size:2.2rem;
                white-space:nowrap;
            }
            .subTitle{
                font-size:2.2rem;
                // margin-top: 1.7rem;
            }
        }
    }
}
    .info-panel{
        .search-input{
            display: flex;
            align-items: center;
            justify-content: center;
            border:1px solid #0066cb;
            padding:0.5rem 1rem;
            border-radius:20px;
            margin:2rem 0rem;
            input{
                border:0;
                flex:1;
                font-size:1.4rem;
            }
            .icon{
                font-size:1.6rem;
                color:#959595;
            }
            #search-btn{
                cursor: pointer;
                transition: all 0.3s;
                border:0;
                background: transparent;
                &:hover{
                    color: #0066cb;
                    font-weight: bold;
                }
            }
        }
    }
    .position-search-panel{
        .title{
            font-size: 1.6rem;
            padding:1rem 0 1rem;
            border-bottom:2px solid #828080;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-weight: bold;
            .list-link{
                display: block;
                padding:0.2rem 0.5rem;
                color:#fff;
                background:#0066cb;
                border-radius: 15px;
                font-size: 1.2rem;
                font-weight: normal;
            }
        }
        .search-panel{
            padding:3rem 0 1rem;
            li{
                display: flex;
                margin-bottom:2rem;
                flex-wrap:wrap;
                border-bottom:1px solid #ddd;
                .search-label{
                    color:#040000;
                    font-size:1.4rem;
                    width:100%;
                    margin-bottom:1rem;
                    font-weight: bold;
                }
                .search-item{
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    flex:1;
                    .item{
                       font-size:1.2rem;
                       color:#999;
                       padding:0.1rem 0.3rem;
                       margin:0 1rem 1.5rem 0;
                    //    margin-bottom:1.5rem;
                       cursor: pointer;
                       &:first-child{
                           margin-left:0;
                       }
                       &:hover{
                           color:#3887D6;
                       }
                       &.active{
                        color:#3887D6;
                        border:1px solid #3887D6;
                        border-radius: 3px;
                        font-weight: bold;
                       }
                       
                    }
                }
            }
        }
    }
   
    .table-box{
        padding-top: 2rem;
    }
    .recruit-info{
        padding:2rem 0;
        
        .title{
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 1.6rem;
            padding:0rem 0 1rem;
            border-bottom:2px solid #828080;
            font-weight: bold;
            small{
                font-size: 80%;
            }
            .goback{
                color:#999;
                font-size:1.4rem;
                font-weight: normal;
                width:5rem;
            }
        }
    }   
    .recruit-detail{
        // border-top: 10px solid #F6F6F7;
        margin-top: 2.0rem;
        p{
            width:auto !important;
        }
        .title{
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 1.6rem;
            padding:0rem 0 1rem;
            border-bottom:2px solid #828080;
            .goback{
                color:#999;
                font-size:1.4rem;
            }
        }
        .detail-panel{
            padding: 0rem 0 0rem;
            .col-item{
                border:1px solid #ddd;
                font-size: 1.2rem;
                padding:0.5rem 0.5rem;
                border-left:0;

                span{
                    color:#999;
                }
                
            }
            .col-item:nth-child(n+5){
                    border-top: 0;
            }
            .col-item:nth-child(4n+1){
                border-left: 1px solid #ddd;
                    
            }
            .detail-dec{
                .dec-title{
                    margin-top: 3rem;
                    font-size: 1.4rem;
                    font-weight: bold;
                    margin-bottom:1rem;
                }
                .dec-panel{
                    padding-left: 3rem;
                    p{
                        font-size: 1.2rem;
                        color:#666;
                    }
                }
            }
            
        }
        .submit{
            width:100%;
            padding:0.8rem 1rem;
            display: block;
            color:#fff;
            background: #0066cb;
            border-radius: 5px; 
            font-size:1.4rem;
            text-align: center;
            cursor: pointer;
            margin-top: 5rem;
            &:hover{
                opacity: 0.8;
            }
        }
    }
    .recruit-status{
        width: 100%;
        min-height:30rem;
        display: flex;
        align-items: center;            
        justify-content: center;
        .status{
            img{
                width: 6rem;
                height:auto;
            }
            span{
                display: block;
                font-size: 1.4rem;
                color:#2157a3;
                text-align: center;
                margin-top: 1rem;
            }
        }
        .emty-status{
            img{
                width: 6rem;
                height:auto;
            }
            span{
                display: block;
                font-size: 1.4rem;
                color:#999;
                text-align: center;
                margin-top: 1rem;
            }
        }
    }
    .line + .recruit-list{
        padding: 2rem 0 0;
    }
    .recruit-list{
        // border-top: 10px solid #F6F6F7;
        // margin: 1rem 0 0;
        .title{
            font-size: 1.6rem;
            padding:1rem 0 1rem;
            font-weight: bold;
            border-bottom:2px solid #828080;
        }
        ul{
            li{
                a{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 2rem 0.5rem;
                    font-size:1.4rem;
                    border-bottom:1px solid #cdcccc;
                    &:hover{
                        background:#f7f7f7;
                    }
                }
                .item-title{
                    color:#040000;
                }
                .item-date{
                    color:#999;
                    font-size:1.2rem;
                }
            }
        }
    }
    .change-panel{
        background: url('../images/change-bg.png') no-repeat center;
        width:100%;
        height:45rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background-size: cover;
        margin-bottom: 5rem;
        .change-flex{
            // width: 60%;
            // display: flex;
            // align-items: center;
            // justify-content: space-between;
            // flex-wrap: wrap;

            .change-item{
                display: block;
                background:#fff;
                border-radius: 15px;
                margin:2rem 0;
                text-align: center;
                width:11rem;
                transition: all 0.2s;
                cursor: pointer;
                overflow: hidden;
                .pic{
                    width:25%;
                    margin:2rem auto;
                }
                span{
                    border-top: 1px solid #ddd;
                    display: block;
                    padding: 1rem 1em;
                    color:#0066cb;
                    font-size: 1.6rem;
                    // font-weight: bold;
                }
                &:hover{
                    box-shadow: 0 0 1.5rem #ddd;
                }
            } 
        }
        
    }
    .resume-tips{
        padding:2rem 0 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        .tips-round{
            background: #0066cb;
            color:#fff;
            text-align: center;
            padding:0.4rem 1rem;
            border-radius: 1000px;
            font-size: 1.4rem;
        }
    }
}