@charset "utf-8";
/* CSS Document */
 .head_wrap{width:100%; height:100px; margin:0 auto; top:0; left:50%;  transform: translate(-50%,0); position:fixed; z-index: 10;}
 .head_wrap:after{content:""; display:"block"; clear:both;}
 .head_wrap > .inner_wrap{width:calc(100% - 40px); height:100%;  position:absolute; top:0; left:50%; transform: translate(-50%,0); z-index:1}
 .head_wrap .logo_wrap{width:37px; height:55px; position:absolute; left:0; top:50%; transform: translate(0,-50%);}
 .head_wrap .logo_wrap  img{width:100%;}
 .head_wrap .logo_wrap .head_svg{fill:#fff; transition:all .3s;}

 .head_wrap .main_nav_wrap{position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:666px; display:flex; justify-content: space-between;}
 .head_wrap .main_nav_wrap > a.main_nav{color:rgb(255,255,255); transition: all .3s; font-size:30px; font-weight:500;}
 .head_wrap.black .main_nav_wrap > a.main_nav{color:rgb(0,0,0);}
 .head_wrap.on .main_nav_wrap > a.main_nav{color:rgb(255,255,255);}
 .head_wrap .main_nav_wrap > a.main_nav:hover{color:rgb(234,99,99); transition: all .3s;}
 .head_wrap .main_nav_wrap > a.main_nav:last-child{margin-right:0;}


@media only screen and (max-width: 980px){
	 .head_wrap .main_nav_wrap > a.main_nav{font-size:25px; font-weight:500; margin-right:50px;}
	 .head_wrap .main_nav_wrap{width:517px;}
}

 .head_wrap .menu_icon_wrap{position:absolute; width:24px; height:43px; right:0%; top:28px;  cursor:pointer; display:none;transform: rotate(90deg);}
 .head_wrap .menu_icon_wrap > div{width:4px; height:27px; position:absolute; background-color: #fff; top:50%; transform:translate(0, -50%); transition:all .3s;}



 .head_wrap .menu_icon_wrap > div.stick1{left:0;}
 .head_wrap .menu_icon_wrap > div.stick2{height:43px; left:10px;}
 .head_wrap .menu_icon_wrap > div.stick3{left:20px;}
 .head_wrap .menu_icon_wrap > span.empty{width:100%; height:100%; position: absolute; background: transparent;}

 .head_wrap .right_global{position:absolute;  right:0; top:50%; transform: translate(0,-50%); display:flex; align-items: center;}
 .head_wrap .right_global li:nth-child(2){margin:0 15px; color:#fff;}
 .head_wrap .right_global a{color:#fff;}


 .head_wrap  .icon_wrap{position:absolute;  right:0; top:50%; transform: translate(0,-50%);}
 .head_wrap  .icon_wrap .inner_wrap:nth-child(1){width:24px; margin-right:24px; float:left;}
 .head_wrap  .icon_wrap .inner_wrap:nth-child(2){width:20px; margin-right:24px; float:left;}
 .head_wrap  .icon_wrap .inner_wrap:nth-child(3){width:10px; float:left;}
 .head_wrap  .icon_wrap .inner_wrap  img{width:100%; vertical-align: middle;}
 .head_wrap  .icon_wrap .head_svg{fill:#fff; transition:all .3s;}
 .head_wrap.backW .menu_icon_wrap > div{background-color: #000;}
 .head_wrap.on .menu_icon_wrap > div{background-color: #fff;}
 .head_wrap.black .head_svg{fill:#000;}

 .head_wrap.on .head_svg{fill:#fff; transition:all .3s;}
 .head_wrap .head_back{width:0%; height:100%; background-color: #000; opacity:.8; position:absolute; top:0; left:50%; transform: translate(-50%,0%); z-index: 0; }



@media only screen and (max-width: 768px){
	 .head_wrap .main_nav_wrap {display:none;}
	 .head_wrap .menu_icon_wrap{display:block;}
	 .head_wrap .icon_wrap{display:none;}
	 .head_wrap .right_global{display:none;}
}


.nav_wrap{ display:none; width:100%; height:100vh; position:fixed; z-index: 11; top:0; left:0;}
.nav_wrap .inner_wrap{width:0%; height:100%; max-width:659px; background-color: #bcbcbc; text-align: center; position: absolute; z-index: 1; overflow: hidden; top:50%; left:50%; transform: translate(-50%,-50%);}
.nav_wrap .inner_wrap nav{position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);}
.nav_wrap .inner_wrap nav > a{ width:100%; color:#fff; font-size:25px; font-weight: 400; margin-bottom:56px; display:block; text-align: center; transition: all .7s;}
.nav_wrap .inner_wrap nav > a.on{color:#8f8f8f;  transition: all .7s;}
.nav_wrap .inner_wrap nav > a:last-child{margin-bottom:0; }
.nav_wrap .inner_wrap .close_wrap{width:22px; height:27px; margin:3rem auto; position:relative; cursor:pointer;}
.nav_wrap .inner_wrap .close_wrap .stick{position:absolute;  top:0; left:50%;  width:4px; height:27px; background-color: #fff; 
}
.nav_wrap .inner_wrap .close_wrap.on .stick:nth-child(1){ animation:closeStick .3s; animation-delay: 1s; animation-fill-mode: both; left:100%;  animation-direction:normal;}
.nav_wrap .inner_wrap .close_wrap.on .stick:nth-child(2){ animation:closeStick2 .3s; animation-delay: 1s; animation-fill-mode: both; left:100%; animation-direction:normal}

.nav_wrap .inner_wrap .close_wrap.off .stick:nth-child(1){ animation:closeStickback .3s;  animation-fill-mode: both;  left:100%; }
.nav_wrap .inner_wrap .close_wrap.off .stick:nth-child(2){ animation:closeStick2back .3s;  animation-fill-mode: both;  left:100%;}

.nav_wrap .bg{opacity:0; width:100%; height:100%; background-color: rgba(0,0,0,0.8); position:absolute; z-index: 0;} 
.nav_wrap .center_global{position:absolute;  left:50%; bottom:40px; transform: translate(-50%,0); display:flex; align-items: center; z-index: 1;} .nav_wrap .center_global li:nth-child(2){margin:0 15px; color:#fff;}
.nav_wrap .center_global a{color:#fff;}