@charset "UTF-8";
html,body{
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
}
img,video {
max-width: 100%;
display: block;
}
div,p,span{
box-sizing: border-box;
}
.bannerWrap {
width: 100%;
height: 100%;
max-width: 600px;
max-height: 500px;
margin: auto;
position: relative;
box-sizing: border-box;
overflow: hidden;
background-color: #FFF;
min-height: 250px;
}
video{
pointer-events: none;
}
*:focus {
outline: none;
}
#viewable {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 20;
background-image: url(../img/poster.jpg);
background-size: cover;
background-repeat: no-repeat;
}
#scene_01 {
position: relative;
}
#button_wrap {
position: absolute;
bottom: 15.5%;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 3.8% 0 5%;
user-select: none;
}
.button.button_left {
width: 39.0%;
}
.button_center {
width: 32%;
padding-right: 0.4%;
}
.button_right {
width: 27.3%;
padding-right: 0.8%;
}
.button{
position: relative;
}
.sceneActive .button{
position: relative;
animation: buttonAnimation 2s ease-in-out infinite;
}

@keyframes buttonAnimation{
0%{
transform: scale(1.00);
}
15%{
transform: scale(1.05);
}
20%{
transform: scale(1.00);
}
25%{
transform: scale(1.05);
}
30%{
transform: scale(1.00);
}
100%{
transform: scale(1.00);
}
}
.buttonOnImg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
user-select: none;
}
.clicked .button{
animation: none;
}
.active .buttonOffImg {
visibility: hidden;
}
.active .buttonOnImg {
opacity: 1;
}

#scene_02 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 20;
opacity: 0;
pointer-events: none;
user-select: none;
transition: all 0.5s;
}
#scene_02.active {
opacity: 1;
pointer-events: all;
user-select: all;
}
.cta_wrap {
position: absolute;
bottom: 17%;
width: 77%;
margin: auto;
left: 0;
right: 0;
animation: ctaButtonAnimation 3s ease-in-out infinite;
}
@keyframes ctaButtonAnimation{
0%{
transform: scale(1.00);
}
5%{
transform: scale(1.05);
}
10%{
transform: scale(1.00);
}
15%{
transform: scale(1.05);
}
20%{
transform: scale(1.00);
}
100%{
transform: scale(1.00);
}
}
.cta_wrap_inner {
position: relative;
}
.cta_arrow_circle {
display: block;
position: absolute;
top: 28%;
right: 6%;
width: 8%;
animation: arrow_circleAnimation 2s linear infinite;
}
@keyframes arrow_circleAnimation{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
.cta_arrow {
display: block;
position: absolute;
top: 28%;
right: 6%;
width: 8%;
}
.action.good {
display: block;
width: 70.29%;
background-image: url(../img/good.png);
position: absolute;
top: -160%;
left: -15%;
}
.action.pen {
display: block;
width: 70.29%;
background-image: url(../img/pen.png);
position: absolute;
top: -110%;
left: -15%;
}
.action.heart {
display: block;
width: 79.665%;
background-image: url(../img/heart.png);
position: absolute;
top: -280%;
left: -15%;
}
.active .action.good {
background-size: cover;
background-repeat: no-repeat;
background-position: bottom;
animation: iconAnimation 2s steps(34) 1;
position: absolute;
top: -150%;
left: -15%;
}
.active .action.pen {
background-size: cover;
background-repeat: no-repeat;
background-position: bottom;
animation: iconAnimation 2s steps(36) 1;
position: absolute;
top: -100%;
left: -15%;
}
.active .action.heart {
background-size: cover;
background-repeat: no-repeat;
background-position: bottom;
animation: iconAnimation 2s steps(41) 1;
position: absolute;
top: -280%;
left: -15%;
}
@keyframes iconAnimation {
to {
background-position: 0 -100%;
}
}
.clicked .button,
.selectNone {
pointer-events: none;
user-select: none;
}