/*手机端导航*/
.mobile-header{
  background-color:#fff;
  width: 100%;
  height: 60px;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 999999;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.mobile-header-space{
	width: 100%;
	height: 60px;
}
.mobile-logo{float: left; margin:14px 15px; display: inline;}
.mobile-logo img{height:32px;width: auto;}
.mobile-header-icon{
  position: relative;
  width: 60px;
  height:60px;
  float: right;
  -webkit-transition: background 0.5s;
  -moz-transition: background 0.5s;
  -o-transition: background 0.5s;
  transition: background 0.5s;
  background-color: rgba(255,255,255,1);
  cursor: pointer;
}
.mobile-header-icon span{
  position: absolute;
  left: calc((100% - 25px) / 2);
  top: calc((100% - 1px) / 2);
  width: 25px;
  height: 3px;
  background-color:#000;
  border-radius: 3px;
}
.mobile-header-icon span:nth-child(1){
  transform: translateY(-8px) rotate(0deg);
}
.mobile-header-icon span:nth-child(2){
  transform: translateY(0) rotate(0deg);
}
.mobile-header-icon span:nth-child(3){
  transform: translateY(8px) rotate(0deg);
}


.mobile-header-icon-click span:nth-child(1){
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-name: clickfirst;
}       
.mobile-header-icon-click span:nth-child(2){
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-name: clicksecond;
}
.mobile-header-icon-click span:nth-child(3){
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-name: clicksthird;
}
  


@keyframes clickfirst {
0% {
    transform: translateY(8px) rotate(0deg);
    
}

100% {
  transform: translateY(0) rotate(45deg);
}
}   

@keyframes clicksecond {
0% {
    transform: translateY(0) rotate(0deg);
    
}

100% {
  transform: translateX(-999em) rotate(0deg);
}
}  

@keyframes clicksthird{
0% {
    transform: translateY(-8px) rotate(0deg);
}

100% {
  transform: translateY(0) rotate(-45deg);
}
}   

.mobile-header-icon-out span:nth-child(1){
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-name: outfirst;
  }       
.mobile-header-icon-out span:nth-child(2){
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-name: outsecond;
  }
.mobile-header-icon-out span:nth-child(3){
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-name: outthird;
  }

@keyframes outfirst {
0% {
  transform: translateY(0) rotate(-45deg);
}

100% {
  transform: translateY(-8px) rotate(0deg);
}
}   


@keyframes outsecond {
0% {
  transform: translateY(0) rotate(45deg);
}

100% {
  transform: translateY(0) rotate(0deg);
}
}

@keyframes outthird {
0% {
  transform: translateY(0) rotate(45deg);
}

100% {
  transform: translateY(8px) rotate(0deg);
}
}

.mobile-nav{
  background-color: rgba(10,60,116,0.9);
  width: 100%;
  position: fixed;
  top: 60px;
  left: 0px;
  display: none;
  z-index: 99999;
  bottom: 0px;
  overflow-y: auto;
}

.mobile-nav .lang-box{
  padding: 30px 10% 10px;
  display: flex;
  align-items: center;
  color:#aaa;
  font-size: 14px;
}
.mobile-nav .lang-box img{
  width: auto;
  height: 22px;
  margin-right: 5px;
}

.mobile-nav .lang-box a{
  font-size: 16px;
  line-height: 50px;
  text-decoration: none;
  color: #FFFFFF;
  transition: all 0.5s;
  font-size: 16px;
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-name: ReturnToNormal;
  margin: 0 15px 0 5px;
  font-weight: bold;
}


.mobile-nav .lang-box a:hover,.mobile-nav .lang-box a.now{
  color: #e60012;
  border-bottom: solid 1px rgba(255,255,255,0.2);
}


.mobile-ul{
  padding-bottom: 80px;
}
.mobile-ul li.m{
  padding: 0 10%;
}
.mobile-ul li{
  padding: 0 0 0 10%;
}
.mobile-ul a{
  display: block;
  line-height: 50px;
  text-decoration: none;
  color: #FFFFFF;
  border-bottom: solid 1px rgba(255,255,255,0.3);
  transition: all 0.5s;
  font-size: 16px;
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-name: ReturnToNormal;
}
.mobile-ul a:hover,.mobile-ul a.curr{
  /*color: #e60012;*/
  border-bottom: solid 1px rgba(255,255,255,0.2);
}

.mobile-ul li.m h3 a{
  font-weight: bold;
}

.mobile-ul .sub-hide{
  display: none;
}
.sub-list{
  padding: 20px 0;
}
.sub-list li a{
  border-bottom: 0;
  font-size: 14px;
  line-height: 40px;
}

@-webkit-keyframes ReturnToNormal {
100% {
  transform: translateX(0%) rotate(0deg);
}


}

@keyframes ReturnToNormal {
100% {
  transform: translateX(0%) rotate(0deg);
}
}

/* 1580px ` */
@media (max-width: 1580px) {  
  .w80{
    width: 1280px;
    padding: 0;
    margin: 0 auto;
  }
  .wmain{
    width: 90%;
  }
}

/* 1440px ~ 1281px */
@media (max-width: 1440px) {  
  .main{
    width: 95% !important;
    padding: 0;
    margin: 0 auto;
  }
  .nav-menu li{
    margin: 0 18px;
  }

  .head-right-box .lang-box{
    margin-right: 40px;
  }
}

/* 1280px ~ 1025px */
@media (max-width: 1280px) {  
  .w, .main{
    width: 95% !important;
    padding: 0;
    margin: 0 auto;
  }
  .nav-menu li{
    margin: 0 13px;
  }

  .head-right-box .lang-box{
    margin-right: 20px;
  }
  .header .logo-box{
    width: 180px;
  }
}
/* 1024px ~ 992px */
@media (max-width: 1024px) {
  .w, .main{
    width: 95%;
    padding: 0;
    margin: 0 auto;
  }
  
  .h5{height:3px;width:100%;clear:both;}
  .h10{height:5px;width:100%;clear:both;}
  .h15{height:8px;width:100%;clear:both;}
  .h20{height:10px;width:100%;clear:both;}
  .h25{height:13px;width:100%;clear:both;}
  .h30{height:15px;width:100%;clear:both;}
  .h40{height:20px;width:100%;clear:both;}
  .h50{height:25px;width:100%;clear:both;}
  .h60{height:30px;width:100%;clear:both;}
  .h70{height:35px;width:100%;clear:both;}
  .h80{height:40px;width:100%;clear:both;}
  .h90{height:45px;width:100%;clear:both;}
  .h100{height:50px;width:100%;clear:both;}
  .head-center .search-box{
    display: none;
  }
  .head-right-box .phone-box img{
    height: 14px;
  }

  .head-right-box .lang-box{
    margin-right: 20px;
  }
}

/* 991px ~ 321px */
@media (max-width: 991px) {  
  
}

/* 320px ~ 0px */
@media (max-width: 320px) {  
  
}