Difference between revisions of "Team:HZAU-China/Public Engagement"

Line 3: Line 3:
  
 
<head>
 
<head>
    <meta charset="UTF-8">
+
  <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="bootstrap.min.css" rel="stylesheet">
+
  <link href="bootstrap.min.css" rel="stylesheet">
    <!-- 导航栏CSS -->
+
  <!-- 导航栏CSS -->
    <style type="text/css">
+
  <style type="text/css">
        #sideMenu,
+
    #sideMenu,
        #top_title,
+
    #top_title,
        #team_submenu {
+
    #team_submenu {
            display: none;
+
      display: none;
        }
+
    }
  
        #HQ_page p {
+
    #HQ_page p {
            margin: 0 !important;
+
      margin: 0 !important;
        }
+
    }
  
        #content {
+
    #content {
            padding: 0px;
+
      padding: 0px;
            width: 100%;
+
      width: 100%;
            margin-top: 0px;
+
      margin-top: 0px;
            margin-left: 0px;
+
      margin-left: 0px;
        }
+
    }
  
        #bodyContent h1,
+
    #bodyContent h1,
        #bodyContent h2,
+
    #bodyContent h2,
        #bodyContent h3,
+
    #bodyContent h3,
        #bodyContent h4,
+
    #bodyContent h4,
        #bodyContent h5 {
+
    #bodyContent h5 {
            margin-bottom: 0px;
+
      margin-bottom: 0px;
        }
+
    }
  
        #team_name {
+
    #team_name {
            display: none
+
      display: none
        }
+
    }
  
        .global_wrapper {
+
    .global_wrapper {
            padding: 0px 0px 0px 0px;
+
      padding: 0px 0px 0px 0px;
        }
+
    }
  
        #top_menu_14 {
+
    #top_menu_14 {
            height: 16px;
+
      height: 16px;
        }
+
    }
  
        * {
+
    * {
            margin: 0;
+
      margin: 0;
            padding: 0;
+
      padding: 0;
            list-style: none;
+
      list-style: none;
            list-style-type: none;
+
      list-style-type: none;
            text-decoration: none !important;
+
      text-decoration: none !important;
        }
+
    }
  
        body {
+
    body {
            margin: 0;
+
      margin: 0;
            padding: 0;
+
      padding: 0;
            background-color: #F3F3F3;
+
      background-color: #F3F3F3;
            font-size: 16px;
+
      font-size: 16px;
            font-family: Arial, Verdana, Sans-serif;
+
      font-family: Arial, Verdana, Sans-serif;
            letter-spacing: 0;
+
      letter-spacing: 0;
            color: #FFFFFF;
+
      color: #FFFFFF;
        }
+
    }
  
        .daohang {
+
    .daohang {
            background-color: #323643;
+
      background-color: #323643;
            position: relative;
+
      position: relative;
            color: #ffffff;
+
      color: #ffffff;
            height: 64px;
+
      height: 64px;
            top: -2px;
+
      top: -2px;
        }
+
    }
  
        .logo-daohang {
+
    .logo-daohang {
            height: 64px;
+
      height: 64px;
            left: 10%;
+
      left: 10%;
            float: left;
+
      float: left;
            position: relative;
+
      position: relative;
        }
+
    }
  
        .daohang a {
+
    .daohang a {
            display: block;
+
      display: block;
            text-decoration: none;
+
      text-decoration: none;
        }
+
    }
  
        .daohang .shade {
+
    .daohang .shade {
            position: absolute;
+
      position: absolute;
            width: 100%;
+
      width: 100%;
            height: 160px;
+
      height: 160px;
            top: 64px;
+
      top: 64px;
            left: 0;
+
      left: 0;
            z-index: 1;
+
      z-index: 1;
            background-color: #EEEEEE;
+
      background-color: #EEEEEE;
            box-shadow: 0 5px 15px #CCCCCC;
+
      box-shadow: 0 5px 15px #CCCCCC;
            display: none;
+
      display: none;
            border-bottom: #ffffff solid 1px;
+
      border-bottom: #ffffff solid 1px;
            border-bottom: rgba(255, 255, 255, 0.3) solid 1px;
+
      border-bottom: rgba(255, 255, 255, 0.3) solid 1px;
        }
+
    }
  
        .daohang .caidan {
+
    .daohang .caidan {
            position: absolute;
+
      position: absolute;
            top: 0;
+
      top: 0;
            right: 10%;
+
      right: 10%;
            margin: 0;
+
      margin: 0;
            z-index: 2;
+
      z-index: 2;
            padding: 0;
+
      padding: 0;
            list-style: none;
+
      list-style: none;
            width: 730px;
+
      width: 730px;
            float: right;
+
      float: right;
            overflow: hidden;
+
      overflow: hidden;
            height: 64px;
+
      height: 64px;
        }
+
    }
  
        .daohang .caidan>li {
+
    .daohang .caidan>li {
            padding: 0;
+
      padding: 0;
            float: left;
+
      float: left;
            margin: 0;
+
      margin: 0;
            text-align: center;
+
      text-align: center;
            height: 224px;
+
      height: 224px;
        }
+
    }
  
        .daohang .shortName {
+
    .daohang .shortName {
            width: 110px;
+
      width: 110px;
        }
+
    }
  
        .daohang .longName {
+
    .daohang .longName {
            width: 170px;
+
      width: 170px;
        }
+
    }
  
        .daohang .nav_head {
+
    .daohang .nav_head {
            height: 64px;
+
      height: 64px;
            line-height: 64px;
+
      line-height: 64px;
            color: #ffffff;
+
      color: #ffffff;
            font-size: 16px !important;
+
      font-size: 16px !important;
        }
+
    }
  
        .daohang .xsjPic {
+
    .daohang .xsjPic {
            display: inline-block;
+
      display: inline-block;
            width: 10px;
+
      width: 10px;
            height: 10px;
+
      height: 10px;
            vertical-align: middle;
+
      vertical-align: middle;
            background-size: 100% 100%;
+
      background-size: 100% 100%;
            background-image: url("https://static.igem.org/mediawiki/2018/6/63/T--HZAU-China--xsj.svg")
+
      background-image: url("https://static.igem.org/mediawiki/2018/6/63/T--HZAU-China--xsj.svg")
        }
+
    }
  
        .daohang .xjtPic {
+
    .daohang .xjtPic {
            display: inline-block;
+
      display: inline-block;
            width: 10px;
+
      width: 10px;
            height: 10px;
+
      height: 10px;
            vertical-align: middle;
+
      vertical-align: middle;
            background-size: 100% 100%;
+
      background-size: 100% 100%;
            background-image: url("https://static.igem.org/mediawiki/2018/8/8d/T--HZAU-China--xjt.svg")
+
      background-image: url("https://static.igem.org/mediawiki/2018/8/8d/T--HZAU-China--xjt.svg")
        }
+
    }
  
        .daohang a:hover span {
+
    .daohang a:hover span {
            transform: rotateY(180deg);
+
      transform: rotateY(180deg);
            -webkit-transform: rotateY(180deg);
+
      -webkit-transform: rotateY(180deg);
            -moz-transform: rotateY(180deg);
+
      -moz-transform: rotateY(180deg);
            -o-transform: rotateY(180deg);
+
      -o-transform: rotateY(180deg);
            -ms-transform: rotateY(180deg);
+
      -ms-transform: rotateY(180deg);
            transition: all 0.5s ease-in-out;
+
      transition: all 0.5s ease-in-out;
            -webkit-transition: all 0.5s ease-in-out;
+
      -webkit-transition: all 0.5s ease-in-out;
            -moz-transition: all 0.5s ease-in-out;
+
      -moz-transition: all 0.5s ease-in-out;
            -o-transition: all 0.5s ease-in-out;
+
      -o-transition: all 0.5s ease-in-out;
        }
+
    }
  
        .daohang .item {
+
    .daohang .item {
            font-size: 16px;
+
      font-size: 16px;
            height: 40px;
+
      height: 40px;
            line-height: 40px;
+
      line-height: 40px;
            color: #333333;
+
      color: #333333;
            position: relative;
+
      position: relative;
        }
+
    }
  
        .daohang .caidan:hover {
+
    .daohang .caidan:hover {
            height: 264px;
+
      height: 264px;
            transition: height 0.3s;
+
      transition: height 0.3s;
        }
+
    }
  
        .daohang .caidan:hover+.shade {
+
    .daohang .caidan:hover+.shade {
            display: block;
+
      display: block;
        }
+
    }
  
        .daohang .caidan>li.hiLight:hover {
+
    .daohang .caidan>li.hiLight:hover {
            background-color: #ffffff;
+
      background-color: #ffffff;
        }
+
    }
  
        .daohang .caidan>li:hover .nav_head {
+
    .daohang .caidan>li:hover .nav_head {
            background-color: #EA0D04;
+
      background-color: #EA0D04;
        }
+
    }
  
        .daohang .caidan>li:hover .item {}
+
    .daohang .caidan>li:hover .item {}
  
  
        .daohang .shortName .item:before {
+
    .daohang .shortName .item:before {
            content: '';
+
      content: '';
            display: block;
+
      display: block;
            position: absolute;
+
      position: absolute;
            width: 80px;
+
      width: 80px;
            height: 1px;
+
      height: 1px;
            bottom: 5px;
+
      bottom: 5px;
            left: 15px;
+
      left: 15px;
            background-color: #CCCCCC;
+
      background-color: #CCCCCC;
        }
+
    }
  
        .daohang .shortName .item:hover:after {
+
    .daohang .shortName .item:hover:after {
            content: '';
+
      content: '';
            display: block;
+
      display: block;
            position: absolute;
+
      position: absolute;
            width: 80px;
+
      width: 80px;
            height: 2px;
+
      height: 2px;
            bottom: 5px;
+
      bottom: 5px;
            left: 15px;
+
      left: 15px;
            background-color: #f51720;
+
      background-color: #f51720;
        }
+
    }
  
        .daohang .longName .item:before {
+
    .daohang .longName .item:before {
            content: '';
+
      content: '';
            display: block;
+
      display: block;
            position: absolute;
+
      position: absolute;
            width: 130px;
+
      width: 130px;
            height: 1px;
+
      height: 1px;
            bottom: 5px;
+
      bottom: 5px;
            left: 20px;
+
      left: 20px;
            background-color: #CCCCCC;
+
      background-color: #CCCCCC;
        }
+
    }
  
        .daohang .longName .item:hover:after {
+
    .daohang .longName .item:hover:after {
            content: '';
+
      content: '';
            display: block;
+
      display: block;
            position: absolute;
+
      position: absolute;
            width: 130px;
+
      width: 130px;
            height: 2px;
+
      height: 2px;
            bottom: 5px;
+
      bottom: 5px;
            left: 20px;
+
      left: 20px;
            background-color: #f51720;
+
      background-color: #f51720;
        }
+
    }
  
        @media screen and (max-width: 1200px) {
+
    @media screen and (max-width: 1200px) {
            .logo-daohang {
+
      .logo-daohang {
                left: 3%;
+
        left: 3%;
            }
+
      }
  
            .daohangyi {
+
      .daohangyi {
                font-size: 12px;
+
        font-size: 12px;
            }
+
      }
        }
+
    }
  
        @media screen and (max-width: 900px) {
+
    @media screen and (max-width: 900px) {
  
            .daohang .caidan {
+
      .daohang .caidan {
                right: 0;
+
        right: 0;
                width: 100%;
+
        width: 100%;
            }
+
      }
  
            .logo-daohang {
+
      .logo-daohang {
                display: none;
+
        display: none;
            }
+
      }
  
            .daohang .shortName {
+
      .daohang .shortName {
                width: 15vw;
+
        width: 15vw;
            }
+
      }
  
            .daohang .longName {
+
      .daohang .longName {
                width: 25vw;
+
        width: 25vw;
            }
+
      }
  
            .daohangyi img {
+
      .daohangyi img {
                display: none;
+
        display: none;
            }
+
      }
  
            .daohang .longName .item:before {
+
      .daohang .longName .item:before {
                width: 150px;
+
        width: 150px;
                left: 20px;
+
        left: 20px;
            }
+
      }
  
            .daohang .longName .item:hover:after {
+
      .daohang .longName .item:hover:after {
                width: 150px;
+
        width: 150px;
                left: 20px;
+
        left: 20px;
            }
+
      }
        }
+
    }
    </style>
+
  </style>
    <!-- 内容CSS -->
+
  <!-- 内容CSS -->
    <style class="text/css">
+
  <style class="text/css">
        .clearfix:after {
+
    .clearfix:after {
            content: ".";
+
          content: ".";
            display: block;
+
          display: block;
            height: 0;
+
          height: 0;
            clear: both;
+
          clear: both;
            visibility: hidden;
+
          visibility: hidden;
  
        }
+
      }
  
        .neirong {
+
      .neirong {
            width: 100%;
+
          width: 100%;
            height: auto;
+
          height: auto;
            background-color: #F3F3F3;
+
          background-color: #F3F3F3;
        }
+
      }
  
        .zhengwen {
+
      .zhengwen {
            width: 80%;
+
          width: 80%;
            /* height: auto; */
+
          /* height: auto; */
            margin: 20px 40px 0 0;
+
          margin: 20px 40px 0 0;
            /* right: 2%; */
+
          /* right: 2%; */
            /* top: 90px; */
+
          /* top: 90px; */
            padding: 50px 3%;
+
          padding: 50px 3%;
            float: right;
+
          float: right;
            /* position: relative; */
+
          /* position: relative; */
            background-color: #FFF;
+
          background-color: #FFF;
            box-shadow: 0 1px 3px #676767;
+
          box-shadow: 0 1px 3px #676767;
            /* border: 2px solid black; */
+
          /* border: 2px solid black; */
            /* border-radius: 3px; */
+
          /* border-radius: 3px; */
            /* overflow: hidden; */
+
          /* overflow: hidden; */
            /* display: block; */
+
          /* display: block; */
            /* font-family: Arial, Verdana, Sans-serif; */
+
          /* font-family: Arial, Verdana, Sans-serif; */
        }
+
      }
  
        .cebian {
+
      .cebian {
            width: 200px;
+
          width: 200px;
            /* height: 80vh; */
+
          /* height: 80vh; */
            float: left;
+
          float: left;
            /* left: 1vw; */
+
          /* left: 1vw; */
            top: 150px;
+
          top: 150px;
            position: fixed;
+
          position: fixed;
            box-shadow: 0 1px 3px #676767;
+
          box-shadow: 0 1px 3px #676767;
            /* border:2px solid black */
+
          /* border:2px solid black */
            /* background-color: #323643 */
+
          /* background-color: #323643 */
        }
+
      }
  
        .zhengwen p{
+
      .zhengwen p{
            text-align: justify !important;
+
          text-align: justify !important;
            font-family:  'Times New Roman',Helvetica,'Open Sans',  Arial, sans-serif !important;
+
          font-family:  'Times New Roman',Helvetica,'Open Sans',  Arial, sans-serif !important;
            color: #3B3B3B;
+
          color: #3B3B3B;
            font-size: 26px !important;
+
          font-size: 26px !important;
            padding-right: 20px;
+
          padding-right: 20px;
        }
+
      }
  
        .daimg {
+
      .daimg {
            width: 100%;
+
          width: 100%;
            height: auto;
+
          height: auto;
            margin: 20px 0;
+
          margin: 20px 0;
            box-shadow: 0 1px 3px #676767;
+
          box-shadow: 0 1px 3px #676767;
        }
+
      }
  
        .h1 {
+
      .h1 {
            line-height: 55px;
+
          line-height: 55px;
            font-weight: bold;
+
          font-weight: bold;
            height:auto;
+
          height:auto;
            font-family: 'Product Sans', sans-serif;
+
          font-family: 'Product Sans', sans-serif;
            font-size: 40px;
+
          font-size: 40px;
            color: #3B3B3B;
+
          color: #3B3B3B;
            border-bottom: 2px solid #676767;
+
          border-bottom: 2px solid #676767;
            margin-bottom: 20px;
+
          margin-bottom: 20px;
        }
+
      }
  
        .h2 {
+
      .h2 {
            height: 40px;
+
          height: 40px;
            line-height: 40px;
+
          line-height: 40px;
            font-weight: bold;
+
          font-weight: bold;
            height:auto;
+
          height:auto;
            /* font-weight: bold; */
+
          /* font-weight: bold; */
            font-family: 'Product Sans', sans-serif;  
+
          font-family: 'Product Sans', sans-serif;  
            font-size: 30px;
+
          font-size: 30px;
            color: #484848;
+
          color: #484848;
            /* margin-bottom: 20px; */
+
          /* margin-bottom: 20px; */
        }
+
      }
  
        .h3 {
+
      .h3 {
            height: 30px;
+
          height: 30px;
            line-height: 30px;
+
          line-height: 30px;
            font-weight: bold;
+
          font-weight: bold;
            height:auto;
+
          height:auto;
            /* font-weight: bold; */
+
          /* font-weight: bold; */
            font-family: 'Product Sans', sans-serif;
+
          font-family: 'Product Sans', sans-serif;
            font-size: 24px;
+
          font-size: 24px;
            color: #484848;
+
          color: #484848;
            /* margin-bottom: 20px; */
+
          /* margin-bottom: 20px; */
        }
+
      }
       
+
     
        table {
+
      table {
            color: #3B3B3B;
+
          color: #3B3B3B;
        }
+
      }
  
        .zhengwen .tuandui_list {
+
      .zhengwen .tuandui_list {
            position: relative;
+
          position: relative;
            margin-top: 40px;
+
          margin-top: 40px;
            height: 520px;
+
          height: 520px;
            overflow: hidden;
+
          overflow: hidden;
        }
+
      }
  
        .tuandui_list>li {
+
      .tuandui_list>li {
            padding: 0;
+
          padding: 0;
            width: 20%;
+
          width: 20%;
            float: left;
+
          float: left;
            position: relative;
+
          position: relative;
            margin: 0 2.4%;
+
          margin: 0 2.4%;
            text-align: center;
+
          text-align: center;
        }
+
      }
  
        .zhengwen .laoshi_list {
+
      .zhengwen .laoshi_list {
            position: relative;
+
          position: relative;
            margin-top: 40px;
+
          margin-top: 40px;
            height: 430px;
+
          height: 430px;
        }
+
      }
  
        .laoshi_list>li {
+
      .laoshi_list>li {
            padding: 0;
+
          padding: 0;
            width: 20%;
+
          width: 20%;
            float: left;
+
          float: left;
            position: relative;
+
          position: relative;
            margin: 0 2.4%;
+
          margin: 0 2.4%;
            text-align: center;
+
          text-align: center;
        }
+
      }
  
        .duiyuan {
+
      .duiyuan {
            margin: 20px 0;
+
          margin: 20px 0;
            /* border: 1px solid red; */
+
          /* border: 1px solid red; */
        }
+
      }
  
        .laoshi {
+
      .laoshi {
            margin: 20px 0;
+
          margin: 20px 0;
        }
+
      }
  
        .duiyuan img {
+
      .duiyuan img {
            width: 100%;
+
          width: 100%;
            height: auto;
+
          height: auto;
            border-top: 3px solid #323643;
+
          border-top: 3px solid #323643;
            border-left: 3px solid #323643;
+
          border-left: 3px solid #323643;
            border-right: 3px solid #323643;
+
          border-right: 3px solid #323643;
        }
+
      }
  
        .laoshi img {
+
      .laoshi img {
            width: 100%;
+
          width: 100%;
            height: 50vh;
+
          height: 50vh;
            border-top: 3px solid #323643;
+
          border-top: 3px solid #323643;
            border-left: 3px solid #323643;
+
          border-left: 3px solid #323643;
            border-right: 3px solid #323643;
+
          border-right: 3px solid #323643;
        }
+
      }
  
        .duiyuan .xingming {
+
      .duiyuan .xingming {
            width: 100%;
+
          width: 100%;
            height: 50px;
+
          height: 50px;
            line-height: 50px;
+
          line-height: 50px;
            background-color: #323643;
+
          background-color: #323643;
            border-left: 3px solid #323643;
+
          border-left: 3px solid #323643;
            border-right: 3px solid #323643;
+
          border-right: 3px solid #323643;
            font-size: 16px;
+
          font-size: 16px;
            color: white;
+
          color: white;
            box-shadow: 0 1px 3px #CCCCCC;
+
          box-shadow: 0 1px 3px #CCCCCC;
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+
          font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
            font-size: 24px;
+
          font-size: 24px;
            font-weight: bold;
+
          font-weight: bold;
            text-align: center;
+
          text-align: center;
        }
+
      }
  
        .laoshi .xingming {
+
      .laoshi .xingming {
            width: 100%;
+
          width: 100%;
            height: 50px;
+
          height: 50px;
            line-height: 50px;
+
          line-height: 50px;
            background-color: #323643;
+
          background-color: #323643;
            border-left: 3px solid #323643;
+
          border-left: 3px solid #323643;
            border-right: 3px solid #323643;
+
          border-right: 3px solid #323643;
            font-size: 16px;
+
          font-size: 16px;
            color: white;
+
          color: white;
            box-shadow: 0 1px 3px #CCCCCC;
+
          box-shadow: 0 1px 3px #CCCCCC;
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+
          font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
            font-size: 24px;
+
          font-size: 24px;
            font-weight: bold;
+
          font-weight: bold;
            text-align: center;
+
          text-align: center;
        }
+
      }
  
        .duiyuan .jieshao {
+
      .duiyuan .jieshao {
            width: 100%;
+
          width: 100%;
            height: 200px;
+
          height: 200px;
            background-color: #f6eee0;
+
          background-color: #f6eee0;
            border-bottom: 3px solid #323643;
+
          border-bottom: 3px solid #323643;
            border-left: 3px solid #323643;
+
          border-left: 3px solid #323643;
            border-right: 3px solid #323643;
+
          border-right: 3px solid #323643;
            /* border-bottom-left-radius: 5px;
+
          /* border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px; */
+
          border-bottom-right-radius: 5px; */
        }
+
      }
  
        .duiyuan .jieshao .saohua {
+
      .duiyuan .jieshao .saohua {
            padding: 10px 4px 0px 4px !important;
+
          padding: 10px 4px 0px 4px !important;
            color: black;
+
          color: black;
            font-family: Arial;
+
          font-family: Arial;
            font-style: italic;
+
          font-style: italic;
            font-size: 15px !important;
+
          font-size: 15px !important;
            list-style-type: none;
+
          list-style-type: none;
            text-align: justify;
+
          text-align: justify;
            line-height: 18px;
+
          line-height: 18px;
        }
+
      }
    </style>
+
  </style>
    <!-- 滚动菜单栏CSS -->
+
  <!-- 滚动菜单栏CSS -->
    <style>
+
  <style>
        #float01 {}
+
    #float01 {}
  
        #float02 {}
+
      #float02 {}
  
        div.floatCtro {
+
      div.floatCtro {
            width: 100%;
+
          width: 100%;
            /* height: auto; */
+
          /* height: auto; */
            margin: 0;
+
          margin: 0;
            position: relative;
+
          position: relative;
            background: #fff;
+
          background: #fff;
  
        }
+
      }
  
        .daohangyi {
+
      .daohangyi {
            display: block;
+
          display: block;
            width: 100%;
+
          width: 100%;
            /* height: auto; */
+
          /* height: auto; */
            /* text-align: left !important; */
+
          /* text-align: left !important; */
            color: #ffffff !important;
+
          color: #ffffff !important;
            font-size: 16px;
+
          font-size: 16px;
            padding:0;
+
          padding:0;
            background-color: #323643;
+
          background-color: #323643;
            border-bottom: 1px solid black;
+
          border-bottom: 1px solid black;
            padding:0 3%;
+
          padding:0 3%;
            text-decoration: none !important;
+
          text-decoration: none !important;
        }
+
      }
  
        div.floatCtro .daohanger {
+
      div.floatCtro .daohanger {
            width: 100%;
+
          width: 100%;
            text-align: left !important;
+
          text-align: left !important;
            height: auto;
+
          height: auto;
            line-height: 25px;
+
          line-height: 25px;
            font-family: Arial;
+
          font-family: Arial;
            font-size: 14px !important;
+
          font-size: 14px !important;
            color: #676767;
+
          color: #676767;
            margin: 0;
+
          margin: 0;
            padding:10px 8%;
+
          padding:10px 8%;
            cursor: pointer;
+
          cursor: pointer;
            background: #fff;
+
          background: #fff;
        }
+
      }
  
        div.floatCtro a {
+
      div.floatCtro a {
            display: inline-block;
+
          display: inline-block;
            display: none;
+
          display: none;
            width: 100%;
+
          width: 100%;
            height: 40px;
+
          height: 40px;
            padding:10px 8%;
+
          padding:10px 8%;
            /* margin: 10px 0 0 0; */
+
          /* margin: 10px 0 0 0; */
            background: #FFF;
+
          background: #FFF;
            color: #000 !important;
+
          color: #000 !important;
            vertical-align: middle;
+
          vertical-align: middle;
            cursor: pointer;
+
          cursor: pointer;
        }
+
      }
  
        div.floatCtro a span {
+
      div.floatCtro a span {
            display: block;
+
          display: block;
            height: auto;
+
          height: auto;
            text-align: left !important;
+
          text-align: left !important;
            line-height: 18px;
+
          line-height: 18px;
            font-family: Arial;
+
          font-family: Arial;
            font-size: 16px;
+
          font-size: 16px;
        }
+
      }
  
        div.floatCtro a:hover {
+
      div.floatCtro a:hover {
            /* background: #76b39d; */
+
          /* background: #76b39d; */
            color: #EA0D04 !important;
+
          color: #EA0D04 !important;
            zoom: 1;
+
          zoom: 1;
        }
+
      }
  
        /* .cebian a:hover {
+
      /* .cebian a:hover {
            color: #f6eee0 !important;
+
          color: #f6eee0 !important;
        } */
+
      } */
  
        div.floatCtro .daohanger:hover {
+
      div.floatCtro .daohanger:hover {
            /* background: #76b39d; */
+
          /* background: #76b39d; */
            color: #1fa67a;
+
          color: #1fa67a;
            text-decoration: underline !important;
+
          text-decoration: underline !important;
        }
+
      }
  
        div.floatCtro .daohanger.cur {
+
      div.floatCtro .daohanger.cur {
            /* background: #1fa67a; */
+
          /* background: #1fa67a; */
            color: #1fa67a;
+
          color: #1fa67a;
        }
+
      }
  
        .biaoti {
+
      .biaoti {
            display: inline-block;
+
          display: inline-block;
            margin: 8px 0;
+
          margin: 8px 0;
            /* width: 50%; */
+
          /* width: 50%; */
            /* margin-left: 6%; */
+
          /* margin-left: 6%; */
            /* text-align: center; */
+
          /* text-align: center; */
            text-decoration: none !important;
+
          text-decoration: none !important;
        }
+
      }
  
        .daohangyi img {
+
      .daohangyi img {
            display: inline-block;
+
          display: inline-block;
            width: 12px;
+
          width: 12px;
            height: 12px;
+
          height: 12px;
            vertical-align: middle;
+
          vertical-align: middle;
            background-size: 100% 100%;
+
          background-size: 100% 100%;
  
        }
+
      }
        .cebian div:hover img{
+
      .cebian div:hover img{
            transform: rotateY(180deg);             
+
          transform: rotateY(180deg);             
            -webkit-transform: rotateY(180deg);             
+
          -webkit-transform: rotateY(180deg);             
            -moz-transform: rotateY(180deg);             
+
          -moz-transform: rotateY(180deg);             
            -o-transform: rotateY(180deg);             
+
          -o-transform: rotateY(180deg);             
            -ms-transform: rotateY(180deg);
+
          -ms-transform: rotateY(180deg);
            transition: all 0.5s ease-in-out;             
+
          transition: all 0.5s ease-in-out;             
            -webkit-transition: all 0.5s ease-in-out;             
+
          -webkit-transition: all 0.5s ease-in-out;             
            -moz-transition: all 0.5s ease-in-out;             
+
          -moz-transition: all 0.5s ease-in-out;             
            -o-transition: all 0.5s ease-in-out;
+
          -o-transition: all 0.5s ease-in-out;
        }
+
      }
        .cebian a:hover img{
+
      .cebian a:hover img{
            transform: rotate(360deg);             
+
          transform: rotate(360deg);             
            -webkit-transform: rotate(360deg);             
+
          -webkit-transform: rotate(360deg);             
            -moz-transform: rotate(360deg);             
+
          -moz-transform: rotate(360deg);             
            -o-transform: rotate(360deg);             
+
          -o-transform: rotate(360deg);             
            -ms-transform: rotate(360deg);
+
          -ms-transform: rotate(360deg);
            transition: all 0.5s ease-in-out;             
+
          transition: all 0.5s ease-in-out;             
            -webkit-transition: all 0.5s ease-in-out;             
+
          -webkit-transition: all 0.5s ease-in-out;             
            -moz-transition: all 0.5s ease-in-out;             
+
          -moz-transition: all 0.5s ease-in-out;             
            -o-transition: all 0.5s ease-in-out;
+
          -o-transition: all 0.5s ease-in-out;
        }
+
      }
  
        @media screen and (max-width: 1200px) {             
+
      @media screen and (max-width: 1200px) {             
         
+
       
            .cebian {
+
          .cebian {
            width: 15%;
+
          width: 15%;
            }
+
          }
  
            .zhengwen {
+
          .zhengwen {
            margin: 20px 20px 0 0;
+
          margin: 20px 20px 0 0;
  
            .daohangyi {
+
          .daohangyi {
                font-size: 14px;
+
              font-size: 14px;
            }
+
          }
            .daohangyi img {
+
          .daohangyi img {
                display: none;
+
              display: none;
            }   
+
          }   
        }
+
      }
  
        @media screen and (max-width: 900px) {
+
      @media screen and (max-width: 900px) {
  
            .daohangyi img {
+
          .daohangyi img {
                display: none;
+
              display: none;
            }   
+
          }   
           
+
         
            .laoshi img {
+
          .laoshi img {
                height: 30vh;
+
              height: 30vh;
            }
+
          }
        }
+
      }
    </style>
+
  </style>
    <!-- 折叠框CSS -->
+
  <!-- 折叠框CSS -->
    <style>
+
  <style>
        .collapseDiv {
+
    .collapseDiv {
          color: #333;
+
        color: #333;
          border-radius: 4px;
+
        border-radius: 4px;
          background-color: #F3F3F3;
+
        background-color: #F3F3F3;
          border: 1px solid transparent;
+
        border: 1px solid transparent;
          border-color: #ddd;
+
        border-color: #ddd;
          box-shadow: 0 1px 1px #F3F3F3;
+
        box-shadow: 0 1px 1px #F3F3F3;
          margin-top: 5px;
+
        margin-top: 5px;
          margin-bottom: 0;
+
        margin-bottom: 0;
        }
+
      }
        .collapseDiv label {
+
      .collapseDiv label {
          cursor: pointer;
+
        cursor: pointer;
          font-size: 24px  !important;
+
        font-size: 24px  !important;
          /* font-weight: bold; */
+
        /* font-weight: bold; */
          color: green !important;
+
        color: black !important;
          border-color: #F3F3F3  !important;
+
        border-color: #F3F3F3  !important;
          padding: 5px 15px 5px 18px  !important;
+
        padding: 5px 15px 5px 18px  !important;
          background-color: #f5f5f5  !important;
+
        background-color: #f5f5f5  !important;
          margin: 0  !important;
+
        margin: 0  !important;
          border-radius: 5px  !important;
+
        text-align: center !important;
        }
+
        border-radius: 5px  !important;
 +
      }
  
        #zhedie-toggle1,
+
      #zhedie-toggle1,
        #zhedie-toggle2,
+
      #zhedie-toggle2,
        #zhedie-toggle3,
+
      #zhedie-toggle3,
        #zhedie-toggle4 {
+
      #zhedie-toggle4 {
            display: none;
+
          display: none;
        }
+
      }
  
        #zhedie1,
+
      #zhedie1,
        #zhedie2,
+
      #zhedie2,
        #zhedie3,
+
      #zhedie3,
        #zhedie4 {
+
      #zhedie4 {
            display: none;
+
          display: none;
            font-size: 18px;
+
          font-size: 18px;
            padding: 0 50px 0 50px;
+
          padding: 0 50px 0 50px;
            width: 100%;
+
          width: 100%;
            margin: 0;
+
          margin: 0;
            color: black;
+
          color: black;
        }
+
      }
  
        #zhedie-toggle1:checked+#zhedie1,
+
      .zhedie{
        #zhedie-toggle2:checked+#zhedie2,
+
          font-size: 18px;
        #zhedie-toggle3:checked+#zhedie3,
+
          padding: 0 50px 0 50px;
        #zhedie-toggle4:checked+#zhedie4 {
+
          width: 100%;
            display: block;
+
          margin: 0;
        }
+
          color: black;
 +
      }
  
          
+
      #zhedie-toggle1:checked+#zhedie1,
 +
      #zhedie-toggle2:checked+#zhedie2,
 +
      #zhedie-toggle3:checked+#zhedie3,
 +
      #zhedie-toggle4:checked+#zhedie4 {
 +
          display: block;
 +
      }
 +
 
 +
     
 +
 
 +
 
 +
      .collapse_body {
 +
         background-color: #fff;
 +
        position: relative;
 +
        height: 0;
 +
        overflow: hidden;
 +
        -webkit-transition-timing-function: ease;
 +
        -o-transition-timing-function: ease;
 +
        transition-timing-function: ease;
 +
        -webkit-transition-duration: .35s;
 +
        -o-transition-duration: .35s;
 +
        transition-duration: .35s;
 +
        -webkit-transition-property: height, visibility;
 +
        -o-transition-property: height, visibility;
 +
        transition-property: height, visibility
 +
      }
 +
      .collapse_content {
 +
        font-size: 20px;
 +
        border-top: 1px solid #ddd;
 +
        background-color: #fff;
 +
        padding: 15px;
 +
      }
 +
  </style>
  
  
        .collapse_body {
 
          background-color: #fff;
 
          position: relative;
 
          height: 0;
 
          overflow: hidden;
 
          -webkit-transition-timing-function: ease;
 
          -o-transition-timing-function: ease;
 
          transition-timing-function: ease;
 
          -webkit-transition-duration: .35s;
 
          -o-transition-duration: .35s;
 
          transition-duration: .35s;
 
          -webkit-transition-property: height, visibility;
 
          -o-transition-property: height, visibility;
 
          transition-property: height, visibility
 
        }
 
        .collapse_content {
 
          font-size: 20px;
 
          border-top: 1px solid #ddd;
 
          background-color: #fff;
 
          padding: 15px;
 
        }
 
    </style>
 
 
</head>
 
</head>
  
 
<body>
 
<body>
    <!-- 导航栏 -->
+
  <!-- 导航栏 -->
    <nav class="daohang">
+
  <nav class="daohang">
        <a href="https://2018.igem.org/Team:HZAU-China"><img src="https://static.igem.org/mediawiki/2018/7/75/T--HZAU-China--logo-nav.png"
+
    <a href="https://2018.igem.org/Team:HZAU-China"><img src="https://static.igem.org/mediawiki/2018/7/75/T--HZAU-China--logo-nav.png"
                class="logo-daohang"></a>
+
        class="logo-daohang"></a>
        <ul class="caidan">
+
    <ul class="caidan">
            <li class="hiLight shortName">
+
      <li class="hiLight shortName">
                <a class="nav_head" href="https://2018.igem.org/Team:HZAU-China">
+
        <a class="nav_head" href="https://2018.igem.org/Team:HZAU-China">
                    <span>Project</span>
+
          <span>Project</span>
                    <span class="xsjPic"></span>
+
          <span class="xsjPic"></span>
                </a>
+
        </a>
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Description">Description</a>
+
        <a class="item" href="https://2018.igem.org/Team:HZAU-China/Description">Description</a>
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Design">Design</a>
+
        <a class="item" href="https://2018.igem.org/Team:HZAU-China/Design">Design</a>
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Results">Results</a>
+
        <a class="item" href="https://2018.igem.org/Team:HZAU-China/Results">Results</a>
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Demonstrate">Demonstrate</a>
+
        <a class="item" href="https://2018.igem.org/Team:HZAU-China/Demonstrate">Demonstrate</a>
            </li>
+
      </li>
            <li class="hiLight shortName">
+
      <li class="hiLight shortName">
                <a class="nav_head" href="#">
+
        <a class="nav_head" href="#">
                    <span>Wetlab</span>
+
          <span>Wetlab</span>
                    <span class="xjtPic"></span>
+
          <span class="xjtPic"></span>
                </a>
+
        </a>
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Experiments">Experiments</a>
+
        <a class="item" href="https://2018.igem.org/Team:HZAU-China/Experiments">Experiments</a>
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Improve">Improve</a>
+
        <a class="item" href="https://2018.igem.org/Team:HZAU-China/Improve">Improve</a>
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/InterLab">InterLab</a>
+
        <a class="item" href="https://2018.igem.org/Team:HZAU-China/InterLab">InterLab</a>
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Notebook">Notebook</a>
+
        <a class="item" href="https://2018.igem.org/Team:HZAU-China/Notebook">Notebook</a>
  
            </li>
+
      </li>
            <li class="hiLight shortName">
+
      <li class="hiLight shortName">
                <a class="nav_head" href="#">
+
        <a class="nav_head" href="#">
                    <span>Drylab</span>
+
          <span>Drylab</span>
                    <span class="xjtPic"></span>
+
          <span class="xjtPic"></span>
                </a>
+
        </a>
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Model">Model</a>
+
        <a class="item" href="https://2018.igem.org/Team:HZAU-China/Model">Model</a>
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Software">Software</a>
+
        <a class="item" href="https://2018.igem.org/Team:HZAU-China/Software">Software</a>
            </li>
+
      </li>
            <li class="hiLight longName">
+
      <li class="hiLight longName">
                <a class="nav_head" href="#">
+
        <a class="nav_head" href="#">
                    <span>Human&nbsp;Practices</span>
+
          <span>Human&nbsp;Practices</span>
                    <span class="xjtPic"></span>
+
          <span class="xjtPic"></span>
                </a>
+
        </a>
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Safety">Safety</a>
+
        <a class="item" href="https://2018.igem.org/Team:HZAU-China/Safety">Safety</a>
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Human_Practices">Human Practices</a>
+
        <a class="item" href="https://2018.igem.org/Team:HZAU-China/Human_Practices">Human Practices</a>
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Public_Engagement">Public Engagement</a>
+
        <a class="item" href="https://2018.igem.org/Team:HZAU-China/Public_Engagement">Public Engagement</a>
            </li>
+
      </li>
            <li class="hiLight shortName">
+
      <li class="hiLight shortName">
                <a class="nav_head" href="#">
+
        <a class="nav_head" href="#">
                    <span>About Us</span>
+
          <span>About Us</span>
                    <span class="xjtPic"></span>
+
          <span class="xjtPic"></span>
                </a>
+
        </a>
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Team">Team</a>
+
        <a class="item" href="https://2018.igem.org/Team:HZAU-China/Team">Team</a>
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Attributions">Attributions</a>
+
        <a class="item" href="https://2018.igem.org/Team:HZAU-China/Attributions">Attributions</a>
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Collaborations">Collaborations</a>
+
        <a class="item" href="https://2018.igem.org/Team:HZAU-China/Collaborations">Collaborations</a>
            </li>
+
      </li>
            <li class="hiLight shortName">
+
      <li class="hiLight shortName">
                <a class="nav_head" href="#">
+
        <a class="nav_head" href="#">
                    <span>Parts</span>
+
          <span>Parts</span>
                    <span class="xjtPic"></span>
+
          <span class="xjtPic"></span>
                </a>
+
        </a>
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Basic_Part">Basic</a>
+
        <a class="item" href="https://2018.igem.org/Team:HZAU-China/Basic_Part">Basic</a>
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Composite_Part">Composite</a>
+
        <a class="item" href="https://2018.igem.org/Team:HZAU-China/Composite_Part">Composite</a>
            </li>
+
      </li>
        </ul>
+
    </ul>
        <div class="shade"></div>
+
    <div class="shade"></div>
    </nav>
+
  </nav>
    <!-- 内容 -->
+
  <!-- 内容 -->
    <div class="neirong clearfix">
+
  <div class="neirong clearfix">
        <!-- 正文 -->
+
    <!-- 正文 -->
        <div class="zhengwen">
+
    <div class="zhengwen">
            <div id="float01" class="cur">
+
                <div class="h1">N-terminal of Gasdermin D (1-275aa)</div>
+
                <p>Pyroptosis is a form of lytic programmed cell death with inflammation. Recent studies reported that
+
                    the N-terminal of Gasdermin D (pore-forming domain) acts as an effector of pyroptosis. Full length
+
                    Gasdermin D is cleaved by Caspase 1 then release the PFD (pore-forming domain) which can
+
                    oligomerize on the cell membrane. Formation of pores causes cell swelling, rupturing of the
+
                    membrane and the massive leakage of cytosolic contents<sup>1</sup>.</p>
+
                <div class="h2">The N-terminal of GSDMD execute the function of pyroptosis in cells</div>
+
                <p>We respectively fused eGFP with GSDMD-N275 and GSDMD FL (full length). Then these plasmids were
+
                    transfected into Hela GSDMD KO cell. Microscopy of cells transfecting GSDMD-N275 undergoing
+
                    pyroptosis, but GSDMD full length did not induce pyroptosis (Figure 1). We also tested the cell
+
                    viability through ATP assay (CellTiter-Glo® Luminescent Cell Viability Assay) and demonstrated that
+
                    GSDMD-N275 and mutants of GSDMD FL had different ability to induce pyroptosis (Figure 2).</p>
+
                <div style="width: 40%; margin: 30px auto">
+
                    <img src="https://static.igem.org/mediawiki/2018/3/38/T--HZAU-China--interlab01.png" width=100% alt="">
+
                </div>
+
                <p>Figure 1. pCS2-eGFP-GSDMD FL(left), pCS2-eGFP-GSDMD-N275(right) were transfected respectively into
+
                    Hela G¬SDMD KO cells. Pyroptotic cells are pointed by red arrow.</p>
+
                <div class="collapseDiv">
+
                    <label for="zhedie-toggle1">Method</label>
+
                    <input type="checkbox" id="zhedie-toggle1" />
+
                    <div id="zhedie1" class="text-success text-left">
+
                        <b>Preparation of Cells for transfection</b><br>
+
                        1. Grow Hela GSDMD KO cells in a humidified 37 °C, 5% CO<sub>2</sub> tissue-culture
+
                        incubator.<br>
+
                        2. Count the cells using a hemocytometer. Seed in 24-well (5 × 10^4 per well) and grow.<br>
+
                        <b>Transfection</b><br>
+
                        1. Dilute 0.5 μg DNA into 50 μl jetPRIME® buffer (supplied). Mix by vortexing.<br>
+
                        2. Add 1 μl jetPRIME®, vortex for 10 s, spin down briefly.<br>
+
                        3. Incubate for 10 min at RT.<br>
+
                        4. Add 50μl of transfection mix per well drop wise onto the cells in serum containing
+
                        medium, and distribute evenly.<br>
+
                        5. Gently rock the plates back and forth and from side to side.<br>
+
                        6. If needed, replace transfection medium after 4 h by cell growth medium and return the
+
                        plates to the incubator.<br>
+
                        Observation is taken after 1.5 h<br><br>
+
                    </div>
+
                </div>
+
                <div style="width: 50%; margin: 30px auto">
+
                    <img src="https://static.igem.org/mediawiki/2018/f/f5/T--HZAU-China--basicPart2.png" width=100% alt="">
+
                </div>
+
                <p>Figure 2. pCS2-Flag-GSDMD FL, pCS2-Flag-GSDMD-N275, pCS2-Flag-GSDMD L290D, pCS2-Flag-GSDMD Y373,
+
                    pCS2-Flag-GSDMD A377D were transfected respectively into 293T cells. ATP-based cell viability was
+
                    measured (n=6).</p>
+
                <div class="collapseDiv">
+
                    <label for="zhedie-toggle2">Method</label>
+
                    <input type="checkbox" id="zhedie-toggle2" />
+
                    <div id="zhedie2" class="text-success text-left">
+
                        <b>Preparation of Cells for Infection</b><br>
+
                        1. Grow Hela GSDMD KO cells in a humidified 37 °C, 5% CO<sub>2</sub> tissue-culture
+
                        incubator.<br>
+
                        2. Count the cells using a hemocytometer. Seed in 24-well (9× 10^4 per well) and grow
+
                        overnight.<br>
+
                        <b>Preparation of Bacteria</b><br>
+
                        1. Grow bacteria overnight 16 h in 2 mL LB in a 15-mL tube. Incubate at 37 °C in a shaking
+
                        incubator (200 rpm).<br>
+
                        2. Subculture bacteria by transferring 300 μL of the overnight culture into 5 mL of LB in a
+
                        loosely capped 50-mL tube. Incubate at 37 °C in a shaking incubator (200 rpm) to late log
+
                        phase.<br>
+
                        3. Pellet 1 mL of the Salmonella subculture by centrifugation at 1000 g in a microfuge for
+
                        2 min at room temperature.<br>
+
                        4. Remove 900 μL of supernatant and gently resuspend the pellet in 900 μL PBS.<br>
+
                        <b>Infection</b><br>
+
                        1. Aspirate media and rinse the monolayer twice with PBS.<br>
+
                        2. Inoculate cells with bacteria (MOI = 100) by adding bacteria directly to the
+
                        cell-culture supernatant.<br>
+
                        3. Incubate for 3 h at 37 °C in 5% CO<sub>2</sub>.<br>
+
                        4. Aspirate media and rinse the monolayer twice with PBS.<br>
+
                        5. Add fresh GM containing 100 μg/mL gentamicin and incubate at 37 °C in 5% CO<sub>2</sub>.<br>
+
                        Observation is taken after 2 h.<br><br>
+
  
                    </div>
+
      <p>All fear comes from the unknown. We live in a world where advanced science and high technology keep making
                </div>
+
        progress. It is also a world where we all live under asymmetric information from time to time. The asymmetric
                <div class="h2">The N-terminal of GSDMD lyses bacteria</div>
+
        information, which in our case mostly means professional knowledge, is causing inappropriate panic towards
                <p>Expression of the N terminal of GSDMD fused with eGFP (eGFP-GSDMD-N275) was under the control of P<sub>tet</sub>
+
        emerging fields like AI and GMO among the public, some even believe the world would end if we keep developing
                    in Δ<i>sifA</i> SL1344.
+
        such technologies. Fear and doubt can be good things which lead us to think profoundly, but also harmful if
                    The colony-forming unit (CFU) was measured for counting the number of viable bacteria (Figure 3).
+
        we refuse to think objectively. We thought that everyone could make better decisions with more information or
                    This result shows that eGFP-GSDMD-N275 exhibits cytotoxicity in bacteria.</p>
+
        knowledge, however, we also learned that the ability to comprehend new information decreases with age. So,
                <div style="width: 30%; margin: 30px auto">
+
        combining our 2018 project, we decided to offer a little help to those who needs cancer-related information
                    <img src="https://static.igem.org/mediawiki/2018/f/fb/T--HZAU-China--basicPart3.jpg" width=100% alt="">
+
        with a more lucid way to express, and we wanted to answer their questions in person for the best effects. We
                </div>
+
        believe if anyone could be the communicating bridge between the public and advanced science, is we college
                <p>Figure 3. In each group, ATc (16μg/ml) was added into medium when bacteria grown to logarithmic
+
        students, since we have the right resource, the right cause and enthusiasm.</p>
                    phase (OD = 0.6~0.8). Vector refers to bacteria containing a high copy number plasmid which only
+
                    expresses TetR under the control of P<sub>tet</sub>. Bacterial colony-forming units (CFU) for
+
                    vector and eGFP-GSDMD-N275 are shown in the logarithmic form (log10) (n=3). </p>
+
                <div class="collapseDiv">
+
                    <label for="zhedie-toggle3">Method</label>
+
                    <input type="checkbox" id="zhedie-toggle3" />
+
                    <div id="zhedie3" class="text-success text-left">
+
                        1. Cell are cultured overnight in LB broth containing corresponding antibiotics, and
+
                        dilute each 1 volume overnight cultures with 100 volume fresh LB containing antibiotics.
+
                        Culture in 37℃ 200 rpm.<br>
+
                        2. When OD reaching to 0.6-0.8, add anhydrotetracycline with final concentration of
+
                        μg/ml to induce the expression of EGFP-GSDMD-N275.<br>
+
                        3. Take 100 μl diluted culture to plate on LB agar plates containing appropriate
+
                        concentration of antibody after 1.5 hours of induce.<br>
+
                        Observation is taken overnight.<br><br>
+
                    </div>
+
                </div>
+
                <div class="h2">The N-terminal of GSDMD from lytic bacteria induce cell pyroptosis.</div>
+
                <p>Expression of the N-terminal of GSDMD fused with eGFP (eGFP-GSDMD-N275) was under the control of Tet
+
                    promoter in Δ<i>sifA</i> SL1344. Hela GSDMD KO cell line were infected with ΔsifA SL1344. Inducer
+
                    ATc
+
                    (16μg/mL) were added after 3 h infection. Microscopy showed that eGFP-GSDMD-N275 located in
+
                    cytoplasm after 5 min of induction and trigger pyroptosis after 30 min of induction (Figure 4).
+
                    After 1.5 h of induction, Hela GSDMD KO cells undergo second necrosis caused by bacterial infection
+
                    without inducer. Morphology of this process is similar to pyroptosis<sup>2</sup>. Thus, these
+
                    population of
+
                    ruptured cells were counted. There are two folds change between control group and induced group
+
                    (Figure 5). So ruptured cells in induced group were triggered pyroptosis by eGFP-GSDMD-N275 but not
+
                    by bacterial infection.</p>
+
                <div style="width: 90%; margin: 0 auto">
+
                    <img src="https://static.igem.org/mediawiki/2018/b/b3/T--HZAU-China--basicPart4.png" width=100% alt="">
+
                </div>
+
                <p>Figure 4. Hela GSDMD KO cell line were infected with ΔsifA SL1344 containing high copy number
+
                    plasmids which express eGFP-GSDMD-N275 under the control of ATc. Photos were captured after 5 min
+
                    of induction. </p>
+
                <div style="width: 50%; margin: 0 auto">
+
                    <img src="https://static.igem.org/mediawiki/2018/2/22/T--HZAU-China--basicPart5.png" width=100% alt="">
+
                </div>
+
                <p>Figure 5. Ruptured cells in a field of view were counted.</p>
+
                <div class="collapseDiv">
+
                    <label for="zhedie-toggle4">Method</label>
+
                    <input type="checkbox" id="zhedie-toggle4" />
+
                    <div id="zhedie4" class="text-success text-left">
+
                        <b>Preparation of Cells for Infection</b><br>
+
                        1. Grow Hela GSDMD KO cells in a humidified 37 °C, 5% CO<sub>2</sub> tissue-culture
+
                        incubator.<br>
+
                        2. Count the cells using a hemocytometer. Seed in 24-well (5 × 10^4 per well) and grow
+
                        overnight.<br>
+
                        <b>Preparation of Bacteria</b><br>
+
                        1. Grow bacteria overnight 16 h in 2 mL LB in a 15-mL tube. Incubate at 37 °C in a shaking
+
                        incubator (200 rpm).<br>
+
                        2. Subculture bacteria by transferring 300 μL of the overnight culture into 5 mL of LB in a
+
                        loosely capped 50-mL tube. Incubate at 37 °C in a shaking incubator (200 rpm) to late log
+
                        phase.<br>
+
                        3. Pellet 1 mL of the Salmonella subculture by centrifugation at 1000 g in a microfuge for
+
                        2 min at room temperature.<br>
+
                        4. Remove 900 μL of supernatant and gently resuspend the pellet in 900 μL PBS.<br>
+
                        <b>Infection</b><br>
+
                        1. Aspirate media and rinse the monolayer twice with PBS.<br>
+
                        2. Inoculate cells with bacteria (MOI = 100) by adding bacteria directly to the
+
                        cell-culture supernatant.<br>
+
                        3. Incubate for 2 h at 37 °C in 5% CO<sub>2</sub>.<br>
+
                        4. Aspirate media and wash.<br>
+
                        5. Add fresh GM containing 100 μg/mL gentamicin and 16 μg/mL incubate at 37 °C in 5% CO<sub>2</sub>.<br>
+
                        Observation is taken after 5 min, 30 min, 1.5 h.<br><br>
+
  
                    </div>
+
      <div style="width: 40%; margin: 30px auto">
                </div>
+
        <img src="https://static.igem.org/mediawiki/2018/2/2c/T--HZAU-China--pbhp1.png" width=100% alt="">
            </div>
+
      </div>
            <div id="float02">
+
      <div id="float01" class="cur">
                <div class="h1">Basic Part Table</div>
+
        <div class="h1">Public Survey</div>
                <div style="width: 85%; margin: 30px auto">
+
        <p>To acquire a detailed understanding about the public attitude towards our project,a questionnaire was
                    <table class="table table-bordered table-hover">
+
          designed based on two documents (see also <a href="https://2018.igem.org/Team:HZAU-China/Safety">Safety</a>
                        <thead>
+
          for more information). The questionnaire was spread through
                            <th>Name</th>
+
          Internet, a total of 1036 pieces were received.</p>
                            <th>Type</th>
+
      </div>
                            <th>Description</th>
+
      <div id="float02">
                            <th>Designer</th>
+
        <div class="h1">The Report</div>
                            <th>Length(bp)</th>
+
                            </tr>
+
                        </thead>
+
                        <tbody>
+
                            <tr>
+
                                <td><a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K2632002">BBa_K2632002</a></td>
+
                                <td>Promoter</td>
+
                                <td>Promoter sifA</td>
+
                                <td>Mo Qiqin</td>
+
                                <td>331</td>
+
                            </tr>
+
                            <tr>
+
                                <td><a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K2632003">BBa_K2632003</a></td>
+
                                <td>Coding</td>
+
                                <td>N-terminal of GasderminD (1-275aa)</td>
+
                                <td>Zhujun Xia</td>
+
                                <td>825</td>
+
                            </tr>
+
                            <tr>
+
                                <td><a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K2632004">BBa_K2632004</a></td>
+
                                <td>Coding</td>
+
                                <td>Full length Gasdermin D</td>
+
                                <td>Zhujun Xia</td>
+
                                <td>1455</td>
+
                            </tr>
+
                            <tr>
+
                                <td><a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K2632005">BBa_K2632005</a></td>
+
                                <td>Coding</td>
+
                                <td>L290D mutant of full length Gasdermin D</td>
+
                                <td>Zhujun Xia</td>
+
                                <td>1455</td>
+
                            </tr>
+
                            <tr>
+
                                <td><a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K2632007">BBa_K2632007</a></td>
+
                                <td>Coding</td>
+
                                <td>A377D mutant of full length Gasdermin D.</td>
+
                                <td>Zhujun Xia</td>
+
                                <td>1455</td>
+
                            </tr>
+
                        </tbody>
+
                    </table>
+
                </div>
+
  
 +
        <p>1. 26.2 % people we inquired are afraid of cancer, while more people worry about cancer occasionally with
 +
          fear reduces over time. Some do not care about cancer and think it will not appear around. Overall, a large
 +
          proportion (73.8%) do not panic about cancer.
 +
        </p>
 +
        <div style="width: 70%; margin: 30px auto">
 +
          <img src="https://static.igem.org/mediawiki/2018/2/21/T--HZAU-China--ans1.png" width=100% alt="">
 +
        </div>
 +
        <p> 2. Nowadays, government propaganda and media reports have reduced people's fear of cancer. Regardless of
 +
          the diverse resources of data,only about 40% people felt quite fearful about cancer.
 +
        </p>
  
                <div class="h1">Reference</div>
+
        <div style="margin: 20px 0;" class="row">
                <p>1 Ding, J. et al. Pore-forming activity and structural autoinhibition of the gasdermin family.
+
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                    Nature 535, 111-116, doi:10.1038/nature18590 (2016).</p>
+
            <img src="https://static.igem.org/mediawiki/2018/5/5d/T--HZAU-China--ans2-Friends.png" width=100% alt="">
                <p style="padding-bottom:25px;">
+
          </div>
                    2 He, W. T. et al. Gasdermin D is an executor of pyroptosis and required for interleukin-1beta
+
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                    secretion. Cell research 25, 1285-1298, doi:10.1038/cr.2015.139 (2015).
+
            <img src="https://static.igem.org/mediawiki/2018/a/a6/T--HZAU-China--ans2-OfficialMedia.png" width=100% alt="">
                </p>
+
          </div>
 +
        </div>
 +
        <div style="margin: 20px 0;" class="row">
 +
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
 +
            <img src="https://static.igem.org/mediawiki/2018/9/9e/T--HZAU-China--ans2-ResearchPaper.png" width=100% alt="">
 +
          </div>
 +
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
 +
            <img src="https://static.igem.org/mediawiki/2018/4/45/T--HZAU-China--ans2-SocialMedia.png" width=100% alt="">
 +
          </div>
 +
        </div>
  
            </div>
+
 
 +
        <p> 3. 70% people are fearful of cancer because of the high mortality rate and the pain of losing their loved
 +
          ones. But in contrast, the high cost of treatments is not the largest fear for them.
 +
        </p>
 +
        <div style="width: 70%; margin: 30px auto">
 +
          <img src="https://static.igem.org/mediawiki/2018/7/7a/T--HZAU-China--ans3.png" width=100% alt="">
 
         </div>
 
         </div>
         <!-- 侧边 -->
+
         <p> 4. Most people learn about cancer mainly by WeChat Moments and subscriptions, some by communicating with
        <div class="cebian">
+
          friends and families.
            <!-- 滚动菜单栏 -->
+
        </p>
            <div class="daohangyi">
+
        <div style="width: 70%; margin: 30px auto">
                <span class="biaoti">Basic Part</span>
+
          <img src="https://static.igem.org/mediawiki/2018/9/9b/T--HZAU-China--ans4.png" width=100% alt="">
                <span class="xsjPic"><img src="https://static.igem.org/mediawiki/2018/8/8d/T--HZAU-China--xjt.svg" alt=""></span>
+
            </div>
+
            <div class="floatCtro">
+
                <p class="daohanger">N-terminal of Gasdermin D</p>
+
                <!-- <p></p> -->
+
                <p class="daohanger">Basic Part Table</p>
+
                <a>
+
                    <span>Back&nbsp;to&nbsp;Top</span>
+
                </a>
+
            </div>
+
            <a class="daohangyi" href="https://2018.igem.org/Team:HZAU-China/Composite_Part">
+
                <span class="biaoti">Composite Part</span>
+
                <span class="xsjPic"><img src="https://static.igem.org/mediawiki/2018/7/7c/T--HZAU-China--ysj.svg" alt=""></span>
+
            </a>
+
            <!-- 滚动菜单栏 -->
+
 
         </div>
 
         </div>
 +
        <p> 5. According to the means people learn about cancer, those who collect information by communicating with
 +
          friends or families are easier to feel scared of cancer while those who get professional information from
 +
          scientific papers hardly feel so.
 +
        </p>
 +
 +
 +
        <div style="margin: 20px 0;" class="row">
 +
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
 +
            <img src="https://static.igem.org/mediawiki/2018/8/8f/T--HZAU-China--ans5-mid-Age.png" width=100% alt="">
 +
          </div>
 +
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
 +
            <img src="https://static.igem.org/mediawiki/2018/7/79/T--HZAU-China--ans5-senior.png" width=100% alt="">
 +
          </div>
 +
        </div>
 +
        <div style="margin: 20px 0;" class="row">
 +
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
 +
            <img src="https://static.igem.org/mediawiki/2018/d/d0/T--HZAU-China--ans5-teens.png" width=100% alt="">
 +
          </div>
 +
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
 +
            <img src="https://static.igem.org/mediawiki/2018/3/33/T--HZAU-China--ans5-youths.png" width=100% alt="">
 +
          </div>
 +
        </div>
 +
 +
 +
        <p> 6. In terms of age, middle-aged participants feel more panic about cancer while the youth fear less.
 +
        </p>
 +
 +
 +
 +
        <div style="margin: 20px 0;" class="row">
 +
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
 +
            <img src="https://static.igem.org/mediawiki/2018/e/eb/T--HZAU-China--ans6-mid-Age.png" width=100% alt="">
 +
          </div>
 +
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
 +
            <img src="https://static.igem.org/mediawiki/2018/3/32/T--HZAU-China--ans6-senior.png" width=100% alt="">
 +
          </div>
 +
        </div>
 +
        <div style="margin: 20px 0;" class="row">
 +
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
 +
            <img src="https://static.igem.org/mediawiki/2018/2/2a/T--HZAU-China--ans6-teens.png" width=100% alt="">
 +
          </div>
 +
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
 +
            <img src="https://static.igem.org/mediawiki/2018/4/43/T--HZAU-China--ans6-youths.png" width=100% alt="">
 +
          </div>
 +
        </div>
 +
 +
 +
        <p> 7. People who are not engaged in biological or medical fields are easier to get panic about cancer.
 +
        </p>
 +
 +
 +
        <div style="margin: 20px 0;" class="row">
 +
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
 +
            <img src="https://static.igem.org/mediawiki/2018/6/6c/T--HZAU-China--ans7-Affirmative.png" width=100% alt="">
 +
          </div>
 +
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
 +
            <img src="https://static.igem.org/mediawiki/2018/e/e2/T--HZAU-China--ans7-Negative.png" width=100% alt="">
 +
          </div>
 +
        </div>
 +
 +
 +
        <p> 8. The majority of those who learn about cancer mainly by chatting with others, generally show ignorance or
 +
          disappointment about China’s current anticarcinogen developing speed.
 +
        </p>
 +
        <div style="width: 70%; margin: 30px auto">
 +
          <img src="https://static.igem.org/mediawiki/2018/0/07/T--HZAU-China--ans8.png" width=100% alt="">
 +
        </div>
 +
        <p> 9. 55% respondents showed ignorance or disappointment about China’s anticarcinogen developing speed. What’s
 +
          more, all of those who expressed firm opposition to the Salmonella targeting method belong to that 55%.
 +
        </p>
 +
        <div style="width: 70%; margin: 30px auto">
 +
          <img src="https://static.igem.org/mediawiki/2018/2/22/T--HZAU-China--ans9.png" width=100% alt="">
 +
        </div>
 +
        <p> 10. Many participants actually hold the expectation to the Salmonella curing idea. The strongest hope was
 +
          to avoid healthy tissue damages, the second was the clearance of Salmonella to avoid infection.
 +
        </p>
 +
        <div style="width: 70%; margin: 30px auto">
 +
          <img src="https://static.igem.org/mediawiki/2018/e/ee/T--HZAU-China--ans10.png" width=100% alt="">
 +
        </div>
 +
        <p> 11. From the result, 92.1% people felt a professional platform in which they can obtain specialized
 +
          knowledge could help them reduce their worries about new technologies. This is also from where we learned
 +
          that the idea of a science blog may actually has its market.
 +
        </p>
 +
        <div style="width: 70%; margin: 30px auto">
 +
          <img src="https://static.igem.org/mediawiki/2018/2/27/T--HZAU-China--ans11.png" width=100% alt="">
 +
        </div>
 +
      </div>
 +
      <div id="float03">
 +
        <div class="h1">Presentation to New Students</div>
 +
        <p>At the beginning of this new school year, we gave a presentation to the newly enrolled students of
 +
          Department Life Science and Technology, and Bioinformatics. The aim was to increase their interests in life
 +
          science, provide them with basic knowledge of synthetic biology, and introduce our projects to them. The
 +
          presentation was broadcasted live through Internet <a href="https://www.bilibili.com/video/av16790939?from=search&seid=1493964311653912183"></a>
 +
          video
 +
          , comments and attentions are
 +
          both acquired</p>
 +
 +
 +
        <div style="margin: 20px 0;" class="row">
 +
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
 +
            <img style="border:8px solid #E0CCAE; box-shadow: 0 1px 3px #676767; " src="https://static.igem.org/mediawiki/2018/1/12/T--HZAU-China--sky1.jpeg"
 +
              width=100% alt="">
 +
          </div>
 +
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
 +
            <img style="border:8px solid #E0CCAE; box-shadow: 0 1px 3px #676767; " src="https://static.igem.org/mediawiki/2018/2/25/T--HZAU-China--sky2.jpeg"
 +
              width=100% alt="">
 +
          </div>
 +
        </div>
 +
 +
 +
 +
      </div>
 +
      <div id="float04">
 +
        <div class="h1"><a href="https://wang-shuguang.github.io/">Science Blog</a></div>
 +
        <p>In analyzing the information obtained from the questionnaires and presentation feedbacks, we believed that
 +
          establishing a science blog about cancer by college students can be both insightful and practical. Our blog
 +
          includes three sections: a brief introduction of cancer, cancer treatments, and basic aspects of synthetic
 +
          biology. We kept answering the questions in the comment area, and we truly hope that one day, this idea will
 +
          spread, when college students could be organized systematically in order to help people with the answers that
 +
          couldn’t be acquired by simply searching keywords. </p>
 +
 +
        <div style="margin: 20px 0;" class="row">
 +
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
 +
            <img src="https://static.igem.org/mediawiki/2018/9/9a/T--HZAU-China--public1.png" width=100% alt="">
 +
          </div>
 +
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
 +
            <img src="https://static.igem.org/mediawiki/2018/e/e9/T--HZAU-China--public2.png" width=100% alt="">
 +
          </div>
 +
 +
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
 +
            <img src="https://static.igem.org/mediawiki/2018/a/a9/T--HZAU-China--public3.png" width=100% alt="">
 +
          </div>
 +
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
 +
            <img src="https://static.igem.org/mediawiki/2018/3/3d/T--HZAU-China--public4.png" width=100% alt="">
 +
          </div>
 +
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
 +
            <img src="https://static.igem.org/mediawiki/2018/5/50/T--HZAU-China--public6.png" width=100% alt="">
 +
          </div>
 +
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
 +
            <img src="https://static.igem.org/mediawiki/2018/9/99/T--HZAU-China--public5.png" width=100% alt="">
 +
          </div>
 +
 +
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
 +
            <img src="https://static.igem.org/mediawiki/2018/5/5a/T--HZAU-China--public7.png" width=100% alt="">
 +
          </div>
 +
        </div>
 +
 +
        <div style="width: 100%; margin: 30px auto">
 +
          <img src="https://static.igem.org/mediawiki/2018/a/ad/T--HZAU-China--pbhp2.png" width=100% alt="">
 +
        </div>
 +
      </div>
 +
 
     </div>
 
     </div>
  
     <!-- 滚动菜单栏jQuery -->
+
     <!-- 侧边 -->
     <script src="jquery.js" type="text/javascript"></script>
+
     <div class="cebian">
    <script>
+
      <!-- 滚动菜单栏 -->
         $(function () {
+
      <a class="daohangyi" href="https://2018.igem.org/Team:HZAU-China/Safty">
            var AllHet = $(window).height();
+
        <span class="biaoti">Safty</span>
            var mainHet = $('.floatCtro').height();
+
         <span class="xsjPic"><img src="https://static.igem.org/mediawiki/2018/7/7c/T--HZAU-China--ysj.svg" alt=""></span>
            var fixedTop = (AllHet - mainHet) / 2
+
      </a>
            // $('div.floatCtro').css({top:fixedTop+'px'});
+
      <a class="daohangyi" href="https://2018.igem.org/Team:HZAU-China/Human_Practices">
            $('div.floatCtro p').click(function () {
+
        <span class="biaoti">Human Practices</span>
                var ind = $('div.floatCtro p').index(this) + 1;
+
        <span class="xsjPic"><img src="https://static.igem.org/mediawiki/2018/7/7c/T--HZAU-China--ysj.svg" alt=""></span>
                var topVal = $('#float0' + ind).offset().top;
+
      </a>
                $('body,html').animate({ scrollTop: topVal }, 1000)
+
      <div class="daohangyi">
            })
+
        <span class="biaoti">Public Engagement</span>
            $('div.floatCtro a').click(function () {
+
        <span class="xsjPic"><img src="https://static.igem.org/mediawiki/2018/8/8d/T--HZAU-China--xjt.svg" alt=""></span>
                $('body,html').animate({ scrollTop: 0 }, 1000)
+
      </div>
            })
+
      <div class="floatCtro">
            $(window).scroll(scrolls)
+
        <p class="daohanger">Public Survey</p>
            scrolls()
+
        <p class="daohanger">The Report</p>
            function scrolls() {
+
        <p class="daohanger">Presentation to New Students</p>
                var f1, f2, bck;
+
        <p class="daohanger">Science Blog</p>
                var fixRight = $('div.floatCtro p');
+
        <a>
                var blackTop = $('div.floatCtro a')
+
          <span>Back&nbsp;to&nbsp;Top</span>
                var sTop = $(window).scrollTop();
+
        </a>
                fl = $('#float01').offset().top;
+
      </div>
                f2 = $('#float02').offset().top;
+
      <div class="daohangyi" style="height:20px">
 +
      </div>
 +
      <!-- 滚动菜单栏 -->
 +
    </div>
 +
  </div>
  
                if (sTop <= f2 - 100) {
+
  <!-- 滚动菜单栏jQuery -->
                    blackTop.fadeOut(300).css('display', 'none')
+
  <script src="jquery.js" type="text/javascript"></script>
                }
+
  <script>
                else {
+
    $(function () {
                    blackTop.fadeIn(300).css('display', 'block')
+
      var AllHet = $(window).height();
                }
+
      var mainHet = $('.floatCtro').height();
 +
      var fixedTop = (AllHet - mainHet) / 2
 +
      //  $('div.floatCtro').css({top:fixedTop+'px'});
 +
      $('div.floatCtro p').click(function () {
 +
        var ind = $('div.floatCtro p').index(this) + 1;
 +
        var topVal = $('#float0' + ind).offset().top;
 +
        $('body,html').animate({ scrollTop: topVal }, 1000)
 +
      })
 +
      $('div.floatCtro a').click(function () {
 +
        $('body,html').animate({ scrollTop: 0 }, 1000)
 +
      })
 +
      $(window).scroll(scrolls)
 +
      scrolls()
 +
      function scrolls() {
 +
        var f1, f2, f3, f4, bck;
 +
        var fixRight = $('div.floatCtro p');
 +
        var blackTop = $('div.floatCtro a')
 +
        var sTop = $(window).scrollTop();
 +
        fl = $('#float01').offset().top;
 +
        f2 = $('#float02').offset().top;
 +
        f3 = $('#float03').offset().top;
 +
        f4 = $('#float04').offset().top;
  
                if (sTop >= fl) {
+
        if (sTop <= f2 - 100) {
                    fixRight.eq(0).addClass('cur').siblings().removeClass('cur');
+
          blackTop.fadeOut(300).css('display', 'none')
                }
+
        }
                if (sTop >= f2 - 100) {
+
        else {
                    fixRight.eq(1).addClass('cur').siblings().removeClass('cur');
+
          blackTop.fadeIn(300).css('display', 'block')
                }
+
        }
 +
 
 +
        if (sTop >= fl) {
 +
          fixRight.eq(0).addClass('cur').siblings().removeClass('cur');
 +
        }
 +
        if (sTop >= f2 - 100) {
 +
          fixRight.eq(1).addClass('cur').siblings().removeClass('cur');
 +
        }
 +
        if (sTop >= f3 - 100) {
 +
          fixRight.eq(2).addClass('cur').siblings().removeClass('cur');
 +
        }
 +
        if (sTop >= f4 - 100) {
 +
          fixRight.eq(3).addClass('cur').siblings().removeClass('cur');
 +
        }
  
            }
+
      }
        })
+
    })
    </script>
+
  </script>
    <!-- 滚动菜单栏jQuery -->
+
  <!-- 滚动菜单栏jQuery -->
  
 
</body>
 
</body>
  
 
</html>
 
</html>

Revision as of 01:10, 18 October 2018

All fear comes from the unknown. We live in a world where advanced science and high technology keep making progress. It is also a world where we all live under asymmetric information from time to time. The asymmetric information, which in our case mostly means professional knowledge, is causing inappropriate panic towards emerging fields like AI and GMO among the public, some even believe the world would end if we keep developing such technologies. Fear and doubt can be good things which lead us to think profoundly, but also harmful if we refuse to think objectively. We thought that everyone could make better decisions with more information or knowledge, however, we also learned that the ability to comprehend new information decreases with age. So, combining our 2018 project, we decided to offer a little help to those who needs cancer-related information with a more lucid way to express, and we wanted to answer their questions in person for the best effects. We believe if anyone could be the communicating bridge between the public and advanced science, is we college students, since we have the right resource, the right cause and enthusiasm.

Public Survey

To acquire a detailed understanding about the public attitude towards our project,a questionnaire was designed based on two documents (see also Safety for more information). The questionnaire was spread through Internet, a total of 1036 pieces were received.

The Report

1. 26.2 % people we inquired are afraid of cancer, while more people worry about cancer occasionally with fear reduces over time. Some do not care about cancer and think it will not appear around. Overall, a large proportion (73.8%) do not panic about cancer.

2. Nowadays, government propaganda and media reports have reduced people's fear of cancer. Regardless of the diverse resources of data,only about 40% people felt quite fearful about cancer.

3. 70% people are fearful of cancer because of the high mortality rate and the pain of losing their loved ones. But in contrast, the high cost of treatments is not the largest fear for them.

4. Most people learn about cancer mainly by WeChat Moments and subscriptions, some by communicating with friends and families.

5. According to the means people learn about cancer, those who collect information by communicating with friends or families are easier to feel scared of cancer while those who get professional information from scientific papers hardly feel so.

6. In terms of age, middle-aged participants feel more panic about cancer while the youth fear less.

7. People who are not engaged in biological or medical fields are easier to get panic about cancer.

8. The majority of those who learn about cancer mainly by chatting with others, generally show ignorance or disappointment about China’s current anticarcinogen developing speed.

9. 55% respondents showed ignorance or disappointment about China’s anticarcinogen developing speed. What’s more, all of those who expressed firm opposition to the Salmonella targeting method belong to that 55%.

10. Many participants actually hold the expectation to the Salmonella curing idea. The strongest hope was to avoid healthy tissue damages, the second was the clearance of Salmonella to avoid infection.

11. From the result, 92.1% people felt a professional platform in which they can obtain specialized knowledge could help them reduce their worries about new technologies. This is also from where we learned that the idea of a science blog may actually has its market.

Presentation to New Students

At the beginning of this new school year, we gave a presentation to the newly enrolled students of Department Life Science and Technology, and Bioinformatics. The aim was to increase their interests in life science, provide them with basic knowledge of synthetic biology, and introduce our projects to them. The presentation was broadcasted live through Internet video , comments and attentions are both acquired

In analyzing the information obtained from the questionnaires and presentation feedbacks, we believed that establishing a science blog about cancer by college students can be both insightful and practical. Our blog includes three sections: a brief introduction of cancer, cancer treatments, and basic aspects of synthetic biology. We kept answering the questions in the comment area, and we truly hope that one day, this idea will spread, when college students could be organized systematically in order to help people with the answers that couldn’t be acquired by simply searching keywords.

Safty Human Practices
Public Engagement

Public Survey

The Report

Presentation to New Students

Science Blog

Back to Top