body,html{  margin:0; padding:0; width:750px; background:#fff; -webkit-box-sizing:border-box; box-sizing:border-box; color:#000; font-family: "Helvetica","Arial"; }
ul,li,p,strong,h3,table,form,tr,td,ol,dl,dd,dt,map,area,input,textarea{ margin:0; padding:0; list-style:none;}
*{ margin:0px; padding:0px; box-sizing:border-box;  -webkit-box-sizing:border-box; text-size-adjust:none; 
	-webkit-text-size-adjust:none; -moz-text-size-adjust:none; -ms-text-size-adjust:none;}
*::before,#wrapper *::after {
	box-sizing: border-box; -webkit-box-sizing: border-box;
}
img{ border:0; max-width:100%; touch-callout:none; -webkit-touch-callout:none; }
a{ color:#000; text-decoration:none; outline:none; background:none;
	-webkit-tap-highlight-color:rgba(0, 0, 0, 0);  
	tap-highlight-color:rgba(0, 0, 0, 0);  
}

a:active{  
	background-color:none;  
}  
.clr{ display:block; width: 100%; clear:both; height:0px; overflow:hidden;}
.l{ float:left;}
.banner{ display:block; }

.wrap{ position: relative; width: 100%; transform-style: preserve-3d; perspective: 500px; }
.logo{ position: absolute; width: 195px; height: 111px; left:22px; top: 5px; background:url(//zt.ztgame.com/act/ztyy08/images/logo.png) no-repeat; background-size: auto 100%; z-index: 4; cursor: pointer;
		-webkit-transition-duration: 0.6s;
		transition-duration: 0.6s;
}
.pth{ position: absolute; width: 155px; height: 67px; left: 140px; top: 24px; background:url(../../images/v1/intro/logo2.png) no-repeat; }

.delay03{ -webkit-transition-delay:0.3s; -ms-transition-delay:0.3s; -o-transition-delay:0.3s; transition-delay:0.3s; }
.trs06{ -webkit-transition-duration:0.6s; -ms-transition-duration:0.6s; -o-transition-duration:0.6s; transition-duration:0.6s; }

#loadding{ position: fixed; width: 100%; height: 100%; background: #fff; left: 0; top: 0; right: 0; bottom: 0; z-index: 222; font-size: 12px !important; display: none; }
#bfb{position: fixed;width: 100%;text-align: center;top: 50%;margin: .2rem 0 0;color: #333;left: 0;     color: #333;  font-size: 0.34rem; }
.shadow {
	position:absolute;
	top:50%;
	left:50%;
	border-radius:50%;
	margin-top:-50px;
	margin-left:-50px;
	box-shadow:-2px 2px 10px 0 rgba(0,0,0,0.5),
						 2px -2px 10px 0 rgba(255,255,255,0.5);
}

.loader {
    background: -webkit-linear-gradient(left, skyblue 50%, #fafafa 50%); /* Foreground color, Background colour */
    border-radius: 100%;
    height: 100px; /* Height and width */
    width: 100px; /* Height and width */
    animation: time 8s steps(500, start) infinite;
}
.mask {
    border-radius: 100% 0 0 100% / 50% 0 0 50%;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 50%;
    animation: mask 8s steps(250, start) infinite;
    transform-origin: 100% 50%;
}
@keyframes time {
    100% { 
        transform: rotate(360deg);
    }
}
@keyframes mask {
    0% {
        background: #fafafa; /* Background colour */
        transform: rotate(0deg);
    }
    50% {
        background: #fafafa; /* Background colour */
        transform: rotate(-180deg);
    }
    50.01% {
        background: skyBlue; /* Foreground colour */
        transform: rotate(0deg);
    }
    100% {
        background: skyBlue; /* Foreground colour */
        transform: rotate(-180deg);
    }
}​


.active{
    animation: play 500ms steps(5) forwards; 
}
@keyframes jt{
   from { 
		-webkit-transform: translateY(0);
	   transform: translateY(0);
	}
	 to { 
		-webkit-transform: translateY(0.1rem); 
		 transform: translateY(0.1rem); 
	}
}


#wrapper{ position: relative; }
#universe{ position: absolute; left: 0; top: 0; }
.b1-3{ position: absolute; left: 366px; top: 756px; width: 334px; height: 205px;
	-webkit-transform: translate(100px,-20px) scale(1.1);  opacity: 0;
	transform: translate(100px,-20px) scale(1.1);

	-webkit-transition-delay: 1s;
	transition-delay: 1s;
}

.on .b1-2,.on .b1-3{ 
	opacity: 1;
	-webkit-transform: translate(0,0) scale(1); 
	transform: translate3d(0,0) scale(1);
 }


@keyframes down{
	0% { 
		transform: translateY(0); 
	}
	100% { 
		transform: translateY(25px); 
	}
 }
 .jt{
	 position: absolute; width: 83px; height: 45px; bottom: 50px; left: 50%; margin-left: -42px; background:url(../../images/v1/intro/jt.png) no-repeat;
	 -webkit-animation:down 1s alternate infinite linear;
	animation:down 1s alternate infinite linear;
 }
 
.on .tcm{
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
	-webkit-animation:down 1s alternate infinite linear;
	animation:down 1s alternate infinite linear;
}

.head{ width: 100%; height: 120px; background: #000000; }

.mn{ position: absolute; right: 0; top: 27px; font: 18px; color: #6b6152; }
.mn a{ display: inline-block; margin: 0 5px; color: #6b6152; }
.mn a:hover{ color: #f61838; }

.b1{ width: 750px; height: 1152px; position: relative; background:url(../../images/v1/intro/b1.jpg) no-repeat center 0; }
.b2{ width: 750px; height: 535px; overflow: hidden; position: relative; background:url(../../images/v1/intro/b2.jpg) no-repeat center 0; }
.b3{ width: 750px; height: 503px; overflow: hidden; position: relative; background:url(../../images/v1/intro/b3.jpg) no-repeat center 0; }
.b4{ width: 750px; height: 564px; overflow: hidden; position: relative; background:url(../../images/v1/intro/b4.jpg) no-repeat center 0; }
.b5{ width: 750px; height: 586px; overflow: hidden; position: relative; background:url(../../images/v1/intro/b5.jpg) no-repeat center 0; }
.b6{ width: 750px; height: 1290px; overflow: hidden; position: relative; background:url(../../images/v1/intro/b6.jpg) no-repeat center 0; }
.b7{ width: 750px; height: 327px; overflow: hidden; position: relative; background:url(../../images/v1/intro/b7.jpg) no-repeat center 0; }

.b6 .wrap{ padding: 175px 0 0; height: auto; }

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

.yy1{ position: absolute; width: 187px; height:70px; top: 25px; right: 20px; background:url(../../images/v1/intro/yy1.png) no-repeat; 
	/* -webkit-animation:sac 0.5s alternate infinite linear;
	animation:sac 0.5s alternate infinite linear; */
}

.delay01 {
	-webkit-animation-delay: 0.1s;
	animation-delay: 0.1s;
  }
  .delay02 {
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s;
  }
  .delay03 {
	-webkit-animation-delay: 0.3s;
	animation-delay: 0.3s;
  }
  .delay04 {
	-webkit-animation-delay: 0.4s;
	animation-delay: 0.4s;
  }
  .delay05 {
	-webkit-animation-delay: 0.5s;
	animation-delay: 0.5s;
  }
  .delay06 {
	-webkit-animation-delay: 0.6s;
	animation-delay: 0.6s;
  }

.animated {
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
}

.b4.on .fadeInUpBig2,.b5.on .fadeInUpBig2 {
	visibility: visible;
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

.ks{ text-align: center; font-size: 14px; color: #bfad88; padding: 144px 0 0; width: 620px; margin: 0 auto; }
.ks a{ float: left; display: inline; width: 307px; height: 167px; margin: 0 5px 5px 0; background:url(../../images/v1/intro/p1.png) no-repeat; color: #bfad88; visibility: hidden; }
.ks a.delay01{
	background-position: 0 0;
}
.ks a.delay02{
	background-position: right 0;
	margin-right: 0;
}
.ks a.delay03{
	background-position: 0 bottom;
}
.ks a.delay04{
	background-position: right bottom;
	margin-right: 0;
}

.b2.on .ks a {
    visibility: visible;
}
.b2.on .fadeInRight2 {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}


.swiper-container{ margin: 0 auto; width: 614px; height: 315px; }
.swiper-button-next, .swiper-button-prev{
	width: 45px; height: 80px;
	background:url(../../images/v1/intro/jt.png) no-repeat;
}
.swiper-button-next{
	left: 0; top: 427px; margin: 0;
}
.swiper-button-prev{
 left: auto;	right: 0; top: 427px; background-position: right 0;
}
.swiper-button-next::after, .swiper-container-rtl .swiper-button-prev::after {
    content: '';
}
.swiper-button-prev::after, .swiper-container-rtl .swiper-button-next::after {
    content: '';
}
.swiper-pagination-bullet{ opacity: 1;}
.swiper-pagination{ width: 100%; text-align: center; margin: 45px auto 0; }
.swiper-pagination span{ border-radius: 50%; width: 14px; height: 14px; border:solid 3px #dabf9c; margin: 0 10px; }
.swiper-pagination span.swiper-pagination-bullet-active{ border:solid 3px #ac906b; background: #ac906b; }

.rr1{ position: absolute; width: 831px; height: 873px; left: -247px; bottom: 119px; background:url(../../images/v1/intro/left.png) no-repeat; 
	-webkit-transform: translate(-100%);  transform: translate(-100%); -webkit-transition-duration: 1s; transition-duration: 1s; opacity: 0;
}
.rr2{ position: absolute; width: 960px; height: 1238px; right: -399px; bottom: 119px; background:url(../../images/v1/intro/right.png) no-repeat; 
	-webkit-transform: translate(100%);  transform: translate(100%); -webkit-transition-duration: 1s; transition-duration: 1s; opacity: 0;
}
.lq{ position: absolute; width: 243px; height: 70px; right: 205px; bottom: 112px; background:url(../../images/v1/intro/lq.png) no-repeat; }
.rr2 .lq{ left: 205px;}
.b4.on .rr1,.b4.on .rr2{
	-webkit-transform: translate(0);  transform: translate(0); opacity: 1;
}

.botlogs{ position: absolute; width: 229px; height: 229px; top: -112px; left: 50%; margin-left: -114px;
	-webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transform: scale(0); transform: scale(0); -webkit-transition-delay: 0.4s; transition-delay: 0.4s;
}
.b7.on .botlogs{
	-webkit-transform: scale(1) rotateZ(360deg); transform: scale(1) rotateZ(360deg);
}

.wx1{ position: absolute; width: 160px; top: 72px; left: 165px; font-size: 18px; color: #9c8c6f; text-align: center; }
.wx2{ position: absolute; width: 160px; top: 72px; left: 514px; font-size: 18px; color: #9c8c6f; text-align: center; }
.wx1 img,.wx2 img{
	border: solid 1px #534937; margin-bottom: 20px;
}
.wx1 a,.wx2 a{
	color: #9c8c6f; display: none;
}
.topa{
	position: absolute; width: 64px; height: 130px; bottom: 0; left: 50%; margin-left: -32px;
}


.p3{ text-align: center; padding: 197px 0 0;}
.p3 a{ display: inline-block; width: 203px; height: 273px; background:url(../../images/v1/intro/p3.png) no-repeat; margin: 0 10px; visibility: hidden; }
.p3 a.delay01{
	background-position: 0 0;
}
.p3 a.delay02{
	background-position: center 0;
}
.p3 a.delay03{
	background-position: right 0;
}

.p4{ text-align: center; padding: 200px 0 0; }
.p4 a{ display: inline-block; width: 203px; height: 309px; background:url(../../images/v1/intro/p4.png) no-repeat; margin: 0 10px;  visibility: hidden; }
.p4 a.delay01{
	margin-left: 30px;
	background-position: 0 0;
}
.p4 a.delay02{
	margin-right: 0;
	background-position: -219px 0;
}
.p4 a.delay03{
	width: 239px;
	margin: 0;
	background-position: right 0;
}



.list { display: block; width: 666px; height: 920px; margin: 0 auto; overflow: hidden; position: relative; font-family: "Microsoft YaHei";}
.list ul{ position: absolute; width: 100%; left: 0; top: 0; font-size: 18px; }
.list li{margin-top: 10px; width: 100%; display: block; position: relative; }
.toux{ float: left; width: 60px; height: 60px; }
.cont{ float: left; display: inline; margin-left: 10px;  width: 580px; line-height: 28px; font-size: 22px; }
h3{ display: block; color: #993300; font-size: 24px; font-weight: 500; }
.list li p img{ margin-top: 25px; width: 186px; }
.list li .clr{ height: 11px; }
.xx{ display:inline-block; vertical-align: middle;    margin: 5px 5px 5px 0; height: 22px; width: 22px;  background:url(../../images/v1/intro/duo_01.png) no-repeat; }
.xx.b{  background:url(../../images/v1/intro/duo_02.png) no-repeat;  }
.zan{ position: absolute; width: 100px; height: 33px; line-height: 44px; text-align: right; padding-right: 44px; right: 0; top: 0; font-size: 20px; background:url(../../images/v1/intro/zan.png) no-repeat right 0;  }
.zan:hover,.zan.on{  background:url(../../images/v1/intro/zan_on.png) no-repeat right 0;  }

.jias{ position: absolute; z-index: 99; color: #ff0000; font-weight: bold; }
.topx{ position: absolute; width: 100%; height: 101px; background:url(../../images/v1/intro/top.png) no-repeat; }