@charset "utf-8";
/* CSS Document */
/* Slider Document */
.career {
	margin-top:  50px;
	margin-bottom: 0px;
}
.jobtitle{
	font-size: 24px;}

.nojob-message {
	font-size: 34px;
    line-height: 50px;
    padding: 50px 30px 0px;
}
.nojob-message a {
	color: #00a0dc;
}
.toggle > div > dt > a{
	color: #0087ae;}
.toggle > div > dt > a >small{
	font-size: 14px;
	font-weight: 800;
	color: #faa61a;}
.toggle > div > dt > a >strong{
	font-size: 16px;
	color: #6b6d6f;}
.toggle > div > dt > a > p{
	margin-top: 15px;
	font-size: 14px;
	color: #6b6d6f;}
.apply-button {
	position: absolute;
	top: 25px;
	right: 35px;
}
.toggle.toggle-bg-gray > div > dt > a.active {
	color: #0087ae;
    border-color: #f7f7f7;
    background-color: #f7f7f7;
    cursor: default;
}
.toggle > div > dd {
    border-color: #f7f7f7;
    background-color: #f7f7f7;
	padding: 0px 20px 20px;
}
.toggle > div > dt {
	margin-bottom: 0;
	margin-top: 15px;
}
.toggle > div > dt > a:after {
	top: 60px;
}
.toggle > div > dt > a.active:after, .toggle > div > dt > a.active:hover:after {
	color: #999;
}
.toggle > div > dt > a> .readmore {
	color: #faab1a;
}
.toggle > div > dt > a.active> .readmore {
	display: none;
}

/****** career *****/

#benefit{
	background-color: #ffffff;
	padding-top: 100px;
	padding-bottom: 200px;
	background-position:  center 400px;
	background-repeat: no-repeat;
	background-size: contain;
}
#benefit h3 {
	font-size: 32px;
	line-height: 46px;
	color: #0088af;
	margin-bottom: 30px;
}

#benefit .button{
	padding-left: 100px !important;
	padding-right: 100px !important;
}
#benefit .bg-image {
    max-width: 180px;
    width: 100%;
    margin: 130px auto 200px;
}
.key-points {
    position: absolute;
    color: #ffffff;
	font-size: 12px;
	line-height: 15px;
    text-align: center;
    padding-top: 22px;
	padding-left: 6px;
    padding-right: 6px;
    border-radius: 50%;
    width: 85px;
    height: 85px;
	z-index: 100;
    -webkit-box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.1);
}

.rate{
	background-color: #00a0dc;
	top: 100px;
    left: -20px;
}

.order{
	background-color: #73c3ed;
	top: 40px;
	right: 0px;
}
.tracking {
	background-color: #faa61a;
	top: 260px;
	right: 50px;
}
.subscription {
	    background-color: #faa61a;
		top: 10px;
		left: 50px;
	}
.live {
	background-color: #00a0dc;
	top: 180px;
	right: -20px;
}
.support {
	background-color: #0087ae;
	top: 250px;
	left: 40px;
}


@media only screen and (min-width: 360px) {
	#benefit{
		background-position:  center 350px;
	}
}

@media only screen and (min-width: 768px) {
	.nojob-message {
		font-size: 34px;
		line-height: 50px;
		padding: 50px 80px 0px;
	}
	.apply-button {
		position: absolute;
		top: 55px;
		right: 50px;
	}
	#benefit{
		padding-top: 100px;
		padding-bottom: 100px;
		background-position:  center 100px;
	}
	#benefit .bg-image {
		max-width: 300px;
		width: 100%;
		margin: 100px auto 200px;
	}
	#benefit h3 {
		margin-bottom: 50px;}

	.rate{
		top: 150px;
		left: 50px;
	}

	.order{
		top: 40px;
		right: 50px;
	}
	.tracking {
		top: 320px;
		right: 180px;
	}
	.subscription {
		top: -20px;
		left:100px;
	}
	.live {
		top: 220px;
		right: 50px;
	}
	.support {
		top: 300px;
		left: 130px;
	}
}

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

	#benefit .bg-image{
		max-width: none;
		margin: 150px auto 300px;
	}
	.key-points {
		font-size: 14px;
		line-height: 16px;
		padding-top: 35px;
		width: 110px;
		height: 110px;
	}
	
    .rate{
		top: 300px;
		left: 80px;
	}

	.order{
		top: 100px;
		right: 110px;
	}
	.tracking {
		top: 500px;
		right: 200px;
	}
	.subscription {
		top: 0px;
		left: 180px;
	}
	.live {
		top: 300px;
		right: 80px;
	}
	.support {
		top: 550px;
		left: 300px;
	}
	

}
@media only screen and (min-width: 1200px) {
    #benefit .bg-image{
		max-width: none;
		margin: 200px auto 300px;
	}
	
    .rate{
		top: 300px;
		left: 140px;
	}

	.order{
		top: 100px;
		right: 210px;
	}
	.tracking {
		top: 500px;
		right: 200px;
	}
	.subscription {
		top: 50px;
		left: 250px;
	}
	.live {
		top: 300px;
		right: 150px;
	}
	.support {
		top: 550px;
		left: 250px;
	}
	

}