@charset "utf-8";
/* CSS Document */
.header_lang {
  padding-left: 16px;
  padding-right: 6px;
}
.header .header_lang .lang {
  position: relative;
  font-size: 0.875rem;
  line-height: 20px;
  background: url(../images/langu.png) center left no-repeat;
  background-size: 20px;
  padding-left: 24px;
  padding-right: 0px
}
.header.opacity-header .header_lang .lang {
  position: relative;
  font-size: 0.875rem;
  line-height: 20px;
  background: url(../images/lang.png) center left no-repeat;
  background-size: 20px;
  padding-left: 24px;
  padding-right: 0px
}
.header.opacity-header:hover .header_lang .lang,
.header.opacity-header.active .header_lang .lang{
  position: relative;
  font-size: 0.875rem;
  line-height: 20px;
  background: url(../images/langu.png) center left no-repeat;
  background-size: 20px;
  padding-left: 24px;
  padding-right: 0px
}

.header_lang .lang i {
  margin-left: 10px;
}
.header .lang .down-arrow:before {
  position: absolute;
  display: block;
  content: "";
  top: 50%;
  right: 0;
  width: 6px;
  height: 6px;
  margin-top: -6px;
  border-top: 2px solid #003366;
  border-right: 2px solid #003366;
  transition: all .2s cubic-bezier(.4, 0, .2, 1) .2s;
  transform: rotate(135deg) translateY(-50%)
}
.header.opacity-header .lang .down-arrow:before {
  position: absolute;
  display: block;
  content: "";
  top: 50%;
  right: 0;
  width: 6px;
  height: 6px;
  margin-top: -6px;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  transition: all .2s cubic-bezier(.4, 0, .2, 1) .2s;
  transform: rotate(135deg) translateY(-50%)
}
.header.opacity-header:hover .lang .down-arrow:before,
.header.opacity-header.active .lang .down-arrow:before{
  position: absolute;
  display: block;
  content: "";
  top: 50%;
  right: 0;
  width: 6px;
  height: 6px;
  margin-top: -6px;
  border-top: 2px solid #666666;
  border-right: 2px solid #666666;
  transition: all .2s cubic-bezier(.4, 0, .2, 1) .2s;
  transform: rotate(135deg) translateY(-50%)
}
.header.opacity-header:hover .lang:hover .down-arrow:before {
  position: absolute;
  display: block;
  content: "";
  top: 50%;
  right: -4px;
  width: 6px;
  height: 6px;
  margin-top: 0px;
  border-top: 2px solid #036;
  border-right: 2px solid #036;
  transition: all .2s cubic-bezier(.4, 0, .2, 1) .2s;
  transform: rotate(-45deg) translateY(-50%)
}
/*.header_lang .lang .iconfont2{font-size: 0.875rem;color: #888}*/
.header.opacity-header .header_lang span {
  display: block;
  cursor: pointer;
  color: #ffffff
}
.header.opacity-header:hover .header_lang span,
.header.opacity-header.active .header_lang span{
  display: block;
  cursor: pointer;
  color: #666666
}

.header_lang span {
  display: block;
  cursor: pointer;
  color: #666
}
.header_lang span strong {
  font-weight: normal
}
.header_lang ul {
  position: absolute;
  z-index: 99999;
  top: 26px;
  left: -5px; /*right: 0;*/ width: 130px;
  background: #fff;
  padding: 10px 0;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 10px, 0);
  transition: all .5s ease;
  border-radius: 4px;
}
.header_lang ul li a {
  display: block;
  padding: 5px 10px;
  font-size: 0.875rem;
  color: #666
}
.header.opacity-header:hover .header_lang ul li a:hover {
  display: block;
  padding: 5px 10px;
  background: #039;
  color: #fff
}
.header_lang .lang:hover ul {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
}
@media only screen and (max-width: 991px) {
.header_lang ul {
  left: -60px;
}
.header_lang .lang span strong{
display: none
}
}

.header_lang_mobile{display: none}
@media only screen and (max-width: 1024px) {
.header_lang_mobile{display: block}
.header_lang_mobile {
  /*position: relative; border-left: solid 1px #ccc;border-right: solid 1px #ccc;*/
  height: 40px;
  width: 100px;
  line-height: 40px;
  padding-left: 10px;
  padding-right: 10px;
}
.header_lang_mobile .lang {
  position: relative;
  font-size: 0.75rem;
  background: url(../images/langu.png) center left no-repeat;
  background-size: 15px;
  padding-left: 22px;
  padding-right: 0px
}
.header_lang_mobile .lang i {
  margin-left: 10px;
}
.header_lang_mobile .lang .down-arrow:before {
  position: absolute;
  display: block;
  content: "";
  top: 50%;
  right: 0;
  width: 6px;
  height: 6px;
  margin-top: -8px;
  border-top: 2px solid #666;
  border-right: 2px solid #666;
  transition: all .2s cubic-bezier(.4, 0, .2, 1) .2s;
  transform: rotate(135deg) translateY(-50%)
}
.header_lang_mobile .lang:hover .down-arrow:before {
  position: absolute;
  display: block;
  content: "";
  top: 50%;
  right: -6px;
  width: 6px;
  height: 6px;
  margin-top: 2px;
  border-top: 2px solid #036;
  border-right: 2px solid #036;
  transition: all .2s cubic-bezier(.4, 0, .2, 1) .2s;
  transform: rotate(-45deg) translateY(-50%)
}
.header_lang_mobile span {
  display: block;
  cursor: pointer;
  color: #666
}
.header_lang_mobile ul {
  position: absolute;
  top: 50px;
  left: -10px;
  width: 130px;
  margin: 0;
  padding: 0;
  background: #e5e5e5;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 10px, 0);
  transition: all .5s ease;
}
.header_lang_mobile ul li a {
  display: block;
  height: 20px;
  line-height: 20px;
  margin: 0;
  padding: 5px 10px;
  font-size: 0.875rem;
  color: #666
}
.header_lang_mobile ul li a:hover {
  display: block;
  padding: 5px 10px;
  background: #036;
  color: #fff
}
.header_lang_mobile .lang:hover ul {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
}
}