.hamburger{
    width: 50px;
    height: 50px;
    position: absolute;
    right:0px;
    top: 0px;
  padding-top: 6px;
    z-index: 1000; 
}
.out_line:before{
    content: "";
    height: 0px;
    width: 1px;
    background: #fff;
    left: 0;
    top: 0;
    position: absolute;
  	transition: all 0.5s;
}
.out_line:after{
    content: "";
    height: 1px;
    width: 0px;
    background: #fff;
    left: 0;
    top: 0;
    position: absolute;
  	transition: all 0.5s;
}
.hamburger:hover.out_line:before{
height: 50px;
}
.hamburger:hover.out_line:after{
width: 50px;
}
.hamburger.cur.out_line:before{
height: 50px;
}
.hamburger.cur.out_line:after{
width: 50px;
}
.inner_line:before{
    content: "";
    height: 0px;
    width: 1px;
    background: #fff;
    right: 0;
    bottom: 0;
    position: absolute;
    	transition: all 0.5s;
}
.inner_line:after{
    content: "";
    height: 1px;
    width: 0px;
    background: #fff;
    right: 0;
    bottom: 0;
    position: absolute;
    	transition: all 0.5s;
}
.hamburger:hover.inner_line:before{
height: 50px;
}
.hamburger:hover.inner_line:after{
width: 50px;
}
.hamburger.cur.inner_line:before{
height: 50px;
}
.hamburger.cur.inner_line:after{
width: 50px;
}
/*nav line*/
.hamburger .line{
  width:30px;
  height: 2px;
  display: block;
  margin: 8px auto;
  background: #fff;
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.hamburger:hover{
  cursor: pointer;
}
.hamburger.is-active .line,.inner_line.is-active:before,.inner_line.is-active:after,.out_line.is-active:after,.out_line.is-active:before{background: #c5c5c5;}
/* hamburger-3 */

#hamburger-3.is-active .line:nth-child(1),
#hamburger-3.is-active .line:nth-child(3){
  width: 30px;
}

#hamburger-3.is-active .line:nth-child(1){
  -webkit-transform: translateY(10px) rotate(-45deg);
  -ms-transform: translateY(10px) rotate(-45deg);
  -o-transform: translateY(10px) rotate(-45deg);
  transform: translateY(10px) rotate(-45deg);
}
#hamburger-3.is-active .line:nth-child(2){
width:0px;
}
#hamburger-3.is-active .line:nth-child(3){
  -webkit-transform: translateY(-10px) rotate(45deg);
  -ms-transform: translateY(-10px) rotate(45deg);
  -o-transform: translateY(-10px) rotate(45deg);
  transform: translateY(-10px) rotate(45deg);
}

/* nav-list */
.nav-btn {
	position: fixed;
	right: 60px;
	top: 50%;
	margin-top: -10px;
	height: 20px;
	z-index: 1000;
	width: 90px;
	cursor: pointer;
}

.nav-btn span {
	width: 24px;
	height: 2px;
	background: #517e31;
	display: block;
	top: 9px;
	position: absolute;
	transition: all 0.5s;
}

.nav-btn span:first-child {
	top: 3px;
}

.nav-btn span:last-child {
	top: 16px;
}

.nav-wrap {
	width: 100%;
	height: 100%;
	background: #191919;
	background-size: cover;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 999;
	display: none;
}

.nav-list {
	position: absolute;
   left: 19vw;
   top: 13.5vh;
	z-index: 1000;
}

.nav-list li {
    position: relative;
    line-height: 9vh;
    width: 200px;
    height: 9vh;
}
.nav-list li a{
  	display:block;
	line-height:  9vh;
	height:  9vh;
  	transition: all 0.5s;
   animation: 1s cubic-bezier(.19, 1, .22, 1) forwards hgInner; 
   -webkit-animation: 1s cubic-bezier(.19, 1, .22, 1) forwards hgInner;
   -moz-animation: 1s cubic-bezier(.19, 1, .22, 1) forwards hgInner;
}
.nav-list li a span{
  	display:block;
}
.nav-list li a:after {
	content: "";
	width: 0px;
	height: 1px;
	background: #fff;
	position: absolute;
	left: -70px;
	top: 50%;
   -webkit-transition: all .36s linear;
   -ms-transition: all .36s linear;
   -moz-transition: all .36s linear;
}
.nav-list li a:hover:after {
	width: 50px;
}

.nav-list li a:before {
    content: attr(data-content);
    position: absolute;
    color: #fff;
    left: 0;
    z-index: 9;
    font-weight: 400;
    height: auto;
    width: 0;
    white-space: nowrap;
    overflow: hidden;
    -webkit-transition: all .5s linear;
    -ms-transition: all .5s linear;
    -moz-transition: all .5s linear;
}

.nav-list li a:hover:before {
    width: 100%;
}


.nav-list li a {
	font-size: 34px;
	width: 200px;
	color: #b5b5b5;
	transition: all 0.5s;
	position: absolute;
	left: 0;
	top: 0;
	text-decoration: none;
}

.nav-mask {
	width: 100%;
	height: 100%;
	background:#191c2f;
	position: absolute;
	right: 100%;
	top: 0;
	z-index: 10001;
}

.nav-bg li {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index:998;
	opacity: 0;
}

.nav-bg li{
background: url(/img/mainbg2.jpg) 0 0 no-repeat;
	background-size: cover;
	opacity: 1;
}

.hero__lines {
    max-width: 1230px;
    opacity: .05;
    width: 100%;
    text-align: center;
    z-index: 999;
  height:0;
}

.hero__lines,.hero__lines .inner,.hero__lines .outer {
    margin: 0 auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
}

.hero__lines .inner,.hero__lines .outer {
    background: transparent;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    display: block;
}

.hero__lines .inner {
    max-width: 620px;
    width: 50%;
}

.hero__lines .inner:after {
    background: #fff;
    content: "";
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    width: 1px;
    height: 100%;
}

.hero__bg,.hero__lines .outer {
    width: 100%;
}

@media screen and (max-width:768px){
.nav-list li a {font-size:22px;}
	.hero__lines .inner {
    max-width: 620px;
    width:72%;
}
  .hero__lines .inner:after{width:0;}
  .nav-list li {
    position: relative;
    line-height:7.4vh;
    width:80%;
    height:7.4vh;
}
.nav-list li a{
  	display:block;
	line-height:7.4vh;
	height:  7.4vh;
  	transition: all 0.5s;
   animation: 1s cubic-bezier(.19, 1, .22, 1) forwards hgInner; 
   -webkit-animation: 1s cubic-bezier(.19, 1, .22, 1) forwards hgInner;
   -moz-animation: 1s cubic-bezier(.19, 1, .22, 1) forwards hgInner;
  }
  
}