.navbar{
  position: fixed;
  height:72px;
  width:100%;

  z-index: 99999;
}

.navbar-area{
  height:100%;

  display:flex;
  flex-direction: row;
  align-items:center;
}

.navbar-transparent{
  background-color:transparent;

  transition: background-color 0.5s ;
  -o-transition: background-color 0.5s ; /*兼容parsto内核*/
  -moz-transition: background-color 0.5s ; /*兼容gecko内核*/
  -webkit-transition: background-color 0.5s ; /*兼容webkit内核*/
}

.navbar-transparent .navbar-items .item{
  color:white;

  transition: color 0.5s ;
  -o-transition: color 0.5s ; /*兼容parsto内核*/
  -moz-transition: color 0.5s ; /*兼容gecko内核*/
  -webkit-transition: color 0.5s ; /*兼容webkit内核*/
}

.navbar-transparent .navbar-items .item-lang{
  color:rgba(255, 255, 255, 0.5);
}

.navbar-transparent .navbar-items .item-line{
  background-color: rgba(255, 255, 255, 0.5);
}

.navbar-transparent .navbar-items .active-line{
  background-color:white;

  transition: background-color 0.5s ;
  -o-transition: background-color 0.5s ; /*兼容parsto内核*/
  -moz-transition: background-color 0.5s ; /*兼容gecko内核*/
  -webkit-transition: background-color 0.5s ; /*兼容webkit内核*/
}
.navbar-transparent .navbar-logo{
  background-position: center center;

  transition: content 0.5s ;
  -o-transition: content 0.5s ; /*兼容parsto内核*/
  -moz-transition: content 0.5s ; /*兼容gecko内核*/
  -webkit-transition: content 0.5s ; /*兼容webkit内核*/

  transition: background 0.5s ;
  -o-transition: background 0.5s ; /*兼容parsto内核*/
  -moz-transition: background 0.5s ; /*兼容gecko内核*/
  -webkit-transition: background 0.5s ; /*兼容webkit内核*/
}

.navbar-transparent .navbar-logo-en-US{
  content:url("/static/images/logo_white-en-US.png") !important;
  background: url("/static/images/logo_white-en-US.png");
}

.navbar-transparent .navbar-logo-zh-CN{
  content:url("/static/images/logo_white-zh-CN.png") !important;
  background: url("/static/images/logo_white-zh-CN.png");
}

.navbar-transparent .navbar-items .item .arrow{
  background:url("/static/images/navbar_arrow_transparent.png");
  transition: background 0.5s ;
  -o-transition: background 0.5s ; /*兼容parsto内核*/
  -moz-transition: background 0.5s ; /*兼容gecko内核*/
  -webkit-transition: background 0.5s ; /*兼容webkit内核*/
}

.navbar-white{
  background-color:white;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  
  transition: background-color 0.5s ;
  -o-transition: background-color 0.5s ; /*兼容parsto内核*/
  -moz-transition: background-color 0.5s ; /*兼容gecko内核*/
  -webkit-transition: background-color 0.5s ; /*兼容webkit内核*/
}

.navbar-white .navbar-items .item{
  color:#222222;

  transition: color 0.5s ;
  -o-transition: color 0.5s ; /*兼容parsto内核*/
  -moz-transition: color 0.5s ; /*兼容gecko内核*/
  -webkit-transition: color 0.5s ; /*兼容webkit内核*/
}

.navbar-white .navbar-items .active-line{
  background-color:#222222;

  transition: background-color 0.5s ;
  -o-transition: background-color 0.5s ; /*兼容parsto内核*/
  -moz-transition: background-color 0.5s ; /*兼容gecko内核*/
  -webkit-transition: background-color 0.5s ; /*兼容webkit内核*/
}
.navbar-white .navbar-logo{
  background-position: center center;

  transition: content 0.5s ;
  -o-transition: content 0.5s ; /*兼容parsto内核*/
  -moz-transition: content 0.5s ; /*兼容gecko内核*/
  -webkit-transition: content 0.5s ; /*兼容webkit内核*/

  transition: background 0.5s ;
  -o-transition: background 0.5s ; /*兼容parsto内核*/
  -moz-transition: background 0.5s ; /*兼容gecko内核*/
  -webkit-transition: background 0.5s ; /*兼容webkit内核*/
}

.navbar-white .navbar-logo-en-US{
  content:url("/static/images/logo-en-US.png") !important;
  background: url("/static/images/logo-en-US.png");
}

.navbar-white .navbar-logo-zh-CN{
  content:url("/static/images/logo-zh-CN.png") !important;
  background: url("/static/images/logo-zh-CN.png");
}

.navbar-white .navbar-items .item .arrow{
  background:url("/static/images/navbar_arrow_white.png");
  transition: background 0.5s ;
  -o-transition: background 0.5s ; /*兼容parsto内核*/
  -moz-transition: background 0.5s ; /*兼容gecko内核*/
  -webkit-transition: background 0.5s ; /*兼容webkit内核*/
}

.navbar-white .navbar-items .item-lang{
  color:rgba(34, 34, 34, 0.5);
}

.navbar-white .navbar-items .item-line{
  background-color: rgba(34, 34, 34, 0.5);
}

.navbar-items{
  height:60px;
  flex: 1;

  height:34px;
  /* line-height: 34px; */
  font-size: 14px;

  display:flex;
  flex-direction: row;
  align-items:center;
  justify-content:flex-end;
}

.navbar-items .item{
  display: block;
  margin-right: 40px;
  cursor: pointer;
}

.navbar-items .item .arrow{
  display: inline-block;
  height:7px;
  width: 12px;
}

.navbar-items .active-line{
  height:3px;
}

.navbar-items .item-line{
  width: 2px;
  height: 60%;
}

.navbar-items .item-lang{
  cursor: pointer;
  margin-left: 20px;
}

.navbar-items .item .dropdown{
  display: inline-block;

  position: relative;
}

.navbar-items .item  .dropdown-content {
  position: absolute;
  background-color: white;
  min-width: 195px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  max-height:0px;
  top:53px;
  overflow: hidden;
  transition: max-height 0.5s;
}

.navbar-items .item  .dropdown-content p{
  text-align: center;
  /* height: 34px; */
  line-height:24px;
  font-size: 16px;
  padding-top:5px;
  padding-bottom:5px;
}

.navbar-items .item  .dropdown-content p a{
  color: #222222;
}

.navbar-items .item  .dropdown-content p a:hover{
  color: #f2961f;
}

.navbar-items .item .dropdown:hover .dropdown-content {
  max-height: 500px;
}

.dropdown-content-selected{
  color: #f2961f !important;
}


.navbar-right{
  display: none;
}

.navbar-side{
  display: none;
}