* {margin: 0;padding: 0;}
html,body{margin: 0; padding: 0; width: 100%;  height: 100%; text-align: center;}
body{background: #ffffff; background-image: url(../images/bg.png); background-position: center; background-size: 100% auto; background-repeat: no-repeat;}
section{width: 10rem;min-height: 14.88rem; height: 100%; position: absolute; margin: auto;}
.ms{width: 3.213rem; height: 0.386rem; position: absolute; display: none; left: 0.64rem; top: 0.64rem;background: url(../images/logo_minsheng.png) no-repeat; background-size: 100%; z-index: 100; z-index: 1000;}
.logo{position: absolute; display: none; width:2.106rem; height: 0.826rem; top: 0.40rem; right: 0.6rem; background: url(../images/logo_XiamenUniversity.png) no-repeat; background-size: 100% 100%; z-index: 1000;}   
.musicBtn{ width: 0.56rem; height:0.56rem; position: absolute; left: 0.373333rem; bottom: 0.75rem; background: url(../images/music.png); background-size:100% 100% ; z-index: 2100; display: none;}
.musicBtn.playing{-webkit-animation: playing 4000ms linear  infinite;}
#secSwiper{ width: 100%; height: 100%; display: none;max-height: 18rem; }
.mask2{position: absolute; width: 100%; height: 100%;  background-color: #dedbcf; z-index: 100;}
.skipBtn{position: absolute; width:2.546rem; height: 0.866rem; right: 0.64rem; bottom: 0.64rem; background: url(../images/skip.png) no-repeat; background-size: 100%; z-index: 100; display: none;}
.card-section{}

.card-swiper{position:absolute;width: 10rem; height:7.36rem; left: 50%; margin-left: -5rem; top: 50%; margin-top: -1rem;/*0.666rem*/  overflow: visible;}
.card-swiper .card{width: 10rem; height: 7.36rem; }
.card-swiper .card.card1{background: url(../images/k1.png) no-repeat; background-size: 100% 100%;}
.card-swiper .card.card2{background: url(../images/k2.png) no-repeat; background-size: 100% 100%;}
.card-swiper .card.card3{background: url(../images/k3.png) no-repeat; background-size: 100% 100%;}
.card-swiper .card.card4{background: url(../images/k4.png) no-repeat; background-size: 100% 100%;}
.card-swiper .card.card5{background: url(../images/k5.png) no-repeat; background-size: 100% 100%;}

.card-swiper .swiper-button-next,.card-swiper .swiper-button-prev {top: 2.226rem;width: 0.426rem;height: 0.986rem;margin-top:0;background-size: 100% 100%;background-position: center; display: none;}
.card-swiper .swiper-button-prev,.card-swiper .swiper-container-rtl .swiper-button-next {background-image:url(../images/left_arraw.png);left: 0.6rem;right: auto;}
.card-swiper .swiper-button-next,.card-swiper .swiper-container-rtl .swiper-button-prev {background-image:url(../images/right_arraw.png);right: 0.6rem;left: auto;}
.card-swiper .title{font-size: 0.46rem; top: 5.066rem; position: absolute; width: 100%; text-align: center;  color: #5c462c; display: none;}
.card-swiper .note{font-size:0.34rem; line-height: 0.493rem; top: 5.9rem; position: absolute; width: 8.4rem;left: 50%; margin-left: -4.2rem; text-align: center; color: #5c462c; display: none;}
.card-swiper .wdknote{font-size:0.28rem; line-height: 0.493rem; top: 4.746rem; position: absolute; width: 6.52rem;left: 50%; margin-left: -3.253rem; text-align: center; color: #000;}

.btn-getvideo{position:absolute; width: 2.293rem; height: 0.72rem; top: 89%;  left: 50%; margin-left:-3.746rem; background: url(../images/homeBtn_video.png) no-repeat; background-size: 100%; z-index: 100;}
.btn-getcard{position:absolute; width: 2.293rem; height: 0.72rem; top: 89%; left: 50%; margin-left: -1.16rem; background: url(../images/homeBtn_getCard.png) no-repeat; background-size: 100%; z-index: 100;}
.lineBtn2{margin-left: -2.6rem !important;;}
.lineBtn3{margin-left: 0.3rem !important; }
.btn-getdet{position:absolute; width: 2.293rem; height: 0.72rem; top: 89%; /*margin-top: 7.226rem;*/ left: 50%; margin-left: 1.48rem; background: url(../images/homeBtn_viewDet.png) no-repeat; background-size: 100%;z-index: 100;}

.down{width:1.213rem; height: 1rem; position: absolute; left: 50%; margin-left: -0.607rem; bottom: 0.4rem; }
.down .tip{ position: absolute; width: 1.213rem; height: 0.293rem; left:0; top: 0; background: url(../images/tip.png) no-repeat; background-size: 100%;}
.down .hand{ position: absolute; width: 0.986rem; height: 0.426rem; left:50%; margin-left:-0.493rem ; top: 0.573rem; background: url(../images/down_arraw.png) no-repeat; background-size: 100%;
-webkit-animation: down-shake 3000ms ease-out infinite;
}

.xk-section{}
.xk1-box{position:absolute;width: 10rem; height:7.36rem; left: 50%; margin-left: -5rem; top: 50%;margin-top: -0.2rem;  overflow: visible;background: url(../images/x1.png) no-repeat; background-size: 100% 100%;}
.xk2-box{position:absolute;width: 10rem; height:7.36rem; left: 50%; margin-left: -5rem; top: 50%;margin-top: -0.2rem;  overflow: visible;background: url(../images/x2.png) no-repeat; background-size: 100% 100%;}
.xk3-box{position:absolute;width: 10rem; height:7.36rem; left: 50%; margin-left: -5rem; top: 50%;margin-top: -0.2rem; overflow: visible;background: url(../images/x3.png) no-repeat; background-size: 100% 100%;}
.xk4-box{position:absolute;width: 10rem; height:7.36rem; left: 50%; margin-left: -5rem; top: 50%;margin-top: -0.2rem;  overflow: visible;background: url(../images/x4.png) no-repeat; background-size: 100% 100%;}


.band-box{ position: absolute; width: 8.973rem; height: 8.44rem; left: 50%; margin-left: -4.48rem; top: 30.87%; background: url(../images/band.png) no-repeat; background-size: 100% 100%;}
.band-box .note{width: 6.6rem; position: absolute; text-align: center; font-size: 0.28rem; top: 5.866rem; left: 50%; margin-left: -3.3rem;color: #5c462c;}



.more-section{background: url(../images/zx-bg.png) no-repeat; background-position: center; background-size: 100% auto;}
.more-box{ position: absolute; width: 8.973rem; height: 8.44rem; left: 50%; margin-left: -4.48rem; top: 30.87%; background: url(../images/more-box.png) no-repeat; background-size: 100% 100%; }
.more-box ul{list-style: none; margin-left:1rem ; margin-top: 1.6rem;}
.more-box ul li{color: #5c462c; font-size: 0.38rem; line-height: 0.6rem; text-align: left;  margin-bottom: 0.4rem; padding-left: 0.3rem;}
.more-box ul li>span{ display: inline-block; width: 0.3rem; margin-left: -0.3rem;} 
.more-box ul li.list1{}
.more-box ul li.list2{}
.more-box ul li.list3{}
.more-box ul li.list4{}
.more-box ul li.list5{}
.tip{font-size: 0.241rem; color: #695336; position: absolute; width: 100%; bottom: 0.32rem;}
.back-home{position: absolute; width: 1.786rem; height: 0.6rem; bottom: 0.5rem; left: 50%; margin-left: -0.893rem; background: url(../images/back-home.png) no-repeat;  background-size: 100%; display: none;z-index: 100;}


/* popups */
.md-modal {position: fixed;top: 50%;left: 50%;max-width: 10rem;z-index: 2000;visibility: hidden;-webkit-backface-visibility: hidden;-webkit-transform: translateX(-50%) translateY(-50%);}
.md-show {visibility: visible;}
.md-overlay {position: fixed;width: 100%;height: 100%;visibility: hidden;top: 0;left: 0;z-index: 1000;opacity: 0;-webkit-transition: all 0.3s; background: rgba(0,0,0,0.7);
}
.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; display: none;}
.md-show.md-effect-3 .md-content {-webkit-transform: translateY(0);opacity: 1; display: block;}

.popUp{background-size: 100%; width: 8.973rem; height:8.466rem;text-align: center; }
.popUp .md-close{ width: 1.8rem; height: 0.613rem; position: absolute; display: block; left: 50%; margin-left: -0.9rem;  bottom:-3.16rem; background:url(../images/closeBtn.png) no-repeat; background-size:100%;z-index: 1;}
.popUp .code-box{ position: absolute; width: 3.146rem; height: 3.12rem; top: 1.773rem; left: 50%; margin-left:-1.573rem; background: url(../images/code-bg.png) no-repeat; background-size: 100%;}
.popUp .code-box>img{width: 2.8rem; height: 2.8rem; margin: 0.16rem;}
.popUp .code-note{ font-size: 0.338rem; color: #8F6939; width: 100%; line-height: 0.84rem; top: 5.373rem; position: absolute;}

.loading-section{z-index: 50; background-color: #dedbcf;}
.loading-logo{width: 4.04rem;height: 1.56rem; position: absolute; left: 50%; margin-left: -2.02rem; top: 50%; margin-top: -3.226rem;  background: url(../images/loading_logo.png) no-repeat; background-size: 100%;}
.loading-tip{position: absolute; width: 3.346rem; height: 0.28rem; left: 50%; margin-left: -1.673rem; top: 50%; margin-top: 4.733rem; background: url(../images/loading_tip.png) no-repeat;
 background-position: center; background-size: 100%; } 
.loading-per{font-size: 0.34rem; color: #d3262c; width: 100%; top: 50%; margin-top: 1.106rem; text-align: center; position: absolute; }
.loading-section .btn-in{ position: absolute; display: none; width:2.546rem; height:0.866rem; left: 50%; margin-left: -1.273rem; top: 50%; margin-top: 5.8rem; background: url(../images/button-in.png) no-repeat; background-size: 100%; }
.intro{ opacity: 0; width: 100%; overflow: hidden; height: 100%;}
.intro>video{width: 100%; position: absolute; height: auto; top: 50%; margin-top:-10rem; left: 0; z-index: 50;}
.intro.hidden{display:none; left: 20rem;}
@-webkit-keyframes logoAni{
	0%{transform: scale(1);}
	15%{transform: scale(1.1);}
	30%{transform: scale(1);}
}
@-webkit-keyframes playing{
	0%{transform: rotate(0);}
	100%{transform: rotate(360deg);}
}

@-webkit-keyframes down-shake{
	0%{transform: translateY(0rem);}
	10%{transform: translateY(0.2rem);}
	20%{transform: translateY(0rem);}
	30%{transform: translateY(0.2rem);}
	40%{transform: translateY(0rem);}
}

.mask{position: absolute; width: 100%; height: 100%; background: url(../images/bg.png) no-repeat; background-size: 100% 100%; opacity: 0; display: none;}


.building{
	width: 10rem;
	height: 12.7rem;
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -7.04rem; /*-6.04rem*/
	background-image: url(../images/build.png);
	background-size: 100%;
	display: none;
}
.year2021{
	width: 5.2rem;
	height: 2.4rem;
	position: absolute;
	left: 0.64rem;
	top: 50%;
	margin-top: -4.52rem;
	background-image: url(../images/2021.png);
	background-size: 100%;
	display: none;
}
.year1921{
	width: 5.186rem;
	height: 2.813rem;
	position: absolute;
	right: 0.986rem;
	top: 50%;
	margin-top:-7.213rem;
	background-image: url(../images/1921.png);
	background-size: 100%;
	display: none;
}
.birds{
	width: 9.56rem;
	height: 3.866rem;
	position: absolute;
	left: 0;
	top: 50%;
	margin-top:-4.16rem;
	background-image: url(../images/birds.png);
	background-size: 100%;
	display: none;
}
.slogan{
	width: 3.973rem;
	height: 4.56rem;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -1.866rem;
	margin-top:-6.266rem;
	background-image: url(../images/slogan.png);
	background-size: 100%;
	display: none;
}
#pop-video{width: 100%; height: 100%;}
.popVideo{width: 100%; height: 100%; }
.popVideo .md-close{ width: 3.653rem; height: 0.826rem; position: absolute; display: block; left: 50%; margin-left: 0.346rem;  top:50%; margin-top: 3.573rem; background:url(../images/closeBtn3.png) no-repeat; background-size:100%;z-index: 1000;}
.popVideo .md-fullscreen{ width: 3.653rem; height: 0.826rem; position: absolute; display: block; left: 50%; margin-left: -4.066rem;  top:50%; margin-top: 3.573rem; background:url(../images/fullScreenBtn.png) no-repeat; background-size:100%;z-index: 1000;}

.popVideo .rota{
	position: absolute;
	
	width: 100vw;
	height: 100vh;

}
.popVideo video{
	top: 50%;
	left: 50%;
	z-index: 100;
	position: absolute;
	width: 100%;
	height: auto;
	object-fit: fill;
	-ms-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.upShow2{-webkit-animation: up-show-in2 ease-out 500ms forwards; display: block; opacity: 0;}
.upShow3{-webkit-animation: up-show-in3 ease-out 1000ms forwards; display: block; opacity: 0;}
.downShow{-webkit-animation: down-show-in ease-out 1000ms forwards; display: block; opacity: 0;}
.leftShow{-webkit-animation: left-show-in ease-out 1500ms forwards; display: block; opacity: 0;}
.logoOut{-webkit-animation: logo-out ease-out 1000ms forwards;}
@-webkit-keyframes up-show-in3{
	0%{opacity: 0; transform: translateY(30px);}
	100%{opacity: 1; transform: translateY(0px);}
} 
@-webkit-keyframes up-show-in2{
	0%{opacity: 0; transform: translateY(20px);}
	100%{opacity: 1; transform: translateY(0px);}
} 
@-webkit-keyframes down-show-in{
	0%{opacity: 0; transform: translateY(-30px);}
	100%{opacity: 1; transform: translateY(0px);}
} 
@-webkit-keyframes left-show-in{
	0%{opacity: 0; transform: translateX(-10px);}
	100%{opacity: 1; transform: translateX(0px);}
}
@-webkit-keyframes logo-out{
	0%{opacity: 1; transform: scale(1);}
	100%{opacity: 0; filter:blur(2px);transform: translateY(2rem) scale(10);}
}
@-webkit-keyframes card-in{
	0%{width: 8.426rem; height: 6rem;top: 50%; left: 50%;margin-top:-2.613rem; margin-left:-4.16rem;}
	100%{width: 6.453rem; height: 4.266rem;top: 50%; left: 50%;  margin-top: -0.2rem; margin-left:-3.226rem;}/*  */
}
.maskcard1{width: 8.426rem; height: 6rem; background: url(../images/card1.png) no-repeat; display: none; background-size: 100% 100%; position: absolute; top: 50%; left: 50%; margin-top:-2.613rem; margin-left:-4.16rem;}
.cardin{-webkit-animation: card-in ease-out 500ms forwards; display: block;}