@charset "utf-8";

html, body { margin: 0; padding: 0; }
* { margin: 0; padding: 0; }


#main {
	width: 100%;
	background: transparent url(/~/Media/com/jinmart/img/main_bg.png) 50% 0 repeat-x;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);
}
#main:after {
    content: ".";
    display: block;
    margin-top: -1em;
    line-height: 1;
    color: transparent;
}
#main .anim {
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 1024px;
}

#main .anim .m-base {
	position: static;
	width: 100%;
}

#main .anim .m-img01 {
	top: 0; left: 0;
	width: 100%;
}
#main .anim .m-word01 {
	top: 0; right: 0;
	width: 50%;
}

#main .anim .m-img-wp {
	position: absolute;
	overflow: hidden;
	top: 0; left: 0;
	width: 100%; height: 100%;
}
#main .anim .m-img-wp .m-img02 {
	top: 0; left: 0;
	width: 100%;
}
#main .anim .m-img-wp .m-img02-bg {
	top: 0; left: -50%;
	width: 50%;
}
#main .anim .m-word02 {
	top: 0; left: 0;
	width: 50%;
	animation: shake 0.2s infinite;
	-webkit-animation: shake 0.2s infinite;
}

#main .anim .m-zoom {
	position: absolute;
	top: 0; left: 0;
	width: 70%; height: 100%;
}
#main .anim .m-zoom .m-zoom-base {
	position: absolute;
	bottom: 0; left: 0;
	width: 100%;
}
#main .anim .m-zoom .m-zoom-word-wp {
	position: absolute;
	bottom: 0; left: 0;
	width: 100%; height: 100%;
}
#main .anim .m-zoom .m-zoom-img01,
#main .anim .m-zoom .m-zoom-img02,
#main .anim .m-zoom .m-zoom-word {
	bottom: 0; left: 0;
	width: 100%;
}

#main .anim .m-item {
	top: 0; left: 0;
	width: 100%;
}
#main .anim .m-copy {
	bottom: 0; left: 0;
	width: 100%;
}

#main .anim .m-fix-img {
	bottom: 0; left: 0;
	width: 50%;
}
#main .anim .m-fix-ttl {
	top: 0; right: 0;
	width: 60%;
}
#main .anim .m-fix-item,
#main .anim .m-fix-txt {
	bottom: 0; right: 0;
	width: 60%;
}

@keyframes shake {
	0%    { margin-top: 4px; margin-left: 4px; }
	25%   { margin-top: 4px; margin-left: 0px; }
	50%   { margin-top: 0px; margin-left: 4px; }
	75%   { margin-top: -4px; margin-left: -4px; }
	100%  { margin-top: 4px; margin-left: 4px; }
}
@-webkit-keyframes shake {
	0%    { margin-top: 4px; margin-left: 4px; }
	25%   { margin-top: 4px; margin-left: 0px; }
	50%   { margin-top: 0px; margin-left: 4px; }
	75%   { margin-top: -4px; margin-left: -4px; }
	100%  { margin-top: 4px; margin-left: 4px; }
}
