@charset "UTF-8";

/***css***/
.fixed {
    position:fixed!important;
    top:0;
    width: 100%;
    z-index: 10000;
}

/*head%nav*/
#header-inner{
  width:100%;
  overflow: hidden; /* FF3.6-15 */
  background: -webkit-linear-gradient(rgba(10,10,10,0.45) 0%, rgba(10,10,10,0) 100%);
  background: linear-gradient(rgba(10,10,10,0.45) 0%, rgba(10,10,10,0) 100%); /* Chrome10-25,Safari5.1-6 */ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
#header-inner h1 > a{
  font-size: 1.5rem;
  color: #f6f4ef;
  width:400px;
  height: 73px;
  background-color:#223774;
  margin-top: -5px;
  text-align: center;
  position: relative;
  float: left;
}
#header-inner h1 > a:hover{
  opacity: 1;
}
#header-inner h1 > a > img{
  width:65px;
  position:relative;
  top:22px;
}
#header-inner nav{
position: absolute;
right: 0;
top:30px;
width:540px;
}
#header-inner nav > ul > li > ul > li{
  display: inline-block;
  width:19%;
}
#header-inner nav > ul > li > ul > li> a{
  color: #f6f4ef;
  font-size: 1.1rem;
  text-shadow: 0 0 10px #000;
}
#header-inner nav > ul > li > ul > li> a:hover{
  border-bottom: solid 1px rgba(230,230,230,0.6);
  }
#header-inner nav > ul > li > ul > li> a:visited{
  color: #f6f4ef;
}
#header-inner > nav > ul > li > a{
  display: none;

}
.dropmenu{
  opacity: 0;
}
@media screen and (max-width:950px) {
  #header-inner{
    background-color: #f6f4ef;
  }
  #header-inner h1{
    font-size: 1.27rem;
    color: #fff;
    width:400px;
    height: 73px;
    background-color:#223774;
    text-align: left;
    float: left;
  }
  #header-inner h1 > img{
    width:61px;
    position:relative;
    top:21px;
  }
  #header-inner nav{
  position: absolute;
  right: 0;
  top:0px;
  width:100px;
  height: 73px;
  }
  #header-inner > nav > ul > li > a{
    display: block;
  }
  #header-inner nav > ul > li > ul > li{
    width:100%;
  }
  #header-inner nav > ul > li > ul > li> a{
    font-size: 0.9rem;
  }
  .dropmenu li{
    position: relative;
    width: 100px;
    height: 72px;
    float: left;
    margin: 0;
    padding: 0;
    text-align: center;
  }
  .dropmenu li > a{
    display: block;
    width: 100px;
    height: 38px;
    padding: 22px 0 8px;
    background: #8a9b0f;
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    text-decoration: none;
  }

  .sub-menu > li > a{
    padding: 12px 15px;
    height: 20px;
    border-top: 1px solid #7c8c0e;
    background: #6e7c0c;
    text-align: left;
  }
  .dropmenu li:hover > a{
    background: #6e7c0c;
  }
  .dropmenu li> a:focus{
    background: #6e7c0c;
  }
  .dropmenu li ul li{
    overflow: hidden;
    height: 0;
    transition: .2s;
  }
  .dropmenu li:hover ul li{
    overflow: visible;
    height: 38px;
  }
  .dropmenu li:focus ul li{
    overflow: visible;
    height: 38px;
  }
}
@media screen and (max-width:640px) {
  #header-inner h1{
    color: #fff;
    width:60vw;
    height: 68px;
  }
  #header-inner h1 > a{
    font-size: 0.9rem;
    color: #f6f4ef;
    width:60vw;
    height: 68px;
    background-color:#223774;
    margin-top: 10px;
    text-align: center;
    position: relative;
    float: left;
  }
  #header-inner h1 > a > img{
    width:38px;
    top:13px;
  }
}