Difference between revisions of "Team:TAS Taipei"

 
(70 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
<html><head>
+
<html lang="en">
−
        <title>TAS_Taipei</title>
+
 
−
        <!--Personal-->
+
<head>
−
        <style>
+
    <meta charset="UTF-8">
−
                html, body {
+
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
−
        margin: 0;
+
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
−
        font-family: 'Nexa light', sans-serif;
+
    <meta name="renderer" content="webkit">
−
        font-size: 16px;
+
    <title>TAS_Taipei</title>
−
        background-color: #FFFFFF;
+
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 +
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
 +
<style type='text/css'>
 +
 
 +
body {
 +
background-color: black;
 +
height: 100vh;
 +
overflow-x: hidden;
 +
width: 100vw;
 +
}
 +
 
 +
#top_title {
 +
display: none;
 +
}
 +
 
 +
#content {
 +
width: 100%;
 +
margin: 0;
 +
padding: 0;
 +
background: white !important;
 +
}
 +
 
 +
#top_menu_under {
 +
height: 6px !important;
 +
}
 +
 
 +
/* Add a black background color to the top navigation */
 +
 
 +
.topnav {
 +
background-color: #333;
 +
    overflow-x: hidden;
 +
top: 0;
 +
}
 +
 
 +
.row {
 +
    width: 100%;
 +
    background-color: white;
 +
    margin-left: 0 !important;
 +
    margin-right: 0 !important;
 +
}
 +
 
 +
.col-xs-1,
 +
.col-sm-1,
 +
.col-md-1,
 +
.col-lg-1,
 +
.col-xs-2,
 +
.col-sm-2,
 +
.col-md-2,
 +
.col-lg-2,
 +
.col-xs-3,
 +
.col-sm-3,
 +
.col-md-3,
 +
.col-lg-3,
 +
.col-xs-4,
 +
.col-sm-4,
 +
.col-md-4,
 +
.col-lg-4,
 +
.col-xs-5,
 +
.col-sm-5,
 +
.col-md-5,
 +
.col-lg-5,
 +
.col-xs-6,
 +
.col-sm-6,
 +
.col-md-6,
 +
.col-lg-6,
 +
.col-xs-7,
 +
.col-sm-7,
 +
.col-md-7,
 +
.col-lg-7,
 +
.col-xs-8,
 +
.col-sm-8,
 +
.col-md-8,
 +
.col-lg-8,
 +
.col-xs-9,
 +
.col-sm-9,
 +
.col-md-9,
 +
.col-lg-9,
 +
.col-xs-10,
 +
.col-sm-10,
 +
.col-md-10,
 +
.col-lg-10,
 +
.col-xs-11,
 +
.col-sm-11,
 +
.col-md-11,
 +
.col-lg-11,
 +
.col-xs-12,
 +
.col-sm-12,
 +
.col-md-12,
 +
.col-lg-12 {
 +
    position: relative;
 +
    min-height: 1px;
 +
    padding-right: 15px;
 +
    padding-left: 15px;
 +
    float: left;
 +
    background-color: none;
 +
}
 +
 
 +
@media screen and (min-width: 768px) {
 +
    .col-xs-12 {
 +
        width: 100%;
 
     }
 
     }
−
     * {
+
     .col-xs-11 {
−
         box-sizing: border-box;
+
         width: 91.66666667%;
 
     }
 
     }
−
     .toolbar {
+
     .col-xs-10 {
−
        min-height: 64px;
+
         width: 83.33333333%;
−
        max-height: 64px;
+
−
         width: 100%;
+
−
        background-color: whitesmoke;
+
−
        position: fixed;
+
−
        z-index: 2;
+
 
     }
 
     }
−
     .spacer {
+
     .col-xs-9 {
−
         width: 100%;
+
         width: 75%;
−
        height: 64px;
+
 
     }
 
     }
−
   
+
     .col-xs-8 {
−
     .nav-tab {
+
         width: 66.66666667%;
−
        position: static !important;
+
−
        display:inline-block;
+
−
        min-height: 53px;
+
−
        max-height: 53px;
+
−
        line-height: 48px;
+
−
         width: 9.8%;
+
−
        text-align: center;
+
−
        color: black;
+
−
        text-decoration: none;
+
−
        font-size: 1vw;
+
−
        margin-top: 1vh;
+
 
     }
 
     }
−
      
+
     .col-xs-7 {
−
     .nav-tab-special {
+
        width: 58.33333333%;
−
         position: static !important;
+
    }
−
         display:inline-block;
+
     .col-xs-6 {
−
         min-height: 64px;
+
         width: 50%;
−
         max-height: 64px;
+
    }
−
         line-height: 64px;
+
    .col-xs-5 {
−
         width: 15%;
+
         width: 41.66666667%;
−
         text-align: center;
+
    }
−
         color: black !important;
+
    .col-xs-4 {
−
         text-decoration: none;
+
        width: 33.33333333%;
−
         font-weight: bold;
+
    }
−
         font-size: 32px;
+
    .col-xs-3 {
−
         font-size: 1vw;
+
         width: 25%;
 +
    }
 +
    .col-xs-2 {
 +
        width: 16.66666667%;
 +
    }
 +
    .col-xs-1 {
 +
         width: 8.33333333%;
 +
    }
 +
    .col-xs-pull-12 {
 +
        right: 100%;
 +
    }
 +
    .col-xs-pull-11 {
 +
         right: 91.66666667%;
 +
    }
 +
    .col-xs-pull-10 {
 +
        right: 83.33333333%;
 +
    }
 +
    .col-xs-pull-9 {
 +
         right: 75%;
 +
    }
 +
    .col-xs-pull-8 {
 +
         right: 66.66666667%;
 +
    }
 +
    .col-xs-pull-7 {
 +
        right: 58.33333333%;
 +
    }
 +
    .col-xs-pull-6 {
 +
         right: 50%;
 +
    }
 +
    .col-xs-pull-5 {
 +
         right: 41.66666667%;
 +
    }
 +
    .col-xs-pull-4 {
 +
        right: 33.33333333%;
 +
    }
 +
    .col-xs-pull-3 {
 +
         right: 25%;
 +
    }
 +
    .col-xs-pull-2 {
 +
        right: 16.66666667%;
 +
    }
 +
    .col-xs-pull-1 {
 +
         right: 8.33333333%;
 +
    }
 +
    .col-xs-pull-0 {
 +
        right: 0;
 +
    }
 +
    .col-xs-push-12 {
 +
         left: 100%;
 +
    }
 +
    .col-xs-push-11 {
 +
        left: 91.66666667%;
 +
    }
 +
    .col-xs-push-10 {
 +
        left: 83.33333333%;
 +
    }
 +
    .col-xs-push-9 {
 +
        left: 75%;
 +
    }
 +
    .col-xs-push-8 {
 +
        left: 66.66666667%;
 +
    }
 +
    .col-xs-push-7 {
 +
        left: 58.33333333%;
 +
    }
 +
    .col-xs-push-6 {
 +
        left: 50%;
 +
    }
 +
    .col-xs-push-5 {
 +
        left: 41.66666667%;
 +
    }
 +
    .col-xs-push-4 {
 +
        left: 33.33333333%;
 +
    }
 +
    .col-xs-push-3 {
 +
        left: 25%;
 +
    }
 +
    .col-xs-push-2 {
 +
        left: 16.66666667%;
 
     }
 
     }
−
   
+
     .col-xs-push-1 {
−
     .content {
+
         left: 8.33333333%;
−
         margin-left: 240px;
+
−
        z-index: 1;
+
 
     }
 
     }
−
   
+
     .col-xs-push-0 {
−
     .sidenav {
+
−
        height: 100%;
+
−
        width: 18%;
+
−
        position: fixed;
+
−
        z-index: 1;
+
−
        top: 0;
+
 
         left: 0;
 
         left: 0;
−
        background-color: azure;
 
−
        overflow-x: hidden;
 
−
        padding-top: 20px;
 
 
     }
 
     }
−
   
+
     .col-xs-offset-12 {
−
     .sidenav div {
+
         margin-left: 100%;
−
         padding: 8px 6px 8px 16px;
+
−
        text-decoration: none;
+
−
        font-size: 0.9em !important;
+
−
        color: #000000;
+
−
        display: block;
+
 
     }
 
     }
−
     .subnavdiv {
+
     .col-xs-offset-11 {
−
        padding: 8px 6px 8px 16px !important;
+
         margin-left: 91.66666667%;
−
         margin-left: 20px !important;
+
−
        font-size: 0.7em !important;
+
 
     }
 
     }
−
     .thirdsubnavdiv {
+
     .col-xs-offset-10 {
−
        padding: 8px 6px 8px 16px !important;
+
         margin-left: 83.33333333%;
−
         margin-left: 40px !important;
+
−
        font-size: 0.5em !important;
+
 
     }
 
     }
−
   
+
     .col-xs-offset-9 {
−
     .sidenav div:hover {
+
         margin-left: 75%;
−
         color: #808080;
+
−
        cursor: pointer;
+
 
     }
 
     }
−
      
+
     .col-xs-offset-8 {
−
    @media screen and (max-height: 450px) {
+
         margin-left: 66.66666667%;
−
         .sidenav {padding-top: 15px;}
+
−
        .sidenav a {font-size: 18px;}
+
 
     }
 
     }
−
   
+
     .col-xs-offset-7 {
−
     .slideshow-image {
+
         margin-left: 58.33333333%;
−
         width: 100%;
+
−
        max-height: 900px;
+
 
     }
 
     }
−
   
+
     .col-xs-offset-6 {
−
     .hidden-image {
+
         margin-left: 50%;
−
         display: none;
+
 
     }
 
     }
−
   
+
     .col-xs-offset-5 {
−
     .paragraph {
+
         margin-left: 41.66666667%;
−
         min-height: 45%;
+
 
     }
 
     }
−
   
+
     .col-xs-offset-4 {
−
     .splash{
+
         margin-left: 33.33333333%;
−
         position: relative;
+
−
        z-index: 1; top: 64px; width: 100%;
+
 
     }
 
     }
−
      
+
     .col-xs-offset-3 {
−
     .splash-image {
+
        margin-left: 25%;
 +
    }
 +
     .col-xs-offset-2 {
 +
        margin-left: 16.66666667%;
 +
    }
 +
    .col-xs-offset-1 {
 +
        margin-left: 8.33333333%;
 +
    }
 +
    .col-xs-offset-0 {
 +
        margin-left: 0;
 +
    }
 +
}
 +
 
 +
@media screen and (min-width: 768px) and (max-width: 991px) {
 +
    .col-sm-12 {
 
         width: 100%;
 
         width: 100%;
 
     }
 
     }
−
     .splash h1 {
+
     .col-sm-11 {
−
         position: absolute;
+
         width: 91.66666667%;
−
         bottom: 40%;
+
    }
−
         color: white;
+
    .col-sm-10 {
−
         text-shadow: 0px 10px 30px black;
+
         width: 83.33333333%;
−
         font-size: 5em;
+
    }
−
         left: 0;
+
    .col-sm-9 {
 +
         width: 75%;
 +
    }
 +
    .col-sm-8 {
 +
        width: 66.66666667%;
 +
    }
 +
    .col-sm-7 {
 +
        width: 58.33333333%;
 +
    }
 +
    .col-sm-6 {
 +
        width: 50%;
 +
    }
 +
    .col-sm-5 {
 +
        width: 41.66666667%;
 +
    }
 +
    .col-sm-4 {
 +
        width: 33.33333333%;
 +
    }
 +
    .col-sm-3 {
 +
        width: 25%;
 +
         text-align: center;
 +
    }
 +
    .col-sm-2 {
 +
         width: 16.66666667%;
 +
    }
 +
    .col-sm-1 {
 +
        width: 8.33333333%;
 +
    }
 +
    .col-sm-pull-12 {
 +
         right: 100%;
 +
    }
 +
    .col-sm-pull-11 {
 +
        right: 91.66666667%;
 +
    }
 +
    .col-sm-pull-10 {
 +
        right: 83.33333333%;
 +
    }
 +
    .col-sm-pull-9 {
 +
        right: 75%;
 +
    }
 +
    .col-sm-pull-8 {
 +
        right: 66.66666667%;
 +
    }
 +
    .col-sm-pull-7 {
 +
        right: 58.33333333%;
 +
    }
 +
    .col-sm-pull-6 {
 +
        right: 50%;
 +
    }
 +
    .col-sm-pull-5 {
 +
        right: 41.66666667%;
 +
    }
 +
    .col-sm-pull-4 {
 +
        right: 33.33333333%;
 +
    }
 +
    .col-sm-pull-3 {
 +
        right: 25%;
 +
    }
 +
    .col-sm-pull-2 {
 +
        right: 16.66666667%;
 +
    }
 +
    .col-sm-pull-1 {
 +
        right: 8.33333333%;
 +
    }
 +
    .col-sm-pull-0 {
 
         right: 0;
 
         right: 0;
 
     }
 
     }
−
     #content {
+
     .col-sm-push-12 {
−
         position: absolute;
+
         left: 100%;
−
         width: 100vw;
+
    }
−
         height: 100vh;
+
    .col-sm-push-11 {
−
         top: 8px !important;
+
         left: 91.66666667%;
 +
    }
 +
    .col-sm-push-10 {
 +
         left: 83.33333333%;
 +
    }
 +
    .col-sm-push-9 {
 +
         left: 75%;
 +
    }
 +
    .col-sm-push-8 {
 +
        left: 66.66666667%;
 +
    }
 +
    .col-sm-push-7 {
 +
        left: 58.33333333%;
 +
    }
 +
    .col-sm-push-6 {
 +
        left: 50%;
 +
    }
 +
    .col-sm-push-5 {
 +
        left: 41.66666667%;
 +
    }
 +
    .col-sm-push-4 {
 +
        left: 33.33333333%;
 +
    }
 +
    .col-sm-push-3 {
 +
        left: 25%;
 +
    }
 +
    .col-sm-push-2 {
 +
        left: 16.66666667%;
 +
    }
 +
    .col-sm-push-1 {
 +
        left: 8.33333333%;
 +
    }
 +
    .col-sm-push-0 {
 
         left: 0;
 
         left: 0;
−
        padding: 0;
 
−
        margin: /*auto;*/ 0;
 
 
     }
 
     }
−
     #main {
+
     .col-sm-offset-12 {
−
        background-color: #FFFFFF;
+
         margin-left: 100%;
−
        /*margin: auto;
+
−
        padding: 40px;
+
−
         margin-left: 15vw;*/
+
 
     }
 
     }
−
     .center-image {
+
     .col-sm-offset-11 {
−
         display: block;
+
         margin-left: 91.66666667%;
−
        width: 50%;
+
−
        position: relative;
+
 
     }
 
     }
−
   
+
     .col-sm-offset-10 {
−
     .detail-text {
+
         margin-left: 83.33333333%;
−
         padding-top: 0px !important;
+
−
        padding-left: 32px;
+
−
        padding-bottom: 0px !important;
+
−
        font-size: 1em !important;
+
−
        max-width: 80%;
+
−
        padding: 32px;
+
−
        text-align: justify;
+
−
        line-height: 1.5;
+
−
        text-justify: inter-word;
+
 
     }
 
     }
−
 
+
     .col-sm-offset-9 {
−
     .detail-text b {
+
         margin-left: 75%;
−
         font-weight: 600 !important;
+
 
     }
 
     }
−
 
+
     .col-sm-offset-8 {
−
     h2 {
+
         margin-left: 66.66666667%;
−
        font-size: 2em !important;
+
−
        font-weight: 900 !important;
+
−
    }
+
−
   
+
−
    h3 {
+
−
         font-size: 1.5em !important;
+
−
        font-weight: 800 !important;
+
 
     }
 
     }
−
 
+
     .col-sm-offset-7 {
−
     h5 {
+
         margin-left: 58.33333333%;
−
         font-size: 1.25em !important;
+
−
        font-weight: 700 !important;  
+
 
     }
 
     }
 +
    .col-sm-offset-6 {
 +
        margin-left: 50%;
 +
    }
 +
    .col-sm-offset-5 {
 +
        margin-left: 41.66666667%;
 +
    }
 +
    .col-sm-offset-4 {
 +
        margin-left: 33.33333333%;
 +
    }
 +
    .col-sm-offset-3 {
 +
        margin-left: 25%;
 +
    }
 +
    .col-sm-offset-2 {
 +
        margin-left: 16.66666667%;
 +
    }
 +
    .col-sm-offset-1 {
 +
        margin-left: 8.33333333%;
 +
    }
 +
    .col-sm-offset-0 {
 +
        margin-left: 0;
 +
    }
 +
}
  
−
    .t1:hover {
+
@media screen and (min-width: 992px) and (max-width: 1200px) {
−
        background-image: -webkit-linear-gradient(bottom, #C0392B 10%, #C0392B 90%);
+
    .col-md-12 {
−
         color: white !important;
+
         width: 100%;
 
     }
 
     }
−
   
+
     .col-md-11 {
−
     .t2:hover {
+
         width: 91.66666667%;
−
         background-image: -webkit-linear-gradient(bottom, #DC7633 10%, #DC7633 90%);
+
−
        color: white !important;
+
 
     }
 
     }
−
   
+
     .col-md-10 {
−
     .t3:hover {
+
         width: 83.33333333%;
−
        background-image: -webkit-linear-gradient(bottom, #D4AC0D 10%, #D4AC0D 90%);
+
−
         color: white !important;
+
 
     }
 
     }
−
   
+
     .col-md-9 {
−
     .t4:hover {
+
         width: 75%;
−
         background-image: -webkit-linear-gradient(bottom, #F7DC6F 10%, #F7DC6F 90%);
+
−
        color: white !important;
+
 
     }
 
     }
−
   
+
     .col-md-8 {
−
     .t5:hover {
+
         width: 66.66666667%;
−
         background-image: -webkit-linear-gradient(bottom, #27AE60 10%, #27AE60 90%);
+
−
        color: white !important;
+
 
     }
 
     }
−
   
+
     .col-md-7 {
−
     .t6:hover {
+
         width: 58.33333333%;
−
         background-image: -webkit-linear-gradient(bottom, #3498DB 10%, #3498DB 90%);
+
−
        color: white !important;
+
 
     }
 
     }
−
     .t7:hover {
+
     .col-md-6 {
−
         background-image: -webkit-linear-gradient(bottom, #A569BD 10%, #A569BD 90%);
+
         width: 50%;
−
        color: white !important;
+
 
     }
 
     }
−
   
+
     .col-md-5 {
−
     .t8:hover {
+
         width: 41.66666667%;
−
         background-image: -webkit-linear-gradient(bottom, #884EA0 10%, #884EA0 90%);
+
−
        color: white !important;
+
 
     }
 
     }
−
 
+
     .col-md-4 {
−
     .t1 {
+
         width: 33.33333333%;
−
         background-image: -webkit-linear-gradient(bottom, #C0392B 10%, whitesmoke 0%);
+
 
     }
 
     }
−
   
+
     .col-md-3 {
−
     .t2 {
+
         width: 25%;
−
         background-image: -webkit-linear-gradient(bottom, #DC7633 10%, whitesmoke 0%);
+
        text-align: center;
 
     }
 
     }
−
   
+
     .col-md-2 {
−
     .t3 {
+
         width: 16.66666667%;
−
         background-image: -webkit-linear-gradient(bottom, #D4AC0D 10%, whitesmoke 0%);
+
 
     }
 
     }
−
   
+
     .col-md-1 {
−
     .t4 {
+
         width: 8.33333333%;
−
         background-image: -webkit-linear-gradient(bottom, #F7DC6F 10%, whitesmoke 0%);
+
 
     }
 
     }
−
   
+
     .col-md-pull-12 {
−
     .t5 {
+
         right: 100%;
−
        background-image: -webkit-linear-gradient(bottom, #27AE60 10%, whitesmoke 0%);
+
−
    } 
+
−
   
+
−
    .t6 {
+
−
         background-image: -webkit-linear-gradient(bottom, #3498DB 10%, whitesmoke 0%);
+
 
     }
 
     }
−
   
+
     .col-md-pull-11 {
−
     .t7 {
+
         right: 91.66666667%;
−
         background-image: -webkit-linear-gradient(bottom, #A569BD 10%, whitesmoke 0%);
+
 
     }
 
     }
−
   
+
     .col-md-pull-10 {
−
     .t8 {
+
         right: 83.33333333%;
−
         background-image: -webkit-linear-gradient(bottom, #884EA0 10%, whitesmoke 0%);
+
 
     }
 
     }
−
      
+
     .col-md-pull-9 {
−
    section {
+
         right: 75%;
−
         margin-left: 40px;
+
 
     }
 
     }
−
   
+
     .col-md-pull-8 {
−
     .image-card {
+
         right: 66.66666667%;
−
        display: inline-block !important;
+
−
        background-color: white;
+
−
         box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.5);
+
−
        display: inline-block !important;
+
−
        height: auto;
+
−
        width: auto;
+
−
        vertical-align: middle;
+
−
        margin-left: 20%;
+
−
        max-width: 40%;
+
−
        max-height: 40%;
+
−
        padding: 5px;
+
 
     }
 
     }
−
   
+
     .col-md-pull-7 {
−
     .image-card img  {
+
         right: 58.33333333%;
−
         width: 100%;
+
−
        height: 100%;
+
 
     }
 
     }
−
   
+
     .col-md-pull-6 {
−
     .image-card p {
+
         right: 50%;
−
        text-align: justify;
+
−
        text-justify: inter-word;
+
−
        font-size: 12px;
+
−
         padding: 10px;
+
 
     }
 
     }
 +
    .col-md-pull-5 {
 +
        right: 41.66666667%;
 +
    }
 +
    .col-md-pull-4 {
 +
        right: 33.33333333%;
 +
    }
 +
    .col-md-pull-3 {
 +
        right: 25%;
 +
    }
 +
    .col-md-pull-2 {
 +
        right: 16.66666667%;
 +
    }
 +
    .col-md-pull-1 {
 +
        right: 8.33333333%;
 +
    }
 +
    .col-md-pull-0 {
 +
        right: 0;
 +
    }
 +
    .col-md-push-12 {
 +
        left: 100%;
 +
    }
 +
    .col-md-push-11 {
 +
        left: 91.66666667%;
 +
    }
 +
    .col-md-push-10 {
 +
        left: 83.33333333%;
 +
    }
 +
    .col-md-push-9 {
 +
        left: 75%;
 +
    }
 +
    .col-md-push-8 {
 +
        left: 66.66666667%;
 +
    }
 +
    .col-md-push-7 {
 +
        left: 58.33333333%;
 +
    }
 +
    .col-md-push-6 {
 +
        left: 50%;
 +
    }
 +
    .col-md-push-5 {
 +
        left: 41.66666667%;
 +
    }
 +
    .col-md-push-4 {
 +
        left: 33.33333333%;
 +
    }
 +
    .col-md-push-3 {
 +
        left: 25%;
 +
    }
 +
    .col-md-push-2 {
 +
        left: 16.66666667%;
 +
    }
 +
    .col-md-push-1 {
 +
        left: 8.33333333%;
 +
    }
 +
    .col-md-push-0 {
 +
        left: 0;
 +
    }
 +
    .col-md-offset-12 {
 +
        margin-left: 100%;
 +
    }
 +
    .col-md-offset-11 {
 +
        margin-left: 91.66666667%;
 +
    }
 +
    .col-md-offset-10 {
 +
        margin-left: 83.33333333%;
 +
    }
 +
    .col-md-offset-9 {
 +
        margin-left: 75%;
 +
    }
 +
    .col-md-offset-8 {
 +
        margin-left: 66.66666667%;
 +
    }
 +
    .col-md-offset-7 {
 +
        margin-left: 58.33333333%;
 +
    }
 +
    .col-md-offset-6 {
 +
        margin-left: 50%;
 +
    }
 +
    .col-md-offset-5 {
 +
        margin-left: 41.66666667%;
 +
    }
 +
    .col-md-offset-4 {
 +
        margin-left: 33.33333333%;
 +
    }
 +
    .col-md-offset-3 {
 +
        margin-left: 25%;
 +
    }
 +
    .col-md-offset-2 {
 +
        margin-left: 16.66666667%;
 +
    }
 +
    .col-md-offset-1 {
 +
        margin-left: 8.33333333%;
 +
    }
 +
    .col-md-offset-0 {
 +
        margin-left: 0;
 +
    }
 +
}
  
−
     .row::after {
+
@media screen and (min-width: 1201px) {
−
        content: "";
+
     .col-lg-12 {
−
        clear: both;
+
−
        display: table;
+
 
         width: 100%;
 
         width: 100%;
 
     }
 
     }
−
         </style>
+
    .col-lg-11 {
−
         <script>
+
         width: 91.66666667%;
−
            function doScrolling(elementY, duration) {  
+
    }
−
     var startingY = window.pageYOffset;
+
    .col-lg-10 {
−
     var diff = elementY - startingY;
+
         width: 83.33333333% !important;
−
     var start;
+
    }
 +
    .col-lg-9 {
 +
        width: 75%;
 +
    }
 +
     .col-lg-8 {
 +
        width: 66.66666667%;
 +
     }
 +
    .col-lg-7 {
 +
        width: 58.33333333%;
 +
     }
 +
    .col-lg-6 {
 +
        width: 50%;
 +
    }
 +
    .col-lg-5 {
 +
        width: 41.66666667%;
 +
    }
 +
    .col-lg-4 {
 +
        width: 33.33333333%;
 +
    }
 +
    .col-lg-3 {
 +
        width: 25%;
 +
        text-align: center;
 +
    }
 +
    .col-lg-2 {
 +
        width: 16.66666667%;
 +
    }
 +
    .col-lg-1 {
 +
        width: 8.33333333%;
 +
    }
 +
    .col-lg-pull-12 {
 +
        right: 100%;
 +
    }
 +
    .col-lg-pull-11 {
 +
        right: 91.66666667%;
 +
    }
 +
    .col-lg-pull-10 {
 +
        right: 83.33333333%;
 +
    }
 +
    .col-lg-pull-9 {
 +
        right: 75%;
 +
    }
 +
    .col-lg-pull-8 {
 +
        right: 66.66666667%;
 +
    }
 +
    .col-lg-pull-7 {
 +
        right: 58.33333333%;
 +
    }
 +
    .col-lg-pull-6 {
 +
        right: 50%;
 +
    }
 +
    .col-lg-pull-5 {
 +
        right: 41.66666667%;
 +
    }
 +
    .col-lg-pull-4 {
 +
        right: 33.33333333%;
 +
    }
 +
    .col-lg-pull-3 {
 +
        right: 25%;
 +
    }
 +
    .col-lg-pull-2 {
 +
        right: 16.66666667%;
 +
    }
 +
    .col-lg-pull-1 {
 +
        right: 8.33333333%;
 +
    }
 +
    .col-lg-pull-0 {
 +
        right: 0;
 +
    }
 +
    .col-lg-push-12 {
 +
        left: 100%;
 +
    }
 +
    .col-lg-push-11 {
 +
        left: 91.66666667%;
 +
    }
 +
    .col-lg-push-10 {
 +
        left: 83.33333333%;
 +
    }
 +
    .col-lg-push-9 {
 +
        left: 75%;
 +
    }
 +
    .col-lg-push-8 {
 +
        left: 66.66666667%;
 +
    }
 +
    .col-lg-push-7 {
 +
        left: 58.33333333%;
 +
    }
 +
    .col-lg-push-6 {
 +
        left: 50%;
 +
    }
 +
    .col-lg-push-5 {
 +
        left: 41.66666667%;
 +
    }
 +
    .col-lg-push-4 {
 +
        left: 33.33333333%;
 +
    }
 +
    .col-lg-push-3 {
 +
        left: 25%;
 +
    }
 +
    .col-lg-push-2 {
 +
        left: 16.66666667%;
 +
    }
 +
    .col-lg-push-1 {
 +
        left: 8.33333333%;
 +
    }
 +
    .col-lg-push-0 {
 +
        left: 0;
 +
    }
 +
    .col-lg-offset-12 {
 +
        margin-left: 100%;
 +
    }
 +
    .col-lg-offset-11 {
 +
        margin-left: 91.66666667%;
 +
    }
 +
    .col-lg-offset-10 {
 +
        margin-left: 83.33333333%;
 +
    }
 +
    .col-lg-offset-9 {
 +
        margin-left: 75%;
 +
    }
 +
    .col-lg-offset-8 {
 +
        margin-left: 66.66666667%;
 +
    }
 +
    .col-lg-offset-7 {
 +
        margin-left: 58.33333333%;
 +
    }
 +
    .col-lg-offset-6 {
 +
        margin-left: 50%;
 +
    }
 +
    .col-lg-offset-5 {
 +
        margin-left: 41.66666667%;
 +
    }
 +
    .col-lg-offset-4 {
 +
        margin-left: 33.33333333%;
 +
    }
 +
    .col-lg-offset-3 {
 +
        margin-left: 25%;
 +
    }
 +
    .col-lg-offset-2 {
 +
        margin-left: 16.66666667%;
 +
    }
 +
    .col-lg-offset-1 {
 +
        margin-left: 8.33333333%;
 +
    }
 +
    .col-lg-offset-0 {
 +
        margin-left: 0;
 +
    }
 +
}
 +
/* Style the links inside the navigation bar */
  
−
    // Bootstrap our animation - it will get called right before next frame shall be rendered.
+
.topnav a {
−
    window.requestAnimationFrame(function step(timestamp) {
+
float: left;
−
        if (!start) start = timestamp;
+
color: #f2f2f2;
−
        // Elapsed milliseconds since start of scrolling.
+
text-align: center;
−
        var time = timestamp - start;
+
padding: 14px 15px;
−
        // Get percent of completion in range [0, 1].
+
text-decoration: none;
−
         var percent = Math.min(time / duration, 1);
+
font-size: 17px;
 +
position: relative;
 +
top: 1vh;
 +
         left: 17vw;
 +
}
  
−
        window.scrollTo(0, startingY + diff * percent);
+
/* Change the color of links on hover */
  
−
        // Proceed with animation as long as we wanted it to.
+
.topnav a:hover {
−
        if (time < duration) {
+
color: black;
−
            window.requestAnimationFrame(step);
+
−
        }
+
−
    })
+
 
}
 
}
  
−
function getElementY(element) {
+
.logo {
−
    return window.pageYOffset + element.getBoundingClientRect().top;
+
width: 4.5vw;
 +
height: 7vh;
 +
position: relative;
 +
top: -0.5vh;
 +
        left: -16vw;
 
}
 
}
  
−
function handleClick(e) {
+
 
−
    doScrolling(getElementY(document.getElementById(e.srcElement.getAttribute("id").substring(0, e.srcElement.getAttribute("id").length-6) + "Content")), 750);
+
 
−
    return false;
+
body {
 +
font-family: Verdana, sans-serif;
 +
margin: 0
 
}
 
}
  
−
        </script>
 
−
    </head>
 
−
    <body>
 
−
      <div id="content">
 
−
            <nav class="toolbar">
 
−
                <a class="nav-tab nav-tab-special" href="/">TAS Taipei</a>
 
−
                <a class="nav-tab t1" href="/project.html" style="background-image: -webkit-linear-gradient(bottom, #C0392B 10%, #C0392B 90%); color: #FFFFFF;">Project</a>
 
−
                <a class="nav-tab t2" href="/experiments.html">Experiments</a>
 
−
                <a class="nav-tab t3" href="/prototype.html">Prototype</a>
 
−
                <a class="nav-tab t4" href="/modeling.html">Modeling</a>
 
−
                <a class="nav-tab t5" href="/human.html">Human Practices</a>
 
−
                <a class="nav-tab t6" href="/about.html">About Us</a>
 
−
                <a class="nav-tab t7" href="/safety.html">Safety</a>
 
−
                <a class="nav-tab t8" href="/attributions.html">Attributions</a>
 
−
            </nav>
 
−
            <div id="sidenav" class="sidenav" style="color: azure;">
 
−
              <div style="height: 64px;"></div>
 
−
            <div style="font-weight: bold;" id="sec0Button" onclick="return handleClick(event);">WHAT IS ALDH2 DEFICIENCY?</div><div style="font-weight: bold;" id="sec1Button" onclick="return handleClick(event);">HEALTH CONCERNS &amp; RISKS</div><div style="font-weight: bold;" id="sec2Button" onclick="return handleClick(event);">CURRENT SOLUTIONS</div><div style="font-weight: bold;" id="sec3Button" onclick="return handleClick(event);">OUR GOAL</div><div style="font-weight: bold;" id="sec4Button" onclick="return handleClick(event);">REFERENCES</div></div>
 
−
            <div class="splash">
 
−
                <img class="splash-image" style="width: 100%;" src="https://static.igem.org/mediawiki/2018/3/33/T--TAS_Taipei--alcoholonwall.jpg">
 
−
                <div class="splashText">
 
−
                    <h1 style="text-align:center">PROJECT BACKGROUND</h1>
 
−
                </div>
 
−
            </div>
 
−
            <div id="main" class="content">
 
−
                <div class="spacer"></div>
 
−
            <section id="sec0Content"><h2>WHAT IS ALDH2 DEFICIENCY?</h2><p class="detail-text">ALDH2 deficiency, more commonly known as Alcohol Flushing Syndrome or Asian Glow, is a genetic condition which interferes with the metabolism of alcohol (Figure 1-1). Normally, ethanol is first converted to acetaldehyde (a toxic intermediate) by the enzyme alcohol dehydrogenase (ADH). Then, acetaldehyde is converted to acetate by the enzyme aldehyde dehydrogenase 2 (ALDH2), which is then safely metabolized in the body. People with ALDH2 deficiency, however, have a point mutation in the gene, which produces a less efficient ALDH2 (mutant: ALDH2*2) by lowering the binding affinity to its coenzyme NAD+ (Larson <i>et al.</i>, 2005; Farrés <i>et al.</i>, 1994). The enzymatic activity in individuals who are deficient can be as low as 4% compared to normal ALDH2 (wild type: ALDH2*1) activity (Chen <i>et al.</i>, 2014; Zhou &amp; Weiner, 2000; Farrés <i>et al.</i>, 1994). As a result, acetaldehyde accumulates and induces an inflammatory reaction that causes the skin to flush or appear red after drinking alcohol (Ijiri, 1999). Facial flushing is the most obvious result of ALDH2 deficiency, but symptoms also include “headaches, nausea, dizziness, and cardiac palpitations after consumption of alcoholic beverages” (Chen <i>et al.</i>, 2014).</p><div class="image-card"><img src="https://static.igem.org/mediawiki/2018/6/6e/T--TAS_Taipei--DoublePathway.gif" class="center-image"><p><b>Figure 1-1: Acetaldehyde accumulates in ALDH2 deficient individuals.</b> Ethanol is first converted to a toxic intermediate, acetaldehyde, by alcohol dehydrogenase (ADH). For individuals with wild type ALDH2, acetaldehyde is converted to acetate by ALDH2*1. However, people who are ALDH2 deficient carry the mutant ALDH2*2, which cannot fully convert acetaldehyde into acetate, and acetaldehyde accumulates as a result. (Figure: Caroline C)</p></div><div style="height: 15px;"></div><p class="detail-text">ALDH2 deficiency affects 540 million people--8% of the world population. In East Asia (which includes Japan, China, and Korea), this is a much bigger problem, where the number rises to 36% (Brooks <i>et al.</i>, 2009). In our home, Taiwan, approximately 47% of the population carries this genetic mutation--the highest ALDH2 deficient percentage in the world (Chang <i>et al.</i>, 2017).</p></section><section id="sec1Content"><h2>HEALTH CONCERNS &amp; RISKS</h2><p class="detail-text">One of the biggest problems of ALDH2 deficiency is that while people recognize that flushing occurs, they are not aware that it is actually dangerous. According to our survey, which sampled close to 700 people around Taipei, many people misunderstood the causes and effects of alcohol flushing. For example, many people thought that turning red is the result of low alcohol tolerance, healthy liver functions, and fast metabolism--this is the opposite of the truth! These findings suggest a need for more public awareness about the health implications of ALDH2 deficiency. (To see our survey results, click <a href="’https://static.igem.org/mediawiki/2018/b/b3/T--TAS_Taipei--SurveyResults.pdf’">here</a>)</p><p class="detail-text">Turning red after consuming alcohol may seem like a mere social inconvenience. Yet, behind this red complexion lies a far more serious problem. The <b>International Agency for Research on Cancer classifies acetaldehyde associated with alcohol consumption as a Group 1 carcinogen</b> (IARC, n.d.). Alcohol and acetaldehyde have been shown to reduce thymidine incorporation into DNA, interfering with DNA synthesis (Dreosti <i>et al.</i>, 1981; Seitz &amp; Stickel, 2010). In other studies with human lymphocyte cells, acetaldehyde increased chromosome damage or the frequency of sister-chromatid exchanges (Obe <i>et al.</i>, 1986; Helander &amp; Lindahl-Kiessling, 1991; Maffei <i>et al.</i>, 2002). When rats were exposed to acetaldehyde, inhalation led to abnormal changes in the nasal mucous membrane, such as degeneration of the tissue, increased cell proliferation, and the development of carcinomas (Woutersen <i>et al.</i>, 1986).</p><div class="image-card"><img src="https://static.igem.org/mediawiki/2018/6/60/T--TAS_Taipei--EthanolQt.jpg" class="center-image"><p><b>Figure 1-2: There are 14 grams of ethanol in each serving of alcohol,</b> which is around 148 mL of wine, 355 mL of beer, and 44 mL of spirit such as whiskey or tequila (NIAAA, n.d). (Figure: Caroline C)</p></div><div style="height: 15px;"></div><p class="detail-text">Acetaldehyde levels over 50 μM are considered toxic and cause mutations in DNA (Yamaguchi <i>et al.</i>, 2012; Kocaelli <i>et al.</i>, 2014). In human studies where roughly 2 to 3 servings of alcohol (0.5-0.6 g alcohol/kg body weight) were ingested (Figure 1-2), salivary acetaldehyde levels in some individuals increased to over 100 μM (Homann <i>et al.</i>, 1997a; Yokoyama <i>et al.</i>, 2008), compared to normal levels of &lt;20 μM without drinking (Lachenmeier &amp; Monakhova, 2011). For people who carry normal, functional ALDH2*1, acetaldehyde can quickly get broken down (Figure 1-3).</p><div class="image-card"><img src="https://static.igem.org/mediawiki/2018/e/ec/T--TAS_Taipei--Acetaldehyde.jpg" class="center-image"><p><b>Figure 1-3: Salivary acetaldehyde levels are much higher in heterozygous (ALDH2*1/*2) individuals, compared to homozygous wild type (ALDH2*1/*1) individuals.</b> Acetaldehyde levels were recorded after drinking 0.6 g ethanol/kg body weight. Salivary acetaldehyde levels are also significantly higher than blood acetaldehyde after drinking (Figure from Yokoyama <i>et al.</i>, 2008).</p></div><div style="height: 15px;"></div><p class="detail-text">For those who are ALDH2 deficient <b>and</b> drink, however, acetaldehyde can accumulate to toxic levels. The strongest effects are seen in the mouth. Studies show that after alcohol consumption, salivary acetaldehyde levels are significantly higher than blood acetaldehyde levels (Stornetta <i>et al.</i>, 2018; Yokoyama <i>et al.</i>, 2008) (Figure 1-3).  Since there are other aldehyde dehydrogenases (such as ALDH1A1; Ueshima <i>et al.</i>, 1993) throughout the body that can help metabolize acetaldehyde, blood acetaldehyde concentrations remain relatively low. Most importantly, ALDH2 levels are much higher in the liver, which can break down most acetaldehyde before it enters the bloodstream (Oyama <i>et al.</i>, 2005). Maybe because of this, ALDH2 deficiency does not seem to be directly associated with the development of liver, breast, colorectal, or other common alcohol-related cancers (Väkeväinen <i>et al.</i>, 2000; Chang <i>et al.</i>, 2017).</p><p class="detail-text">These results could also explain why the effects of ALDH2 deficiency are mainly localized rather than widespread throughout the body. <b>Heightened salivary acetaldehyde levels increase the risks of developing esophageal and head and neck cancers.</b> <i>In vivo</i> studies with rats have shown that acetaldehyde administered orally has a tumor-promoting effect (abnormally fast cell growth and division) on the upper respiratory-digestive tract (Homann <i>et al.</i>, 1997b). Depending on how much alcohol is consumed, <b>people with ALDH2 deficiency are two to eight times more likely to develop head and neck cancers </b> (which includes oral cancer, pharyngeal cancer, laryngeal cancer, etc.), and <b>two to twelve times more likely to develop esophageal cancer</b> compared to people with normal ALDH2*1 (Chao <i>et al.</i>, 2000; Yang <i>et al.</i>, 2007; Yokoyama, 2001; Matsuo <i>et al.</i>, 2001; Cui <i>et al.</i>, 2009; Lee <i>et al.</i>, 2007; Wu <i>et al.</i>, 2013; Huang <i>et al.</i>, 2017; Hiraki <i>et al.</i>, 2007).</p></section><section id="sec2Content"><h2>CURRENT SOLUTIONS</h2><p class="detail-text">Today, the solutions for treating flushing include simply using cosmetics to conceal the flushing, or using antihistamines to prevent the release of histamines, which leads to the resulting redness (Chrostek <i>et al.</i>, 2007; Miller <i>et al.</i>, 1998; Quertemont <i>et al.</i>, 2006; Eriksson, 2001). These solutions, however, do not actually address the buildup of acetaldehyde, the main contributor to increased esophageal and head and neck cancers (Sunset, n.d.; Essential AD2, n.d.). On the contrary, these options may actually increase health risks, as they cover up the visible symptoms without reducing acetaldehyde levels (Brooks <i>et al.</i>, 2009). Other treatments include antioxidants that may directly interact with acetaldehyde, but these mainly focused on reducing acetaldehyde accumulation in the blood, instead of directly treating the acetaldehyde accumulation in saliva (Essential AD2, n.d.; Vogt &amp; Richie, 2007).</p></section><section id="sec3Content"><h2>OUR GOAL</h2><p class="detail-text"><b>Our goal is to reduce salivary acetaldehyde levels and the resulting increased cancer risks of ALDH2 deficiency</b> by delivering functional ALDH2. We envision ALDH2 to be delivered either in engineered probiotic strains or as a purified enzyme to maintain ALDH2 levels in the mouth.</p></section><section id="sec4Content"><h2>REFERENCES</h2><p style="padding-top: 0px !important; padding-left: 32px; font-size: 16px !important; max-width: 80%; white-space: pre-wrap; text-align: justify; line-height: 1.3; text-justify: inter-word;">Chang JS, Hsiao JR, Chen CH. (2017). ALDH2 polymorphism and alcohol-related cancers in Asians: a public health perspective. J Biomed Sci. 24(1):19.
 
  
−
Chao YC, Wang LS, Hsieh TY, Chu CW, Chang FY, Chu HC. (2000). Chinese Alcoholic Patients with Esophageal Cancer are Genetically Different from Alcoholics with Acute Pancreatitis and Liver Cirrhosis. Am J Gastroenterol. 95(10):2958-2964.
+
.navbar {
 +
position: fixed;
 +
z-index: 99999;
 +
background-color: whitesmoke;
 +
height: 8vh;
 +
width: 100vw;
 +
top: 2vh;
 +
left: 0;
 +
opacity: 0.8;
 +
}
  
−
Chen CH, Ferreira JCB, Gross ER, Mochly-Rosen D. (2014). Targeting Aldehyde Dehydrogenase 2: New Therapeutic Opportunities. Physiol Rev. 94(1):1-34.
+
.navbar:hover {
 +
opacity: 1;
 +
}
  
−
Chrostek L, Cylwik B, Szmitkowski M. (2007). [Interactions between ethanol and histamine]. Pol Merkur Lekarski. 23(135):225-30.
+
.TASTAIPEI {
 +
        position: absolute;
 +
        z-index: 999;
 +
        top: 2vh;
 +
        color: black !important;
 +
        font-family: 'Nexa light', sans-serif;
 +
        font-weight: 100;
 +
        letter-spacing: 0.5px;
 +
        text-decoration: none !important;
 +
        font-size: larger;
 +
        left: 2vh;
 +
}
  
−
Cui R, Kamatani Y, Takahashi A, Usami M, Hosono N, Kawaguchi T, Tsunoda T, Kamatani N, Kubo M, Nakamura Y, Matsuda K. (2009). Functional variants in ADH1B and ALDH2 coupled with alcohol and smoking synergistically enhance esophageal cancer risk. Gastroenterology. 2009 Nov;137(5):1768-75.
+
.pro {
 +
position: absolute;
 +
z-index: 999;
 +
top: 2vh;
 +
left: 22.5%;
 +
color: black !important;
 +
font-family: 'Nexa light', sans-serif;
 +
font-weight: 100;
 +
letter-spacing: 0.5px;
 +
        text-decoration: none !important;
 +
}
  
−
Eriksson CJ. (2001). The role of acetaldehyde in the actions of alcohol (update 2000). Alcohol Clin Exp Res. 25(5 Suppl ISBRA): 15S–32S.
+
.pro:hover {
 +
cursor: pointer;
 +
color: #918e8e !important;
 +
}
  
−
Dreosti IE, Ballard FJ, Belling GB, Record IR, Manuel SJ, Hetzel BS. (1981). The Effect of Ethanol and Acetaldehyde on DNA Synthesis in Growing Cells and on Fetal Development in the Rat. Alcohol Clin Exp Res. 5(3):357-62.
+
.exp {
 +
position: absolute;
 +
z-index: 999;
 +
top: 2vh;
 +
left: 29.9%;
 +
color: black !important;
 +
font-family: 'Nexa light', sans-serif;
 +
font-weight: 100;
 +
letter-spacing: 0.5px;
 +
        text-decoration: none !important;
 +
        width: 10vw !important;
 +
}
  
−
Essential AD2. (n.d.). DeltaNutra. Retrieved from https://www.deltanutra.com/.
+
.exp:hover {
 +
cursor: pointer;
 +
color: #918e8e !important;
 +
}
  
−
Farrés J, Wang X, Takahashi K, Cunningham SJ, Wang TT, Weiner H. (1994). Effects of changing glutamate 487 to lysine in rat and human liver mitochondrial aldehyde dehydrogenase. A model to study human (Oriental type) class 2 aldehyde dehydrogenase. J Biol Chem. 13;269(19):13854-60.
 
  
−
Fujioka K, Gordon S. (2018). Effects of 'Essential AD2' Supplement on Blood Acetaldehyde Levels in Individuals Who Have Aldehyde Dehydrogenase (ALDH2) Deficiency. Am J Ther. doi: 10.1097/MJT.0000000000000744.
+
.prot {
 +
position: absolute;
 +
z-index: 999;
 +
top: 2vh;
 +
left: 40.5%;
 +
color: black !important;
 +
font-family: 'Nexa light', sans-serif;
 +
font-weight: 100;
 +
letter-spacing: 1px;
 +
        text-decoration: none !important;
 +
}
  
−
Helander A, Lindahl-Kiessling K. (1991). Increased frequency of acetaldehyde-induced sister-chromatid exchanges in human lymphocytes treated with an aldehyde dehydrogenase inhibitor. Mutat Res. 264(3):103-7.
+
.prot:hover {
 +
cursor: pointer;
 +
color: #918e8e !important;
 +
}
  
−
Hiraki A, Matsuo K, Wakai K, Suzuki T, Hasegawa Y, Tajima K. (2007). Gene–gene and gene–environment interactions between alcohol drinking habit and polymorphisms in alcohol‐metabolizing enzyme genes and the risk of head and neck cancer in Japan. Cancer Science. 98: 1087-1091.
+
.mod {
 +
position: absolute;
 +
z-index: 999;
 +
top: 2vh;
 +
left: 49%;
 +
color: black !important;
 +
font-family: 'Nexa light', sans-serif;
 +
font-weight: 100;
 +
letter-spacing: 1px;
 +
        text-decoration: none !important;
 +
}
  
−
Homann N, Jousimies-Somer H, Jokelainen K, Heine R, Salaspuro M. (1997a). High acetaldehyde levels in saliva after ethanol consumption: methodological aspects and pathogenetic implications. Carcinogenesis. 18(9):1739-43.
+
.mod:hover {
 +
cursor: pointer;
 +
color: #918e8e !important;
 +
}
  
−
Homann N, Kärkkäinen P, Koivisto T, Nosova T, Jokelainen K, Salaspuro M. (1997b). Effects of acetaldehyde on cell regeneration and differentiation of the upper gastrointestinal tract mucosa. J Natl Cancer Inst. 89(22):1692-7.
+
.hp {
 +
position: absolute;
 +
z-index: 999;
 +
top: 2vh;
 +
left: 57.5%;
 +
color: black !important;
 +
font-family: 'Nexa light', sans-serif;
 +
font-weight: 100;
 +
letter-spacing: 1px;
 +
        text-decoration: none !important;
 +
}
  
−
Huang CC, Hsiao JR, Lee WT, Lee YC, Ou CY, Chang CC, Lu YC, Huang JS, Wong TY, Chen KC, Tsai ST, Fang SY, Wu JL, Wu YH, Hsueh WT, Yen CJ, Wu SY, Chang JY, Lin CL, Wang YH, Weng YL, Yang HC, Chen YS, Chang JS. (2017). Investigating the Association between Alcohol and Risk of Head and Neck Cancer in Taiwan. Sci Rep. 7(1):9701.
+
.hp:hover {
 +
cursor: pointer;
 +
color: #918e8e !important;
 +
}
  
−
Ijiri I. (1999). [Biological actions of acetaldehyde]. Nihon Hoigaku Zasshi. 53(3):285-95.
+
.as {
 +
position: absolute;
 +
z-index: 999;
 +
top: 2vh;
 +
left: 71.5%;
 +
color: black !important;
 +
font-family: 'Nexa light', sans-serif;
 +
font-weight: 100;
 +
letter-spacing: 1px;
 +
        text-decoration: none !important;
 +
}
  
−
International Agency for Research on Cancer. (n.d.). List of Classifications, Volumes 1-122. Retrieved from https://monographs.iarc.fr/list-of-classifications-volumes/.
+
.as:hover {
 +
cursor: pointer;
 +
color: #918e8e !important;
 +
}
  
−
Kocaelli H, Apaydin A, Aydil B,  Ayhan M, Karadeniz A, Ozel S, Yilmaz E, Akgün B, Eren B. (2014) Evaluation of potential salivary acetaldehyde production from ethanol in oral cancer patients and healthy subjects. Hippokratia. 18(3): 269–274.
+
.safe {
 +
position: absolute;
 +
z-index: 999;
 +
top: 2vh;
 +
left: 80%;
 +
color: black !important;
 +
font-family: 'Nexa light', sans-serif;
 +
font-weight: 100;
 +
letter-spacing: 1px;
 +
        text-decoration: none !important;
 +
}
  
−
Lachenmeier DW, Monakhova YB. (2011). Short-term salivary acetaldehyde increase due to direct exposure to alcoholic beverages as an additional cancer risk factor beyond ethanol metabolism. J Exp Clin Cancer Res. 30(3).
+
.safe:hover {
 +
cursor: pointer;
 +
color: #918e8e !important;
 +
}
  
−
Larson HN, Weiner H, Hurley TD. (2005). Disruption of the Coenzyme Binding Site and Dimer Interface Revealed in the Crystal Structure of Mitochondrial Aldehyde Dehydrogenase “Asian” Variant. J Biol Chem. 280(34):30550-6.
+
.att {
 +
position: absolute;
 +
z-index: 999;
 +
top: 2vh;
 +
left: 86.5%;
 +
color: black !important;
 +
font-family: 'Nexa light', sans-serif;
 +
font-weight: 100;
 +
letter-spacing: 1px;
 +
        text-decoration: none !important;
 +
}
  
−
Lee CH, Lee JM, Wu DC, Goan YG, Chou SH, Wu IC, Kao EL, Chan TF, Huang MC, Chen PS, Lee CY, Huang CT, Huang HL, Hu CY, Hung YH, Wu MT. (2007). Carcinogenetic impact of ADH1B and ALDH2 genes on squamous cell carcinoma risk of the esophagus with regard to the consumption of alcohol, tobacco and betel quid. Int J Cancer. 122(6):1347-56.
+
.att:hover {
 +
cursor: pointer;
 +
color: #918e8e !important;
 +
}
  
−
Maffei F, Forti GC, Castelli E, Stefanini GF, Mattioli S, Hrelia P. (2002). Biomarkers to assess the genetic damage induced by alcohol abuse in human lymphocytes. Mutat Res. 15;514(1-2):49-58.
+
.full {
 +
height: 100vh;
 +
}
  
−
Matsuo K, Hamajima N, Shinoda M, Hatooka S, Inoue M, Takezaki T, Tajima K. (2001). Gene-Environment Interaction between an Aldehyde Dehydrogenase-2 (ALDH2) Polymorphism and Alcohol Consumption for the Risk of Esophageal cancer. Carcinogenesis. 22(6): 913-916.
+
.jumbo {
 +
position: relative;
 +
width: 100vw;
 +
height: 100vh;
 +
top: -2vh;
 +
left: 0;
 +
background-image: url("https://static.igem.org/mediawiki/2018/0/09/T--TAS_Taipei--COVER.jpg");
 +
background-repeat: no-repeat;
 +
background-position: top;
 +
background-size: 100%;
 +
z-index: 999;
 +
}
  
−
Miller NS, Goodwin DW, Jones FC, Gabrielli WF, Pardo MP, Anand MM, Hall TB. (1988). Antihistamine blockade of alcohol-induced flushing in orientals. J Stud Alcohol. 49(1):16-20.
+
.textclass {
 +
font-size: 25px;
 +
}
 +
.abs {
 +
color: black;
 +
font-weight: normal !important;
 +
font-size: 4vh;
 +
text-align: justify;
 +
padding-left: 7vw;
 +
}
  
−
National Institute on Alcohol Abuse and Alcoholism. (n.d.). What Is A Standard Drink?. Retrieved from https://www.niaaa.nih.gov/alcohol-health/overview-alcohol-consumption/what-standard-drink.
+
.absdesc {
 +
color: black;
 +
font-size: 18px !important;
 +
letter-spacing: 0.3px;
 +
text-align: justify;
 +
padding-left: 7vw;
 +
padding-right: 0;
 +
width: 75vw;
 +
}
  
−
Obe G, Jonas R, Schmidt S. (1986). Metabolism of ethanol in vitro produces a compound which induces sister-chromatid exchanges in human peripheral lymphocytes in vitro: acetaldehyde not ethanol is mutagenic. Mutat Res. 174(1):47-51.
+
.emojifont {
 +
    font-size: 18px !important;
 +
    letter-spacing: 0.3px;
 +
text-align: justify;
 +
    width: 1110px;
 +
    padding-left: 5vw;
 +
padding-right: 6% !important;
 +
    padding-top: 7vh;
 +
    z-index: 9999999999;
 +
}
  
−
Oyama T, Isse T, Kagawa N, Kinaga T, Kim YD, Morita M, Sugio K, Weiner H, Yasumoto K, Kawamoto T. (2005). Tissue-distribution of aldehyde dehydrogenase 2 and effects of the ALDH2 gene-disruption on the expression of enzymes involved in alcohol metabolism. Front Biosci. 10:951-60.
+
.botnav {
 +
z-index: 99999999;
 +
width: 100vw;
 +
height: 15vh;
 +
position: absolute;
 +
        top: 212vh;
 +
background-color: #f6f8fb;
 +
}
  
−
Quertemont E, Didone V. (2006). Role of acetaldehyde in mediating the pharmacological and behavioral effects of alcohol. Alcohol Res Health. 29(4): 258–265.
+
.bird {
 +
position: relative;
 +
z-index: 1000;
 +
width: 6vh;
 +
bottom: 26%;
 +
left: 41.9%;
 +
border-radius: 50%;
 +
}
  
−
Seitz HK, Stickel F. (2010). Acetaldehyde as an underestimated risk factor for cancer development: role of genetics in ethanol metabolism. Genes Nutr. 5(2):121-8.
+
.bird:hover {
 +
cursor: pointer;
 +
background-color: #00bbff;
 +
}
  
−
Stornetta A, Guidolin V, Balbo S. (2018). Alcohol-Derived Acetaldehyde Exposure in the Oral Cavity. Cancers (Basel). 10(1). pii: E20.
+
.instagram {
 +
position: relative;
 +
z-index: 1000;
 +
width: 6vh;
 +
bottom: 26%;
 +
left: 46%;
 +
}
  
−
Sunset. (n.d.). Sunset. Retrieved from https://getsunset.com/.
+
.instagram:hover {
 +
cursor: pointer;
 +
background: linear-gradient(to bottom left, #5778f9, #b84cf7, #f2527c, #ffb966, #f738ba);
 +
border-radius: 31%;
 +
}
  
−
Ueshima Y, Matsuda Y, Tsutsumi M, Takada A. (1993). Role of the aldehyde dehydrogenase-1 isozyme in the metabolism of acetaldehyde. Alcohol Alcohol Suppl. 1B:15-9.
+
.fb {
 +
position: relative;
 +
border-radius: 20%;
 +
z-index: 1000;
 +
width: 6vh;
 +
bottom: 26%;
 +
left: 50.1%;
 +
}
  
−
Väkeväinen S, Tillonen J, Agarwal DP, Srivastava N, Salaspuro M. (2000). High Salivary Acetaldehyde After a Moderate Dose of Alcohol in ALDH2‐Deficient Subjects: Strong Evidence for the Local Carcinogenic Action of Acetaldehyde. Alcohol Clin Exp Res. 24(6):873-7.
+
.fb:hover {
 +
cursor: pointer;
 +
background-color: #5277c4;
 +
}
  
−
Vogt BL, Richie JP Jr. (2007). Glutathione depletion and recovery after acute ethanol administration in the aging mouse. Biochem Pharmacol. 73(10):1613-21.
+
.noblack {
 +
position: absolute;
 +
width: 200%;
 +
height: 60px;
 +
background-color: white;
 +
}
  
−
Woutersen RA, Appelman LM, Van Garderen-Hoetmer A, Feron VJ. (1986). Inhalation toxicity of acetaldehyde in rats. III. Carcinogenicity study. Toxicology. 41(2):213-31.
+
.nav-tab {
 +
            position: static !important;
 +
            display:inline-block;
 +
            min-height: 53px;
 +
            max-height: 53px;
 +
            line-height: 48px;
 +
            width: 9.8%;
 +
            text-align: center;
 +
            color: black;
 +
            text-decoration: none;
 +
            float: right;
 +
        }
 +
       
 +
        .nav-tab-special {
 +
            position: static !important;
 +
            display:inline-block;
 +
            min-height: 80px;
 +
            max-height: 80px;
 +
            line-height: 80px;
 +
            width: 19%;
 +
            text-align: center;
 +
            color: black !important;
 +
            text-decoration: none;
 +
            font-weight: bold;
 +
            font-size: 32px;
 +
            padding-top: 40px;
 +
        }
 +
        .t1:hover {
 +
            background-image: -webkit-linear-gradient(bottom, #C0392B 10%, #C0392B 90%);
 +
            color: white !important;
 +
        }
 +
       
 +
        .t2:hover {
 +
            background-image: -webkit-linear-gradient(bottom, #DC7633 10%, #DC7633 90%);
 +
            color: white !important;
 +
        }
 +
       
 +
        .t3:hover {
 +
            background-image: -webkit-linear-gradient(bottom, #D4AC0D 10%, #D4AC0D 90%);
 +
            color: white !important;
 +
        }
 +
       
 +
        .t4:hover {
 +
            background-image: -webkit-linear-gradient(bottom, #F7DC6F 10%, #F7DC6F 90%);
 +
            color: white !important;
 +
        }
 +
       
 +
        .t5:hover {
 +
            background-image: -webkit-linear-gradient(bottom, #27AE60 10%, #27AE60 90%);
 +
            color: white !important;
 +
        }
 +
       
 +
        .t6:hover {
 +
            background-image: -webkit-linear-gradient(bottom, #3498DB 10%, #3498DB 90%);
 +
            color: white !important;
 +
        }
 +
        .t7:hover {
 +
            background-image: -webkit-linear-gradient(bottom, #A569BD 10%, #A569BD 90%);
 +
            color: white !important;
 +
        }
 +
       
 +
        .t8:hover {
 +
            background-image: -webkit-linear-gradient(bottom, #884EA0 10%, #884EA0 90%);
 +
            color: white !important;
 +
        }
  
−
Wang X, Sheikh S, Saigal D, Robinson L, Weiner H. (1996). Heterotetramers of human liver mitochondrial (class 2) aldehyde dehydrogenase expressed in Escherichia coli. A model to study the heterotetramers expected to be found in Oriental people. J Biol Chem. 271(49): 31172–31178.
+
        .t1 {
 +
            background-image: -webkit-linear-gradient(bottom, #C0392B 10%, whitesmoke 0%);
 +
        }
 +
       
 +
        .t2 {
 +
            background-image: -webkit-linear-gradient(bottom, #DC7633 10%, whitesmoke 0%);
 +
        }
 +
       
 +
        .t3 {
 +
            background-image: -webkit-linear-gradient(bottom, #D4AC0D 10%, whitesmoke 0%);
 +
        }
 +
       
 +
        .t4 {
 +
            background-image: -webkit-linear-gradient(bottom, #F7DC6F 10%, whitesmoke 0%);
 +
        }
 +
       
 +
        .t5 {
 +
            background-image: -webkit-linear-gradient(bottom, #27AE60 10%, whitesmoke 0%);
 +
        } 
 +
       
 +
        .t6 {
 +
            background-image: -webkit-linear-gradient(bottom, #3498DB 10%, whitesmoke 0%);
 +
        }
 +
       
 +
        .t7 {
 +
            background-image: -webkit-linear-gradient(bottom, #A569BD 10%, whitesmoke 0%);
 +
        }
 +
       
 +
        .t8 {
 +
            background-image: -webkit-linear-gradient(bottom, #884EA0 10%, whitesmoke 0%);
 +
        }
 +
        .toolbar {
 +
            min-height: 64px;
 +
            max-height: 64px;
 +
            width: 100%;
 +
            background-color: whitesmoke;
 +
            position: fixed;
 +
            z-index: 9999;
 +
            padding-top: 10px;
 +
            padding-right: 5%;
 +
            padding-left: 5%;
 +
top: 1vh;
 +
        }
 +
.previewnote {
 +
display: hidden;
 +
}
 +
 +
html {
 +
    overflow-x: visible;
 +
}     
  
−
Wu M, Chang SC, Kampman E, Yang J, Wang XS, Gu XP, Han RQ, Liu AM, Wallar G, Zhou JY, Kok FJ, Zhao JK, Zhang ZF. (2013). Single nucleotide polymorphisms of ADH1B, ADH1C and ALDH2 genes and esophageal cancer: a population-based case-control study in China. Int J Cancer. 132(8):1868-77.
+
.awards {
 +
font-size: 4vh;
 +
font-weight: 100 !important;
 +
left: 50px;
 +
}
  
−
Yang SJ, Wang HY, Li XQ, Du HZ, Zheng CJ, Chen HG, Mu XY, Yang CX. (2007). Genetic Polymorphisms of ADH2 and ALDH2 Associated with Esophageal Cancer Risk in Southwest China. World J Gastroenterol. 13(43):5760-5764.
+
</style>
 +
</head>
 +
<html>
 +
<body>
  
−
Yamaguchi H, Hosoya M, Shimoyama T, Takahashi S, Zhang JF, Tsutsumi E, Suzuki Y, Suwa Y, Nakayama T. (2012). Catalytic removal of acetaldehyde in saliva by a Gluconobacter strain. J Biosci Bioeng. 114(3):268-74.
 
  
−
Yokoyama A, Muramatsu T, Omori T, Yokoyama T, Matsushita S, Higuchi S, Maruyama K, Ishii H. (2001). Alcohol and Aldehyde Dehydrogenase Gene Polymorphisms and Oropharyngolaryngeal, Esophageal and Stomach Cancers in Japanese Alcoholics. Carcinogenesis. 22(3): 433-439.
+
<nav class="toolbar">
 +
            <a class="nav-special-tab" href="https://2018.igem.org/Team:TAS_Taipei" style="color: black !important; position: fixed !important; top: 28px !important; left: 40px !important;">
 +
            <b class="textclass">TAS_TAIPEI</b>
 +
            </a>
 +
            <a class="att nav-tab t8" href="https://2018.igem.org/Team:TAS_Taipei/Attributions">Attributions</a>
 +
            <a class="as nav-tab t7" href="https://2018.igem.org/Team:TAS_Taipei/Team">About Us</a>
 +
            <a class="safe nav-tab t6" href="https://2018.igem.org/Team:TAS_Taipei/Safety">Safety</a>
 +
            <a class="hp nav-tab t5" href="https://2018.igem.org/Team:TAS_Taipei/Human_Practices" style="width: 15% !important;">Human Practices</a>
 +
            <a class="mod nav-tab t4" href="https://2018.igem.org/Team:TAS_Taipei/Model">Modeling</a>
 +
            <a class="prot nav-tab t3" href="https://2018.igem.org/Team:TAS_Taipei/Applied_Design">Prototype</a>
 +
            <a class="exp nav-tab t2" href="https://2018.igem.org/Team:TAS_Taipei/Experiments">Experiments</a>
 +
            <a class="pro nav-tab t1" href="https://2018.igem.org/Team:TAS_Taipei/Description">Project</a>
 +
        </nav>
 +
<div class="row full">
 +
<div class="jumbo col-lg-12">
 +
</div>
 +
</div>
  
−
Yokoyama A, Tsutsumi E, Imazeki H, Suwa Y, Nakamura C, Mizukami T, Yokoyama T. (2008). Salivary acetaldehyde concentration according to alcoholic beverage consumed and aldehyde dehydrogenase-2 genotype. Alcohol Clin Exp Res. 32(9):1607-14.
 
  
−
Zhou J, Weiner H. (2000). Basis for half-of-the-site reactivity and the dominance of the K487 oriental subunit over the E487 subunit in heterotetrameric human liver mitochondrial aldehyde dehydrogenase. Biochemistry. 39(39):12019-24
 
  
−
</p></section></div>
+
 
−
      </div>
+
<div class="bottomnav">
−
      
+
<h1 class="awards col-lg-12"><b>2018 Awards:</b> Gold Medal, Best Entrepreneurship, Nominated Best Wiki, Presentation, Poster, Integrated Human Practices, Education & Public Engagement, Model, Product Design</h1>
−
</body></html>
+
                <h1 class="col-lg-offset-1 abs"><b>ABSTRACT</b></h1>
 +
                <p class="col-lg-offset-1 col-lg-10 absdesc"> Turning red after consuming alcohol may seem like a mere social inconvenience. Yet, this flushing response is caused by an accumulation of acetaldehyde, a carcinogenic intermediate of alcohol metabolism. Acetaldehyde is broken down into harmless acetate by aldehyde dehydrogenase 2 (ALDH2). ALDH2 deficiency, the result of a point mutation in the ALDH2 gene, produces a much less efficient ALDH2 enzyme, leading to an accumulation of acetaldehyde and the subsequent flushing response. While about 8% of the global population is ALDH2 deficient, in our home, Taiwan, approximately 47% of the population carries this genetic mutation--the highest percentage in the world! Studies show that ALDH2 deficiency greatly increases the risk of developing esophageal and head and neck cancer. Thus, our project aims to produce recombinant ALDH2 to decrease levels of acetaldehyde in the upper digestive tract region. We envision delivery of ALDH2 as a purified protein or in consumer-friendly probiotics.
 +
</p>
 +
</div>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<div class="w3-container">
 +
<button onclick="myFunction('Demo1')" class="w3-button col-lg-offset-6">👇</button>
 +
 
 +
<div id="Demo1" class="w3-hide w3-container">
 +
     <p class="emojifont col-lg-offset-1"><b>SAY NO 🙅 TO GLOW 💡</b><br>
 +
Turning red 🍅 after consuming alcohol 🍷🍺 may seem like a mere social inconvenience 🤷. Yet, this flushing response 😡 is caused by an accumulation of acetaldehyde, a carcinogenic 💀 intermediate of alcohol 🥂🥃 metabolism. Acetaldehyde is broken down 📉 into harmless acetate by aldehyde dehydrogenase 2 (ALDH2). ALDH2 deficiency, the result of a point 👉 mutation in the ALDH2 gene, produces a much less efficient 🐢 ALDH2 enzyme, leading to an accumulation of acetaldehyde and the subsequent flushing response 😡. While about 8% of the global 🌍 population is ALDH2 deficient, in our home 🏡, Taiwan, approximately 47% of the population carries this genetic mutation--the highest percentage in the world 🤦‍! Studies show that ALDH2 deficiency greatly increases 📈 the risk of developing esophageal and head and neck cancer 🚑. Thus, our project 👨‍🔬👩‍🔬 aims to produce recombinant ALDH2 to decrease 📉 levels of acetaldehyde in the upper digestive tract region. We envision 👀 delivery 🍬🍦 of ALDH2 as a purified protein or in consumer-friendly probiotics. </p>
 +
</div>
 +
 
 +
</div>
 +
 
 +
<br><br><br>
 +
<div class="row">
 +
<a href="https://twitter.com/igem_tas?lang=en" target="_blank">
 +
      <img class="bird" src="https://image.flaticon.com/icons/svg/87/87890.svg" alt="">
 +
    </a>
 +
<a href="https://www.instagram.com/igem_tas/" target="_blank">
 +
        <img class="instagram" src="https://image.flaticon.com/icons/svg/725/725339.svg" alt="">
 +
    </a>
 +
<a href="https://www.facebook.com/IGEMTAS/" target="_blank">
 +
        <img class="fb" src="https://image.flaticon.com/icons/svg/725/725350.svg" alt="">
 +
    </a>
 +
</div>
 +
 
 +
<div class="row noblack"></div>
 +
 
 +
</body>
 +
 
 +
<script>
 +
function myFunction(id) {
 +
    var x = document.getElementById(id);
 +
    if (x.className.indexOf("w3-show") == -1) {
 +
        x.className += " w3-show";
 +
    } else {
 +
        x.className = x.className.replace(" w3-show", "");
 +
    }
 +
}
 +
</script>
 +
</html>

Latest revision as of 05:47, 10 December 2018

TAS_Taipei

2018 Awards: Gold Medal, Best Entrepreneurship, Nominated Best Wiki, Presentation, Poster, Integrated Human Practices, Education & Public Engagement, Model, Product Design

ABSTRACT

Turning red after consuming alcohol may seem like a mere social inconvenience. Yet, this flushing response is caused by an accumulation of acetaldehyde, a carcinogenic intermediate of alcohol metabolism. Acetaldehyde is broken down into harmless acetate by aldehyde dehydrogenase 2 (ALDH2). ALDH2 deficiency, the result of a point mutation in the ALDH2 gene, produces a much less efficient ALDH2 enzyme, leading to an accumulation of acetaldehyde and the subsequent flushing response. While about 8% of the global population is ALDH2 deficient, in our home, Taiwan, approximately 47% of the population carries this genetic mutation--the highest percentage in the world! Studies show that ALDH2 deficiency greatly increases the risk of developing esophageal and head and neck cancer. Thus, our project aims to produce recombinant ALDH2 to decrease levels of acetaldehyde in the upper digestive tract region. We envision delivery of ALDH2 as a purified protein or in consumer-friendly probiotics.

SAY NO 🙅 TO GLOW 💡
Turning red 🍅 after consuming alcohol 🍷🍺 may seem like a mere social inconvenience 🤷. Yet, this flushing response 😡 is caused by an accumulation of acetaldehyde, a carcinogenic 💀 intermediate of alcohol 🥂🥃 metabolism. Acetaldehyde is broken down 📉 into harmless acetate by aldehyde dehydrogenase 2 (ALDH2). ALDH2 deficiency, the result of a point 👉 mutation in the ALDH2 gene, produces a much less efficient 🐢 ALDH2 enzyme, leading to an accumulation of acetaldehyde and the subsequent flushing response 😡. While about 8% of the global 🌍 population is ALDH2 deficient, in our home 🏡, Taiwan, approximately 47% of the population carries this genetic mutation--the highest percentage in the world 🤦‍! Studies show that ALDH2 deficiency greatly increases 📈 the risk of developing esophageal and head and neck cancer 🚑. Thus, our project 👨‍🔬👩‍🔬 aims to produce recombinant ALDH2 to decrease 📉 levels of acetaldehyde in the upper digestive tract region. We envision 👀 delivery 🍬🍦 of ALDH2 as a purified protein or in consumer-friendly probiotics.