#stream-chat {
  margin: 10px;
  min-width: 500px;
  max-width: 600px;
  width: 80%;
  min-height: 500px;
  max-height: 600px;
  height: 80%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
#stream-chat h1 {
  background: #cf505073;
  color: #EEEEEE;
  text-align: center;
  font-weight: 300;
  padding: 1rem;
}

#input-area {
  display: flex;
  min-height: 175px;
  flex-direction: column;
  background: #ffffff;
  padding: 15px;
}

#send {
  align-self: flex-end;
  padding: 8px 15px;
  margin: 3px;
  background: #632F9F;
  border: none;
  color: #F8EBEC;
  font-weight: 900;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  box-shadow: 0 0 10px 0px #4a2378;
}

#input {
  flex-grow: 1;
  border: 5px solid #282828;
  flex-grow: 1;
  background: #ffffff;
  color: #919090;
  margin-bottom: 0.7em;
  resize: none;
}
#input:focus {
  outline: none;
}

#messages {
  min-height: 500px;
  background: #ffffff;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-left: 12px;
}
#messages .even {
  background: #ffffff;
}
#messages .odd {
  background: #ffffff;
}
#messages .message {
  padding: 3px 5px;
}
#messages .message .timestamp {
  color: #626A6F;
  margin-right: 0.1em;
}
#messages .message .name {
  font-weight: 900;
}
#messages .message .text {
  margin-left: 0.1em;
  color: #BBB7AB;
}

.overflow {
  overflow-y: scroll;
}

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #5e5e5e;
}

::-webkit-scrollbar, ::-webkit-scrollbar-button, ::-webkit-scrollbar-track, ::-webkit-scrollbar-track-piece, ::-webkit-scrollbar-corner, ::-webkit-resizer {
  background: #ffffff;
}



.odoohk_section2{width: 100%;height: 800px;margin-top: 100px;}
.odoohk_section2 .center-box{display:flex;justify-content: center; align-items:center;}

.odoohk_section3{width: 100%;height: 800px;margin-top: 100px;margin-left: 20%;}

.odoohk_section4{width: 100%;height: 500px;margin-top: 300px;}
.odoohk_section4 .center-box{display:flex;justify-content: center; align-items:center;}




.wymo_section5{width: 100%;background: #e9ecef;padding: 60px 30px;float: left;}
.wymo_section5 .titbox{width: 100%;margin-bottom: 40px;text-align: center;}
.wymo_section5 .titbox .tit1{font-size: 40px;color: #212529;line-height: 46px;margin-bottom: 12px;}
.wymo_section5 .titbox .tit2{font-size: 20px;color: #212529;line-height: 24px;}
.wymo_section5 .content{width: 100%;padding-left: 100px;padding-right: 100px;}
.wymo_section5 .content ul{margin: 0 -15px;overflow: hidden;width: calc(100% + 30px);}
.wymo_section5 .content ul li{width: 25%;float: left;padding: 0 15px;}
.wymo_section5 .content ul li a{display: block;width: 100%;background: #fff;}
.wymo_section5 .content ul li:nth-child(1) a{border-top: 3px solid #636663;}
.wymo_section5 .content ul li:nth-child(2) a{border-top: 3px solid #924a4a;}
.wymo_section5 .content ul li:nth-child(3) a{border-top: 3px solid #636665;}
.wymo_section5 .content ul li:nth-child(4) a{border-top: 3px solid #d58658;}
.wymo_section5 .content ul li a .top{width: 100%;border-bottom: 1px solid #f0f0f0;padding-bottom: 20px;padding-left: 14px;}
.wymo_section5 .content ul li a .top ._ts{margin-bottom: 12px;overflow: hidden;}
.wymo_section5 .content ul li a .top ._ts .left{font-size: 20px;color: #242529;line-height: 48px;float: left;}
.wymo_section5 .content ul li a .top ._ts .right{width: 48px;float: right;}
.wymo_section5 .content ul li a .top ._ts .right img{width: 100%;display: block;}
.wymo_section5 .content ul li a .top .info{font-size: 16px;color: #212529;line-height: 24px;height: 48px;}
.wymo_section5 .content ul li a .bottom{width: 100%;font-size: 15px;color: #017c82;line-height: 40px;padding: 0 16px;text-align: right;font-weight: bolder;}
@media  screen and (max-width: 1360px){
.wymo_section5 .content{padding-left: 0;padding-right: 0;}
}
@media  screen and (max-width: 1024px){
.wymo_section5 .content ul{margin: -15px;}
.wymo_section5 .content ul li{width: 50%;padding: 15px;}
}




.tree,
.tree ul {
  margin:0 0 0 1em; /* indentation */
  padding:0;
  list-style:none;
  color:#369;
  position:relative;
}

.tree ul {margin-left:.5em} /* (indentation/2) */

.tree:before,
.tree ul:before {
  content:"";
  display:block;
  width:0;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  border-left:1px solid;
}

.tree li {
  margin:0;
  padding:0 1.5em; /* indentation + .5em */
  line-height:2em; /* default list item's `line-height` */
  font-weight:bold;
  position:relative;
}

.tree li:before {
  content:"";
  display:block;
  width:10px; /* same with indentation */
  height:0;
  border-top:1px solid;
  margin-top:-1px; /* border top width */
  position:absolute;
  top:1em; /* (line-height/2) */
  left:0;
}

.tree li:last-child:before {
  background:white; /* same with body background */
  height:auto;
  top:1em; /* (line-height/2) */
  bottom:0;
}