@charset "utf-8";
/* CSS Document */




	.nav-menu {
		display: block;
		width:100%;
	}
	.nav-menu > li {
		display: inline;
		width:20%;
		float:left;
	}
	.nav-menu > li:last-child {
		border-right: none;
	}
	.nav-menu li a {
		color: #fff;
		display: block;
		text-decoration: none;
		/*调用本地字体*/
		font-family:sansationregular;
		-webkit-font-smoothing: antialiased;
		-moz-font-smoothing: antialiased;
		font-smoothing: antialiased;
		text-transform: capitalize;
		overflow: visible;
		line-height: 1.6;
        font-size: 1.125em;
		padding: 10% 20%;
	}
	.three-d {
		/* 任务三、设置3D舞台布景 */
		-webkit-perspective: 200px;
		-moz-perspective: 200px;
		-ms-perspective: 200px;
		-o-perspective: 200px;
		perspective: 200px;
			  /*任务四、设置3D舞台布景过渡效果*/
		-webkit-transition: all .07s linear;
		-moz-transition: all .07s linear;
		-ms-transition: all .07s linear;
		-o-transition: all .07s linear;
		transition:all .7s linear;
		position: relative;
	}
	.three-d:not(.active):hover {
		cursor: pointer;
	}
	/*任务五、给不是当前状态的3D舞台的悬浮与聚焦状态设置变形效果*/
	.three-d:not(.active):hover .three-d-box,  .three-d:not(.active):focus .three-d-box {
		-wekbit-transform: translateZ(-30px) rotateX(90deg);
		-moz-transform: translateZ(-30px) rotateX(90deg);
		-o-transform: translateZ(-30px) rotateX(90deg);
		-ms-transform: translateZ(-30px) rotateX(90deg);
		transform: translateZ(-30px) rotateX(90deg);
	}
	.three-d-box {
			  /*任务六、给3D舞台中“.three-d-box”设置过渡与变形效果*/
		-webkit-transition: all .3s ease-out;
		-moz-transition: all .3s ease-out;
		-ms-transition: all .3s ease-out;
		-o-transition: all .3s ease-out;
		transition: all .3s ease-out;
		-webkit-transform: translatez(-25px);
		-moz-transform: translatez(-25px);
		-ms-transform: translatez(-25px);
		-o-transform: translatez(-25px);
		transform: translatez(-25px);
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		-ms-transform-style: preserve-3d;
		-o-transform-style: preserve-3d;
		transform-style: preserve-3d;
		-webkit-pointer-events: none;
		-moz-pointer-events: none;
		-ms-pointer-events: none;
		-o-pointer-events: none;
		pointer-events: none;
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
	}
	/*任务七、给导航设置3D前，与3D后变形效果*/
	.front {
		-webkit-transform: rotatex(0deg) translatez(30px);
		-moz-transform: rotatex(0deg) translatez(30px);
		-ms-transform: rotatex(0deg) translatez(30px);
		-o-transform: rotatex(0deg) translatez(30px);
		transform: rotatex(0deg) translatez(30px);
	}
	.back {
		-webkit-transform: rotatex(-90deg) translatez(30px);
		-moz-transform: rotatex(-90deg) translatez(30px);
		-ms-transform: rotatex(-90deg) translatez(30px);
		-o-transform: rotatex(-90deg) translatez(30px);
		transform: rotatex(-90deg) translatez(30px);
		color: #FFE7C4;
	}
	.front, .back {
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: #74adaa;
		padding: 10% 25%;
		color: white;
		-webkit-pointer-events: none;
		-moz-pointer-events: none;
		-ms-pointer-events: none;
		-o-pointer-events: none;
		pointer-events: none;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	/*任务八、设置导航当前状态与悬浮状态下的背景效果*/
	.nav-menu li .active .front,  .nav-menu li .active .back,  .nav-menu li a:hover .front,  .nav-menu li a:hover .back {
		background-color: #51938f;
		-webkit-background-size: 5px 5px;
		background-size: 5px 5px;
		background-position: 0 0, 30px 30px;
		background-image: -webit-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
		background-image: -moz-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
		background-image: -ms-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
		background-image: -o-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
		background-image: linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
	}
	.nav-menu ul {
		position: absolute;
		text-align: left;
		line-height: 1.6;
        font-size: 1.125em;
		width: 200px;
		-webkit-transition: all 0.3s ease-in;
		-moz-transition: all 0.3s ease-in;
		-ms-transition: all 0.3s ease-in;
		-o-transition: all 0.3s ease-in;
		transition: all 0.3s ease-in;
		-webkit-transform-origin: 0px 0px;
		-moz-transform-origin: 0px 0px;
		-ms-transform-origin: 0px 0px;
		-o-transform-origin: 0px 0px;
		transform-origin: 0px 0px;
		-webkit-transform: rotateX(-90deg);
		-moz-transform: rotateX(-90deg);
		-ms-transform: rotateX(-90deg);
		-o-transform: rotateX(-90deg);
		transform: rotateX(-90deg);
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		-o-backface-visibility: hidden;
		backface-visibility: hidden;
	}
	/*任务九、显示下拉导航菜单，并其设置一个变形效果*/
	.nav-menu > li:hover ul {
		-webkit-transform: rotateX(0deg);
		-moz-transform: rotateX(0deg);
		-ms-transform: rotateX(0deg);
		-o-transform: rotateX(0deg);
		transform: rotateX(0deg);
	}
	.menu-handler{
		width:60px;
		height:60px;
		cursor:pointer;
		display:block;
		position:fixed;
		z-index:99999;
		top:0;
		right:0
	}
	.menu-handler .burger{
		width:32px;
		height:4px;
		background:#333;
		display:block;
		position:absolute;
		z-index:5;
		top:27px;
		left:50%;
		margin:0 0 0 -14px;
		transform-origin:center;
		-webkit-transform-origin:center;
		-moz-transform-origin:center;
		-o-transform-origin:center;
		-ms-transform-origin:center;
		-webkit-transition:all .3s;
		-moz-transition:all .3s;
		-o-transition:all .3s;
		-ms-transition:all .3s
	}
	.menu-handler .burger-1{
		-moz-transform:translateY(-9px);
		-webkit-transform:translateY(-9px);
		-o-transform:translateY(-9px);
		-ms-transform:translateY(-9px);
		transform:translateY(-9px)
	}
	.menu-handler .burger-3{
		-moz-transform:translateY(9px);
		-webkit-transform:translateY(9px);
		-o-transform:translateY(9px);
		-ms-transform:translateY(9px);
		transform:translateY(9px)
	}
	.menu-handler:hover .burger{background:#333529}
	.menu-handler.active .burger{
		-moz-transform:translateY(0);
		-webkit-transform:translateY(0);
		-o-transform:translateY(0);
		-ms-transform:translateY(0);
		transform:translateY(0)
	}
	.menu-handler .burger-1.rotated{
		-moz-transform:rotate(-45deg);
		-webkit-transform:rotate(-45deg);
		-o-transform:rotate(-45deg);
		-ms-transform:rotate(-45deg);
		transform:rotate(-45deg)
	}
	.menu-handler .burger-2.rotated{
		opacity:0;
		-moz-opacity:0;
		-khtml-opacity:0;
		-webkit-opacity:0
	}
	.menu-handler .burger-3.rotated{
		-moz-transform:rotate(45deg);
		-webkit-transform:rotate(45deg);
		-o-transform:rotate(45deg);
		-ms-transform:rotate(45deg);
		transform:rotate(45deg)
	}
	.menu{
		position:fixed;
		width:100%;
		height:100%;
		overflow:hidden;
		z-index:9999;
		top:0;
		left:auto;
		background:#1C1C1C;
		background:rgba(0,0,0,.9);
		right:auto;
		display:none
	}
	.menu .menubox{
		width:100%;
		height:auto;
		display:table-cell;
		vertical-align:middle;
		text-align:center;
	}
	.navigation li{
		width:80%;
		max-width:400px;
		height:40px;
		line-height:40px;
		border:1px solid #ffffff;
		margin:15px auto;
		float:none;
		clear:both
	}
	.navigation li a{
		height:40px;
		line-height:40px;
		color:#ffffff;
		font-size:16px;
		display:block;
	}
	.navigation li a:hover{
		height:40px;
		line-height:40px;
		color:#ffffff;
		font-size:16px;
		display:block;
		background-color:#73aa5c;
	}

.subnav {
  width: 72%;
  margin: 100px auto;
}
.subnav > ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}
.dropdown a {
  text-decoration: none;
}
.dropdown [data-toggle="dropdown"] {
  position: relative;
  display: block;
  color: white;
  background: #2980b9;
  -moz-box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset;
  -webkit-box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset;
  box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
  padding: 10px;
}
.dropdown [data-toggle="dropdown"]:hover {
  background: #2c89c6;
}
.dropdown .icon-arrow {
  position: absolute;
  display: block;
  font-size: 0.7em;
  color: #fff;
  top: 14px;
  right: 10px;
}
.dropdown .icon-arrow.open {
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
  -moz-transition: -moz-transform 0.6s;
  -o-transition: -o-transform 0.6s;
  -webkit-transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
}
.dropdown .icon-arrow.close {
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -moz-transition: -moz-transform 0.6s;
  -o-transition: -o-transform 0.6s;
  -webkit-transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
}
.dropdown .icon-arrow:before {
  content: '\25BC';
}
.dropdown .dropdown-menu {
  max-height: 0;
  overflow: hidden;
  list-style: none;
  padding: 0;
  margin: 0;
}
.dropdown .dropdown-menu li {
  padding: 0;
}
.dropdown .dropdown-menu li a {
  display: block;
  color: #6e6e6e;
  background: #eeeeee;
  -moz-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
  -webkit-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
  box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
  text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
  padding: 10px 10px;
}
.dropdown .dropdown-menu li a:hover {
  background: #f6f6f6;
}
.dropdown .show, .dropdown .hide {
  -moz-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  -o-transform-origin: 50% 0%;
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
}
.dropdown .show {
  display: block;
  max-height: 9999px;
  -moz-transform: scaleY(1);
  -ms-transform: scaleY(1);
  -o-transform: scaleY(1);
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  animation: showAnimation 0.5s ease-in-out;
  -moz-animation: showAnimation 0.5s ease-in-out;
  -webkit-animation: showAnimation 0.5s ease-in-out;
  -moz-transition: max-height 1s ease-in-out;
  -o-transition: max-height 1s ease-in-out;
  -webkit-transition: max-height 1s ease-in-out;
  transition: max-height 1s ease-in-out;
}
.dropdown .hide {
  max-height: 0;
  -moz-transform: scaleY(0);
  -ms-transform: scaleY(0);
  -o-transform: scaleY(0);
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  animation: hideAnimation 0.4s ease-out;
  -moz-animation: hideAnimation 0.4s ease-out;
  -webkit-animation: hideAnimation 0.4s ease-out;
  -moz-transition: max-height 0.6s ease-out;
  -o-transition: max-height 0.6s ease-out;
  -webkit-transition: max-height 0.6s ease-out;
  transition: max-height 0.6s ease-out;
}

@keyframes showAnimation {
  0% {
    -moz-transform: scaleY(0.1);
    -ms-transform: scaleY(0.1);
    -o-transform: scaleY(0.1);
    -webkit-transform: scaleY(0.1);
    transform: scaleY(0.1);
  }

  40% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -o-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }

  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -o-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }

  80% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -o-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }

  100% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -o-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }

  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -o-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }

  100% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@-moz-keyframes showAnimation {
  0% {
    -moz-transform: scaleY(0.1);
    -ms-transform: scaleY(0.1);
    -o-transform: scaleY(0.1);
    -webkit-transform: scaleY(0.1);
    transform: scaleY(0.1);
  }

  40% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -o-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }

  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -o-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }

  80% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -o-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }

  100% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -o-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }

  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -o-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }

  100% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@-webkit-keyframes showAnimation {
  0% {
    -moz-transform: scaleY(0.1);
    -ms-transform: scaleY(0.1);
    -o-transform: scaleY(0.1);
    -webkit-transform: scaleY(0.1);
    transform: scaleY(0.1);
  }

  40% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -o-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }

  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -o-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }

  80% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -o-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }

  100% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -o-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }

  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -o-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }

  100% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@keyframes hideAnimation {
  0% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }

  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -o-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }

  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -o-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }

  100% {
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -o-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }
}
@-moz-keyframes hideAnimation {
  0% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }

  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -o-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }

  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -o-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }

  100% {
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -o-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }
}
@-webkit-keyframes hideAnimation {
  0% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }

  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -o-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }

  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -o-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }

  100% {
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -o-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }