Difference between revisions of "Team:TJUSLS China/Design"

Line 4: Line 4:
  
 
<head>
 
<head>
  <meta charset="UTF-8">
+
    <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://2019.igem.org/Team:TJUSLS_China/bootstrapmin400css?action=raw&ctype=text/css"
+
    <link rel="stylesheet" href="https://2019.igem.org/Team:TJUSLS_China/bootstrapmin400css?action=raw&ctype=text/css"
    type="text/css">
+
          type="text/css">
  <link rel="stylesheet" href="https://2019.igem.org/Team:TJUSLS_China/designstylecss?action=raw&ctype=text/css">
+
    <link rel="stylesheet" href="https://2019.igem.org/Team:TJUSLS_China/designstylecss?action=raw&ctype=text/css">
  <title>Design</title>
+
    <title>Design</title>
  <style>
+
    <style>
    body,
+
        body,
    html {
+
        html {
      margin: 0;
+
            margin: 0;
      padding: 0;
+
            padding: 0;
      font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important;
+
            font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important;
    }
+
        }
  
    /* 消除平台引起的 bug */
+
        /* 消除平台引起的 bug */
    #home_logo,
+
        #home_logo,
    #sideMenu,
+
        #sideMenu,
    #bars_item,
+
        #bars_item,
    #top_title {
+
        #top_title {
      display: none;
+
            display: none;
    }
+
        }
  
    #sideMenu,
+
        #sideMenu,
    #top_title,
+
        #top_title,
    .patrollink {
+
        .patrollink {
      display: none;
+
            display: none;
    }
+
        }
  
    #top_title {
+
        #top_title {
      display: none;
+
            display: none;
    }
+
        }
  
    #content {
+
        #content {
      margin: 0;
+
            margin: 0;
      padding: 0;
+
            padding: 0;
      width: 100%;
+
            width: 100%;
    }
+
        }
  
    img {
+
        img {
      margin: 0 auto;
+
            margin: 0 auto;
    }
+
        }
  
    .menuHolder * {
+
        .menuHolder * {
      box-sizing: content-box !important;
+
            box-sizing: content-box !important;
    }
+
        }
  
    .menuHolder {
+
        .menuHolder {
      width: 100px;
+
            width: 100px;
      height: 100px;
+
            height: 100px;
      margin: 0 0 250px 0;
+
            margin: 0 0 250px 0;
      position: relative;
+
            position: relative;
      z-index: 9;
+
            z-index: 9;
    }
+
        }
  
    .menuHolder {
+
        .menuHolder {
      position: fixed;
+
            position: fixed;
      top: 16px;
+
            top: 16px;
      /* top: 0; */
+
            /* top: 0; */
    }
+
        }
  
    .menuHolder ul {
+
        .menuHolder ul {
      padding: 0px;
+
            padding: 0px;
      margin: 0;
+
            margin: 0;
      list-style: none;
+
            list-style: none;
      position: absolute;
+
            position: absolute;
      left: 0;
+
            left: 0;
      top: 0;
+
            top: 0;
      width: 0;
+
            width: 0;
      height: 0;
+
            height: 0;
    }
+
        }
  
    /*.menuHolder ul li {border-radius:0 0 300px 0; width:0; height:0;}*/
+
        /*.menuHolder ul li {border-radius:0 0 300px 0; width:0; height:0;}*/
    .menuHolder ul.p1>li.s1>a {
+
        .menuHolder ul.p1>li.s1>a {
      background-color: #11253b !important;
+
            background-color: #11253b !important;
    }
+
        }
  
    .menuHolder ul li a {
+
        .menuHolder ul li a {
      color: #000;
+
            color: #000;
      text-decoration: none;
+
            text-decoration: none;
      font: bold 13px/30px arial, sans-serif;
+
            font: bold 13px/30px arial, sans-serif;
      text-align: center;
+
            text-align: center;
      box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.4);
+
            box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.4);
      transform-origin: 0 0;
+
            transform-origin: 0 0;
    }
+
        }
  
    .menuHolder ul.p1 li {
+
        .menuHolder ul.p1 li {
      position: absolute;
+
            position: absolute;
      left: 0;
+
            left: 0;
      top: 0;
+
            top: 0;
    }
+
        }
  
    .menuHolder ul.p2 {
+
        .menuHolder ul.p2 {
      z-index: -1;
+
            z-index: -1;
      transform: rotate(0deg) !important;
+
            transform: rotate(0deg) !important;
    }
+
        }
  
    .menuHolder ul.p3 {
+
        .menuHolder ul.p3 {
      z-index: -1;
+
            z-index: -1;
    }
+
        }
  
    /*画第一个圆圈*/
+
        /*画第一个圆圈*/
    .menuHolder li.s1>a {
+
        .menuHolder li.s1>a {
      position: absolute;
+
            position: absolute;
      display: block;
+
            display: block;
      width: 100px;
+
            width: 100px;
      height: 100px;
+
            height: 100px;
      background: #11253b;
+
            background: #11253b;
      border-radius: 0 0 100px 0;
+
            border-radius: 0 0 100px 0;
    }
+
        }
  
    /*画第二个圆圈*/
+
        /*画第二个圆圈*/
    .menuHolder li.s2>a {
+
        .menuHolder li.s2>a {
      position: absolute;
+
            position: absolute;
      display: block;
+
            display: block;
      width: 100px;
+
            width: 100px;
      padding-left: 100px;
+
            padding-left: 100px;
      height: 200px;
+
            height: 200px;
      background: #ddd;
+
            background: #ddd;
      border-radius: 0 0 200px 0;
+
            border-radius: 0 0 200px 0;
    }
+
        }
  
    /*画第三个圆圈*/
+
        /*画第三个圆圈*/
    .menuHolder ul.p3 li a {
+
        .menuHolder ul.p3 li a {
      position: absolute;
+
            position: absolute;
      display: block;
+
            display: block;
      width: 100px;
+
            width: 100px;
      padding-left: 200px;
+
            padding-left: 200px;
      height: 300px;
+
            height: 300px;
      background: #999;
+
            background: #999;
      border-radius: 0 0 300px 0;
+
            border-radius: 0 0 300px 0;
    }
+
        }
  
    /*把第二第三个圆隐藏到角落里去,让视角看不到*/
+
        /*把第二第三个圆隐藏到角落里去,让视角看不到*/
    .menuHolder ul ul {
+
        .menuHolder ul ul {
      transform-origin: 0 0;
+
            transform-origin: 0 0;
      transform: rotate(90deg);
+
            transform: rotate(90deg);
      transition: 1s;
+
            transition: 1s;
    }
+
        }
  
    /*绘制第二层的菜单*/
+
        /*绘制第二层的菜单*/
    .menuHolder li.s2:nth-of-type(8)>a {
+
        .menuHolder li.s2:nth-of-type(8)>a {
      background: #888;
+
            background: #888;
      transform: rotate(78.25deg);
+
            transform: rotate(78.25deg);
    }
+
        }
  
    .menuHolder li.s2:nth-of-type(7)>a {
+
        .menuHolder li.s2:nth-of-type(7)>a {
      background: #999;
+
            background: #999;
      transform: rotate(67.5deg);
+
            transform: rotate(67.5deg);
    }
+
        }
  
    .menuHolder li.s2:nth-of-type(6)>a {
+
        .menuHolder li.s2:nth-of-type(6)>a {
      background: #aaa;
+
            background: #aaa;
      transform: rotate(56.25deg);
+
            transform: rotate(56.25deg);
    }
+
        }
  
    .menuHolder li.s2:nth-of-type(5)>a {
+
        .menuHolder li.s2:nth-of-type(5)>a {
      background: #bbb;
+
            background: #bbb;
      transform: rotate(45deg);
+
            transform: rotate(45deg);
    }
+
        }
  
    .menuHolder li.s2:nth-of-type(4)>a {
+
        .menuHolder li.s2:nth-of-type(4)>a {
      background: #ccc;
+
            background: #ccc;
      transform: rotate(33.75deg);
+
            transform: rotate(33.75deg);
    }
+
        }
  
    .menuHolder li.s2:nth-of-type(3)>a {
+
        .menuHolder li.s2:nth-of-type(3)>a {
      background: #ddd;
+
            background: #ddd;
      transform: rotate(22.5deg);
+
            transform: rotate(22.5deg);
    }
+
        }
  
    .menuHolder li.s2:nth-of-type(2)>a {
+
        .menuHolder li.s2:nth-of-type(2)>a {
      background: #eee;
+
            background: #eee;
      transform: rotate(11.25deg);
+
            transform: rotate(11.25deg);
    }
+
        }
  
    .menuHolder li.s2:nth-of-type(1)>a {
+
        .menuHolder li.s2:nth-of-type(1)>a {
      background: #fff;
+
            background: #fff;
      transform: rotate(0deg);
+
            transform: rotate(0deg);
    }
+
        }
  
    /*绘制Parts的子菜单*/
+
        /*绘制Parts的子菜单*/
    .menuHolder .a6 li:nth-of-type(4)>a {
+
        .menuHolder .a6 li:nth-of-type(4)>a {
      background: #999;
+
            background: #999;
      transform: rotate(67.5deg);
+
            transform: rotate(67.5deg);
    }
+
        }
  
    .menuHolder .a6 li:nth-of-type(3)>a {
+
        .menuHolder .a6 li:nth-of-type(3)>a {
      background: #bbb;
+
            background: #bbb;
      transform: rotate(45deg);
+
            transform: rotate(45deg);
    }
+
        }
  
    .menuHolder .a6 li:nth-of-type(2)>a {
+
        .menuHolder .a6 li:nth-of-type(2)>a {
      background: #ddd;
+
            background: #ddd;
      transform: rotate(22.5deg);
+
            transform: rotate(22.5deg);
    }
+
        }
  
    .menuHolder .a6 li:nth-of-type(1)>a {
+
        .menuHolder .a6 li:nth-of-type(1)>a {
      background: #fff;
+
            background: #fff;
      transform: rotate(0deg);
+
            transform: rotate(0deg);
    }
+
        }
  
    /*绘制Team的子菜单*/
+
        /*绘制Team的子菜单*/
  
    .menuHolder .a5 li:nth-of-type(3)>a {
+
        .menuHolder .a5 li:nth-of-type(3)>a {
      background: #aaa;
+
            background: #aaa;
      transform: rotate(60deg);
+
            transform: rotate(60deg);
    }
+
        }
  
    .menuHolder .a5 li:nth-of-type(2)>a {
+
        .menuHolder .a5 li:nth-of-type(2)>a {
      background: #ccc;
+
            background: #ccc;
      transform: rotate(30deg);
+
            transform: rotate(30deg);
    }
+
        }
  
    .menuHolder .a5 li:nth-of-type(1)>a {
+
        .menuHolder .a5 li:nth-of-type(1)>a {
      background: #fff;
+
            background: #fff;
      transform: rotate(0deg);
+
            transform: rotate(0deg);
    }
+
        }
  
    /*绘制Project的子菜单*/
+
        /*绘制Project的子菜单*/
    .menuHolder .a3 li:nth-of-type(1)>a {
+
        .menuHolder .a3 li:nth-of-type(1)>a {
      background: #fff;
+
            background: #fff;
      transform: rotate(0deg);
+
            transform: rotate(0deg);
    }
+
        }
  
    .menuHolder .a3 li:nth-of-type(8)>a {
+
        .menuHolder .a3 li:nth-of-type(8)>a {
      background: #888;
+
            background: #888;
      transform: rotate(78.75deg);
+
            transform: rotate(78.75deg);
  
    }
+
        }
  
    .menuHolder .a3 li:nth-of-type(7)>a {
+
        .menuHolder .a3 li:nth-of-type(7)>a {
      background: #999;
+
            background: #999;
      transform: rotate(67.5deg);
+
            transform: rotate(67.5deg);
    }
+
        }
  
    .menuHolder .a3 li:nth-of-type(6)>a {
+
        .menuHolder .a3 li:nth-of-type(6)>a {
      background: #aaa;
+
            background: #aaa;
      transform: rotate(56.25deg);
+
            transform: rotate(56.25deg);
    }
+
        }
  
    .menuHolder .a3 li:nth-of-type(5)>a {
+
        .menuHolder .a3 li:nth-of-type(5)>a {
      background: #bbb;
+
            background: #bbb;
      transform: rotate(45deg);
+
            transform: rotate(45deg);
    }
+
        }
  
    .menuHolder .a3 li:nth-of-type(4)>a {
+
        .menuHolder .a3 li:nth-of-type(4)>a {
      background: #ccc;
+
            background: #ccc;
      transform: rotate(33.75deg);
+
            transform: rotate(33.75deg);
    }
+
        }
  
    .menuHolder .a3 li:nth-of-type(3)>a {
+
        .menuHolder .a3 li:nth-of-type(3)>a {
      background: #ddd;
+
            background: #ddd;
      transform: rotate(22.5deg);
+
            transform: rotate(22.5deg);
    }
+
        }
  
    .menuHolder .a3 li:nth-of-type(2)>a {
+
        .menuHolder .a3 li:nth-of-type(2)>a {
      background: #eee;
+
            background: #eee;
      transform: rotate(11.25deg);
+
            transform: rotate(11.25deg);
    }
+
        }
  
    .menuHolder .a7 li:nth-of-type(2)>a {
+
        .menuHolder .a7 li:nth-of-type(2)>a {
      background: #aaa;
+
            background: #aaa;
      transform: rotate(45deg);
+
            transform: rotate(45deg);
    }
+
        }
  
    .menuHolder .a7 li:nth-of-type(1)>a {
+
        .menuHolder .a7 li:nth-of-type(1)>a {
      background: #fff;
+
            background: #fff;
      transform: rotate(0deg);
+
            transform: rotate(0deg);
    }
+
        }
  
    /*鼠标滑过第一层菜单展开第二层菜单*/
+
        /*鼠标滑过第一层菜单展开第二层菜单*/
    .menuHolder li.s1:hover ul.p2 {
+
        .menuHolder li.s1:hover ul.p2 {
      transform: rotate(0deg);
+
            transform: rotate(0deg);
    }
+
        }
  
    /*鼠标滑过第二层菜单展开第三层菜单*/
+
        /*鼠标滑过第二层菜单展开第三层菜单*/
    .menuHolder li.s2:hover ul.p3 {
+
        .menuHolder li.s2:hover ul.p3 {
      transform: rotate(0deg);
+
            transform: rotate(0deg);
    }
+
        }
  
    /*鼠标滑过改变背景颜色和文字颜色*/
+
        /*鼠标滑过改变背景颜色和文字颜色*/
    .menuHolder ul li:hover>a {
+
        .menuHolder ul li:hover>a {
      background: #11253b;
+
            background: #11253b;
      color: #fff;
+
            color: #fff;
    }
+
        }
  
    .menuHolder li.s2:hover>a {
+
        .menuHolder li.s2:hover>a {
      background: #11253b;
+
            background: #11253b;
      color: #fff;
+
            color: #fff;
    }
+
        }
  
    .menuHolder .a6 li:hover>a {
+
        .menuHolder .a6 li:hover>a {
      background: #11253b;
+
            background: #11253b;
      color: #fff;
+
            color: #fff;
    }
+
        }
  
    .menuHolder .a5 li:hover>a {
+
        .menuHolder .a5 li:hover>a {
      background: #11253b;
+
            background: #11253b;
      color: #fff;
+
            color: #fff;
    }
+
        }
  
    .menuHolder .a3 li:hover>a {
+
        .menuHolder .a3 li:hover>a {
      background: #11253b;
+
            background: #11253b;
      color: #fff;
+
            color: #fff;
    }
+
        }
  
    .menuHolder .a7 li:hover>a {
+
        .menuHolder .a7 li:hover>a {
      background: #11253b;
+
            background: #11253b;
      color: #fff;
+
            color: #fff;
    }
+
        }
  
    #navbar-logo {
+
        #navbar-logo {
      height: 50px;
+
            height: 50px;
      margin-top: 8px;
+
            margin-top: 8px;
      margin-left: -20px;
+
            margin-left: -20px;
    }
+
        }
  
    /* footer */
+
        /* footer */
    /*下面contactus*/
+
        /*下面contactus*/
    .footer {
+
        .footer {
      background-color: #222222;
+
            background-color: #222222;
      color: #fff;
+
            color: #fff;
      font-family: verdana;
+
            font-family: verdana;
      width: 100%;
+
            width: 100%;
      overflow: hidden;
+
            overflow: hidden;
      margin: 0;
+
            margin: 0;
      padding: 1.5% 0 3% 0;
+
            padding: 1.5% 0 3% 0;
      text-align: center;
+
            text-align: center;
      position: relative;
+
            position: relative;
      z-index: 100;
+
            z-index: 100;
    }
+
        }
  
    .footer * {
+
        .footer * {
      color: white !important;
+
            color: white !important;
    }
+
        }
  
    #hui1 {
+
        #hui1 {
      position: absolute;
+
            position: absolute;
      right: 0;
+
            right: 0;
      top: 20%;
+
            top: 20%;
      width: 30%;
+
            width: 30%;
      z-index: 999;
+
            z-index: 999;
    }
+
        }
  
    #xiaohui {
+
        #xiaohui {
      width: 40%;
+
            width: 40%;
  
    }
+
        }
  
    #yuanhui {
+
        #yuanhui {
      width: 34%;
+
            width: 34%;
    }
+
        }
  
    #hui2 {
+
        #hui2 {
      position: absolute;
+
            position: absolute;
      left: 0;
+
            left: 0;
      top: 25%;
+
            top: 25%;
      width: 30%;
+
            width: 30%;
      z-index: 999;
+
            z-index: 999;
    }
+
        }
  
    .ctus {
+
        .ctus {
      width: 25%;
+
            width: 25%;
      margin: 5px;
+
            margin: 5px;
      float: left;
+
            float: left;
    }
+
        }
  
    .ctus img {
+
        .ctus img {
      width: 10%;
+
            width: 10%;
      height: 10%;
+
            height: 10%;
      border-radius: 0;
+
            border-radius: 0;
      margin: 5px auto;
+
            margin: 5px auto;
    }
+
        }
  
    .ctus img:hover {
+
        .ctus img:hover {
      transform: scale(1.2, 1.2);
+
            transform: scale(1.2, 1.2);
    }
+
        }
  
    /* 23. footer
+
        /* 23. footer
        --------------------------------------------------------------------------------*/
+
            --------------------------------------------------------------------------------*/
  
    #totop {
+
        #totop {
      width: 40px;
+
            width: 40px;
      height: 40px;
+
            height: 40px;
      line-height: 40px;
+
            line-height: 40px;
      background-color: #353535;
+
            background-color: #353535;
      text-align: center;
+
            text-align: center;
      position: fixed;
+
            position: fixed;
      border-radius: 50%;
+
            border-radius: 50%;
      padding: 0;
+
            padding: 0;
      right: 15px;
+
            right: 15px;
      bottom: 10px;
+
            bottom: 10px;
      z-index: 9999;
+
            z-index: 9999;
      display: block;
+
            display: block;
      cursor: pointer;
+
            cursor: pointer;
    }
+
        }
  
    #btn2 {
+
        #btn2 {
      font-size: large;
+
            font-size: large;
      font-weight: 900;
+
            font-weight: 900;
      color: #fff;
+
            color: #fff;
    }
+
        }
  
    #totop:hover {
+
        #totop:hover {
      transform: scale(1.1);
+
            transform: scale(1.1);
    }
+
        }
  
  
    /* 正式 */
+
        /* 正式 */
    .navbar-brand {
+
        .navbar-brand {
      margin-left: 64px;
+
            margin-left: 64px;
    }
+
        }
  
    .ts-title h2 {
+
        .ts-title h2 {
      font-weight: 900;
+
            font-weight: 900;
      font-size: 38px;
+
            font-size: 38px;
    }
+
        }
  
    .ts-title h4 {
+
        .ts-title h4 {
      margin-bottom: 10px !important;
+
            margin-bottom: 10px !important;
    }
+
        }
  
    .container p {
+
        .container p {
      font-size: 18px;
+
            font-size: 18px;
    }
+
        }
  
    .container h3 {
+
        .container h3 {
      font-size: 24px;
+
            font-size: 24px;
      margin-bottom: 12px;
+
            margin-bottom: 12px;
    }
+
        }
  
    .container h5 {
+
        .container h5 {
      font-size: 20px;
+
            font-size: 20px;
    }
+
        }
  
    #ts-hero {
+
        #ts-hero {
      background: url("https://2019.igem.org/wiki/images/c/c1/T--TJUSLS_China--headpic-design.jpg") no-repeat center center;
+
            background: url("https://2019.igem.org/wiki/images/c/c1/T--TJUSLS_China--headpic-design.jpg") no-repeat center center;
      background-size: cover;
+
            background-size: cover;
    }
+
        }
  
    #top_menu_inside ul {
+
        #top_menu_inside ul {
      line-height: 16px;
+
            line-height: 16px;
    }
+
        }
  
    #mw-content-text>p {
+
        #mw-content-text>p {
      display: none !important;
+
            display: none !important;
    }
+
        }
  
    #top_menu_inside #user_item {
+
        #top_menu_inside #user_item {
      padding-top: 0 !important;
+
            padding-top: 0 !important;
      line-height: 16px;
+
            line-height: 16px;
    }
+
        }
  
    h1 {
+
        h1 {
      border: none !important;
+
            border: none !important;
    }
+
        }
  
    .navbar.navbar-expand-lg .ts-background {
+
        .navbar.navbar-expand-lg .ts-background {
      opacity: 1 !important;
+
            opacity: 1 !important;
    }
+
        }
  
    #navbar {
+
        #navbar {
      height: 80px;
+
            height: 80px;
      position: fixed;
+
            position: fixed;
      top: 0;
+
            top: 0;
      margin-top: 16px;
+
            margin-top: 16px;
      background-color: #11253b;
+
            background-color: #11253b;
      width: 100%;
+
            width: 100%;
      z-index: 100;
+
            z-index: 100;
      left: 0;
+
            left: 0;
    }
+
        }
  
    #navbar-logo {
+
        #navbar-logo {
      height: 50px;
+
            height: 50px;
      margin-top: 8px;
+
            margin-top: 8px;
      margin-left: -20px;
+
            margin-left: -20px;
  
    }
+
        }
  
    #links {
+
        #links {
      float: right;
+
            float: right;
      height: 60px;
+
            height: 60px;
    }
+
        }
  
    #links a {
+
        #links a {
      cursor: pointer;
+
            cursor: pointer;
      float: right;
+
            float: right;
      padding-right: 20px;
+
            padding-right: 20px;
      line-height: 60px;
+
            line-height: 60px;
      color: white;
+
            color: white;
      font-size: 18px;
+
            font-size: 18px;
      text-decoration: none;
+
            text-decoration: none;
      transition: 0.4s;
+
            transition: 0.4s;
      text-align: center;
+
            text-align: center;
    }
+
        }
  
    #links a:hover {
+
        #links a:hover {
      color: rgb(172, 172, 172);
+
            color: rgb(172, 172, 172);
    }
+
        }
  
    /*头部图片的css*/
+
        /*头部图片的css*/
    .py-7 {
+
        .py-7 {
      padding: 7.5rem 0;
+
            padding: 7.5rem 0;
    }
+
        }
  
    .py-md-0 {
+
        .py-md-0 {
      padding-top: 0 !important;
+
            padding-top: 0 !important;
      padding-bottom: 0 !important
+
            padding-bottom: 0 !important
    }
+
        }
  
    .bg-hero {
+
        .bg-hero {
      background-color: #000000;
+
            background-color: #000000;
      background-size: cover;
+
            background-size: cover;
      background-position: center center;
+
            background-position: center center;
      position: relative;
+
            position: relative;
    }
+
        }
  
    .bg-hero:before {
+
        .bg-hero:before {
      position: absolute;
+
            position: absolute;
      z-index: 1;
+
            z-index: 1;
      width: 100%;
+
            width: 100%;
      height: 100%;
+
            height: 100%;
      display: block;
+
            display: block;
      left: 0;
+
            left: 0;
      top: 0;
+
            top: 0;
      content: "";
+
            content: "";
      background-color: rgba(0, 0, 0, 0.6);
+
            background-color: rgba(0, 0, 0, 0.6);
    }
+
        }
  
    .bg-hero .container {
+
        .bg-hero .container {
      z-index: 2;
+
            z-index: 2;
      position: relative;
+
            position: relative;
    }
+
        }
  
    .container {
+
        .container {
      width: 100%;
+
            width: 100%;
      padding-right: 15px;
+
            padding-right: 15px;
      padding-left: 15px;
+
            padding-left: 15px;
      margin-right: auto;
+
            margin-right: auto;
      margin-left: auto;
+
            margin-left: auto;
    }
+
        }
  
    @media (min-width: 576px) {
+
        @media (min-width: 576px) {
      .container {
+
            .container {
        max-width: 540px;
+
                max-width: 540px;
      }
+
            }
    }
+
        }
  
    @media (min-width: 768px) {
+
        @media (min-width: 768px) {
      .container {
+
            .container {
        max-width: 720px;
+
                max-width: 720px;
      }
+
            }
    }
+
        }
  
    @media (min-width: 992px) {
+
        @media (min-width: 992px) {
      .container {
+
            .container {
        max-width: 960px;
+
                max-width: 960px;
      }
+
            }
    }
+
        }
  
    @media (min-width: 1200px) {
+
        @media (min-width: 1200px) {
      .container {
+
            .container {
        max-width: 1140px;
+
                max-width: 1140px;
      }
+
            }
    }
+
        }
  
    .row {
+
        .row {
      display: -ms-flexbox;
+
            display: -ms-flexbox;
      display: flex;
+
            display: flex;
      -ms-flex-wrap: wrap;
+
            -ms-flex-wrap: wrap;
      flex-wrap: wrap;
+
            flex-wrap: wrap;
      margin-right: -15px;
+
            margin-right: -15px;
      margin-left: -15px;
+
            margin-left: -15px;
    }
+
        }
  
    /*vertical heights */
+
        /*vertical heights */
    .vh-100 {
+
        .vh-100 {
      height: 100vh;
+
            height: 100vh;
    }
+
        }
  
    @media (min-width: 576px) {
+
        @media (min-width: 576px) {
      .vh-sm-100 {
+
            .vh-sm-100 {
        height: 100vh;
+
                height: 100vh;
      }
+
            }
    }
+
        }
  
    @media (min-width: 768px) {
+
        @media (min-width: 768px) {
      .vh-md-100 {
+
            .vh-md-100 {
        height: 100vh;
+
                height: 100vh;
      }
+
            }
    }
+
        }
  
    .my-auto {
+
        .my-auto {
      margin-bottom: auto !important
+
            margin-bottom: auto !important
    }
+
        }
  
    .mx-auto {
+
        .mx-auto {
      margin-right: auto !important
+
            margin-right: auto !important
    }
+
        }
  
    .d-none {
+
        .d-none {
      display: none !important
+
            display: none !important
    }
+
        }
  
    .d-md-block {
+
        .d-md-block {
      display: block !important
+
            display: block !important
    }
+
        }
  
    .cover-arrow {
+
        .cover-arrow {
      position: absolute;
+
            position: absolute;
      z-index: 6;
+
            z-index: 6;
      bottom: 60px;
+
            bottom: 60px;
      right: 0;
+
            right: 0;
      left: 0;
+
            left: 0;
      text-align: center;
+
            text-align: center;
    }
+
        }
  
    .bounce {
+
        .bounce {
      -webkit-animation: bounce 3s infinite;
+
            -webkit-animation: bounce 3s infinite;
      animation: bounce 3s infinite;
+
            animation: bounce 3s infinite;
    }
+
        }
  
    @-webkit-keyframes bounce {
+
        @-webkit-keyframes bounce {
  
      0%,
+
            0%,
      20%,
+
            20%,
      50%,
+
            50%,
      80%,
+
            80%,
      100% {
+
            100% {
        -webkit-transform: translateY(0);
+
                -webkit-transform: translateY(0);
        transform: translateY(0);
+
                transform: translateY(0);
      }
+
            }
  
      40% {
+
            40% {
        -webkit-transform: translateY(-30px);
+
                -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
+
                transform: translateY(-30px);
      }
+
            }
  
      60% {
+
            60% {
        -webkit-transform: translateY(-15px);
+
                -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
+
                transform: translateY(-15px);
      }
+
            }
    }
+
        }
  
    @keyframes bounce {
+
        @keyframes bounce {
  
      0%,
+
            0%,
      20%,
+
            20%,
      50%,
+
            50%,
      80%,
+
            80%,
      100% {
+
            100% {
        -webkit-transform: translateY(0);
+
                -webkit-transform: translateY(0);
        transform: translateY(0);
+
                transform: translateY(0);
      }
+
            }
  
      40% {
+
            40% {
        -webkit-transform: translateY(-30px);
+
                -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
+
                transform: translateY(-30px);
      }
+
            }
  
      60% {
+
            60% {
        -webkit-transform: translateY(-15px);
+
                -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
+
                transform: translateY(-15px);
      }
+
            }
    }
+
        }
  
    .text-center {
+
        .text-center {
      text-align: center !important;
+
            text-align: center !important;
    }
+
        }
  
    @media (min-width: 576px) {
+
        @media (min-width: 576px) {
      .text-sm-left {
+
            .text-sm-left {
        text-align: left !important;
+
                text-align: left !important;
      }
+
            }
  
      .text-sm-right {
+
            .text-sm-right {
        text-align: right !important;
+
                text-align: right !important;
      }
+
            }
  
      .text-sm-center {
+
            .text-sm-center {
        text-align: center !important;
+
                text-align: center !important;
      }
+
            }
    }
+
        }
  
    @media (min-width: 768px) {
+
        @media (min-width: 768px) {
      .text-md-left {
+
            .text-md-left {
        text-align: left !important;
+
                text-align: left !important;
      }
+
            }
  
      .text-md-right {
+
            .text-md-right {
        text-align: right !important;
+
                text-align: right !important;
      }
+
            }
  
      .text-md-center {
+
            .text-md-center {
        text-align: center !important;
+
                text-align: center !important;
      }
+
            }
    }
+
        }
  
    @media (min-width: 992px) {
+
        @media (min-width: 992px) {
      .text-lg-left {
+
            .text-lg-left {
        text-align: left !important;
+
                text-align: left !important;
      }
+
            }
  
      .text-lg-right {
+
            .text-lg-right {
        text-align: right !important;
+
                text-align: right !important;
      }
+
            }
  
      .text-lg-center {
+
            .text-lg-center {
        text-align: center !important;
+
                text-align: center !important;
      }
+
            }
    }
+
        }
  
    @media (min-width: 1200px) {
+
        @media (min-width: 1200px) {
      .text-xl-left {
+
            .text-xl-left {
        text-align: left !important;
+
                text-align: left !important;
      }
+
            }
  
      .text-xl-right {
+
            .text-xl-right {
        text-align: right !important;
+
                text-align: right !important;
      }
+
            }
  
      .text-xl-center {
+
            .text-xl-center {
        text-align: center !important;
+
                text-align: center !important;
      }
+
            }
    }
+
        }
  
    .col-md-7 {
+
        .col-md-7 {
      position: relative;
+
            position: relative;
      width: 100%;
+
            width: 100%;
      min-height: 1px;
+
            min-height: 1px;
      padding-right: 15px;
+
            padding-right: 15px;
      padding-left: 15px;
+
            padding-left: 15px;
    }
+
        }
  
    .text-white {
+
        .text-white {
      color: #fff !important;
+
            color: #fff !important;
    }
+
        }
  
    .scroll-top {
+
        .scroll-top {
      width: 40px;
+
            width: 40px;
      height: 40px;
+
            height: 40px;
      line-height: 40px;
+
            line-height: 40px;
      background-color: #353535;
+
            background-color: #353535;
      text-align: center;
+
            text-align: center;
      position: fixed;
+
            position: fixed;
      border-radius: 50%;
+
            border-radius: 50%;
      padding: 0;
+
            padding: 0;
      right: 15px;
+
            right: 15px;
      bottom: 10px;
+
            bottom: 10px;
      z-index: 9999;
+
            z-index: 9999;
      display: block;
+
            display: block;
      cursor: pointer;
+
            cursor: pointer;
    }
+
        }
  
    .scroll-top:hover {
+
        .scroll-top:hover {
      background-color: #353535;
+
            background-color: #353535;
      transform: scale(1.1);
+
            transform: scale(1.1);
    }
+
        }
  
    #Overview {
+
        #Overview {
      padding-bottom: 0 !important;
+
            padding-bottom: 0 !important;
    }
+
        }
  
    #G-C-D {
+
        #G-C-D {
      padding-top: 40px;
+
            padding-top: 40px;
      padding-bottom: 0 !important;
+
            padding-bottom: 0 !important;
    }
+
        }
  
    #E-F-H-S {
+
        #E-F-H-S {
      padding-top: 40px;
+
            padding-top: 40px;
      padding-bottom: 0 !important;
+
            padding-bottom: 0 !important;
    }
+
        }
  
    #References {
+
        #References {
      padding-top: 40px;
+
            padding-top: 40px;
    }
+
        }
  </style>
+
    </style>
 
</head>
 
</head>
 
<div id="navbar" style="padding-top: 6px;">
 
<div id="navbar" style="padding-top: 6px;">
  
  <div id="links">
+
    <div id="links">
    <a id="toReferences">Reference</a>
+
        <a id="toReferences">Reference</a>
    <a id="toMETE">Methods to evaluate therapeutic effects</a>
+
        <a id="toMETE">Methods to evaluate therapeutic effects</a>
    <a id="toEFHS">Establishment of Fluorescent HTS system</a>
+
        <a id="toEFHS">Establishment of Fluorescent HTS system</a>
    <a id="toGCD">Genetic Circuit Design</a>
+
        <a id="toGCD">Genetic Circuit Design</a>
    <a id="toOverview">Overview</a>
+
        <a id="toOverview">Overview</a>
  </div>
+
    </div>
  <div class="menuHolder">
+
 
     <div class="menuHolder">
 
     <div class="menuHolder">
      <div class="menuWindow">
+
        <div class="menuHolder">
        <ul class="p1">
+
            <div class="menuWindow">
          <li class="s1">
+
                <ul class="p1">
            <a href="http://2019.igem.org/Team:TJUSLS_China">
+
                    <li class="s1">
              <img src="https://2019.igem.org/wiki/images/4/48/T--TJUSLS_China--logo.svg" alt="TJUSLS" id="navbar-logo">
+
                        <a href="http://2019.igem.org/Team:TJUSLS_China">
            </a>
+
                            <img src="https://2019.igem.org/wiki/images/4/48/T--TJUSLS_China--logo.svg" alt="TJUSLS" id="navbar-logo">
            <ul class="p2" style="transform: rotate(0deg);">
+
                        </a>
              <li class="s2"><a href="http://2019.igem.org/Team:TJUSLS_China"><span>HOME</span></a></li>
+
                        <ul class="p2" style="transform: rotate(0deg);">
              <li class="s2"><a href=""><span>PROJECT</span></a>
+
                            <li class="s2"><a href="http://2019.igem.org/Team:TJUSLS_China"><span>HOME</span></a></li>
                <ul class="p3 a3">
+
                            <li class="s2"><a href=""><span>PROJECT</span></a>
                  <li><a href="http://2019.igem.org/Team:TJUSLS_China/Description">Description</a>
+
                                <ul class="p3 a3">
                  </li>
+
                                    <li><a href="http://2019.igem.org/Team:TJUSLS_China/Description">Description</a>
                  <li><a href="http://2019.igem.org/Team:TJUSLS_China/Design">Design</a></li>
+
                                    </li>
                  <li><a href="http://2019.igem.org/Team:TJUSLS_China/Experiments">Experiments</a>
+
                                    <li><a href="http://2019.igem.org/Team:TJUSLS_China/Design">Design</a></li>
                  </li>
+
                                    <li><a href="http://2019.igem.org/Team:TJUSLS_China/Experiments">Experiments</a>
                  <li><a href="http://2019.igem.org/Team:TJUSLS_China/Notebook">Notebook</a></li>
+
                                    </li>
                  <li><a href="http://2019.igem.org/Team:TJUSLS_China/Demonstrate">Demonstrate</a>
+
                                    <li><a href="http://2019.igem.org/Team:TJUSLS_China/Notebook">Notebook</a></li>
                  </li>
+
                                    <li><a href="http://2019.igem.org/Team:TJUSLS_China/Demonstrate">Demonstrate</a>
                  <li><a href="http://2019.igem.org/Team:TJUSLS_China/Improve">Improve</a></li>
+
                                    </li>
                  <li><a href="http://2019.igem.org/Team:TJUSLS_China/Characterization">Characterization</a>
+
                                    <li><a href="http://2019.igem.org/Team:TJUSLS_China/Improve">Improve</a></li>
                  </li>
+
                                    <li><a href="http://2019.igem.org/Team:TJUSLS_China/Characterization">Characterization</a>
                  <li><a href="http://2019.igem.org/Team:TJUSLS_China/Results">Results</a></li>
+
                                    </li>
                </ul>
+
                                    <li><a href="http://2019.igem.org/Team:TJUSLS_China/Results">Results</a></li>
              </li>
+
                                </ul>
              <li class="s2"><a href="http://2019.igem.org/Team:TJUSLS_China/Safety"><span>SAFETY</span></a>
+
                            </li>
 +
                            <li class="s2"><a href="http://2019.igem.org/Team:TJUSLS_China/Safety"><span>SAFETY</span></a>
  
              </li>
+
                            </li>
              <li class="s2"> <a href="http://2019.igem.org/Team:TJUSLS_China/Parts"><span>PARTS</span></a>
+
                            <li class="s2"> <a href="http://2019.igem.org/Team:TJUSLS_China/Parts"><span>PARTS</span></a>
                <ul class="p3 a6">
+
                                <ul class="p3 a6">
                  <li><a href="http://2019.igem.org/Team:TJUSLS_China/Parts">Overview</a></li>
+
                                    <li><a href="http://2019.igem.org/Team:TJUSLS_China/Parts">Overview</a></li>
                  <li><a href="http://2019.igem.org/Team:TJUSLS_China/Basic_Part">Basic parts</a>
+
                                    <li><a href="http://2019.igem.org/Team:TJUSLS_China/Basic_Part">Basic parts</a>
                  </li>
+
                                    </li>
                  <li><a href="http://2019.igem.org/Team:TJUSLS_China/Composite_Part">Composite
+
                                    <li><a href="http://2019.igem.org/Team:TJUSLS_China/Composite_Part">Composite
                      parts</a></li>
+
                                        parts</a></li>
                  <li><a href="http://2019.igem.org/Team:TJUSLS_China/Part_Collection">Part
+
                                    <li><a href="http://2019.igem.org/Team:TJUSLS_China/Part_Collection">Part
                      collection</a></li>
+
                                        collection</a></li>
                </ul>
+
                                </ul>
              </li>
+
                            </li>
              <li class="s2"><a href="http://2019.igem.org/Team:TJUSLS_China/Model"><span>MODEL</span></a>
+
                            <li class="s2"><a href="http://2019.igem.org/Team:TJUSLS_China/Model"><span>MODEL</span></a>
  
              </li>
+
                            </li>
              <li class="s2"><a href=""><span>HP</span></a>
+
                            <li class="s2"><a href=""><span>HP</span></a>
                <ul class="p3 a7">
+
                                <ul class="p3 a7">
                  <li><a href="http://2019.igem.org/Team:TJUSLS_China/Human_Practices">Human
+
                                    <li><a href="http://2019.igem.org/Team:TJUSLS_China/Human_Practices">Human
                      practices</a></li>
+
                                        practices</a></li>
                  <li><a href="http://2019.igem.org/Team:TJUSLS_China/Public_Engagement">Education
+
                                    <li><a href="http://2019.igem.org/Team:TJUSLS_China/Public_Engagement">Education
                      and engagement</a></li>
+
                                        and engagement</a></li>
 +
                                </ul>
 +
                            </li>
 +
                            <li class="s2"><a href=""><span>JUDGING FORM</span></a>
 +
                                <ul class="p3 a5">
 +
                                    <li><a href="http://2019.igem.org/Team:TJUSLS_China/Medal">Medal requirements</a>
 +
                                    </li>
 +
                                    <li><a href="http://2019.igem.org/Team:TJUSLS_China/Measurement">Measurement</a>
 +
                                    </li>
 +
                                    <li><a href="http://igem.org/2019_Judging_Form?team=TJUSLS_China">Judging Form</a>
 +
                                    </li>
 +
                                </ul>
 +
                            </li>
 +
                            <li class="s2 b6"><a href=""><span>TEAM</span></a>
 +
                                <ul class="p3 a5">
 +
                                    <li><a href="http://2019.igem.org/Team:TJUSLS_China/Team">Team members</a></li>
 +
                                    <li>
 +
                                        <a href="http://2019.igem.org/Team:TJUSLS_China/Collaborations">Collaborations</a>
 +
                                    </li>
 +
                                    <li><a href="http://2019.igem.org/Team:TJUSLS_China/Attributions">Attributions</a>
 +
                                    </li>
 +
                                </ul>
 +
                            </li>
 +
                        </ul>
 +
                    </li>
 
                 </ul>
 
                 </ul>
              </li>
+
             </div>
              <li class="s2"><a href=""><span>JUDGING FORM</span></a>
+
         </div>
                <ul class="p3 a5">
+
                  <li><a href="http://2019.igem.org/Team:TJUSLS_China/Medal">Medal requirements</a>
+
                  </li>
+
                  <li><a href="http://2019.igem.org/Team:TJUSLS_China/Measurement">Measurement</a>
+
                  </li>
+
                  <li><a href="http://igem.org/2019_Judging_Form?team=TJUSLS_China">Judging Form</a>
+
                  </li>
+
                </ul>
+
              </li>
+
              <li class="s2 b6"><a href=""><span>TEAM</span></a>
+
                <ul class="p3 a5">
+
                  <li><a href="http://2019.igem.org/Team:TJUSLS_China/Team">Team members</a></li>
+
                  <li>
+
                    <a href="http://2019.igem.org/Team:TJUSLS_China/Collaborations">Collaborations</a>
+
                  </li>
+
                  <li><a href="http://2019.igem.org/Team:TJUSLS_China/Attributions">Attributions</a>
+
                  </li>
+
                </ul>
+
              </li>
+
             </ul>
+
          </li>
+
         </ul>
+
      </div>
+
 
     </div>
 
     </div>
  </div>
 
 
</div>
 
</div>
 +
<div id="outerdiv"
 +
    style="text-align: center;position: fixed;z-index: 1000;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(255,255,255,.9);">
 +
    <div style="padding-top: 5%;font-size: 20px;color: #11253b;font-weight: 700">click anywhere to close</div>
 +
    <img id="bigimg"
 +
        style="height: auto;width: 46.6325%;border: 0;margin: auto;position: absolute;top: 0;bottom: 0;left: 0;right: 0;"
 +
        src=""/>
 +
</div>
 +
<script>
 +
    //图片放大
 +
    $("#outerdiv").hide();
 +
    $(function () {
 +
        $("img").each(function () {
 +
            var id = $(this).attr("id");
 +
            if (id != "navbar-logo") {
 +
                $(this).mouseover(function () {
 +
                    $(this).css("cursor", "pointer");
 +
                });
  
 +
                $(this).click(function () {
 +
                    var _this = $(this);//将当前的pimg元素作为_this传入函数
 +
                    imgShow("#outerdiv", "#bigimg", _this);
 +
                });
 +
            }
 +
        });
 +
    });
 +
 +
    function imgShow(outerdiv, bigimg, _this) {
 +
        var src = _this.attr("src");//获取当前点击的pimg元素中的src属性
 +
        $("#outerdiv").attr("display", "block");
 +
        $("#bigimg").attr("src", src);//设置#bigimg元素的src属性
 +
        $("#outerdiv").fadeIn("fast");
 +
 +
        $("#outerdiv").click(function () {//再次点击淡出消失弹出层
 +
            $(this).fadeOut("fast");
 +
        });
 +
    }
 +
</script>
 
<body data-spy="scroll" data-target=".navbar" class="has-loading-screen" data-bg-parallax="scroll"
 
<body data-spy="scroll" data-target=".navbar" class="has-loading-screen" data-bg-parallax="scroll"
  data-bg-parallax-speed="3">
+
      data-bg-parallax-speed="3">
  <section class="ts-page-wrapper" id="page-top" style="margin-top: -2px;">
+
<section class="ts-page-wrapper" id="page-top" style="margin-top: -2px;">
 
     <section class="py-7 py-md-0 bg-hero"
 
     <section class="py-7 py-md-0 bg-hero"
      style="background-image: url('https://2019.igem.org/wiki/images/c/c1/T--TJUSLS_China--headpic-design.jpg')"
+
            style="background-image: url('https://2019.igem.org/wiki/images/c/c1/T--TJUSLS_China--headpic-design.jpg')"
      id="home">
+
            id="home">
      <div class="container">
+
        <div class="container">
        <div class="row vh-md-100">
+
            <div class="row vh-md-100">
          <div class="col-md-7 mx-auto my-auto text-center" style="text-align: center">
+
                <div class="col-md-7 mx-auto my-auto text-center" style="text-align: center">
            <h1 style="color: white;border:none;font-size: 5.75rem;font-weight: 700;height:100%;padding-top: 15%">Design
+
                    <h1 style="color: white;border:none;font-size: 5.75rem;font-weight: 700;height:100%;padding-top: 15%">Design
            </h1>
+
                    </h1>
          </div>
+
                </div>
 +
            </div>
 +
        </div>
 +
        <div class="cover-arrow bounce d-none d-md-block">
 +
            <a href="#Overview" class="page-scroll"><em class="text-white" data-feather="chevrons-down"></em></a>
 
         </div>
 
         </div>
      </div>
 
      <div class="cover-arrow bounce d-none d-md-block">
 
        <a href="#Overview" class="page-scroll"><em class="text-white" data-feather="chevrons-down"></em></a>
 
      </div>
 
 
     </section>
 
     </section>
 
     <main id="ts-content">
 
     <main id="ts-content">
      <!--OVERVIEW ****************************************************************************************-->
+
        <!--OVERVIEW ****************************************************************************************-->
      <section id="Overview" class="ts-block text-center">
+
        <section id="Overview" class="ts-block text-center">
        <div class="container">
+
            <div class="container">
          <div class="ts-title">
+
                <div class="ts-title">
            <h2>Overview</h2>
+
                    <h2>Overview</h2>
          </div>
+
                </div>
          <div class="row">
+
                <div class="row">
            <div class="col-sm-6 col-md-6 col-xl-6">
+
                    <div class="col-sm-6 col-md-6 col-xl-6">
              <figure data-animate="ts-fadeInUp" data-delay="0.1s">
+
                        <figure data-animate="ts-fadeInUp" data-delay="0.1s">
                <figure class="icon mb-5 p-2">
+
                            <figure class="icon mb-5 p-2">
                  <img src="https://2019.igem.org/wiki/images/b/b9/T--TJUSLS_China--icon-lcd-chart.png" alt="">
+
                                <img src="https://2019.igem.org/wiki/images/b/b9/T--TJUSLS_China--icon-lcd-chart.png" alt="">
                  <div class="ts-svg ts-svg__organic-shape-02" data-animate="ts-zoomInShort"></div>
+
                                <div class="ts-svg ts-svg__organic-shape-02" data-animate="ts-zoomInShort"></div>
                </figure>
+
                            </figure>
                <h4>Issues</h4>
+
                            <h4>Issues</h4>
                <p>
+
                            <p>
                  Since antibiotic-resistant bacteria producing beta-lactamases spread widely around the world, it is
+
                                Since antibiotic-resistant bacteria producing beta-lactamases spread widely around the world, it is
                  urgently needed to find novel therapies against diseases related to beta-lactamases. Compared with
+
                                urgently needed to find novel therapies against diseases related to beta-lactamases. Compared with
                  design and synthesis from beginning of new compounds which can be used in beta-lactam/beta-lactamase
+
                                design and synthesis from beginning of new compounds which can be used in beta-lactam/beta-lactamase
                  inhibitors antibiotic-resistant drugs, to find naturally existing inhibitors is a faster way.
+
                                inhibitors antibiotic-resistant drugs, to find naturally existing inhibitors is a faster way.
                </p>
+
                            </p>
              </figure>
+
                        </figure>
 +
                    </div>
 +
                    <!--end col-xl-4-->
 +
                    <div class="col-sm-6 offset-sm-6 col-md-6 offset-md-0 col-xl-6">
 +
                        <figure data-animate="ts-fadeInUp" data-delay="0.2s">
 +
                            <figure class="icon mb-5 p-2">
 +
                                <img src="https://2019.igem.org/wiki/images/0/0a/T--TJUSLS_China--icon-cup-winner.png" alt="">
 +
                                <div class="ts-svg ts-svg__organic-shape-03" data-animate="ts-zoomInShort"></div>
 +
                            </figure>
 +
                            <h4>Solutions</h4>
 +
                            <p>
 +
                                Some new-type fluorescent probes have been reported in assays detecting beta-lactamases. Now that it
 +
                                can reflect the activity of beta-lactamases, fluorescent intensity would decrease as soon as extent
 +
                                inhibitors compounds play roles. Thus it performs a direct way to high-throughput screen potential
 +
                                inhibitors of metallo-beta-lactamases. Based on synthetic biology methods, we design our parts to
 +
                                realize our project goals, including inhibitors screening and assessment.
 +
                            </p>
 +
                        </figure>
 +
                    </div>
 +
                </div>
 
             </div>
 
             </div>
            <!--end col-xl-4-->
+
        </section>
             <div class="col-sm-6 offset-sm-6 col-md-6 offset-md-0 col-xl-6">
+
        <!--END OVERVIEW ************************************************************************************-->
              <figure data-animate="ts-fadeInUp" data-delay="0.2s">
+
        <section id="G-C-D" class="ts-block">
                <figure class="icon mb-5 p-2">
+
             <div class="container">
                  <img src="https://2019.igem.org/wiki/images/0/0a/T--TJUSLS_China--icon-cup-winner.png" alt="">
+
                <div class="ts-title">
                  <div class="ts-svg ts-svg__organic-shape-03" data-animate="ts-zoomInShort"></div>
+
                    <h4>How to obtain our target metallo-beta-lactamases</h4>
                </figure>
+
                    <h2>Genetic Circuit Design</h2>
                <h4>Solutions</h4>
+
                </div>
                <p>
+
                <div class="row">
                  Some new-type fluorescent probes have been reported in assays detecting beta-lactamases. Now that it
+
                    <div class="col-md-12 col-xl-12" data-animate="ts-fadeInUp" data-offset="100">
                  can reflect the activity of beta-lactamases, fluorescent intensity would decrease as soon as extent
+
                        <div style="margin-bottom: 20px" class="row">
                  inhibitors compounds play roles. Thus it performs a direct way to high-throughput screen potential
+
                            <img src="https://2019.igem.org/wiki/images/c/c1/T--TJUSLS_China--Circuit.jpg" style="padding: 0;"
                  inhibitors of metallo-beta-lactamases. Based on synthetic biology methods, we design our parts to
+
                                class="mw-100 ts-shadow__lg ts-border-radius__md col-lg-6 col-md-6 offset-md-3">
                  realize our project goals, including inhibitors screening and assessment.
+
                        </div>
                </p>
+
                        <h4>Principles</h4>
              </figure>
+
                        <p>
 +
                            The very first step of our project is to attain the protein, that is to say, to build gene expression
 +
                            circuits, consisting of promoter, tag, target sequence, and other necessary parts.
 +
                            <br>
 +
                        <div style="margin-bottom: 20px" class="row">
 +
                            <img src="https://2019.igem.org/wiki/images/b/b4/T--TJUSLS_China--Circuit2.jpg" style="padding: 0;"
 +
                                class="mw-100 ts-shadow__lg ts-border-radius__md col-lg-6 col-md-6 offset-md-3">
 +
                        </div>
 +
                        </p>
 +
                        <p>
 +
                            After conducting a series of permutation and combination, we used our expression system engineering
 +
                            bacteria E.coli to assess fitness of circuits on whether the circuit can express the protein smoothly,
 +
                            whether the protein form an inclusion body, whether the protein has considerable enzyme activity and
 +
                            so
 +
                            on. In this way we can find the most adaptive circuit.
 +
                        </p>
 +
                        <h4>Iterations</h4>
 +
                        <p>
 +
                            After we tested circuits made up of only T7 promotor, His tag and beta-lactamase, we disappointedly
 +
                            found
 +
                            the effect unsatisfactory. The expression quantity is too low to take further purification or the
 +
                            protein all become inclusion body. Through our analysis, we discover we probably need a tag which
 +
                            improves dissolution or stimulates expression quantity.
 +
                            <br>
 +
                        <div style="margin-bottom: 20px" class="row">
 +
                            <img src="https://2019.igem.org/wiki/images/6/69/T--TJUSLS_China--Circuit3.jpg" style="padding: 0;"
 +
                                class="mw-100 ts-shadow__lg ts-border-radius__md col-lg-6 col-md-6 offset-md-3">
 +
                        </div>
 +
                        </p>
 +
 
 +
                        </p>
 +
                        <h4>Test</h4>
 +
                        <p>
 +
                            The way to test circuits is to transform them into E.coli engineering bacteria to find out if it can
 +
                            work appropriately. A successful circuit can perform and provide soluble target protein to us,
 +
                            however,
 +
                            most circuits and expression system mismatch so they are not able to produce useful protein then
 +
                            iterations exist. The “proteinality” matters.
 +
                        </p>
 +
                    </div>
 +
                </div>
 
             </div>
 
             </div>
          </div>
+
         </section>
         </div>
+
        <section id="E-F-H-S" class="ts-block" style="padding-bottom: 0; background-color: #eee;">
      </section>
+
             <div class="container">
      <!--END OVERVIEW ************************************************************************************-->
+
                <div class="ts-title">
      <section id="G-C-D" class="ts-block">
+
                    <h4>How to find arrows targeting MBLs</h4>
        <div class="container">
+
                    <h2>Establishment of Fluorescent HTS system</h2>
          <div class="ts-title">
+
            <h4>How to obtain our target metallo-beta-lactamases</h4>
+
            <h2>Genetic Circuit Design</h2>
+
          </div>
+
          <div class="row">
+
             <div class="col-md-12 col-xl-12" data-animate="ts-fadeInUp" data-offset="100">
+
              <div style="margin-bottom: 20px" class="row">
+
                <img src="https://2019.igem.org/wiki/images/c/c1/T--TJUSLS_China--Circuit.jpg" style="padding: 0;"
+
                  class="mw-100 ts-shadow__lg ts-border-radius__md col-lg-6 col-md-6 offset-md-3">
+
              </div>
+
              <h4>Principles</h4>
+
              <p>
+
                The very first step of our project is to attain the protein, that is to say, to build gene expression
+
                circuits, consisting of promoter, tag, target sequence, and other necessary parts.
+
                <br>
+
                <div style="margin-bottom: 20px" class="row">
+
                  <img src="https://2019.igem.org/wiki/images/b/b4/T--TJUSLS_China--Circuit2.jpg" style="padding: 0;"
+
                    class="mw-100 ts-shadow__lg ts-border-radius__md col-lg-6 col-md-6 offset-md-3">
+
 
                 </div>
 
                 </div>
              </p>
+
                <div class="row">
              <p>
+
                    <div class="col-md-12 col-xl-12" data-animate="ts-fadeInUp" data-offset="100">
                After conducting a series of permutation and combination, we used our expression system engineering
+
                        <h3>Principles</h3>
                bacteria E.coli to assess fitness of circuits on whether the circuit can express the protein smoothly,
+
                        <h5>Mechanism of Fluorescent Probe CDC-1<sup>[1]</sup></h5>
                whether the protein form an inclusion body, whether the protein has considerable enzyme activity and
+
                        <div style="margin-bottom: 20px" class="row">
                so
+
                            <img src="https://2019.igem.org/wiki/images/5/5c/T--TJUSLS_China--Probe.jpg" style="padding: 0;"
                on. In this way we can find the most adaptive circuit.
+
                                class="mw-100 ts-shadow__lg ts-border-radius__md col-lg-8 col-md-8 offset-md-2">
              </p>
+
                        </div>
              <h4>Iterations</h4>
+
                        <p>
              <p>
+
                            Consisting of three parts, CDC-1 is a extend-spectrum fluorescent probe which can be used for
                After we tested circuits made up of only T7 promotor, His tag and beta-lactamase, we disappointedly
+
                            reflecting
                found
+
                            the role of beta-lactamases. A lactam ring is designed as the hydrolyze site, a --CH2 plays the role
                the effect unsatisfactory. The expression quantity is too low to take further purification or the
+
                            as
                protein all become inclusion body. Through our analysis, we discover we probably need a tag which
+
                            a bridge and an umbelliferone as the activatable fluorophore when hydrolyzing based on FRET.
                improves dissolution or stimulates expression quantity.
+
                            <br>
                <br>
+
                            According to reports<sup>[2]</sup>, there are several detecting substrate that have been designed, specifically
                <div style="margin-bottom: 20px" class="row">
+
                            and
                  <img src="https://2019.igem.org/wiki/images/6/69/T--TJUSLS_China--Circuit3.jpg" style="padding: 0;"
+
                            extend-spectrally. Due to what we’ve chosen to express are subclass B1 and B3 beta-lactamases, CDC-1
                    class="mw-100 ts-shadow__lg ts-border-radius__md col-lg-6 col-md-6 offset-md-3">
+
                            is
 +
                            suitable to detect in HTS system.
 +
                            <br>
 +
                        </p>
 +
                        <h5>Pre-experiment</h5>
 +
                        <p>
 +
                            The very first thing in the process of HTS system establishment is to determine suitable enzyme
 +
                            concentration. When screening, a 96-well plate is used so that the reaction speed should not be fast
 +
                            in
 +
                            order to guarantee reaction holds on after mixing all wells. Also, in order to calculate the initial
 +
                            velocity, the relationship of fluorescent intensity and time should be linear. Last but not least,
 +
                            values of fluorescent intensity should not be very small to provide more accurate results.
 +
                            <br>
 +
                            So in order to explore the proper concentration of enzyme, we set 3 dilute gradients for large span.
 +
                            Then around the most fit one set more gradients for smaller span and plot the fluorescent
 +
                            intensity–time
 +
                            curve. All assays are repeated in triplicate at room temperature(around 25°C) and the baseline of
 +
                            blank
 +
                            controls is subtracted.
 +
                        </p>
 +
                    </div>
 
                 </div>
 
                 </div>
              </p>
 
             
 
              </p>
 
              <h4>Test</h4>
 
              <p>
 
                The way to test circuits is to transform them into E.coli engineering bacteria to find out if it can
 
                work appropriately. A successful circuit can perform and provide soluble target protein to us,
 
                however,
 
                most circuits and expression system mismatch so they are not able to produce useful protein then
 
                iterations exist. The “proteinality” matters.
 
              </p>
 
 
             </div>
 
             </div>
          </div>
+
            <div class="container">
        </div>
+
                <div class="row">
      </section>
+
                    <div class="col-md-12 col-xl-12" data-animate="ts-fadeInUp" data-offset="100">
      <section id="E-F-H-S" class="ts-block" style="padding-bottom: 0; background-color: #eee;">
+
                        <h5>N+N-1 Principle</h5>
        <div class="container">
+
                        <p>Buffer condition is also a key component in HTS system, owing to its huge effect on enzyme activity.
          <div class="ts-title">
+
                            After collecting and reading articles about purification of beta-lactamases, we choose PBS as MBLs’
            <h4>How to find arrows targeting MBLs</h4>
+
                            reaction circumstance. Also, we added Zn2+ into system as MBLs depends on it.
            <h2>Establishment of Fluorescent HTS system</h2>
+
                            However, the concentration of each component should be optimized.
          </div>
+
                            Therefore, this is a multivariate experiment. All the experimental test groups are designed following
          <div class="row">
+
                            the “N+N-1” rule, avoiding setting unnecessary groups.<sup>[1]</sup>
            <div class="col-md-12 col-xl-12" data-animate="ts-fadeInUp" data-offset="100">
+
                            <br>
              <h3>Principles</h3>
+
                        </p>
              <h5>Mechanism of Fluorescent Probe CDC-1<sup>[1]</sup></h5>
+
                        <div class="row" style="margin-bottom: 20px"><img
              <div style="margin-bottom: 20px" class="row">
+
                                src="https://2019.igem.org/wiki/images/e/e1/T--TJUSLS_China--chart.png" style="padding: 0;"
                <img src="https://2019.igem.org/wiki/images/5/5c/T--TJUSLS_China--Probe.jpg" style="padding: 0;"
+
                                class="mw-100 ts-shadow__lg ts-border-radius__md col-lg-6 col-md-6 offset-md-3">
                  class="mw-100 ts-shadow__lg ts-border-radius__md col-lg-8 col-md-8 offset-md-2">
+
                        </div>
              </div>
+
                        <p style="text-align: center">
              <p>
+
                            Chart 1 Experimental groups of buffer conditions
                Consisting of three parts, CDC-1 is a extend-spectrum fluorescent probe which can be used for
+
                            <br>
                reflecting
+
                            *means standard value, the concentration of NDM-23 is relevant to EC80 value(see this part in Test),
                the role of beta-lactamases. A lactam ring is designed as the hydrolyze site, a --CH2 plays the role
+
                            NaCl and pH value
                as
+
                            is relevant to PBS solution and Zn2+ is relevant to reports.
                a bridge and an umbelliferone as the activatable fluorophore when hydrolyzing based on FRET.
+
                        </p>
                <br>
+
                        <h3>Test</h3>
                According to reports[2], there are several detecting substrate that have been designed, specifically
+
                        <h5>Index for determination of enzyme concentration: R<sup>2</sup>, EC<sub>80</sub></h5>
                and
+
                        <p>
                extend-spectrally. Due to what we’ve chosen to express are subclass B1 and B3 beta-lactamases, CDC-1
+
                            In order to calculate the initial velocity, the relationship of fluorescent intensity and time should
                is
+
                            be
                suitable to detect in HTS system.
+
                            linear fit. <strong>R<sup>2</sup></strong> (Coefficient of determination) is computed as a value
                <br>
+
                            between
              </p>
+
                            0 and 1. The higher the
              <h5>Pre-experiment</h5>
+
                            value, the better the linear fit.
              <p>
+
                            <br>
                The very first thing in the process of HTS system establishment is to determine suitable enzyme
+
                            Values of fluorescent intensity should not be very small to provide more accurate results.
                concentration. When screening, a 96-well plate is used so that the reaction speed should not be fast
+
                            When testing in different enzyme concentrations, calculate fluorescent rE (rate of Emission), plot rE
                in
+
                            with log[E] then get the value of EC<sub>80</sub>. Choose the concentration which is most close to
                order to guarantee reaction holds on after mixing all wells. Also, in order to calculate the initial
+
                            EC<sub>80</sub> value.
                velocity, the relationship of fluorescent intensity and time should be linear. Last but not least,
+
                            <br>
                values of fluorescent intensity should not be very small to provide more accurate results.
+
                        <h5>Index for determination of substrate concentration: Km, kcat</h5>
                <br>
+
                        <p>
                So in order to explore the proper concentration of enzyme, we set 3 dilute gradients for large span.
+
                            With CDC-1 as a substrate, we will measure the kinetic parameters of metallo-beta-lactamases by
                Then around the most fit one set more gradients for smaller span and plot the fluorescent
+
                            Michaelis-Menten plots and Lineweaver-Burk plots and the Michaelis-constant (Km) and catalytic
                intensity–time
+
                            constants (kcat) are determined. The catalytic efficiency (kcat/Km) of MBLs will be calculated.
                curve. All assays are repeated in triplicate at room temperature(around 25°C) and the baseline of
+
                            These
                blank
+
                            data confirm the high efficiency of these enzymes in promoting the hydrolysis of CDC-1, which
                controls is subtracted.
+
                            guarantees a high detection sensitivity of CDC-1.
              </p>
+
                            <br>
 +
                            Additionally, when testing Km constants the concentration of substrate is 8.5μM due to storage
 +
                            necessity. And its value should less than or equal to Km value in HTS system to ensure a mixed order
 +
                            reaction.
 +
                        </p>
 +
                        <h5>Index for entire screening system: Z'-factor<sup>[4]</sup></h5>
 +
                        <p>
 +
                            In order to validate the stability and reliability of this HTS system, a factor called Z’-factor is
 +
                            introduced to assess. It is a relative index to distinguish the target signal with background
 +
                            groups.
 +
                            The range of Z’-factor can be less than zero to 1. If it is more than 0.5, it indicates that this
 +
                            model can be applied in high-throughput screening. <sup>[5]</sup>
 +
                            <br>
 +
                            Equation 1. How to calculate Z’-factor<sup>[4]</sup>
 +
                        </p>
 +
                        <div class="row" style="margin-bottom: 20px"><img
 +
                                src="https://2019.igem.org/wiki/images/b/b2/T--TJUSLS_China--equation1.png" style="padding: 0;"
 +
                                class="mw-100 ts-shadow__lg ts-border-radius__md  col-lg-6 col-md-6 offset-md-3"></div>
 +
                    </div>
 +
                </div>
 
             </div>
 
             </div>
          </div>
+
        </section>
         </div>
+
         <section id="M-I-C" class="ts-block" style="padding-bottom: 0; background-color: #fff;">
        <div class="container">
+
            <div class="container">
          <div class="row">
+
                <div class="ts-title">
            <div class="col-md-12 col-xl-12" data-animate="ts-fadeInUp" data-offset="100">
+
                    <h4>How to evaluate the role of arrows</h4>
              <h5>N+N-1 Principle</h5>
+
                    <h2>Methods to evaluate therapeutic effects</h2>
              <p>Buffer condition is also a key component in HTS system, owing to its huge effect on enzyme activity.
+
                </div>
                After collecting and reading articles about purification of beta-lactamases, we choose PBS as MBLs’
+
                <div class="row">
                reaction circumstance. Also, we added Zn2+ into system as MBLs depends on it.
+
                    <div class="col-md-12 col-xl-12" data-animate="ts-fadeInUp" data-offset="100">
                However, the concentration of each component should be optimized.
+
                        <p>
                Therefore, this is a multivariate experiment. All the experimental test groups are designed following
+
                            We will examine whether the antibiotic is hydrolyzed by beta-lactamase by UV-vis spectroscopy. According
                the “N+N-1” rule, avoiding setting unnecessary groups.<sup>[1]</sup>
+
                            to the degree of decomposition of cefazolin, the inhibition rate of the corresponding inhibitor was
                <br>
+
                            calculated, and the IC<sub>50</sub> of the inhibitor combined with cefazolin in the condition of live
              </p>
+
                            bacteria was
              <div class="row" style="margin-bottom: 20px"><img
+
                            obtained through the inhibition rate, so as to evaluate the therapeutic effect of dual drug combination.
                  src="https://2019.igem.org/wiki/images/e/e1/T--TJUSLS_China--chart.png" style="padding: 0;"
+
                        </p>
                  class="mw-100 ts-shadow__lg ts-border-radius__md col-lg-6 col-md-6 offset-md-3">
+
                        <h3>Principles</h3>
              </div>
+
                        <h5>
              <p style="text-align: center">
+
                            UV-vis spectroscopy
                Chart 1 Experimental groups of buffer conditions
+
                        </h5>
                <br>
+
                        <p>
                *means standard value, the concentration of NDM-23 is relevant to EC80 value(see this part in Test),
+
                            Beta-lactam antibiotics inhibit bacterial cell wall formation by binding to the bacterial transpeptidase
                NaCl and pH value
+
                            via the c-n bond on the beta-lactam ring. beta-lactamase hydrolyzes the C-N bond of the beta-lactam ring
                is relevant to PBS solution and Zn2+ is relevant to reports.
+
                            causing antibiotics to fail. The result of hydrolyzing cephalosporins is a decrease of the absorption
              </p>
+
                            characteristic of the C–N bond (typically at ~260 nm), which can be observed by UV-Vis spectroscopy. We
              <h3>Test</h3>
+
                            take advantage of this spectroscopic change to determine if the antibiotic is broken down.
              <h5>Index for determination of enzyme concentration: R<sup>2</sup>, EC<sub>80</sub></h5>
+
                            <sup>[6]</sup>
              <p>
+
                        </p>
                In order to calculate the initial velocity, the relationship of fluorescent intensity and time should
+
                        <div class="row">
                be
+
                            <img src="https://2019.igem.org/wiki/images/6/65/T--TJUSLS_China--UV-visspectroscopy.jpg" alt=""
                linear fit. <strong>R<sup>2</sup></strong> (Coefficient of determination) is computed as a value
+
                                class="mw-100 ts-shadow__lg ts-border-radius__md col-md-6 col-lg-6" style="margin-bottom: 20px">
                between
+
                        </div>
                0 and 1. The higher the
+
                        <h5>Determination of antibiotic concentration and bacterial solution concentration in the reaction system
                value, the better the linear fit.
+
                        </h5>
                <br>
+
                        <p>
                Values of fluorescent intensity should not be very small to provide more accurate results.
+
                            We chose 250 μM of cefazolin, because the peak concentration of cefazolin in human serum is 250 μM, and
                 When testing in different enzyme concentrations, calculate fluorescent rE (rate of Emission), plot rE
+
                            using this value
                with log[E] then get the value of EC<sub>80</sub>. Choose the concentration which is most close to
+
                            can make our evaluation of therapeutic effect closer to human condition. <sup>[7]</sup> the same time,
                EC<sub>80</sub> value.
+
                            we conducted orthogonal
                <br>
+
                            experiments on the induction time and concentration of bacterial strain, used EDTA as a positive control
                 <h5>Index for determination of substrate concentration: Km, kcat</h5>
+
                            to test the
 +
                            decomposition capacity of bacterial strain, measured the IC<sub>50</sub> value of EDTA<sup>[8]</sup>,
 +
                            and compared it with the literature
 +
                            value of the drug-resistant strain producing beta-lactamase naturally, and selected the determination
 +
                            condition closer
 +
                            to the literature value as the standard for the preparation of bacterial solution.
 +
                        </p>
 +
                        <div class="row">
 +
                            <img src="https://2019.igem.org/wiki/images/f/f8/T--TJUSLS_China--design-add.jpg" alt=""
 +
                                class="mw-100 ts-shadow__lg ts-border-radius__md col-md-5 col-lg-5" style="margin-bottom: 20px">
 +
                        </div>
 +
 
 +
                        <h5>Negative and Blank Controls</h5>
 +
                        <p>
 +
                            To ensure the accuracy, we designed the following experiment as controls.
 +
                            <br>
 +
                            1. The extracted beta-lactamase protein was mixed with antibiotics, and the absorbance value of the
 +
                            specific absorption peak obtained by the antibiotics was continuously measured to see whether there was
 +
                            a trend of decrease.
 +
                            <br>
 +
                            2. E. coli with the MBL gene was mixed with antibiotics and specific absorption peaks of antibiotics
 +
                            were determined to demonstrate the expression and function of beta-lactamase in E. coli.
 +
                            <br>
 +
                            3. E. coli without the beta-lactamase gene and the buffer used to prepare Escherichia coli suspension
 +
                            was mixed with the antibiotics separately and specific absorption peaks of the antibiotics were
 +
                            continuously determined to prove that beta-lactamase broke down the antibiotics.
 +
                            <br>
 +
                            4. We mixed several lactam and non-lactam kinds of antibiotics with E. coli strains that had transferred
 +
                            with beta-lactamase separately, and determined the specific absorption peaks of each antibiotic to prove
 +
                            that our enzyme was indeed beta-lactamase.
 +
                        </p>
 +
                        <h3>Test</h3>
 +
                        <h5>Index for assessment of inhibitory ability: IC<sub>50</sub></h5>
 +
                        <p>
 +
                            Different concentrations of inhibitors were added into system to plot the curve of inhibitory rate to
 +
                            log[I]. In vitro, substrate CDC-1 was still used in system to demonstrate the change of fluorescent
 +
                            intensity. However, the initial value and final value of absorbance displayed by antibiotics were
 +
                            calculated to show the change of absorbance value using Nanodrop microspectrophotometer in vivo.
 +
                            <sup>[9]</sup>
 +
                        </p>
 +
                        <div class="row">
 +
                            <img src="https://2019.igem.org/wiki/images/f/f5/T--TJUSLS_China--equation2.png"
 +
                                class="mw-100 ts-shadow__lg ts-border-radius__md col-md-6 col-lg-6" style="margin-bottom: 20px">
 +
                        </div>
 +
                    </div>
 +
                 </div>
 +
            </div>
 +
        </section>
 +
        <!-- end mic -->
 +
 
 +
        <!-- REFERENCE *******************************************************************************************-->
 +
        <section id="References" class="ts-block ts-separate-bg-element"
 +
                data-bg-image="https://2019.igem.org/wiki/images/c/c5/T--TJUSLS_China--bg-pattern-dot.png"
 +
                data-bg-size="inherit" data-bg-image-opacity=".1" data-bg-repeat="repeat">
 +
            <div class="container">
 +
                 <h3>Reference</h3>
 
                 <p>
 
                 <p>
                  With CDC-1 as a substrate, we will measure the kinetic parameters of metallo-beta-lactamases by
+
                    [1] Assay Platform for Clinically Relevant Metallo-beta-lactamases. Sander S. van Berkel, Jürgen Brem, Anna
                  Michaelis-Menten plots and Lineweaver-Burk plots and the Michaelis-constant (Km) and catalytic
+
                    M.
                  constants (kcat) are determined. The catalytic efficiency (kcat/Km) of MBLs will be calculated.
+
                    Rydzik, Ramya Salimraj, Ricky Cain, Anil Verma, Raymond J. Owens, Colin W. G. Fishwick, James Spencer, and
                  These
+
                    Christopher J. Schofield. Journal of Medicinal Chemistry 2013 56 (17), 6945-6953
                  data confirm the high efficiency of these enzymes in promoting the hydrolysis of CDC-1, which
+
                    <br>
                  guarantees a high detection sensitivity of CDC-1.
+
                    [2] Xiana Qian, Shuangzhan Zhang, Shuyuan Xue, Wuyu Mao, Minqiu Xu, Weipan Xu, Hexin Xie. A
                  <br>
+
                    carbapenem-based
                  Additionally, when testing Km constants the concentration of substrate is 8.5μM due to storage
+
                    fluorescence assay for the screening of metallo-beta-lactamase inhibitors. Bioorganic & Medicinal Chemistry
                  necessity. And its value should less than or equal to Km value in HTS system to ensure a mixed order
+
                    Letters. Volume 29, Issue 2, 2019:322-325.
                  reaction.
+
                    <br>
 +
                    [3] Sun, & Tung-Tien. (2004). Opinion: excessive trust in authorities and its influence on experimental
 +
                    design. Nature Reviews Molecular Cell Biology, 5(7), 577-581.
 +
                    <br>
 +
                    [4] Zhang, J.-H., Chung, T. D. Y., & Oldenburg, K. R. (1999). A Simple Statistical Parameter for Use in
 +
                    Evaluation and Validation of High Throughput Screening Assays. Journal of Biomolecular Screening, 4(2),
 +
                    67–73.
 +
                    <br>
 +
                    [5] Wang Si-wen, Chen Xiang-dong, Wang Hui et al. Establishment of high-throughput screening model for
 +
                    β-lactamase inhibitor. Chinese Journal of Antibiotics. 2013, 38(2):102-105.
 +
                    <br>
 +
                    [6] Ke-Wu Yang, Yajun Zhou, Ying Ge and Yuejuan Zhang, Real-time activity monitoring of New Delhi
 +
                    metallo-b-lactamase-1 in living bacterial cells by UV-Vis spectroscopy,Chem. Commun., 2017, 53, 8014--8017
 +
                    <br>
 +
                    [7] T.Li,Q.Wang,F.Chen,X.Li,S.Luo,H.Fang,D.Wang,Z.Li,X.Hou and H. Wang, PLoS One, 2013, 8, e61914.
 +
                    <br>
 +
                    [8] J. Ma, S. McLeod, K. MacCormack, S. Sriram, N. Gao, A. L. Breeze and J. Hu, Angew. Chem., Int. Ed.,
 +
                    2014, 53, 2130.
 +
                    <br>
 +
                    [9] C. Dalvit, E. Ardini, G. P. Fogliatto, N. Mongelli and M. Veronesi, Drug Discov. Today, 2004, 9,
 +
                    595−602.
 
                 </p>
 
                 </p>
                <h5>Index for entire screening system: Z'-factor<sup>[4]</sup></h5>
 
                <p>
 
                  In order to validate the stability and reliability of this HTS system, a factor called Z’-factor is
 
                  introduced to assess. It is a relative index to distinguish the target signal with background
 
                  groups.
 
                  The range of Z’-factor can be less than zero to 1. If it is more than 0.5, it indicates that this
 
                  model can be applied in high-throughput screening. <sup>[5]</sup>
 
                  <br>
 
                  Equation 1. How to calculate Z’-factor<sup>[4]</sup>
 
                </p>
 
                <div class="row" style="margin-bottom: 20px"><img
 
                    src="https://2019.igem.org/wiki/images/b/b2/T--TJUSLS_China--equation1.png" style="padding: 0;"
 
                    class="mw-100 ts-shadow__lg ts-border-radius__md  col-lg-6 col-md-6 offset-md-3"></div>
 
 
             </div>
 
             </div>
          </div>
+
        </section>
 +
    </main>
 +
    <div class="footer">
 +
        <div id="hui1">
 +
            <img id="xiaohui" src="https://2019.igem.org/wiki/images/f/f6/T--TJUSLS_China--Attr-5%282%29.png" alt="">
 
         </div>
 
         </div>
      </section>
+
         <div id="hui2">
      <section id="M-I-C" class="ts-block" style="padding-bottom: 0; background-color: #fff;">
+
             <img id="yuanhui" src="https://2019.igem.org/wiki/images/9/98/T--TJUSLS_China--Attr-6_3.png" alt="">
         <div class="container">
+
          <div class="ts-title">
+
             <h4>How to evaluate the role of arrows</h4>
+
            <h2>Methods to evaluate therapeutic effects</h2>
+
          </div>
+
          <div class="row">
+
            <div class="col-md-12 col-xl-12" data-animate="ts-fadeInUp" data-offset="100">
+
              <p>
+
                We will examine whether the antibiotic is hydrolyzed by beta-lactamase by UV-vis spectroscopy. According
+
                to the degree of decomposition of cefazolin, the inhibition rate of the corresponding inhibitor was
+
                calculated, and the IC<sub>50</sub> of the inhibitor combined with cefazolin in the condition of live
+
                bacteria was
+
                obtained through the inhibition rate, so as to evaluate the therapeutic effect of dual drug combination.
+
              </p>
+
              <h3>Principles</h3>
+
              <h5>
+
                UV-vis spectroscopy
+
              </h5>
+
              <p>
+
                Beta-lactam antibiotics inhibit bacterial cell wall formation by binding to the bacterial transpeptidase
+
                via the c-n bond on the beta-lactam ring. beta-lactamase hydrolyzes the C-N bond of the beta-lactam ring
+
                causing antibiotics to fail. The result of hydrolyzing cephalosporins is a decrease of the absorption
+
                characteristic of the C–N bond (typically at ~260 nm), which can be observed by UV-Vis spectroscopy. We
+
                take advantage of this spectroscopic change to determine if the antibiotic is broken down.
+
                <sup>[6]</sup>
+
              </p>
+
              <div class="row">
+
                <img src="https://2019.igem.org/wiki/images/6/65/T--TJUSLS_China--UV-visspectroscopy.jpg" alt=""
+
                  class="mw-100 ts-shadow__lg ts-border-radius__md col-md-6 col-lg-6" style="margin-bottom: 20px">
+
              </div>
+
              <h5>Determination of antibiotic concentration and bacterial solution concentration in the reaction system
+
              </h5>
+
              <p>
+
                We chose 250 μM of cefazolin, because the peak concentration of cefazolin in human serum is 250 μM, and
+
                using this value
+
                can make our evaluation of therapeutic effect closer to human condition. <sup>[7]</sup> the same time,
+
                we conducted orthogonal
+
                experiments on the induction time and concentration of bacterial strain, used EDTA as a positive control
+
                to test the
+
                decomposition capacity of bacterial strain, measured the IC<sub>50</sub> value of EDTA<sup>[8]</sup>,
+
                and compared it with the literature
+
                value of the drug-resistant strain producing beta-lactamase naturally, and selected the determination
+
                condition closer
+
                to the literature value as the standard for the preparation of bacterial solution.
+
              </p>
+
              <div class="row">
+
                <img src="https://2019.igem.org/wiki/images/f/f8/T--TJUSLS_China--design-add.jpg" alt=""
+
                  class="mw-100 ts-shadow__lg ts-border-radius__md col-md-5 col-lg-5" style="margin-bottom: 20px">
+
              </div>
+
 
+
              <h5>Negative and Blank Controls</h5>
+
              <p>
+
                To ensure the accuracy, we designed the following experiment as controls.
+
                <br>
+
                1. The extracted beta-lactamase protein was mixed with antibiotics, and the absorbance value of the
+
                specific absorption peak obtained by the antibiotics was continuously measured to see whether there was
+
                a trend of decrease.
+
                <br>
+
                2. E. coli with the MBL gene was mixed with antibiotics and specific absorption peaks of antibiotics
+
                were determined to demonstrate the expression and function of beta-lactamase in E. coli.
+
                <br>
+
                3. E. coli without the beta-lactamase gene and the buffer used to prepare Escherichia coli suspension
+
                was mixed with the antibiotics separately and specific absorption peaks of the antibiotics were
+
                continuously determined to prove that beta-lactamase broke down the antibiotics.
+
                <br>
+
                4. We mixed several lactam and non-lactam kinds of antibiotics with E. coli strains that had transferred
+
                with beta-lactamase separately, and determined the specific absorption peaks of each antibiotic to prove
+
                that our enzyme was indeed beta-lactamase.
+
              </p>
+
              <h3>Test</h3>
+
              <h5>Index for assessment of inhibitory ability: IC<sub>50</sub></h5>
+
              <p>
+
                Different concentrations of inhibitors were added into system to plot the curve of inhibitory rate to
+
                log[I]. In vitro, substrate CDC-1 was still used in system to demonstrate the change of fluorescent
+
                intensity. However, the initial value and final value of absorbance displayed by antibiotics were
+
                calculated to show the change of absorbance value using Nanodrop microspectrophotometer in vivo.
+
                <sup>[9]</sup>
+
              </p>
+
              <div class="row">
+
                <img src="https://2019.igem.org/wiki/images/f/f5/T--TJUSLS_China--equation2.png"
+
                  class="mw-100 ts-shadow__lg ts-border-radius__md col-md-6 col-lg-6" style="margin-bottom: 20px">
+
              </div>
+
            </div>
+
          </div>
+
 
         </div>
 
         </div>
      </section>
+
        <div class="ctu" align="center">
      <!-- end mic -->
+
            <h5 style="font-weight: bold;">CONTACT US</h5>
 
+
             <hr width="50%">
      <!-- REFERENCE *******************************************************************************************-->
+
      <section id="References" class="ts-block ts-separate-bg-element"
+
        data-bg-image="https://2019.igem.org/wiki/images/c/c5/T--TJUSLS_China--bg-pattern-dot.png"
+
        data-bg-size="inherit" data-bg-image-opacity=".1" data-bg-repeat="repeat">
+
        <div class="container">
+
          <h3>Reference</h3>
+
          <p>
+
            [1] Assay Platform for Clinically Relevant Metallo-beta-lactamases. Sander S. van Berkel, Jürgen Brem, Anna
+
            M.
+
            Rydzik, Ramya Salimraj, Ricky Cain, Anil Verma, Raymond J. Owens, Colin W. G. Fishwick, James Spencer, and
+
            Christopher J. Schofield. Journal of Medicinal Chemistry 2013 56 (17), 6945-6953
+
             <br>
+
            [2] Xiana Qian, Shuangzhan Zhang, Shuyuan Xue, Wuyu Mao, Minqiu Xu, Weipan Xu, Hexin Xie. A
+
            carbapenem-based
+
            fluorescence assay for the screening of metallo-beta-lactamase inhibitors. Bioorganic & Medicinal Chemistry
+
            Letters. Volume 29, Issue 2, 2019:322-325.
+
            <br>
+
            [3] Sun, & Tung-Tien. (2004). Opinion: excessive trust in authorities and its influence on experimental
+
            design. Nature Reviews Molecular Cell Biology, 5(7), 577-581.
+
            <br>
+
            [4] Zhang, J.-H., Chung, T. D. Y., & Oldenburg, K. R. (1999). A Simple Statistical Parameter for Use in
+
            Evaluation and Validation of High Throughput Screening Assays. Journal of Biomolecular Screening, 4(2),
+
            67–73.
+
            <br>
+
            [5] Wang Si-wen, Chen Xiang-dong, Wang Hui et al. Establishment of high-throughput screening model for
+
            β-lactamase inhibitor. Chinese Journal of Antibiotics. 2013, 38(2):102-105.
+
            <br>
+
            [6] Ke-Wu Yang, Yajun Zhou, Ying Ge and Yuejuan Zhang, Real-time activity monitoring of New Delhi
+
            metallo-b-lactamase-1 in living bacterial cells by UV-Vis spectroscopy,Chem. Commun., 2017, 53, 8014--8017
+
            <br>
+
            [7] T.Li,Q.Wang,F.Chen,X.Li,S.Luo,H.Fang,D.Wang,Z.Li,X.Hou and H. Wang, PLoS One, 2013, 8, e61914.
+
            <br>
+
            [8] J. Ma, S. McLeod, K. MacCormack, S. Sriram, N. Gao, A. L. Breeze and J. Hu, Angew. Chem., Int. Ed.,
+
            2014, 53, 2130.
+
            <br>
+
            [9] C. Dalvit, E. Ardini, G. P. Fogliatto, N. Mongelli and M. Veronesi, Drug Discov. Today, 2004, 9,
+
            595−602.
+
          </p>
+
 
         </div>
 
         </div>
      </section>
+
         <div style="margin: 0 auto;">
    </main>
+
            <div class="ctus" style="text-align: center">
    <div class="footer">
+
      <div id="hui1">
+
         <img id="xiaohui" src="https://2019.igem.org/wiki/images/f/f6/T--TJUSLS_China--Attr-5%282%29.png" alt="">
+
      </div>
+
      <div id="hui2">
+
        <img id="yuanhui" src="https://2019.igem.org/wiki/images/9/98/T--TJUSLS_China--Attr-6_3.png" alt="">
+
      </div>
+
      <div class="ctu" align="center">
+
        <h5 style="font-weight: bold;">CONTACT US</h5>
+
        <hr width="50%">
+
      </div>
+
      <div style="margin: 0 auto;">
+
        <div class="ctus" style="text-align: center">
+
  
 +
            </div>
 +
            <div class="ctus" style="text-align: center">
 +
                <p>
 +
                    <img src="https://2019.igem.org/wiki/images/b/b8/T--TJUSLS_China--Attr-email.png" alt="">&nbsp;&nbsp;EMAIL
 +
                    <br />
 +
                    tju2019igem@163.com
 +
                </p>
 +
            </div>
 +
            <div class="ctus" style="text-align: center">
 +
                <p>
 +
                    <img src="https://2019.igem.org/wiki/images/4/4c/T--TJUSLS_China--Attr-addressl.png"
 +
                        alt="">&nbsp;&nbsp;ADDRESS
 +
                    <br />
 +
                    No.92 Weijin Road, Nankai District, Tianjin, China
 +
                </p>
 +
            </div>
 
         </div>
 
         </div>
        <div class="ctus" style="text-align: center">
 
          <p>
 
            <img src="https://2019.igem.org/wiki/images/b/b8/T--TJUSLS_China--Attr-email.png" alt="">&nbsp;&nbsp;EMAIL
 
            <br />
 
            tju2019igem@163.com
 
          </p>
 
        </div>
 
        <div class="ctus" style="text-align: center">
 
          <p>
 
            <img src="https://2019.igem.org/wiki/images/4/4c/T--TJUSLS_China--Attr-addressl.png"
 
              alt="">&nbsp;&nbsp;ADDRESS
 
            <br />
 
            No.92 Weijin Road, Nankai District, Tianjin, China
 
          </p>
 
        </div>
 
      </div>
 
 
     </div>
 
     </div>
 
     <!--end #footer-->
 
     <!--end #footer-->
  </section>
+
</section>
  <!--end page-->
+
<!--end page-->
  <div id="totop" style="text-decoration: none">
+
<div id="totop" style="text-decoration: none">
        <a href="javascript:;" id="btn2"style="font-size: 25px;color: white;text-decoration: none">↑</a>
+
    <a href="javascript:;" id="btn2"style="font-size: 25px;color: white;text-decoration: none">↑</a>
    </div>
+
</div>
    <script type="text/javascript">
+
<script type="text/javascript">
        // 1.找到页面中的按钮
+
    // 1.找到页面中的按钮
        var totop = document.getElementById("totop");
+
    var totop = document.getElementById("totop");
        var timer = null;
+
    var timer = null;
        // 2.给按钮绑定点击事件
+
    // 2.给按钮绑定点击事件
        totop.onclick = function () {
+
    totop.onclick = function () {
            // 周期性定时器
+
        // 周期性定时器
            timer = setInterval(function () {
+
        timer = setInterval(function () {
                // 3.获取滚动条距离浏览器顶端的距离
+
            // 3.获取滚动条距离浏览器顶端的距离
                var backTop = document.documentElement.scrollTop || document.body.scrollTop;
+
            var backTop = document.documentElement.scrollTop || document.body.scrollTop;
                // 越滚越慢
+
            // 越滚越慢
                var speedTop = backTop / 5;
+
            var speedTop = backTop / 5;
                document.documentElement.scrollTop = backTop - speedTop;
+
            document.documentElement.scrollTop = backTop - speedTop;
                if (backTop == 0) {
+
            if (backTop == 0) {
                    clearInterval(timer);
+
                clearInterval(timer);
                }
+
            }
            }, 30);
+
        }, 30);
        }
+
    }
    </script>
+
</script>
  <script>
+
<script>
 
     if (document.getElementsByClassName("ts-full-screen").length) {
 
     if (document.getElementsByClassName("ts-full-screen").length) {
      document.getElementsByClassName("ts-full-screen")[0].style.height = window.innerHeight + "px";
+
        document.getElementsByClassName("ts-full-screen")[0].style.height = window.innerHeight + "px";
 
     }
 
     }
  </script>
+
</script>
  <script type="text/javascript"
+
<script type="text/javascript"
    src="https://2019.igem.org/Team:TJUSLS_China/assets/js/jqueryminjs?action=raw&ctype=text/javascript"></script>
+
        src="https://2019.igem.org/Team:TJUSLS_China/assets/js/jqueryminjs?action=raw&ctype=text/javascript"></script>
  <script type="text/javascript"
+
<script type="text/javascript"
    src="https://2019.igem.org/Team:TJUSLS_China/bootstrapmin400js?action=raw&ctype=text/javascript"></script>
+
        src="https://2019.igem.org/Team:TJUSLS_China/bootstrapmin400js?action=raw&ctype=text/javascript"></script>
  <script type="text/javascript"
+
<script type="text/javascript"
    src="https://2019.igem.org/Team:TJUSLS_China/imagesloadedpkgdminjs?action=raw&ctype=text/javascript"></script>
+
        src="https://2019.igem.org/Team:TJUSLS_China/imagesloadedpkgdminjs?action=raw&ctype=text/javascript"></script>
  <script type="text/javascript"
+
<script type="text/javascript"
    src="https://2019.igem.org/Team:TJUSLS_China/isinviewportjqueryjs?action=raw&ctype=text/javascript"></script>
+
        src="https://2019.igem.org/Team:TJUSLS_China/isinviewportjqueryjs?action=raw&ctype=text/javascript"></script>
  <script type="text/javascript"
+
<script type="text/javascript"
    src="https://2019.igem.org/Team:TJUSLS_China/scrollajqueryminjs?action=raw&ctype=text/javascript"></script>
+
        src="https://2019.igem.org/Team:TJUSLS_China/scrollajqueryminjs?action=raw&ctype=text/javascript"></script>
  <script type="text/javascript"
+
<script type="text/javascript"
    src="https://2019.igem.org/Team:TJUSLS_China/jqueryvalidateminjs?action=raw&ctype=text/javascript"></script>
+
        src="https://2019.igem.org/Team:TJUSLS_China/jqueryvalidateminjs?action=raw&ctype=text/javascript"></script>
  <script type="text/javascript"
+
<script type="text/javascript"
    src="https://2019.igem.org/Team:TJUSLS_China/designcustomjs?action=raw&ctype=text/javascript"></script>
+
        src="https://2019.igem.org/Team:TJUSLS_China/designcustomjs?action=raw&ctype=text/javascript"></script>
  <script>
+
<script>
 
     $(document).ready(function () {
 
     $(document).ready(function () {
      $(window).scrollTop(0);
+
        $(window).scrollTop(0);
      $('#toOverview').click(function () {
+
        $('#toOverview').click(function () {
        $("html,body").animate({ scrollTop: $("#Overview").offset().top - 80 }, 400);
+
            $("html,body").animate({ scrollTop: $("#Overview").offset().top - 80 }, 400);
      })
+
        })
      $('#toGCD').click(function () {
+
        $('#toGCD').click(function () {
        $("html,body").animate({ scrollTop: $("#G-C-D").offset().top - 80 }, 400);
+
            $("html,body").animate({ scrollTop: $("#G-C-D").offset().top - 80 }, 400);
      })
+
        })
      $('#toEFHS').click(function () {
+
        $('#toEFHS').click(function () {
        $("html,body").animate({ scrollTop: $("#E-F-H-S").offset().top - 80 }, 400);
+
            $("html,body").animate({ scrollTop: $("#E-F-H-S").offset().top - 80 }, 400);
      })
+
        })
      $('#toMETE').click(function () {
+
        $('#toMETE').click(function () {
        $("html,body").animate({ scrollTop: $("#M-I-C").offset().top - 80 }, 400);
+
            $("html,body").animate({ scrollTop: $("#M-I-C").offset().top - 80 }, 400);
      })
+
        })
      $('#toReferences').click(function () {
+
        $('#toReferences').click(function () {
        $("html,body").animate({ scrollTop: $("#References").offset().top - 80 }, 400);
+
            $("html,body").animate({ scrollTop: $("#References").offset().top - 80 }, 400);
      })
+
        })
 
     });
 
     });
  </script>
+
</script>
  
 
</body>
 
</body>

Revision as of 14:11, 21 October 2019

Design

click anywhere to close

Design

Overview

Issues

Since antibiotic-resistant bacteria producing beta-lactamases spread widely around the world, it is urgently needed to find novel therapies against diseases related to beta-lactamases. Compared with design and synthesis from beginning of new compounds which can be used in beta-lactam/beta-lactamase inhibitors antibiotic-resistant drugs, to find naturally existing inhibitors is a faster way.

Solutions

Some new-type fluorescent probes have been reported in assays detecting beta-lactamases. Now that it can reflect the activity of beta-lactamases, fluorescent intensity would decrease as soon as extent inhibitors compounds play roles. Thus it performs a direct way to high-throughput screen potential inhibitors of metallo-beta-lactamases. Based on synthetic biology methods, we design our parts to realize our project goals, including inhibitors screening and assessment.

How to obtain our target metallo-beta-lactamases

Genetic Circuit Design

Principles

The very first step of our project is to attain the protein, that is to say, to build gene expression circuits, consisting of promoter, tag, target sequence, and other necessary parts.

After conducting a series of permutation and combination, we used our expression system engineering bacteria E.coli to assess fitness of circuits on whether the circuit can express the protein smoothly, whether the protein form an inclusion body, whether the protein has considerable enzyme activity and so on. In this way we can find the most adaptive circuit.

Iterations

After we tested circuits made up of only T7 promotor, His tag and beta-lactamase, we disappointedly found the effect unsatisfactory. The expression quantity is too low to take further purification or the protein all become inclusion body. Through our analysis, we discover we probably need a tag which improves dissolution or stimulates expression quantity.

Test

The way to test circuits is to transform them into E.coli engineering bacteria to find out if it can work appropriately. A successful circuit can perform and provide soluble target protein to us, however, most circuits and expression system mismatch so they are not able to produce useful protein then iterations exist. The “proteinality” matters.

How to find arrows targeting MBLs

Establishment of Fluorescent HTS system

Principles

Mechanism of Fluorescent Probe CDC-1[1]

Consisting of three parts, CDC-1 is a extend-spectrum fluorescent probe which can be used for reflecting the role of beta-lactamases. A lactam ring is designed as the hydrolyze site, a --CH2 plays the role as a bridge and an umbelliferone as the activatable fluorophore when hydrolyzing based on FRET.
According to reports[2], there are several detecting substrate that have been designed, specifically and extend-spectrally. Due to what we’ve chosen to express are subclass B1 and B3 beta-lactamases, CDC-1 is suitable to detect in HTS system.

Pre-experiment

The very first thing in the process of HTS system establishment is to determine suitable enzyme concentration. When screening, a 96-well plate is used so that the reaction speed should not be fast in order to guarantee reaction holds on after mixing all wells. Also, in order to calculate the initial velocity, the relationship of fluorescent intensity and time should be linear. Last but not least, values of fluorescent intensity should not be very small to provide more accurate results.
So in order to explore the proper concentration of enzyme, we set 3 dilute gradients for large span. Then around the most fit one set more gradients for smaller span and plot the fluorescent intensity–time curve. All assays are repeated in triplicate at room temperature(around 25°C) and the baseline of blank controls is subtracted.

N+N-1 Principle

Buffer condition is also a key component in HTS system, owing to its huge effect on enzyme activity. After collecting and reading articles about purification of beta-lactamases, we choose PBS as MBLs’ reaction circumstance. Also, we added Zn2+ into system as MBLs depends on it. However, the concentration of each component should be optimized. Therefore, this is a multivariate experiment. All the experimental test groups are designed following the “N+N-1” rule, avoiding setting unnecessary groups.[1]

Chart 1 Experimental groups of buffer conditions
*means standard value, the concentration of NDM-23 is relevant to EC80 value(see this part in Test), NaCl and pH value is relevant to PBS solution and Zn2+ is relevant to reports.

Test

Index for determination of enzyme concentration: R2, EC80

In order to calculate the initial velocity, the relationship of fluorescent intensity and time should be linear fit. R2 (Coefficient of determination) is computed as a value between 0 and 1. The higher the value, the better the linear fit.
Values of fluorescent intensity should not be very small to provide more accurate results. When testing in different enzyme concentrations, calculate fluorescent rE (rate of Emission), plot rE with log[E] then get the value of EC80. Choose the concentration which is most close to EC80 value.

Index for determination of substrate concentration: Km, kcat

With CDC-1 as a substrate, we will measure the kinetic parameters of metallo-beta-lactamases by Michaelis-Menten plots and Lineweaver-Burk plots and the Michaelis-constant (Km) and catalytic constants (kcat) are determined. The catalytic efficiency (kcat/Km) of MBLs will be calculated. These data confirm the high efficiency of these enzymes in promoting the hydrolysis of CDC-1, which guarantees a high detection sensitivity of CDC-1.
Additionally, when testing Km constants the concentration of substrate is 8.5μM due to storage necessity. And its value should less than or equal to Km value in HTS system to ensure a mixed order reaction.

Index for entire screening system: Z'-factor[4]

In order to validate the stability and reliability of this HTS system, a factor called Z’-factor is introduced to assess. It is a relative index to distinguish the target signal with background groups. The range of Z’-factor can be less than zero to 1. If it is more than 0.5, it indicates that this model can be applied in high-throughput screening. [5]
Equation 1. How to calculate Z’-factor[4]

How to evaluate the role of arrows

Methods to evaluate therapeutic effects

We will examine whether the antibiotic is hydrolyzed by beta-lactamase by UV-vis spectroscopy. According to the degree of decomposition of cefazolin, the inhibition rate of the corresponding inhibitor was calculated, and the IC50 of the inhibitor combined with cefazolin in the condition of live bacteria was obtained through the inhibition rate, so as to evaluate the therapeutic effect of dual drug combination.

Principles

UV-vis spectroscopy

Beta-lactam antibiotics inhibit bacterial cell wall formation by binding to the bacterial transpeptidase via the c-n bond on the beta-lactam ring. beta-lactamase hydrolyzes the C-N bond of the beta-lactam ring causing antibiotics to fail. The result of hydrolyzing cephalosporins is a decrease of the absorption characteristic of the C–N bond (typically at ~260 nm), which can be observed by UV-Vis spectroscopy. We take advantage of this spectroscopic change to determine if the antibiotic is broken down. [6]

Determination of antibiotic concentration and bacterial solution concentration in the reaction system

We chose 250 μM of cefazolin, because the peak concentration of cefazolin in human serum is 250 μM, and using this value can make our evaluation of therapeutic effect closer to human condition. [7] the same time, we conducted orthogonal experiments on the induction time and concentration of bacterial strain, used EDTA as a positive control to test the decomposition capacity of bacterial strain, measured the IC50 value of EDTA[8], and compared it with the literature value of the drug-resistant strain producing beta-lactamase naturally, and selected the determination condition closer to the literature value as the standard for the preparation of bacterial solution.

Negative and Blank Controls

To ensure the accuracy, we designed the following experiment as controls.
1. The extracted beta-lactamase protein was mixed with antibiotics, and the absorbance value of the specific absorption peak obtained by the antibiotics was continuously measured to see whether there was a trend of decrease.
2. E. coli with the MBL gene was mixed with antibiotics and specific absorption peaks of antibiotics were determined to demonstrate the expression and function of beta-lactamase in E. coli.
3. E. coli without the beta-lactamase gene and the buffer used to prepare Escherichia coli suspension was mixed with the antibiotics separately and specific absorption peaks of the antibiotics were continuously determined to prove that beta-lactamase broke down the antibiotics.
4. We mixed several lactam and non-lactam kinds of antibiotics with E. coli strains that had transferred with beta-lactamase separately, and determined the specific absorption peaks of each antibiotic to prove that our enzyme was indeed beta-lactamase.

Test

Index for assessment of inhibitory ability: IC50

Different concentrations of inhibitors were added into system to plot the curve of inhibitory rate to log[I]. In vitro, substrate CDC-1 was still used in system to demonstrate the change of fluorescent intensity. However, the initial value and final value of absorbance displayed by antibiotics were calculated to show the change of absorbance value using Nanodrop microspectrophotometer in vivo. [9]

Reference

[1] Assay Platform for Clinically Relevant Metallo-beta-lactamases. Sander S. van Berkel, Jürgen Brem, Anna M. Rydzik, Ramya Salimraj, Ricky Cain, Anil Verma, Raymond J. Owens, Colin W. G. Fishwick, James Spencer, and Christopher J. Schofield. Journal of Medicinal Chemistry 2013 56 (17), 6945-6953
[2] Xiana Qian, Shuangzhan Zhang, Shuyuan Xue, Wuyu Mao, Minqiu Xu, Weipan Xu, Hexin Xie. A carbapenem-based fluorescence assay for the screening of metallo-beta-lactamase inhibitors. Bioorganic & Medicinal Chemistry Letters. Volume 29, Issue 2, 2019:322-325.
[3] Sun, & Tung-Tien. (2004). Opinion: excessive trust in authorities and its influence on experimental design. Nature Reviews Molecular Cell Biology, 5(7), 577-581.
[4] Zhang, J.-H., Chung, T. D. Y., & Oldenburg, K. R. (1999). A Simple Statistical Parameter for Use in Evaluation and Validation of High Throughput Screening Assays. Journal of Biomolecular Screening, 4(2), 67–73.
[5] Wang Si-wen, Chen Xiang-dong, Wang Hui et al. Establishment of high-throughput screening model for β-lactamase inhibitor. Chinese Journal of Antibiotics. 2013, 38(2):102-105.
[6] Ke-Wu Yang, Yajun Zhou, Ying Ge and Yuejuan Zhang, Real-time activity monitoring of New Delhi metallo-b-lactamase-1 in living bacterial cells by UV-Vis spectroscopy,Chem. Commun., 2017, 53, 8014--8017
[7] T.Li,Q.Wang,F.Chen,X.Li,S.Luo,H.Fang,D.Wang,Z.Li,X.Hou and H. Wang, PLoS One, 2013, 8, e61914.
[8] J. Ma, S. McLeod, K. MacCormack, S. Sriram, N. Gao, A. L. Breeze and J. Hu, Angew. Chem., Int. Ed., 2014, 53, 2130.
[9] C. Dalvit, E. Ardini, G. P. Fogliatto, N. Mongelli and M. Veronesi, Drug Discov. Today, 2004, 9, 595−602.