@charset "UTF-8";
/* CSS Document */

.contents .main-img h1.title {
	margin: -45px 0 0;
}

.contents.careerpath {
	width: 100%;
	margin: 0;
	padding: 0;
	float: left;
	color: #022b1c;
}

.contents.careerpath .main-img {
	height: 380px;
	background-image: initial;
	
}

.contents.careerpath h1.title {
	font-style: normal;
	font-size: 36px;
}

.contents.careerpath .main-img .copy {
	width: 90%;
	margin: 110px 5% 0;
	font-size: 50px;
	text-align: center;
	float: left;
	line-height: 70px;
}

.contents.careerpath .model {
	width: 100%;
	margin: 0;
	padding: 0;
	float: left;
	background-image: url("../images/career/bg01.jpg");
	background-position: top right;
	background-repeat: no-repeat;
	text-align: center;
}

.contents.careerpath .model .glid-60 {
	background: -webkit-linear-gradient(to right, rgba(255,255,255,1.00) 90%, rgba(255,255,255,0.6)95%, rgba(255,255,255,0.0));
	background: -o-linear-gradient(to right, rgba(255,255,255,1.00) 90%, rgba(255,255,255,0.6) 95%, rgba(255,255,255,0.0));
	background: linear-gradient(to right, rgba(255,255,255,1.00) 90%, rgba(255,255,255,0.60) 95%, rgba(255,255,255,0.0));
}

.contents.careerpath .model .box {
	width: 90%;
	margin: 70px 5% 50px;
	padding: 0;
	float: left;
	text-align: center;
	font-size: 20px;
	font-family: 'notoBold';
	line-height: 35px;
}

.contents.careerpath .model img {
	max-width: 800px;
	width: 80%;
	margin: 50px auto 100px;
	padding: 0;
}

.contents.careerpath .career_path {
	width: 100%;
	margin: 0;
	padding: 50px 0;
	float: left;
	text-align: center;
	background-image: url("../images/career/bg02.png");
	background-position: center bottom;
	background-size: cover;
	background-repeat: no-repeat;
}

.contents.careerpath .career_path .box {
	width: 100%;
	margin: 0;
	padding: 0;
	float: left;
}

.contents.careerpath .career_path .box .message {
	width: 72%;
	margin: 50px 14%;
	float: left;
	line-height: 30px;
	text-align: justify;
}

.contents.careerpath .career_path .box .image {
	width: 90%;
	margin: 50px 5%;
	float: left;
}

.contents.careerpath .training {
	width: 100%;
	margin: 0;
	padding: 0 0 100px;
	min-height: 100vh;
	background-image: url("../images/career/bg03.jpg");
	background-attachment: fixed;
	background-size: cover;
	background-position: left;
	float: left;
}

.contents.careerpath .training .message {
	width: 80%;
	margin: 100px 10% 100px;
	padding: 0;
	float: left;
	font-size: 36px;
	text-align: center;
	line-height: 50px;
	font-family: 'notoBold';
	text-shadow: 3px 3px 2px #FFF;
}

.contents.careerpath .training dl {
	width: 23%;
	margin: 50px 1% 0;
	float: left;
}

.contents.careerpath .training dt {
	width: 100%;
	margin: 0;
	height: 50px;
	line-height: 50px;
	background-color: #39984a;
	color: #FFF;
	font-family: 'notoBold';
	font-size: 20px;
	text-align: center;
}

.contents.careerpath .training dd {
	width: 90%;
	height: 150px;
	margin: 0;
	padding: 30px 5%;
	background-color: rgba(255,255,255,0.6);
}

.contents.careerpath .training dl.last dd {
	background-color: rgba(255,255,255,0);
	height: auto;
	text-align: right;
	font-family: 'notoBold';
	font-size: 20px;
	text-shadow: 3px 3px 2px #FFF;
}


/* ****************************************************************** *
        MOBILE  LAYOUT
********************************************************************* */
@media screen and (max-width:1500px) {
	.contents h2.common {
		font-size: 2.2vw;
		margin: 50px 0 0;
	}
}

@media screen and (max-width:1300px) {
	.contents.careerpath .main-img {
		height: 400px;
	}
	.contents .main-img h1.title {
		width: auto;
		height: auto;
		line-height: 3vw;
		padding: 20px 130px 20px 50px;
		left:0;
	}
	.contents.careerpath .main-img .copy {
		font-size: 36px;
		line-height: 45px;
		margin: 170px 5% 0;
	}
}

@media screen and (max-width:1100px) {
	.contents.careerpath .main-img {
		margin-top: 40px;
	}
	.contents.careerpath .model {
		background-image: initial;
	}
	.contents.careerpath .model .glid-60 {
		width: 100%;
	}
	.contents.careerpath .training dl {
		width: 40%;
		margin: 50px 5% 0;
	}
	.contents.careerpath .training dd {
		height: 100px;
	}
}

@media screen and (max-width:980px) {
	.contents.careerpath .main-img {
		height: 360px;
	}
	.contents .main-img h1.title {
		top: 172px;
	}
	.contents.careerpath .main-img .copy {
		margin: 160px 5% 0;
	}
	.contents.careerpath .training {
		background-position: center top;
	}
	.contents.careerpath .training .message {
		width: 90%;
		margin: 50px 3% 100px;
		padding: 20px 2%;
		font-size: 4vw;
		line-height: 6vw;
		background-color: rgba(255,255,255,0.5);
		border-radius: 20px;
		text-shadow: initial;
	}
}

@media screen and (max-width:880px) {
	.contents h2.common { 
		font-size: 20px;
		width: auto;
		height: auto;
		line-height: 20px;
		padding: 20px 30px;
	}
}

@media screen and (max-width:780px) {
	.contents .main-img h1.title {
		width: 100%;
		height: auto;
		padding: 15px 0;
		margin: 0;
		background-image: initial;
		background-color: #022B1C;
		top: 135px;
		font-size: 30px;
		line-height: 30px;
	}
	.contents.careerpath .model .box {
		margin: 50px 5%;
		font-size: 2.7vw;
		line-height: 3.5vw;
	}
	.contents.careerpath .training dl {
		width: 48%;
		margin: 50px 1% 0;
	}
	.contents.careerpath .training dd {
		height: 120px;
	}
}

@media screen and (max-width:680px) {
	.contents.careerpath .training dl {
		width: 98%;
		margin: 50px 1% 0;
	}
	.contents.careerpath .training dd {
		height: auto;
	}
}

@media screen and (max-width:500px) {
	.contents .main-img h1.title {
		font-size: 6vw;
		line-height: 6vw;
	}
	.contents.careerpath .main-img {
        height: 310px;
    }
	.contents.careerpath .main-img .copy {
		font-size: 6vw;
		line-height: 8vw;
		margin: 115px 5% 0;
	}
	.contents h2.common {
		margin: 0;
	}
	.contents h2.common.career {
		margin: 50px 0;
	}
	.contents.careerpath .model .box { 
		width: 80%;
		margin: 30px 15% 30px 5%;
		font-size: 16px;
		line-height: 30px;
		text-align: justify;
	}
	.contents.careerpath .model .box .mb {
		display: none;
	}
	.contents.careerpath .model img {
		width: 90%;
		margin: 0 auto;
	}
	.contents.careerpath .career_path .box .message {
		width: 80%;
		margin: 50px 15% 50px 5%;
		line-height: 25px;
	}
	.contents.careerpath .training {
		background-image:initial;
		background-color: #FFF;
	}
	.contents.careerpath .training .message {
		width: 76%;
		margin: 0 5% 0 15px;
		padding: 20px 2%;
		text-align: justify;
		font-size: 16px;
	}
	.contents.careerpath .training .message .mb {
		display: none;
	}
	.contents.careerpath .training dl {
		width: 80%;
		margin: 50px 15% 0 5%;
	}
}

@media screen and (max-width:480px) {
	.contents .main-img h1.title {
		top: 121px;
	}
}