body{background: #176fe4;}
*{ box-sizing: border-box;  margin:0;padding:0;  outline:none;}
.flex-center-center{  display: flex; align-items: center; justify-content: center;}
.flex-between-center{  display: flex; justify-content: space-between; align-items: center;}
.flex-center{  display: flex; align-items: center;}
.flex-between{  display: flex; justify-content: space-between}
.flex-between-start{ display: flex; justify-content: space-between;align-items: flex-start;}
.flex-between-end{ display: flex; justify-content: space-between;align-items: flex-end;}
.flex{  display: flex;}
.flex-column{ flex-direction: column;}
.flex-wrap{ flex-wrap: wrap;}
.flex-end{display: flex; align-items: flex-end;}
.flex-content-end{display: flex; justify-content: flex-end;}
.flex-start{display: flex; align-items: flex-start;}
.iflex{ display: inline-flex}
.iblock{ display: inline-block}
.block{  display: block;}
.flex-shrink{ flex-shrink: 0 }
.z10{ position: relative; z-index: 10;}
.bodyCon{ width: 100%; padding-bottom: 15vh; height: 100vh; background: #176fe4; flex-direction: column; position: relative; display: flex; align-items: center; justify-content: center;}
a {color:#333;text-decoration:none;border:0 none;} 
.lanChese{ margin-top: 3vw; background: rgba(255, 255, 255, .11); border-radius: 80px; padding: 5px;}
.lanChese a{ font-size: 1.3vw; width: 10vw; color: #fff; height: 3em; border-radius: 80px;}
.lanChese a.on{ background: #fff; color: #333;}
.bodyConBot{ width: 100%; position: absolute; left: 0; right: 0; bottom: 0;}
.logoImg{ width:18vw;}
.waves{

display:block;

width:100%;

height: 50vh;

position: absolute;

left:0;

bottom:0;

}

canvas{

display: block;

}

@media screen and (max-width:750px) { 
    .logoImg{ width:150px;}
    .lanChese{ margin-top: 25px;}
    .lanChese a{ font-size: 14px; width: 120px;}

}
<!--0.00025606155395508-->