/*导航弹出层 start*/
.iphone__item {
  width: 16.06em;
  height: 1em;
  position: absolute;
  bottom: -2em;
  color: #158f76;
  text-align: center;
}
.iphone__power-btn {
  width: 2.188em;
  height: .188em;
  background: #e0e0e0;
  position: absolute;
  right: 2.5em;
  top: -0.188em;
}
.iphone__left-btn {
  width: .188em;
  height: 1.250em;
  top: 3.250em;
  left: -0.188em;
  position: absolute;
  background: #e0e0e0;
}
.iphone__left-btn:before {
  content: '';
  width: .188em;
  height: .875em;
  position: absolute;
  top: 3em;
  background: #e0e0e0;
}
.iphone__left-btn:after {
  content: '';
  width: .188em;
  height: .875em;
  position: absolute;
  top: 5.5em;
  background: #e0e0e0;
}
.iphone__details {
  width: .438em;
  height: .438em;
  border-radius: 100%;
  position: relative;
  top: 1.313em;
  left: 8em;
  background: #7c7c7c;
}
.iphone__details:before {
  content: '';
  width: 2.5em;
  height: .25em;
  border-radius: .25em;
  position: absolute;
  top: 1em;
  left: -1em;
  background: #7c7c7c;
}
.iphone__home-btn:before {
  content: '';
  width: .813em;
  height: .813em;
  border: .15em solid #a8a8a8;
  border-radius: .2em;
  position: absolute;
  top: .6em;
  left: .57em;
}
.iphone__content {
  position: relative;
  background-color: #D2527F;
  width: 100%;
  height: 100%;
}
.nav {
  position: absolute;
  z-index: 10;
  opacity: 0;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 300ms;
          transition-duration: 300ms;
}
.nav--active .nav {
  opacity:0.9;
  background-color: #000000;
}
.nav__trigger {
  display: block;
  position: absolute;
  width: 55px;
  height: 51px;
  right: 20px;
  top:42px;
  z-index: 20; 
  padding:22px 8px 0px 8px;
  border:1px rgba(204,204,204,1.0) solid;
  border-radius:5px;box-sizing: border-box;

}
.nav--active .nav__trigger {
  opacity:0.3;background-color: #ffffff;
}
.nav__icon {
  display: inline-block;
  position: relative;
  width: 36px;
  height: 5px;
  background-color: #f2be49;
  -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;
}
.nav__icon:before,
.nav__icon:after {
  content: '';
  display: block;
  width: 36px;
  height: 5px;
  position: absolute;
  background: #f2be49;
  -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;
}
.nav__icon:before {
  margin-top: -12px;
}
.nav__icon:after {
  margin-top: 12px;
}
.style-1 .nav {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  width: 100%;
  min-height: 100%; float:left; padding-bottom:100px;
}
.style-1 .nav__link {
  opacity: 0;
  -webkit-transition-delay: 500ms;
          transition-delay: 500ms;
}
.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;
  -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);
}

/*xiala start*/
.accordion { margin:80px 20px 0 20px;}
.accordion .link {
	cursor: pointer;
	display: block;
	padding:25px;
	color: #fff;
	font-size:30px; 
	text-align:center;
	border-bottom: 1px solid rgba(255,255,255,0.5);
	position: relative;
	-webkit-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
.accordion .link a{
	color: #fff;
}
.accordion li i {
	position: absolute;
	top:30px;
	left: 12px;
	font-size:36px;
	color: #fff;
	-webkit-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
.accordion li i.fa-angle-down {
	right:20px;
	left: auto;
	font-size:36px;
}

.accordion li.open .link {
	color: #fff;
}

.accordion li.open i {
	color: #fff;
}
.accordion li.open i.fa-angle-down {
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}
 .submenu {
 	display: none;
 	font-size:24px;
 }

 .submenu li {
 	border-bottom: 1px solid rgba(255,255,255,0.5);
	text-align:center;
	width:68%; margin:0 auto;
 }

 .submenu a {
 	display: block;
 	text-decoration: none;
 	color: #999999;
 	padding:20px; 
	font-size:24px;
 	-webkit-transition: all 0.25s ease;
 	-o-transition: all 0.25s ease;
 	transition: all 0.25s ease;
 }

 .submenu a:hover {
 	background:#ea5404;
 	color: #FFF;
 }
.ui-border-b { border-bottom:none;}