/**
* Demo Stuff
*/
/*.style-1{position: relative;}*/
.container {
  text-align: left;
}
/**
* iPhone
* Credits: Flat, Scaleable CSS iPhone Illustration by Tom Hergenreter
* http://codepen.io/TomHergenreter/details/qDywF/
*/

/*.iphone__screen {
  width: 14.5em;
  height: 22.938em;
  position: absolute;
  top: 3.75em;
  left: .750em;
  overflow: hidden;
}*/
.iphone__screen {
  width: 100%;
  height: 100%;
  position: absolute;
  /*position: absolute;*/
  top:0;
  left:0;
  overflow:hidden;
  z-index:20;
}
.nav--active{position: absolute;}
.iphone__content {

 /* background-color: #D2527F;*/

  /*overflow-y: scroll;*/
	  width: 100%;
 -webkit-overflow-scrolling: touch;
 height: 100%;
}
/**
* Navigation Defaults
*/
.nav {
  position: fixed;
  z-index: -1;
  opacity: 1;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 300ms;
          transition-duration: 300ms;
		/* background:rgba(0,0,0,0.05);*/
	
}
.nav--active .nav {
	z-index:20;
  opacity: 1;
  

}

.nav__list {
	overflow:hidden;
  padding: 0;
  line-height:2.3;
  width:100%; height:100%;padding:0 0 0 4rem;
		    -webkit-transition-duration: 400ms;
          transition-duration: 400ms;
 
}
.nav__list a{color: #DAE1DD;}
.nav__item {
  list-style-type: none;
   text-align: left;
     margin-bottom:8px; 
	 font-size: 1.6rem;list-style-type: none;
   
}
.nav__item a:hover{/*border-bottom: 1px solid rgba(239,239,239,0.5)*/   text-decoration: underline; text-underline-offset: 4px; }
.nav__item ul{margin:0}
.nav__item ul li{font-size: 1.3rem;line-height: 1.5;font-weight: 200;}
.nav__link {
  letter-spacing:2px;

  /*text-transform: uppercase;*/
  text-decoration: none;
  opacity: 1;
/*  -webkit-transition: opacity 300ms ease-in-out;
  transition: opacity 300ms ease-in-out;*/
    -webkit-transition-duration: 300ms;
          transition-duration: 300ms;
}
/* Default navigation icon */
.nav__trigger {display: block;position:fixed;width: 4rem;height: 4rem;left:2.5%;top: 1rem;z-index: 100;opacity: 1;padding:1.8rem 0.7rem;border: 1px solid #070707;border-radius: 2rem;background: #DAE1DD;
-webkit-transition: all 0.4s ease 0s;-moz-transition: all 0.4s ease 0s;transition: all 0.4s ease 0s;right: auto}

#index .nav__trigger{top: 5rem;}


	
	
.nav--active .nav__trigger {
  opacity: 1;
}

.nav__trigger:hover{ opacity:1;}


.nav__icon {
	
  display: inline-block;
  position: relative;
  width: 100%;
  height: 1px;
  background-color: #54372d ;
  -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: 500ms;
          transition-duration: 500ms;
}
.nav__icon:before,
.nav__icon:after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  position: absolute;
  z-index:20;
  background: #54372d ;
  -webkit-transition-property: margin, -webkit-transform;
  transition-property: margin, -webkit-transform;
  transition-property: margin, transform;
  transition-property: margin, transform, -webkit-transform;
  -webkit-transition-duration: 500ms;
          transition-duration: 500ms;
}
.nav__icon:before {
  margin-top: -0.7rem;
}
.nav__icon:after {
  margin-top:0.7rem;
}

.home .nav__icon {background-color: #FFF;}
.home .nav__icon:before,.home .nav__icon:after{background-color: #FFF;}


/**
* Style #1
*/
.style-1 .nav {
	opacity:0;
/*  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);*/
  width: 300px;
  height: 100%;
  
}
.style-1 .nav__list {

  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  background: #252B2D;
}


.style-1 .nav__link {
  opacity: 0;
/*  -webkit-transition-delay: 300ms;
          transition-delay: 300ms;*/
}
.style-1 .nav--active .nav__link {
  opacity: 1;
}
.style-1 .nav--active .nav {
/* -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;*/
		  opacity:1;
/*  -webkit-transform: translateX(0);
          transform: translateX(0);*/
}
.style-1 .nav--active .nav__list {
 -webkit-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

/*.style-1 .nav--active .nav__icon {
  background: rgba(0, 0, 0, 0);
}
.style-1 .nav--active .nav__icon:before {
  margin-top: 0;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.style-1 .nav--active .nav__icon:after {
  margin-top: 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}*/

.nav__list {text-align: right;}



.style-1 .nav--active .nav__icon {
  background: rgba(0, 0, 0, 0);

}
.style-1 .nav--active .nav__icon:before {
  margin-top: 0;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
		  background: #070707;height: 2px;
		  
}
.style-1 .nav--active .nav__icon:after {
  margin-top: 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
		  background: #070707;height: 1px;
}


.nav .lang{ position:absolute; bottom:3%;width:92%;text-align:left;left:2rem;font-size: 1.6rem;display: block;height: 3rem}




.nav_close{position:absolute;right:0;top:0; width: 22%; height: 100vh; background:rgba(0,0,0,0)}



.style-1 .nav--active .sub_menu {
  opacity: 1;
}


@media (max-width:800px){
	#index .nav__trigger{top: 4rem;}
	.nav__trigger{top:1rem;left:3rem}
	.style-1 .nav {width:100%;}
	.nav__item{font-size: 2rem}
	.nav--active .nav__trigger {left: auto;right: 3rem;}
}




/* 二级菜单（无空白版本） */
.sub-menu {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    margin-left: 20px;
    transition:
        max-height 0.5s ease,
        opacity 0.5s ease,
        visibility 0s linear 0.5s; /* 延迟隐藏内容，避免空白 */
}

.nav__item.open .sub-menu {
    visibility: visible;
    max-height: 500px; /* 够大即可 */
    opacity: 1;
    transition:
        max-height 0.5s ease,
        opacity 0.5s ease,
        visibility 0s; /* 展开时立刻显示 */
}

.sub-menu li {
    margin: 6px 0;
}

.sub-menu a {
    color: #aaa;
	font-size: 1.6rem;
    text-decoration: none;
}

.menu_bottom{position: fixed;bottom:5vh;z-index: 20;left: 4rem; color: #DAE1DD}
.menu_bottom a{margin-right: 1rem;opacity: 0.5}
.menu_bottom a.active{opacity: 1}



/* 默认状态 = 收起动画 0.5s */
.nav__item.has-sub .sub-menu {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .5s ease, opacity .5s ease;
}

/* 展开状态 = 展开动画 1.5s */
.nav__item.has-sub.open .sub-menu {
  max-height: 500px;  /* 足够大即可 */
  opacity: 1;
  transition: max-height 1.5s ease, opacity 1.5s ease;
}


/* =====================================================
   PC 端：hover 打开菜单（不影响移动端）
   ===================================================== */
@media (hover: hover) and (pointer: fine) {

  /* nav 默认隐藏（沿用你 style-1 的动画逻辑） */
  .style-1 .nav {
    opacity: 0;
    z-index: 20;
    pointer-events: none;
  }

  .style-1 .nav__list {
    transform: translateX(-100%);
  }

  /* hover style-1 或 nav 本身 → 打开 */
  .style-1:hover .nav,
  .style-1 .nav:hover {
    opacity: 1;
    pointer-events: auto;
  }

  .style-1:hover .nav__list,
  .style-1 .nav:hover .nav__list {
    transform: translateX(0);
    transition: all 400ms ease-in-out;
  }

  /* PC 下不使用 nav--active */
  .nav--active .nav {
    opacity: 0;
  }

  .nav--active .nav__list {
    transform: translateX(-100%);
  }

  /* 汉堡按钮 hover 不再触发点击逻辑 */
  .nav__trigger {
    cursor: default;
  }
}

/* =====================================================
   PC：二级菜单 hover 展开
   ===================================================== */
@media (hover: hover) and (pointer: fine) {

  .nav__item.has-sub:hover > .sub-menu {
    max-height: 500px;
    opacity: 1;
    visibility: visible;
    transition: max-height 0.8s ease, opacity 0.4s ease;
  }
}

/* =====================================================
   修复：PC hover 时一级菜单文字不显示
   ===================================================== */
@media (hover: hover) and (pointer: fine) {

  /* hover 打开菜单时，显示一级菜单文字 */
  .style-1:hover .nav__link,
  .style-1 .nav:hover .nav__link {
    opacity: 1;
  }

}