/*-------------主体样式 开始-----------------------*/


/*首页样式*/
.page{
    width:100%;min-width:320px;max-width:640px;position:relative;
}

.page em{ display: block; background: url(../images/spn.png) repeat; position: absolute; left: 0; bottom:8%; font-size: 1.2rem; color: #fff; text-align: center; font-family: "Microsoft YaHei"; width: 100%; padding: 0.3rem 0;}
.page em span{ display: block;}

.page i{ display: block; text-align: center; position: absolute; left: 35%; bottom:3%;width:34%;}
.page i img{ width: 1.3rem; display: inline-block; margin: 0 5%;}


.page1{position: relative; background: url(../images/home01.jpg?v=1) no-repeat;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;
background-size: 100% 100%;}
.page2{position: relative; background: url(../images/home02.jpg?v=1) no-repeat;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;
background-size: 100% 100%;}
.page3{position: relative; background: url(../images/home3.jpg?v=1) no-repeat;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;
background-size: 100% 100%;}
.page4{position: relative; background: url(../images/home04.jpg?v=1) no-repeat;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;
background-size: 100% 100%;}

.page p{ position:absolute; left:0; top:23.5%; width:100%; color:#3a1314; font-size:1.65rem; text-align:center;font-family: "Microsoft YaHei"; z-index:8;}
.page p span{ display:block;}


.page1 .tit1{position: absolute; width:100%;display: block;left:0; top:12.5%; opacity: 0; z-index: 9; font-size:1.75rem;color: #333;font-weight: normal;font-family: "Microsoft YaHei"; line-height:3.3rem; text-align:center;}
.page1 .tit1 img{ width:100%;}
.page1 .tit2{ top: 17.15%;}
.page1.cur .tit1{
	opacity:1;
	-webkit-animation-name:zoomIn ;
	animation-name: zoomIn;
	-webkit-animation-duration:1.85s;
	animation-duration:1.85s;}
.page1.cur .tit2{
	opacity:1;
	-webkit-animation-name:zoomIn;
	animation-name: zoomIn;
	-webkit-animation-duration:1.95s;
	animation-duration:1.95s; 
	animation-delay:0.75s;-webkit-animation-delay:0.75s;
	}


.page1.cur .tit3{opacity:1;
-webkit-animation-name:zoomIn ;
animation-name: zoomIn;
-webkit-animation-duration:2.5s;
animation-duration:2.5s;-webkit-animation: zoomIn 2s ease 0s 1 both;
-webkit-animation-play-state: initial;

}


.page .tit3{position: absolute; width:100%;display: block;left:0; top:23.5%; opacity: 0; z-index: 9; font-size:1.75rem;color: #333;font-weight: normal;font-family: "Microsoft YaHei"; line-height:3.3rem; text-align:center;font-size: 1.5rem;color: #3a1314;line-height: 2rem;}
.page .tit3 img{ 
    width: 50%;
    margin: 0 auto;
   
}
.page .tit32{ top: 17.15%;}
.page .ta33{ display: block; position: absolute; width: 15.6%; left: 23.4%; bottom: 15%;}
.page .ta33 img,.page .ta34 img,.page .ta35 img{ display: block; width: 100%;}
.page .ta34{ left: 42%;}
.page .ta35{ left:61%;}
.page .tit35{ color: #fff; font-size: 2.5rem; top: auto; bottom:25%;line-height: inherit; }
.page .tit35 span{;width:2.25rem; display: block; margin: 0 auto; font-size: 0;}
.page .tit36{ font-size: 1.25rem; color: #fff;top: auto; bottom:11.5%; line-height: 1.667rem;}.page .tit36 span{ display: block;}
.page .tit37{ color: #50575d; bottom: inherit; top: 17.5%;}
.page .tit38{ color: #50575d; bottom: inherit; top:29.5%;}.page .tit38 strong{ font-weight: normal; color: #a72126;}
.page p{ position:absolute; left:0; top:23.5%; width:100%; color:#3a1314; font-size:1.65rem; text-align:center;font-family: "Microsoft YaHei"; z-index:8;}
.page p span{ display:block;}
.cur p{opacity:1;
	-webkit-animation-name:zoomIn ;
	animation-name: zoomIn;
	-webkit-animation-duration:2.5s;
	animation-duration:2.5s;-webkit-animation: zoomIn 2s ease 0s 1 both;
    -webkit-animation-play-state: initial;}
.cur .ht3{opacity:1;
	-webkit-animation-name:fadeInRight ;
	animation-name: fadeInRight;
	-webkit-animation-duration:2.5s;
	animation-duration:2.5s;-webkit-animation: fadeInRight 2s ease 0s 1 both;
    -webkit-animation-play-state: initial;}
	.cur .ht3a{opacity:1;
	-webkit-animation-name:fadeInLeft ;
	animation-name: fadeInLeft;
	-webkit-animation-duration:2.5s;
	animation-duration:2.5s;-webkit-animation: fadeInLeft 2s ease 0s 1 both;
    -webkit-animation-play-state: initial;}
.page .tita{ position: absolute; left:0; width: 100%; text-align: center; font-size: 2.75rem; bottom:27.5%; font-family: "Microsoft YaHei"; font-weight: normal; color: #fff;}
.cur .tita{opacity:1;
	-webkit-animation-name:fadeInLeft ;
	animation-name: fadeInLeft;
	-webkit-animation-duration:1.2s;
	animation-duration:1.2s;-webkit-animation: fadeInLeft 1.2s ease 0s 1 both;
	-webkit-animation-play-state: initial;}

.cur .tit3{
	opacity:1;
	-webkit-animation-name:zoomIn ;
	animation-name: zoomIn;
	-webkit-animation-duration:1.85s;
	animation-duration:1.85s;}
.cur .tit32{
	opacity:1;
	-webkit-animation-name:zoomIn ;
	animation-name: zoomIn;
	-webkit-animation-duration:1.95s;
	animation-duration:1.95s;}

.cur .tit92{
opacity:1;
	-webkit-animation-name:fadeInLeft ;
	animation-name: fadeInLeft;
	-webkit-animation-duration:1s;
	animation-duration:1s;}
	.cur .tit994{
opacity:1;
	-webkit-animation-name:bounceInDown ;
	animation-name: bounceInDown;
	-webkit-animation-duration:1s;
	animation-duration:1s;}
	
.cur .tit4{
	opacity:1;
	-webkit-animation-name:flipOutX ;
	animation-name: flipOutX;
	-webkit-animation-duration:1s;
	animation-duration:1s;}
.cur .tit31{
	opacity:1;
	-webkit-animation-name:lightSpeedIn ;
	animation-name: lightSpeedIn;
	-webkit-animation-duration:1s;
	animation-duration:1s;}

.page em{ display: block; background: url(../images/spn.png) repeat; position: absolute; left: 0; bottom:8%; font-size: 1.2rem; color: #fff; text-align: center; font-family: "Microsoft YaHei"; width: 100%; padding: 0.3rem 0;}
.page em span{ display: block;}
.page i{ display: block; text-align: center; position: absolute; left: 35%; bottom:3%;width:34%;}
.page i img{ width: 1.3rem; display: inline-block; margin: 0 5%;}
.cur em,.cur i{
	opacity:1;
	-webkit-animation-name:fadeInUp ;
	animation-name: fadeInUp;
	-webkit-animation-duration:2.8s;
	animation-duration:2.8s;}
.cur .ta33{
	opacity:1;
	-webkit-animation-name:fadeInRightBig ;
	animation-name: fadeInRightBig;
	-webkit-animation-duration:0.85s;
	animation-duration:0.85s;}
	
	
.swiper-slide-900{position: relative; background: url(../images/home11.jpg) no-repeat;-webkit-background-size: cover;
-moz-background-size: cover;-o-background-size: cover;background-size: cover;}

.swiper-slide-91{position: relative; background: url(../images/home12.jpg) no-repeat;-webkit-background-size: cover;
-moz-background-size: cover;-o-background-size: cover;background-size: cover;}
.swiper-slide-92{position: relative; background: url(../images/home13.jpg) no-repeat;-webkit-background-size: cover;
-moz-background-size: cover;-o-background-size: cover;background-size: cover;}


.page5 .tit3b{ font-size:2rem; line-height:2.083rem; color:#333333; text-align:center; height:auto; width:100%;bottom: 23%;position: absolute;font-weight: normal;top: auto; animation:fadeInLeft ease-in 1s; -webkit-animation:fadeInLeft ease-in 1s;}
.page5 .tit3{top:auto; bottom:18%;animation-duration: 0.8s;-webkit-animation-duration: 0.8s;}
.page5 p{ font-size:1rem; line-height:1.583rem; color:#e4d188;top: auto;bottom: 8%;}

.page6 .tit3b{ font-size:2rem; line-height:2.083rem; color:#fff; text-align:center; height:auto; width:100%;bottom: 24%;position: absolute;font-weight: normal;top: auto; animation:fadeInLeft ease-in 1s; -webkit-animation:fadeInLeft ease-in 1s;}
.page6 .tit3{top:auto; bottom:9%;animation-duration: 0.8s;-webkit-animation-duration: 0.8s;}
.page6 p{ font-size:1.1667rem; line-height:1.583rem; color:#666666;top: auto;bottom: 13%;}

.page7 .tit3b{ font-size:2rem; line-height:2.083rem; color:#333333; text-align:center; height:auto; width:100%;bottom: 23%;position: absolute;font-weight: normal;top: auto; animation:fadeInLeft ease-in 1s; -webkit-animation:fadeInLeft ease-in 1s;}
.page7 .tit3{top:auto; bottom:9%;animation-duration: 0.8s;-webkit-animation-duration: 0.8s;}
.page7 p{ font-size:1.1667rem; line-height:1.583rem; color:#666666;top: auto;bottom: 13%;}

.page8 .tit3b{ font-size:2rem; line-height:2.083rem; color:#333333; text-align:center; height:auto; width:100%;bottom: 24%;position: absolute;font-weight: normal;top: auto; animation:fadeInLeft ease-in 1s; -webkit-animation:fadeInLeft ease-in 1s;}
.page8 .tit3{top:auto; bottom:9%;animation-duration: 0.8s;-webkit-animation-duration: 0.8s;}
.page8 p{ font-size:1.1667rem; line-height:1.583rem; color:#666666;top: auto;bottom: 11%;}


.onestop {
    display: block;
    position: absolute;
    bottom: 20%;
}
.shopfit {
    display: block;
    position: absolute;
    bottom: 10%;
}

/*跳转链接里面的箭头动画*/
@keyframes arrow
	{
	  0%{opacity: 1;-webkit-transform: translateX(0);transform: translateX(0);}
	  100%{opacity: 0;-webkit-transform: translateX(.7rem);transform: translateX(.7rem);
	}}

@-webkit-keyframes arrow
   {
		0%{opacity: 1;-webkit-transform: translateX(0);transform: translateX(0);}
	    100%{opacity: 0;-webkit-transform: translateX(.7rem);transform: translateX(.7rem);
	}}
.arrow{display: inline-block;-webkit-animation: arrow 1s ease infinite;animation: arrow 1s ease infinite;}

@keyframes toggleArrow
{   0%,
	30%{opacity:0;-webkit-transform:translate(0, 1rem);transform:translate(0, 1rem);}
	60%{opacity:1;-webkit-transform:translate(0, 0);transform:translate(0, 0);}
	100%{opacity:0;-webkit-transform:translate(0, -.8rem);transform:translate(0, -.8rem);
	}}
@-webkit-keyframes toggleArrow
  {0%,
	30%{opacity:0;-webkit-transform:translate(0, 1rem);transform:translate(0, 1rem);}
	60%{opacity:1;-webkit-transform:translate(0, 0);transform:translate(0, 0);}
	100%{opacity:0;-webkit-transform:translate(0, -.8rem);transform:translate(0, -.8rem);
	}}

#toggle-arrow{position: absolute;left: 50%;bottom: 1rem;z-index: 9999;width: 2.4rem;height: 1.4rem;margin-left: -1.2rem;}
#toggle-arrow .toggle-arrow-wrap{position: relative;width: 2.4rem;height: 1.4rem;-webkit-animation: toggleArrow 1.5s infinite;animation: toggleArrow 1.5s infinite;}
#toggle-arrow .fore1,
#toggle-arrow .fore2{height: 1.5rem;width: 1.1rem;position: absolute;top: -.5rem;overflow: hidden;}
#toggle-arrow .fore2{left: 1rem;}
#toggle-arrow .fore1 i,
#toggle-arrow .fore2 i{background-color: #FFF;width: 1.4rem;height: .5rem;border-radius: 2px;position: absolute;box-shadow: 1px -1px 1px #979797;top: .5rem;}
#toggle-arrow .fore1 i{-webkit-transform: rotate(130deg);transform: rotate(130deg);left: .1rem;}
#toggle-arrow .fore2 i{left: -.45rem;-webkit-transform: rotate(50deg);transform: rotate(50deg);}