@charset "utf-8";

/* CSS Document */



/**************************** Global ********************************/

html{ 

    min-height:100%;

}



body{

	/* This image will be displayed fullscreen */

    background:rgb(13,7,41);

    width: 100%;

    min-height:100%;

    overflow: hidden;

	font-family: "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;

	font-size: 12px; 

	color: white;

}

a{text-decoration:none;color:white;}

a:hover{

	cursor: pointer;

	text-decoration:none;

}

.logo{

	position: absolute;

	left: 35px;

	top: 28px;

	z-index: 100;

	/*opacity: 0;*/

	-webkit-transition:all ease 1s;

	-webkit-animation: floating 3s ease-in-out infinite;

}

/*.topic-1 .logo{

	opacity: 1;

}

*/



@-webkit-keyframes floating {

    from{

        -webkit-transform: translate3d(0,-5px,0);

    }

    50%{

    	-webkit-transform: translate3d(0,5px,0);

    }

    to{

        -webkit-transform: translate3d(0,-5px,0);

    }

}



*{

	-webkit-tap-highlight-color: rgba(0,0,0,0);

	-webkit-user-select:none;

	-webkit-touch-callout:none;

}



.warning{

	position: absolute;

	top: 0px;

	background: rgb(200,0,0);

	text-align: center;

	width: 100%;

	padding: 4px;

	font-size: 18px;

	opacity: 0;

	-webkit-transition:all ease 1s;

}



/*** Tips **/

.tips{

	position: absolute;

	background: url(images/tips_arrows.png);

	width: 23px;

	height: 87px;

	opacity: 0 !important;  

	z-index: 99;

	-webkit-transition:all ease 1s;

}

.per .tips{

	left: 230px;

	top: 80px;

}

.topic-3 .per.status-1 .tips{

	opacity: 1 !important;

}

.exp .tips{

	right: 270px;

	top: 50px;

}

.topic-4 .exp-1 .tips{

	opacity: 1 !important;

}

.tips img{

	position: absolute;

	left: 6px;

	top: 14px;

	-webkit-animation:finger 2s ease infinite;

}



@-webkit-keyframes finger{

    from{

    	opacity: 0;

        -webkit-transform: translate3d(0,50px,0);

    }

    20%{

    	opacity: 1;

    	-webkit-transform: translate3d(0,50px,0);

    }

    80%{

    	opacity: 1;

        -webkit-transform: translate3d(0,0,0);

    }

    to{

    	opacity: 0;

        -webkit-transform: translate3d(0,0,0);

    }

}







/**************************** Global ********************************/



/******** Page Layout ************/

.wrap{

	width:100%;

	height:100%;

	position: absolute;

	overflow: hidden;

	 -webkit-transform-style: preserve-3d;

}



.slider .content{

	width: 984px;

	height:708px; 

	padding: 20px;

	margin: 0 auto;

	position: relative;

	/*-webkit-transition:all ease-in-out 1s;

	-moz-transition:all ease-in-out 1s;

	-ms-transition:all ease-in-out 1s;

	-o-transition:all ease-in-out 1s;

	transition:all ease-in-out 1s;*/

}

.slider h1{

	font-size: 24px;

	line-height: 40px;

	position: absolute;

	letter-spacing: 1px;

	white-space : nowrap;

	position: absolute;

}

.slider p{

    font-size: 16px;

    line-height: 28px;

    position: absolute;

    color: white;

}







/******* Page Content Animation ********/

.home .home_car{

	width: 591px;

	height: 294px;

	position: absolute;

	left: 285px;

	top: 250px;

	background: url(images/home_car.png) no-repeat;

	opacity: 0;

	-webkit-transform:scale(0.9) translate3d(180px,0,0);

	-moz-transform:scale(0.9) translate3d(180px,0,0);

	-ms-transform:scale(0.9) translate3d(180px,0,0);

}

.home.active .home_car{

	opacity: 1;

	transition:all 1s ease-in-out;

	transition-delay:.1s;

	-webkit-transform:scale(1) translate3d(0,0,0);

	-moz-transform:scale(1) translate3d(0,0,0);

	-ms-transform:scale(1) translate3d(0,0,0);

}

.home h1{

	left: 145px;

	top: 180px;

	opacity: 0;

	-webkit-transform:translate3d(0,50px,0);

	-moz-transform:translate3d(0,50px,0);

	-ms-transform:translate3d(0,50px,0);

}

.home.active h1{

	opacity: 1;

	transition:all 1s ease-in-out;

	transition-delay:1.1s;

	-webkit-transform:scale(1) translate3d(0,0,0);

	-moz-transform:scale(1) translate3d(0,0,0);

	-ms-transform:scale(1) translate3d(0,0,0);

}





.saab-1 h1{

	left: 97px;

	top: 240px;

}

.saab-1 p{

	left: 97px;

	top: 382px;

}

.saab-1 h1,.saab-1 p{

	opacity: 0;

	-webkit-transform:translate3d(160px,0,0);

	-moz-transform:translate3d(160px,0,0);

	-ms-transform:translate3d(160px,0,0);

}

.saab-1 .saab_logo,.saab-1 .saab_logo>div{

	width: 313px;

	height: 316px;

	position: absolute;

}

.saab-1.active .saab_logo,.saab-1.active .saab_logo>div,.saab-1.active p,.saab-1.active h1{

	opacity: 1;

	transition:all 1s ease;

	-webkit-transform:scale(1) translate3d(0,0,0);

	-moz-transform:scale(1) translate3d(0,0,0);

	-ms-transform:scale(1) translate3d(0,0,0);

}

.saab-1 .saab_logo{

	top: 186px;

	left: 365px;

}

.saab-1 .saab_logo_in{

	opacity: 0;

	-webkit-transform:scale(10);

	background: url(images/saab_logo_in.png);

}

.saab-1 .saab_logo_out{

	opacity: 0;

	-webkit-transform:scale(10);

	background: url(images/saab_logo_out.png);

}

.saab-1 .saab_logo_head{

	opacity: 0;

	background: url(images/saab_logo_head.png);

	-webkit-transform:translate3d(0,-50px,0);

	-moz-transform:translate3d(0,-50px,0);

	-ms-transform:translate3d(0,-50px,0);

}

.saab-1 .saab_logo_saab{

	opacity: 0;

	background: url(images/saab_logo_saab.png);

	-webkit-transform:translate3d(0,50px,0);

	-moz-transform:translate3d(0,50px,0);

	-ms-transform:translate3d(0,50px,0);

}

.saab-1.active .saab_logo_out{

	transition-delay:0.1s !important;

}

.saab-1.active .saab_logo_saab{

	transition-delay:0.5s !important;

}

.saab-1.active .saab_logo_head{

	transition-delay:0.5s !important;

}

.saab-1.active .saab_logo{

	transition-delay:1.5s !important;

	-webkit-transform:translate3d(240px,0,0);

	-moz-transform:translate3d(240px,0,0);

	-ms-transform:translate3d(240px,0,0);

}

.saab-1.active p,.saab-1.active h1{

	transition-delay:1.5s !important;

}





.saab-2 .text{

	left: 135px;

	top: 352px;

	position: absolute;

	opacity: 0;

	-webkit-transform:translate3d(0,50px,0);

	-moz-transform:translate3d(0,50px,0);

	-ms-transform:translate3d(0,50px,0);

}

.saab-2 p{

	width: 500px;

	top: 123px;

}

.saab-2 .saab_air,.saab-2 .saab_air_body{

	width: 848px;

	height: 385px;

	position: absolute;

}

.saab-2.active .saab_air,.saab-2.active .saab_air>div,.saab-2.active .text{

	opacity: 1;

	transition:all 1s ease;

	-webkit-transform:scale(1) translate3d(0,0,0);

	-moz-transform:scale(1) translate3d(0,0,0);

	-ms-transform:scale(1) translate3d(0,0,0);

}

.saab-2 .saab_air{

	top: 155px;

	left: 100px;

}

.saab-2 .saab_air_body{

	background: url(images/saab_air_body.png);	

}

.saab-2 .saab_air_cabin{

	background: url(images/saab_air_cabin.png);

	width: 327px;

	height: 108px;

	position: absolute;	

	top: 8px;

	left: 237px;

	opacity: 0;

	-webkit-transform: translate3d(0,-50px,0);

	-moz-transform: translate3d(0,0,0);

	-ms-transform: translate3d(0,0,0);

}

.saab-2.active .saab_air_cabin{

	transition-delay:0.5s !important;

}

.saab-2.active .text{

	transition-delay:0.5s !important;

}



.saab-3 p,.saab-3 h1{

	opacity: 0;

	right: 100px;

	text-align: right;

	-webkit-transform:translate3d(160px,0,0);

	-moz-transform:translate3d(160px,0,0);

	-ms-transform:translate3d(160px,0,0);

}

.saab-3 p{

	top: 257px;

}

.saab-3 h1{

	top: 484px;

} 

.saab-3.active .saab_fly,.saab-3.active p,.saab-3.active h1{

	opacity: 1;

	transition:all 1s ease;

	-webkit-transform:scale(1) translate3d(0,0,0) rotate(0deg);  

	-moz-transform:scale(1) translate3d(0,0,0) rotate(0deg);

	-ms-transform:scale(1) translate3d(0,0,0) rotate(0deg);

}

.saab-3 .saab_fly{

	width: 440px;

	height: 443px;

	background: url(images/saab_fly.png);

	position: absolute;

	left: 108px;

	top: 158px;

	-webkit-transform: scale(0.5) translate3d(100px,200px,0) rotate(-55deg);

	-moz-transform:scale(0.5) translate3d(100px,0,0) rotate(90deg);

	-ms-transform:scale(0.5) translate3d(100px,0,0) rotate(90deg);

}

.saab-3.active .saab_fly{

	transition-delay:0.2s;

}

.saab-3.active p,.saab-3.active h1{

	transition-delay:1s;

}





/****** Performance ******/

.per_car div{

	position: absolute;

}

.per_car,.per_body,.per_chassis,.per_bottom{

	position: absolute;

	width: 576px;

	height: 420px;

}

.per_car{

	top: 77px;

	left: 269px;

}



/** default **/

.per div{

	opacity: 0;

}

.per.active div{

	opacity: 1;

	-webkit-transition: all 1s ease-in-out;

	-moz-transition: all 1s ease-in-out;

	-ms-transition: all 1s ease-in-out;

	-o-transition: all 1s ease-in-out;

	transition: all 1s ease-in-out;

}

.per.active .per_tire_front,.per.active .per_tire_rare{

	-webkit-transform:translate3d(0,0,0);

	-moz-transform:translate3d(0,0,0);

	-ms-transform:translate3d(0,0,0);

}

.per .per_tire_front,.per .per_tire_rare{

	-webkit-transform:translate3d(120px,0,0);

	-moz-transform:translate3d(120px,0,0);

	-ms-transform:translate3d(120px,0,0);

}

.per_body{

	background: url(images/per_body.png);

	z-index: 5;

}

.per_tire_front{

	background: url(images/per_tire_front.png);

	width: 122px;

	height: 132px;

	left: 256px;

	top: 269px;

	z-index: 3;

}

.per_tire_rare{

	background: url(images/per_tire_rare.png);

	width: 75px;

	height: 94px;

	right: 12px;

	top: 118px;

	z-index: 3;

}

.per_chassis{

	background: url(images/per_chassis.png);

	z-index: 2;

}

.per_motor{

	background: url(images/per_motor.png);

	width: 234px;

	height: 219px;

	top: 162px;

	left: 43px;

	z-index: 4;

	-webkit-transform: scale(0.73);

	-moz-transform: scale(1);

	-ms-transform: scale(1);

	-o-transform: scale(1);

	transform: scale(0.73);

}

.per .intro{

	position: absolute;

	top: 539px;

	left: 146px;

	width: 560px;

	text-indent: 2em;

}

.per .title{

	position: absolute;

	top: 465px;

	left: 744px;

	width: 172px;

	height: 172px;

	border-radius: 88px;

	border:2px solid rgb(227,0,0);

	-webkit-animation: floating 3s ease-in-out infinite;

}

.per .title h1{

	width: 172px;

	height: 172px;

	font-size: 24px;

	text-align: center;

	line-height: 172px;

}



/** Status-1 inherit from default **/



/** Status-2 **/

.per.status-2 .per_body{

	opacity: 0;

	-webkit-transform:translate3d(0,-100px,0);

	-moz-transform:translate3d(0,-100px,0);

	-ms-transform:translate3d(0,-100px,0);

}



/** Status-3 **/

.per.status-3 .per_body{

	opacity: 0;

	-webkit-transform:translate3d(0,-100px,0);

	-moz-transform:translate3d(0,-100px,0);

	-ms-transform:translate3d(0,-100px,0);

}

.per.status-3 .per_motor{

	-webkit-transform:scale(1) translate3d(0,-20px,0);

	-moz-transform:scale(1) translate3d(0,-20px,0);

	-ms-transform:scale(1) translate3d(0,-20px,0);

}

.per.status-3 .per_chassis,.per.status-3 .per_tire_front,.per.status-3 .per_tire_rare{

	opacity: 0.15;

}



/** Status-4 **/

.per.status-4 .per_body{

	opacity: 0;

	-webkit-transform:translate3d(0,-100px,0);

	-moz-transform:translate3d(0,-100px,0);

	-ms-transform:translate3d(0,-100px,0);

}

.per.status-4 .per_motor{

	opacity: 0;

	-webkit-transform:scale(1) translate3d(0,-600px,0);

	-moz-transform:scale(1) translate3d(0,-600px,0);

	-ms-transform:scale(1) translate3d(0,-600px,0);

}

.per.status-4 .per_chassis,.per.status-4 .per_tire_front,.per.status-4 .per_tire_rare{

	opacity: 1;

}



/** intro & title **/

.intro p,.title h1{

	opacity: 0;

	-webkit-transition: all .5s ease;

	-moz-transition: all .5s ease;

	-ms-transition: all .5s ease;

	-o-transition: all .5s ease;

	transition: all .5s ease;

}

.status-1 .intro-1,.status-1 .title-1,

.status-2 .intro-2,.status-2 .title-2,

.status-3 .intro-3,.status-3 .title-3,

.status-4 .intro-4,.status-4 .title-4{

	opacity: 1;

}



/****** Experience ******/



.exp div{

	opacity: 0;

}

.exp.active div{

	opacity: 1;

	-webkit-transition: all 1s ease;

	-moz-transition: all 1s ease;

	-ms-transition: all 1s ease;

	-o-transition: all 1s ease;

	transition: all 1s ease;

}

.exp.active .exp_car>div{

	opacity: 0.15;

	

}

.exp_car div{

	position: absolute;

}

.exp_car{

	width: 1024px;

	height: 768px;

	position: absolute;

}



.exp_chair{

	width: 686px;

	height: 806px;

	background: url(images/exp_chair.png);

	left: 108px;

	bottom: -74px;

}



.exp_condition{

	background: url(images/exp_condition.png);

	width: 549px;

	height: 587px;

	top: 138px;

	right: -83px;

}



.exp_screen{

	background: url(images/exp_screen.png);

	width: 545px;

	height: 315px;

	right: 113px;

	top: 138px;

}



.exp_wheel{

	background: url(images/exp_wheel.png); 

	width: 164px;

	height: 194px;

	top: 125px;

	right: 376px;

}



.exp_windows{

	background: url(images/exp_windows.png); 

	width: 1242px;

	height: 895px;

	top: -54px;

	left: -73px;

}



/** Exp-1~5 **/

.exp.active.exp-1 .exp_chair,

.exp.active.exp-2 .exp_condition,

.exp.active.exp-3 .exp_screen,

.exp.active.exp-4 .exp_wheel,

.exp.active.exp-5 .exp_windows{

	opacity: 1 !important;

}



/** circle **/



.exp .info{

	position: absolute;

	height: 360px;

	width: 360px;

	-webkit-animation: floating 3s ease-in-out infinite;

}

.exp .circle{

	position: absolute;

	width: 356px;

	height: 356px;

	background:rgba(13,7,41,0.3);

	border-radius: 180px; 

	border: 2px solid rgb(227,0,0);

}

.exp .ball{

	width: 40px;

	height: 40px;

	border-radius: 20px;

	background: rgb(227,0,0);

	position: absolute;

	top: 160px;

	left: -19px;

	-webkit-transform-origin-x: 199px;

	-webkit-animation: rotating 6s linear infinite;



}



@-webkit-keyframes rotating {

    from{

        -webkit-transform: rotate(0deg);

    }

    to{

        -webkit-transform: rotate(360deg);

    }

}

.exp .info article{

	position: absolute;

	width: 356px;

	height: 356px;

	text-align: center;

	opacity: 0;

	-webkit-transition: all .1s ease;

	-moz-transition: all .5s ease;

	-ms-transition: all .5s ease;

	-o-transition: all .5s ease;

	transition: all .5s ease;

}

.exp .info h1,.exp .info p{

	width: 356px;

}

.exp .info span{

	font-size: 20px;

}



.exp-1 .info{

	left: 500px;

	top: 205px;

}

.exp-2 .info{

	left: 215px;

	top: 207px;

}

.exp-3 .info{

	left: 70px;

	top: 190px;

}

.exp-4 .info{

	left: 100px;

	top: 205px;

}

.exp-5 .info{

	left: 568px;

	top: 277px;

}



.info .art2 h1{

	top: 75px;

}

.info .art2 p{

	top: 178px;

}

.info .art3 h1{

	top: 89px;

}

.info .art3 .add{

	top: 192px;

}

.info .art4 h1{

	top: 89px;

}

.info .art4 p{

	top: 192px;

}

.info .art5 h1{

	top: 89px;

}

.info .art5 p{

	top: 192px;

}





.info .art1 h1{

	top: 89px;

}

.info .art1 p{

	top: 192px;

}

.exp-1 .art1,

.exp-2 .art2,

.exp-3 .art3,

.exp-4 .art4,

.exp-5 .art5{

	opacity: 1 !important;

}



/******* footer Navigation ********/

#nav_full{

	width: 100%;

	height: 56px;

	position: absolute;

	bottom: 31px;	

	z-index: 999;

	margin: 0 auto;

}

#nav{

	width: 812px;

	height: 55px;

	margin: 0 auto;

	font-size: 16px;

	font-weight: 900;

	letter-spacing: 1px;

	padding: 0 40px;

	position: relative;

}

#nav li a{

	display: block;

	float: left;

	width: 203px;

	height: 46px;

	line-height: 46px;

	color: white;

	text-align: center;

	background: url(images/nav_btn.png) right;

}

#nav li a:active{

	background: url(images/nav_btn.png) left;

}

@media screen and (min-width: 1025px){

	#nav li a:hover{

	background: url(images/nav_btn.png) left;

}

}



.topic-1 .toHome a,

.topic-2 .toSaab a,

.topic-3 .toPer a,

.topic-4 .toExp a{

	background: url(images/nav_btn.png) left !important;

}



/******* pagination ********/

.pagination {

  position: absolute;

  right: 0px;

  top: 25%;

  z-index: 5;

  list-style: none;

  margin: 0;

  padding: 0;

  width: 60px;

}

.pagination li {

  height: 25px;

}

.pagination li a{

  margin: 0 auto;

  position: relative;

  width: 0px;

  height: 0px;

  display: block;

  border: 6px solid white;

  border-radius: 10px;

  -webkit-border-radius: 10px;

  -moz-border-radius: 10px;

  -ms-border-radius: 10px;

  -webkit-transition:all 0.2s ease;

  -moz-transition:all 0.2s ease;

  -ms-transition:all 0.2s ease;

}

.pagination li a:hover,.pagination li a.active{

  margin: 0 auto;

  width: 12px;

  top: -2px;

  height: 12px;

  display: block;

  background: none;

  border-radius: 10px;

  border: 2px solid rgb(255, 8, 8);

  -webkit-border-radius: 10px;

  -moz-border-radius: 10px;

  -webkit-transition: all 0.3s ease;

}