@charset "utf-8";


.inner {max-width: 1000px; margin: auto}
.footer {position: relative; text-align: center; padding: 50px 0; font-size: 14px; color: #999}

/**/
.visual_area {position: relative; height: 950px;  background: url('../images/bg_city.jpg') no-repeat bottom center; background-size:85vw}
.visual_area .logo_seegene {display: block; width: 200px; position: absolute; left: 50%; top:100px; margin-left: -100px}
.visual_area .logo_seegene img {width:100%}
.visual_area .msg {position: absolute; left: 0; right: 0; text-align:center; top:200px}
.visual_area .msg img {width: 820px}

.hero_wrap {position: absolute; width: 1000px; height: 500px; left: 50%; margin-left: -500px; top:470px;}
.hero_wrap span.hero01 img,
.hero_wrap span.hero02 img,
.hero_wrap span.hero03 img,
.hero_wrap span.hero04 img,}
.hero_wrap span.hero05 img {width: 100%}
.hero_wrap .hero_small {position: absolute; width: 115px; right: 0; top:26%;}
.hero_wrap .hero_small img {opacity: .7}

.hero_wrap span.hero01 {display: block; position: absolute; left: 50%; bottom: 0; margin-left: -120px; width: 240px; z-index: 5}
.hero_wrap span.hero02 {display: block; position: absolute; left: 50%; bottom: 0; margin-left: -230px; width: 180px; z-index: 4}
.hero_wrap span.hero03 {display: block; position: absolute; left: 50%; bottom: 0; margin-left: 70px; width: 180px; z-index: 3}
.hero_wrap span.hero04 {display: block; position: absolute; left: 50%; bottom: 0; margin-left: -360px;width: 215px; z-index: 2}
.hero_wrap span.hero05 {display: block; position: absolute; left: 50%; bottom: 0; margin-left: 180px; width: 180px; z-index: 1}

/**/
.boxGray {background: #f5f5f5; padding: 60px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
.symbol_seegene  {margin-right: 10px; position: relative; top:-2px}
.symbol_seegene img {width: 40px;}
.interview_wrap {padding: 100px 0; background: #f5f5f5}

/**/
.announce_wrap {position: relative; padding: 120px 0 100px}
.cont_msg {margin-bottom: 50px; padding-bottom: 50px; border-bottom: 2px solid #fff}
.cont_msg .title {font-family: 'GS_Bold'; font-size: 40px; letter-spacing: -1px}
.cont_msg .copy {font-size: 16px; margin-top: 20px; line-height: 1.8em; font-family: 'NS_R';}
.cont_info .tit {font-size: 20px; font-family: 'GS_Bold';}
.cont_info .row {clear: both; position: relative; padding-left: 150px; margin-bottom: 15px;  font-family: 'NS_R';}
.cont_info .row a {color: #006ec3; text-decoration: underline}
.cont_info .row .tit {position: absolute; left: 0; top:0}
.cont_info .row_step {margin-top: 40px}

.process_step {margin-top: 20px}
.process_step:after {display: block; clear: both; content: ""}
.process_step li {position: relative; display: block; width: 20%; float: left; text-align: center}
.process_step li:before {position:absolute; right: -10px; top:60px; content: ""; display: block; width: 20px; height: 20px; background: url('../images/right-arrow.svg') no-repeat center center; background-size:100%; }
.process_step li:last-child:before {display: none}
.process_step .icon {display: inline-block; width: 140px; height: 140px; background: #fff; line-height: 140px;  border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%;}
.process_step .icon img {width: 90px}
.process_step .txt {font-size: 16px; padding-top: 15px}


/**/
.anw_head {padding: 80px 50px 30px} 
.anw_head .title {font-family: 'GS_Bold'; font-size: 40px; letter-spacing: -1px}
.que:first-child{
    border-top: 1px solid black;
  }
  
.que{
  position: relative;
  padding: 30px 50px;
  cursor: pointer;
  font-size: 30px;
  font-family: 'GS_Bold';
  border-bottom: 1px solid #dddddd;
}
.que:before {content: ""; position: absolute; right: 50px; top:50%; margin-top: -13px; display: block; width: 25px; height: 25px;  background: url('../images/down-arrow.svg') no-repeat center center; background-size:25px;  } 
.que.on>span{
  font-weight: bold;
  color: #ce2026; 
}
.que.on:before {content: ""; position: absolute; right: 50px; top:50%; margin-top: -13px; display: block; width: 25px; height: 25px;  background: url('../images/up-arrow.svg') no-repeat center center; background-size:25px;  } 
  
.anw {
  display: none;
  overflow: hidden;
  font-size: 16px;
  background-color: #f4f4f2;
  padding: 40px 50px;
  border-bottom: 1px solid #ddd;
}

.jobBox {}
.jobBox .row {display: block; position: relative; padding-left: 260px; line-height: 1.7em; padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #ddd}
.jobBox .row.last {border: 0; margin-bottom: 0; padding-bottom: 0}
.jobBox .row:after {display: block; clear: both; content: ""} 
.jobBox .row .job {position: absolute; left: 0; top:0; font-size: 18px; font-family: 'GS_Bold';}
.jobBox .row .tag {display: block; width: 85%; float: left; font-family: 'NS_R'; word-break: keep-all}
.jobBox .row .etc {display: block; width: 15%; float: left; text-align: center}


.btn_link {display: inline-block; padding: 5px 10px; line-height: normal; background: #fff; color: #222; border: 1px solid #ddd; font-size: 12px}

/* 애니메이션 */
section.on [class*="fade_in"] {opacity:0;}	
section .fade_in_up, section .fade_in_left, section .fade_in_right {opacity: 0}

section.on .fade_in_up{
	animation-name: fadeInUp;
	animation-duration: 1s;
	animation-timing-function: cubic-bezier(0.44,0.01,0.64,0.99);
	animation-fill-mode: forwards;
	animation-delay:0;
}

section.on .fade_in_up:nth-child(1){animation-delay:0}
section.on .fade_in_up:nth-child(2){animation-delay:0.4s}
section.on .fade_in_up:nth-child(3){animation-delay:0.8s}
section.on .fade_in_up:nth-child(4){animation-delay:1.2s}
section.on .fade_in_up:nth-child(5){animation-delay:1.6s}
section.on .fade_in_up:nth-child(6){animation-delay:2s}
section.on .fade_in_up:nth-child(7){animation-delay:2.4s}
section.on .fade_in_up:nth-child(8){animation-delay:2.8s}
section.on .fade_in_up:nth-child(9){animation-delay:3.2s}
section.on .fade_in_up:nth-child(10){animation-delay:3.6s}


section.on .fade_in_left{
	animation-name: fadeInLeft;
	animation-duration: 1s;
	animation-timing-function: cubic-bezier(0.44,0.01,0.64,0.99);
	animation-fill-mode: forwards;
	animation-delay:.5s;
}

section.on .fade_in_left:nth-child(1){animation-delay: 0}
section.on .fade_in_left:nth-child(2){animation-delay: 1s}
section.on .fade_in_left:nth-child(3){animation-delay: 2s}
section.on .fade_in_left:nth-child(4){animation-delay: 3s}

section.on .fade_in_right{
	animation-name: fadeInRight;
	animation-duration: 1s;
	animation-timing-function: cubic-bezier(0.44,0.01,0.64,0.99);
	animation-fill-mode: forwards;
	animation-delay:.5s;
}	

section.on .fade_in_on{
	animation-name: fadeInOn;
	animation-duration:3s;
	animation-fill-mode: forwards;
	animation-delay:1.5s;
}

 
@-webkit-keyframes fadeInUp {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 30px, 0);
		transform: translate3d(0, 30px, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes fadeInUp {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 30px, 0);
		transform: translate3d(0, 30px, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@-webkit-keyframes fadeInRight {
	from {
		opacity: 0;
		-webkit-transform: translate3d(100px, 0, 0);
		transform: translate3d(100px, 0, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes fadeInRight {
	from {
		opacity: 0;
		-webkit-transform: translate3d(100px, 0, 0);
		transform: translate3d(100px, 0, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@-webkit-keyframes fadeInLeft {
	from {
		opacity: 0;
		-webkit-transform: translate3d(-100px, 0, 0);
		transform: translate3d(-100px, 0, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes fadeInLeft {
	from {
		opacity: 0;
		-webkit-transform: translate3d(-100px, 0, 0);
		transform: translate3d(-100px, 0, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@-webkit-keyframes fadeInOn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes fadeInOn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}



.hero_move {
   -webkit-animation: hero_move .5s infinite;
   -moz-animation: hero_move .5s infinite;
   -o-animation: hero_move .5s infinite;
    animation: hero_move .5s infinite;
}
@keyframes hero_move {
  0%   { transform:rotate(3deg) }
  50%  { transform:rotate(0) }
  100% { transform:rotate(3deg) }
}
@-o-keyframes hero_move{
  0%   { transform:rotate(3deg) }
  50%  { transform:rotate(0) }
  100% { transform:rotate(3deg) }
}
@-moz-keyframes hero_move{
  0%   { transform:rotate(3deg) }
  50%  { transform:rotate(0) }
  100% { transform:rotate(3deg) }
}
@-webkit-keyframes hero_move{
  0%   { transform:rotate(3deg) }
  50%  { transform:rotate(0) }
  100% { transform:rotate(3deg) }
}


.flicker {
   -webkit-animation: flicker .5s infinite;
   -moz-animation: flicker .5s infinite;
   -o-animation: flicker .5s infinite;
    animation: flicker .5s infinite;
}
@keyframes flicker {
  0%   { opacity:1 }
  50%  { opacity: .8 }
  100% { opacity:1 }
}
@-o-keyframes flicker{
  0%   { opacity:1 }
  50%  { opacity: .8 }
  100% { opacity:1 }
}
@-moz-keyframes flicker{
  0%   { opacity:1 }
  50%  { opacity: .8 }
  100% { opacity:1 }
}
@-webkit-keyframes flicker{
  0%   { opacity:1 }
  50%  { opacity: .8 }
  100% { opacity:1 }
}


/* 미디어쿼리 */


@media screen and (max-width: 1280px) {
}	

@media screen and (max-width: 1080px) {
	.inner {width: auto; margin: 0 40px}
	.boxGray {padding: 50px}
	.cont_msg .title,
	.anw_head .title {font-size: 30px}
	.symbol_seegene img {width: 30px}
	
	.visual_area {height: 95vw}
	.visual_area .logo_seegene {margin-left: -11vw}
	.visual_area .logo_seegene img {width: 22vw}
	.visual_area .msg img {width: 80vw}
	
	.hero_wrap {width: auto; margin: 0; top:45vw; height: 55vw; left: 20px; right: 20px}

	.process_step .icon {width: 80px; height: 80px; line-height: 80px;}
	.process_step .icon img {width: 45px}
	.process_step li:before {top:30px; background-size: 80%;}
	.process_step .txt {font-size: 14px; padding: 10px 0 10px}

}
@media screen and (min-width: 900px) {
	.display_m {display: none}
	.display_w {display: block}

}

@media screen and (max-width: 900px) {
	.display_m {display: block}
	.display_w {display: none}
	.inner {margin: 0 20px}

	.hero_wrap .hero_small img {width: 10vw}
	.anw_head {padding: 50px 0 30px}
	.que {padding: 30px 0; font-size: 20px}
	.que.on:before,
	.que:before {right: 0}

	.visual_area .logo_seegene {top:15vw}
	.visual_area .msg {top:25vw}

	.visual_area {height: 100vw; background-size: 100vw;}
	.hero_wrap {top:45vw; height: 60vw; }
	.hero_wrap span.hero01 {width: 24vw}
	.hero_wrap span.hero01 {margin-left: -12vw}
	.hero_wrap span.hero02 {width: 19vw}
	.hero_wrap span.hero02 {margin-left: -22vw}
	.hero_wrap span.hero03 {width: 19vw}
	.hero_wrap span.hero03 {margin-left:5vw}
	.hero_wrap span.hero04 {width: 22vw}
	.hero_wrap span.hero04 {margin-left: -36vw}
	.hero_wrap span.hero05 {width: 19vw}
	.hero_wrap span.hero05 {margin-left:15vw}
}


@media screen and (max-width: 500px) {
	body {font-size: 14px}
	.announce_wrap {padding: 80px 0 50px}

	.visual_area .logo_seegene {top:12vw; margin-left: -13vw}
	.visual_area .logo_seegene {width: 26vw}
	.symbol_seegene img {width: 24px}
	.symbol_seegene {margin-right: 5px}
	.cont_msg .title,
	.anw_head .title {font-size: 24px; text-align: center}

	.boxGray {padding:40px 20px}
	.cont_msg {padding-bottom: 30px; margin-bottom: 30px}
	.cont_msg .copy {font-size: 14px}
	.cont_msg .copy p {margin-bottom: 15px; word-break: keep-all}
	.cont_info .tit {font-size: 16px; position: relative; top:auto; left: auto}
	.cont_info .row {padding-left: 0; margin-bottom: 20px}
	.cont_info .row .tit{font-size: 16px; position: relative; top:auto; left: auto; display: block; margin-bottom: 10px}
	.process_step li {width: calc(100% / 3)}
	.cont_info .row_step {margin-top: 20px}
	
	.anw_head {padding: 50px 20px 15px; text-align: center}
	
	.que {padding: 20px 20px}
	.anw {padding: 20px}
	.jobBox .row {padding-left: 0}
	.jobBox .row .job {position: relative; left: auto; top:auto; font-size: 16px; margin-bottom: 10px}
	.jobBox .row .tag {font-size: 14px; width: 100%}
	.jobBox .row .etc {width: auto; position: absolute; right: 0; top:0}
	
	.que.on:before {background-size: 15px; right: 20px}
	.que:before {background-size: 15px; right: 20px}
	.footer {font-size: 12px}
	
	.process_step li:nth-child(3):before {display: none}
	.process_step li:nth-child(4) {margin-left: 30px}
	.process_step li:nth-child(4):after {
		position: absolute;
	    left: -10px;
	    top: 30px;
	    content: "";
	    display: block;
	    width: 20px;
	    height: 20px;
	    background: url(../images/right-arrow.svg) no-repeat center center;
	    background-size: 80%;
	}
	.interview_wrap {padding: 10px 0 50px}
	.jobBox .row .tag {line-height: 1.5em}
	
}


@media screen and (max-width: 320px) {
}