@charset "UTF-8";
html {
    background: #f7f7f7;
}
.ms-banner {
    height: 210px;
    width: 100%;
    background: url(//static.jjoobb.cn/images/company/find/mystaff-banner.jpg) center;
    min-width: 1200px;
}
.ms-banner-info{
  width: 460px;
  position: absolute;
  top:46px;
  left: 570px;
}
.ms-banner-info p{
  line-height: 32px;
}
.ms-banner-info .titl{
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  text-align: center;
}
.ms-banner-info .titl span{
  color: #fcff00;
}
.ms-banner-info .text{
  color: #9ae9ff;
}
.ms-main{ 
	width: 1138px;
	height: auto;
	overflow: hidden;
  margin: -50px auto 20px;
  background: #fff;
  padding: 30px 30px 0 30px;
  border: 1px solid #ddd;
}
.ms-main-left{
  width: 640px;
  height: auto;
}
.ms-main-right{
  width: 480px;
  height: auto;
}
.ms-main-info p{
  line-height: 22px;
  color: #999;
}
.tab-btn{
    border-right: 1px solid #ddd;
    margin-top: 20px;
}
.tab-btn li{
	width: 138px;
	height: 40px;
	display: block;
	float: left;
	text-align: center;
	border: 1px solid #ddd;
	border-right: none;
	cursor: pointer;
}
.tab-btn li a{
	width: 138px;
	height: 39px;
	line-height: 39px;
	display: block;
	color: #333;
}
.tab-btn li.active a{
	border-bottom: 2px solid #66be8c;
	font-weight: bold;
	color: #66be8c;
}
a.btn-admin{
	height: 39px;
	line-height: 39px;
	color: #fd846a;
	margin: 20px 0 0 20px;
}
a:hover.btn-admin{
	color: #f5694b;
}
a:active.btn-admin{
	color: #333;
}
.ms-info{
	line-height: 32px;
  margin-top: 20px;
}
.ms-info-titl{
	height: 32px;
	line-height: 32px;
	padding-right: 5px;
}
.ms-info-box{
	width: 400px;
	height: 30px;
	border:1px solid #ddd;
}
.ms-info-box:hover{
	border-color: #66be8c;
}

.info-inp1{
	width: 320px;
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
	border:none;
}
.ms-info-box:hover, .ms-info-box.hover{
    border-color: #66be8c;
}
.btn-copy{
    width: 60px;
    height: 30px;
    display: inline-block;
    background: #eaeaea;
    border: none;
    cursor: pointer;
}
.ms-info-box:hover .btn-copy, .ms-info-box.hover .btn-copy {
    background: #66be8c;
    color: #fff;
}
.ms-h20{
	height: 20px;
}
.certifiedstaff-list{
	 width: 960px;
	 height: auto;
	 overflow: hidden;
	 border-right:1px solid #ddd; 
}
.certifiedstaff-list .ul-width{
	width: 960px;
}
.certifiedstaff-list .ul-width.load {
    height: 30px;
    background: url(//static.jjoobb.cn/images/global/loading.gif) no-repeat center;
}
.certifiedstaff-list .ul-width li{
	float: left;
	margin: 10px 10px 0 0;
	position: relative;
	z-index: 0;
}
.certifiedstaff-list dl{
	width: 262px;
	height: 90px;
	float: left;
	background: #f8f8f8;
	border: 1px solid #eee;
	padding: 20px;
	position: relative;
    z-index: 0;
}

.certifiedstaff-list dt a{
	width: 60px;
	height: 60px;
	float: left;
	padding-right: 10px;
	margin: 15px 10px 0 0;
	border-right: 1px solid #eee;
}
.certifiedstaff-list dt a img{
	width: 60px;
	height: 60px;
}
.certifiedstaff-list dt a.women{
	background: url(//static.jjoobb.cn/images/global/default_avatar_female.jpg) no-repeat left center;
	background-size: 60px 60px;
}
.certifiedstaff-list dt a.man{
	background: url(//static.jjoobb.cn/images/global/default_avatar_male.jpg) no-repeat left center;
	background-size:60px 60px;
}
.certifiedstaff-list dd{
	width: 180px;
    line-height: 30px;
    height: 30px;
    float: right;
    position: relative;
}
.certifiedstaff-list dd a.btn-classify{
	height: 28px;
	line-height: 28px;
	padding: 0 10px;
	display: inline-block;
	background: #fff;
	border:1px solid #ddd;
	margin-top: 5px;
	color: #666;
	width: 70px;
	text-align: center;
}
.certifiedstaff-list dd a.btn-more{
	height: 28px;
	line-height: 28px;
	padding: 0 10px;
	display: inline-block;
	background: #fff;
	border:1px solid #ddd;
	margin-top: 5px;
	color: #666;
	width: 42px;
}
.more{
	position: absolute;
	border:1px solid #ddd;
	box-shadow: 0 2px 8px 1px rgba(0,0,0,0.2);
  background-color: #fff;
  display: none;
  transition: all .3s ease-in-out;
  z-index: 99;
  top:36px;
  right:7px;
}
.certifiedstaff-list li.active {
  z-index: 88;
}
.certifiedstaff-list li.active .more {
  display: block;
}
.more a{
	display: block;
	padding: 2px 10px;
	height: 28px;
	line-height: 28px;
  color: #666;
  +width: 56px;
}
.more a:hover{
	background: #eee;
	color: #f5694b;
}
.classify{
	position: absolute;
	width: 280px;
	height: auto;
	padding: 10px 20px 20px;
	border:1px solid #ddd;
  border-radius: 3px;
	box-shadow: 0 2px 8px 1px rgba(0,0,0,0.2);
  background-color: #fff;
  transition: all .3s ease-in-out;
  z-index: 99;
  display: none;
}
.classify.open {
  display: block;
  opacity: 1;
  filter:Alpha(Opacity=100);
  -webkit-animation: fadeInDown .3s ease-in-out;
  animation: fadeInDown .3s ease-in-out
}
.classify h1{
	font-size: 14px;
  color: #333;
  font-weight: bold;
  margin-bottom: 10px;
}
.classify-list{
	height: 28px;
	line-height: 28px;
	display: inline-block;
	float: left;
	width: 130px;
}
.classify-list .dept-name{
  width: 86px;
  display: block;
  float: left;
}
.classify-list .ipt-dept-name {
  width: 82px;
  padding: 1px 5px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  display: none;
}
.classify-list .icon:hover {
    color: #f5694b;
}
.classify-list input{
	vertical-align: -10%;
}
.classify-add{
	margin-top: 5px; 
    display: none;
}
.classify .inp1{
	width: 160px;
	height: 26px;
	line-height: 26px\9;
	border:1px solid #ddd;
	padding-left: 5px;
	margin-top: -3px;
}
.classify-list .custom-text{
	width: 90px;
	height: 28px;
	line-height: 28px;
	cursor: pointer;
}
.classify-list .inp-hide{
	width: 90px;
	height: 28px;
	display: none;
}
.hover .icon{
	display: none;
}
.hover:hover .icon{
	display: inline-block;
	padding-right: 5px;
	cursor: pointer;
}
.hover .icon{
	color: #333;
}
.hover .icon:hover{
    color: #f5694b;
}
.btn-yes{
	display: inline-block;
	height: 26px;
	line-height: 26px;
	padding: 0 10px;
	background: #e75636;
	color: #fff;
	border:1px solid #e75636;
}
.btn-yes:hover{
	background: #f5694b;
}
.btn-no{
	display: inline-block;
	height: 26px;
	line-height: 26px;
	padding: 0 10px;
	color: #333;
	border:1px solid #eee;
}
.btn-no:hover{
	background: #eee;
}
.btn-add{
	display: inline-block;
  padding: 0 15px 0 7px;
  height: 28px;
  line-height: 28px;
  border: 1px solid #ddd;
  background-color: #fff;
  vertical-align: top;
  margin-top: 5px;
  color: #666;
}
.btn-add .icon{
	font-size: 12px;
	color: #f5694b;
	vertical-align: 6%;
}
.name{
  font-weight: bold;
  width: 42px;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap; 
}
.name a{
	color: #66be8c;
}
.name a:hover{
	color: #58B781;
	text-decoration: underline;
}
.name a:active{
	color:#333;
}
.mystaff-list dd img{
	padding-left: 5px;
	float: left;
	margin-top: 3px;
}
.sex{
	font-size: 18px;
    padding-left: 3px;
}
.sex.women{
	color: #f22de2;
}
.sex.man{
	color: #30aef6;
}
.job{
	width: 180px;
}

.fans{
	width: 80px;
	line-height: 30px;
	padding-left: 10px;
	color: #999;
	overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ms-page{
	margin: 30px 28px 30px 0;
}

.certifiedstaff-list dl:hover{
	background: #f7fffa;
	border-color: #6cc191;
}
.certifiedstaff-list dd img{
	padding-left: 5px;
	float: left;
	margin-top:3px;
}


/*pop-cancel*/
.poplay{
	width: 415px;
	height: auto;
	padding: 0 20px;
	color: #333;
  display: block;
  line-height: 28px;
}
.poplay p{
	line-height: 28px;
}
.p-cen{
	text-align: center;
  +line-height: 28px;
}
.name{
    font-weight: bold;
    color: #66be8c;
}
.p-text{
	color: #999;
  +line-height: 28px;
}

/*right*/
.certifiedstaff-right{
	width: 170px;
	height: auto;
	overflow: hidden;
	padding: 10px 0;
	margin-top: 10px;
}
.certifiedstaff-right h1{
	font-size: 14px;
	padding-left: 14px;
}
.certifiedstaff-right h1 .icon{
	font-size: 18px;
	padding-right: 10px;
}
.department{
	margin-top: 10px;
}
.department li{
	line-height: 32px;
	padding-left: 50px;
}
.department li a{
	color: #666;
}
.department li a span{
  cursor: pointer;
}
.department li a:hover{
    color: #66be8c;
}
.department li.active a{
	color: #66be8c;
	font-weight: bold;
}
.department .ellipsis {
	float: left;
	max-width: 65px;
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        filter: alpha(opacity=0);
        -webkit-transform: translate3d(0,-10%,0)
    }

    100% {
        opacity: 1;
        filter: alpha(opacity=100);
        -webkit-transform: none
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        filter: alpha(opacity=0);
        transform: translate3d(0,-10%,0)
    }

    100% {
        opacity: 1;
        filter: alpha(opacity=100);
        transform: none
    }
}
.fadeOutUp {
    -webkit-animation: fadeOutUp .3s ease-in-out;
    animation: fadeOutUp .3s ease-in-out
}

@-webkit-keyframes fadeOutUp {
    0% {
        z-index: 3;
        opacity: 1;
        filter: alpha(opacity=100)
    }

    100% {
        z-index: 3;
        opacity: 0;
        filter: alpha(opacity=0);
        -webkit-transform: translate3d(0,-10%,0)
    }
}

@keyframes fadeOutUp {
    0% {
        z-index: 3;
        opacity: 1;
        filter: alpha(opacity=100)
    }

    100% {
        z-index: 3;
        opacity: 0;
        filter: alpha(opacity=0);
        transform: translate3d(0,-10%,0);
    }
}

/*提示样式*/
.msg{ 
	line-height: 32px;
	text-align: center;
	margin: 40px 0;
}
.msg span{
	padding: 0 5px;
}
.msg .icon{ 
	font-size: 32px; 
	vertical-align: -16%;
	padding-right: 5px;
}
.fail{ 
	color: #f5694b;
}
.fail a{
	color: #66be8c;
}
.fail a:hover{
	color: #58B781;
	text-decoration: underline;
}

#letterDAL .form-group {
  width: 600px;
  margin-bottom: 20px;
}
#letterDAL input.form-control {
  width: 360px;
}
#letterDAL .form-control.letter-content {
  width: 500px;
  height: 150px;
  vertical-align: top;
  padding: 5px 10px;
}
#letterDAL .form-label {
  width: 65px;
  text-align: right;
  display: inline-block;
}