/*vis svg*/
.svg-nomadict {position: absolute; top: 45%; left: 50%; width: 50%; transform: translate(-50%, -50%);}
.st1{fill:#FFFFFF; stroke:#FFFFFF; stroke-width:3; stroke-miterlimit:10;}

path {stroke: #FFFFFF; fill: #FFFFFF; stroke-dasharray:800; opacity: 10; transition:all 3s;}

svg.on path {animation: animate 5s cubic-bezier(0,0.23,1,.1) infinite;
    -ms-animation: animate 5s cubic-bezier(0,0.23,1,.1) infinite;
    -webkit-animation: animate 5s cubic-bezier(0,0.23,1,.1) infinite;
}

@keyframes animate {
  0% {
    opacity: 0;
    fill: none;
    stroke-dashoffset: 800;
  }

  30% {
    opacity: 10;
    fill:none;
    stroke-dashoffset: 800;
  }

  80% {
    fill: rgba(255, 255, 255, 0);
  }

  90% {
    opacity: 10;
    fill: rgba(255, 255, 255, 1);
    stroke-dashoffset: 0;
  }

  100% {
    opacity: 10;
    fill: rgba(255, 255, 255, 1);
    stroke-dashoffset: 0;
  }
}

/*공통*/
.center {width:74%; margin:0 auto;}

@media all and (max-width:1600px)
{
    .center {width:80%;}

}

/*헤더*/
header {width:100%; position:fixed; line-height:100px; transition:all 0.5s;}
header .center {display:flex; align-items:center; justify-content:space-between;}
header .logo a {font-family: "resarch_remix"; color:#fff; letter-spacing:1px; transition:all 0.5s; font-size: 25px;}
header .gnb {display:flex;}
header .gnb li {margin-left:120px;}
header .gnb li a {color:#fff; font-size:18px; transition:all 0.5s;}
header .gnb li a::before {display:inline-block; content:""; width:8px; height:8px; border-radius:50%; background-color:#1428a0; position:relative; top:-10px; left:-8px; opacity:0; transition:all 0.5s;}
header .gnb li a.on::before {opacity:1;}

header .mobile_btn {font-size:25px; display:none;}
header .mobile_btn a {display: block; color:#fff;}

header .mobile_menu {position:absolute; width:100%; background-color:#fff; opacity:0; visibility:hidden; transition:all 0.5s; border-top:1px solid #ebebeb;}
header .mobile_menu > ul > li {line-height:40px; text-align:center; border-bottom:1px solid #ebebeb;}
header .mobile_menu > ul > li > a {display:block; color:#444;}

header .mobile_menu.on {opacity:1; visibility:visible;}

header.on {z-index:3; background-color:#fff; box-shadow: rgba(27, 31, 35, 0.04) 0px 1px 0px, rgba(255, 255, 255, 0.25) 0px 1px 0px inset;}
header.on .logo a {color:#333; }
header.on .gnb li a {color:#333;}
header.on .mobile_btn a {color:#333;}



/*vis*/
.vis {display:flex; align-items:center; height:100vh; background-image:url(../img/vis.jpg); background-size:cover; background-repeat:no-repeat;}
.vis .center {margin-bottom:115px;}
.vis .sub_text {font-family: "resarch_remix"; color:#fff; font-size:20px;}
.vis .main_text {margin-top:40px;}

@media all and (max-width:1040px)
{
    header .gnb li {margin-left:70px;}
    .vis .sub_text {text-align:center;}
    .vis .main_text {text-align:center;}
    .vis .main_text svg {width:45vw !important;}
}

@media all and (max-width:900px)
{
    .center {width:90%;}
    header .gnb {display:none;}
    header .mobile_btn {display:block;}
    .vis .sub_text {text-align:center;}
    .vis .main_text {text-align:center;}
    .vis .main_text svg {width:45vw !important;}
}

@media all and (max-width:500px)
{
    .vis .sub_text {font-size:15px;}
    .vis .main_text svg {width:70vw !important;}
}

/*vision*/
.vision {position:relative;}
.vision .center {padding-top:110px; padding-bottom:150px;}
.vision .top-text {text-align:center; font-family: 'Pretendard-Bold';}
.vision .top-text .small_title {font-size:16px; color:#000;}
.vision .top-text .small_title::before {display:block; content:""; width:1px; height:50px; background-color:#000; margin:0 auto; margin-bottom:20px;}
.vision .top-text .big_text {font-size:44px; line-height: 50px; color:#333; margin:30px 0 140px;}

.vision .contents {display:flex; align-items:center;}
.vision .content1 {margin-bottom:145px;}

.vision .contents .imgwrap {width:43%;}
.vision .contents .imgwrap img {width:100%;}
.vision .contents .vision1 {margin-right:110px;}
.vision .contents .vision2 {margin-left:110px;}

.vision .contents .text {font-family: 'DM Sans', sans-serif;}
.vision .contents .text h5 {font-weight:400; font-size:60px;}
.vision .contents .text h5 span {font-weight:700; font-size:72px; margin-top:35px; display:inline-block;}

.vision .contents .text p {font-family: 'Pretendard-Medium'; font-size:30px; line-height:55px; margin-top:50px;}
.vision .contents .text p span {font-size:24px;}


@media all and (max-width:1100px)
{
    .vision .top-text .big_text {font-size:30px; line-height: 45px;}
    .vision .contents .vision1 {margin-right: 40px;}
    .vision .contents .text h5 {font-size:40px;}
    .vision .contents .text h5 span {font-size:50px; margin-top:15px}
    .vision .contents .text p {font-size:20px; line-height:33px;}
    .vision .contents .text p span {font-size:18px;}
}

@media all and (max-width:840px)
{
    .vision .top-text .big_text {margin-bottom:100px;}
    .vision .contents {flex-direction:column;}
    .vision .contents .imgwrap {width:80%;}
    .vision .contents .vision1 {margin-right:0;}
    .vision .contents .text {width:100%; margin-top:40px;}
    .vision .content1 {margin-bottom:100px;}
    .vision .content2 {flex-direction:column-reverse;}
    .vision .contents .vision2 {margin-left:0;}
    .vision .content2 .text {text-align:right}
}

@media all and (max-width:500px)
{
    .vision .contents .text h5 span {font-size:40px;}
    .vision .contents .text p {margin-top:40px;}
}

/*probio_bg*/
.probio_big {position:absolute; top:40%; right:0; z-index:-1;}
.probio_small {position:absolute; bottom:110px; left:50px; z-index:-1;}


/*tech*/
.tech {background-color:#f5f5f5;}
.tech .center {padding-top:110px; padding-bottom:150px;}
.tech .top-text {text-align:center; font-family: 'Pretendard-Bold';}
.tech .top-text .small_title {font-size:16px; color:#000;}
.tech .top-text .big_text {font-size:44px; color:#333; margin:30px 0 70px;}

.tech .papaer_wrap {display:flex; justify-content:center;}
.tech .papaer_wrap .paper_list {width:23%;}
.tech .papaer_wrap .paper_list:nth-child(2) {margin:0 1%;}
.tech .papaer_wrap .paper_list:nth-child(3) {margin-right:1%;}

.tech .papaer_wrap .paper_list .imgwrap {margin-bottom:35px;}
.tech .papaer_wrap .paper_list .imgwrap img {width:100%;}
.tech .papaer_wrap .paper_list .kind {width:70px; line-height:25px; text-align:center; border-radius:20px; border:1px solid #1428a0; color:#1428a0; font-size:14px; margin-bottom:20px;}
.tech .papaer_wrap .paper_list .paper_text {font-size:18px; line-height:23px;}



@media all and (max-width:1100px)
{
    .tech .top-text .big_text {font-size:30px; line-height: 45px; margin-bottom:50px;}

}



@media all and (max-width:1040px)
{
    .tech .papaer_wrap {flex-wrap:wrap;}
    .tech .papaer_wrap .paper_list {width:48%;}
    .tech .papaer_wrap .paper_list:nth-child(1) {margin-bottom:30px;}
    .tech .papaer_wrap .paper_list:nth-child(2) {margin:0; margin-left:2%; margin-bottom:30px;}
    .tech .papaer_wrap .paper_list:nth-child(3) {margin-right:0%;}
    .tech .papaer_wrap .paper_list:last-of-type {margin-left:2%;}
}

@media all and (max-width:840px)
{
    .tech .top-text .big_text {margin-bottom:100px;}

}


/*map*/
.root_daum_roughmap {width:100% !important;}
.root_daum_roughmap .wrap_btn_zoom {z-index:2 !important;}
.root_daum_roughmap .wrap_controllers {display:none !important;}
.roughmap_lebel_text {font-size:0 !important; padding: 4px 8px 0px !important;}
.roughmap_lebel_text::after {content:"PLBIO"; display:block; width:100%; height:100%; font-size:15px; position: relative; top: -9px;}
.map .center {padding:145px 0; display:flex; align-items:center;}
.map .mapwrap {width:50%; margin-right:120px;}
.map .title {font-size:44px; line-height:55px; margin-bottom:60px; font-weight:normal}

.map ul > li {display:flex;}
.map ul > li:nth-child(2) {margin:30px 0;}
.map ul > li > span {display:inline-block;}
.map ul > li > span i {font-size:22px; margin-right:8px; color:#1428a0;}
.map ul > li > span:nth-child(1) {width:160px; display:flex; align-items:center;}
.map ul .detail {font-family: 'Pretendard-Regular'; color:#555;}



@media all and (max-width:1100px)
{
    .map .center {flex-direction:column;}
    .map .mapwrap {margin-right:0; width:100%;}
    
    .map .texts {width:100%; margin-top:40px;}
    .map .title {font-size: 35px; margin-bottom:30px;}
    .map ul > li:nth-child(2) {margin:20px 0;}
}

@media all and (max-width:500px)
{
    .map .title {font-size: 26px; margin-bottom:20px;}
}


footer {background-color:#121212; padding:45px 0; color:#b9b9b9; font-family: 'Pretendard-Light';}
footer .flogo {width:210px; font-size:33px; font-family: "resarch_remix"; color:#fff;}
footer .center {display:flex; align-items:center;}

footer address {font-style:normal; font-size:15px;}
footer .line:nth-child(2) {margin:20px 0;}
footer .line:nth-child(3) {margin-bottom:20px;}
footer .line:last-of-type a {color:#fff;}
footer .line span {margin-right:25px;}


@media all and (max-width:1100px)
{
    footer .center {flex-direction:column;}
    footer .flogo {text-align:center; margin-bottom: 30px;}
    footer address {text-align:center}
}

@media all and (max-width:640px)
{
    footer .line span {display:block; margin-right:0; margin-bottom:10px;}
}

.before_bullet {margin-left:15px;}
/*.before_bullet::before {display:inline-block; content:""; width:8px; height:2px; background-color:#333;}*/


