.wrap{height:650px;position: relative;overflow: hidden;}
.wrapper{height: 100%;position: relative;overflow: hidden;}
.content{position: relative;width: 1200px;margin: 0 auto;}

.product_list{position: relative;height: 100%;}
.product_box{position: absolute;width: 100%;height: 100%;top: 0;left: -9999px;}
.bg_box{position: absolute;width: 100%;height: 100%;top: 0;left: 0;background-position: center center;background-repeat: no-repeat;}
.bg_main{width: 1000px;height: 100%;position: absolute;top: 0;left: 50%;margin-left: -500px;background-position: center center;background-repeat: no-repeat;}
.bg_box img{position: absolute;top: 50%;left: 50%;}

.product_box .content{width: 1000px;height: 100%;position: absolute;top: 0;left: 50%;margin-left: -500px;z-index: 5;transform-origin: center center;-webkit-transform-origin: center center;}
.product_box .main_box{position: relative;height: 100%;left: -9999px;top: 50%;}
.product_list .show{left: 0;}
.product_list .show .main_box{left: 0;}
.product_box h2{position: absolute;top: 50%;left: 50%;background-size: 100% 100%;}
.product_box h2 span{position: absolute;}
.btn_product{position: absolute;top: 50%;left: 50%;text-align: center;border-width: 1px;border-style: solid;transition: transform .3s;-webkit-transition: transform .3s;}
.btn_product:hover{text-decoration: none;transform: scale(1.04);-webkit-transform: scale(1.04);}
.product_box.show h2{animation:tt_effect .6s .3s linear both;-webkit-animation:tt_effect .6s .3s linear both;}
.product_box.show .btn_product{animation:opacity .5s 1s linear both;-webkit-animation:opacity .5s 1s linear both;}

@keyframes pulse{
	0%{transform:scale(1);}
	50%{transform:scale(1.1);}
	100%{transform:scale(1);}
}
@-webkit-keyframes pulse{
	0%{-webkit-transform:scale(1);}
	50%{-webkit-transform:scale(1.1);}
	100%{-webkit-transform:scale(1);}
}

@keyframes swing{
	20%,40%,60%,80%,100%{transform-origin:top center;}
	20%{transform:rotate(15deg);}
	40%{transform:rotate(-10deg);}
	60%{transform:rotate(5deg);}
	80%{transform:rotate(-5deg);}
	100%{transform:rotate(0deg);}
}
@-webkit-keyframes swing{
	20%,40%,60%,80%,100%{-webkit-transform-origin:top center;}
	20%{-webkit-transform:rotate(15deg);}
	40%{-webkit-transform:rotate(-10deg);}
	60%{-webkit-transform:rotate(5deg);}
	80%{-webkit-transform:rotate(-5deg);}
	100%{-webkit-transform:rotate(0deg);}
}

@keyframes flash{
	0%,66.66%{opacity: 0;}
	33.33%,100%{opacity: 1;}
}
@-webkit-keyframes flash{
	0%,66.66%{opacity: 0;}
	33.33%,100%{opacity: 1;}
}

@keyframes tada{
	0%{transform:scale(1);}
	10%,20%{transform:scale(0.9) rotate(-3deg);}
	30%,50%,70%,90%{transform:scale(1.1) rotate(3deg);}
	40%,60%,80%{transform:scale(1.1) rotate(-3deg);}
	100%{transform:scale(1) rotate(0);}
}
@-webkit-keyframes tada{
	0%{-webkit-transform:scale(1);}
	10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);}
	30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);}
	40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);}
	100%{-webkit-transform:scale(1) rotate(0);}
}

@keyframes rotateX{
	0%{transform: perspective(400px) rotateX(90deg);}    
    40%{transform: perspective(400px) rotateX(-30deg);}
    70%{transform: perspective(400px) rotateX(30deg);}
    100%{transform: perspective(400px) rotateX(0deg);}
}
@-webkit-keyframes rotateX{
	0%{-webkit-transform: perspective(400px) rotateX(90deg);}    
    40%{-webkit-transform: perspective(400px) rotateX(-30deg);}
    70%{-webkit-transform: perspective(400px) rotateX(30deg);}
    100%{-webkit-transform: perspective(400px) rotateX(0deg);}
}

@keyframes rotateY{
	0%{transform: perspective(400px) rotateY(90deg);}    
    40%{transform: perspective(400px) rotateY(-20deg);}
    70%{transform: perspective(400px) rotateY(20deg);}
    100%{transform: perspective(400px) rotateY(0deg);}
}
@-webkit-keyframes rotateY{
	0%{-webkit-transform: perspective(400px) rotateY(90deg);}    
    40%{-webkit-transform: perspective(400px) rotateY(-20deg);}
    70%{-webkit-transform: perspective(400px) rotateY(20deg);}
    100%{-webkit-transform: perspective(400px) rotateY(0deg);}
}

@keyframes bounce{
	0%,20%,50%,80%,100%{transform:translateY(0);}
	40%{transform:translateY(-20px);}
	60%{transform:translateY(-10px);}
}
@-webkit-keyframes bounce{
	0%,20%,50%,80%,100%{-webkit-transform:translateY(0);}
	40%{-webkit-transform:translateY(-20px);}
	60%{-webkit-transform:translateY(-10px);}
}

@keyframes bounceInDown{
	0%{opacity:0;transform:translateY(-2000px);}
	60%{opacity:1;transform:translateY(30px);}
	80%{transform:translateY(-10px);}
	100%{transform:translateY(0);}
}
@-webkit-keyframes bounceInDown{
	0%{opacity:0;-webkit-transform:translateY(-2000px);}
	60%{opacity:1;-webkit-transform:translateY(30px);}
	80%{-webkit-transform:translateY(-10px);}
	100%{-webkit-transform:translateY(0);}
}


@keyframes opacity{
	0%{opacity: 0;}
	100%{opacity: 1;}
}
@-webkit-keyframes opacity{
	0%{opacity: 0;}
	100%{opacity: 1;}
}

@keyframes tt_effect{
	0%{transform:translateY(-20px);opacity:0;}
	100%{transform:translateY(0);opacity:1;}
}
@-webkit-keyframes tt_effect{
	0%{-webkit-transform:translateY(-20px);opacity:0;}
	100%{-webkit-transform:translateY(0);opacity:1;}
}

@keyframes bg_effect{
	0%{transform:scale(1,1);}
	100%{transform:scale(1.05,1.05);}
}
@-webkit-keyframes bg_effect{
	0%{-webkit-transform:scale(1,1);}
	100%{-webkit-transform:scale(1.05,1.05);}
}