@charset "UTF-8";
a {-webkit-transition: all 0s ease 0s;  -moz-transition: all 0s ease 0s; -ms-transition: all 0s ease 0s;  -o-transition: all 0s ease 0s;   transition: all 0s ease 0s;}


/* ====================
*  
*   grab
*
========================*/

.grab.type01 {max-width: 1770px;padding-top: 119px;}

@media(max-width: 1800px){
    .grab.type01{margin-bottom: 95px;} 
}

@media(max-width: 1024px){
    .grab.type01{padding-top: 149px;}
}
@media(max-width: 780px){
   .grab.type01 { padding-top: 0;}

}


/* ====================
*  
*   mVisual
*
========================*/
/*slick slide*/
.mVisual * {height: 100% !important;}
.mVisual { position: absolute !important;  top: 0; z-index: -9999;height: 100%; width: 100%;}
.slick-current .pic {opacity: 1 !important;}
.pic { opacity: .6 !important; }
.slick-slide:not(.slick-active) {transition-delay: 100ms !important;}
/*.mVisual .pic {width: 100%;}*/
/*.mVisual img {position: absolute; left: 0; right: 0;  top: 0; bottom: 0; display: block; width: 100%; height: 100%;-o-object-fit: cover; object-fit: cover; -o-object-position: 50% 50%;object-position: 50% 50%;}*/

/*애니메이션*/
/*.slick-slide .pic img {visibility: hidden;  }*/
/*.slick-slide.slick-current .pic img {visibility: visible;opacity: 1; }*/
.mVisual .pic {position: relative;height: 100%;width: 100%;background-repeat: no-repeat; background-size: cover;}
.pic.pic01 { background-image: url(../hrn/images/main/mVisual01.png);background-position: 0% 100%;}
.pic.pic02 { background-image: url(../hrn/images/main/mVisual02.png);}
.pic.pic03 { background-image: url(../hrn/images/main/mVisual03.png);}
.slick-current .pic.pic01 {animation: scaleAnim 8s 0s linear ;animation-delay: 0.8s;}
.slick-current .pic.pic02 { animation: bottomToup 90s 0s linear; background-position: 0% 100%;background-size: auto;}
.slick-current .pic.pic03 {  animation: leftToright 10s 0s linear; }


/*forward*/
@keyframes scaleAnim {
  0% {transform: scale(1) rotate(.001deg) translate(0px);}
  100% {transform: scale(1.2) rotate(.001deg) translate(0px);}
}
@-webkit-keyframes scaleAnim {
  0% { -webkit-transform: scale(1) rotate(.001deg) translate(0px);}
  100% {-webkit-transform: scale(1.2) rotate(.001deg) translate(0px);}
}

/*bottomToup*/
@keyframes bottomToup {
  0% {background-position: 0% 5%;}
  100% {background-position: 0% 100%;}   
}
@-webkit-keyframes bottomToup {
  0% {background-position: 0% 5%;}
  100% {background-position: 0% 100%;}
}


/*leftToright*/
@keyframes leftToright {
  0% {background-position: 100% 0%;}
  100% {background-position: 0% 0%;}
}
@-webkit-keyframes leftToright {
  0% {background-position: 100% 0%;}
  100% {background-position: 0% 0%;}
}



/*progress bar*/
.slider-progress {width:2px;height: 208px;position: relative; background: #fff;left: 14px;top: 0px;}
.pro-bar{ position: absolute;bottom: 0;left: 0;width: 2px; height: 0px;background: #60ff00;}
.pro-ani{animation: proBar 5s 1;}
 @keyframes proBar{
    0%{height:0;}
    100%{height:100%;}
}
@-webkit-keyframes proBar {
   0%{height:0;}
    100%{height:100%;}
}



/*pagingInfo */
.pagingInfo {position: absolute; color: #fff;transform: rotate(-90deg);bottom: 131px;left: -27px; font-size: 1.733rem; font-weight: 200;width: 82px;}
.pagingInfo em {color: #60ff00; font-weight: 200}
.pagingInfo span {display: inline-block; padding-left: 8px;}
.pagingInfo em {display: inline-block;padding-right: 8px;}


/*ctrl-pager-wrap*/
.control-wrap { width: 37px; position: absolute; left: 0; top: 50%;height: 403px; z-index: 99;margin-top: -159px;}
.controls {position: absolute; bottom: 0;}
.control-wrap .controls a {border: 1px solid #fff; border-radius: 600px; width: 35px; height: 35px;display: block;margin-top: 6px;position: static; text-align: center;}
.control-wrap .controls a i {color: #fff; font-size: 1.133rem; text-align: center;display: block;padding: 8px 0px;}
.control-wrap .controls a:hover{background: rgba(0, 0, 0, 0.25);text-decoration: none;}
.control-wrap .controls a:focus {text-decoration: none;}


@media(max-width: 1800px) {
  .control-wrap {left: 15px;}
    
  .slick-current .pic.pic03 {  animation: leftToright 20s 0s linear; }
   
}

@media(max-width: 1200px) {
  .control-wrap {left: 15px; }
}



@media(max-width: 1024px) {
    /*progress bar*/
    .slider-progress { left: 11px;top: 1px;}

    /*pagingInfo */
    .pagingInfo {font-size: 1.5rem;bottom: 108px;}

    
    /*ctrl-pager-wrap*/
     .control-wrap {height: 372px;top: 50%;
    margin-top: -185px;}
    .control-wrap .controls a {width: 30px; height: 30px;}
    

    
    
}
@media(max-width: 780px) {
    .control-wrap {display: none;}
    

}








/* ====================
*  
*    slogan
*
========================*/


/*.slogan*/
.slogan {color: #fff;  max-width: 472px; height: 401px;  margin: 0 auto;}
.slogan:before,.slogan:after {width: 65px; height: 65px;}
.slogan:before { background: url(../hrn/images/main/slog-line1.png); }
.slogan:after { background: url(../hrn/images/main/slog-line2.png); right: 0; bottom: 0;}
.slogan p {line-height:1;font-weight: 100;font-size: 1.533rem; }
.slogan .inner div:not(:last-of-type) p { margin-bottom: 5px;}
.slogan .inner div:last-of-type p {margin-top: 16px;font-size: 1.25rem;}
.slogan .inner {padding: 46px 0 0 0; text-align: center;}
.slogan  strong { font-weight: 600; display: inline-block;}
.slogan .line1 {font-size: 6.8rem;}
.slogan .line2 {font-size: 4.333rem;letter-spacing: -2px;}
.slogan .line3 {font-size: 5.4rem;} 
.slogan .line1,.slogan .line2 { letter-spacing: -5px;}
.slogan .line3 {letter-spacing: -2px;}





/*animation*/
.pic {transform: scale(1);}


/*patter bar*/
.slogan:before {animation-name: slogan-top; animation-duration: 1s; }
.slogan:after {animation-name: slogan-bottom; animation-duration: 1s; }
@keyframes slogan-top {
    0% { left: 50%;top: 50%; opacity:0;}
    100%{left: 0;top: 0%;opacity:1;}
}
@keyframes slogan-bottom {
   0% { right: 50%;bottom: 50%; opacity:0;}
   100%{right: 0;bottom: 0%;opacity:1;}
}

/*text lines*/
.slogan .inner > div {overflow: hidden;/* height: 90px;*/ }
.slogan .line {opacity: 0; font-weight: 200;}
/*.slogan .line {animation-name: text-show2; animation-duration: 1s; animation-delay: 1s;}
@keyframes text-show2 {
      0% {transform: translate3d(0%, 100%, 0); opacity: 0;}
      100% { transform: translate3d(0, 0, 0); opacity: 1;}
}
*/









@media(max-width: 1024px){
    .slogan {width: 446px;height: 382px;}
    .slogan .line1 {font-size: 6.5rem;}
    .slogan .line2 {font-size: 4.2rem;}
    .slogan .line3 {font-size: 5.2rem;}
    .slogan p {font-size: 1.4rem;}
}



@media(max-width: 780px) {
    .slogan {width: 306px; height: auto; margin-top: 122px; }
    .slogan { width: 375px; height: 352px;}
    .slogan .line1 {font-size: 5.5rem;}
    .slogan .line2 {font-size: 3.7rem;}
    .slogan .line3 {font-size: 4.5rem;}
    .slogan p {font-size: 1.4rem;}

   
    
}


@media(max-width: 480px) {
    .slogan {width: 74%;height: 313px;}
    .slogan .inner {padding: 61px 0px;}
    
    .slogan .line1 {font-size: 4.5rem;}
    .slogan .line2 {font-size: 3rem;}
    .slogan .line3 {font-size: 3.8rem;}
    .slogan .inner div:last-of-type p {font-size: 1.1rem;}
}



/* ====================
*  
*    2019년도 한국화학연구원 
하반기 정규직 채용공고 
*
========================*/
/*link-wrap1*/
.link-wrap1 {width: 645px;margin: 0 auto;text-align: center; padding-top: 54px;}
.link-wrap1 a {color: #fff;}
.link-wrap1 .link1 { height: 79px;margin-bottom: 15px;  border-radius: 600px; width: 100%; background:linear-gradient(to right, #12c3c5 12%, #0585ce 43%, #0379cf 100%);  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0584ce', endColorstr='#0584ce', GradientType=1 );box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);flex: 1 1 auto;background-size: 200% auto;}
.link-wrap1 .link1:hover {background-position: right center;transition: 0.5s; }
.link-wrap1 .link1 span { font-size: 1.6rem;font-weight: 600; width:502px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display: inline-block;padding: 28px 0;padding-left: 60px;}
.link-wrap1 .link1 span:before {width: 37px; height: 37px;background: url(../hrn/images/main/icon01.png) no-repeat;  top: 50%; margin-top: -18px; left: 0;}


.link-wrap1 .link2 {position: relative;padding-right: 14px; }   
.link-wrap1 .link2:hover em {animation-name: hoverLeft; animation-duration: 1s; display: inline-block;position: relative;right:0; animation-iteration-count: infinite;}
@keyframes hoverLeft {
    0% {right:0}
    50% {right:-5px}
    100% {right:0px} 
}




@media(max-width: 1024px) {
    .link-wrap1 {width: 76%; padding-top: 37px;}
}

@media(max-width: 780px) {

    .link-wrap1 { width: 94%;}
    .link-wrap1 .link1 {height: 63px;}
    .link-wrap1 .link1 span {padding: 20px 0;padding-left: 51px; width: 67%;font-size: 1.5rem;}
     .link-wrap1 .link1 span:before {background-size: 100%; width: 26px; margin-top: -14px; left: 4px;}
 
}
@media(max-width: 480px) {
     .link-wrap1 .link1 span {font-size: 1.2rem;}
}




/* ====================
*  
*   오른쪽, 공고보기 박스 
*
========================*/

/*line-wrap2*/
/* .line-wrap2 {width: 189px; height: 163px; text-align: center; position: absolute; right: 0px; top: 50%; margin-top:-57px; z-index: 999;} */
.line-wrap2 {width: 189px; height: 163px; text-align: center; position: absolute; right: 0px; top: 36%; margin-top:-57px; z-index: 999;}
.line-wrap2 li {height: 33%;line-height: 53px;    border-left: 1px solid rgba(255, 255, 255, 0.26);border-bottom: 1px solid rgba(255, 255, 255, 0.26); border-right: 1px solid rgba(255, 255, 255, 0.26);}
.line-wrap2 li:first-of-type {border-top:1px solid rgba(255, 255, 255, 0.26);}

.line-wrap2 li a{color: #fff; display: block; font-size: 1.133rem;font-weight: 100;}
.line-wrap2 li a:hover, .line-wrap2 li a:focus {background: rgba(0, 0, 0, 0.2);text-decoration: none}


/*line-hover*/
.line-wrap2 li a,.line-wrap2 li {position: relative;}
.line-wrap2 li:after, .line-wrap2 li:before, .line-wrap2 li a:before, .line-wrap2 li a:after{content: ""; display: block; position: absolute; background: #fff;transition: 0.2s all ease;}
.line-wrap2 li:after, .line-wrap2 li:before {width: 0%; height: 1px}
.line-wrap2 li a:before,.line-wrap2 li a:after{ width:1px; height: 0%; }
.line-wrap2 li a:before {left: 0;bottom: 0;}
.line-wrap2 li a:after {right: 0;top: 0;}
.line-wrap2 li:after {top: 0;}
.line-wrap2 li:before { bottom: 0; right: 0;}

.line-wrap2 li:hover:after,.line-wrap2 li:hover:before {width: 100%;}
.line-wrap2 li:hover a:before,.line-wrap2 li:hover a:after {height: 100%;}
.line-wrap2 li:hover a:after {transition-delay: 0.2s}
.line-wrap2 li:hover:before {transition-delay: 0.4s}
.line-wrap2 li:hover a:before {transition-delay: 0.6s}







@media(max-width: 1800px) { 
    .line-wrap2 {right: 15px; } 
}


@media(max-width: 1200px) {
    .line-wrap2 {right: 15px;}  
    
}




@media(max-width: 1024px) {
    .line-wrap2 {top: 20px;margin-top: 0;  width: auto;height: auto;border: 0;} 
    .line-wrap2 li {float: left; border: 1px solid rgba(255, 255, 255, 0.26); margin-left: -1px; line-height: 47px;}
    .line-wrap2 li a {padding: 0 14px;}
      .line-wrap2 li a  span {display: none;}
    /*    .line-wrap2 li {line-height: 40px; width: calc(-1px + 20%);float: right;} */
}


@media(max-width: 780px) {

    .line-wrap2   {padding: 15px 15px 0 15px; position: static;}
    .line-wrap2 li {  
    width: calc(-1px + 33%);
    float: left;margin-top: -1px;}
    .line-wrap2 li a { padding: 0 11px;font-size: 1.1rem}
  

}

@media(max-width: 480px) {
    .link-wrap1 .link1 span {padding: 16px 0;padding-left: 47px;}

}

@media(max-width: 405px) {
    .line-wrap2 li {  line-height: 25px; }
}




/* ====================
*  
*   footer
*
========================*/
#footer {display: none; }
/*footer*/
footer{ background: transparent; position: absolute; bottom: 34px;}
footer .inner {padding: 0;}
footer *,footer a:hover,footer a:focus {color: rgba(255, 255, 255, 0.40);}
/*footer .footer-logo {right: 0; top: -10px; }*/

/* top버튼   */
a.top {display: none;}




@media(max-width: 1800px) {
    footer .inner { padding: 0 15px;width: auto;}
    /*footer .footer-logo {right: 15px; top: 50%; margin-top: -23px;}*/
    footer {width: 100%;  }
    footer .grab {padding: 0 15px;}
    
}
@media(max-width: 1024px) {
    footer {padding-top: 79px;}

}


@media(max-width: 780px) {
   /* footer {padding-top: 83px;}*/
}
    




/* ====================
*  
*   media max-height
*
========================*/
body{overflow: hidden;}
html, body, #wrap,#content,#txt,.mVisual-wrap,.main-inner {min-height: 100%;}
/*#container {min-height: calc(100% - 80px); }*/


@media(max-height: 900px) and (min-width: 1200px) {
    footer {position: static;padding-top: 113px;padding-bottom: 0px;}
}



@media(max-height: 900px) {
    body {overflow-y: auto}
    .mVisual * {height: 100% !important;}
    footer {position: relative; }
    .mVisual-wrap {position: relative;}  
    
    

}