@charset "utf-8";
/*--基本样式--*/
.myhead_wrap {position: absolute; width: 100%; z-index: 1000}

/*按钮*/
.my_headbtn {overflow: hidden; position: absolute; box-sizing: border-box; width: 100%; padding: 40px 80px 0; z-index: 2000;}
.my_logo {float: left; height: 41px;}
.my_logo img {height: 100%;}
.my_logo .logo2 {display: none;}
.mynav_searchtext {position: absolute; left: 50%; margin-left: -302px; display: none;}
.mynav_searchinput {float: left; width: 470px; box-sizing: border-box; position: relative; padding: 0 40px; background: url(../images/a_searchicon2.png) left center no-repeat; border-bottom: 1px solid #fff;}
.mynav_searchclose {width: 38px; height: 100%; position: absolute; right: 0; top: 0; background: url(../images/a_searchclose2.png) center no-repeat; cursor: pointer;}
.mynav_searchinput input {line-height: 39px; height: 39px; color: #fff;}
.mynav_searchinput input::-webkit-input-placeholder {color: #f3f3f3;}
.mynav_searchinput input:-moz-placeholder {color: #f3f3f3;}
.mynav_searchinput input::-moz-placeholder {color: #f3f3f3;}
.mynav_searchinput input:-ms-input-placeholder {color: #f3f3f3;}
.mynav_searchsub {width: 120px; float: left; margin-left: 15px;}
.mynav_searchsub input {line-height: 36px; height: 40px; border: 2px solid #fff; color: #fff; font-weight: bold; cursor: pointer;}
.mynav_right {float: right;}
.mynav_search {float: left; width: 30px; height: 30px; margin: 5px 34px; cursor: pointer;}
.mynav_search i {display: block; width: 100%; height: 100%; background: url(../images/a_searchicon2.png) center no-repeat;}
.mynav_trigger {float: right; width: 30px; height: 30px; margin: 5px 0; z-index: 100; position: relative;}
.mynav_icon {
  display: inline-block;
  position: relative;
  width: 30px;
  height: 2px;
  background-color: #fff;
  -webkit-transition-property: background-color, -webkit-transform;
  transition-property: background-color, -webkit-transform;
  transition-property: background-color, transform;
  transition-property: background-color, transform, -webkit-transform;
  -webkit-transition-duration: 300ms;
          transition-duration: 300ms;
}
.mynav_icon:before,
.mynav_icon:after {
  content: '';
  display: block;
  width: 30px;
  height: 2px;
  position: absolute;
  background: #fff;
  -webkit-transition-property: margin, -webkit-transform;
  transition-property: margin, -webkit-transform;
  transition-property: margin, transform;
  transition-property: margin, transform, -webkit-transform;
  -webkit-transition-duration: 300ms;
          transition-duration: 300ms;
}
.mynav_icon:before {
  margin-top: -10px;
}
.mynav_icon:after {
  margin-top: 10px;
}

/*展开内容*/
.mynav_div {transform: translateX(100vw) translateZ(0px);}
.mynav_box {position: fixed;top: 0;right: 0; width: 440px; height: 100%; z-index: 300; overflow: hidden; transition: 0.5s; transform: translateX(100%);}
.mynav_bg {display: none; position: absolute; top: calc(90px - 112vw); right: calc(100px - 112vw); width: 224vw; height: 224vw; border-radius: 50%; transform-origin: center; background-color: transparent; transform: scale(0);}
.mynav_wrap {position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-color: #fff; border-left: 1px solid #e7ebf0; box-shadow: -2px 0px 14px 0px rgba(0, 0, 0, 0.3); box-sizing: border-box; padding: 150px 70px ;}
.mynav_listbox {padding-bottom: 115px;}
.mynav_infobox {padding-top: 60px; border-top: 1px solid #333333;}
.mynav_list {}
.mynav_item {font-size:20px; line-height: 50px; transition: color .45s cubic-bezier(.475,.425,0,.995); position: relative; backface-visibility: hidden; box-sizing: border-box;}
.mynav_link {display: inline-block; position: relative; z-index: 3; transition: all .75s cubic-bezier(.63,.03,.21,1); clip-path: inset(0 0 0 0);}
.mynav_item .mynav_link {color: #333;}
.mynav_info {}
.mynav_grayed {display: none;color: #999; position: absolute; top: 0; left: 0; pointer-events: none; z-index: 1; transition: transform .75s cubic-bezier(.63,.03,.21,1),-webkit-transform .75s cubic-bezier(.63,.03,.21,1);}
.mynav_number {display: none; font-size: 12px;line-height: 24px;letter-spacing: .25em; position: absolute; top: 10px; left: 0; pointer-events: none; z-index: 1; opacity: 0; transition: all .85s cubic-bezier(.63,.03,.21,1);}
.mynav_phone {font-size: 16px; line-height: 1.5; font-weight: lighter; padding-bottom: 50px;}
.mynav_phone .strong {font-size: 40px; font-family: 'Conv_DIN-Bold';}
.mynav_lang .link {font-size: 18px; line-height: 24px; color: #666; margin: 8px 15px 0 0; display: inline-block;}
.mynav_lang .link.active {color: #60471C; font-weight: bold;}

.mynav_item.active .mynav_link,
.mynav_item .mynav_link:hover {font-weight: bold;color: #60471C;}
/* .mynav_item.focused_out .mynav_link {-webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0)}
.mynav_item.focused:before{-webkit-transform:scale(1);transform:scale(1)}
.mynav_item.focused .mynav_link {-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0);}
.mynav_item.focused .mynav_grayed,
.mynav_item.focused .mynav_link {-webkit-transform:translate3d(35px,0,0);transform:translate3d(35px,0,0)}
.mynav_item.focused .mynav_number {-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1} */

/* 动画 */
.mynav_item {transform: translateX(-50px); opacity: 0; transition: 0.4s;}
.myhead_active .mynav_item {transform: translate(0); opacity: 1;}
.myhead_active .mynav_item:nth-child(1) {transition-delay: 0.25s;}
.myhead_active .mynav_item:nth-child(2) {transition-delay: 0.3s;}
.myhead_active .mynav_item:nth-child(3) {transition-delay: 0.35s;}
.myhead_active .mynav_item:nth-child(4) {transition-delay: 0.4s;}
.myhead_active .mynav_item:nth-child(5) {transition-delay: 0.45s;}
.myhead_active .mynav_item:nth-child(6) {transition-delay: 0.5s;}
.myhead_active .mynav_item:nth-child(7) {transition-delay: 0.55s;}
.myhead_active .mynav_item:nth-child(8) {transition-delay: 0.6s;}

.mynav_phone {transform: translateY(20px); opacity: 0; transition: 0.4s;}
.mynav_lang {transform: translateY(20px); opacity: 0; transition: 0.4s;}
.myhead_active .mynav_phone,
.myhead_active .mynav_lang {transform: translate(0); opacity: 1;}

.myhead_active .mynav_phone {transition-delay: 0.3s;}
.myhead_active .mynav_lang {transition-delay: 0.45s;}

/*点击按钮变化*/
.myhead_active .mynav_icon {
  background: none;
}
.myhead_active .mynav_icon:before {
  margin-top: 0;
	background: #60471C;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.myhead_active .mynav_icon:after {
  margin-top: 0;
	background: #60471C;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}


/* 黑色 */
.head_black .my_logo img {display: none;}
.head_black .my_logo .logo2 {display: inline-block;}
.head_black .mynav_icon {background-color: #60471C;}
.head_black .mynav_icon:before,
.head_black .mynav_icon:after {background-color: #60471C;}

.head_black .myhead_active .mynav_icon {background: none;}
.head_black .myhead_active .my_logo img {display: none;}
.head_black .myhead_active .mynav_search {display: none;}

@media screen and (max-height:800px) {
	.mynav_wrap {padding: 120px 70px;}
	.mynav_listbox {padding-bottom: 60px;}
	.mynav_infobox {padding-top: 40px;}
	.mynav_phone {padding-bottom: 20px;}
}
@media screen and (max-height:750px) {
	.my_headbtn {padding: 25px 50px 0;}
}
@media screen and (max-height:700px) {
	.mynav_box {width: 400px;}
	.mynav_wrap {padding: 100px 60px;}
	.mynav_listbox {padding-bottom: 40px;}
	.mynav_infobox {padding-top: 30px;}
	.mynav_phone {padding-bottom: 10px; font-size: 14px;}
	.mynav_phone .strong {font-size: 32px;}
	.mynav_lang .link {font-size: 16px;}
	.mynav_item {font-size: 22px; line-height: 2;}
}