@charset "utf-8";
.amap-controls{opacity:0;}
#header .h-right {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: center;
  position: absolute;
  left:auto; right:0;
  top: 50%;
  transform: translate(0, -50%);
  z-index: 12;
}
#header .hamburger {
  padding: 0;
  height: 24px;
}
#header .hamburger-box {
  width: 30px;
  height: 24px;
}
#header .hamburger-inner, #header .hamburger-inner::before, #header .hamburger-inner::after {
  width: 30px;
  height: 3px;
  background: #222;
}
#header .hamburger--3dx-r .hamburger-inner {
  transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0.5s 0s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
}
#header .hamburger--3dx-r .hamburger-inner::before, #header .hamburger--3dx-r .hamburger-inner::after {
  transition: transform 0.6s 0s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
} 
.f-no-c-center {
  align-items: center;
}
.f-no-c-center, .f-no-c-start {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.f-no-s-center {
  align-items: center;
}
.f-no-s-center, .f-no-s-end {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
}


.searchbtn {
  cursor: pointer;
  height: 30px;
  transition: all .4s;
  width: 30px;
}
#header .line {
  background: #000;
  height: 10px;
  margin: 0 3em 0 .25rem;
  opacity: .2;
  width: 1px;
}
svg:not(:root) {
  overflow: hidden;
}
#header .searchbtn .icon {
  fill: #333;
  height: 15px;
  width: 15px;
}
#header .langlink {
  height: 27px;
  margin-right: .25rem;
  width: 25px;
}
#header .langlink svg {
  height: 24px;
  width: 24px;
}

#header .hamburger.is-active .hamburger-inner, #header .hamburger.is-active .hamburger-inner::before, #header .hamburger.is-active .hamburger-inner::after {
  background: #222;
    background-color: rgb(34, 34, 34);
}
#header .warp-bg {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 8;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: all .5s ease; display:none
}
#header .warp-bg.cur {
  opacity: 1;
  visibility: visible;
}
#header .warp-nav {
  height: calc(100vh - 80px);
  padding: 00px 0 45px;
  position: fixed;
  background: #fff;
  width: 100%;
  right: 0;
  top: 80px;
  z-index: 9;
  display: none;
}
#header .nav {
  
  color: #333;
  position:absolute; width:100%;
  overflow-y: auto;
  height: calc(100vh - 80px);
}
.js-m-2-1 {
  opacity: 0;
  transform: translate(0, 30px);
  transition: all 0.8s cubic-bezier(0.79, -0.27, 0.21, 0.82);
    transition-delay: 0s;
}

#header .nav .li {
  position: relative;
 
  
  padding: 0 5%;
  background: #f7f7f7;
}
#header .nav .warp-btn {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  display: block;
  position: relative;
  color: #333;
  border-bottom: 2px solid #f2f2f2;
  transition: all .3s ease;
}
#header .nav .warp-btn {
  color: #333; padding:12px 0;
}
.js-m-2-1.animate {
  opacity: 1;
  transform: translate(0, 0);
}

 
#header .nav .tit {
  display: flex;
  width: 100%;
  line-height: 32px;
  border-bottom: 2px solid #f2f2f2;
  position: relative;
}
.fl1 {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
}
#header .nav .tit {
  line-height: 2rem;
}
#header .svgbtn {
  width: 35px;
  height: 35px;
  position: relative;
}
#header .nav .sub-tit::after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  background-size: 100% auto;
  position: absolute;
  right: 6.4%;
  top: 16px;
  background: url(../img/img1.svg);
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
    background-size: auto;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 20px auto;
  transform: rotate(0);
  transform-origin: center center;
  transition: all .3s ease-in-out;
}
#header .svgbtn .icon1 {
  opacity: 1;
  transition: all .3s;
  z-index: 2;
}
#header .svgbtn svg {
  position: absolute;
  width: 16px;
  height: 16px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  fill: #c4c4c4;
}
svg:not(:root) {
  overflow: hidden;
}
#header .svgbtn .icon2 {
  opacity: 0;
  width: 20px;
  height: 20px;
  transition: all .3s;
  z-index: 3;
}
#header .nav .sec-list {
  line-height: 35px;
  padding: .5rem 1.25rem;
  display: none;
  background: #f2f2f2;
}
#header .tit.on .svgbtn .icon1 {
  opacity: 0;
}
#header .tit.on .svgbtn .icon2 {
  opacity: 1;
}
.ovh-f{ overflow:hidden}
.search-form{ padding:0 3.125%;}
.warp-search-form {
  display: none;
  position: fixed;
  top: 80px;
  padding: 0%;
  width: 100%;
  background-color: #f9f9f9;
  height: 95px;
  padding: 0%;
  border-bottom: 1px solid #e3e3e3;
  z-index: 5;
}
.fl1 {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
}
.warp-search-form .search-form, .warp-search-form {
  height: 60px;
}
.warp-search-form .search-form .dxnav-search-icon {
  height: 24px;
  width: 24px;
  display: flex;
  margin: 0 0px 0 0;
  align-self: center;
  align-items: center;
  justify-content: center;
}
.warp-search-form .search-form .dxnav-icon {
  width: 24px;
  height: 24px;
  margin-right: 0;
}
.warp-search-form .search-form .input2 {
  width: calc(100% - 250px - 20px);
  margin-right: .5em;
  
  background-color: transparent;
  border: none;
}
.warp-search-form .search-form .submit-button {
  width: 125px;
  height: 45px;
  margin: 0;
  padding: 0 12px;
  
  background-color: #fff;
  box-shadow: inset 0 0 0 1px #0c121c;
  background-color: #0c121c;
  color: #fff;
  
  cursor: pointer;
  text-decoration: none;
  border: none;
  letter-spacing: .12em;
  transition: color .4s ease,background-color .4s ease;
}
.warp-search-form .search-form .search-close {
  width: 44px;
  height: 44px;
  margin: 0 0px 0 0px;
  cursor: pointer;
  background-color: transparent;
}
.fl2 {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}
.warp-search-form .search-form .search-close svg {
  width: 20px;
  height: 20px;
}
#header .nav .sec-list p a{ font-size:.9375em;}


@media (max-width: 767px){
#header .langlink{ margin-right: 30px;
 }
.warp-search-form .search-form .input2 {
   
  width: calc(100% - 165px);
}
 .warp-search-form { top:60px;}
 .warp-search-form .search-form .dxnav-icon {
  width: 20px;
  height: 20px;
}
.warp-search-form .search-form .submit-button {
  width: 65px;
  height: 30px;
  padding: 0 6px;
}
.warp-search-form .search-form .search-close {
  width: 30px;
  height: 30px;
  
}
.warp-search-form .search-form .search-close svg {
  width: 16px;
  height: 16px;
}
 #header .warp-nav {
   
  padding: 0px 0 45px;
  
}
#header .nav {
  
  
  height: calc(100vh - 60px);
}


#header .line{ margin-right:2.5em; display:none} 





#header .hamburger {
  height: 20px;
}
#header .hamburger-box {
  width: 25px;
  height: 20px;
}
#header .hamburger-inner, #header .hamburger-inner::before, #header .hamburger-inner::after {
  width: 25px;
  height: 2px;
  background: #222;
}
#header .hamburger-box {
  height: 20px;
  width: 18px;
}
#header .hamburger-inner, #header .hamburger-inner::after, #header .hamburger-inner::before {
  height: 2px;
  width: 18px;
}
#header .hamburger-inner, #header .hamburger-inner::after, #header .hamburger-inner::before {
  height: 2px;
  width: 18px;
}
#header .hamburger-inner::before {
  top: -6px;
}
#header .hamburger-inner::after {
  bottom: -6px;
}

 .hamburger-inner::before {
  top: -8px;
}
.hamburger-inner::after {
  bottom: -10px;
}
#header .hamburger.is-active {  }
#header .hamburger.is-active .hamburger-box{ }
#header .hamburger.is-active .hamburger-inner, #header .hamburger.is-active .hamburger-inner::after, #header .hamburger.is-active .hamburger-inner::before{  }
 .hamburger--3dx-r.is-active .hamburger-inner::before {
  transform: translate3d(0, 6px, 0) rotate(45deg);
}
.hamburger--3dx-r.is-active .hamburger-inner::after {
  transform: translate3d(0, -6px, 0) rotate(-45deg);
}

}


body.ovh-f #header .h-right {
  /*left: 0;
  right: 0;justify-content: flex-end;*/
}
.hamburger{transition-duration: 0s;}
#header .hamburger--3dx-r .hamburger-inner,#header .hamburger--3dx-r .hamburger-inner:before, #header .hamburger--3dx-r .hamburger-inner:after {
  transition: transform 0s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
}
#header .nav .li{ padding:0 3.125%; background-color:#fff;}
.svgbtn svg{ display:none}
.svgbtn:before {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  text-align: center;
  position: absolute;
  right: 5%;
  top: 50%;
  margin-top: -7.5px;
  background: url(../images/header/img1.svg);
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
    background-size: auto;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 15px auto;
  transform: rotate(0);
  transform-origin: center center;
  transition: all .3s ease-in-out;
}
#header .nav.warp-nav1-sub {
  transform: translate(0, 0);
  transition: all .5s;
}
#header .nav.warp-nav2-sub {
  transform: translate(100%, 0);
  transition: all .5s 0s;
}
#header .nav.warp-nav1-sub.active {
  transform: translate(-100%, 0);  
}
#header .nav.warp-nav2-sub.active {
  transform: translate(0, 0);
  transition: all .5s .2s;
}
.rei i{content: ""; cursor:pointer;
  display: block;
  width: 15px;
  height: 15px;
  text-align: center;
   
  left: 0%;
  
   
  background: url(../images/header/img1.svg);
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
    background-size: auto;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 15px auto;
  transform: rotate(0);
  transform-origin: center center;
  transition: all .0s ease-in-out;transform: rotate(180deg); z-index:999;  }
.rightbox i.active{ left:0; visibility:visible} 
.ssdiv{ display:none}
 @media screen and (max-width:480px) {
 .warp-search-form{ width:100%;}
 
 }
 @media screen and (max-width:480px) {
 
#header .warp-nav {
  height: calc(100vh - 60px);
  
  top: 60px;
   
}

}