@charset "utf-8";


.opening {
	position:relative;
	width:100%;
	}


	
.bar {
	width:100%;
	height:100%;
	top:0;
	right:0;
	}


.bar1 {	
	position:fixed;
	background-color:#121212;
	z-index:10000;
	
	}
	
.bar1.active {
	animation: bar 0.4s ease 0.2s 1 forwards;
	-webkit-animation: bar 0.4s ease 0.2s 1 forwards;
	-moz-animation: bar 0.4s ease 0.2s 1 forwards;
	}
	
	
.bar2 {
	position:fixed;
	background-color:#cf0226;
	z-index:9000;
	background-image:url(../image/open_bg.png) , url(../image/open_bg_base.jpg?01);
	background-position: center center;
	background-attachment:fixed;
	background-repeat:no-repeat , repeat;
	}
	
.bar2.active {
	animation: bar 0.4s ease 0.6s 1 forwards;
	-webkit-animation: bar 0.4s ease 0.6s 1 forwards;
	-moz-animation: bar 0.4s ease 0.6s 1 forwards;
	}
	
	
.barClose {
	width:0%;
	left:0;
	right:auto;
	position:fixed;
	background-color:#121212;
	z-index:10000;
	}
	
.barClose.active {
	animation: barClose 0.4s ease 0s 1 forwards;
	-webkit-animation: barClose 0.4s ease 0s 1 forwards;
	-moz-animation: barClose 0.4s ease 0s 1 forwards;
	}
	
article {
	visibility:hidden;
	}
	
article.active {
	animation: anime3 0s ease 0.5s 1 forwards;
	-webkit-animation: anime3 0s ease 0.5s 1 forwards;
	-moz-animation: anime3 0s ease 0.5s 1 forwards;
	}


@keyframes bar {
	
	0% {width:100%;}
	100% {width:0%;}

}

@keyframes barClose {
	
	0% {width:0%;}
	100% {width:100%;}

}
	
@keyframes anime3 {
	
	100% { visibility: visible;}

}


.linkBtn {
	display:inline-block;
	position:relative;
	box-shadow: 4px 4px 2px rgba(0,0,0,0.3);
	-webkit-box-shadow: 4px 4px 2px rgba(0,0,0,0.3);
	-moz-box-shadow: 4px 4px 2px rgba(0,0,0,0.3);
	transition: all 0.4s ease;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	transform: translate(0,0);
	-webkit-transform: translate(0,0);
	-moz-transform: translate(0,0);
	}
	
.linkBtn:hover {
	box-shadow: 0px 0px 2px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.3);
	transform: translate(4px,4px);
	-webkit-transform: translate(4px,4px);
	-moz-transform: translate(4px,4px);
	}
	
.linkBtn:after {
	content: "";
	display:block;
	position:absolute;
	bottom:0;
	left:0;
	height:100%;
	width:0%;
	transition: width 0.4s ease;
	-webkit-transition: width 0.4s ease;
	-moz-transition: width 0.4s ease;
	}
	
.linkBtn.more:after {
	background:url(../image/lm_btn_ov.jpg?01) 0 0 no-repeat;
	}
	
.linkBtn.online:after {
	background:url(../image/products_btn_ov.jpg?01) 0 0 no-repeat;
	}
		
.linkBtn:hover:after {
	width:100%;
	}
	
.productBox a {
	display:block;
	width:100%;
	height:100%;
	position:relative;
	overflow:hidden;
	transition: all 0.4s ease;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.4);
	}
	
.productBox a:hover {
	box-shadow: 0px 0px 8px 0 rgba(0, 0, 0, 0.8);
	-webkit-box-shadow: 0px 0px 8px 0 rgba(0, 0, 0, 0.8);
	-moz-box-shadow: 0px 0px 8px 0 rgba(0, 0, 0, 0.8);
	transform: translate(10px,10px);
	-webkit-transform: translate(10px,10px);
	-moz-transform: translate(10px,10px);
	}

.productBox a:hover:after {
	transform:scale(1.5,1.5);
	-webkit-transform:scale(1.5,1.5);
	-moz-transform:scale(1.5,1.5);
	}
	
.productBox a img {
	width:100%;
	position:relative;
	z-index:10;
	}


.productBox a:after {
	content: "";
	display:block;	
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background-image:url(../image/products_img_01.jpg?01);
	background-size:100% 100%;
	background-position:center center;
	transition: transform 1s ease;
	-webkit-transition: transform 1s ease;
	-moz-transition: transform 1s ease;
	}

.productBox.box1 a:after {
	background-image:url(../image/products_img_01.jpg?01);
	}
	
.productBox.box2 a:after {
	background-image:url(../image/products_img_02.jpg?01);
	}
	
.productBox.box3 a:after {
	background-image:url(../image/products_img_03.jpg?01);
	}
	
.productBox.box4 a:after {
	background-image:url(../image/products_img_04.jpg?01);
	}
	
.productBox.box5 a:after {
	background-image:url(../image/products_img_05.jpg?01);
	}
	
.productBox.box6 a:after {
	background-image:url(../image/products_img_06.jpg?01);
	}
	
.productBox.box7 a:after {
	background-image:url(../image/products_img_07.jpg?01);
	}
	
.productBox.box8 a:after {
	background-image:url(../image/products_img_08.jpg?01);
	}
	
.productBox.box9 a:after {
	background-image:url(../image/products_img_09.jpg?01);
	}
	
.productBox.box10 a:after {
	background-image:url(../image/products_img_10.jpg?01);
	}

.productBox.box11 a:after {
	background-image:url(../image/products_img_11.jpg?01);
}

.productBox.box12 a:after {
	background-image:url(../image/products_img_12.jpg?01);
}

.productBox.box13 a:after {
	background-image:url(../image/products_img_13.jpg?01);
}

.productBox.box14 a:after {
	background-image:url(../image/products_img_14.jpg?01);
}

.productBox.box15 a:after {
	background-image:url(../image/products_img_15.jpg?01);
}

.productBox.box16 a:after {
	background-image:url(../image/products_img_16.jpg?01);
}

.productBox.box17 a:after {
	background-image:url(../image/products_img_17.jpg?01);
}

.productBox.box18 a:after {
	background-image:url(../image/products_img_18.jpg?01);
}
	
.productBox.box19 a:after {
	background-image:url(../image/products_img_19.jpg?01);
}

.hoverShadow {
	transition: all 0.4s ease;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	box-shadow: 4px 4px 2px rgba(0,0,0,0.3);
	-webkit-box-shadow: 4px 4px 2px rgba(0,0,0,0.3);
	-moz-box-shadow: 4px 4px 2px rgba(0,0,0,0.3);
	transform: translate(0,0);
	-webkit-transform: translate(0,0);
	-moz-transform: translate(0,0);
	}

.hoverShadow:hover {
	box-shadow: 0px 0px 2px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.3);
	transform: translate(4px,4px);
	-webkit-transform: translate(4px,4px);
	-moz-transform: translate(4px,4px);
	}