@import '../css/easing.less'; 
/* @import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css); */
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css) ; 

@font-face {
	font-family:"HN_Th"; 
	src:url('../font/HelveticaNeueLTStd-Th.eot'); 
	src:local('☺'), url('../font/HelveticaNeueLTStd-Th.eot?#iefix') format("embedded-opentype"), 
	url('../font/HelveticaNeueLTStd-Th.woff') format("woff"), 
	url('../font/HelveticaNeueLTStd-Th.ttf') format("truetype"); 
}

@font-face {
	font-family:"HN_UtlLt"; 
	src:url('../font/HelveticaNeueLTStd-UltLt.eot'); 
	src:local('☺'), url('../font/HelveticaNeueLTStd-UltLt.eot?#iefix') format("embedded-opentype"), 
	url('../font/HelveticaNeueLTStd-UltLt.woff') format("woff"), 
	url('../font/HelveticaNeueLTStd-UltLt.ttf') format("truetype"); 
}
@font-face {font-family:"HN_Lt"; src:url('../font/HelveticaNeueLTStd-Lt.eot'); src:local('☺'), url('../font/HelveticaNeueLTStd-Lt.eot?#iefix') format("embedded-opentype"), url('../font/HelveticaNeueLTStd-Lt.woff') format("woff"), url('../font/HelveticaNeueLTStd-Lt.ttf') format("truetype"); }
@font-face {font-family:"HN_Rm"; src:url('../font/HelveticaNeueLTStd-Rm.eot'); src:local('☺'), url('../font/HelveticaNeueLTStd-Rm.eot?#iefix') format("embedded-opentype"), url('../font/HelveticaNeueLTStd-Rm.woff') format("woff"), url('../font/HelveticaNeueLTStd-Rm.ttf') format("truetype"); }
@font-face {font-family:"HN_Bd"; src:url('../font/HelveticaNeueLTStd-Bd.eot'); src:local('☺'), url('../font/HelveticaNeueLTStd-Bd.eot?#iefix') format("embedded-opentype"), url('../font/HelveticaNeueLTStd-Bd.woff') format("woff"), url('../font/HelveticaNeueLTStd-Bd.ttf') format("truetype"); }

// @font-face { font-family:"YGP710"; src:url('../font/YoonGothicPro710.eot'); src:local('☺'), url('../font/YoonGothicPro710.eot?#iefix') format("embedded-opentype"), url('../font/YoonGothicPro710.woff') format("woff"), url('../font/YoonGothicPro710.ttf') format("truetype"); }
@font-face { font-family:"YGP720"; src:url('../font/YoonGothicPro720.eot'); src:local('☺'), url('../font/YoonGothicPro720.eot?#iefix') format("embedded-opentype"), url('../font/YoonGothicPro720.woff') format("woff"), url('../font/YoonGothicPro720.ttf') format("truetype"); }
@font-face { font-family:"YGP730"; src:url('../font/YoonGothicPro730.eot'); src:local('☺'), url('../font/YoonGothicPro730.eot?#iefix') format("embedded-opentype"), url('../font/YoonGothicPro730.woff') format("woff"), url('../font/YoonGothicPro730.ttf') format("truetype"); }
@font-face { font-family:"YGP740"; src:url('../font/YoonGothicPro740.eot'); src:local('☺'), url('../font/YoonGothicPro740.eot?#iefix') format("embedded-opentype"), url('../font/YoonGothicPro740.woff') format("woff"), url('../font/YoonGothicPro740.ttf') format("truetype"); }
// @font-face { font-family:"YGP750"; src:url('../font/YoonGothicPro750.eot'); src:local('☺'), url('../font/YoonGothicPro750.eot?#iefix') format("embedded-opentype"), url('../font/YoonGothicPro750.woff') format("woff"), url('../font/YoonGothicPro750.ttf') format("truetype"); }
@font-face { font-family:"YGP760"; src:url('../font/YoonGothicPro760.eot'); src:local('☺'), url('../font/YoonGothicPro760.eot?#iefix') format("embedded-opentype"), url('../font/YoonGothicPro760.woff') format("woff"), url('../font/YoonGothicPro760.ttf') format("truetype"); }
@font-face { font-family:"YGP770"; src:url('../font/YoonGothicPro770.eot'); src:local('☺'), url('../font/YoonGothicPro770.eot?#iefix') format("embedded-opentype"), url('../font/YoonGothicPro770.woff') format("woff"), url('../font/YoonGothicPro770.ttf') format("truetype"); }
// @font-face { font-family:"YGP780"; src:url('../font/YoonGothicPro780.eot'); src:local('☺'), url('../font/YoonGothicPro780.eot?#iefix') format("embedded-opentype"), url('../font/YoonGothicPro780.woff') format("woff"), url('../font/YoonGothicPro780.ttf') format("truetype"); }
// @font-face { font-family:"YGP790"; src:url('../font/YoonGothicPro790.eot'); src:local('☺'), url('../font/YoonGothicPro790.eot?#iefix') format("embedded-opentype"), url('../font/YoonGothicPro790.woff') format("woff"), url('../font/YoonGothicPro790.ttf') format("truetype"); } 

@font-face {
	font-family:"HN_Th"; 
	src:url('../font/HelveticaNeueLTStd-Th.eot'); 
	src:local('☺'), url('../font/HelveticaNeueLTStd-Th.eot?#iefix') format("embedded-opentype"), 
	url('../font/HelveticaNeueLTStd-Th.woff') format("woff"), 
	url('../font/HelveticaNeueLTStd-Th.ttf') format("truetype"); 
}

@font-face {
	font-family:"HN_UtlLt"; 
	src:url('../font/HelveticaNeueLTStd-UltLt.eot'); 
	src:local('☺'), url('../font/HelveticaNeueLTStd-UltLt.eot?#iefix') format("embedded-opentype"), 
	url('../font/HelveticaNeueLTStd-UltLt.woff') format("woff"), 
	url('../font/HelveticaNeueLTStd-UltLt.ttf') format("truetype"); 
}
@font-face {font-family:"HN_Lt"; src:url('../font/HelveticaNeueLTStd-Lt.eot'); src:local('☺'), url('../font/HelveticaNeueLTStd-Lt.eot?#iefix') format("embedded-opentype"), url('../font/HelveticaNeueLTStd-Lt.woff') format("woff"), url('../font/HelveticaNeueLTStd-Lt.ttf') format("truetype"); }
@font-face {font-family:"HN_Rm"; src:url('../font/HelveticaNeueLTStd-Rm.eot'); src:local('☺'), url('../font/HelveticaNeueLTStd-Rm.eot?#iefix') format("embedded-opentype"), url('../font/HelveticaNeueLTStd-Rm.woff') format("woff"), url('../font/HelveticaNeueLTStd-Rm.ttf') format("truetype"); }
.HN_UtlLt () { font-family:"HN_UtlLt"; letter-spacing: 2px; }
.HN_Th () { font-family:"HN_Th"; }
.HN_Lt () { font-family:"HN_Lt"; }
.HN_Rm () { font-family:"HN_Rm"; }

.duration {
	transition-timing-function: ease-in-out;
	transition-property: all; 
	transition-duration: .5s;
}

div.recruitBox {
	position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; 
	visibility: hidden; opacity: 0; 
	z-index: 100; 

	.duration() ; 

	&.active {
		visibility: visible; 
		opacity: 1; 
	}

	div.bgBox {
		div.topBox {
			position: absolute; left: 0px; top: 0px; 
			width: 100%; height: 174px; 
			z-index: 10; 

			background: #89ffe0; /* Old browsers */
			background: -moz-linear-gradient(45deg,  #89ffe0 0%, #e4ff98 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(45deg,  #89ffe0 0%,#e4ff98 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(45deg,  #89ffe0 0%,#e4ff98 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#89ffe0', endColorstr='#e4ff98',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
		}

		p.bg {
			// position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; 
			position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; 
			// transform: translateX( -50% ) translateY( -50% ); 

			background-position: center center;
			// background-size: cover; 
			visibility: hidden; opacity: 0; 

			.duration() ; 

			&.active { 
				visibility: visible; opacity: 1; 
				z-index: 2; 
			}
			
			&:nth-of-type(1) {
				background-image: url( '../images/recruit_bg01.jpg' ) ; 
			}
			&:nth-of-type(2) {
				background-image: url( '../images/recruit_bg02.jpg' ) ; 
			}
			&:nth-of-type(3) {
				background-image: url( '../images/recruit_bg03.jpg' ) ; 
			}
		}
	}

	dl.menu {
		position: absolute; left: 50%; top: 0px; height: 100%; z-index: 20; 

		width: 920px; 
		transform: translateX( -50% ) ; 

		@media screen and ( max-width: 1000px ) {
			width: 800px; 
		}

		@media screen and ( max-width: 800px ) {
			width: 600px; 
		}

		@media screen and ( max-width: 600px ) {
			width: 360px; 
		}

		@media screen and ( max-height: 840px ) {
			dd { font-size: 12px !important; }
			h2 { font-size: 20px !important; }
			p { font-size: 12px !important; }

			ul.chkList { 
				margin-top: 40px !important; 
				font-size: 12px !important; 
			}
			ul.fileList { 
				margin-top: 20px !important; 
				font-size: 12px !important; 
			}			
		}

		@media screen and ( max-height: 700px ) {
			dd { margin-top: 100px; }
		}

		&:before {
			content: ''; 
			display: block; 
			position: absolute; left: 0px; top: 0px; 
			width: 1px; height: 174px; 
			font-size: 0px; line-height: 0px; 
			background-color: #000;

		}

		dt {
			position: absolute; top: 130px; 
			font-weight: bold;
			letter-spacing: 1px; 
			opacity: .3; 

			.duration() ; 

			&.active {
				opacity: 1; 
			}

			.HN_Rm(); 

			&:nth-of-type(1) {
				left: 25px; 
			}
			&:nth-of-type(2) {
				left: 185px; 
			}
			&:nth-of-type(3) {
				left: 295px; 
			}

			a { color: #000; }
		}
		dd {
			position: absolute; left: 50%; top: 50%;
			transform: translateX( -50% ) translateY( -50% );
			width: 100%;
			visibility: hidden; 
			opacity: 0; 
			padding-left: 20px; 

			font-family: "YGP730"; 

			.duration() ; 

			 &.active {
			 	visibility: visible; 
			 	opacity: 1; 
			 }

			 > h2 { 
			 	font-family: "YGP720"; 
			 	color: #89ffe0; 
				font-size: 40px;
				letter-spacing: -1px; 
				padding-bottom: 15px; 
			 }

			 > p { 
			 	color: #fff; font-size: 17px; line-height: 1.6; 
			 	em { color: #e4ff98; }
			 }

			 ul {
			 	color: #fff; 
			 	font-size: 14px; 
			 	line-height: 1.8; 
				position: relative;

				&.chkList { margin-top: 110px; }
				&.fileList { margin-top: 72px; }

				&:before {
					content: ''; display: block;
					width: 41px; height: 2px;
					position: absolute; left: 0px; top: -10px; 
					background: #89ffe0; 
				}
			 }

			 // <button data-type="Jobs-finish">채용마감</button>

			button[data-type=jobs-finish] , 
			button[data-type=support] {
				color: #fff; font-size: 24px; letter-spacing: 1px; 
				font-family: "YGP720"; 
				position: absolute; right: 75px; bottom: 0px; 
				outline: none; 

				&:before {
					content: '';
					display: block;
					width: 57px;
					height: 37px;
					background: url('http://eldertree.com/images/icon_cross.png') no-repeat 100% top;
					position: absolute;
					right: -55px;
					top: 50%;
					margin-top: -18.5px;
				}
			}

			button[data-type=jobs-finish] {
				opacity: .5; cursor: default;
			}
		}
	}

	button[data-type=close] {
		position: absolute; right: 102px; top: 71px; z-index: 100; outline: none; 
		width: 31px; height: 31px; 
		font-size: 0px; line-height: 0px; 

		.duration() ; 

		transform: rotate( 0deg );

		&:hover {
			transform: rotate( 360deg ); 
			&:before , &:after { background-color: #f60; }
		}

		&:before , &:after { content: ''; display: block; position: absolute; width: 44px; height: 1px; font-size: 0px; line-height: 0px; background-color: #000; 
			.duration() ; 
		}

		&:before {
			left: 0px; top: 0px; 
			transform-origin: left top;
			transform: rotate( 45deg );
		}
		&:after {
			transform: rotate( -45deg );
			right: 0px; top: 0px;
			transform-origin: right top;
		}

	}
}




// <div class="container">
//   <div class="img"></div>
// </div>

// .container,
// .container .img {background:url( http://placehold.it/350x150) center no-repeat;}
// .container {background-image:url(http://placehold.it/350x150/E8117F);}

// .container {
//   width:500px;height:200px; background-size:cover;
//   border:1px solid;
// }

// .container {position:relative;}
// .container .img {
//   position:absolute;left:0;right:0;top:0;bottom:0;
//   opacity:.7;
// }

div.recruitIntro {
	.duration() ; 
	transition-duration: .75s; 
	opacity: 0; 

	&.active {
		position: absolute; left: 0px; top: 0px; z-index: 200; 
		width: 100%; height: 100%; 
		opacity: 1; 
	}

	div.bgTitle {
		font-family: "YGP770"; font-weight: bold; font-size: 100px; color: white;  
		background: url('../images/recruit_bg01.jpg') no-repeat;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;

		position: absolute; left: 50%; z-index: 999; 

		.duration() ; 
		transition-duration: .75s; 

		height: 120px; line-height: 120px; 
		top: 100%; 
		margin-top:  60px; 

		background-position: 50% calc(~"100% + 60px");
		transform: translateX( -50% ) translateY( -50% ) ; 
	} 

	div.maskBg {
		position: absolute; left: 0px; top: 0px; z-index: 9;
		width: 100%; height: 100%; 
		background: url('../images/recruit_bg01.jpg') no-repeat center center; 
		background-size: cover; 

		opacity: 0;
		// top: 0%; 
		top: 100%; 

		&.ready { 
			opacity: 1; 
			.duration() ; 
			transition-duration: .75s; 
		}

		&.up {
			top: 0%; 
		}

		div.img {
			background: url('../images/recruit_bg01.jpg') no-repeat center center; 
			position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; 

			.duration() ;  

		} /* end of div.img */
	}  /* end of div.bgTitle */
} /* end of div.recruitIntro */

/*
div.maskBg {
	position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; 
	background-size: cover; 

	div.img {
		background: url('../images/recruit_bg01.jpg') no-repeat center center; 
		position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; 

		transition-timing-function: ease-in-out;
		transition-property: all; 
		transition-duration: .5s; 
		opacity: 0;

		&.ready { 
			top: 100%; 
			opacity: 1; 
		}
	}
}

div.bgTitle {
	font-family: "YGP770"; 
	font-weight: bold; 
	font-size: 100px; 

	color: white;  
	background: url('../images/recruit_bg01.jpg') no-repeat;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;

	position: absolute; 
	left: 50%; 

	transition-timing-function: ease-in-out;
	transition-property: all; 
	transition-duration: 2s; 

	height: 120px; line-height: 120px; 
	top: 100%; 
	margin-top:  60px; 

	background-position: 50% calc(~"100% + 60px");
	transform: translateX( -50% ) translateY( -50% ) ; 
}
*/