.comprehensive-width{
    width: 87%;
    margin: 0 auto;
    background: #ffffff;
    max-width: 1240px;
}


@media screen  and (min-width: 768px) and (max-width: 1024px) {
    .comprehensive-width{
        width: 95%;
        margin: 0 auto;
        background: #ffffff;
    }
}

.jion-title{padding-top: 50px; padding-bottom: 25px; border-bottom: 1px solid #efefef; color: #62a8ea; }
.jion-title h3{color: #595959; height: 53px; line-height: 53px; font-size: 20px; font-weight: normal;  padding-left: 38px; background: url(/static/img/joinus/recruit.png) no-repeat left center; background-size: 32px;background-position-y: 10px;}
.jion-list{ padding-bottom: 60px;}
.jion-list li{border-bottom: 1px solid #efefef; line-height: 2; font-size: 16px; overflow: hidden;}
.jion-list li a:hover{color: #912daf;}
.jion-list li p{ float: left; margin-top: 15px; }
.jion-list li .time{ width: 20%; padding-left: 1%; padding-right: 8%; color: #912daf;}
.jion-list li .company{ width: 30%;}
.jion-list li .address{ width: 19%; padding-right: 1%; text-align: right;}



.details-bg{ background: #f9f9f9; padding-bottom: 60px;overflow: hidden; width: 100%;}
.jion-box{ width: 95%; background: #FFFFFF; margin-top: 26px; font-size: 16px; padding-bottom: 55px;}
.jion-box .title{ position: relative; font-size: 25px; color: #cf2902; line-height: 36px; padding-top: 40px; padding-bottom: 15px;display: -webkit-flex;  display: flex;  -webkit-justify-content: space-between;  justify-content: space-between;}
.jion-box .title .immediately-join{ width: 100px; height: 50px; display: flex; justify-content: center; align-items: center; line-height: 1; top:0px; cursor: pointer;color: #ffffff;  font-size: 16px;padding: 7px 18px;  margin-right: 1px;  text-align: center;}
.jion-box .position li{ width: 45%; padding-right: 5%; float: left;overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 36px; padding-top: 10px;}
.jion-box .describe,.jion-box .details{ line-height: 40px;}
.join{display: none;}

.active-bg-color { background: #ce2806 !important;}
/*.flex-container {height: 90px;line-height: 90px;  display: -webkit-flex;  display: flex;  -webkit-justify-content: space-between;  justify-content: space-between;  height: 50px;  background-color: lightgrey;  background-color: #912daf;  color: #ffffff; font-size: 18px;  line-height: 50px;  padding: 0px 20px; }*/
.joins{display: block;  cursor: pointer;  font-size: 16px;  position: relative;  top: 48px;}
.joins:hover{color: #912daf;}
.jion-flex-container{display: -webkit-flex;  display: flex;  -webkit-justify-content: space-between;  justify-content: space-between;}
.popUp-fixed{border-radius: 5px;margin: 0 auto;width:500px; background: #fff; margin-top: 123px;}
.popUp-background{position: fixed;top:0px;left: 0px; width: 100%;  height:100%;background: #7f7f7f; background: rgb(0 0 0 / 23%);}
.popUp-form{ padding: 10px 0px 30px 0px;background: #ffffff;width: 80%;  margin: 0 auto;}
.popUp-form input{margin-top: 13px;width: 94%;border-radius: 5px;  border: solid 1px #eaeaea; height: 42px;padding-left: 15px;  font-size: 16px;padding-left: 6%;}
.submit{margin-top: 25px;font-size: 16px;}
.submit-btn{font-size: 16px;width: 51%;background: #912daf;color: #ffffff;text-align: center;line-height: 40px;  height:40px;border-radius: 5px;}
.submit-cancel{font-size: 16px;margin-left: 3%;width: 43%;background: #c6c6c6;color: #ffffff;text-align: center;line-height: 40px;  height:40px;border-radius: 5px;}
::-webkit-input-placeholder{/*Webkit browsers*/  color:#999;  font-size:16px;  }
:-moz-placeholder{/*Mozilla Firefox 4 to 8*/  color:#999;  font-size:16px;  }
::moz-placeholder{/*Mozilla Firefox 19+*/  color:#999;  font-size:16px;  }
:-ms-input-placeholder{/*Internet Explorer 10+*/  color:#999;  font-size:16px;  }
#application{ width: 100%;  text-align: left;  position: relative;  margin-top: 13px;  border-radius: 5px;  border: solid 1px #eaeaea;  height: 42px;  padding-left: 15px;  font-size: 16px;  padding-left: 6%;  background: #ffffff;}
/*.btn:after{content:''; width: 0;  height: 0;  border-left: 10px solid transparent;  border-right: 10px solid transparent;  border-top: 10px solid #333333;border-top: 10px solid #999999;  position: absolute;  right: 15px;  top: 17px;}*/
.btnAfter:after{ border-top: 10px solid #912daf;}
#application:focus,
#application:active:focus,
#application.active:focus,
#application.focus,
#application:active.focus,
#application.active.focus {
    outline: none;
    box-shadow:none;
}
button{  outline:none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-user-select: none;
    -moz-user-focus: none;
    -moz-user-select: none }
input:focus {
    outline:none;
    border: 1px solid #912daf;
}
.popUp-list{
    border: 1px solid #912daf;
    border-radius: 5px;
    position: relative;
    top: -452px;
    background: #fff;
    padding: 0px 10px;
    height: 338px;
}
.jion-title-name{
    font-size: 16px;
    margin-top: 30px;
    padding-bottom: 12px;
}
.popUp-list-content{
    font-size: 16px;
    border-top:1px solid #f7f7f7;
    padding-top: 15px;
    padding-bottom: 15px;
}
.popUp-list-border{
    height: 255px;
    overflow-y: scroll;
}
.popUp-list img{width: 29px;}
.jion-title-title{position: relative;top:2px;}
#applyPosition{  cursor: pointer;font-size: 16px;}
#select{     background: #fff; margin-top: 13px;  width: 100%;  border-radius: 5px;  border: solid 1px #eaeaea;  height: 42px;  padding-left: 15px;  font-size: 16px;  padding-left: 6%;}
@media screen and (max-width: 768px) {
    #applyPosition{  cursor: pointer;  text-align: center;  font-size: 16px;  position: relative;   }
    .popUp-fixed{width: 88%;}
    .jion-flex-container{display: block}
    .wap-pro-head{display: none}
    .jion-banner{ background: none; height: auto;}
    .jion-banner .jion-banner-wap{ display: block;}
    .jion-wrap{ padding-top: 15px;}
    .jion-title {  padding-top: 7px;  padding-bottom: 15px;  border-bottom: 1px solid #efefef; }
    .jion-title h3{font-size: 18px; background-size:10%; padding-left: 40px; font-weight: bold; background-position-y: 7px;}
    .jion-list li { padding: 15px 0px;}
    .jion-list li p{ float: none; line-height: 24px;}
    .jion-list li .time,.jion-list li .company,.jion-list li .address{ width: 100%; padding: 0; text-align: left;}
    .jion-list li .time{ color: #912daf;}
    .jion-list li .time span{ padding-right: 3.4em; font-weight: normal; font-size: 14px;color: #333333;}
    .jion-list li .company,.jion-list li .address{ font-size: 14px;}
    #select{     background: #fff; margin-top: 13px;  width: 100%;  border-radius: 5px;  border: solid 1px #eaeaea;  height: 42px;  padding-left: 15px;  font-size: 16px;  padding-left: 6%;}
    .jion-box{ margin-top: 26px; font-size: 14px; padding-bottom: 35px;}
    .jion-box .title{ font-size: 18px; line-break: 24px; padding-top: 15px; padding-bottom: 8px;}
    .immediately-join{cursor: pointer;  font-size: 16px;color: #333333;}
    .jion-box .describe,.jion-box .details{ line-height: 2;}
    .jion-box .position li{ line-height: 24px; padding-top: 5px; width: 100%; float: none; white-space: normal; }
    .jion-box .title .join{display: block; width: 90px; height: 35px;background-color: #b544ba;  border-radius: 5px;  font-family: MicrosoftYaHei;  font-size: 16px;  font-weight: normal;  font-stretch: normal; text-align: center; line-height: 35px;  letter-spacing: 1px;  color: #ffffff; padding: 0;}
    /*.flex-container {height: 90px;line-height: 90px;  display: -webkit-flex;  display: flex;  -webkit-justify-content: space-between;  justify-content: space-between;  height: 50px;  background-color: lightgrey;  background-color: #912daf;  color: #ffffff; font-size: 18px;  line-height: 50px;  padding: 0px 20px; }*/
    .joins{display: none}
    .popUp-fixed{border-radius: 5px;margin: 0 auto;width: 88%; background: #fff; margin-top: 30px;}
    .popUp-background{position: fixed;top:0px;left: 0px; width: 100%;  height:100%;background: #7f7f7f; background: rgb(0 0 0 / 23%);}
    .popUp-form{ height: 458px;padding: 10px 0px 30px 0px;background: #ffffff;width: 80%;  margin: 0 auto;}
    .popUp-form input{margin-top: 13px;width: 94%;border-radius: 5px;  border: solid 1px #eaeaea; height: 42px;padding-left: 15px;  font-size: 16px;padding-left: 6%;}
    .submit{margin-top: 25px;font-size: 16px;}
    .submit-btn{font-size: 16px;width: 51%;background: #912daf;color: #ffffff;text-align: center;line-height: 40px;  height:40px;border-radius: 5px;}
    .submit-cancel{font-size: 16px;margin-left: 3%;width: 43%;background: #c6c6c6;color: #ffffff;text-align: center;line-height: 40px;  height:40px;border-radius: 5px;}
    ::-webkit-input-placeholder{/*Webkit browsers*/  color:#999;  font-size:16px;  }
    :-moz-placeholder{/*Mozilla Firefox 4 to 8*/  color:#999;  font-size:16px;  }
    ::moz-placeholder{/*Mozilla Firefox 19+*/  color:#999;  font-size:16px;  }
    :-ms-input-placeholder{/*Internet Explorer 10+*/  color:#999;  font-size:16px;  }
    #application{ width: 100%;  text-align: left;  position: relative;  margin-top: 13px;  border-radius: 5px;  border: solid 1px #eaeaea;  height: 42px;  padding-left: 15px;  font-size: 16px;  padding-left: 6%;  background: #ffffff;}
    /*.btn:after{content:''; width: 0;  height: 0;  border-left: 10px solid transparent;  border-right: 10px solid transparent;  border-top: 10px solid #333333;border-top: 10px solid #999999;  position: absolute;  right: 15px;  top: 17px;}*/
    .btnAfter:after{ border-top: 10px solid #912daf;}
    #application:focus,
    #application:active:focus,
    #application.active:focus,
    #application.focus,
    #application:active.focus,
    #application.active.focus {
        outline: none;
        box-shadow:none;
    }
    button{  outline:none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
        -webkit-user-select: none;
        -moz-user-focus: none;
        -moz-user-select: none }
    input:focus {
        outline:none;
        border: 1px solid #912daf;
    }
    .popUp-list{
        border: 1px solid #912daf;
        border-radius: 5px;
        position: relative;
        top: -452px;
        background: #fff;
        padding: 0px 10px;
        height: 338px;
    }
    .jion-title-name{
        font-size: 16px;
        margin-top: 30px;
        padding-bottom: 12px;
    }
    .popUp-list-content{
        font-size: 16px;
        border-top:1px solid #f7f7f7;
        padding-top: 15px;
        padding-bottom: 15px;
    }
    .popUp-list-border{
        height: 255px;
        overflow-y: scroll;
    }
    .popUp-list img{width: 29px;}
    .jion-title-title{position: relative;top:2px;}
}
.baoming{
    position: fixed;
    top: 35%;
    text-align: center;
    width: 100%;
    font-size: 16px;
    display: none;
    z-index: 30;
}
.baoming span{
    background: rgb(0 0 0 / 30%);
    padding: 10px 30px;
    border-radius: 10px;
    color: #fff;
}



.modal-open {
    overflow: hidden
}

.modal {
    position: fixed;
    z-index: 1700;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    overflow: hidden;
    outline: 0
}

.modal.fade .modal-dialog {
    -webkit-transition: -webkit-transform .3s ease-out;
    -o-transition: -o-transform .3s ease-out;
    transition: transform .3s ease-out;
    -webkit-transform: translate(0,-25%);
    -ms-transform: translate(0,-25%);
    -o-transform: translate(0,-25%);
    transform: translate(0,-25%)
}

.modal.in .modal-dialog {
    -webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    -o-transform: translate(0,0);
    transform: translate(0,0)
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px
}

.modal-content {
    position: relative;
    border: 1px solid transparent;
    border-radius: .286rem;
    outline: 0;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-box-shadow: 0 2px 12px rgba(0,0,0,.2);
    box-shadow: 0 2px 12px rgba(0,0,0,.2);
    border: none
}

.modal-backdrop {
    position: fixed;
    z-index: 1600;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000
}

.modal-backdrop.fade {
    opacity: 0
}

.modal-backdrop.in {
    opacity: .5
}

.modal-header {
    padding: 15px 20px;
    border-bottom: 1px solid #e4eaec;
    border-bottom: none
}

.modal-header::after {
    display: table;
    clear: both;
    content: ''
}

.modal-header .close {
    margin-top: -2px;
    margin-top: 1px
}

.modal-title {
    line-height: 1.571429;
    margin: 0
}

.modal-body {
    position: relative;
    padding: 20px
}

.modal-footer {
    padding: 20px;
    text-align: right;
    border-top: 1px solid #e4eaec;
    padding: 6px 20px 20px;
    border-top: none
}

.modal-footer::after {
    display: table;
    clear: both;
    content: ''
}

.modal-scrollbar-measure {
    position: absolute;
    top: -9999px;
    overflow: scroll;
    width: 50px;
    height: 50px
}

@media (min-width: 480px) {
    .modal-dialog {
        max-width:600px;
        margin: 30px auto;
        margin: 30px
    }

    .modal-content {
        -webkit-box-shadow: 0 2px 12px rgba(0,0,0,.2);
        box-shadow: 0 2px 12px rgba(0,0,0,.2)
    }

    .modal-sm {
        max-width: 300px
    }
}

@media (min-width: 992px) {
    .modal-lg {
        max-width:900px
    }
}


@media (min-width: 768px) {
    .modal-dialoga {
        width:auto;
        margin: 30px auto
    }

    .modal-sm {
        width: 300px
    }
}
@media (min-width: 480px) {
    .modal-dialoga {
        max-width:600px;
        margin: 30px auto;
    }

    .modal-content {
        -webkit-box-shadow: 0 2px 12px rgba(0,0,0,.2);
        box-shadow: 0 2px 12px rgba(0,0,0,.2)
    }

    .modal-sm {
        max-width: 300px
    }
}