* {margin: 0;padding: 0;}
html,body{margin: 0; padding: 0; width: 100%;  height: 100%; text-align: center;}
body{background: #f6f1e7;}
section{width: 10rem;min-height: 14.88rem; height: 100%; position: absolute; left: 0; top: 0; margin: auto; }
.logo{position: absolute; width: 3.44rem; height: 0.52rem; top: 0.373rem; left: 0.373rem; background: url(../images/logo.png) no-repeat; background-size: 100% 100%; z-index: 3000; opacity: 0;}   
.logo.show{animation:opacityIn 1s ease-out forwards;}
.musicBtn{ width: 1.066rem; height: 1.066rem; position: absolute; right: 0; top: 0.146rem; background: url(../images/musicBtn.png); background-size:100% 100% ; z-index: 2100;}

/* loading */

.loadingSection .loadingPic{ width: 1.306rem; height: 4.906rem; position: absolute; left: 50%;  top: 50%;margin-left: -0.653rem;margin-top: -5.106rem;  background: url(../images/loading.png) no-repeat; background-size: 100% 100%; }
.loadingSection .loadingTxt{font-size: 0.4rem; text-align: center; color: #b79573; width: 10rem; position: absolute; top: 50%; margin-top: 1.053rem; left: 50%; margin-left: -5rem;}
.loadingSection .loadingPer{font-size: 0.4rem; text-align: center; color: #c9a077; width: 10rem; position: absolute; top: 50%; margin-top: 1.733rem; left: 50%; margin-left: -5rem;}
.loadingSection.hide .loadingPic{animation:opacityOut 1s ease-out forwards;}
.loadingSection.hide .loadingTxt{animation:opacityOut 1s ease-out forwards;}
.loadingSection.hide .loadingPer{animation:opacityOut 1s ease-out forwards;}
/* intro */
.introSection{display: none;}
.introSection.show,.introSection.hide{display: block;}
.introSection .introBg{ position: absolute; width: 4.28rem; height: 7.2rem; top: 50%; left: 50%; margin-top: -5.133rem; margin-left: -2.133rem; background: url(../images/intro.png) no-repeat; background-size: 100%;
-webkit-mask-image:url(../images/mask_rt2.png),url(../images/mask_lb.png);-webkit-mask-position: 0 0,left bottom; -webkit-mask-size: 0,0; -webkit-mask-repeat: no-repeat,no-repeat;
}
.introSection.show .introBg{animation:maskShow2 2s ease-out forwards;}
@-webkit-keyframes maskShow2{
	0%{-webkit-mask-size:0 0,0 0 ;-webkit-mask-position:top right,left bottom;}
	100%{-webkit-mask-size:10rem 15rem,10rem 15rem ;-webkit-mask-position:top right,left bottom;}
}
@-webkit-keyframes maskShow{
	0%{-webkit-mask-size:0 0 ;-webkit-mask-position:top right;}
	100%{-webkit-mask-size:10rem 10rem ;-webkit-mask-position:top right;}
}
.introSection.hide .introBg{-webkit-mask-size:10rem 20rem;-webkit-mask-position:top right;animation:opacityOut 2s ease-in forwards;}
@-webkit-keyframes opacityOut{
	0%{opacity: 1;}
	100%{opacity: 0;}
}
@-webkit-keyframes opacityIn{
	0%{opacity:0;}
	100%{opacity: 1;}
}
/* home */
.homeSection{display: none;}
.homeSection.show{display: block;}
.homeSection .cBall{position: absolute; width: 3.32rem; height: 3.32rem; left: 50%; top: 50%;}
.homeSection .cBall .tag{position: absolute; width: 0.626rem; height: 1.2rem; left: 50%; margin-left: -0.313rem; top: 3.266rem;}
.homeSection .cBall.c1{ margin-top: -7.333rem; margin-left: -3.773rem;}/*{ margin-top: -8.333rem; margin-left: -3.773rem;}*/
.homeSection .cBall.c2{ margin-top: -7.333rem; margin-left: 0.48rem;}
.homeSection .cBall.c3{ margin-top: -2.606rem; margin-left: -3.773rem;}/*{ margin-top: -3.106rem; margin-left: -3.773rem;}*/
.homeSection .cBall.c4{ margin-top: -2.606rem; margin-left: 0.48rem;}
.homeSection .cBall.c5{ margin-top: 1.986rem; margin-left: -3.773rem;}
.homeSection .cBall.c6{ margin-top: 1.986rem; margin-left: 0.48rem;}
.homeSection .cBall .cBlock{-webkit-mask-image:url(../images/mask.png);-webkit-mask-position: 50% 50%; -webkit-mask-size: 0; -webkit-mask-repeat: no-repeat;}
.homeSection .cBall.c1 .cBlock{background: url(../images/c1.png) no-repeat; background-size: 3.32rem 3.32rem;position: absolute; width: 3.32rem;height: 3.32rem;}
.homeSection .cBall.c2 .cBlock{background: url(../images/c2.png) no-repeat; background-size: 3.32rem 3.32rem;position: absolute; width: 3.32rem;height: 3.32rem;}
.homeSection .cBall.c3 .cBlock{background: url(../images/c3.png) no-repeat; background-size: 3.32rem 3.32rem;position: absolute; width: 3.32rem;height: 3.32rem;}
.homeSection .cBall.c4 .cBlock{background: url(../images/c4.png) no-repeat; background-size: 3.32rem 3.32rem;position: absolute; width: 3.32rem;height: 3.32rem;}
.homeSection .cBall.c5 .cBlock{background: url(../images/c5.png) no-repeat; background-size: 3.32rem 3.32rem;position: absolute; width: 3.32rem;height: 3.32rem;}
.homeSection .cBall.c6 .cBlock{background: url(../images/c6.png) no-repeat; background-size: 3.32rem 3.32rem;position: absolute; width: 3.32rem;height: 3.32rem;}

.homeSection .cBall.c1 .tag{background: url(../images/t1.png) no-repeat; background-size: 100%; opacity: 0; }
.homeSection .cBall.c2 .tag{background: url(../images/t2.png) no-repeat; background-size: 100%; opacity: 0;}
.homeSection .cBall.c3 .tag{background: url(../images/t3.png) no-repeat; background-size: 100%; opacity: 0;}
.homeSection .cBall.c4 .tag{background: url(../images/t4.png) no-repeat; background-size: 100%; opacity: 0;}
.homeSection .cBall.c5 .tag{background: url(../images/t5.png) no-repeat; background-size: 100%; opacity: 0;}
.homeSection .cBall.c6 .tag{background: url(../images/t6.png) no-repeat; background-size: 100%; opacity: 0;}
.homeSection.show .cBall.c1 .cBlock{animation:maskShow1 1500ms ease-out forwards;}
.homeSection.show .cBall.c1 .tag{animation:tagIn 1000ms ease-out 100ms forwards;}
.homeSection.show .cBall.c2 .cBlock{animation:maskShow1 1500ms ease-out 100ms forwards;}
.homeSection.show .cBall.c2 .tag{animation:tagIn 1000ms ease-out 200ms forwards;}
.homeSection.show .cBall.c3 .cBlock{animation:maskShow1 1500ms ease-out 200ms forwards;}
.homeSection.show .cBall.c3 .tag{animation:tagIn 1000ms ease-out 300ms forwards;}
.homeSection.show .cBall.c4 .cBlock{animation:maskShow1 1500ms ease-out 300ms forwards;}
.homeSection.show .cBall.c4 .tag{animation:tagIn 1000ms ease-out 400ms forwards;}
.homeSection.show .cBall.c5 .cBlock{animation:maskShow1 1500ms ease-out 400ms forwards;}
.homeSection.show .cBall.c5 .tag{animation:tagIn 1000ms ease-out 500ms forwards;}
.homeSection.show .cBall.c6 .cBlock{animation:maskShow1 1500ms ease-out 500ms forwards;}
.homeSection.show .cBall.c6 .tag{animation:tagIn 1000ms ease-out 600ms forwards;}
@-webkit-keyframes maskShow1{
	0%{-webkit-mask-size:0 0 ;-webkit-mask-position:50% 50%;}
	100%{-webkit-mask-size:4rem 4rem ;-webkit-mask-position:50% 50%;}
}
@-webkit-keyframes tagIn{
	0%{opacity:0; transform: translateY(0.666rem);}
	100%{opacity: 1; transform: translateY(0);}
}
.homeSection .clickTip{position:absolute;width: 3.173rem; height: 2.2rem; bottom: 0.266rem; left: 50%; margin-left: -1.466rem; background: url(../images/clickTip.png) no-repeat; background-size: 100% 100%; opacity: 0;}
.homeSection.show .clickTip{animation:tagIn 1000ms ease-out 2000ms forwards;}

.aniSection{display: none;}
.aniSection.show{display: block;}
.aniSection .ani{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; overflow: hidden; display: none;}
.aniSection.show .ani.show{display: block;}
.aniSection .ani .cBlock{position: absolute; width: 50rem; height: 50rem; transform: scale(0.1); left: 50%; top:50%; -webkit-mask-image:url(../images/mask.png),url(../images/mask.png);-webkit-mask-position: 50% 50%, 50% 50%; -webkit-mask-size: 60% 60%, 100% 100%; -webkit-mask-repeat: no-repeat,no-repeat; transform-origin: 50% 50%;}
.aniSection.show .ani .cBlock{animation:blockShow 1200ms ease-out forwards;}
@-webkit-keyframes blockShow{
	0%{transform-origin: 50% 50%; transform: scale(0.1);}
	100%{transform-origin: 50% 50%; transform: scale(1.6);}
}

.aniSection .ani .aobjBox{position: absolute;width: 2.826rem; height: 4.96rem; left: 50%; margin-left: -3.2rem; top: 50%; margin-top: 0.573rem;}
.aniSection .ani .aobjBg{position: absolute;width: 2.826rem; height: 4.96rem; left: 0;top: 0;opacity: 0; z-index: 0;}
.aniSection .ani .aobjFront{position: absolute;width: 2.826rem; height: 4.96rem;left: 0;top: 0;opacity: 0; z-index: 1; -webkit-mask-image:url(../images/mask_rb.png);-webkit-mask-position: 0 0; -webkit-mask-size: 0; -webkit-mask-repeat: no-repeat;}
.aniSection .ani .aobj_mir{position: absolute;width: 2.826rem; height: 4.96rem; opacity: 0; left: 0; top: 0; transform: rotateX(180deg) translateY(-4.86rem);-webkit-mask-image:linear-gradient(rgba(0,0,0,0) 70%,rgba(0,0,0,0.1))}
.aniSection .ani .cardBox{ position: absolute; width: 3.853rem; height: 6.133rem; left: 50%; top: 50%; margin-top:  -0.266rem; margin-left: -0.3rem; perspective: 500px;transform-style: preserve-3d; }
.aniSection .ani .cardBg{position:absolute; box-sizing: border-box; left:0; top:0;width: 3.853rem; height: 6.133rem;border:0.053rem solid #f0c374;  transform: rotateY(-25deg); border-radius: 0.266rem;opacity: 0; z-index: 0;}
.aniSection .ani .cardFrone{position:absolute; left:0; top:0;width: 3.853rem; height: 6.133rem;transform: rotateY(-25deg); border-radius: 0.266rem;opacity: 0;z-index: 3;
-webkit-mask-image:url(../images/mask_lb.png);-webkit-mask-position: 0 0; -webkit-mask-size: 0; -webkit-mask-repeat: no-repeat;
}
.aniSection .ani .card_mir{width: 3.853rem; height: 6.133rem;transform: rotateX(180deg) rotateY(25deg) translateY(-6.133rem);-webkit-mask-image:linear-gradient(rgba(0,0,0,0) 70%,rgba(0,0,0,0.1));opacity: 0; }
.aniSection .ani .aTxt{position:absolute;width: 3.533rem;  left: 50%; top: 1.653rem; margin-left: -3.533rem; opacity: 1;z-index: 100;
-webkit-mask-image:url(../images/mask_rt.png);-webkit-mask-position: 0 0; -webkit-mask-size: 0; -webkit-mask-repeat: no-repeat;
}
/* 动画部分需要修改的 */
.aniSection .ani .a1Txt{background: url(../images/a1Txt.png) no-repeat; background-size: 100% 100%; height: 5.426rem;}
.aniSection .ani .a2Txt{background: url(../images/a2Txt.png) no-repeat; background-size: 100% 100%; height: 6.546rem;}
.aniSection .ani .a3Txt{background: url(../images/a3Txt.png) no-repeat; background-size: 100% 100%; height: 5.426rem;}
.aniSection .ani .a4Txt{background: url(../images/a4Txt.png) no-repeat; background-size: 100% 100%; height: 6.546rem;}
.aniSection .ani .a5Txt{background: url(../images/a5Txt.png) no-repeat; background-size: 100% 100%; height: 5.426rem;}
.aniSection .ani .a6Txt{background: url(../images/a6Txt.png) no-repeat; background-size: 100% 100%; height: 5.426rem;}

.aniSection .ani1 .cBlock{background: #fffefc; background-size: 100%;margin-top: -30.446rem; margin-left: -27.1163rem;}
.aniSection .ani2 .cBlock{background: #0f1d40; background-size: 100%;margin-top: -30.446rem; margin-left: -24.1163rem;}
.aniSection .ani3 .cBlock{background: #872232; background-size: 100%;margin-top: -25.946rem; margin-left: -27.1163rem;}
.aniSection .ani4 .cBlock{background: #046240; background-size: 100%;margin-top: -25.946rem; margin-left: -24.1163rem;}
.aniSection .ani5 .cBlock{background: #f6b128; background-size: 100%;margin-top: -21.446rem; margin-left: -27.1163rem;}
.aniSection .ani6 .cBlock{background: #25202b; background-size: 100%;margin-top: -21.446rem; margin-left: -24.1163rem;}

.aniSection .ani .a1objBg{background: url(../images/a1obj.png) no-repeat; background-size: 100%;}
.aniSection .ani .a2objBg{background: url(../images/a2obj.png) no-repeat; background-size: 100%;}
.aniSection .ani .a3objBg{background: url(../images/a3obj.png) no-repeat; background-size: 100%;}
.aniSection .ani .a4objBg{background: url(../images/a4obj.png) no-repeat; background-size: 100%;}
.aniSection .ani .a5objBg{background: url(../images/a5obj.png) no-repeat; background-size: 100%;}
.aniSection .ani .a6objBg{background: url(../images/a6obj.png) no-repeat; background-size: 100%;}

.aniSection .ani .a1objFront{background: url(../images/a1obj1.png) no-repeat; background-size: 100%;}
.aniSection .ani .a2objFront{background: url(../images/a2obj1.png) no-repeat; background-size: 100%;}
.aniSection .ani .a3objFront{background: url(../images/a3obj1.png) no-repeat; background-size: 100%;}
.aniSection .ani .a4objFront{background: url(../images/a4obj1.png) no-repeat; background-size: 100%;}
.aniSection .ani .a5objFront{background: url(../images/a5obj1.png) no-repeat; background-size: 100%;}
.aniSection .ani .a6objFront{background: url(../images/a6obj1.png) no-repeat; background-size: 100%;}

.aniSection .ani .a1obj_mir{background: url(../images/a1obj1.png) no-repeat;background-size: 100%; }
.aniSection .ani .a2obj_mir{background: url(../images/a2obj1.png) no-repeat;background-size: 100%; }
.aniSection .ani .a3obj_mir{background: url(../images/a3obj1.png) no-repeat;background-size: 100%; }
.aniSection .ani .a4obj_mir{background: url(../images/a4obj1.png) no-repeat;background-size: 100%; }
.aniSection .ani .a5obj_mir{background: url(../images/a5obj1.png) no-repeat;background-size: 100%; }
.aniSection .ani .a6obj_mir{background: url(../images/a6obj1.png) no-repeat;background-size: 100%; }

.aniSection .ani .card1Bg{background: #fffefc;}
.aniSection .ani .card2Bg{background: #0f1d40;}
.aniSection .ani .card3Bg{background: #872232;}
.aniSection .ani .card4Bg{background: #046240;}
.aniSection .ani .card5Bg{background: #f6b128;}
.aniSection .ani .card6Bg{background: #25202b;}

.aniSection .ani .card1Frone{background: url(../images/card1.png) no-repeat; background-size: 100% 100%;}
.aniSection .ani .card2Frone{background: url(../images/card2.png) no-repeat; background-size: 100% 100%;}
.aniSection .ani .card3Frone{background: url(../images/card3.png) no-repeat; background-size: 100% 100%;}
.aniSection .ani .card4Frone{background: url(../images/card4.png) no-repeat; background-size: 100% 100%;}
.aniSection .ani .card5Frone{background: url(../images/card5.png) no-repeat; background-size: 100% 100%;}
.aniSection .ani .card6Frone{background: url(../images/card6.png) no-repeat; background-size: 100% 100%;}

.aniSection .ani .card1_mir{background: url(../images/card1.png) no-repeat;background-size: 100%;  }
.aniSection .ani .card2_mir{background: url(../images/card2.png) no-repeat;background-size: 100%;  }
.aniSection .ani .card3_mir{background: url(../images/card3.png) no-repeat;background-size: 100%;  }
.aniSection .ani .card4_mir{background: url(../images/card4.png) no-repeat;background-size: 100%;  }
.aniSection .ani .card5_mir{background: url(../images/card5.png) no-repeat;background-size: 100%;  }
.aniSection .ani .card6_mir{background: url(../images/card6.png) no-repeat;background-size: 100%;  }

.aniSection .ani .a1shadow{background: #ccc;}
.aniSection .ani .a2shadow{background: #0f1d40;}
.aniSection .ani .a3shadow{background: #872232;}
.aniSection .ani .a4shadow{background: #046240;}
.aniSection .ani .a5shadow{background: #f6b128;}
.aniSection .ani .a6shadow{background: #25202b;}


.aniSection .ani.show .aTxt{animation:txtShow 2000ms ease-out 3000ms forwards; opacity: 1;}
.aniSection .ani.show .cardFrone{animation:maskLbShow 5000ms ease-out 2000ms forwards; opacity: 1;}
.aniSection .ani.show .aobjFront{animation:maskRbShow 5000ms ease-out 2000ms forwards; opacity: 1;}
.aniSection .ani .ashadow{width: 10rem; height: 1.973rem; position: absolute; left: 0; top: 50%; margin-top: 4.546rem; -webkit-mask-image:url(../images/c3shadow.png);-webkit-mask-position: 0 0; -webkit-mask-size: 100%; -webkit-mask-repeat: no-repeat;opacity: 0;}
.aniSection .ani.show .ashadow{animation:opacityIn 2000ms ease-out 2000ms forwards;}
.aniSection .ani.show .aobj_mir{animation:opacityIn 2000ms ease-out 2000ms forwards;}
.aniSection .ani.show .card_mir{animation:opacityIn 2000ms ease-out 2000ms forwards;}
.aniSection .ani.show .aobjBg{animation:opacityIn 1200ms ease-out 500ms forwards;}
.aniSection .ani.show .cardBg{animation:opacityIn 1200ms ease-out 600ms forwards;}
.aniSection .ani .cBlock.hide{animation:blockHide 1200ms ease-out forwards;}
@-webkit-keyframes txtShow{
	0%{-webkit-mask-size:0 0 ;-webkit-mask-position:top right;}
	100%{-webkit-mask-size:10rem 10rem ;-webkit-mask-position:top right;}
}
@-webkit-keyframes blockHide{
	0%{transform-origin: 50% 50%; transform: scale(1.6);}
	100%{transform-origin: 50% 50%; transform: scale(0.05); margin-left:-23.333rem; margin-top: -22.666rem;}
}
@-webkit-keyframes maskLbShow{
	0%{-webkit-mask-size:0 0 ;-webkit-mask-position:bottom left;}
	100%{-webkit-mask-size:20rem 20rem ;-webkit-mask-position:bottom left;}
}
@-webkit-keyframes maskRbShow{
	0%{-webkit-mask-size:0 0 ;-webkit-mask-position:bottom right;}
	100%{-webkit-mask-size:20rem 20rem ;-webkit-mask-position:bottom right;}
}
.aniSection .ani.out{display: block;}
.aniSection .ani.out .cBlock{opacity: 0;}
.aniSection .ani.out .aTxt{-webkit-mask-size:10rem 10rem ;-webkit-mask-position:top right; opacity: 1;animation:opacityOut 1200ms ease-out forwards;}
.aniSection .ani.out .aobjBox{ opacity: 1;animation:opacityOut 1200ms ease-out forwards;}
.aniSection .ani.out .aobjBox .aobjFront{-webkit-mask-size:20rem 20rem ;-webkit-mask-position:bottom right; opacity: 1;}
.aniSection .ani.out .ashadow{ opacity: 1;animation:opacityOut 1200ms ease-out forwards;}
.aniSection .ani.out .cardFrone{opacity: 1;-webkit-mask-size:20rem 20rem ;-webkit-mask-position:bottom left;animation:rotateCard 800ms ease-out forwards;}
@-webkit-keyframes rotateCard{
	0%{transform: rotateY(-25deg);}
	100%{transform: translateZ(-321px) rotateY(0deg);}
}
.aniSection .ani.out .card1Box{animation:flyC1 800ms ease-out forwards;}
.aniSection .ani.out .card2Box{animation:flyC2 800ms ease-out forwards;}
.aniSection .ani.out .card3Box{animation:flyC3 800ms ease-out forwards;}
.aniSection .ani.out .card4Box{animation:flyC4 800ms ease-out forwards;}
.aniSection .ani.out .card5Box{animation:flyC5 800ms ease-out forwards;}
.aniSection .ani.out .card6Box{animation:flyC6 800ms ease-out forwards;}
@-webkit-keyframes flyC1{
	0%{margin-left: -0.3rem;margin-top:  -0.266rem; }
	100%{margin-left: -4.1rem; margin-top: -7.993rem; }
}
@-webkit-keyframes flyC2{
	0%{margin-left: -0.3rem;margin-top:  -0.266rem; }
	100%{margin-left: 0.15rem; margin-top: -7.993rem; }
}
@-webkit-keyframes flyC3{
	0%{margin-left: -0.3rem;margin-top:  -0.266rem; }
	100%{margin-left: -4.1rem; margin-top: -2.953rem; }
}
@-webkit-keyframes flyC4{
	0%{margin-left: -0.3rem;margin-top:  -0.266rem; }
	100%{margin-left: 0.15rem; margin-top: -2.953rem; }
}
@-webkit-keyframes flyC5{
	0%{margin-left: -0.3rem;margin-top:  -0.266rem; }
	100%{margin-left: -4.1rem; margin-top: 2.08rem; }
}
@-webkit-keyframes flyC6{
	0%{margin-left: -0.3rem;margin-top:  -0.266rem; }
	100%{margin-left: 0.15rem; margin-top: 2.08rem; }
}

.cardSection{display: none;}
.cardSection.show{display: block;}
.cardSection .cardList{position: absolute; width: 2.346rem; height: 3.72rem; }
.cardSection .cardList .cardName{position: absolute; width: 0.346rem; height: 2.146rem; left: -0.453rem; top: 0.026rem; }
.cardSection .cardList .cardBtn{position: absolute; width: 1.48rem; height: 0.493rem; bottom: -0.646rem;}
.cardSection .cardList .cardBtn1{left: -0.253rem; background: url(../images/btn1.png) no-repeat; background-size: 100%;}
.cardSection .cardList .cardBtn2{right: -0.253rem; background: url(../images/btn2.png) no-repeat; background-size: 100%;}
.cardSection .cardList.cardList1{left: 50%; top: 50%; margin-left: -3.346rem; margin-top: -6.793rem; opacity: 0;}/* margin-top: -7.793rem;*/
.cardSection .cardList.cardList2{left: 50%; top: 50%; margin-left:  0.906rem; margin-top: -6.793rem;  opacity: 0;}
.cardSection .cardList.cardList3{left: 50%; top: 50%; margin-left: -3.346rem; margin-top: -1.753rem;  opacity: 0;}/* margin-top: -2.253rem; */
.cardSection .cardList.cardList4{left: 50%; top: 50%; margin-left:  0.906rem; margin-top: -1.753rem;  opacity: 0;}
.cardSection .cardList.cardList5{left: 50%; top: 50%; margin-left: -3.346rem; margin-top: 3.287rem;  opacity: 0;}
.cardSection .cardList.cardList6{left: 50%; top: 50%; margin-left:  0.906rem; margin-top: 3.287rem;  opacity: 0;}
.cardSection.show .cardList.cardList1{animation:opacityIn 1000ms ease-out forwards;}
.cardSection.show .cardList.cardList2{animation:opacityIn 1000ms ease-out 200ms forwards;}
.cardSection.show .cardList.cardList3{animation:opacityIn 1000ms ease-out 400ms forwards;}
.cardSection.show .cardList.cardList4{animation:opacityIn 1000ms ease-out 600ms forwards;}
.cardSection.show .cardList.cardList5{animation:opacityIn 1000ms ease-out 800ms forwards;}
.cardSection.show .cardList.cardList6{animation:opacityIn 1000ms ease-out 1000ms forwards;}

.cardSection .cardList .card{ width: 2.346rem; height: 3.72rem;}
.cardSection .cardList .card1{background: url(../images/card1.png) no-repeat; background-size: 100%;}
.cardSection .cardList .card2{background: url(../images/card2.png) no-repeat; background-size: 100%;}
.cardSection .cardList .card3{background: url(../images/card3.png) no-repeat; background-size: 100%;}
.cardSection .cardList .card4{background: url(../images/card4.png) no-repeat; background-size: 100%;}
.cardSection .cardList .card5{background: url(../images/card5.png) no-repeat; background-size: 100%;}
.cardSection .cardList .card6{background: url(../images/card6.png) no-repeat; background-size: 100%;}
.cardSection.show .cardList .card1{animation:bigCard 1000ms ease-out forwards;}
.cardSection.show .cardList .card2{animation:bigCard 1000ms ease-out 200ms forwards;}
.cardSection.show .cardList .card3{animation:bigCard 1000ms ease-out 400ms forwards;}
.cardSection.show .cardList .card4{animation:bigCard 1000ms ease-out 600ms forwards;}
.cardSection.show .cardList .card5{animation:bigCard 1000ms ease-out 800ms forwards;}
.cardSection.show .cardList .card6{animation:bigCard 1000ms ease-out 1000ms forwards;}

@-webkit-keyframes bigCard{
	0%{transform: scale(0.5); }
	100%{transform: scale(1); }
}

.cardSection .cardList .cardName1{background: url(../images/cardName1.png) no-repeat; background-size: 100%;}
.cardSection .cardList .cardName2{background: url(../images/cardName2.png) no-repeat; background-size: 100%;}
.cardSection .cardList .cardName3{background: url(../images/cardName3.png) no-repeat; background-size: 100%;}
.cardSection .cardList .cardName4{background: url(../images/cardName4.png) no-repeat; background-size: 100%;}
.cardSection .cardList .cardName5{background: url(../images/cardName5.png) no-repeat; background-size: 100%;}
.cardSection .cardList .cardName6{background: url(../images/cardName6.png) no-repeat; background-size: 100%;}

.detSection{background: #f6f0e6; display: none; overflow: hidden;transform: translateY(-1.333rem); opacity: 0;}
.detSection.show{display: block;animation:detSectionShow 600ms ease-out forwards;  opacity: 0;}
.detSection.hide{display: block;animation:detSectionHide 600ms ease-out forwards;  opacity: 1;}
@-webkit-keyframes detSectionShow{
	0%{transform: translateY(-1.333rem); opacity: 0; }
	100%{transform: translateY(0);opacity: 1;}
}
@-webkit-keyframes detSectionHide{
	0%{transform: translateY(0); opacity: 1; }
	99%{transform: translateY(-1.333rem);opacity: 0;}
	100%{transform: translateY(-1.333rem);opacity: 0;display: none;}
}
.detSection .swiper-container{width: 100%;height: 100%;}
.detSection .backBtn{width: 0.72rem; height: 0.56rem; position: absolute; right: 1.266rem; top: 0.453rem; background: url(../images/backBtn.png) no-repeat ; background-size: 100% 100%; z-index: 3;}
.detSection .swiper-slide .card{position: absolute; width: 5.56rem; height: 8.84rem; left: 50%; top: 50%; margin-left: -2.78rem; margin-top: -7.386rem; box-shadow: 0 0.16rem 0.186rem rgba(136,125,110,0.43); border-radius: 0.32rem;}
.detSection .swiper-slide .card>img{width: 100%; height: 100%;}
.detSection .swiper-slide .title{position: absolute; width: 1.2rem; height: auto; left: 50%; margin-left: 3.226rem; top: 50%; margin-top: -7.28rem; }
.detSection .swiper-slide .title>img{width: 100%; height: auto;}
.detSection .swiper-slide .note{position: absolute; width: 2.28rem; height: 3.066rem; left: 50%; top: 50%; margin-left: -4.106rem; margin-top: -2.306rem; background: url(../images/cardNote.png) no-repeat; background-size: 100%;}
.detSection .swiper-slide .objbox{position: absolute; width: 1.92rem; height: 3.373rem; left: 50%; top: 50%; margin-top: 3.893rem; margin-left: -0.946rem;}
.detSection .swiper-slide .objbox .obj,.detSection .swiper-slide .objbox .obj>img,.detSection .swiper-slide .objbox .obj_mir>img{width: 100%; height: 100%;}
.detSection .swiper-slide .objbox .obj_mir{position: absolute;width: 100%; height: 100%;left: 0; top: 0; transform: rotateX(180deg) translateY(-100%);-webkit-mask-image:linear-gradient(rgba(0,0,0,0) 60%,rgba(0,0,0,0.1))}
.detSection .swiper-slide .objTitle1{position: absolute;width: 0.733rem; height: 3.106rem; left: 50%; top: 50%; margin-left: 2.066rem; margin-top: 4.053rem; background: url(../images/obj1title.png) no-repeat; background-size: 100%;}
.detSection .swiper-slide .objTitle2{position: absolute;width: 1.2rem; height: 3.106rem; left: 50%; top: 50%; margin-left: 1.6rem; margin-top: 4.053rem; background: url(../images/obj2title.png) no-repeat; background-size: 100%;}
.detSection .swiper-slide .objTitle3{position: absolute;width: 0.746rem; height: 3.44rem; left: 50%; top: 50%; margin-left: 2.053rem; margin-top: 3.88rem; background: url(../images/obj3title.png) no-repeat; background-size: 100%;}
.detSection .swiper-slide .objTitle4{position: absolute;width: 0.746rem; height: 3.746rem; left: 50%; top: 50%; margin-left: 2.053rem; margin-top: 3.733rem; background: url(../images/obj4title.png) no-repeat; background-size: 100%;}
.detSection .swiper-slide .objTitle5{position: absolute;width: 0.746rem; height: 3.44rem; left: 50%; top: 50%; margin-left: 2.053rem; margin-top: 3.88rem; background: url(../images/obj5title.png) no-repeat; background-size: 100%;}
.detSection .swiper-slide .objTitle6{position: absolute;width: 0.746rem; height: 3.106rem; left: 50%; top: 50%; margin-left: 2.053rem; margin-top: 4.053rem; background: url(../images/obj6title.png) no-repeat; background-size: 100%;}

.detSection .swiper-slide .objNote{position: absolute;width: 1.586rem; height: 3.533rem; left: 50%; top: 50%; margin-left: -3.386rem; margin-top: 3.893rem; }
.detSection .swiper-slide .objNote1{background: url(../images/obj1Note.png) no-repeat; background-size: 100%;}
.detSection .swiper-slide .objNote2{background: url(../images/obj2Note.png) no-repeat; background-size: 100%;}
.detSection .swiper-slide .objNote3{background: url(../images/obj3Note.png) no-repeat; background-size: 100%;}
.detSection .swiper-slide .objNote4{background: url(../images/obj4Note.png) no-repeat; background-size: 100%;}
.detSection .swiper-slide .objNote5{background: url(../images/obj5Note.png) no-repeat; background-size: 100%;}
.detSection .swiper-slide .objNote6{background: url(../images/obj6Note.png) no-repeat; background-size: 100%;}

.detSection .arraw{ position: absolute; width: 6.786rem; height: 0.72rem; left: 50%; top: 50%; margin-top: 2.36rem; margin-left: -3.393rem; background: url(../images/arraw.png) no-repeat; background-size: 100%;}

.footBtn1{position: absolute; width: 2.893rem; height: 0.933rem; left: 50%; bottom: 0.466rem;margin-left: -4.533rem; background: url(../images/footBtn1.png) no-repeat; background-size: 100%; z-index: 3000;}
.footBtn2{position: absolute; width: 2.893rem; height: 0.933rem; left: 50%; bottom: 0.466rem;margin-left: -1.466rem; background: url(../images/footBtn2.png) no-repeat; background-size: 100%; z-index: 3000;}
.footBtn3{position: absolute; width: 2.893rem; height: 0.933rem; left: 50%; bottom: 0.466rem;margin-left: 1.6rem; background: url(../images/footBtn3.png) no-repeat; background-size: 100%; z-index: 3000;}


/* popups */
.md-modal {position: fixed;top: 50%;left: 50%; height: 100%; z-index: 2000;visibility: hidden;-webkit-backface-visibility: hidden;-webkit-transform: translateX(-50%) translateY(-50%) ;}
.md-modal-fixtop {position: fixed;top: 0;left: 0;width: 10rem;z-index: 2000;visibility: hidden;-webkit-backface-visibility: hidden;}
.md-show {visibility: visible;}
.md-overlay {position: fixed;width: 100%;height: 100%;visibility: hidden;top: 0;left: 0;z-index: 1000;opacity: 0;background: #f6f1e7;-webkit-transition: all 0.3s;}
.md-show ~ .md-overlay {opacity: 1;visibility: visible;}
/* Content styles */
.md-content {position: relative;margin: 0 auto;}
.md-effect-3 .md-content {-webkit-transform: translateY(20%);opacity: 0;-webkit-transition: all 0.3s;}
.md-show.md-effect-3 .md-content {-webkit-transform: translateY(0);opacity: 1;}

.popUp{background-image:url(../images/popTop.png),url(../images/popFoot.png),url(../images/popBody.png); background-repeat:no-repeat,no-repeat,repeat-y; background-size: 100% auto,100% auto, 100% auto; background-position: left top,left bottom,left top; width: 8.773rem; height: calc(100% - 3rem) ; top: 1.2rem;  text-align: center;}
.popUp .md-close{ width: 0.933rem; height: 0.933rem; position: absolute; display: block; background: url(../images/closeBtn.png) no-repeat; right: 0.32rem; top:0.64rem;  background-size: 100% 100%;z-index: 1;}
.popUp .popUpIcon{padding-top: 0.733rem;}
.popUp .popUpIcon>img{width: 1.706rem; height: 1.706rem; margin: auto;}
.popUp .popTitle,.popUp .popTitleStatic{font-size: .36rem; margin-top: 0rem;}
.popUp .popNormalTxt,.popUp .popNormalTxtStatic{font-size: .32rem; margin-top: 0rem;}

.popUp .title1{width: 4.12rem; height: 1.8rem; position: absolute; left: 50%; top: 0.8rem; margin-left: -2.08rem; background: url(../images/popTitle1.png) no-repeat;background-size: 100% 100%;z}
.popUp .title2{width: 4.12rem; height: 1.8rem; position: absolute; left: 50%; top: 0.8rem; margin-left: -2.08rem; background: url(../images/popTitle2.png) no-repeat;background-size: 100% 100%;z}

.popUp .popNormalTxt{position: absolute; width: 100%;  left: 0; top: 2.6rem; bottom: 1.4rem;}
.right{height: 3.2rem; width: 50%; text-align: center; float: left; margin-bottom: 0.266rem;}
.right>img{width: 1.773rem; height: 1.76rem;}
.right>p{margin-top: 0.133rem; font-size: 0.32rem; color: #6f552f;}

.popUp .swiper-container{width: 100%;height: 100%;}
.popUp .swiper-slide {height: auto;}
.popUp .txtBox{ margin: 0; padding: 0 0.866rem; text-align: left; color: #6f552f;}
.popUp .txtBox h4{font-size: 0.373rem;  height: 1.066rem; line-height: 1.066rem; padding-left: 0.4rem; background: url(../images/hBg.png) no-repeat; background-size: 0.2rem 0.293rem; background-position: left center; margin-left: -0.4rem;}
.popUp .txtBox p{font-size: 0.293rem; line-height: 0.666rem; margin-bottom: 0.6rem;}
.popUp .popBtn{width: 2.08rem; height: 0.68rem; position: absolute; bottom: 0.4rem; left: 50%; margin-left: -1.04rem; background: url(../images/popBtn.png) no-repeat; background-size: 100%;}

.popUp .txtBoxNew{ margin: 0; padding: 0 0.866rem; text-align: left; color: #6f552f;}
.popUp .txtBoxNew h4{font-size: 0.4rem;  line-height: 0.613rem; text-align: center; margin-bottom: 0.6rem; margin-top: 0.6rem; }
.popUp .txtBoxNew p{font-size:0.32rem; line-height: 0.613rem; margin-bottom: 0.6rem;}
.popUp .txtBoxNew p.psNote{font-size: 0.266rem; line-height: 0.613rem; margin-bottom: 0.6rem;}
.allObj{width: 7.146rem; height: 3.333rem;}