@charset "UTF-8";

body, html {
	padding: 0;
	margin: 0;
	background: #F8F9FA;
	width: 100%;
	height: 100%;
}

.toolbar{
	position: fixed;
	z-index: 2;
	right: 0;
	bottom: 20%;
}
.toolbar a{
	display: block;
	margin: 2vw 0;
	padding: 0 2vw 0 4vw;
	height: 12vw;
	line-height: 12vw;
	color: #222;
	font-size: 4vw;
	background: rgba(240,240,240,.8);
	border:solid 1px rgba(204,204,204,.6);
	box-shadow:0 0 2px rgba(204,204,204,.6);
	border-right:0;
	border-radius: 6vw 0 0 6vw;
	text-decoration: none;
}

.container {
	min-height: 100%;
}
.header{
	background-color: #F7F7F5;
	margin-bottom: 2vw;
}
.search {
	position: relative;
	padding: 3.73vw 4%;
}
.search input {
	display: block;
	border-radius: 4vw;
	padding-left: 9.6vw;
	width: 100%;
	height: 8vw;
	line-height: 8vw;
	color: #222;
	font-size: 3.2vw;
	border: 0;
	box-sizing: border-box;
	background-color: #FFFFFF;
	background-image: url(qylist/icon_search.png);
	background-repeat: no-repeat;
	background-size: auto 50%;
	background-position: 3.2vw center;
}

.switch-container{
	width: 92%;
	height:12vw;
	margin: 0 auto;
	background: #FFFFFF;
	display:none;
}
.switch-container .switch-img-left{
	float: left;
	height: 100%;
	width: 51.35vw;
	text-align: center;
	overflow: hidden;
}
.switch-container .switch-img-right{
	float: right;
	height: 100%;
	width: 51.35vw;
	text-align: center;
	overflow: hidden;
	display: none
}
.switch-container .switch-btn{
	position: relative;
	width: 100%;
	height: 100%;
	top: -100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.switch-container .switch-btn span{
	width: 100%;
	height: 100%;
	text-align: center;
	line-height: 12vw;
	font-size: 4.27vw;
}
.switch-container .switch-btn .left{
	float: left;
}
.switch-container .switch-btn .right{
	float: right;
}
.switch-container .switch-btn .selected{
	color: white;
}

.jobempty{
	margin: 10vw 0;
	padding-top: 38vw;
	background-image: url(joblist/empty.png);
	background-size: 55vw auto;
	background-position: center;
	background-repeat: no-repeat;
	text-align: center;
}
.jobempty-title{
	font-size: 4vw;
	font-weight: bold;
	line-height: 5vw;
	color: #222222;
	margin-bottom: 2vw;
}
.jobempty-desc{
	font-size: 4vw;
	font-weight: 500;
	line-height: 6vw;
	color: #666666;
}
.jobitem:first-child{
	position: relative;
	padding: 4vw;
	border-top: none;
	background: #FFFFFF;
	overflow: hidden;
	text-decoration: none;
	display: block;
	color: #535353;
	font-size: 3vw;
}
.jobitem{
	position: relative;
	padding: 4vw;
	border-top: 0.5px #EFEFEF solid;
	background: #FFFFFF;
	overflow: hidden;
	text-decoration: none;
	display: block;
	color: #535353;
	font-size: 3vw;
}
.jobitem .job_name{
	color: #000;
	font-size: 4vw;
	font-weight: bold;
}
.jobitem .job_from{
	margin: 2vw 0;
}
.jobitem .job_from span{
	color: var(--main-color);
}
.jobitem .job_info{
	font-weight: 400;
	width: 70%;
}
.jobitem .job_info p{
	margin-right:2vw;
	padding: 1vw 2vw;
	background: #F3F3F3;
	display: inline-block;
	margin-bottom: 2vw;
}

.jobitem .job_info p:last-child::after{
	margin: 0;
	border:0;
}
.jobitem .job_xinzi{
	position: absolute;
	right: 4vw;
	top: 10vw;
	font-size: 4vw;
	font-weight: bold;
	color: var(--main-color);
}

.navbar {
	position: relative;
	height: 10vw;
}
.navbar .menu {
	float: left;
	width: 25%;
	height: 10vw;
	line-height: 10vw;
	color: #222;
	font-size: 3.73vw;
	text-align: center;
	cursor: pointer;
}
.navbar .menu::after {
	content: " ";
	position: absolute;
	margin-left: 1.07vw;
	width: 1.33vw;
	height: 100%;
	background-image: url(qylist/icon_menu1.png);
	background-size: 100% auto;
	background-position: center;
	background-repeat: no-repeat;
}
.navbar .menu.val {
	color: var(--main-color);
}
.navbar .menu.on {
	color: var(--main-color);
}
.navbar .menu.on::after {
	content: " ";
	position: absolute;
	margin-left: 1.07vw;
	width: 1.33vw;
	height: 100%;
	background-image: url(qylist/icon_menu2.png);
	background-size: 100% auto;
	background-position: center;
	background-repeat: no-repeat;
}
.navbar .menu.on .submenu{
	display: block;
}
.navbar .submenu{
	display: none;
	position: absolute;
	left: 0;
	width: 100%;
    padding-bottom: 4vw;
    background: #fff;
    z-index: 9;
	border-top: 0.27vw solid #F1F1F1;
	box-shadow: 0 5px 5px rgb(0,0,0,0.1);
}
.navbar .submenu a{
	float: left;
	display: block;
	margin: 4vw 0 0 4vw;
	width: 28%;
	height: 10.4vw;
	line-height: 10.4vw;
	color: #222;
	font-size: 3.2vw;
	background: #F8F9FA;
	border-radius: 2px;
	text-decoration: none;
}
.navbar .submenu a.on{
	color: var(--main-color);
}

.empty{
	margin: 10vw 0;
	padding-top: 38vw;
	background-image: url(qylist/empty.png);
	background-size: 55vw auto;
	background-position: center;
	background-repeat: no-repeat;
	text-align: center;
}
.empty-title{
	font-size: 4vw;
	font-weight: bold;
	line-height: 5vw;
	color: #222222;
	margin-bottom: 2vw;
}
.empty-desc{
	font-size: 4vw;
	font-weight: 500;
	line-height: 6vw;
	color: #666666;
}

.item:first-child{
	position: relative;
	padding: 4vw;
	border-top: none;
	background: #FFFFFF;
	overflow: hidden;
	text-decoration: none;
	font-size: 3vw;
	display: flex;
}

.item{
	position: relative;
	border-top: 0.5px #EFEFEF solid;
	padding: 4vw;
	background: #FFFFFF;
	overflow: hidden;
	text-decoration: none;
	font-size: 3vw;
	display: flex;
}
.item::after{
	content: '';
	width: 1.44vw;
	height: 100%;
	background: url(qylist/tri.png) center no-repeat;
	background-size: 100% 2.87vw;
	position: absolute;
	right: 3.73vw;
	top: 1vw;
}
.item-img{
	width: 18vw;
	height: 18vw;
	text-align: center;
	display: flex;
    justify-content: center;
    align-items: center;
	overflow: hidden;
}
.item-img i{
	font-size: 8vw;
}
.item-img img{
	max-width: 100%;
	max-height: 100%;
}
.item-content {
	margin: 0 0 0 3.5vw;
	color: #535353;
}
.item-content .qy_name{
	color: #000;
	font-size: 3.73vw;
	font-weight: bold;
	margin-top: 1.5vw;
}
.item-content .qy_count{
	margin: 2vw 0;
	padding: 0 0 0 6vw;
	background-image: url(qylist/icon_job.png);
	background-size: auto 3vw;
	background-position: center left;
	background-repeat: no-repeat;
}
.item-content .qy_count span{
	margin-right:2vw;
}
.item-content .qy_info{
	position: absolute;
	font-weight: 400;
	margin-top: 2.16vw;
	width: 62%;
	height: 50%;
	overflow: hidden;
	text-overflow:ellipsis ;


	display: -webkit-box;
	-webkit-line-clamp:2;


	-webkit-box-orient: vertical;
}
.item-content .qy_info span{
	margin-right:2vw;
	font-size: 2.93vw;
	font-weight: 400;
	color: #999999;
	overflow: hidden;
	text-overflow:ellipsis ;
	letter-spacing: 0.3vw;


	display: -webkit-box;
	-webkit-line-clamp:2;


	-webkit-box-orient: vertical;
}
.item-content .qy_info span::after{
	content: "";
    border-right: solid 1px #555;
    height: 2.6vw;
    margin: 0.5vw 0 0 1vw;
    position: absolute;
}
.item-content .qy_info span:last-child::after{
    margin: 0;
    border:0;
}

/* 屏幕大于等于680px */
@media screen and (min-width: 680px){
	.container{
		position: relative;
		max-width: 680px;
		margin: 0 auto;
		overflow: hidden;
		box-shadow: 0 0 8px rgb(0,0,0,.15);
	}
	.toolbar{
		right: calc(50% - 340px);
	}
}
/* 屏幕大于等于500px */
@media screen and (min-width: 500px){
	:root{
	    --screen-width:500px;
	}
	
	.toolbar a{
		margin: calc(var(--screen-width) * 2 / 100) 0;
		padding: 0 calc(var(--screen-width) * 2 / 100) 0 calc(var(--screen-width) * 4 / 100);
		height: calc(var(--screen-width) * 12 / 100);
		line-height: calc(var(--screen-width) * 12 / 100);
		font-size: calc(var(--screen-width) * 4 / 100);
		border-radius: calc(var(--screen-width) * 6 / 100) 0 0 calc(var(--screen-width) * 6 / 100);
	}

	.header{
		margin-bottom: calc(var(--screen-width) * 2 / 100);
	}
	.search {
		padding: 18px 4%;
	}
	.search input {
		border-radius: calc(var(--screen-width) * 4 / 100);
		padding-left: calc(var(--screen-width) * 9.6 / 100);
		height: calc(var(--screen-width) * 8 / 100);
		line-height: calc(var(--screen-width) * 8 / 100);
		font-size: calc(var(--screen-width) * 3.2 / 100);
		background-position: calc(var(--screen-width) * 3.2 / 100) center;
	}

	.jobempty{
		margin: calc(var(--screen-width) * 10 / 100) 0;
		padding-top: calc(var(--screen-width) * 38 / 100);
		background-size: calc(var(--screen-width) * 55 / 100) auto;
	}
	.jobempty-title{
		font-size: calc(var(--screen-width) * 4 / 100);
		line-height: calc(var(--screen-width) * 5 / 100);
		margin-bottom: calc(var(--screen-width) * 2 / 100);
	}
	.jobempty-desc{
		font-size: calc(var(--screen-width) * 4 / 100);
		line-height: calc(var(--screen-width) * 6 / 100);
	}
	.jobitem:first-child{
		position: relative;
		padding: calc(var(--screen-width) * 4 / 100);
		border-top: none;
		background: #FFFFFF;
		overflow: hidden;
		text-decoration: none;
		display: block;
		color: #535353;
		font-size: calc(var(--screen-width) * 3 / 100);
	}
	.jobitem{
		padding: calc(var(--screen-width) * 4 / 100);
		font-size: calc(var(--screen-width) * 3 / 100);
	}
	.jobitem .job_name{
		font-size: calc(var(--screen-width) * 4 / 100);
	}
	.jobitem .job_from{
		margin: calc(var(--screen-width) * 2 / 100) 0;
	}
	.jobitem .job_info p{
		margin-right:calc(var(--screen-width) * 2 / 100);
	}

	.jobitem .job_xinzi{
		right: calc(var(--screen-width) * 4 / 100);
		top: calc(var(--screen-width) * 10 / 100);
		font-size: calc(var(--screen-width) * 4 / 100);
	}


	.navbar {
		height: calc(var(--screen-width) * 10 / 100);
	}
	.navbar .menu {
		height: calc(var(--screen-width) * 10 / 100);
		line-height: calc(var(--screen-width) * 10 / 100);
		font-size: calc(var(--screen-width) * 3.73 / 100);
	}
	.navbar .menu::after {
		margin-left: calc(var(--screen-width) * 1.07 / 100);
		width: calc(var(--screen-width) * 1.33 / 100);
	}
	.navbar .menu.on::after {
		margin-left: calc(var(--screen-width) * 1.07 / 100);
		width: calc(var(--screen-width) * 1.33 / 100);
	}
	.navbar .submenu{
	    padding-bottom: calc(var(--screen-width) * 4 / 100);
		border-top: calc(var(--screen-width) * 0.27 / 100) solid #F1F1F1;
	}
	.navbar .submenu a{
		margin: calc(var(--screen-width) * 4 / 100) 0 0 calc(var(--screen-width) * 4 / 100);
		height: calc(var(--screen-width) * 10.4 / 100);
		line-height: calc(var(--screen-width) * 10.4 / 100);
		font-size: calc(var(--screen-width) * 3.2 / 100);
	}
	
	.empty{
		margin: calc(var(--screen-width) * 10 / 100) 0;
		padding-top: calc(var(--screen-width) * 38 / 100);
		background-size: calc(var(--screen-width) * 55 / 100) auto;
	}
	.empty-title{
		font-size: calc(var(--screen-width) * 4 / 100);
		line-height: calc(var(--screen-width) * 5 / 100);
		margin-bottom: calc(var(--screen-width) * 2 / 100);
	}
	.empty-desc{
		font-size: calc(var(--screen-width) * 4 / 100);
		line-height: calc(var(--screen-width) * 6 / 100);
	}

	.switch-container{
		width: 92%;
		height:calc(var(--screen-width) * 12 / 100);
		margin: 0 auto;
		background: #FFFFFF
	}
	.switch-container .switch-img-left{
		float: left;
		height: 100%;
		width: calc(var(--screen-width) * 68.35 / 100);
		text-align: center;
		overflow: hidden;
	}
	.switch-container .switch-img-right{
		float: right;
		height: 100%;
		width: calc(var(--screen-width) * 68.35 / 100);
		text-align: center;
		overflow: hidden;
		display: none
	}
	.switch-container .switch-btn{
		position: relative;
		width: 100%;
		height: 100%;
		top: -100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.switch-container .switch-btn span{
		width: 100%;
		height: 100%;
		text-align: center;
		line-height: calc(var(--screen-width) * 12 / 100);
		font-size: calc(var(--screen-width) * 4.27 / 100);
	}
	.switch-container .switch-btn .left{
		float: left;
	}
	.switch-container .switch-btn .right{
		float: right;
	}
	.switch-container .switch-btn .selected{
		color: white;
	}


	.item:first-child{
		position: relative;
		border-top: none;
		background: #FFFFFF;
		overflow: hidden;
		text-decoration: none;
		display: flex;

		padding: calc(var(--screen-width) * 4 / 100);
		font-size: calc(var(--screen-width) * 3 / 100);
	}
	
	.item{
		padding: calc(var(--screen-width) * 4 / 100);
		font-size: calc(var(--screen-width) * 3 / 100);
	}
	.item-img{
		width: calc(var(--screen-width) * 18 / 100);
		height: calc(var(--screen-width) * 18 / 100);
	}
	.item-img i{
		font-size: calc(var(--screen-width) * 8 / 100);
	}
	.item-content {
		margin: 0 0 0 calc(var(--screen-width) * 3.5 / 100);
	}
	.item-content .qy_name{
		font-size: calc(var(--screen-width) * 3.73 / 100);
	}
	.item-content .qy_count{
		margin: calc(var(--screen-width) * 2 / 100) 0;
		padding: 0 0 0 calc(var(--screen-width) * 6 / 100);
		background-size: auto calc(var(--screen-width) * 3 / 100);
	}
	.item-content .qy_count span{
		margin-right:calc(var(--screen-width) * 2 / 100);
	}
	.item-content .qy_info span{
		margin-right:calc(var(--screen-width) * 2 / 100);
		font-size: calc(var(--screen-width) * 3.5 / 100);

	}
	.item-content .qy_info span::after{
	    height: calc(var(--screen-width) * 2.6 / 100);
	    margin: calc(var(--screen-width) * 0.5 / 100) 0 0 calc(var(--screen-width) * 1 / 100);
	}
}