@font-face {
font-family: youmurderer BB;
src: url('../font/youmurdererbb_reg.ttf');
}
@font-face {
font-family: the unseen;
src: url('../font/the unseen.ttf');
}
.sj_halloween{
	width:100%;
	font-family:youmurderer BB;
	height: 100%;
    display: block;
    top: 0;
    left: 0;
	z-index:10001;
	background:rgba(255,255,255,0.7);
}
.sj_halloween .character{
	position:fixed;
	display:none;
}
.hallo-banner-1{
	background-repeat : no-repeat;
    position: fixed;
    top: 50%;
	left:50%;
	display:none; 
	cursor:pointer;
}
.hallo-banner-2{
	background-repeat : no-repeat;
    position: fixed;
    right: 20px;
    bottom: 10px;
	cursor:pointer;	
	display:none;
	z-index:1001;
}

.halloween-relative{
	position:relative;
	width:100%;
	height:100%;
}

.halloween-relative div{
	position:absolute;
}

.sj_halloween_close{
	background-image: url(../images/close.png);
	position:absolute;
	top:1%;
	right:1%;
	width: 24px;
	height: 24px;
	cursor:pointer;
}
.hallo-banner-1 .sj-hallo-top-1{
	background-image: url(../images/top_1.png);
	position:absolute;
	top:-40px;
	left:-75px;
	width: 217px;
	height: 67px;
}
.hallo-banner-1 .sj-hallo-top-2{
	background-image: url(../images/top_2.png);
	position:absolute;
	top:-100px;
	left:50%;
	width: 99px;
	height: 126px;
	margin-left:-50px;
}
.hallo-banner-1 .sj-hallo-footer-1{
	background-image: url(../images/footer_large_1.gif);
	position:absolute;
	bottom:-10px;
	right:-30px;
	width: 100px;
	height: 100px;
}
.hallo-banner-1 .sj-hallo-footer-12{
	background-image: url(../images/footer_large_2.png);
	position:absolute;
	bottom:-20px;
	left:-135px;
	width: 223px;
	height: 208px;
}
.hallo-banner-2 .sj-hallo-footer-1{
	background-image: url(../images/footer_large_1.gif);
	position:absolute;
	top:0px;
	right:0px;
	width: 100px;
	height: 100px;
	margin-top:-20px;
	margin-left:-20px;
}
.hallo-banner-2 .sj_halloween_close{
	display: none;
	z-index:1
}
.hallo-banner-2:hover .sj_halloween_close{
	display: block;
}
.hallo-banner-3{
	background-image: url(../images/Icon.png);
    height: 54px;
    position: fixed;
    right: 50px;
    bottom: 10px;
    width: 53px;
	cursor:pointer;
	display:none;
}
.sj_halloween .character_1{
	background-image :url(../images/character_1.gif);
	width:64px;
	height:64px;
	top:0px;
	left:0px;
}
.sj_halloween .character_2{
	background-image :url(../images/character_2.gif);
	width:160px;
	height:120px;
	top:0px;
	left:50%;
}
.sj_halloween .character_3{
	background-image :url(../images/character_3.gif);
	width:120px;
	height:100px;
	top:0px;
	left:100%;
}
.sj_halloween .character_4{
	background-image :url(../images/character_4.gif);
	width:150px;
	height:100px;
	top:50%;
	left:0px;
}
.sj_halloween .character_5{
	background-image :url(../images/character_5.gif);
	width:50px;
	height:50px;
	top:0px;
	left:100%;
}
.sj_halloween .character_6{
	background-image :url(../images/character_6.gif);
	width:96px;
	height:96px;
	top:100%;
	left:0%;
}
.sj_halloween .character_7{
	background-image :url(../images/character_7.gif);
	width:50px;
	height:50px;
	top:100%;
	left:50%;
}
.sj_halloween .character_8{
	background-image :url(../images/character_8.gif);
	width:91px;
	height:115px;
	top:100%;
	left:100%;
}
.sj_halloween .character_9{
	background-image :url(../images/character_9.gif);
	width:206px;
	height:208px;
	top:20%;
	left:30%;
}
.sj_halloween .character_10{
	background-image :url(../images/character_10.gif);
	width:111px;
	height:143px;
	top:50%;
	left:70%;
}
@media only screen and (max-width: 980px) {
	.sj_halloween .hallo-banner-1{
		max-width:500px;
	}
}
@media only screen and (max-width: 360px) {
	.sj_halloween .hallo-banner-1{
		max-width:300px;
		overflow:hidden
	}
	.sj-hallo-content{
        display: none !important;
        overflow: auto
	}
}