@charset "utf-8";
/* Reset  create by AndyZhou     Nov-27-2013 14:30  contact 529892056@qq.com*/
body{background: #333;overflow-x: hidden;padding-bottom: 190px;}
.bg{width: 100%;}
.header{position: relative;}

.footer{position: fixed;bottom: 0;left: 0;width: 100%;z-index: 998;background: url("../img/footer_bg.jpg") repeat-x;background-size: auto 100%; }
.footerGame{position: fixed;top: 0;left: 0;width: 100%;z-index: 998;background: url("../img/footer_bg.jpg") repeat-x;background-size: auto 100%; }
.footer section,.footerGame section{position: relative;}
@media only screen and (orientation : landscape) {
    .footer section,.footerGame section{width: 50%;}
}
.footer a,.footerGame a{position: absolute;display: block;height: 100%;top:0;}
.index{left: 0;width: 30%;}
.car{width: 14.5%;left: 35.7%;}
.game{width: 16.3%;right: 29%;}
.build{width: 16.2%;right: 7.6%;}
.carType{position: absolute;left: 3.4%;top:39.2%;font-family: DINProBold;line-height: 0;}
.carModel{position: absolute;left: 4.5%;bottom:18.4%;font-family: DINProMedium;line-height: 0;}

.swipe{width: 100%;overflow: hidden;position: relative;}
.swipe-wrap {width: 100%;overflow: hidden;position: relative;}
.swipe-wrap > div{float:left;width:100%;position: relative;display: block;}
.position{position: absolute;bottom: 4%;width: 100%;text-align: center;height: 10px;}
.position li{width: 10px;height: 10px;display: inline-block;border-radius: 10px;background: #fff;text-indent: 999em;}
.position .on{background: #55acee;}
.buildLink{position: absolute;bottom: 10%;left: 6.1%;width: 63.2%;height: 17.1%;}
.buildImg{position: absolute;top:0;left: 0;width:100%;}

.touch{width: 120px;height: 120px;position: absolute;left: 30px;top:30px;background: #00f;}
.scarify{background: url("../img/build.jpg") no-repeat;background-size: 100%;}
.carNav div,.carNav a{height: 100%;position: absolute;top:0;cursor: pointer;display: block}
.carFr{width: 33%;left: 0;}
.carTc{width: 30.6%;left: 37.2%;}
.carXd{width: 28.7%;right: 0;}

.dwb{font-family: DINProBold,sans-serif;color: #fff;line-height:1;}
.dwba{font-family: DINProBlack,sans-serif;color: #fff;line-height:1;}
.dbb{font-family: DINProBlack,sans-serif;color: #55acee;line-height:1;}
.dgp{font-family: DINProP, sans-serif,sans-serif;;color: #adadad;line-height:1;}
.dgr{font-family: DINProRegular,sans-serif;;color: #999;line-height:1;}
.dwr{font-family: DINProRegular,sans-serif;;color: #fff;line-height:1;}
.carsInfo{background: #333;padding: 13px 0 0 0; text-indent: 20px;overflow: auto;}
.infoList{font-family: DINProBlack,sans-serif; width: 36.6%;line-height: 1;}
.carInfoDetail{width: 63.3%;text-indent:8px;box-shadow: -1px 0 0 #666;font-family: DINProBlack,sans-serif;line-height: 1; }
.infoList li,.carInfoDetail li{padding: 6px 0;}

.carInfoDetail li{border-bottom: 1px solid #666;}
.carInfoDetail li:last-of-type{border-bottom: none;}
.infoList .hover,.infoList li:hover{background: #41637e;}
.infoList .active{background: #5c5c5c;}
.paramTitle{font-size: 11px;}
.paramNum{font-size: 40px;}
.paramNumLong{font-size: 26px;}
.paramInfo{font-size: 11px;}
.carsTitle{font-size: 33px;}
.paramIntro{font-size: 22px;}
.paramDetail{font-size: 14px;}
.carsModel{font-size: 33px;}
.paramSub{font-size: 17px;}
.lbs{font-size: 28px;}
.carsSub{font-size: 20px;padding-bottom: 8px;border-bottom: 1px solid #666;font-family: DINProRegular;}

.info{font-size: 50px;}

.gameBg{background: #3c3c3c;height: 100%;padding: 0;}
.content{padding-bottom: 180px;}
.gameBox{margin:20px auto 0 auto;width: 306px;height: 355px;border: 3px solid #868686;border-radius: 10px ;overflow: visible;position: relative;
    background-image:/*url("../img/game_line.png"),*/radial-gradient(#979797,#464646);
    background-image:/*url("../img/game_line.png"),*/-webkit-radial-gradient(#9b9b9b,#4b4b4b);}
.gameBox-new{margin:20px auto 0 auto;width: 312px;height: 361px;overflow: visible;position: relative;

}
.game-inner{
    width: 306px;height: 355px;overflow: hidden;
    border: 3px solid #868686;border-radius: 10px ;
    background-image:/*url("../img/game_line.png"),*/radial-gradient(#979797,#464646);
    background-image:/*url("../img/game_line.png"),*/-webkit-radial-gradient(#9b9b9b,#4b4b4b);
}
.cars{width: 306px;height: 355px;background-repeat: no-repeat;background-position: center;}
.gameTitle{font-size: 85px;font-family: DINProBlack;line-height: 70px;color: #fff;padding: 25px;}
.track{position: absolute;left: 0;top:0;background:url("../img/game_track.png") no-repeat;width: 100%;height: 100%; }
.contract{margin:-24px auto 0 auto;width: 306px;height: 120px;position: relative;}
.speed{width: 61px;height: 108px;background: url("../img/speed.png") no-repeat left bottom;position: absolute;right: -17px;bottom: -70px;z-index: 5;}
.speedHover{background-position: left top;}
.gameText{width: 172px;margin: 31px 0 0 92px;}
.turn{width: 110px;height: 111px;position: absolute;left: -20px;bottom:-70px;overflow: auto;background: url("../img/game_trun.png") no-repeat;background-size: 100% 100%;}
.turnLeft,.turnRight{width: 50%;height: 111px;background: url("../img/game_turn_b.png") no-repeat;z-index: 4;}
.smoke{width: 46px;height: 50px;position: absolute;z-index: 3;top: 306px;right: 18px; }
.smokes{width: 100%;position: absolute;top:0;left: 0;z-index: 3;-moz-transform:scale(1,-1);-webkit-transform:scale(1,-1);transform:scale(1,-1);
   /* filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);*/}
.starLine{position: absolute;top: 251px;right: 13px;width: 50px;}
.carsSmoke{width: 18px;height: 38px;z-index: 999;position: absolute;left: 18px;top: -30px;}
.turnLeftHover,.turnRightHover{background: url("../img/game_trun_r.png")}
.turnLeftHover{background-position: left top;}
.turnRight{background-position: right top;}
.turnRightHover{background-position: right top}
.full{position: absolute;left: 110px;bottom: -40px;height: 30px;width: 120px;background: #d2d2d2;color: #fff;font-family: DINProBlack;font-size: 16px;text-align: center;}
.popup{position: fixed;width: 100%;height: 100%;left: 0;top: 0;background: rgba(0,0,0,.9);z-index: 9999;}
.center{position: absolute;left: 0;right: 0;top:0;bottom: 0;margin: auto;}
.win{width: 293px;height: 185px;background: url("../img/game_win_bg.png") no-repeat;font-family: DINProMedium; line-height: 1;color: #333;background-size: 100% 100%;}
.close{width: 25px;height: 25px;position: absolute;right: 4px;top:4px;}
.winCon{margin: 40px 0 0 16px;width: 186px;height: 80px;font-size: 16px;}
.loseCon{width: 293px;height: 161px;font-size: 20px;font-family: DINProMedium;line-height: 1.1;}
.sendBox{width: 293px;height: 185px;}
.loseCon h2{color: #ff7400;}
.loseCon p{color: #fff;}
.fat{font-family: DINProBlack;}
.goBtn{background: url("../img/game_go.png") no-repeat;width: 292px;height: 417px;background-size: 100% 100%;}
.winInput{width: 195px;height: 26px;line-height: 26px;margin-top: 12px;padding: 0 5px;}
.winSub{position: absolute;right: 14px;bottom: 12px;width: 54px;height: 50px;opacity: 0;cursor: pointer;}
.tbBox{margin-top: 4px;}
.conBg{position: absolute;width: 50%;height: 100%;left: 0;top:0;background: #454545;}
.logo{width: 46px;height: 46px;background: none;position: absolute;left: 0;top: 0;}
.links{background: #333;}
.game-link{
    margin-top: 80px;
}
.links:not(.wb){border-top: 1px solid #666;}
.wb{background: #fff;}
.links>a{width: 7.2%;height: 29.6%;display: block;position: absolute;top: 13.2%;}
.linkIns{right: 3.1%;}
.linkYou{right: 12%;}
.linkFac{right: 20.7%;}
.linkTwi{right: 29.6%;}
.links .linkSci{width: 58%;left: 3.1%;}
.twitterBox{margin: 16% 4% 6% 5%;overflow: hidden;height:81%;word-break: break-all;}
.instansive{position: absolute;width: 50%;height: 100%;right: 0;top:0;overflow: hidden;}
.conBg .var-narrow .tweet .header {display: none;}
.tw-feed {color:#fff;width:90px;background: #000;}
.tw-feed a {color:#fff;text-decoration:none;}
.tw-feed a:hover {color:#eee;text-decoration:none;}
.twitter-timeline {position:relative;margin-top: -52px;color: #fff;}
.timePosted{display: none;}
.tweet,.interact{color: #fff;word-break: normal;font-size: 13px;line-height: 1.2;font-family: DINProMedium;font-weight: 400;}
.interact{display: none;}
.tweet a,.interact a{color: #CBCAC5;}
.interact a{margin-right: 4%;}
.youtube{width: 100%;height: 203px;}
.instanRider{position: absolute;left: 0;top:0;}
.riderShow{overflow:hidden;position: relative;background: #fff;}
.riderShow>img{width: 100%;}
.riderPic>img{width: 100%;}
.riderPic,.riderInfo{width: 50%;height: 100%;position: absolute;top:0;overflow: hidden;text-align: center;}
.riderPic{left: 0;text-align: center;}
.riderInfo{right: 0;vertical-align: bottom;}
.instansive-widget img{height: 100%;}
.riderShow>a>img{width: 100%;}
.wrap{width: 1024px;margin: 20px auto;}
.rewardTable{width: 1024px;margin: 20px auto;}
.rewardTable td,.rewardTable th{border: 1px solid #ccc;}
.sendCont{width: 580px;height: 200px;margin-top: 20px;padding: 10px;}
.video{position: absolute;width: 100%;top:0;left: 0;bottom: 0;right: 0;margin: auto;background: #fff url("../img/loading.gif") no-repeat center center;min-height: 100px;}
.sendSuccess{width: 75%;height: 230px;background: #fff;border-radius: 6px;padding: 5%;font-family: DINProRegular;font-size: 14px;}

.driver{color: #fff;padding: 20px;font-size: 34px;font-family: DINProBold;line-height: 1;}
.carShowBox{}
.carShow{font-size: 21px;}
.carShowInfo{font-size: 17px;color: #adadad;border-bottom: 1px solid #666;padding-bottom: 10px;}
.paramNumSmall{font-size: 25px;}
@media only screen and (min-device-width : 320px)and (max-device-width : 480px) and (orientation : portrait){
    .carShow{font-size: 19px;}
    .carShowInfo{font-size: 15px;}
    .driver{font-size: 30px;}
    .paramNumSmall{font-size: 22px;}
    .paramTitle{font-size: 11px;}
    .paramNum{font-size: 36px;}
    .paramNumLong{font-size: 24px;}
    .paramInfo{font-size: 11px;}
    .carsTitle{font-size: 32px;}
    .paramIntro{font-size: 20px;}
    .paramDetail{font-size: 14px;}
    .carsModel{font-size: 33px;}
    .paramSub{font-size: 14px;}
    .lbs{font-size: 26px;}

    .info{font-size: 48px;}

    .winCon{font-size: 14px;}
    .logo{width: 40px;height: 40px;}
    .carsModel,.carsTitle{font-size: 31px;}
    .youtube{height: 180px;}
    .youtube{height: 180px;}
    .twitterBox{margin: 16% 4% 10% 8%;overflow: hidden;height:81%;}
    .twitter-timeline {position:relative;color: #fff;zoom: .81;}
    .riderShow{height: 160px;}
    .riderPic,.riderInfo{height: 160px;}

    /*.contract{margin:-50px auto 0 auto;width: 306px;height: 120px;position: relative;}*/
    /*.gameText{width: 142px;margin: 56px 0 0 102px;}*/
}
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {
    .carShow{font-size: 19px;}
    .carShowInfo{font-size: 15px;}
    .driver{font-size: 30px;}
    .paramNumSmall{font-size: 22px;}
    .paramTitle{font-size: 11px;}
    .paramNum{font-size: 36px;}
    .paramNumLong{font-size: 24px;}
    .paramInfo{font-size: 11px;}
    .carsTitle{font-size: 32px;}
    .paramIntro{font-size: 20px;}
    .paramDetail{font-size: 14px;}
    .carsModel{font-size: 33px;}
    .paramSub{font-size: 14px;}
    .lbs{font-size: 26px;}

    .info{font-size: 48px;}

    .winCon{font-size: 14px;}
    .logo{width: 40px;height: 40px;}
    .carsModel,.carsTitle{font-size: 31px;}
    .youtube{height: 180px;}
    .youtube{height: 180px;}
    .twitterBox{margin: 16% 4% 10% 8%;overflow: hidden;height:81%;}
    .twitter-timeline {position:relative;color: #fff;zoom: .81;}
    .riderShow{height: 160px;}
    .riderPic,.riderInfo{height: 160px;}

    /*.contract{margin:-50px auto 0 auto;width: 306px;height: 120px;position: relative;}*/
    /*.gameText{width: 142px;margin: 56px 0 0 102px;}*/
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) {
    .riderShow{height: 240px;}
    .riderPic,.riderInfo{height: 240px;}
}

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
    .riderPic,.riderInfo{height: 240px;}
}
