@charset "utf-8";
/*common css*/	
* {
	margin: 0;
	padding: 0;
}
html,  body {
	width: 100%;
	height: 100%;
}
body,  input {
	font: 14px/1.2em "Microsoft Yahei", "宋体", Helvetica, Arial, sans-serif;
	color: #535353;
}
img {
	border: 0;
}
img[data-src] {
	opacity: 0;
}
ul,  ol,  dd {
	list-style-type: none;
}
a {
	color: inherit;
	text-decoration: none;
}
h1,  h2,  h3,  h4,  h5 {
	color: #535353;
}
[v-cloak] {
	display: none !important;
}
#app {
	display: flex;
	min-height: 100%;
	flex-direction: column;
	color: #fff;
	background: url(../images/dark-stripes) #b76073;
}
header {
 	height: 100px;
}
.container {
	width: 1200px;
	margin: 0 auto;
}
.navbar {
	background: rgba(255,255,255,0.1);
	height: 50px;
}
main {	
	flex: 1 0 auto;
}
main .full-screen {
	color: #ff5fb6;
	line-height: 24px;
	flex-grow: 1;
	position: relative;
}
footer {
	/*background-color: #b76073;*/
	height: 80px;
}
footer .container {
	display: flex;
	justify-content:space-around;
	align-items: center;
	color: #f9eaef;
	text-align: center;
}
header .container{
	position: relative;
}
header .logo {
	position: absolute;
	top: 20px;
	height: 110px;
	background: #ac2c71;
	width: 300px;
	/*box-shadow: 3px 3px 3px #eee;*/
	box-shadow:  0 01px #fbcbdb,
						 01px 0 	 #fbcbdb,
						 01px 02px #fbcbdb,
						 02px 01px #fbcbdb,
						 02px 03px #fbcbdb,
						 03px 02px #fbcbdb,
						 03px 04px #fbcbdb,
						 04px 03px #fbcbdb,
						 04px 05px #fbcbdb,
						 05px 04px #fbcbdb,
						 05px 06px #fbcbdb,
						 06px 05px #fbcbdb;
}

header .logo img{
	position: absolute;
	top:55px;
	left: 20px;
	transform: translateX(-50%);
	transform: translateY(-50%);
}
header .top-nav{
	flex: 0 0 auto;
	color: #fff;
	display: flex;
	justify-content: flex-end;	
}
header .top-nav span {
	text-align: center;
	padding: 20px 10px;
	letter-spacing: 10px;
	width: 100px;
	line-height: 100px;
	background: rgba(255,255,255,0.2);
	box-shadow: 1px 1px 1px #eee;
}
header .top-nav span:not(:last-child) {
	margin-right: 10px;
}
.navbar nav {
	height: 56px;
	width: auto;
	display: flex;
	justify-content: flex-end;
}
.navbar nav a {
	flex-flow: row;
	padding: 0 10px;
	line-height: 56px;
	display: inline-block;
	text-align: right;
	color: #fff;
}
.navbar nav a:hover {
	color: #fff;
	background-color: #ac2c71;
}
.navbar nav a.active {
	color: #9e7353;
	background: linear-gradient(#facd89 5%, #facd89 5%, #facd89 95%, #9e7353 0);
	background-size: 100px 100%;
}
footer p {
	line-height: 60px;
}
/**/
.flytext{
  width: 100%;  
  height: 100%;
  margin:10px; 
  position: relative;  
}
.flytext p{
  position: absolute;
	width: 600px;
  padding: 0px;
	font-size:60px;
	text-align: center;
  color: white;
  opacity: 0;
  transition: all 0.5s;
}
.flytext p.active{
  opacity: 1;
}
@keyframes fadeIn {
0% {
opacity:0
}
100% {
opacity:1
}
}
@keyframes fadeOut {
0% {
opacity:1
}
100% {
opacity:0
}
}
@keyframes fadeInUp {
0% {
opacity:0;
-webkit-transform:translate3d(0, 100%, 0);
-ms-transform:translate3d(0, 100%, 0);
transform:translate3d(0, 100%, 0)
}
100% {
opacity:1;
-webkit-transform:none;
-ms-transform:none;
transform:none
}
}
@keyframes fadeInDown {
0% {
opacity:0;
-webkit-transform:translate3d(0, -100%, 0);
-ms-transform:translate3d(0, -100%, 0);
transform:translate3d(0, -100%, 0)
}
100% {
opacity:1;
-webkit-transform:none;
-ms-transform:none;
transform:none
}
}
@keyframes zoomIn {
0% {
opacity:0;
-webkit-transform:scale3d(.3, .3, .3);
-ms-transform:scale3d(.3, .3, .3);
transform:scale3d(.3, .3, .3)
}
50% {
opacity:1
}
}
@keyframes rubberBand {
0% {
-webkit-transform:scale3d(1, 1, 1);
-ms-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1)
}
30% {
-webkit-transform:scale3d(1.25, .75, 1);
-ms-transform:scale3d(1.25, .75, 1);
transform:scale3d(1.25, .75, 1)
}
40% {
-webkit-transform:scale3d(0.75, 1.25, 1);
-ms-transform:scale3d(0.75, 1.25, 1);
transform:scale3d(0.75, 1.25, 1)
}
50% {
-webkit-transform:scale3d(1.15, .85, 1);
-ms-transform:scale3d(1.15, .85, 1);
transform:scale3d(1.15, .85, 1)
}
65% {
-webkit-transform:scale3d(.95, 1.05, 1);
-ms-transform:scale3d(.95, 1.05, 1);
transform:scale3d(.95, 1.05, 1)
}
75% {
-webkit-transform:scale3d(1.05, .95, 1);
-ms-transform:scale3d(1.05, .95, 1);
transform:scale3d(1.05, .95, 1)
}
100% {
-webkit-transform:scale3d(1, 1, 1);
-ms-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1)
}
}
@keyframes pulse {
0% {
-webkit-transform:scale3d(1, 1, 1);
-ms-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1)
}
50% {
-webkit-transform:scale3d(1.05, 1.05, 1.05);
-ms-transform:scale3d(1.05, 1.05, 1.05);
transform:scale3d(1.05, 1.05, 1.05)
}
100% {
-webkit-transform:scale3d(1, 1, 1);
-ms-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1)
}
}
@keyframes bounceInLeft {
0%, 100%, 60%, 75%, 90% {
-webkit-transition-timing-function:cubic-bezier(0.215, .61, .355, 1);
transition-timing-function:cubic-bezier(0.215, .61, .355, 1)
}
0% {
opacity:0;
-webkit-transform:translate3d(-3000px, 0, 0);
-ms-transform:translate3d(-3000px, 0, 0);
transform:translate3d(-3000px, 0, 0)
}
60% {
opacity:1;
-webkit-transform:translate3d(25px, 0, 0);
-ms-transform:translate3d(25px, 0, 0);
transform:translate3d(25px, 0, 0)
}
75% {
-webkit-transform:translate3d(-10px, 0, 0);
-ms-transform:translate3d(-10px, 0, 0);
transform:translate3d(-10px, 0, 0)
}
90% {
-webkit-transform:translate3d(5px, 0, 0);
-ms-transform:translate3d(5px, 0, 0);
transform:translate3d(5px, 0, 0)
}
100% {
-webkit-transform:none;
-ms-transform:none;
transform:none
}
}
	
@keyframes bounceInRight {
0%, 100%, 60%, 75%, 90% {
-webkit-transition-timing-function:cubic-bezier(0.215, .61, .355, 1);
transition-timing-function:cubic-bezier(0.215, .61, .355, 1)
}
0% {
opacity:0;
-webkit-transform:translate3d(3000px, 0, 0);
-ms-transform:translate3d(3000px, 0, 0);
transform:translate3d(3000px, 0, 0)
}
60% {
opacity:1;
-webkit-transform:translate3d(-25px, 0, 0);
-ms-transform:translate3d(-25px, 0, 0);
transform:translate3d(-25px, 0, 0)
}
75% {
-webkit-transform:translate3d(10px, 0, 0);
-ms-transform:translate3d(10px, 0, 0);
transform:translate3d(10px, 0, 0)
}
90% {
-webkit-transform:translate3d(-5px, 0, 0);
-ms-transform:translate3d(-5px, 0, 0);
transform:translate3d(-5px, 0, 0)
}
100% {
-webkit-transform:none;
-ms-transform:none;
transform:none
}
}
	
@keyframes bounceInUp {
0%, 100%, 60%, 75%, 90% {
-webkit-transition-timing-function:cubic-bezier(0.215, .61, .355, 1);
transition-timing-function:cubic-bezier(0.215, .61, .355, 1)
}
0% {
opacity:0;
-webkit-transform:translate3d(0, 3000px, 0);
-ms-transform:translate3d(0, 3000px, 0);
transform:translate3d(0, 3000px, 0)
}
60% {
opacity:1;
-webkit-transform:translate3d(0, -20px, 0);
-ms-transform:translate3d(0, -20px, 0);
transform:translate3d(0, -20px, 0)
}
75% {
-webkit-transform:translate3d(0, 10px, 0);
-ms-transform:translate3d(0, 10px, 0);
transform:translate3d(0, 10px, 0)
}
90% {
-webkit-transform:translate3d(0, -5px, 0);
-ms-transform:translate3d(0, -5px, 0);
transform:translate3d(0, -5px, 0)
}
100% {
-webkit-transform:translate3d(0, 0, 0);
-ms-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0)
}
}

@keyframes bounceInDown {
0%, 100%, 60%, 75%, 90% {
-webkit-transition-timing-function:cubic-bezier(0.215, .61, .355, 1);
transition-timing-function:cubic-bezier(0.215, .61, .355, 1)
}
0% {
opacity:0;
-webkit-transform:translate3d(0, -3000px, 0);
-ms-transform:translate3d(0, -3000px, 0);
transform:translate3d(0, -3000px, 0)
}
60% {
opacity:1;
-webkit-transform:translate3d(0, 25px, 0);
-ms-transform:translate3d(0, 25px, 0);
transform:translate3d(0, 25px, 0)
}
75% {
-webkit-transform:translate3d(0, -10px, 0);
-ms-transform:translate3d(0, -10px, 0);
transform:translate3d(0, -10px, 0)
}
90% {
-webkit-transform:translate3d(0, 5px, 0);
-ms-transform:translate3d(0, 5px, 0);
transform:translate3d(0, 5px, 0)
}
100% {
-webkit-transform:none;
-ms-transform:none;
transform:none
}
}
@keyframes content{
	to{transform: rotateY(360deg)translateZ(20px)}
}

/*slideshow*/
.slideshow img {
	opacity: 1;
	width: 100%;
	transition: opacity 0.3s;
}
.slideshow{
	width:1920px;
	height:600px;
  margin: 0 auto; /*设置在页面水平居中*/
  overflow: hidden;
	position: relative;  
}

.slides{
  width:100%;
  position: relative;  
}
.slideshow [fade-in] .slide{
	background-repeat: no-repeat;
	background-position: center;
	width: 100%;
	height: 100%;
  position: absolute; /*图片采取绝对定位，均位于左上角，重叠在一起*/
  top: 0;
  left: 0;
  opacity: 0; /*初始不透明度为0，图片都看不见*/
  transition: opacity 1s linear; /*--重点--定义一个关于透明度的transition*/
}
.slideshow [slide-in] .slide{
	background-repeat: no-repeat;
	background-position: center;
	float:left;
	width:1920px;
  opacity: 0; /*初始不透明度为0，图片都看不见*/
  transition: opacity 1s linear; /*--重点--定义一个关于透明度的transition*/
}
.slideshow  .slide.active{
  opacity: 1; /*有active类的图片不透明度为1，即显示图片*/
}
.slideshow  .slide .desc{
	color:#ffffff;
	line-height: 40px;
	width: 400px;
	background: rgba(225,255,255,0.3);
	position: absolute;
	top:10px;
	left:50%;
	text-align: center;
	letter-spacing: 20px;
	font-size: 24px;
	transform: translateX(-50%);
	border-radius: 20px;
}
.slideshow  h3{
		color: #333;
	}
/*-- 设置页码的样式 --*/
.slideshow  .pagination{
  position: absolute;
  bottom: 10px;
  left: 50%;
	transform: translateX(-50%);
	display: flex;
	justify-content: center
}
.slideshow  .pagination span{
  width: 15px;
  height: 15px;
  border-radius: 15px; /*设置页码为圆形*/
  margin: 0 10px;
  background: white;
}
.slideshow  .pagination span.active{
	width: 30px;
  background:  #81001f ;
}
/*-- 设置左右按钮框的样式 --*/
.slideshow  .btn{
  width: 40px;
  line-height: 48px;
  position: absolute;
  top: 50%;
	transform: translateY(-50%);
  color: white;
  background: rgba(255,255,255,0.2);
	background:url(../images/arr.png) no-repeat;
  font-size: 16px;
  text-align: center;
  cursor: pointer; /*设置鼠标*/
  /*设置不能选择文本*/
  -ms-user-select:none;/*IE10*/
  -webkit-user-select:none;/*webkit浏览器*/
  user-select:none;
  display: none;
}
.slideshow  .prev{
	background-position:0 0;
	left: 10px;
}
.slideshow  .next{
	background-position:-132px 0;
	right: 10px;
}
.slideshow:hover .btn{
  display: block;
	width: 40px;
	height: 48px;
}
.slideshow  .btn:hover{
  
}