html, body {
	margin: 0 0 0 0;
	border: 0 0 0 0;
	padding: 0 0 0 0;
	font-family: Comic_Sans_MS, arial, verdana, helvetica, sans-serif, tahoma;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	 -khtml-user-select: none; 
	   -moz-user-select: none; 
		-ms-user-select: none; 
			user-select: none; 
}
@font-face {
	font-family: 'Conv_SHOWG';
	src: url('fonts/SHOWG.eot');
	src: local('☺'), url('fonts/SHOWG.woff') format('woff'), url('fonts/SHOWG.ttf') format('truetype'), url('fonts/SHOWG.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
body{
    overflow: hidden;
}
.container{
	/* width: 760px;
    height: 535px;
    background: #35335f;
    position: relative;
    margin: auto;
    border: 1px solid #c3bcbc;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    overflow: hidden;
    top: 10px; */
}

.container #mainGame {
	position: relative;
	margin:0px;
	left: 50%;
	-webkit-transform: translate(-50%, 0);
	-moz-transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
	-o-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
	width: 760px;
    height: 535px;
    top: 0px;
	overflow:hidden;
}

.loading{
    width:100%;
    height:100%;
    position: absolute;
    top:0px;
    left:0px;
    z-index: 1000;
    background-color: rgba(255, 255, 255,0.5);
   display: none;
}
.headerTag{
	width: 760px;
	height: 70px;	
    background:linear-gradient(#2f2f56, #514584);
	position: absolute;
    top: 0px;
    left: 0px;    
}
.logo{
    width: 147px;
	height: 70px;	
    background:url(../images/logo.png);
    position: absolute;
}
.footerTag{
	width: 760px;
	height: 45px;	
    background:linear-gradient(#9d9d9d, #f3f3f3);
	position: absolute;
    bottom: 0px;
    left: 0px;    
}
.mainScene{
	width: 760px;
	height: 420px;	
    background:#000000;
	position: absolute;
    top: 70px;
    left: 0px;
}

.screen1{
	width: 750px;
	height: 410px;	
    background:url(../images/vis1_Intro.png);
    background-position: -14px -85px;
	position: absolute;
    top: 0px;
    left: 0px;
    border: 5px solid black;
    overflow: hidden;
    display: none;
}
.titleSprite{
	width: 1070px;
    height: 446px;
    background: url(../images/sprite101.png);
    background-position: 0px 0px;
    position: absolute;
    top: -17px;
    left: -284px;
    animation: sprite1 2s 0.5s steps(22) forwards;
    transform: scale(.88);
}
@keyframes sprite1{
	from{background-position: 0 0;}
	to{ background-position: 0 -9812px; }
}
.menuOverlay{
    width:100%;
    height:100%;
    position: absolute;
    background-color: rgba(255,255,255,0.6);
    left: 100%;
}
.menuBox{
    width: 655px;
    height: 315px;
    background: #eaeaea;
    margin: auto;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    border: 5px solid #dadada;
}
.menuTitle{
    font-family: arial;
    font-weight: bold;
    font-size: 18px;
    line-height: 40px;
    /* background: red; */
    width: 93%;
    margin: auto;
    border-bottom: 1px solid #8b8b8b;
    text-indent: 5px;
}
.menuoption{
    cursor: pointer;
}

.menuoption1{
    width: 79px;
    height: 45px;
    position: absolute;
    left: 180px;
    top: 10px;
    color: white;
    font-size: 14px;
    font-family: arial;
    text-align: center;
    line-height: 45px;
    text-decoration: underline;
}
.menuoption2{
    width: 92px;
    height: 45px;
    position: absolute;
    left: 266px;
    top:10px;
    color: white;
    font-size:14px;
    font-family: arial;
    text-align: center;
    line-height: 22px;
    text-decoration: underline;
}
.menuoption3{
    width: 86px;
    height: 45px;
    position: absolute;
    left: 363px;
    top:10px;
    color:white;
    font-size:14px;
    font-family: arial;
    text-align: center;
    line-height: 22px;
    text-decoration: underline;
}
.menuoption4{
    width: 90px;
    height: 45px;
    position: absolute;
    left: 454px;
    top:10px;
    color: white;
    font-size:14px;
    font-family: arial;
    text-align: center;
    line-height: 22px;
    text-decoration: underline;
}
.menuoption5{
    width: 90px;
    height: 45px;
    position: absolute;
    left: 549px;
    top:10px;
    color:white;
    font-size:14px;
    font-family: arial;
    text-align: center;
    line-height: 22px;
    text-decoration: underline;
}
.menuoption6{
    width: 75px;
    height: 45px;
    position: absolute;
    left: 645px;
    top: 10px;
    color: white;
    font-size: 14px;
    font-family: arial;
    text-align: center;
    line-height: 45px;
    text-decoration: underline;
}
.menuoption:hover{
    background-color: #676193;
}

.audioEle{
    width: 42px;
    height: 27px;
    position: absolute;
    left: 705px;
    top: 10px;
    cursor: pointer;
}
.audioEle.off{
    background: url(../images/audon0001.png);
}
.audioEle.off:hover{
    background: url(../images/audon0002.png);
}
.audioEle.off:active{
    background: url(../images/audon0003.png);
}

.audioEle.on{
    background: url(../images/audoff0001.png);
}
.audioEle.on:hover{
    background: url(../images/audoff0002.png);
}
.audioEle.on:active{
    background: url(../images/audoff0003.png);
}

.infoBox{
    width: 360px;
    height: 230px;
    position: absolute;
    left: 270px;
    top: 63px;
    border: 1px solid rgba(164, 164, 164,0.6);
    background: #eaeaea;
    box-shadow: 0px 0px 10px 0px #a4a4a4;
}
.infobox1 .text1{
    position: relative;
    width: 336px;
    top: 10px;
    left: 10px;
    font-size: 16px;
}
.infobox1 .text2{
    position: relative;
    width: 336px;
    top: 22px;
    left: 10px;
    font-size: 16px;
    font-weight: bold;
    font-style: italic;
}
.infobox1 .text3{
    position: relative;
    width: 336px;
    top: 31px;
    left: 10px;
    font-size: 16px;
}
.infobox1 .text4{
    position: relative;
    width: 336px;
    top: 45px;
    left: 10px;
    font-size: 16px;
    color:#0000FF;
}

.menuBox .list{
    width: 228px;
    height: 25px;
    line-height: 25px;
    font-size: 15px;
    font-weight: bold;
    position: absolute;
    left: 20px;
    top: 63px;
    border: 1px solid rgba(164, 164, 164,0);
    background: #eaeaea;
    border-top-right-radius: 2px;
    cursor: pointer;
    text-indent: 35px;
}
.menuBox .list.list2{
    top: 105px;
}
.menuBox .list.list3{
    top: 147px;
}
.menuBox .list.list4{
    top: 188px;
}
.menuBox .list.list5{
    top: 230px;
}
.menuBox .list.active{
    width: 264px;
    border: 1px solid rgba(164, 164, 164,0.6);
    box-shadow: 0px 0px 10px 0px #a4a4a4;
}
.menuBox .list span{
    width: 18px;
    height: 18px;
    position: absolute;
    left: 7px;
    top: 3px;
    border: 1px solid black;
    border-radius: 50%;
    text-indent: 0px;
    text-align: center;
    line-height: 18px;
}

.box1{
    width: 360px;
    height: 230px;
    position: absolute;
    left: 271px;
    top: 65px;
    background: #eaeaea;
    display: none;
}
.tabImg{
    width: 164px;
    height: 82px;
    position: absolute;
    left: 13px;
    top: 10px;
    border: 1px solid rgba(164, 164, 164,0.6);
}
.tabImg[data-index="1"]{
    background: url(../images/img1.png);
}
.tabImg[data-index="2"]{
    background: url(../images/img2.png);
}
.tabImg[data-index="3"]{
    background: url(../images/img3.png);
}
.tabImg[data-index="4"]{
    background: url(../images/img4.png);
}
.tabImg[data-index="5"]{
    background: url(../images/img5.png);
}
.box1 .text1{
    position: relative;
    width: 336px;
    top: 100px;
    left: 10px;
    font-size: 16px;
    font-weight: bold;
}
.box1 .text2{
    position: relative;
    width: 336px;
    top: 107px;
    left: 10px;
    font-size: 16px;
}
.startBtn{
    width: 165px;
    height: 83px;
    position: absolute;
    left: 186px;
    top: 10px;
    background: url(../images/startBtn0001.png);
    cursor: pointer;
    border-bottom: 1px solid #436e9a;
    background-position: -1px
}
.startBtn:hover{
    width: 165px;
    height: 83px;
    position: absolute;
    left: 186px;
    top: 10px;
    background: url(../images/startBtn0002.png);
    cursor: pointer;
    border-bottom: 1px solid #436e9a;
    background-position: -1px

}

.startGame{
    width: 165px;
    height: 83px;
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0;
    right: 0px;
    background: url(../images/startBtn0001.png);
    cursor: pointer;
    border-bottom: 1px solid #436e9a;
    background-position: -1px ;
    margin: auto;
    transform: scale(.5);
}


.screen2{
	z-index: 101;
    width: 750px;
    height: 410px;
    position: absolute;
    top: 0px;
    left: 0px;
    border: 5px solid black;
    overflow: hidden;
    display: none;
}

#video1{
    position: absolute;
    width: 757px;
    height: 425px;
    top: -8px;
    left: -5px
}

.startIntro{
    width:390px;
    height: 160px;
    position: absolute;
    top: 115px;
    left: 185px;
    background-color: #e7e7e7;
    border: 5px solid #e9e9e9;
    box-shadow: 0px 0px 0px 1px #cccccc inset, 0px 0px 0px 1px #666666;
}
.startIntro .text1{
    position: relative;
    top: 15px;
    left: 23px;
}
.continueBtn{
    width: 126px;
    height: 29px;
    position: absolute;
    top: 157px;
    left: 131px;
    background: url(../images/continue0001.png);
    cursor: pointer;
    color: #336699;
    font-size: 19px;
    font-weight: bold;
    line-height: 29px;
    text-indent: 6px;
    z-index: 10;
}

.continueBtn:hover{
    background: url(../images/continue0002.png);
}
.skipIntro1{
    font-size: 21px;
    /* font-family: 'Conv_SHOWG'; */
    color: white;
    position: absolute;
    top: 371px;
    left: 611px;
    cursor: pointer;
    text-shadow: 0px 0px 10px rgb(0 0 0 / 90%);
    letter-spacing: 1px;
    display: none;
}
.skipIntro1:hover{
    text-shadow: 0px 0px 10px white;
}
.s2page1{
    width: 1069px;
    height: 668px;
    position: absolute;
    top: -34px;
    left: -287px;
    background: url(../images/screen2/img1.png);
    display: none;
}

.manAnimation1{
    width: 289px;
    height: 559px;
    position: absolute;
    top: 114px;
    left: 382px;
    background: url(../images/sprite2.png);
    background-position: 0 0;
    /* background-position: -9248px 0; */
}
.manAnimation1[data-step="1"]{
    background-position: 0 0;
    animation: sprite21 2s steps(32) forwards;
}
@keyframes sprite21{
	from{background-position: 0 0;}
	to{ background-position: -9248px  0;  }
}
.manAnimation1[data-step="2"]{
    background-position: 0 0;
    animation: sprite22 3s steps(47) forwards;
}

@keyframes sprite22{
	from{background-position: 0 0;}
	to{ background-position: -13583px 0;  }
}
.s2page2{
    width: 799px;
    height: 599px;
    position: absolute;
    top: -59px;
    left: -31px;
    background: url(../images/screen2/img2.png);
}


.s2page5 .manAnimation1{
    width: 289px;
    height: 559px;
    position: absolute;
    top: 114px;
    left: 382px;
    background: url(../images/trooper0001.png);
}

.eye3{
    width: 64px;
    height: 26px;
    position: absolute;
    background: url(../images/tro_eyes0001.png);
    transform: scale(.8);
    top: 33px;
    left: 74px;
    animation: eye3 5s linear infinite;
}
@keyframes eye3 {
    0%{background: url(../images/tro_eyes0001.png); }
    49%{background: url(../images/tro_eyes0001.png); }
    50%{background: url(../images/tro_eyes0017.png); }
    52%{background: url(../images/tro_eyes0017.png); }
    53%{background: url(../images/tro_eyes0001.png); }
    100%{background: url(../images/tro_eyes0001.png); }   
}

.mouth3{
    width: 25px;
    height: 15px;
    position: absolute;
    top: 69px;
    left: 96px;
    background: url(../images/sprite16.png);
    transform: scale(0.85);
    
}
.mouth3.ani1{
    animation: mouth3 0.7s steps(6) infinite;
}
@keyframes mouth3 {
    0%{background-position: 0 0;}
    100%{ background-position: -150px 0;}
}




.s2page2 .arrow1{
    width: 33px;
    height: 72px;
    position: absolute;
    top: 310px;
    left: 389px;
    background: url(../images/arrow1.png);
    opacity: 0;
    animation: arrow1 0.5s 0.5s linear forwards;
}
@keyframes arrow1 {
    from{
        top: 310px;
        left: 389px;
        opacity: 0;
    }
    to{
        top: 260px;
        left: 393px;
        opacity: 1;
    }
}
.s2page2 .car1{
    width: 31px;
    height: 50px;
    position: absolute;
    top: 470px;
    left: 380px;
    background: url(../images/car1.png);
   animation: car1 1s linear forwards;
}
@keyframes car1 {
    from{
        top: 470px;
        left: 380px; 
    }
    to{
        top: 355px;
        left: 390px; 
    }
}


.s2page2 .arrow2{
    width: 73px;
    height: 35px;
    position: absolute;
    top: 287px;
    left: 520px;
    background: url(../images/arrow2.png);
    opacity: 0;
    animation: arrow2 0.45s 4.8s linear forwards;
}
@keyframes arrow2 {
    from{
        top: 287px;
        left: 520px;
        opacity: 0;
    }
    to{
        top: 282px;
        left: 477px;
        opacity: 1;
    }
}

.s2page2 .car2{
    width: 49px;
    height: 31px;
    position: absolute;
    top: 312px;
    left: 785px;
    background: url(../images/car2.png);
   animation: car2 1s 4s linear forwards;
}
@keyframes car2 {
    from{
        top: 312px;
        left: 785px;
    }
    to{
        top: 295px;
        left: 560px
    }
}
.s2page1.zoom{
    width: 1069px;
    height: 668px;
    position: absolute;
    top: 9px;
    left: -295px;
    background: url(../images/screen2/img1.png);
    transform: scale(1.45);
}

.tipText1{
    width: 171px;
    height: 73px;
    position: absolute;
    top: 162px;
    left: 311px;
    background: url(../images/msg4.png);
    display: none;
}
.tipText2{
    width: 171px;
    height: 73px;
    position: absolute;
    top: 189px;
    left: 699px;
    background: url(../images/msg1.png);
    display: none;
}
.tipText3{
    width: 287px;
    height: 73px;
    position: absolute;
    top: 320px;
    left: 640px;
    background: url(../images/msg2.png);
    display: none;
}
#video11{
    width: 762px;
    height: 537px;
    position: absolute;
    left: 281px;
    z-index: 1;
    top: -31px;
}
#video12{
    width: 885px;
    height: 545px;
    position: absolute;
    left: 971px;
    z-index: 1;
    top: 412px;
    display: none;
}
#video13{
    width: 768px;
    height: 557px;
    position: absolute;
    left: 398px;
    z-index: 1;
    top: 52px;
    display: none;
}

#video14{
    width: 759px;
    height: 557px;
    position: absolute;
    left: -3px;
    z-index: 1;
    top: -73px;
    display: none;
}

.screen4 .skipIntro1{
    top: 376px;
    left: 634px;
    z-index: 1;
}

.s2overlay{
    width:100%;
    height:100%;
    position: absolute;
    top:0px;
    left: 0px;
    background-color: rgba(0,0,0,0.6);
    display: none;
    z-index: 2;
}

.s2overlay .carbtn1{
    width: 196px;
    height: 196px;
    position: absolute;
    top: 140px;
    left: 451px;
    background: #fff url(../images/carbtn1.png);
    background-repeat: no-repeat;
    background-position: center 17px;
    border-radius: 17px;
    cursor: pointer;
}
.s2overlay .carbtn2{
    width: 196px;
    height: 196px;
    position: absolute;
    top: 140px;
    left: 695px;
    background: #fff url(../images/carbtn2.png);
    background-repeat: no-repeat;
    background-position: center 34px;
    border-radius: 17px;
    cursor: pointer;
}

.s2overlay .carbtn1:hover,.s2overlay .carbtn2:hover{
    background-color: #ccc;
}

.s2overlay .txt1{
    width: 81px;
    height: 21px;
    position: absolute;
    top: 52px;
    left: 318px;
    background: url(../images/title1.png);
    font-size: 12px;
    font-weight: bold;
    line-height: 21px;
    text-indent: 21px;
}
.s2overlay .txt2{
    width: 244px;
    height: 28px;
    position: absolute;
    top: 72px;
    left: 317px;
    background: url(../images/text1.png);
    font-size: 14px;
    line-height: 28px;
    text-indent: 10px;
}

.s2overlay .carbtn1:before {
    content: "Unit 1";
    font-size: 20px;
    font-weight: bold;
    position: absolute;
    width: 100%;
    text-align: center;
    top: 155px;
}
.s2overlay .carbtn2:before {
    content: "Unit 2";
    font-size: 20px;
    font-weight: bold;
    position: absolute;
    width: 100%;
    text-align: center;
    top: 155px;
}
.screen2 .s2page3{display: none;}
.screen2 .s2page3.blue[data-car="1"]{
    width: 811px;
    height: 537px;
    position: absolute;
    top: -44px;
    left: -18px;
    background: url(../images/screen2/damage10001.png);
}
.screen2 .s2page3.blue[data-car="2"]{
    width: 800px;
    height: 664px;
    position: absolute;
    top: -168px;
    left: -18px;
    background: url(../images/screen2/damage10002.png);
}
.screen2 .s2page3.blue[data-car="3"]{
    width: 1401px;
    height: 606px;
    position: absolute;
    top: -130px;
    left: -308px;
    background: url(../images/screen2/damage10003.png);
}
.screen2 .s2page3.blue[data-car="4"]{
    width: 1007px;
    height: 831px;
    position: absolute;
    top: -331px;
    left: -137px;
    background: url(../images/screen2/damage10004.png);
}
.screen2 .s2page3.blue[data-car="5"]{
    width: 779px;
    height: 433px;
    position: absolute;
    top: -4px;
    left: -23px;
    background: url(../images/screen2/damage10005.png);
}
.screen2 .s2page3.green[data-car="1"]{
    width: 942px;
    height: 488px;
    position: absolute;
    top: -77px;
    left: -132px;
    background: url(../images/screen2/damage10006.png);
}
.screen2 .s2page3.green[data-car="2"]{
    width: 1819px;
    height: 978px;
    position: absolute;
    top: -134px;
    left: -83px;
    background: url(../images/screen2/damage10007.png);
}

.screen2 .s2page3.green[data-car="3"]{
    width: 999px;
    height: 825px;
    position: absolute;
    top: -316px;
    left: -130px;
    background: url(../images/screen2/damage10008.png);
}
.screen2 .s2page3.green[data-car="4"]{
    width: 898px;
    height: 595px;
    position: absolute;
    top: -77px;
    left: -26px;
    background: url(../images/screen2/damage10009.png); 
}
.screen2 .s2page3.green[data-car="5"]{
    width: 1059px;
    height: 463px;
    position: absolute;
    top: -32px;
    left: -292px;
    background: url(../images/screen2/damage10010.png);
}

.s2page4 .txt1{
    width: 81px;
    height: 21px;
    position: absolute;
    top: 10px;
    left: 130px;
    background: url(../images/title1.png);
    font-size: 12px;
    font-weight: bold;
    line-height: 21px;
    text-indent: 21px;
}
.s2page4 .txt2{
    width: 584px;
    height: 61px;
    position: absolute;
    top: 31px;
    left: 130px;
    background: url(../images/text2.png) no-repeat;
    font-size: 14px;
    line-height: 19px;
    padding-left: 13px
}

.screen2 .s2page4{
    width:100%;
    height:100%;
    position: absolute;
    top:0px;
    left:0px;
    display: none;
}
.screen2 .s2page4 .carMenu {
    position: absolute;
    background: white;
    width: 80px;
    height: 29px;
    line-height: 29px;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    font-family: arial;
    top: 350px;
    left: 185px;
    cursor: pointer;
}
.screen2 .s2page4 .carMenu.carMenu2{ 
    left: 265px;
}
.screen2 .s2page4 .carMenu.carMenu3{ 
    left: 345px;
}
.screen2 .s2page4 .carMenu.carMenu4{ 
    left: 425px;
}
.screen2 .s2page4 .carMenu.carMenu5{ 
    left: 505px;
}
.screen2 .s2page4 .carMenu:hover {
    background-color: #ffe5e0;
}

.continueBtn2{
    top: 350px;
    left: 603px;
}
.selectedCar{
    width:82px;
    height:82px;
    position: absolute;
    top: 317px;
    left: 80px;
    background-color: white;
    border-radius: 10px;
    cursor: pointer;
}
.selectedCar .scar.blue{
    width: 64px;
    height: 59px;
    background: url(../images/carbtn1.png) no-repeat;
    background-size: 100%;
    position: absolute;
    left: 9px;
    top: 5px;
}
.selectedCar .scar.green{
    width: 64px;
    height: 59px;
    background: url(../images/carbtn2.png) no-repeat;
    background-size: 100%;
    position: absolute;
    left: 9px;
    top: 13px;
}
.selectedCar .scar.blue:after{
    content: "Unit 1";
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    top: 54px;
}
.selectedCar .scar.green:after{
    content: "Unit 2";
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    top: 46px;
}
.selectedCar:hover{
    background-color: #ccc;
}
.s2page4 .leftSide,.s2page4 .leftSide1{
    width:84px;
    height:43px;
    background: url(../images/msg3.png) no-repeat;
    position:absolute;
    font-size: 26px;
    line-height: 43px;
    text-align: center;
    top: 192px;
    left: 445px;
}
.s2page4 .leftSide1{
    left: 60px;
}
.s2page4 .rightSide,.s2page4 .rightSide1{
    width:84px;
    height:43px;
    background: url(../images/msg3.png) no-repeat;
    position:absolute;
    font-size: 26px;
    line-height: 43px;
    text-align: center;
    top: 192px;
    left: 40px;
}
.s2page4 .rightSide1{
    left: 490px;
}
.screen2 .s2page5{
    width: 1069px;
    height: 668px;
    position: absolute;
    top: -34px;
    left: -287px;
    background: url(../images/screen2/img1.png);
    display: none;
}
.screen2 .s2page7{
    width: 1069px;
    height: 668px;
    position: absolute;
    top: -34px;
    left: -287px;
    background: url(../images/screen2/img1.png);
    display: none;
}
.screen2 .s2page6{
    width: 869px;
    height: 510px;
    position: absolute;
    top: -60px;
    left: -80px;
    background: url(../images/screen2/img3.png);
    display: none;
}


.screen2 .s2page5 .quiz1{
    width: 420px;
    height: 503px;
    position: absolute;
    top: 49px;
    left: 588px;
    background: url(../images/quiz.png);
}

.s2page5 .question1{
    font-size: 20px;
    position: absolute;
    top: 70px;
    left: 25px;
    letter-spacing: 1px;
    width: 320px;
    padding-left: 32px;
    border-bottom: 1px dashed;
    padding-bottom: 10px;
}
.s2page5 .question1:after {
    content: "Q:";
    position: absolute;
    left: 3px;
    top: 0px;
}
.s2page5 .option{
    font-size: 16px;
    position: absolute;
    left: 56px;
    letter-spacing: 1px;
    cursor: pointer;
    width: 345px;
}
.s2page5 .option1{ top: 147px;}
.s2page5 .option2{top: 195px;}
.s2page5 .option3{top: 243px;}
.s2page5 .option4{top: 272px;}
.s2page5 .option:hover{
    background-color: #d5dfea;
}
.s2page5 .option.option1:after {
    content: "A";
    position: absolute;
    left: -23px;
    top: 0px;
}
.s2page5 .option.option2:after {
    content: "B";
    position: absolute;
    left: -23px;
    top: 0px;
}
.s2page5 .option.option3:after {
    content: "C";
    position: absolute;
    left: -23px;
    top: 0px;
}
.s2page5 .option.option4:after {
    content: "D";
    position: absolute;
    left: -23px;
    top: 0px;
}
.s2page6 .txt1{
    width: 81px;
    height: 21px;
    position: absolute;
    top: 195px;
    left: 520px;
    background: url(../images/title1.png);
    font-size: 12px;
    font-weight: bold;
    line-height: 21px;
    text-indent: 21px;
   z-index: 1;
}
.s2page6 .textBox{
    width: 203px;
    height: 199px;
    position: absolute;
    top: 216px;
    left: 516px;
    background-color: #d5f2ff;
    border: 1px solid #336699;
    z-index: 1;
}
.s2page6 .textBox1{
    width: 235px;
    height: 80px;
    background: #ffffff;
    position: absolute;
    top: 67px;
    font-size: 15px;
    left: -29px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    border: 1px solid #f9c90a;
}
.s2page6 .txt3{
    font-size: 14px;
    position: absolute;
    left: 8px;
    top: 5px;
}
.s2page6 .txt4{
    font-size: 14px;
    position: absolute;
    left: 39px;
    top: 7px;
}
.s2page6 .txt5{
    font-size: 14px;
    position: absolute;
    top: 160px;
    left: 8px;
}
.continueBtn3{
    top: 427px;
    left: 515px;
}
.continueBtn4{
    top: 427px;
    left: 604px;
    display: none;
}
.textBox2 {
    width: 195px;
    height: 170px;
    position: absolute;
    top: 244px;
    left: 605px;
    background-color: #d5f2ff;
    border: 1px solid #336699;
    font-size: 14px;
    padding-left: 7px;
    padding-top: 5px;
    display: none;
}
.s2page6 .tipUnit1{
    width: 171px;
    height: 73px;
    position: absolute;
    top: 232px;
    left: 103px;
    background: url(../images/unit1.png);
    display: none;
}
.s2page6 .dragpoint{
    width: 16px;
    height: 16px;
    position: absolute;
    top: 393px;
    cursor: pointer;
    background: url(../images/point.png);
    
}
body.ipad .s2page6 .dragpoint{
    transform: scale(2);
}
.s2page6 .dragPoint1{
    left: 334px;
}
.s2page6 .dragPoint2{
    left: 434px;
}
.s2page6 .dragPoint3{
    left: 534px;
}

.s2page6 .dragLine{
    width: 98px;
    height: 10px;
    position: absolute;
    top: 396px;
    cursor: pointer;
    background: url(../images/dragbg.png);
    background-repeat: repeat-x;
    transform-origin: left center;
}
.s2page6 .dragLine1{left: 339px;}
.s2page6 .dragLine2{left: 445px;}
.s2page6 .s1h{
    width: 484px;
    height: 168px;
    position: absolute;
    top: 152px;
    background: url(../images/s1h/s1h0002.png);
    left: 202px;
}
.s2page6 .s1h.hover{
    background: url(../images/s1h/s1h0011.png);
}
.s2page6 .s1h.clicked{
    background: url(../images/sprite3.png);
    animation: s1h 0.4s steps(8) forwards;
}
@keyframes s1h {0%{background-position: 0 0;}100%{background-position: 0 -1344px;}}
.s2page6 .s2h{
    width: 486px;
    height: 209px;
    position: absolute;
    top: 167px;
    background: url(../images/s2h/s2h0002.png);
    left: 184px;
}
.s2page6 .s2h.hover{
    background: url(../images/s2h/s2h0011.png);
}

.s2page6 .s2h.clicked{
    background: url(../images/sprite4.png);
    animation: s2h 0.4s steps(8) forwards;
}
@keyframes s2h {0%{background-position: 0 0;}100%{background-position: 0 -1672px; }}

.highlighter1{
    width: 243px;
    height: 212px;
    position: absolute;
    top: 1px;
    background: url(../images/add/img1.png);
    left: 1px;
    display: none;
}
.highlighter3{
    width: 243px;
    height: 212px;
    position: absolute;
    top: 1px;
    background: url(../images/add/img1.png);
    left: 246px;
    background-position: -243px -212px;
    display: none;
}
.highlighter2{
    width: 230px;
    height: 190px;
    position: absolute;
    top: -15px;
    background: url(../images/add/img2.png);
    left: 52px;
    display: none;
}
.highlighter4{
    width: 230px;
    height: 190px;
    position: absolute;
    top: -8px;
    background: url(../images/add/img2.png);
    left: 281px;
    background-position: -275px -183px;
    display: none;
}





.s2page6 .s3h{
    width: 384px;
    height: 89px;
    position: absolute;
    top: 176px;
    background: url(../images/s3h/s3h0002.png);
    left: 366px;
}
.s2page6 .s3h.hover{
    background: url(../images/s3h/s3h0011.png);
}
.s2page6 .s3h.clicked{
    background: url(../images/sprite5.png);
    animation: s3h 0.4s steps(8) forwards;
}
@keyframes s3h {0%{background-position: 0 0;}100%{background-position: 0 -712px; }}

.s2page6 .s4h{
    width: 492px;
    height: 212px;
    position: absolute;
    top: 193px;
    background: url(../images/s4h/s4h0002.png);
    left: 203px;
}
.s2page6 .s4h.hover{
    background: url(../images/s4h/s4h0011.png);
}
.s2page6 .s4h.clicked{
    background: url(../images/sprite6.png);
    animation: s4h 0.4s steps(8) forwards;
}
@keyframes s4h {0%{background-position: 0 0;}100%{background-position: 0 -1696px;}}


.s2page6 .s5h{
    width: 75px;
    height: 39px;
    position: absolute;
    top: 193px;
    cursor: pointer;
    background: url(../images/s5h/s5h0002.png);
    left: 687px;
}
.s2page6 .s5h:hover{
    background: url(../images/s5h/s5h0011.png);
}
.s2page6 .s5h.active{
    background: url(../images/add/s5h.png);
    background-size:100% 100%; 
}
.s2page6 .s6h{
    width: 63px;
    height: 83px;
    position: absolute;
    top: 153px;
    cursor: pointer;
    background: url(../images/s6h/s6h0002.png);
    left: 734px;
}
.s2page6 .s6h:hover{
    background: url(../images/s6h/s6h0010.png);
}
.s2page6 .s7h{
    width: 55px;
    height: 54px;
    position: absolute;
    top: 207px;
    cursor: pointer;
    background: url(../images/s7h/s7h0002.png);
    left: 742px
}
.s2page6 .s7h:hover{
    background: url(../images/s7h/s7h0010.png);
}

.s2page6 .s1hhoverEle{
    width: 271px;
    height: 10px;
    position: absolute;
    opacity: 0.5;
    transform: rotate(-25deg);
    top: 245px;
    left:202px;
    cursor: pointer;
}
.s2page6 .s1hhoverEle1{
    width: 251px;
    height: 10px;
    position: absolute;
    opacity: 0.5;
    transform: rotate(-7deg);
    top: 176px;
    left: 438px;
    cursor: pointer;
}

.s2page6 .s2hhoverEle{
    width: 252px;
    height: 10px;
    position: absolute;
    cursor: pointer;
    opacity: 0.5;
    transform: rotate(-25deg);
    top: 258px;
    left: 227px;
}

.s2page6 .s2hhoverEle1{
    width: 184px;
    height: 10px;
    position: absolute;
   cursor: pointer;
    opacity: 0.5;
    transform: rotate(-9deg);
    top: 189px;
    left: 465px;
}

.s2page6 .s3hhoverEle{
    width: 265px;
    height: 10px;
    position: absolute;
    cursor: pointer;
    opacity: 0.5;
    transform: rotate(-9deg);
    top: 198px;
    left: 466px;
}

.s2page6 .s4hhoverEle{
    width: 255px;
    height: 10px;
    position: absolute;
    cursor: pointer;
    opacity: 0.5;
    transform: rotate(-25deg);
    top: 284px;
    left: 246px;
}

.s2page6 .s4hhoverEle1{
    width: 197px;
    height: 10px;
    position: absolute;
    cursor: pointer;
    opacity: 0.5;
    transform: rotate(-7deg);
    top: 214px;
    left: 490px;
}
.dragdrop {
    display: none;
}
.s2page6 .tipUnit2{
    width: 207px;
    height: 67px;
    position: absolute;
    top: 307px;
    cursor: pointer;
    background: url(../images/unit2.png);
    left: 332px;
    display: none;
}
.s2page6 .tipUnit3{
    width: 125px;
    height: 116px;
    position: absolute;
    top: 287px;
    cursor: pointer;
    background: url(../images/green.png);
    left: 176px;
    display: none;
}
.s2page6 .h{
    width: 28px;
    height: 30px;
    position: absolute;
    top: 326px;
    cursor: pointer;
    background: url(../images/h.png);
    left: 176px;
    display: none;
}
.s2page6 .g{
    width: 28px;
    height: 30px;
    position: absolute;
    top: 370px;
    cursor: pointer;
    background: url(../images/g.png);
    left: 215px;
    display: none;
}
.s2page6 .j{
    width: 28px;
    height: 28px;
    position: absolute;
    top: 210px;
    cursor: pointer;
    background: url(../images/j.png);
    left: 413px;
    color: white;
    line-height: 28px;
    text-align: center;
    font-size: 19px;
    display: none;
}

.dragAni1{
    animation:dragAni1 1.5s linear infinite ;
}
@keyframes dragAni1 {
    0%{left: 334px;top: 393px;}
    10%{left: 334px;top: 393px;}
    90%{left: 180px;top: 335px;}
    100%{left: 180px;top: 335px;}
}
.dragAni2{
    animation:dragAni2 1.5s linear infinite ;
}
@keyframes dragAni2 {
    0%{left: 434px;top: 393px;}
    10%{left: 434px;top: 393px;}
    90%{left: 310px;top: 265px;}
    100%{left: 310px;top: 265px;}
}
.dragAni3{
    animation:dragAni3 1.5s linear infinite ;
}
@keyframes dragAni3 {
    0%{left: 534px;top: 393px;}
    10%{left: 534px;top: 393px;}
    90%{left: 415px;top: 215px;}
    100%{left: 415px;top: 215px;}
}
.s2page6 .listBox {
    width: 350px;
    height: 222px;
    position: absolute;
    background: white;
    border: 2px solid #666;
    border-radius: 31px;
    top: 85px;
    left: 464px;
    display: none;
}
.s2page6 .listBox ol li {
    padding-top: 17px;
}
.s2page6 .listBox p {
    position: absolute;
    bottom: 14px;
    left: 38px;
    padding: 0px;
    margin: 0px;
}
.continueBtn.continueBtn5 {
    top: 185px;
    left: 208px;
}
.s2page6 .listBox .headingText {
    font-weight: bold;
    position: absolute;
    top: 7px;
    left: 100px;
}
.s2page6 .label1 {
    font-size: 21px;
    width: 100%;
    text-align: center;
    text-shadow: 1px 0px 0px white;
    position: relative;
    top: -25px;
}

.s2page6 .textBox3{
    width: 195px;
    height: 133px;
    position: absolute;
    top: 276px;
    left: 609px;
    background-color: #d5f2ff;
    border: 1px solid #336699;
    font-size: 14px;
    padding-left: 7px;
    padding-top: 5px;
}
.s2page6 .textBox4{
    width: 235px;
    height: 71px;
    background: #ffffff;
    position: absolute;
    top: 7px;
    font-size: 15px;
    left: -29px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    border: 1px solid #f9c90a;
   
}
.s2page6 .textBox4 .txt4 {
    font-size: 14px;
    position: absolute;
    left: 30px;
    top: 2px;
}
.continueBtn.continueBtn6{
    top: 430px;
    left: 607px;
}
.s2page6 .textBox4:after {
    content: "!";
    position: absolute;
    color: red;
    font-size: 40px;
    top: 13px;
    left: 10px;
}



.screen2 .s2page7 .quiz1{
    width: 420px;
    height: 503px;
    position: absolute;
    top: 49px;
    left: 588px;
    background: url(../images/quiz.png);
}
.s2page7 .question1{
    font-size: 20px;
    position: absolute;
    top: 70px;
    left: 25px;
    letter-spacing: 1px;
    width: 320px;
    padding-left: 32px;
    border-bottom: 1px dashed;
    padding-bottom: 10px;
}
.s2page7 .question1:after {
    content: "Q:";
    position: absolute;
    left: 3px;
    top: 0px;
}
.s2page7 .option{
    font-size: 16px;
    position: absolute;
    left: 56px;
    letter-spacing: 1px;
    cursor: pointer;
    width: 345px;
}
.s2page7 .option1{top: 187px;}
.s2page7 .option2{top: 228px;}
.s2page7 .option3{top: 273px;}
.s2page7 .option4{top: 336px;}
.s2page7 .option:hover{
    background-color: #d5dfea;
}
.s2page7 .option.option1:after {
    content: "A";
    position: absolute;
    left: -23px;
    top: 0px;
}
.s2page7 .option.option2:after {
    content: "B";
    position: absolute;
    left: -23px;
    top: 0px;
}
.s2page7 .option.option3:after {
    content: "C";
    position: absolute;
    left: -23px;
    top: 0px;
}
.s2page7 .option.option4:after {
    content: "D";
    position: absolute;
    left: -23px;
    top: 0px;
}


.s2page6 .textBox5{
    width: 195px;
    height: 104px;
    position: absolute;
    top: 300px;
    left: 609px;
    background-color: #d5f2ff;
    border: 1px solid #336699;
    font-size: 14px;
    padding-left: 7px;
    padding-top: 5px;
    display: none;
}
.s2page6 .textBox6{
    width: 235px;
    height: 71px;
    background: #ffffff;
    position: absolute;
    top: 7px;
    font-size: 15px;
    left: -29px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    border: 1px solid #f9c90a;
}
.s2page6 .textBox6 .txt4 {
    font-size: 14px;
    position: absolute;
    left: 30px;
    top: 2px;
}
.continueBtn.continueBtn7{
    top: 115px;
    left: -2px;
}
.s2page6 .textBox6:after {
    content: "!";
    position: absolute;
    color: red;
    font-size: 40px;
    top: 13px;
    left: 10px;
}
.s2page6 .txt11 {
    width: 81px;
    height: 21px;
    position: absolute;
    top: -22px;
    left: -1px;
    background: url(../images/title1.png);
    font-size: 12px;
    font-weight: bold;
    line-height: 21px;
    text-indent: 21px;
}


.s2page6 .textBox7,.s2page6 .textBox8,.s2page6 .textBox9{
    width: 195px;
    height: 65px;
    position: absolute;
    top: 270px;
    left: 456px;
    background-color: #d5f2ff;
    border: 1px solid #336699;
    font-size: 14px;
    padding-left: 7px;
    padding-top: 5px;
    display: none;
}




.s2page6 .textBox7 .carbtn3{
    width: 85px;
    height: 85px;
    position: absolute;
    top: 80px;
    left: 3px;
    background: #fff url(../images/carbtn1.png);
    background-repeat: no-repeat;
    background-position: center 7px;
    border-radius: 8px;
    cursor: pointer;
    background-size: 70%;
}
.s2page6 .textBox7 .carbtn4{
    width: 85px;
    height: 85px;
    position: absolute;
    top: 80px;
    left: 109px;
    background: #fff url(../images/carbtn2.png);
    background-repeat: no-repeat;
    background-position: center 15px;
    border-radius: 8px;
    cursor: pointer;
    background-size: 70%;
}

.s2page6 .textBox7 .carbtn3:hover,.s2page6 .textBox7 .carbtn4:hover{
    background-color: #ccc;
}

.s2page6 .textBox7 .carbtn3:before {
    content: "Unit 1";
    font-size: 17px;
    font-weight: bold;
    position: absolute;
    width: 100%;
    text-align: center;
    top: 59px;
}
.s2page6 .textBox7 .carbtn4:before {
    content: "Unit 2";
    font-size: 17px;
    font-weight: bold;
    position: absolute;
    width: 100%;
    text-align: center;
    top: 59px;
}

.screen2 .s2page6 .quiz1{
    width: 420px;
    height: 503px;
    position: absolute;
    top: 68px;
    left: 103px;
    background: url(../images/quiz.png);
    display: none;
}
.s2page6 .question1{
    font-size: 20px;
    position: absolute;
    top: 70px;
    left: 25px;
    letter-spacing: 1px;
    width: 320px;
    padding-left: 32px;
    border-bottom: 1px dashed;
    padding-bottom: 10px;
}
.s2page6 .question1:after {
    content: "Q:";
    position: absolute;
    left: 3px;
    top: 0px;
}
.s2page6 .option{
    font-size: 16px;
    position: absolute;
    left: 56px;
    letter-spacing: 1px;
    cursor: pointer;
    width: 345px;
}
.s2page6 .option1{top: 187px;}
.s2page6 .option2{top: 235px;}
.s2page6 .option3{top: 285px;}
.s2page6 .option4{top: 336px;}
.s2page6 .option:hover{
    background-color: #d5dfea;
}
.s2page6 .option.option1:after {
    content: "A";
    position: absolute;
    left: -23px;
    top: 0px;
}
.s2page6 .option.option2:after {
    content: "B";
    position: absolute;
    left: -23px;
    top: 0px;
}
.s2page6 .option.option3:after {
    content: "C";
    position: absolute;
    left: -23px;
    top: 0px;
}
.s2page6 .option.option4:after {
    content: "D";
    position: absolute;
    left: -23px;
    top: 0px;
}

.screen3{
	z-index: 101;
    width: 750px;
    height: 410px;
    position: absolute;
    top: 0px;
    left: 0px;
    border: 5px solid black;
    overflow: hidden;
    display: none;
}
#video2{
    position: absolute;
    width: 757px;
    height: 425px;
    top: -8px;
    left: -5px
}

.screen3 .s3page1{
    width: 1838px;
    height: 684px;
    position: absolute;
    top: -127px;
    left: -400px;
    background: url(../images/screenBg.png);
    display: none;
}
.s3page1 .s2man{
    width: 580px;
    height: 885px;
    position: absolute;
    top: 115px;
    left: 258px;
    background: url(../images/Character_Sargent0001.png);
}
.s3page1 .s2man.ani1{
    background: url(../images/sprite19.png);
    background-position: -12760px 0;
    animation: s2manani3 3s 1s steps(22) forwards;
}
@keyframes s2manani3 {
    100%{background-position: 0 0;}
    0%{  background-position: -12760px 0;}
   
}
.s3page1 .s2man.ani3{
    background: url(../images/sprite19.png);
    background-position: 0 0;
    animation: s2manani4 2.5s 1s steps(22) forwards;
}
@keyframes s2manani4 {
    0%{background-position: 0 0;}
    100%{  background-position: -12760px 0;}
   
}
.s3page1 .s2man.ani2{
    background: url(../images/sprite13.png);
    animation: s2manani2 3s 1s steps(29) forwards;
}
@keyframes s2manani2 {
    0%{background-position: 0 0;}
    100%{ background-position: -16820px 0;}
    
}
.s3page1 .s2man .eye1{
    width: 54px;
    height: 38px;
    position: absolute;
    top: 105px;
    left: 244px;
    background: url(../images/m_eyes_010001.png);
    animation: eye1 5s linear infinite;
}
@keyframes eye1 {
    0%{background: url(../images/m_eyes_010001.png); }
    49%{background: url(../images/m_eyes_010001.png); }
    50%{background: url(../images/m_eyes_010006.png); }
    52%{background: url(../images/m_eyes_010006.png); }
    53%{background: url(../images/m_eyes_010001.png); }
    100%{background: url(../images/m_eyes_010001.png); }
    
}

.mouth1{
    width: 32px;
    height: 14px;
    position: absolute;
    top: 146px;
    left: 255px;
    background: url(../images/sprite11.png);
    
}
.mouth1.ani1{
    animation: mouth1 1s steps(11) infinite;
}
@keyframes mouth1 {
    0%{background-position: 0 0;}
    100%{background-position: -352px 0;}
    
}

.s3page1 .s3popup{
    width: 202px;
    height: 220px;
    position: absolute;
    top: 203px;
    left: 922px;
    background-color: #d5f2ff;
    border: 1px solid #336699;
    font-size: 14px;
    padding-left: 7px;
    padding-top: 5px;
}
.s3page1 .txt11 {
    width: 81px;
    height: 21px;
    position: absolute;
    top: -22px;
    left: -1px;
    background: url(../images/title1.png);
    font-size: 12px;
    font-weight: bold;
    line-height: 21px;
    text-indent: 21px;
}
.s3page1 .textBox6{
    width: 235px;
    height: 85px;
    background: #ffffff;
    position: absolute;
    top: 3px;
    font-size: 15px;
    left: -25px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    border: 1px solid #f9c90a;
}
.s3page1 .textBox6 .txt4 {
    font-size: 14px;
    position: absolute;
    left: 30px;
    top: 2px;
}
.continueBtn.continueBtn8{
    top: unset;
    left: -2px;
    bottom: -35px;
}
.s3page1 .textBox6:after {
    content: "!";
    position: absolute;
    color: red;
    font-size: 40px;
    top: 13px;
    left: 10px;
}
.screen3 .s3page2{
    width: 2142px;
    height: 1512px;
    position: absolute;
    top: -490px;
    left: -989px;
    background: url(../images/s3page21.png);
    display: none;
    transform: scale(.86);
    background-position: 14px -9px;
}

.s3page2 .s2man2{
    width: 654px;
    height: 517px;
    position: absolute;
    top: 494px;
    left: 1258px;
    background: url(../images/Interviewee0001.png);
    transform: scale(1.18);
}
.s3page2 .s2man2.talk1{
    background: url(../images/sprite9.png);
    background-position: -21582px 0;
    animation:talk 3s 2s steps(33) forwards;
}
@keyframes talk {
    100%{background-position: 0 0;}
    0%{ background-position: -21582px 0;}
}
.s3page2 .s2man2.talk2{
    width: 653px;
    height: 516px;
    background: url(../images/sprite14.png);
    background-position: 0 0;
    animation:talk2 2s 1s steps(34) forwards;
}
@keyframes talk2 {
    100%{background-position: 0 0;}
    0%{background-position: -22202px 0;}
}
#video10{
    width: 765px;
    height: 544px;
    position: absolute;
    top: -20px;
    left: 33px;
}
/* .s3page2 .s2man2.talk{
    animation:talk 4s steps(102) forwards;
}
@keyframes talk {
    0%{background-position: 0 0;}
    100%{ background-position: 0 -63240px;}
} */
.eye2{
    width: 52px;
    height: 37px;
    position: absolute;
    top: 68px;
    left: 333px;
    background: url(../images/i_eyes_010001.png);
    transform: scale(-1,1);
    animation: eye2 5s linear infinite;
}
@keyframes eye2 {
    0%{background: url(../images/i_eyes_010001.png); }
    49%{background: url(../images/i_eyes_010001.png); }
    50%{background: url(../images/i_eyes_010006.png); }
    52%{background: url(../images/i_eyes_010006.png); }
    53%{background: url(../images/i_eyes_010001.png); }
    100%{background: url(../images/i_eyes_010001.png); }
    
}


.mouth2{
    width: 39px;
    height: 33px;
    position: absolute;
    top: 112px;
    left: 338px;
    background: url(../images/sprite12.png);
    
}
.mouth2.ani1{
    animation: mouth2 1s steps(11) infinite;
}
@keyframes mouth2 {
    0%{background-position: 0 0;}
    100%{background-position: -429px 0;}
    
}


.s3page2 .continueBtn{
    top: 876px;
    left: 1698px;
    display: none;
}
.s3page1 .continueBtn:not(.continueBtn8) {
    top: 495px;
    left: 1008px;
    display: none;
}
.replayBtn {
    width: 111px;
    height: 29px;
    position: absolute;
    top: 876px;
    left: 998px;
    background: url(../images/replay0001.png);
    cursor: pointer;
    display: none;
    z-index: 10;
}
.replayBtn:hover{
    background: url(../images/replay0002.png);
}
.s3page1 .replayBtn{
    top: 494px;
    left: 417px;
}
.s3page2 .s2man2 .eye{
    width: 36px;
    height: 26px;
    position: absolute;
    top: 43px;
    left: 79px;
    background: url(../images/eye0001.png);
}
.s3page3{
    width: 799px;
    height: 599px;
    position: absolute;
    top: -47px;
    left: -39px;
    background: url(../images/img6.png);
    cursor: pointer;
    display: none;
}

.screen3 .s3page4{
    width: 2142px;
    height: 1512px;
    position: absolute;
    top: -535px;
    left: -474px;
    background: url(../images/s3page2.png);
    transform: scale(.790);
    display: none;
}
.screen3 .s3page4 .girls{
    width: 416px;
    height: 561px;
    position: absolute;
    top: 620px;
    left: 404px;
    background: url(../images/int20001.png);
    transform: scale(1.2);  
}
.gmouth{
    width: 28px;
    height: 17px;
    position: absolute;
    top: 105px;
    left: 133px;
    background: url(../images/sprite15.png); 
}
.gmouth.ani1{
    animation:gmouth 0.5s steps(6) infinite;
}
@keyframes gmouth {
    0%{background-position: 0 0; }
    100%{background-position: -168px 0;  }
}


.s3page4 .questionBox{
    width: 698px;
    height: 530px;
    position: absolute;
    top: 490px;
    left: 691px;
    background: url(../images/question.png);
    cursor: pointer;
    background-size: 100%;
    transform-origin: left top;
    transform: rotate(15deg);
    animation: ani11 0.75s linear forwards;
}
@keyframes ani11 {
    0%{top: 975px;left: 691px; transform: rotate(15deg);}
    100%{top: 490px;left: 691px; transform: rotate(0deg);}
}
.s3page4 .questionBox.back{
    animation: ani12 0.75s linear forwards;
}
@keyframes ani12 {
    100%{top: 975px;left: 691px; transform: rotate(15deg);}
    0%{top: 490px;left: 691px; transform: rotate(0deg);}
}
.s3page4 .question1{
    font-size: 18px;
    position: absolute;
    top: 84px;
    left: 37px;
    letter-spacing: 2px;
    width: 428px;
    padding-left: 3px;
    border-bottom: 1px dashed;
    padding-bottom: 3px;
}

.s3page4 .option{
    font-size: 16px;
    position: absolute;
    left: 56px;
    letter-spacing: 2px;
    cursor: pointer;
    width: 429px;
}
.s3page4 .option1{top: 128px;}
.s3page4 .option2{top: 162px;}
.s3page4 .option3{top: 195px;}
.s3page4 .option4{top: 229px;}
.s3page4 .option5{top: 262px;}
.s3page4 .option6{top: 313px;}
.s3page4 .option7{top: 346px;}
.s3page4 .option8{top: 398px;}
.s3page4 .option9{top: 430px;}
.s3page4 .option:hover{
    background-color: #d5dfea;
}
.s3page4 .option.option1:after {
    content: "1.";
    position: absolute;
    left: -23px;
    top: 0px;
}
.s3page4 .option.option2:after {
    content: "2.";
    position: absolute;
    left: -23px;
    top: 0px;
}
.s3page4 .option.option3:after {
    content: "3.";
    position: absolute;
    left: -23px;
    top: 0px;
}
.s3page4 .option.option4:after {
    content: "4.";
    position: absolute;
    left: -23px;
    top: 0px;
}
.s3page4 .option.option5:after {
    content: "5.";
    position: absolute;
    left: -23px;
    top: 0px;
}
.s3page4 .option.option6:after {
    content: "6.";
    position: absolute;
    left: -23px;
    top: 0px;
}
.s3page4 .option.option7:after {
    content: "7.";
    position: absolute;
    left: -23px;
    top: 0px;
}
.s3page4 .option.option8:after {
    content: "8.";
    position: absolute;
    left: -23px;
    top: 0px;
}
.s3page4 .option.option9:after {
    content: "9.";
    position: absolute;
    left: -23px;
    top: 0px;
}
.s3page4 .option:before {
    content: "";
    position: absolute;
}
.s3page4 .option.option1:before,.s3page4 .option.option2:before ,.s3page4 .option.option3:before,.s3page4 .option.option4:before,.s3page4 .option.option6:before,.s3page4 .option.option8:before     {
    width: 404px;
    height: 4px;
    left: 2px;
    top: 7px;
    background: url(../images/r1.png);
}
.s3page4 .option.option5:before{
    width: 401px;
    height: 22px;
    left: 2px;
    top: 7px;
    background: url(../images/r2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
} 
.s3page4 .option.option7:before,.s3page4 .option.option9:before{
    width: 387px;
    height: 22px;
    left: 2px;
    top: 7px;
    background: url(../images/r3.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
} 
.s3page4 .option:before{
    display: none;
}
.s3page4 .option.add:before{
    display: block;
}

.screen4{
	z-index: 101;
    width: 750px;
    height: 410px;
    position: absolute;
    top: 0px;
    left: 0px;
    border: 5px solid black;
    overflow: hidden;
    display: none;
}
.screen5{
	z-index: 101;
    width: 750px;
    height: 410px;
    position: absolute;
    top: 0px;
    left: 0px;
    border: 5px solid black;
    overflow: hidden;
    display: none;
}
.screen6{
	z-index: 101;
    width: 750px;
    height: 410px;
    position: absolute;
    top: 0px;
    left: 0px;
    border: 5px solid black;
    overflow: hidden;
    display: none;
}

.screen5 .s5page1{
    width: 750px;
    height: 410px;
    position: absolute;
    top: 0px;
    left: 0px;
    border: 5px solid black;
}
#video3{
    position: absolute;
    top: -7px;
    left: -3px;
}
.s5page2{
    width: 802px;
    height: 441px;
    position: absolute;
    top: -15px;
    left: -25px;
    background: url(../images/s5bg.png);
    display: none;
    transform: scale(1.005);
}
.s5page2 .board{
    width: 564px;
    height: 386px;
    position: absolute;
    top: 93px;
    left: 23px;
    background: url(../images/board.png);
}
.s5page2 .info1{
    width: 206px;
    height: 105px;
    position: absolute;
    top: 112px;
    left: 562px;
    background: url(../images/info1.png);
}
.s5page2 .info1 p{
    font-size: 14px;
    width: 164px;
    position: relative;
    left: 32px;
    top: -6px
}
.s5page2 .board .ques{
    position: absolute;
    width: 487px;
    height: 278px;
    top: 25px;
    left: 39px;
    display: none;
}
.s5page2 .board .ques1{
    display: block;
}
.s5page2 .board .ques .q1{
    position: relative;
    top: 9px;
    left: 10px;
    font-size: 16px;
    font-weight: bold;
    /* line-height: 35px; */
    border-bottom: 1px dotted;
    width: 465px;
    padding-bottom: 10px;
}

.s5page2 .board .ques .opt {
    position: relative;
    top: 10px;
    left: 13px;
    font-size: 16px;
    font-weight: bold;
    line-height: 23px;
    padding-left: 22px;
    cursor: pointer;
    color: #003366;
    margin-top: 4px;
    width: 441px;
}
.s5page2 .board .ques .opt:hover {
    background: #d8e1df;
}
.opt.opt1:after {
    content: "A.";
    position: absolute;
    left: 0px;
    top: 1px;
    color: black;
}
.opt.opt2:after {
    content: "B.";
    position: absolute;
    left: 0px;
    top: 1px;
    color: black;
}
.opt.opt3:after {
    content: "C.";
    position: absolute;
    left: 0px;
    top: 1px;
    color: black;
}
.opt.opt4:after {
    content: "D.";
    position: absolute;
    left: 0px;
    top: 1px;
    color: black;
}

.s5page2 .true{
    width: 159px;
    height: 129px;
    position: absolute;
    top: 112px;
    left: 190px;
    background: url(../images/true.png); 
    display: none;
}
.s5page2 .false{
    width: 129px;
    height: 129px;
    position: absolute;
    top: 112px;
    left: 190px;
    background: url(../images/false.png); 
    display: none;
}
.s5page3 {
    width: 780px;
    height: 502px;
    position: absolute;
    top: -63px;
    left: -14px;
    background: url(../images/s5bg1.png);
    display: none;
    overflow: hidden;
}
/* .s5page3.zoom {
    top: -37px;
    left: 102px;
    transform: scale(1.45);
}
.s5page3 .girlAni1{
    width: 384px;
    height: 744px;
    position: absolute;
    top: 117px;
    left: 70px;
    background: url(../images/sprite10.png);
    animation:girlAni1 3s steps(47) forwards;
}
@keyframes girlAni1 {
    0%{background-position: 0 0;}
    100%{ background-position: -18048px 0;}
}
.s5page3 .s5Man{
    width: 280px;
    height: 451px;
    position: absolute;
    top: 117px;
    left: 371px;
    background: url(../images/s5man.png);
} */

#video9{
    position: absolute;
    width: 763px;
    height: 508px;
    top: 14px;
    left: 12px;
}

.screen6 .s6page1{
    width: 748px;
    height: 407px;
    position: absolute;
    top: 1px;
    left: 0px;
    background: url(../images/s6bg.png);
    transform: scale(1.025);
}

.s6page1 .whatif{
    font-family: 'Conv_SHOWG';
    color: white;
    position: absolute;
    top: 142px;
    left: 271px;
    font-size: 50px;
}

.s6page1 .topSlide{
    width: 828px;
    height: 337px;
    position: absolute;
    top: -320px;
    left: -76px;
    background: url(../images/s6/img2.png);
    transform: scale(0.985);
    animation: topSlide 0.75s 3s linear forwards;
}
@keyframes topSlide {
    100%{top: -66px;}
    0%{top: -320px;}
}
.s6page1 .bottomSlide{
    width: 773px;
    height: 235px;
    position: absolute;
    top: 390px;
    left: -6px;
    background: url(../images/s6/img1.png);
}
.s6page1 .bottomSlide.ani1{
    top: 390px;
    left: -6px;
    animation: bottomSlide 0.75s 3s linear forwards;
}
@keyframes bottomSlide {
    0%{top: 390px;}
    100%{top: 183px;}
}
.s6page1 .bottomSlide.ani2{
    top: 183px;
    left: -6px;
    animation: bottomSlide1 0.4s 0.075s linear forwards;
}
@keyframes bottomSlide1 {
    0%{ top: 183px;}
    100%{top: 235px;}
}

.s6page1 .speedBtn{
    width: 177px;
    height: 177px;
    position: absolute;
    top: 30px;
    left: 730px;
    background: url(../images/s6/btn10001.png);
    cursor: pointer;
    z-index: 3;
}
.s6page1 .speedBtn.ani1{
    animation:speedBtn 0.75s 3.75s ease forwards;
}
@keyframes speedBtn {
    0%{left:730px}
    100%{left:80px}
}
.s6page1 .speedBtn:hover{
    background: url(../images/s6/btn10002.png);
}
.s6page1 .speedBtn:active{
    background: url(../images/s6/btn10003.png);
}

.s6page1 .seatbeltBtn{
    width: 177px;
    height: 177px;
    position: absolute;
    top: 30px;
    left: 730px;
    background: url(../images/s6/btn20001.png);
    cursor: pointer;
    z-index: 2;
}
.s6page1 .seatbeltBtn.ani1{
    animation:seatbeltBtn 0.75s 3.75s ease forwards;
}
@keyframes seatbeltBtn {
    0%{left:730px}
    100%{left:292px}
}
.s6page1 .seatbeltBtn:hover{
    background: url(../images/s6/btn20002.png);
}
.s6page1 .seatbeltBtn:active{
    background: url(../images/s6/btn20003.png);
}

.s6page1 .alcohalBtn{
    width: 177px;
    height: 177px;
    position: absolute;
    top: 30px;
    left: 730px;
    background: url(../images/s6/btn30001.png);
    cursor: pointer;
    z-index: 1;
}
.s6page1 .alcohalBtn.ani1{
    animation:alcohalBtn 0.75s 3.75s ease forwards;
}
@keyframes alcohalBtn {
    0%{left:730px}
    100%{left:508px}
}
.s6page1 .alcohalBtn:hover{
    background: url(../images/s6/btn30002.png);
}
.s6page1 .alcohalBtn:active{
    background: url(../images/s6/btn30003.png);
}
.screen6 .s6page1{
    width: 748px;
    height: 407px;
    position: absolute;
    top: 1px;
    left: 0px;
    transform: scale(1.025);
    background-color: white;
}

.screen6 .s6page1 .effect1{
    width:100%;
    height: 100%;
    position: absolute;
    top:0px;
    left: 0px;
    background-color: white;
    display: none;
}
#video4,#video5,#video6{
    width: 755px;
    position: absolute;
    left: 75px;
    top: 61px;
    height: 264px;
    display: none;
}

.screen6 .s6page2{
    width: 786px;
    height: 545px;
    position: absolute;
    top: -71px;
    left: -21px;
    background: url(../images/s6/page2bg.png);
    display: none;
}
.screen6 .s6page3{
    width: 784px;
    height: 545px;
    position: absolute;
    top: -73px;
    left: -21px;
    background: url(../images/s6/page3bg.png);
     display: none;
}
.screen6 .s6page4{
    width: 806px;
    height: 545px;
    position: absolute;
    top: -71px;
    left: -32px;
    background: url(../images/s6/page4bg.png);
    display: none;
}
.s6page2 .dragBg{
    width: 267px;
    height: 44px;
    position: absolute;
    top: 261px;
    left: 285px;
    background: url(../images/s6/dragbg.png);
}
.s6page2 .dragArea{
    width: 235px;
    height: 70px;
    position: absolute;
    top: 250px;
    left: 304px;
}
.s6page2 .dragArea .dragEle{
    width: 37px;
    height: 70px;
    position: absolute;
    top: 0px;
    cursor: pointer;
    left: 0px;
    background: url(../images/s6/slider.png);
}
.s6page2 .dragResult{
    font-size: 29px;
    color: white;
    position: absolute;
    left: 255px;
    width: 114px;
    top: 12px;
    font-family: arial;
}

.goBtn{
    width:85px;
    height: 45px;
    position: absolute;
    top: 257px;
    left: 676px;
    background: url(../images/s6/btngo0001.png);
    cursor: pointer;
}
.goBtn:hover{
    background: url(../images/s6/btngo0002.png);
}
.goBtn:active{
    background: url(../images/s6/btngo0003.png);
}
.s6Text{
    position: absolute;
    top: 338px;
    font-size: 14px;
    left: 33px;
    line-height: 17px;
}
.s6Car{
    width: 31px;
    height: 57px;
    position: absolute;
    top: 276px;
    left: 180px;
    background: url(../images/s6/car.png);
 
}
.s6Car[data-move="1"]{
    animation:s6car 0.3s 0.5s linear forwards;
    opacity: 0;
}
@keyframes s6car {
    0%{opacity:0;top:276px;}
    100%{opacity:1;top:250px;}
}
.s6Car[data-move="2"]{
    animation:s6car1 1s linear forwards;
    opacity: 1;
}
@keyframes s6car1 {
    0%{top:250px;}
    100%{top:150px;}
}

.s6line1,.s6line2{
    width: 500px;
    height: 6px;
    position: absolute;
    top: 171px;
    left: 215px;
    background: url(../images/s6/line.png);
    background-position: 500px 0px;
    background-repeat: no-repeat;
    animation:s6line1 1s linear forwards;
    display: none;
}
@keyframes s6line1 {
    0%{ background-position: 500px 0px;}
    100%{ background-position: 0px 0px;}
}
.yellocircle{
    width: 27px;
    height: 27px;
    position: absolute;
    top: -10px;
    left: -21px;
    background-color: yellow;
    border-radius: 50%;
    display: none;
}
.impact270{
    position: absolute;
    top: 127px;
    left: 394px;
    color: white;
    display: none;
}
.s6page2 .velocity{
    position: absolute;
    top: 245px;
    left: 268px;
    font-family: arial;
    font-weight: bold;
    display: none;
}
.s6page2 .thinkingdistance{
    position: absolute;
    top: 273px;
    left: 268px;
    font-family: arial;
    font-weight: bold;
    display: none;
}
.s6page2 .brakingdistance{
    position: absolute;
    top: 300px;
    left: 268px;
    font-family: arial;
    font-weight: bold;
    display: none;
}
.s6page2 .s6Text2{
    position: absolute;
    top: 338px;
    font-size: 14px;
    left: 33px;
    line-height: 17px;
    display: none;
}

.s6page2 .s6Text2 .continueBtn18{
    top: 40px;
    left: -1px;
}
.velocity span,.thinkingdistance span,.brakingdistance span{
    color:white;
}
.velocity1 span,.thinkingdistance1 span,.brakingdistance1 span{
    color:white;
}

.s6Text3{
    position: absolute;
    top: 338px;
    font-size: 14px;
    left: 33px;
    line-height: 17px;
    display: none;
}
.s6page2 .s6Text3 .continueBtn19{
    top: 75px;
    left: -1px;
}

.s6calculation1{
    width: 280px;
    height: 98px;
    position: absolute;
    top: 10px;
    left: 406px;
    background: url(../images/s6/v1.png);
}
.entry1{
    width: 76px;
    position: absolute;
    left: 175px;
    top: 24px;
    height: 31px;
    text-align: center;
    font-size: 20px;
    color: #ff6600;
}
.s6result1{
    position: absolute;
    top: 74px;
    left: 110px;
    font-size: 22px;
    font-weight: bold;
}






.s6Text4{
    position: absolute;
    top: 338px;
    font-size: 14px;
    left: 33px;
    line-height: 17px;
    display: none;
    width: 712px;
    height: 135px;
}
.s6page2 .s6Text4 .continueBtn20{
    top: 105px;
    left: -1px;
}

.s6calculation2{
    width: 326px;
    height: 101px;
    position: absolute;
    top: 10px;
    left: 406px;
    background: url(../images/s6/v2.png);
}
.entry2,.entry3{
    width: 76px;
    position: absolute;
    left: 99px;
    top: 24px;
    height: 31px;
    text-align: center;
    font-size: 20px;
    color: #ff6600;
}
.entry3{
    left: 221px;
    top: 24px;
}
.s6result2{
    position: absolute;
    top: 78px;
    left: 148px;
    font-size: 22px;
    font-weight: bold;
}


.s6Text5{
    position: absolute;
    top: 338px;
    font-size: 14px;
    left: 33px;
    line-height: 17px;
    display: none;
    width: 712px;
    height: 135px;
}
.s6page2 .s6Text5 .continueBtn21{
    top: 105px;
    left: -1px;
}

.s6calculation3{
    width: 317px;
    height: 154px;
    position: absolute;
    top: -14px;
    left: 406px;
    background: url(../images/s6/v3.png);
}
.entry4,.entry5,.entry6{
    width: 61px;
    position: absolute;
    left: 158px;
    top: 20px;
    height: 27px;
    text-align: center;
    font-size: 20px;
    color: #ff6600;
    /* display: none; */
}
.entry5{
    left: 140px;
    top: 64px;
}
.entry6{
    left: 231px;
    top: 64px;
}
.s6result3{
    position: absolute;
    top: 130px;
    left: 148px;
    font-size: 19px;
    font-weight: bold;
}

.s6Text6{
    position: absolute;
    top: 338px;
    font-size: 14px;
    left: 33px;
    line-height: 17px;
    display: none;
    width: 712px;
    height: 135px;
}
.continueBtn.continueBtn22 {
    top: 97px;
    left: -5px;
}
.continueBtn.continueBtn23 {
    top: 97px;
    left: 131px;
    width: 83px;
    background-size: 100% 100%;
}

.checkbox1{
    position: absolute;
    width: 139px;
    height: 26px;
    top: 274px;
    left: 229px;
    cursor: pointer;
}
.checkbox2{
    position: absolute;
    width: 144px;
    height: 26px;
    top: 274px;
    left: 402px;
    cursor: pointer;
}
.checkbox1.active,.checkbox2.active{
    background: url(../images/s6/dot.png);
    background-repeat: no-repeat;
    background-position: 7px 6px;
}

.s6page3Drag1{
    position: absolute;
    width: 227px;
    height: 70px;
    top: 140px;
    left: 87px;
}
.s6page3Drag2{
    position: absolute;
    width: 230px;
    height: 70px;
    top: 145px;
    left: 464px;
}

.s6page3 .dragEle{
    width: 37px;
    height: 70px;
    position: absolute;
    top: 0px;
    cursor: pointer;
    left: 0px;
    background: url(../images/s6/slider.png);
}
.dragVal1{
    position: absolute;
    font-size: 25px;
    left: 156px;
    top: 92px;
}
.dragVal2{
    position: absolute;
    font-size: 25px;
    left: 530px;
    top: 92px;
}
.goBtn2{
    top: 266px;
    left: 574px;
}

.s6Text7{
    position: absolute;
    top: 338px;
    font-size: 14px;
    left: 33px;
    line-height: 17px;
    display: none;
    width: 730px;
    height: 135px;
}
.seatbelt{
    position: absolute;
    background: white;
    width: 750px;
    height: 250px;
    top: 73px;
    left: 21px;
    display: none;
    overflow: hidden;
}

#video7{
    width: 785px;
    height: 254px;
    position: absolute;
    left: -16px;
    display: none;
}
#video8{
    width: 785px;
    height: 254px;
    position: absolute;
    left: -16px;
    display: none;
}
.dTest1{
    position: absolute;
    top: 10px;
    left: 15px;
}
.dTest2{
    position: absolute;
    top: 37px;
    left: 15px;
}
.dTest3{
    position: absolute;
    top: 63px;
    left: 15px;
}
.dTest4{
    position: absolute;
    top: 89px;
    left: 15px;
}
.dTest span{
    font-weight: bold;
}
.s6Text8{
    position: absolute;
    top: 338px;
    font-size: 14px;
    left: 33px;
    line-height: 17px;
    display: none;
    width: 730px;
    height: 135px;
}

.continueBtn.continueBtn24 {
    top: 97px;
    left: -5px;
}
.continueBtn.continueBtn25 {
    top: 97px;
    left: 131px;
    width: 83px;
    background-size: 100% 100%;
}

.drunksober{
    width: 197px;
    height: 26px;
    position: absolute;
    top: 279px;
    cursor: pointer;
    left: 360px;
    background: url(../images/s6/check.png);
}


.s6Text9,.s6Text10{
    position: absolute;
    top: 338px;
    font-size: 14px;
    left: 44px;
    line-height: 17px;
}

.drunk {
    position: absolute;
    width: 122px;
    height: 27px;
    line-height: 27px;
    text-indent: 34px;
    top:1px;
}
.sober {
    position: absolute;
    width: 122px;
    height: 27px;
    line-height: 27px;
    text-indent: 34px;
    left: 171px;
    top:1px;
}
.drunksober>div.active{
    background: url(../images/s6/dot.png);
    background-repeat: no-repeat;
    background-position: 7px 6px;
}
.goBtn3{
    top: 270px;
}
.s6mph {
    position: absolute;
    font-size: 27px;
    top: 238px;
    left: 363px;
    color: white;
    font-family: arial;
}




.impact320{
    position: absolute;
    top: 127px;
    left: 394px;
    color: white;
    display: none;
}
.s6page4 .velocity1{
    position: absolute;
    top: 245px;
    left: 325px;
    font-family: arial;
    font-weight: bold;
    display: none;
}
.s6page4 .thinkingdistance1{
    position: absolute;
    top: 273px;
    left: 325px;
    font-family: arial;
    font-weight: bold;
    display: none;
}
.s6page4 .brakingdistance1{
    position: absolute;
    top: 300px;
    left: 325px;
    font-family: arial;
    font-weight: bold;
    display: none;
}

.s6line2 {
    width: 457px;
    height: 6px;
    position: absolute;
    top: 182px;
    left: 265px;
    background: url(../images/s6/line.png);
    background-position: 500px 0px;
    background-repeat: no-repeat;
    animation: s6line1 1s linear forwards;
    display: none;
}
.s6Text10 {
    position: absolute;
    top: 338px;
    font-size: 14px;
    left: 44px;
    line-height: 17px;
    display: none;
    width: 711px;
    height: 132px;
}
.continueBtn26{
    top: 106px;
    left: -2px;
    display: none;
}





.s6Text11{
    position: absolute;
    top: 338px;
    font-size: 14px;
    left: 44px;
    line-height: 17px;
    display: none;
}
.s6page4 .s6Text11 .continueBtn27{
    top: 75px;
    left: -1px;
}

.s6calculation11{
    width: 280px;
    height: 98px;
    position: absolute;
    top: 10px;
    left: 406px;
    background: url(../images/s6/v1.png);
}
.entry11{
    width: 76px;
    position: absolute;
    left: 175px;
    top: 24px;
    height: 31px;
    text-align: center;
    font-size: 20px;
    color: #ff6600;
}
.s6result11{
    position: absolute;
    top: 74px;
    left: 110px;
    font-size: 22px;
    font-weight: bold;
}







.s6Text12{
    position: absolute;
    top: 338px;
    font-size: 14px;
    left: 44px;
    line-height: 17px;
    display: none;
    width: 712px;
    height: 135px;
}
.s6page4 .s6Text12 .continueBtn28{
    top: 105px;
    left: -1px;
}

.s6calculation21{
    width: 326px;
    height: 101px;
    position: absolute;
    top: 10px;
    left: 406px;
    background: url(../images/s6/v2.png);
}
.entry21,.entry31{
    width: 76px;
    position: absolute;
    left: 99px;
    top: 24px;
    height: 31px;
    text-align: center;
    font-size: 20px;
    color: #ff6600;
}
.entry31{
    left: 221px;
    top: 24px;
}
.s6result21{
    position: absolute;
    top: 78px;
    left: 148px;
    font-size: 22px;
    font-weight: bold;
}








.s6Text13{
    position: absolute;
    top: 338px;
    font-size: 14px;
    left: 44px;
    line-height: 17px;
    display: none;
    width: 712px;
    height: 135px;
}
.s6page4 .s6Text13 .continueBtn29{
    top: 105px;
    left: -1px;
}

.s6calculation31{
    width: 317px;
    height: 154px;
    position: absolute;
    top: -14px;
    left: 406px;
    background: url(../images/s6/v3.png);
}
.entry41,.entry51,.entry61{
    width: 61px;
    position: absolute;
    left: 158px;
    top: 20px;
    height: 27px;
    text-align: center;
    font-size: 20px;
    color: #ff6600;
    /* display: none; */
}
.entry51{
    left: 140px;
    top: 64px;
}
.entry61{
    left: 231px;
    top: 64px;
}
.s6result31{
    position: absolute;
    top: 130px;
    left: 148px;
    font-size: 19px;
    font-weight: bold;
}

.s6Text14{
    position: absolute;
    top: 338px;
    font-size: 14px;
    left: 44px;
    line-height: 17px;
    display: none;
    width: 712px;
    height: 135px;
}
.continueBtn.continueBtn30 {
    top: 97px;
    left: -5px;
}
.continueBtn.continueBtn31 {
    top: 97px;
    left: 131px;
    width: 83px;
    background-size: 100% 100%;
}

.cDriver{
    position: absolute;
    top: 94px;
    left: 270px;
    font-weight: bold;
    display: none;
}
.cDriver span{
    color: white;
}


.screen4Info{
    width: 195px;
    padding-bottom: 5px;
    position: absolute;
    top: 56px;
    left: 456px;
    background-color: #d5f2ff;
    border: 1px solid #336699;
    font-size: 14px;
    padding-left: 7px;
    padding-top: 5px;
    display: none;
    z-index: 1;
}
.screen4Info .txt11 {
    width: 81px;
    height: 21px;
    position: absolute;
    top: -22px;
    left: -1px;
    background: url(../images/title1.png);
    font-size: 12px;
    font-weight: bold;
    line-height: 21px;
    text-indent: 21px;
}

.screen.screen4 .continueBtn {
    left: -2px;
    top: unset;
    bottom: -35px;
}
#video15,#video16,#video17,#video18,#video19,#video20,#video21,#video22,#video23,#video24,#video26,#video27{
    width: 759px;
    height: 557px;
    position: absolute;
    left: -3px;
    z-index: 1;
    top: -73px;
    display: none;
}

.s4page1{
    width: 758px;
    height: 416px;
    position: absolute;
    top: -1px;
    left: -1px;
    background: url(../images/s4/bg.png);
    overflow: hidden;
    display: none;
    z-index: 1;
    transform: scale(1.02);
}
.s4page2{
    width: 756px;
    height: 418px;
    position: absolute;
    top: -1px;
    left: -1px;
    background: url(../images/s4/bg1.png);
    overflow: hidden;
    display: none;
    z-index: 1;
    transform: scale(1.02);
}


.screen4 .textBox6{
    width: 235px;
    height: 71px;
    background: #ffffff;
    position: absolute;
    top: 102px;
    font-size: 15px;
    left: -29px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    border: 1px solid #f9c90a;
}
.screen4 .textBox6 .txt4 {
    font-size: 14px;
    position: absolute;
    left: 30px;
    top: 2px;
}

.screen4 .textBox6:after {
    content: "!";
    position: absolute;
    color: red;
    font-size: 40px;
    top: 13px;
    left: 10px;
}

.screen4Info3{
    top: 33px;
    left: 524px;
    padding-bottom: 90px;
}



.s4page1 .dragLine{
    width: 98px;
    height: 10px;
    position: absolute;
    top: 337px;
    cursor: pointer;
    background: url(../images/dragbg.png);
    background-repeat: repeat-x;
    transform-origin: left center;
}
.s4page1 .dragLine1{left: 149px;}
.s4page1 .dragLine2{left: 255px;}

.s4page1 .dragpoint{
    width: 16px;
    height: 16px;
    position: absolute;
    top: 335px;
    cursor: pointer;
    background: url(../images/point.png);
}
body.ipad .s4page1 .dragpoint{
    transform: scale(2);
}
.s4page1 .dragPoint1{
    left: 144px;
}
.s4page1 .dragPoint2{
    left: 244px;
}
.s4page1 .dragPoint3{
    left: 344px;
}

.s4page1 .label1 {
    font-size: 21px;
    width: 100%;
    text-align: center;
    text-shadow: 1px 0px 0px white;
    position: relative;
    top: -25px;
}
.continueBtn.continueBtn35,.continueBtn.continueBtn37{
    left: 590px !important;
    top: unset;
    bottom: 43px !important;
    display: none;
}
.screen4Info.screen4Info4 {
    top: 33px;
    left: 524px;
    padding-bottom: 90px;
}






.s4page2 .dragLine{
    width: 98px;
    height: 10px;
    position: absolute;
    top: 337px;
    cursor: pointer;
    background: url(../images/dragbg.png);
    background-repeat: repeat-x;
    transform-origin: left center;
}
.s4page2 .dragLine1{left: 149px;}
.s4page2 .dragLine2{left: 255px;}

.s4page2 .dragpoint{
    width: 16px;
    height: 16px;
    position: absolute;
    top: 335px;
    cursor: pointer;
    background: url(../images/point.png);
}
body.ipad .s4page2 .dragpoint{
    transform: scale(2);
}
.s4page2 .dragPoint1{
    left: 144px;
}
.s4page2 .dragPoint2{
    left: 244px;
}
.s4page2 .dragPoint3{
    left: 344px;
}

.s4page2 .label1 {
    font-size: 21px;
    width: 100%;
    text-align: center;
    text-shadow: 1px 0px 0px white;
    position: relative;
    top: -25px;
}

.screen4Info5{
    top: 56px;
    left: 526px;
    padding-top: 47px;
}
.s4page2 .screen4Info5 .textBox6{
    height: 42px;
    top: -1px;
}
.s4page2 .screen4Info5 .textBox6:after{
    top:0px;
}

.s4page3{
    width: 814px;
    height: 471px;
    position: absolute;
    top: -32px;
    left: -30px;
    background: url(../images/s4/img1.png);
    background-size: 100% 100%;
    overflow: hidden;
    display: none;
    z-index: 1;
}


.s4page3 .input,.s4page4 .input{
    position: absolute;
    top: 278px;
    left: 352px;
    width: 75px;
    height: 28px;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
}
.s4page3 .input1{
        
    left: 352px;
}
.s4page3 .input2{
    left: 437px;
}
.s4page3 .input3{
    left: 522px;
}
.s4page3 .speedCalc{
    position: absolute;
    top: 335px;
    left: 330px;
    font-weight: bold;
}
.s4page3 .speedResult{
    position: absolute;
    top: 377px;
    left: 330px;
    font-weight: bold;
}
input:focus {
    outline: 0px;
}
.continueBtn.continueBtn40 {
    left: 609px !important;
    top: unset;
    bottom: 73px !important;
    display: none;
}
.continueBtn.continueBtn41,.continueBtn.continueBtn42 {
    left: 584px !important;
    top: unset;
    bottom: 47px !important;
    display: none;
}

.s4page4{
    width: 754px;
    height: 417px;
    position: absolute;
    top: -1px;
    left: -1px;
    background: url(../images/s4/img2.png);
    background-size: 100% 100%;
    overflow: hidden;
    display: none;
    z-index: 1;
}
.s4page4 .input4{ 
    left: 335px;
    top: 242px;
    width: 76px;
}
.s4page4 .input5{ 
    left: 423px;
    top: 242px;
    width: 76px;
}
.s4page4 .speedCalc1{
    position: absolute;
    top: 297px;
    left: 322px;
    font-weight: bold;
}
.s4page4 .speedResult1 {
    position: absolute;
    top: 338px;
    left: 321px;
    font-weight: bold;
}

.rText{
    width: 616px;
    height: 44px;
    position: absolute;
    top: 111px;
    left: 86px;
    background: white;
    display: none;
}
.rText.text{
    background: white url(../images/s4/img3.png);
}

.continueBtn.continueBtn43 ,.continueBtn.continueBtn44{
    left: 584px !important;
    top: unset;
    bottom: 47px !important;
}



.s4page5{
    width: 833px;
    height: 595px;
    position: absolute;
    top: -95px;
    left: -8px;
    background: url(../images/s4/img4.png);
    background-size: 100% 100%;
    overflow: hidden;
    display: none;
    z-index: 1;
}





.screen4 .s4page5 .quiz1{
    width: 420px;
    height: 503px;
    position: absolute;
    top: 116px;
    left: 283px;
    background: url(../images/quiz.png);
}
.screen4 .s4page5 .quiz1.hide{
    animation: quiz1hide 1s linear forwards;
}
@keyframes  quiz1hide{
    0%{ top: 116px;transform: rotate(0deg);}
    100%{ top: 535px;transform: rotate(15deg);}
}

.s4page5 .question1{
    font-size: 18px;
    position: absolute;
    top: 70px;
    left: 25px;
    letter-spacing: 1px;
    width: 340px;
    padding-left: 32px;
    border-bottom: 1px dashed;
    padding-bottom: 10px;
}
.s4page5 .question1:after {
    content: "Q:";
    position: absolute;
    left: 3px;
    top: 0px;
}
.s4page5 .option{
    font-size: 15px;
    position: absolute;
    left: 56px;
    letter-spacing: 1px;
    cursor: pointer;
    width: 345px;
}
.s4page5 .option1{ top: 147px;}
.s4page5 .option2{top: 180px;}
.s4page5 .option3{top: 228px;}
.s4page5 .option4{top: 272px;}

.s4page5 .option:hover{
    background-color: #d5dfea;
}
.s4page5 .option.option1:after {
    content: "A";
    position: absolute;
    left: -23px;
    top: 0px;
}
.s4page5 .option.option2:after {
    content: "B";
    position: absolute;
    left: -23px;
    top: 0px;
}
.s4page5 .option.option3:after {
    content: "C";
    position: absolute;
    left: -23px;
    top: 0px;
}
.s4page5 .option.option4:after {
    content: "D";
    position: absolute;
    left: -23px;
    top: 0px;
}

.girlAni{
    width: 310px;
    height: 527px;
    position: absolute;
    top: 114px;
    left: 50px;
    background: url(../images/sprite17.png);
    z-index: 2;
    animation:girlAni 5s 1s steps(48) forwards;
}

@keyframes girlAni {
    0%{background-position: 0px 0px;}
    100%{background-position: -14880px 0px;}
}

.girlAni .eye3{
    width: 64px;
    height: 26px;
    position: absolute;
    background: url(../images/tro_eyes0001.png);
    transform: scale(.6);
    top: 62px;
    left: 91px;
    animation: eye31 5s linear infinite;
}
@keyframes eye31 {
    0%{background: url(../images/tro_eyes0001.png); }
    49%{background: url(../images/tro_eyes0001.png); }
    50%{background: url(../images/tro_eyes0017.png); }
    52%{background: url(../images/tro_eyes0017.png); }
    53%{background: url(../images/tro_eyes0001.png); }
    100%{background: url(../images/tro_eyes0001.png); }   
}

.girlAni .mouth3{
    width: 25px;
    height: 15px;
    position: absolute;
    top: 91px;
    left: 111px;
    background: url(../images/sprite16.png);
    transform: scale(0.8);
    
}
.girlAni .mouth3.ani1{
    animation: mouth31 0.8s steps(6) infinite;
}
@keyframes mouth31 {
    0%{background-position: 0 0;}
    100%{ background-position: -150px 0;}
}

.lightAni{
    width: 655px;
    height: 486px;
    position: absolute;
    top: -19px;
    left: 139px;
    background: url(../images/sprite18.png);
    transform: scale(1.17);
    
}
.lightAni.ani1{
    animation:lightAni 5s steps(70) forwards;
}
@keyframes lightAni {
    0%{ background-position: 0 0;}
    100%{  background-position: 0 -34020px;}
}
.lightover{
    width: 100px;
    height: 32px;
    position: absolute;
    top: 102px;
    left: 234px;
    cursor: pointer;
}
#video23{
    left: -1px;
    z-index: 1;
    top: 21px;
}
.continueBtn45{
    display: none;
    left: 550px !important;
    bottom: 71px !important;
}
.continueBtn46{
    display: none;
    left: 575px !important;
    bottom: 35px !important;
}
.screen4Info6{
    top: 149px;
    left: 209px;
    display: none;
}
.screen4 .screen4Info6 .textBox6{
    top: -1px;
}
.screen4Info7{
    top: 180px;
    left: 40px;
    display: none;
}
.screen4 .screen4Info7 .textBox6{
    top: 56px;
}


.s4page6 {
    width: 755px;
    height: 416px;
    position: absolute;
    top: 0px;
    left: -4px;
    background: url(../images/s4/img5.png);
    overflow: hidden;
    display: none;
    z-index: 30;
    transform: scale(1.01);
}
.continueBtn.continueBtn49 {
    bottom: 44px !important;
    left: 579px !important;
    display: none;
}
.continueBtn.continueBtn50 {
    bottom: 44px !important;
    left: 579px !important;
    display: none;
}

.s4page6 .s4entry{
    position: absolute;
    top: 172px;
    left: 213px;
    width: 60px;
    height: 28px;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
}
.s4page6 .s4entry1{
    top: 172px;
    left: 213px;
}
.s4page6 .s4entry2{
    top: 172px;
    left: 296px;
    width: 45px;
}
.s4page6 .s4entry3{
    top: 172px;
    left: 365px;
    width: 46px;
}
.s4page6 .s4entry4{
    top: 172px;
    left: 455px;
    width: 46px;
}
.s4page6 .s4entry5{
    top: 172px;
    left: 526px;
    width: 47px;
}
.s4page6 .s4entry6{
    top: 289px;
    left: 269px;
    width: 58px;
}
.s4page6 .s4entry7{top: 289px;left: 344px;width: 46px;}
.s4page6 .s4entry8{
    top: 289px;
    left: 498px;
    width: 45px;
}
.s4result {
    position: absolute;
    top: 341px;
    left: 260px;
    font-size: 20px;
    font-weight: bold;
}
.s4page6:after {
    content: "";
    position: absolute;
    width: 168px;
    height: 1px;
    background: black;
    top: 246px;
    left: 254px;
}
.s4page6:before {
    content: "";
    position: absolute;
    width: 127px;
    height: 1px;
    background: black;
    top: 246px;
    left: 449px;
}

.s4text {
    position: absolute;
    top: 118px;
    background: white;
    color: #FF6600;
    font-weight: bold;
    text-align: center;
    left: 91px;
    width: 613px;
    display: none;
    height: 40px;
}
.s4text span{
    color:black;
}

.s4page7 {
    width: 756px;
    height: 417px;
    position: absolute;
    top: 0px;
    left: -4px;
    background: url(../images/s4/img6.png);
    overflow: hidden;
    display: none;
    z-index: 30;
    transform: scale(1.01);
}


.continueBtn.continueBtn51 {
    bottom: 44px !important;
    left: 579px !important;
    display: none;
}
.continueBtn.continueBtn52 {
    bottom: 44px !important;
    left: 579px !important;
    display: none;
}

.s5result {
    position: absolute;
    top: 344px;
    left: 260px;
    font-size: 20px;
    font-weight: bold;
}

.s4page7 .s5entry{
    position: absolute;
    top: 175px;
    left: 129px;
    width: 46px;
    height: 28px;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
}

.s4page7 .s5entry1{
    top: 175px;
    left: 129px;
}
.s4page7 .s5entry2{
    top: 175px;
    left: 199px;
}
.s4page7 .s5entry3{
    top: 175px;
    left: 283px;
    width: 60px;
}
.s4page7 .s5entry4{
    top: 175px;
    left: 366px;
}
.s4page7 .s5entry5{
    top: 175px;
    left: 434px;
}
.s4page7 .s5entry6{
    top: 175px;
    left: 516px;
}
.s4page7 .s5entry7{
    top: 175px;
    left: 579px;
}
.s4page7 .s5entry8{
    top: 175px;
    left: 649px;
}
.s4page7 .s5entry9{
    top: 292px;
    left: 181px;
}
.s4page7 .s5entry10{
    top: 292px;
    left: 327px;
    width: 58px;
}
.s4page7 .s5entry11{
    top: 292px;
    left: 417px;
}
.s4page7 .s5entry12{
    top: 292px;
    left: 538px;
}
.s4page7 .s5entry13{
    top: 292px;
    left: 622px;
}

.s4page7:after {
    content: "";
    position: absolute;
    width: 375px;
    height: 1px;
    background: black;
    top: 249px;
    left: 118px;
}
.s4page7:before {
    content: "";
    position: absolute;
    width: 175px;
    height: 1px;
    background: black;
    top: 249px;
    left: 524px;
}


.s5text {
    position: absolute;
    top: 118px;
    background: white;
    color: #FF6600;
    font-weight: bold;
    text-align: center;
    left: 91px;
    width: 613px;
    height: 51px;
    display: none;
}
.s5text span{
    color:black;
}

.s4page8 {
    width: 756px;
    height: 417px;
    position: absolute;
    top: 0px;
    left: -4px;
    overflow: hidden;
    display: none;
    z-index: 30;
    transform: scale(1.01);
}
.s4page9 {
    width: 756px;
    height: 417px;
    position: absolute;
    top: 0px;
    left: -4px;
    overflow: hidden;
    display: none;
    z-index: 30;
    background: url(../images/s4/img7.png);
    background-position: -42px -82px;
}
.s4page9.show{
    background: url(../images/s4/img8.png);
    background-position: -42px -82px;
}
.s4page9 .s6entry{
    position: absolute;
    top: 188px;
    left: 286px;
    width: 46px;
    height: 28px;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
}
.s4page9 .s6entry1{
    top: 188px;
    left: 286px;
}
.s4page9 .s6entry2{
    top: 188px;
    left: 466px;
}
.s4page9 .s6entry3{
    top: 296px;
    left: 357px;
}
.s4page9:before {
    content: "";
    position: absolute;
    width: 40px;
    height: 1px;
    background: black;
    top: 262px;
    left: 295px;
}

.continueBtn.continueBtn53,.continueBtn.continueBtn54 {
    bottom: 44px !important;
    left: 579px !important;
    display: none;
}

.s6result {
    position: absolute;
    top: 344px;
    left: 293px;
    font-size: 20px;
    font-weight: bold;
}

.s4page10 {
    width: 756px;
    height: 417px;
    position: absolute;
    top: 0px;
    left: -4px;
    overflow: hidden;
    display: none;
    z-index: 30;
    background: url(../images/s4/img9.png);
    background-position: -42px -82px;
}

#video25 {
    width: 602px;
    height: 329px;
    position: absolute;
    left: -61px;
    z-index: 1;
    top: 41px;
    display: none;
}
.manDiv{
    width: 525px;
    height: 799px;
    position: absolute;
    top: -25px;
    left: 288px;
    overflow: hidden;
    background: url(../images/s4/Character_Sargent0001.png);
}

.s4page10 .eye1{
    width: 54px;
    height: 38px;
    position: absolute;
    top: 102px;
    left: 249px;
    background: url(../images/m_eyes_010001.png);
    animation: eye11 5s linear infinite;
    transform: scale(-0.9,0.9);
}
@keyframes eye11 {
    0%{background: url(../images/m_eyes_010001.png); }
    49%{background: url(../images/m_eyes_010001.png); }
    50%{background: url(../images/m_eyes_010006.png); }
    52%{background: url(../images/m_eyes_010006.png); }
    53%{background: url(../images/m_eyes_010001.png); }
    100%{background: url(../images/m_eyes_010001.png); }
    
}

.s4page10 .mouth1{
    width: 32px;
    height: 14px;
    position: absolute;
    top: 141px;
    left: 257px;
    background: url(../images/sprite11.png);
    transform: scale(0.7);
}
.s4page10 .mouth1.ani1{
    animation: mouth11 1s steps(11) infinite;
}
@keyframes mouth11 {
    0%{background-position: 0 0;}
    100%{background-position: -352px 0;}
    
}



.s4page11 {
    width: 756px;
    height: 417px;
    position: absolute;
    top: 0px;
    left: -4px;
    overflow: hidden;
    display: none;
    z-index: 30;
    background: url(../images/s4/img10.png);
    background-position: -42px -82px;
}
.s4page11.show{
    background: url(../images/s4/img11.png);
    background-position: -42px -82px;
}
.s4page11.show1{
    background: url(../images/s4/img12.png);
    background-position: -42px -82px;
}

.s4page11 .s7entry{
    position: absolute;
    top: 188px;
    left: 286px;
    width: 46px;
    height: 28px;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
}
.s4page11 .s7entry1{
    top: 188px;
    left: 286px;
}
.s4page11 .s7entry2{
    top: 188px;
    left: 466px;
}
.s4page11 .s7entry3{
    top: 296px;
    left: 357px;
}
.s4page11:before {
    content: "";
    position: absolute;
    width: 40px;
    height: 1px;
    background: black;
    top: 262px;
    left: 295px;
}

.continueBtn.continueBtn55,.continueBtn.continueBtn56 {
    bottom: 44px !important;
    left: 579px !important;
    display: none;
}
.s7result {
    position: absolute;
    top: 344px;
    left: 293px;
    font-size: 20px;
    font-weight: bold;
}

.s4page12 {
    width: 756px;
    height: 417px;
    position: absolute;
    top: 0px;
    left: -4px;
    overflow: hidden;
    display: none;
    z-index: 30;
}

.continueBtn.continueBtn57 {
    bottom: 19px !important;
    left: 46px !important;
    display: none;
    z-index: 31;
}

.s4page15{
    width: 754px;
    height: 416px;
    position: absolute;
    top: -2px;
    left: 0px;
    background: url(../images/s4/img13.png);
    display: none;
    z-index: 1;
    transform: scale(1.02);
}



.s4page15 .input{
    position: absolute;
    top: 249px;
    left: 352px;
    width: 75px;
    height: 28px;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
}
.s4page15 .input1{
        
left: 324px;
}
.s4page15 .input2{
    left: 409px;
}
.s4page15 .input3{
    left: 495px;
}
.s4page15 .speedCalc{
    position: absolute;
    top: 307px;
    left: 300px;
    font-weight: bold;
}
.s4page15 .speedResult{
    position: absolute;
    top: 348px;
    left: 296px;
    font-weight: bold;
}

.s4page16.s4page {
    width: 756px;
    height: 418px;
    position: absolute;
    top: -3px;
    left: -7px;
    background: url(../images/s4/img14.png);
    display: none;
    z-index: 1;
    transform: scale(1.02);
}
.s4page16 .cAngle{
    position: absolute;
    left: 600px;
    top: 196px;
    font-size: 19px;
    font-weight: bold; 
}
.s4page16 .arrow{
    width: 11px;
    height: 87px;
    position: absolute;
    top: 210px;
    cursor: pointer;
    background: url(../images/s4/arrow.png);
    background-size: 100% 100%;
    left: 608px;
    transform-origin: center top;
    transform: rotate(-234deg);
}
.s4page16 .dragDot{
    width: 16px;
    height: 16px;
    position: absolute;
    top: 133px;
    cursor: pointer;
    background: url(../images/point.png);
    left: 510px;
}
body.ipad .s4page16 .dragDot{
    transform: scale(2);
}

.s4page121{
    width: 756px;
    height: 417px;
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: hidden;
    z-index: 30;
    background-color: #c1ebff;
}
.img15{
    width: 891px;
    height: 481px;
    position: absolute;
    cursor: pointer;
    background: url(../images/s4/img15.png);
    top: 53px;
    left: -35px;
}
.pupupText{
    width: 223px;
    height: 102px;
    position: absolute;
    cursor: pointer;
    background: url(../images/s4/popup.png);
    top: 270px;
    z-index: 1;
    left: 394px;
}
.cloud1{
    width: 372px;
    height: 200px;
    position: absolute;
    cursor: pointer;
    background: url(../images/s4/cloud.png);
    top: 31px;
    left: -370px;
    animation: cloud1 50s linear infinite;
}
@keyframes cloud1 {
    0%{left: -370px;}
    100%{left: 650px;}
}
.msgText {
    background: white;
    width: 268px;
    position: absolute;
    top: 24px;
    height: 149px;
    left: 34px;
    padding: 10px;
    border-radius: 15px;
    line-height: 21px;
}
.mandragArea {
    position: absolute;
    width: 268px;
    height: 340px;
    top: 72px;
    left: 483px;
}

.manChar1{
    width: 67px;
    height: 42px;
    position: absolute;
    cursor: pointer;
    background: url(../images/s4/Dummy0001.png);
    top: 11px;
    left: 25px;
}
.manChar1.ani1{
    background: url(../images/s4/Dummy0014.png);
}
.manChar2{
    width: 139px;
    height: 45px;
    position: absolute;
    cursor: pointer;
    background: url(../images/s4/img16.png);
    top: 0px;
    left: 158px;
}
.manDragEle {
    position: absolute;
    width: 268px;
    height: 45px;
    left: 0;
    top: 295px;
    cursor: pointer;
}

video#video28 {
    position: absolute;
    top: 207px;
    left: 235px;
    transform: scale(0.7);
    width: 308px;
    height: 118px;
    display: none;
}

.textBox6-1{
    width: 195px;
    height: 155px;
    position: absolute;
    top: 260px;
    left: 609px;
    background-color: #d5f2ff;
    border: 1px solid #336699;
    font-size: 14px;
    padding-left: 7px;
    padding-top: 5px;
    display: none;
}

.textBox6-1 .textBox4 {
    width: 235px;
    height: 71px;
    background: #ffffff;
    position: absolute;
    top: 87px;
    font-size: 15px;
    left: -29px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    border: 1px solid #f9c90a;
}

.textBox6-1 .continueBtn.continueBtn7 {
    top: 165px;
    left: -2px;
}

.s2page6 .i {
    width: 28px;
    height: 28px;
    position: absolute;
    top: 160px;
    cursor: pointer;
    background: url(../images/j.png);
    left: 634px;
    color: white;
    line-height: 28px;
    text-align: center;
    font-size: 19px;
    display: none;
}
.s2page6 .e {
    width: 28px;
    height: 28px;
    position: absolute;
    top: 190px;
    cursor: pointer;
    background: url(../images/j.png);
    left: 672px;
    color: white;
    line-height: 28px;
    text-align: center;
    font-size: 19px;
    display: none;
}
.s2page6 .f {
    width: 28px;
    height: 28px;
    position: absolute;
    top: 218px;
    cursor: pointer;
    background: url(../images/j.png);
    left: 457px;
    color: white;
    line-height: 28px;
    text-align: center;
    font-size: 19px;
    display: none;
}

.s2page6 .a {
    width: 28px;
    height: 30px;
    position: absolute;
    top: 175px;
    cursor: pointer;
    background: url(../images/a.png);
    left: 781px;
    display: none;
}
.s2page6 .b {
    width: 28px;
    height: 30px;
    position: absolute;
    top: 212px;
    cursor: pointer;
    background: url(../images/b.png);
    left: 790px;
    display: none;
}
.s2page6 .c {
    width: 28px;
    height: 30px;
    position: absolute;
    top: 212px;
    cursor: pointer;
    background: url(../images/c.png);
    left: 724px;
    display: none;
}
.s2page6 .d {
    width: 28px;
    height: 30px;
    position: absolute;
    top: 212px;
    cursor: pointer;
    background: url(../images/d.png);
    left: 724px;
    display: none;
}
.s3page4 .youmusti {
    width: 219px;
    height: 53px;
    position: absolute;
    top: 924px;
    cursor: pointer;
    background: url(../images/s6/you.png);
    left: 375px;
    background-size: 100% 100%;
    font-size: 18px;
    padding-top: 5px;
    padding-left: 47px;
    padding-right: 5px;
    padding-bottom: 5px;
}
.dragedText1{
    position: absolute;
    width: 74px;
    height: 17px;
    background: #fffce6;
    top: 199px;
    left: 697px;
    border-radius: 20px;
    text-align: center;
    font-weight: bold;
}

.copyright {
    text-align: center;
    background: black;
    position: absolute;
    color: white;
    bottom: 47px;
    font-size: 11px;
    width: 166px;
    height: 12px;
    line-height: 12px;
    border-top-right-radius: 40px;
    z-index: 102;
}


#video26{
    z-index: 32;
}

#video29{
    width: 751px;
    height: 427px;
    position: absolute;
    top: 121px;
    left: 400px;
    display: none;
}
#video30{
    width: 877px;
    height: 619px;
    position: absolute;
    top: 375px;
    left: 975px;
    display: none;
}

#video31{
    width: 876px;
    height: 641px;
    position: absolute;
    top: 364px;
    left: 976px;
    display: none;
    z-index: 1;
}


.s4page1 .ximg,.s4page2 .ximg{
    width: 28px;
    height: 65px;
    position: absolute;
    top: 156px;
    cursor: pointer;
    background: url(../images/add/x.png);
    left: 451px;
    transform: scale(.75);
}
.s4page2 .ximg{
    top: 180px;
    left: 244px;
}
.plushsign {
    position: absolute;
    font-size: 32px;
    top: 234px;
    left: 269px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: white;
    z-index: 1;
}

.rText.text:after {
    content: "";
    position: absolute;
    width: 374px;
    height: 1px;
    background: #ff6600;
    top: 42px;
}

.screen3 .s3page2.special .s2man2{
    width: 654px;
    height: 517px;
    position: absolute;
    top: 570px;
    left: 1211px;
    background: url(../images/Interviewee0001.png);
    transform: scale(1.15);
}
.screen3 .s3page2.special{
    background-position: -8px 75px;
}



.s4page44{
    width: 740px;
    height: 402px;
    position: absolute;
    top: 6px;
    left: 7px;
    background: url(../images/s4/img17.png);
    display: none;
    z-index: 1;
    transform: scale(1.02);
}
.s4page45{
    width: 740px;
    height: 402px;
    position: absolute;
    top: 6px;
    left: 7px;
    background: url(../images/s4/img18.png);
    display: none;
    z-index: 1;
    transform: scale(1.02);
}

.continueBtn.continueBtn36 {
    left: 566px !important;
    top: unset;
    bottom: 43px !important;
    display: none;
}
.speed30{
    position: absolute;
    top: 113px;
    background: white;
    color: #FF6600;
    font-weight: bold;
    text-align: center;
    left: 91px;
    width: 567px;
    height: 51px;
    font-size: 17px;
    display: none;
}

.text25,.text175{
    display:none;
}