/*******************************************************************************
 * DivAnimation CSS 2016.10.26 Yuichi Nakatani
 */

/* AnimationDiv base style */
.AnimationDivArea {
	position: relative;
	overflow: hidden;
	color: #FFFFFF;
	background:url(../img/bg/product_bg.png);
}

/* AnimationDiv Transition style */
.AnimationDivTransitionTop {
    -moz-transition: top 1s;
    -webkit-transition: top 1s;
    -o-transition: top 1s;
    -ms-transition: top 1s;
    transition: top 1s;
	color:#FFFFFF;
    background-color: rgba(51,51,51,0.80);
}
.AnimationDivTransitionLeft {
    -moz-transition: left 1s;
    -webkit-transition: left 1s;
    -o-transition: left 1s;
    -ms-transition: left 1s;
    transition: left 1s;
	color:#FFFFFF;
    background-color: rgba(51,51,51,0.80);
}
.AnimationDivTransitionOpacity {
    -moz-transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -o-transition: opacity 1s;
    -ms-transition: opacity 1s;
    transition: opacity 1s;
	color:#FFFFFF;
    background-color: rgba(51,51,51,0.80);
}
.AnimationDivTransitionBack {
    -moz-transition: top 1s, left 1s;
    -webkit-transition: top 1s, left 1s;
    -o-transition: top 1s, left 1s;
    -ms-transition: top 1s, left 1s;
    transition: top 1s, left 1s;
	color:#FFFFFF;
    background-color: rgba(51,51,51,0.80);
}
.AnimationDivTransitionSlick {
    -moz-transition: top 1s, left 1s;
    -webkit-transition: top 1s, left 1s;
    -o-transition: top 1s, left 1s;
    -ms-transition: top 1s, left 1s;
    transition: top 1s, left 1s;
}
.AnimationDivTransitionSlickStop {
    -moz-transition: none;
    -webkit-transition: none;
    -o-transition: none;
    -ms-transition: none;
    transition: none;
}

/* AnimationDiv* style */
.AnimationDivSlideUp {
    width:100%;
    height:50%;
}
.AnimationDivSlideDown {
    width:100%;
    height:60%;
}
.AnimationDivSlideLeft {
    width:60%;
    height:100%;
}
.AnimationDivSlideRight {
    width:60%;
    height:100%;
}
.AnimationDivOpacity {
    width:100%;
    height:100%;
	opacity:0;
}

/* AnimationDiv SlickBtn style */
.SlickBtnTop {
	width:25px;
	height:11px;
	opacity:0.7;
}
.SlickBtnLeft {
	width:11px;
	height:25px;
	opacity:0.7;
}
.SlickBtnBottom {
	width:25px;
	height:11px;
	opacity:0.7;
}
.SlickBtnRight {
	width:11px;
	height:25px;
	opacity:0.7;
}