@charset "UTF-8";
/* CSS Document */

/* Default style, feel free to remove if not needed. */
body, body * {
	vertical-align: baseline;
	border: 0 none;
	outline: 0;
	padding: 0;
	margin: 0;
}

#container{
	width: 300px;
	height: 250px;
	position: relative;
	top: 0px;
	left:0px;
	overflow: hidden;
}

#content{
	position: absolute;
    width: 298px;
    height: 248px;
    top: 0px;
    left: 0px;
    background-color: #ededed;
    z-index: 100;
    overflow: hidden;
    border: 1px solid #000000;
    opacity: 1;
}

.btnPlay {
	background-image:url('btnPlay.png');
	background-size:80px 80px;
	width:80px;
	height:80px;
    position:absolute;
    left: 110px;
    top: 75px;
	opacity:0.7;
    z-index:10;
    cursor: pointer;
}







.text1{
	background-image: url("text1.png");
	position:absolute;
	left:0px;
	top:0px;
	width:300px;
	height:78px;
	z-index: 2;
	opacity:0;
}
.text2{
	background-image: url("text2.png");
	position:absolute;
	left:0px;
	top:0px;
	width:300px;
	height:78px;
	z-index: 2;
	opacity:0;
}
.text3{
	background-image: url("text3.png");
	position:absolute;
	left:0px;
	top:0px;
	width:300px;
	height:78px;
	z-index: 2;
	opacity:0;
}
.text4{
	background-image: url("text4.png");
	position:absolute;
	left:0px;
	top:0px;
	width:300px;
	height:78px;
	z-index: 2;
	opacity:0;
}
.text4a{
	background-image: url("text4a.png");
	position:absolute;
	left:0px;
	top:80px;
	width:300px;
	height:22px;
	z-index: 2;
	opacity:0;
}
.text4b{
	background-image: url("text4b.png");
	position:absolute;
	left:0px;
	top:105px;
	width:300px;
	height:22px;
	z-index: 2;
	opacity:0;
}
.text4c{
	background-image: url("text4c.png");
	position:absolute;
	left:0px;
	top:130px;
	width:300px;
	height:22px;
	z-index: 2;
	opacity:0;
}
.text4d{
	background-image: url("text4d.png");
	position:absolute;
	left:0px;
	top:156px;
	width:300px;
	height:22px;
	z-index: 2;
	opacity:0;
}
.text5{
	background-image: url("text5.png");
	position:absolute;
	left:0px;
	top:0px;
	width:300px;
	height:78px;
	z-index: 2;
	opacity:0;
}

.btnTry{
	background-image: url("btnTry.png");
	position:absolute;
	left:17px;
	top:110px;
	width:161px;
	height:41px;
	z-index: 2;
	opacity:0;
}
.boxBlue1{
	background-image: url("box_blue.png");
	position:absolute;
	left:139px;
	top:119px;
	width:157px;
	height:114px;
	z-index: 4;
	opacity:0;
}
.boxBlue2{
	background-image: url("box_blue.png");
	position:absolute;
	left:139px;
	top:119px;
	width:157px;
	height:114px;
	z-index: 3;
	opacity:0;
}
.boxBlue3{
	background-image: url("box_blue.png");
	position:absolute;
	left:139px;
	top:119px;
	width:157px;
	height:114px;
	z-index: 2;
	opacity:0;
}
.boxShoe{
	background-image: url("box_shoe.png");
	position:absolute;
	left:73px;
	top:67px;
	width:223px;
	height:182px;
	z-index: 2;
	opacity:0;
}
.boxIron{
	background-image: url("box_iron.png");
	position:absolute;
	left:74px;
	top:78px;
	width:223px;
	height:157px;
	z-index: 2;
	opacity:0;
}
.round2{
	background-image: url("round2.png");
	position:absolute;
	left:14px;
	top:76px;
	width:98px;
	height:98px;
	z-index: 2;
	opacity:0;
}
.round3{
	background-image: url("round3.png");
	position:absolute;
	left:14px;
	top:76px;
	width:98px;
	height:98px;
	z-index: 2;
	opacity:0;
}
.tickbox1{
	background-image: url("tickbox.png");
	position:absolute;
	left:20px;
	top:73px;
	width:30px;
	height:30px;
	z-index: 4;
	opacity:0;
}
.tickboxTick1{
	background-image: url("tickbox_tick.png");
	position:absolute;
	left:20px;
	top:73px;
	width:30px;
	height:30px;
	z-index: 5;
	opacity:0;
}
.tickbox2{
	background-image: url("tickbox.png");
	position:absolute;
	left:20px;
	top:99px;
	width:30px;
	height:30px;
	z-index: 4;
	opacity:0;
}
.tickboxTick2{
	background-image: url("tickbox_tick.png");
	position:absolute;
	left:20px;
	top:99px;
	width:30px;
	height:30px;
	z-index: 5;
	opacity:0;
}
.tickbox3{
	background-image: url("tickbox.png");
	position:absolute;
	left:20px;
	top:124px;
	width:30px;
	height:30px;
	z-index: 4;
	opacity:0;
}
.tickboxTick3{
	background-image: url("tickbox_tick.png");
	position:absolute;
	left:20px;
	top:124px;
	width:30px;
	height:30px;
	z-index: 5;
	opacity:0;
}
.tickbox4{
	background-image: url("tickbox.png");
	position:absolute;
	left:20px;
	top:148px;
	width:30px;
	height:30px;
	z-index: 4;
	opacity:0;
}
.tickboxTick4{
	background-image: url("tickbox_tick.png");
	position:absolute;
	left:20px;
	top:148px;
	width:30px;
	height:30px;
	z-index: 5;
	opacity:0;
}


#mainBg {
	background-image:url('mainBg.png');
	width:300px;
	height:250px;
	position:absolute;
	top:0px;
	left:0px;
	opacity:1;
	z-index:0;
}

#clicktag{
	position:absolute;
	left:0;
	top:0;
	width:300px;
	height:250px;
	z-index:9;
	/*background:transparent;*/
	cursor:pointer;
}






svg{
	height:100%;
	max-height:100%;
}

#preload{
	position:absolute;
	left:0;
	top:0;
	width:300px;
	height:250px;
	overflow:hidden;
	background-color:#FFFFFF;
}

#disc{
	position:absolute;
	left:135px;
	top:105px;
	width:30px;
	height:30px;
}

#disc{
	-webkit-animation-name: discRotate;
            animation-name: discRotate;
    -webkit-animation-duration: 2s;
            animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}

@-webkit-keyframes discRotate {
    0%    {-webkit-transform: rotate(0deg);}   
    100%  {-webkit-transform: rotate(360deg);}
}

@keyframes discRotate {
    0%    {transform: rotate(0deg);}   
    100%  {transform: rotate(360deg);}
}










/*#guide0 {
	background-image:url('guide0.jpg');
	width:300px;
	height:250px;
	position:absolute;
	top:0px;
	left:0px;
	opacity:0.5;
	z-index:1000;
	cursor:pointer;
}*/
:focus {outline:none;}
::-moz-focus-inner {border:0;}