/* reset.css */
@charset "UTF-8"
@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);


html
{ height: 100%;}

*
{ margin: 0;
  padding: 0;}

body
{ font: normal 80% Arial, Helvetica, sans-serif !important;
  background: #CBCBCB url(../images/background.jpg) repeat-x;
  color: #000;
}

p
{ padding: 0 0 20px 0;
  line-height: 1.7em;
  font-size: 100% }

img
{ border: 0;}

h1, h2, h3, h4, h5, h6 
{ font: normal 175% Arial, Helvetica, sans-serif;
  color: #000;
  letter-spacing: -1px;
  margin: 0 0 10px 0;}

h2
{ font: normal 165% Arial, Helvetica, sans-serif;}

h3
{ font: normal 130% Arial, Helvetica, sans-serif;
}

h4, h5, h6
{ margin: 0;
  padding: 0 0 5px 0;
  font: normal 150% Arial, Helvetica, sans-serif;
  color: #FFF;
  line-height: 1.5em;}

h5, h6
{ font: normal 95% Arial, Helvetica, sans-serif;
  color: #888;
  padding-bottom: 15px;}

a, a:hover
{ background: transparent;
  outline: none;
  text-decoration: none;}

a:hover
{ text-decoration: underline;}

ul
{ /**margin: 2px 0 22px 30px;*/
  margin : 2px 0 20px 15px;
  line-height: 1.7em;
  font-style: normal;
  font-size: 100%;}

ol
{ margin: 8px 0 22px 20px;}

ol li
{ margin: 0 0 11px 10px;}

/* FRONT main . BIOPOP MICROPOP 슬라이드 뜨는 부분. */

/* BIOPOP main */

#main, #header, #banner, #menubar, #site_content, #footer, #content_grey
{ margin-left: auto; 
  margin-right: auto;}

#main
{ background: transparent;
  background: #fff;
}

#main .slideshow li img {
  height: 250px;
  max-width: 100%;
}
.main_info p.research_info {
  text-indent: -15px;
  padding:0 0 0 20px;
  color: #4a4646;
}
.main_info p {
  line-height: 1.3rem;
}
.main_info .front_info {
  padding-bottom:10px; 
}
.main_info .last_info {
  padding-top: 10px; 
}
.main_info {
  word-break: normal;
}
.mob_journal_tt {
  display: none;
}

#header
{ width: 920px;
  height: 120px;
  background: transparent url(../images/header.jpg) no-repeat;}

#banner
{ width: 920px;
  position: relative;
  text-align: center; 
  height: 50px;
  padding: 15px 0 0 0;
  background: transparent;}

#welcome
{ width: 880px;
  float: left;
  height: 50px;
  margin: 0 auto;
  padding-left: 20px;
  background: transparent;} 

#welcome H1
{ font: normal 190% Arial, Helvetica, sans-serif;
  color: #FFF;}  
  
#welcome_slogan
{ width: 880px;
  float: left;
  height: 50px;
  margin: 0 auto;
  padding-left: 20px;
  background: transparent;}   
   
#welcome H1
{ font: normal 250% Arial, Helvetica, sans-serif;
  letter-spacing: -3px;
  color: #FFF;}

#welcome_slogan H1
{ font: italic 150% Arial, Helvetica, sans-serif;
  letter-spacing: -2px;
  color: #FFF;}  
 
ul.menu_default
{ margin:0;}

#mob_sidebar {
  display: none;
}
ul.menu_default li
{ padding: 0 0 0 0px;
  list-style: none;
  margin: 1px 0 0 0;
  display: inline;
  background: transparent;}

ul.menu_default .mobile { 
  display: none;
}


#mob-menu-btn{
  display: none;
}

#site_content
{ width: 900px;
  overflow: hidden;
  margin: 0 auto;
  padding: 0 0px 0 20px;
  background: #FFF;} 

.sidebar_container
{ float: right;
  width: 250px;
  padding: 0;}

.sidebar
{ float: left;
  width: 200px;
  padding: 0;
  margin-top: 10px;
  margin-bottom: 10px;}

.sidebar_item
{ font: normal 100% Arial, Helvetica, sans-serif;
  padding: 0 0 0 15px;
  width: 201px;}

.sidebar h2
{ padding: 8px 0 0 10px;
  height: 40px;
  color: #FFF;
  background: transparent url(../images/sidebar_header.jpg) no-repeat;}  

ul#sidebar li a
{
	color: #000;
}
ul#sidebar li.current a
{
	color: #000;
	text-shadow: 2px 2px 2px #225B82;
}

ul#sidebar, ul#sidebar ul
{
	color: #000;
	list-style:none;
}


.content_item
{ width: 630px;
  margin-top: 20px;
  margin-bottom: 20px;}

.content_item2
{ width: 750px;
  margin-top: 20px;
  margin-bottom: 20px;}
  
.content_image
{ float: left; 
  width: 200px;}

.content_image img {
  width: 179px;
  height: 200px;
}
.content_image img.nature_genetics {
  height: 250px;
}
#content
{ width: 640px;
  padding-left: 10px;
  margin-bottom: 20px;
  float: left;}

.content_container.lab_news {
  padding:5px;
  padding-bottom: 0px;
}
.content_container:nth-child(2) {
  padding-top: 0px;
}
.content_container
{ width: 700px;
  padding: 5px;
  margin: 0 auto;
}
.content_container div.info_box {
  border: 1px solid gray;
  padding: 10px;
  font-weight: bold;
  color: gray;
}
#lab_news_area {
  margin-bottom: 30px;
}
#lab_news_area h1.lab_news_title {
  text-align: center; font-size: 1.8rem; margin-top:30px; margin-bottom: -10px; padding: 10px 0; color:#fff; background: #cbcbcb;
}
.sidebar1
{ float: left;
  width: 580px;
  padding: 0;
  margin-top: 10px;
  margin-bottom: 10px;}

.sidebar1_item
{ font: normal 100% Arial, Helvetica, sans-serif;
  padding: 0 0 0 0px;
  width: 580px;}

.sidebar1 h2
{ padding: 8px 0 0 10px;
  height: 40px;
  color: #FFF;
  background: transparent url(../images/sidebar_header.jpg) no-repeat;}  

#content_grey
 { width: 920px;
  height: 5px;
  text-align: center; 
  /*background: transparent url(../images/sidebar_header.jpg) repeat;*/
  color: #FFF;} 
  
.content_grey_container_box
{ width: 270px;
  padding: 5px;
  text-align: center;
  margin: 20px 10px 10px 10px;
  float: left;
  color: #FFF;}

.content_grey_container_boxl
{ width: 270px;
  padding: 5px;
  text-align: center;
  margin: 20px 0 10px 10px;
  float: left;
  color: #FFF;}
  
#footer
{ width: 920px;
  height: 10px;
  padding-top: 10px;
  text-align: left; 
  font: 80% arial;
  background: transparent;
  color: #1D1D1D;}

#footer a, #footer a:hover
{ color: #684430;
  text-decoration: none;
  padding-bottom: 20px;}

#footer a:hover
{ text-decoration: underline;}

#footer a, #footer a:hover
{ color: #1D1D1D;
  text-decoration: none;}

#footer a:hover
{ text-decoration: underline;}

#footer table {
  padding: 20px;
  background:#f5f4f2;
}
 .readmore
{ height: 30px;
  padding-left: 23px;
  color: #FFF;
  background: transparent;}
  
 .readmore a
{ color: #FFF;}
 
 .button_small
{ height: 25px;
  width: 80px;
  padding: 10px 0 0 8px;
  background: #297BB3;
  border: 1px solid #1F4763;}
  
.button_small a
{ color: #FFF;
  padding-left: 5px;}

.form_settings
{ margin: 15px 0 0 0;}

.form_settings p
{ padding: 0 0 4px 0;}

.form_settings span
{ float: left; 
  width: 280px; 
  text-align: left;}
  
.form_settings input, .form_settings textarea
{ padding: 2px; 
  width: 299px; 
  font: 100% arial; 
  border: 1px solid #E5E5DB; 
  background: #FFF; 
  color: #47433F;}
  
.form_settings input[type="checkbox"]
{ padding: 2px 0; 
  width: 15px; 
  font: 100% arial; 
  border: 0; 
  background: #FFF; 
  color: #47433F;
  margin: 28px 0;}

.form_settings .submit
{ font: 100% arial; 
  border: 1px solid; 
  width: 99px; 
  margin: 0 0 0 206px; 
  height: 26px;
  padding: 2px 0 3px 0;
  cursor: pointer; 
  background: #5082BD; 
  color: #FFF;}

/* styling for the slideshow on the homepage */
ul.slideshow {
  list-style: none;
  width: 880px;
  height: 250px;
  overflow: hidden;
  position: relative;
  margin: 0;
  padding-top: 20px;}
  
ul.slideshow li {
  position: absolute;
  margin: 0;
  padding: 0;
  left: 0;
  right: 0;}
 
ul.slideshow li.show {
  z-index: 500;}
 
ul img {
  border: none;}
 
#slideshow-caption {
  width: 880px;
  height: 38px;
  position: absolute;
  bottom: 0;
  left: 0; 
  z-index: 500;}
 
#slideshow-caption .slideshow-caption-container {
  padding: 10px 25px 10px 25px; 
  background: transparent url(../images/transparent.png) repeat;  
  z-index: 1000;}
 
#slideshow-caption p {
  padding: 0;
  font: normal 130% arial, sans-serif;
  color: #FFF;}



/**ol-li tag Members Page*/

.member_pub{

        width:540px;
        margin:0px;
}

ol.member_pub {
    list-style-type: none;
    list-style-type: decimal !ie; /*IE 7- hack*/
    margin: 0;
    padding: 0;
    counter-reset: li-counter;
}
ol.member_pub > li{
    position: relative;
    margin-bottom: 20px;
    min-height: 3em;
    margin:0px;
}
ol.member_pub > li:before {
    padding-right: 5px;
    font-weight: bold;
    color: #8CC33E;
    text-decoration:underline;
    content: counter(li-counter);
    counter-increment: li-counter;
}

table.member {
	width:100%;
}

table.member td {
	/*border: 1px solid #AAAAAA;*/
	padding:10px 10px;
}
table.member td.photo {
	width:140px;
}

table.member div.name {
	font-weight:bold;
	padding-left: 15px;
	padding-bottom: 10px;
	font-size:18px;
	line-height:21px;
}
table.member div.name .email {
	font-size:14px;
}

.mobile_menu{
  display: none;
}

.member .post-doctoral .name{
  font-size: 14px;
  margin: 10px 15px;
  color:#000000;
}
.vertical-menu {
  width: 180px;
}

.vertical-menu a {
  /*background-color: #eee;*/
  color: black;
  display: block;
  padding: 12px;
  text-decoration: none;
}

.vertical-menu a:hover {
  background-color: #ccc;
}

.vertical-menu a.active {
  background-color: #428BCA;;
  color: white;
}


li.research {
	font-weight : bold;
	font-size:18px;
	color:#297bb3;
}
a.member_publication{
  color: #297bb3;
  display: block;
  /*padding: 12px;*/
  text-decoration: none;
}


/* Refactoring */

.pc.professor .member_box .info{
   font-size: 14px;
   color:#000000;
   font-weight: bold;
}
.pc.professor .member_box{
    text-indent:10px;
}
/* Awards */

.award_front_info {

 padding: 0px 10px 30px;
 line-height: 1.35rem;
}
.research_winner {
  padding-bottom: 0px;
}

/* Gallery */
.gallery h1{
  display: none;
}
/* Control Mobile */

.publication .mob {
  display: none;
}
.publication .menubar_top {
  display: none;
}

.mob.professor{
  display: none;
}

/* news */
.mobile_news {
 display: none;
}
.pc_news li{
  margin-bottom: 30px;
}
.pc_news li a >img{
    padding-top: 10px;
  }
}

#media-mobile, #media-pc {
  display: none;
  height: 0px;
  overflow: hidden;
}

@media all and (min-width: 501px){ /* PC */
 #media-mobile {
   display: none;
 }
 #media-pc {
   display: block;
 }
}

/*  Member Page Refactoring */
.member .post-doctoral .name, .member .part_time .name  {
  font-size: 14px;
  margin: 10px 15px;
  color:#000000;
}
.member .mem_table{
  width: 560;
}

.winner_box img {
   width: 150px;
   height: 200px;
}
.winner_box .win_info img {
   width: 30px;
   height: 30px;
}

#micropop .map_img{
  width: 600px;
  height: 400px;
}
#micropop .map_img img{
  width: 100%;
  height: 100%;
}
#micropop .map {
  margin-left: 50px;
}
#micropop .menu_default img {
  display: none;
}

/* 맨앞 갈라진 main을 front로 편입 */

#front_page figure.biomicropop {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  overflow: hidden;
  min-width: 220px;
  max-width: 480px;
  max-height: 500px;
  width: 100%;
  color: #fff;
  text-align: center;
  box-shadow: 3px 3px 4px 2px #cbcbcb;
  font-size: 16px;
  background:gray;
}
#front_page figure.biomicropop * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.45s ease-in-out;
  transition: all 0.45s ease-in-out;
}
#front_page figure.biomicropop img {
  max-width: 100%;
  max-height: 100%;
  position: relative;
  opacity: 0.9;
}
#front_page figure.biomicropop figcaption {
  position: absolute;
  top: 45%;
  left: 7%;
  right: 7%;
  bottom: 45%;
  border: 1px solid white;
  border-width: 1px 1px 0;
}
#front_page figure.biomicropop .heading {
  overflow: hidden;
  -webkit-transform: translateY(50%);
  transform: translateY(50%);
  position: absolute;
  bottom: 0;
  width: 100%;
}
#front_page figure.biomicropop h2 {
  display: table;
  margin: 0 auto;
  padding: 0 10px;
  position: relative;
  text-align: center;
  width: auto;
  text-transform: uppercase;
  font-weight: 400;
}
#front_page figure.biomicropop h2 span {
  font-weight: 600;
}
#front_page figure.biomicropop h2:before,
#front_page figure.biomicropop h2:after {
  position: absolute;
  display: block;
  width: 1000%;
  height: 1px;
  content: '';
  background: white;
  top: 50%;
}
#front_page figure.biomicropop h2:before {
  left: -1000%;
}
#front_page figure.biomicropop h2:after {
  right: -1000%;
}
#front_page figure.biomicropop p {
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  width: 100%;
  padding: 0 20px;
  margin: 0;
  opacity: 0;
  line-height: 1.6em;
  font-size: 0.9em;
}
#front_page figure.biomicropop a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 1;
}
#front_page figure.biomicropop:hover img,
#front_page figure.biomicropop.hover img {
  opacity: 0.25;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
#front_page figure.biomicropop:hover figcaption,
#front_page figure.biomicropop.hover figcaption {
  top: 7%;
  bottom: 7%;
}
#front_page figure.biomicropop:hover p,
#front_page figure.biomicropop.hover p {
  opacity: 1;
  -webkit-transition-delay: 0.35s;
  transition-delay: 0.35s;
}

#front_page body {
    /*background-color: #212121;*/
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: wrap;
    margin: 0;
    height: 100%;
}

#front_page h4{
	padding:10px;
	color:#555;
}
#front_page h4 img{
	padding: 10px;
}
#front_page .wrap .biopop_area {
    float: left;
    padding-right: 4%;
}
#front_page .wrap .micropop_area {
    float: left;
}
#front_page .banner_area {
    padding-top: 70px;
}
#front_page .banner_area::after {
    display: block;
    content: '';
    clear: both;
}
#front_page .banner_area .biopop_area,
#front_page .banner_area .micropop_area {
    width: 47%;
}
#front_page figure.biomicropop h2 span, #front_page figure.biomicropop h2 span {
  color: #fff;
}

/*NEW HOMEPAGE DESIGN*/

.mobile_menu {
  display: none !important;
}
div.#biopop {
    background: #fff;
}

#menubar
{ width: 920px;
  /* height: 50px;*/
  text-align: center;
  margin: 0 auto;
  display: block;
  background:#fff;
}
body {
    background: #fff;
}
#menubar {
    box-shadow: 3px 3px 4px 2px #cbcbcb;
}
/*ul.menu_default li{
    border-right: 1px solid gray;
}*/
ul.menu_default li a:hover{
    background-color:#dadce0
}

ul.menu_default li:last-child {
    border-right: 0px;
}
ul.menu_default li a
{ display: inline-block;
  margin: 0px;
  padding: 15px 30px;
  text-align: center;
  color: gray;
  text-decoration: none;
  background: transparent;}

ul.menu_default .micropop_li img{
  display: none;
}

ul.menu_default li.current a {
    background-color : #cbcbcb;
    color: #fff;
}
ul.menu_default li a:hover {
  color: gray;
}

figure {
    display: block;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

/* publication */

h1.pc.selected {
    text-align: center;
    margin-top: 40px;
}

h1.pc.pub_year.top {
    margin-top: -40px;
}

h1.pc.pub_year {
    text-align: center;
    padding-bottom: 30px;
    padding-top: 30px;
    font-weight: bold;
    margin-left: -20px;
}

ol.pub_table_all {
    margin-top:-60px;
}

ol.pub_table_all li, ol.pub_table_selected li {
    margin: 0 0 10px 32px;
}

ul.selected_or_all li {
    display: inline-block;
}
ul.selected_or_all li a:hover {
    background: #fff;
}
ul.selected_or_all li a{
    background: #cbcbcb;
    text-align: center;
    list-decoration: none;
    padding: 8px 25px;
    box-shadow: 1px 1px 4px gray;
    margin-right: 5px;
}
.publication .content_item {
    width: 700px;
}
/* HOME */
.home_title {
    color: #5c5b5b;
    display:block;
}

/* Gallery */
.gallery #content {
    padding-left: 60px;
} /* 새로 고치면서 추가*/

/* professor */
div.pc.professor {
    width: 85%;
}