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: 'Century Gothic';
    src: url('CenturyGothic-Bold.woff2') format('woff2'),
        url('CenturyGothic-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
.container{
	width: 760px;
    height: 575px;
    background: #35335f;
    position: relative;
    margin: auto;
    border: 1px solid #c3bcbc;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    overflow: hidden;
    top: 10px;
}
.loading{
    width:100%;
    height:100%;
    position: absolute;
    top:0px;
    left:0px;
    z-index: 1000;
    background-color: rgba(0, 0, 0,0.8);
   
}
.headerTag{
	width: 760px;
	height: 70px;	
    background:linear-gradient(#234669, #326597);
	position: absolute;
    top: 0px;
    left: 0px;    
}
.logo{
    width: 278px;
	height: 88px;	
    background:url(../images/logo.png);
    position: absolute;
    transform: scale(0.5);
    top: -17px;
    left: -40px;
}
.logo:after {
    content: "Virtual Aortic Aneurysm Surgery";
    position: absolute;
    font-size: 32px;
    white-space: nowrap;
    color: white;
    top: 89px;
    text-shadow: 1px 1px 6px #000;
    left:-35px;
}
.footerTag{
	width: 760px;
	height: 83px;	
    background:linear-gradient(#9d9d9d, #f3f3f3);
	position: absolute;
    bottom: 0px;
    left: 0px;    
}
.audioText{
    position: absolute;
    width: 690px;
    height: 100%;
    line-height: 19px;
    padding-left: 5px;
    font-size: 15px;
    top: 2px;
    overflow: auto;
}

.mainScene{
	width: 760px;
	height: 422px;	
    background:#000000;
	position: absolute;
    top: 70px;
    left: 0px;
}
.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);
    z-index: 999;
}
.menuoption{
    cursor: pointer;
    height: 45px;
    top: 10px;
    color: white;
    font-size: 14px;
    font-family: arial;
    text-align: center;
    line-height: 45px;
    text-decoration: underline;
    position: absolute;
}
.menuoption1{
    width: 79px;
    left: 190px;
}
.menuoption2{
    width: 92px;
    left: 275px;
}
.menuoption3{
    width: 86px;
    left: 395px;
}
.menuoption4{
    width: 110px;
    left: 498px;
}
.menuoption5{
    width: 110px;
    left: 620px;
}

.menuoption:hover{
    background-color: #4173a6;
}

.screen{
	position: absolute;
    top: 10px;
    left: 10px;
    width: 740px;
    height: 402px;
    background: linear-gradient(#999999, #5d5d5d);
    overflow: hidden;
    display: none;
}


.audioEle {
    width: 42px;
    height: 27px;
    position: absolute;
    left: 705px;
    top: 10px;
    cursor: pointer;
}

.audioEle.on {
    background: url(../images/audoff0001.png);
}
.audioEle.on:hover {
    background: url(../images/audoff0002.png);
}
.audioEle.off {
    background: url(../images/audon0001.png);
}
.audioEle.off:hover {
    background: url(../images/audon0002.png);
}

.menutext{
	font-size:18px;
	font-weight:bold;
	position:absolute;
	top: 20px;
    left: 81px;
}
.menuheader1{
	font-size: 15px;
    font-weight: bold;
    position: absolute;
    top: 54px;
    left: 19px;
    white-space: nowrap;
}
.menuheader2{
	font-size: 15px;
    font-weight: bold;
    position: absolute;
    top: 174px;
    left: 19px;
    white-space: nowrap;
}
.menutext1{
	font-size: 15px;
    position: absolute;
    top: 77px;
    left: 19px;
    width: 185px;
    line-height: 20px;
    cursor: pointer;
}
.menutext2{
	font-size: 15px;
    position: absolute;
    top: 194px;
    left: 19px;
    width: 185px;
    line-height: 20px;
    cursor: pointer;
}
.menutext2:hover,.menutext1:hover{
    background: #E3E3E3;
    cursor: pointer;
}
#video1, #video2,#video3,#video4,#video5,#video6,#video7{
	width: 743px;
    height: 404px;
    position: absolute;
    top: -1px;
    left: 0px;
}
#video7{
    transform: scale(1, -1);
    top:0px;
}
#video6,#video7{
    display: none;
    z-index: 3;
}
/*photo start*/
.imgGroup{
	width: 386px;
    height: 402px;
    position: absolute;
    left: -80px;
    top: 0px;
	animation:imgGroup 0.25s 0.1s linear forwards;
}
@keyframes imgGroup{
	0%{left: -80px;}
	100%{left: 0px;}
}
.imgrow{
    width: 366px;
    height: 78px;
    position: absolute;
    left: 20px;
    top: 20px;
    bottom: 0;
    right: 0px;
}

.imgrow1{top: 20px;left: 20px;animation:imgrow1 0.5s 0.5s linear forwards;}
.imgrow2{top: 28px;left: 28px;animation:imgrow2 0.5s 0.5s linear forwards;}
.imgrow3{top: 36px;left: 36px;animation:imgrow3 0.5s 0.5s linear forwards;}
.imgrow4{top: 44px;left: 44px;animation:imgrow4 0.5s 0.5s linear forwards;}

@keyframes imgrow1{0%{top: 20px;left: 20px;}100%{top: 20px;left: 20px;}}
@keyframes imgrow2{0%{top: 28px;left: 28px;}100%{top: 115px;left: 20px;}}
@keyframes imgrow3{0%{top: 36px;left: 36px;}100%{top: 210px;left: 20px;}}
@keyframes imgrow4{0%{top: 44px;left: 44px;}100%{top: 305px;left: 20px;}}

.bigPhotoInfo{
	width: 337px;
    height: 331px;
    position: absolute;
    top: 20px;
    right: -320px;
    background: url(../images/photo/img2.png);
	transform: scale(0.9) rotate(10deg);
    transform-origin: left bottom;
	animation:bigPhotoInfo 0.35s 1.1s linear forwards;
}
@keyframes bigPhotoInfo{100%{top: 20px;right:0px;transform: scale(0.9) rotate(0deg);}}

.photo{
	width: 78px;
    height: 78px;
    position: absolute;
    left: 0px;
    top: 0px;
    background: url(../images/photo/img3.png);
	cursor:pointer;
}
.photo2{left: 96px;}
.photo3{left: 193px;}
.photo4{left: 289px;}
.photo:hover{
	transform:scale(1.05);
}
.photo img{
	position: absolute;
    top: 7px;
    left: 7px;
	opacity:0;
	animation:opacity 0.01s 1.1s linear forwards;
}
.photo span{
	position: absolute;
    bottom: 3px;
    left: 36px;
    font-size: 10px;
	opacity:0;
	animation:opacity 0.01s 1.1s linear forwards;
}
@keyframes opacity{100%{opacity:1;}}

.selectphoto{
	width: 268px;
    height: 223px;
    position: absolute;
    top: 25px;
    left: 32px;
    
}
.selectphoto[data-selected="5"]{background: url(../images/photo/b1.jpg);}
.selectphoto[data-selected="6"]{background: url(../images/photo/b2.jpg);}
.selectphoto[data-selected="7"]{background: url(../images/photo/b3.jpg);}
.selectphoto[data-selected="9"]{background: url(../images/photo/b4.jpg);}
.selectphoto[data-selected="10"]{background: url(../images/photo/b5.jpg);}
.selectphoto[data-selected="11"]{background: url(../images/photo/b6.jpg);}
.selectphotoinfo{
	position: absolute;
    top: 254px;
    left: 33px;
    font-size: 13px;
    width: 264px;
}
/* photo end*/
.dragScreen{
    background: url(../images/bg1.png);
    z-index: 2;
    top: 0px;
    left: 0;
}
.sc2img1{
    width: 94px; 
    height: 164px;
    background: url(../images/img1.png);
    position: absolute;
    top: 78px;
    left: 203px; 
}
.sc2img2{
    width: 10px; 
    height: 50px;
    background: url(../images/img2.png);
    position: absolute;
    top: 80px;
    left: 237px; 
    transform-origin: top center;
}
.circle1, .circle2{
    width: 16px; 
    height: 16px;
    background: url(../images/img3.png);
    position: absolute;
    top: 75px;
    left: 234px;
}
.circle2{
    bottom: -4px;
    left: -3px;
    cursor: pointer;
    top: unset;
}
.cmValue{
    position: absolute;
    font-size: 20px;
    font-weight: bold;
    color: white;
    left: 40px;
    width: 100px;
    text-align: center;
    transform: rotate(90deg);
    top: 59px;
}
.Yesoption{
    position: absolute;
    left: 531px;
    top: 107px;
    font-family: "Century Gothic";
    font-size: 20px;
    background: white;
    cursor: pointer;
}
.Nooption{
    position: absolute;
    left: 531px;
    top: 136px;
    font-family: "Century Gothic";
    font-size: 20px;
    background: white;
    cursor: pointer;
}
.Yesoption:hover,.Nooption:hover{
    background-color: #99b1cb;
}

.sc3bg3{
    background: url(../images/bg3.png);
    z-index: 2;
    top: 0px;
    left: 0;
}
.sc3bg4{
    background: url(../images/bg4.png);
    z-index: 2;
    top: 0px;
    left: 0;
}

.sc3bg3 .arrow1,.sc3bg3 .arrow2 , .arrow3,.arrow11{
    width:36px;
    height:36px;
    position: absolute;
    top: -6px;
    left: 369px;
    background: url(../images/arrow.png);
    cursor: pointer;
}
.sc3bg3 .arrow2{
    transform: rotate(130deg);
    top: 6px;
    left: 415px;
    z-index: 11;
    display: none;
}
.sc3bg3 .sprite1{
    width: 64px; 
    height: 495px;
    position: absolute;
    top: -48px;
    left: 389px;
    background: url(../images/sprite1.png);
    transform: scale(.72);
    animation: sprite1 3s steps(50) forwards;
    display: none;
}
@keyframes sprite1{
	from{background-position: 0 0;}
	to{ background-position: -3200px 0; }
}
.sc3bg3 .cutHand{
    width: 386px; 
    height: 653px;
    position: absolute;
    top: -48px;
    left: 389px;
    background: url(../images/hand_scalpel_straight0014.png);
    transform: scale(.72);
}
.popup1{
    width: 316px; 
    height: 152px;
    position: absolute;
    top: 10px;
    left: 4px;
    background: url(../images/popup2.png); 
    z-index: 2;  
}
.popup1 div{
    font-size: 14px;
    width: 239px;
    position: absolute;
    top: 0px;
    left: 67px;
    height: 63px;
    padding: 5px;
    border-radius: 20px;
}
.first_slice_wound{
    width: 32px; 
    height: 365px;
    position: absolute;
    top: 17px;
    left: 401px;
    background: url(../images/first_slice_wound.png);  
    display: none; 
}
.img4{
    width: 121px; 
    height: 387px;
    position: absolute;
    top: 10px;
    left: 349px;
    background: url(../images/img4.png);  
    display: none; 
}
.cover1{
    width: 98px; 
    height: 90px;
    position: absolute;
    top: 241px;
    left: 401px;
    background: url(../images/cover.png);  
    display: none; 
}
.sc3bg4 .q{
    font-size: 16px;
    font-weight: bold;
    position: absolute;
    width: 395px;
    left: 293px;
    background: #f2f2f2;
    font-style: italic;
    cursor: pointer;
}
.sc3bg4 .q1{top: 106px;}
.sc3bg4 .q2{top: 158px;}
.sc3bg4 .q3{top: 205px;}
.sc3bg4 .q4{top: 250px;}
.sc3bg4 .q:hover{
    background-color: #ccd6e2;
}
.img5{
    width: 105px; 
    height: 145px;
    position: absolute;
    top: 241px;
    left: 401px;
    background: url(../images/img5.png);  
    display: none; 
    z-index: 1;
}
.img6{
    width: 39px; 
    height: 366px;
    position: absolute;
    top: 17px;
    left: 397px;
    background: url(../images/img6.png);  
    display: none; 
}

.sc3bg3 .sprite2{
    width: 27px; 
    height: 495px;
    position: absolute;
    top: -65px;
    left: -2px;
    background: url(../images/sprite2.png);
    transform: scale(.7);
    animation: sprite2 2s steps(50) forwards;
    display: none;
}
@keyframes sprite2{
	from{background-position: 0 0;}
	to{ background-position: -1350px 0; }
}

.sc3bg5,.sc3bg6,.sc3bg6,.sc3bg7,.sc3bg8{
    background-image:  url(../images/bg5.png);
    z-index: 2;
    top: 0px;
    left: 0;
    background-color: black;
    display: none;
}
.sc3bg6{
    
    background-image: url(../images/bg6.png);
}
.sc3bg7{
    background-image: url(../images/bg7.png);
}
.sc3bg8{
    background-image: url(../images/bg8.png);
}
.img7{
    width: 160px; 
    height: 216px;
    position: absolute;
    top: 191px;
    left: 324px;
    background: url(../images/img7.png);  
    display: none; 
}

.arrow3{
    top: 160px;
    left: 396px;
    transform: rotate(69deg);
}
.sc3bg7 .img7{
     top: 220px;
    left: 326px;
    transform: rotate(180deg);
}
.sc3bg7 .img8{
    width: 270px; 
    height: 529px;
    position: absolute;
    top: 115px;
    left: 52px;
    transform: scale(-1, 1);
    background: url(../images/img8.png);  
    display: none; 
}
.dotline{
    width: 1px;
    height: 185px;
    position: absolute;
    top: 106px;
    left: 403px;
    border-right: 3px dashed white;
}

.arrow4{
    width:36px;
    height:36px;
    position: absolute;
    top: 89px;
    left: 412px;
    background: url(../images/arrow.png);
    cursor: pointer;
    transform: scale(-1, 1);
}
.img9{
    width: 455px;
    height: 455px;
    position: absolute;
    top: 81px;
    left: 124px;
    background: url(../images/img9.png);
    cursor: pointer;
    background-size: 100% 100%;
    display: none;
}
.cover2{
    width:100%;
    height:100%;
    position: absolute;
    top:0px;
    left:0px;

}
.img10{
    width: 158px;
    height: 50px;
    position: absolute;
    top: 338px;
    left: 330px;
    background: url(../images/img10.png);
    display: none;
}
.img11{
    width: 160px;
    height: 240px;
    position: absolute;
    top: 300px;
    left: 313px;
    background: url(../images/img12.png);
    display: none;
}
.img12,.img121{
    width: 179px;
    height: 235px;
    position: absolute;
    top: 338px;
    left: 330px;
    background: url(../images/img11.png);
    display: none;
}
.img12-1,.img12-11{
    top: 296px;
    left: 388px;
    transform: rotate(-32deg);
}
.img12-2,.img12-22{
    top: 292px;
    left: 227px;
    transform: rotate(32deg);
}
.img12-3,.img12-33{
    top: -50px;
    left: 320px;
    transform: rotate(180deg);
}
.sc3bg9{
    background-image: url(../images/bg10.png);
    z-index: 2;
    top: 0px;
    left: 0;
    display: none;
}
.sc3bg10{
    background-image: url(../images/bg9.png);
    z-index: 2;
    top: 0px;
    left: 0;
    display: none;
}

.sc3bg9 .q{
    font-size: 16px;
    font-weight: bold;
    position: absolute;
    width: 405px;
    left: 293px;
    background: #f2f2f2;
    font-style: italic;
    cursor: pointer;
}
.sc3bg9 .q1{top: 106px;}
.sc3bg9 .q2{top: 158px;}
.sc3bg9 .q3{top: 196px;}
.sc3bg9 .q4{top: 250px;}
.sc3bg9 .q:hover{
    background-color: #ccd6e2;
}

.img13{
    width: 172px;
    height: 55px;
    position: absolute;
    top: 115px;
    left: 330px;
    background: url(../images/img13.png);
    display: none;
}
.img14{
    width: 160px;
    height: 240px;
    position: absolute;
    top: -86px;
    left: 338px;
    background: url(../images/img12.png);
    display: none;
    transform: rotate(180deg);
}

.sc3bg10 .q{
    font-size: 16px;
    font-weight: bold;
    position: absolute;
    width: 405px;
    left: 293px;
    background: #f2f2f2;
    font-style: italic;
    cursor: pointer;
}
.sc3bg10 .q1{top: 106px;}
.sc3bg10 .q2{top: 158px;}
.sc3bg10 .q3{top: 205px;}
.sc3bg10 .q4{top: 248px;}
.sc3bg10 .q:hover{
    background-color: #ccd6e2;
}

.dotline1{
    width: 1px;
    height: 90px;
    position: absolute;
    top: 197px;
    left: 400px;
    border-right: 3px dashed white;
    display: none;
}
.dotline1.cut{
    width: 4px;
    border: unset;
    background-color: black;
}

.arrow5,.arrow6,.arrow7,.arrow8,.arrow9,.arrow10{
    width:36px;
    height:36px;
    position: absolute;
    top: 170px;
    left: 355px;
    background: url(../images/arrow.png);
    cursor: pointer;
    display: none;
}

.arrow7{
    top: 200px;
    left: 375px;
}
.arrow8{
    top: 212px;
    left: 425px;
    display: block;
}
.arrow9{
    top: 69px;
    left: 361px;
    display: block;
    transform: rotate(45deg);
}
.arrow10{
    top: 69px;
    left: 198px;
    display: block;
    transform: rotate(45deg);
}

.sc3bg8 .scalpel1{
    width: 270px; 
    height: 529px;
    position: absolute;
    top: 115px;
    left: 52px;
    background: url(../images/img8.png);  
    display: none; 
}
.hline1,.hline2{
    width: 50px;
    height: 1px;
    position: absolute;
    top: 196px;
    left: 378px;
    border-bottom: 3px dashed white;
    display: none;
}
.hline2{
    top: 283px;
}
.hline1.cut,.hline2.cut{
    border-bottom: 3px solid black;
}
.img15{
    width: 700px;
    height: 399px;
    position: absolute;
    top: 86px;
    left: 338px;
    background: url(../images/img14.png);
    display: none;
}
.img16{
     width: 33px;
    height: 68px;
    position: absolute;
   top: 209px;
    left: 382px;
    background: url(../images/img15.png);
    display: none;
    transform: scale(1.25);
}
.sprite3{
    width: 227px; 
    height: 108px;
    position: absolute;
    top: 135px;
    left: 146px;
    background: url(../images/sprite3.png);
    transform: scale(1.5);
    display: none;
}
.sprite3.ani{
    display: block;
    animation: sprite3 1s steps(20) forwards;
}
@keyframes sprite3{
	from{background-position: 0 0;}
	to{  background-position: 0 -2160px; }
}
.sc3bg11,.sc3bg12,.sc3bg13,.sc3bg14,.sc3bg15,.sc3bg16,.sc3bg17,.sc3bg18,.sc3bg19,.sc3bg20,.sc3bg21,.sc3bg22,.sc3bg23,.sc3bg24,.sc3bg25,.sc3bg26,.sc3bg27,.sc3bg28{
    background-image: url(../images/bg11.png);
    z-index: 2;
    top: 0px;
    left: 0;
    display: none;
}
.sc3bg12{
    background-image: url(../images/bg12.png);
}
.sc3bg13{
    background-image: url(../images/bg13.png);
}
.sc3bg14{
    background-image: url(../images/bg14.png);
}
.sc3bg15{
    background-image: url(../images/bg15.png);
    background-color: #000;
}
.sc3bg16{
    background-image: url(../images/bg16.png);
    background-color: #000;
}
.sc3bg17{
    background-image: url(../images/bg17.png);
}
.sc3bg17.add{
    background-image: url(../images/bg18.png);
}
.sc3bg18{
    background-image: url(../images/bg17.png);
    transform: scale(1, -1);
}
.sc3bg18.add{
    background-image: url(../images/bg18.png);
    transform: scale(1, -1);
}
.sc3bg19{
    background-image: url(../images/bg19.png);
    background-color: #000;
}
.sc3bg20{
    background-image: url(../images/bg20.png);
}
.sc3bg21{
    background-image: url(../images/bg21.png);
     background-color: #000;
}
.sc3bg22{
    background-image: url(../images/bg22.png);
     background-color: #000;
}
.sc3bg23{
    background-image: url(../images/bg23.png);
     background-color: #000;
}
.sc3bg24{
    background-image: url(../images/bg24.png);
     background-color: #000;
}
.sc3bg24.staple{
    background-image: url(../images/bg26.png);
     background-color: #000;
}
.sc3bg25{
    background-image: url(../images/bg25.png);
    background-color: #000;
}
.sc3bg26{
    background-image: url(../images/bg26.png);
    background-color: #000;
}
.sc3bg27{
    background-image: url(../images/bg27.png);
    background-color: #000;
}
.sc3bg28{
    background-image: url(../images/bg28.png);
    background-color: #000;
}


.img17{
    width: 764px;
    height: 286px;
    position: absolute;
    top: 6px;
    left: 484px;
    background: url(../images/img16.png);
    display: none;
    transform: scale(-1, 1);
}
.img18{
    width: 200px;
    height: 200px;
    position: absolute;
    top: 100px;
    left: 166px;
    background: url(../images/img17.png);
    display: none;
    transform: scale(1.5);
}

.sc3bg16 .q{
    font-size: 16px;
    font-weight: bold;
    position: absolute;
    width: 417px;
    left: 293px;
    background: #f2f2f2;
    font-style: italic;
    cursor: pointer;
}
.sc3bg16 .q1{top: 115px;}
.sc3bg16 .q2{top: 156px;}
.sc3bg16 .q3{top: 196px;}
.sc3bg16 .q4{top: 245px;}
.sc3bg16 .q:hover{
    background-color: #ccd6e2;
}

.img19,.img20{
    width: 740px;
    height: 906px;
    position: absolute;
    top: 100px;
    left: 166px;
    background: url(../images/img18.png);
    display: none;
}
.img20{
transform: scale(1, -1);
}
.screen3{
    background-color: black;
}
.sc3bg19.ani{
    animation:sc3bg19 1s linear forwards;
}
@keyframes sc3bg19{
    10%{left:-10px}
    20%{left:10px}
    30%{left:-10px}
    40%{left:10px}
    50%{left:-10px}
    60%{left:10px}
    70%{left:-10px}
    80%{left:10px}
    90%{left:-10px}
    100%{left:0px}
}
.sc3bg20 .q{
    font-size: 16px;
    font-weight: bold;
    position: absolute;
    width: 470px;
    left: 241px;
    background: #f2f2f2;
    font-style: italic;
    cursor: pointer;
}
.sc3bg20 .q1{top: 115px;}
.sc3bg20 .q2{top: 162px;}
.sc3bg20 .q3{top: 218px;}
.sc3bg20 .q4{top: 267px;}
.sc3bg20 .q:hover{
    background-color: #ccd6e2;
}
.img21{
    width: 84px;
    height: 95px;
    position: absolute;
    top: 190px;
    left: 365px;
    background: url(../images/img19.png);
    transform: scale(1.15);
}
.img22{
    width: 312px;
    height: 605px;
    position: absolute;
    top: 190px;
    left: 365px;
    background: url(../images/img20.png);
    display: none;
}
.img23{
    width: 4px;
    height: 0px;
    position: absolute;
    top: 190px;
    left: 402px;
    background: url(../images/img21.png);
}
.img24 {
    width: 7px;
    height: 0px;
    position: absolute;
    top: 26px;
    left: 409px;
    background: url(../images/img21.png);
}
.clickArea{
    width:100px;
    height:100px;
    top: 190px;
    left: 350px;
    position: absolute;
    cursor: pointer;
    display: none;
}
.sc3bg23 .q{
    font-size: 16px;
    font-weight: bold;
    position: absolute;
    width: 417px;
    left: 281px;
    background: #f2f2f2;
    font-style: italic;
    cursor: pointer;
}
.sc3bg23 .q1{top: 105px;}
.sc3bg23 .q2{top: 154px;}
.sc3bg23 .q3{top: 197px;width: 386px;height: 57px;}
.sc3bg23 .q4{top: 266px;}
.sc3bg23 .q:hover{
    background-color: #ccd6e2;
}
.clickArea1{
    width: 50px;
    height: 360px;
    top: 23px;
    left: 386px;
    position: absolute;
    cursor: pointer;
}
.img25{
    width: 116px;
    height: 170px;
    position: absolute;
    top: 56px;
    left: 459px;
    background: url(../images/img22.png);
    transform: scale(1.25);
    display: none;
}
.sc3bg25 .q{
    font-size: 16px;
    font-weight: bold;
    position: absolute;
    width: 417px;
    left: 291px;
    background: #f2f2f2;
    font-style: italic;
    cursor: pointer;
}
.sc3bg25 .q1{top: 109px;}
.sc3bg25 .q2{top: 147px;}
.sc3bg25 .q3{top: 204px;}
.sc3bg25 .q4{top: 244px;}
.sc3bg25 .q:hover{
    background-color: #ccd6e2;
}
.img27{
    width: 388px;
    height: 794px;
    position: absolute;
    top: 56px;
    left: 459px;
    background: url(../images/img23.png);
    display: none;
}
.img28{
    width: 142px;
    height: 349px;
    position: absolute;
    top: 56px;
    left: 459px;
    transform: scale(1.25);
    background: url(../images/img24.png);
    display: none;
}
.dragCircle{
    position: absolute;
    width: 30px;
    height: 30px;
    top: 112px;
    left: 227px;
    opacity: 0.5;
}

.mouth11{
    width: 25px;
    height: 16px;
    position: absolute;
    top: 127px;
    left: 120px;
    transform: scale(1.25);
    background: url(../images/mom_mouth0001.png);
    animation:mouth11 0.5s linear infinite;
    display: none;
}
@keyframes mouth11{
    0%{background: url(../images/mom_mouth0001.png);}
    32%{background: url(../images/mom_mouth0001.png);}
    33%{background: url(../images/mom_mouth0003.png);}
    66%{background: url(../images/mom_mouth0003.png);}
    67%{background: url(../images/mom_mouth0002.png);}
    100%{background: url(../images/mom_mouth0002.png);}
}

#video5{
    display: none;
}
.arrow2{
    cursor: unset;
}

.bloodArea{
    position: absolute;
    top: 20px;
    left: 402px;
    height: 358px;
    width: 20px;
    cursor: pointer;
}
#video8{
    display: none;
    height: 404px;
    width: 420px;
    position: absolute;
    left: 329px;
    opacity: 1;
    top: 4px;
}

#video9{
	width: 743px;
    height: 404px;
    position: absolute;
    top: -1px;
    left: 0px;
    display: none;
}
#video10{
    width: 143px;
    height: 400px;
    position: absolute;
    top: 3px;
    display: none;
    left: 337px;
}
#video11{
    width: 243px;
    height: 400px;
    position: absolute;
    top: 3px;
    display: none;
    left: 323px;
}
.sc3bg20 .mouth11{
    top: 127px;
    left: 81px;
}

.sc3bg28 .mouth11{
    top: 127px;
    left: 281px;
    display: block !important;
}