@charset "utf-8";
#slider {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
html,body{
margin:0;
padding:0;
overflow:hidden;
position: relative;
}
img,video {
max-width:100%;
display:block;
user-select: none;
user-drag: none;
-webkit-user-drag: none;
-moz-user-select: none;
-webkit-touch-callout:none;
-webkit-user-select:none;
-moz-touch-callout:none;
-moz-user-select:none;
user-select:none;
}
div,p,span{
box-sizing:border-box;
}
.size{
pointer-events: none;
}
.bannerWrap {
width: 100%;
height: 100%;
max-width: 600px;
max-height: 500px;
margin: auto;
position: relative;
box-sizing: border-box;
overflow: hidden;
background-image: url(../img/bg.jpg);
background-size: cover;
background-repeat: no-repeat;
min-height: 250px;
}
*:focus {
outline: none;
}
.original-transform {
transform: rotateX(-10deg) rotateY(0deg);
}
.resultsPreviewTarget.threeDirection {
background-image: none;
}
.resultsPreviewTarget {
width: 100%;
height: 100%;
/*transition: .1s;*/
transform-style: preserve-3d;
will-change: transform;
transform: rotateY(30deg);
}
.resultsPreviewTarget>div:not(.transformOriginPoint) {
opacity: 0;
width: 100%;
height: 100%;
position: absolute;
letter-spacing: .05em;
transition: .2s;
}
.resultsPreviewTarget>div.front {
transform: translateZ(150px);
}
.resultsPreviewTarget .front.front01 {
transform: translateZ(145px);
}
.resultsPreviewTarget .front.front02 {
transform: translateZ(155px);
}
.resultsPreviewTarget .front.front03 {
transform: translateZ(160px);
}
.resultsPreviewTarget>div.back {
transform: translateZ(-150px) rotateY(180deg);
}
.resultsPreviewTarget .back.back01 {
transform: translateZ(-145px) rotateY(180deg);
}
.resultsPreviewTarget .back.back02 {
transform: translateZ(-155px) rotateY(180deg);
}
.resultsPreviewTarget .back.back03 {
transform: translateZ(-160px) rotateY(180deg);
}
.resultsPreviewTarget>div.rightSide {
transform: rotateY(90deg) translateZ(150px);
}
.resultsPreviewTarget .rightSide.right01 {
transform: rotateY(90deg) translateZ(145px);
}
.resultsPreviewTarget .rightSide.right02 {
transform: rotateY(90deg) translateZ(155px);
}
.resultsPreviewTarget .rightSide.right03 {
transform: rotateY(90deg) translateZ(160px);
}
.resultsPreviewTarget>div.leftSide {
transform: rotateY(-90deg) translateZ(150px);
}
.resultsPreviewTarget .leftSide.left01 {
transform: rotateY(-90deg) translateZ(145px);
}
.resultsPreviewTarget .leftSide.left02 {
transform: rotateY(-90deg) translateZ(80px);
width: 59%;
margin-top: 4%;
height: auto;
}
.resultsPreviewTarget .leftSide.left03 {
transform: rotateY(-90deg) translateZ(160px);
}
.resultsPreviewTarget .leftSide.left04 {
transform: rotateY(-90deg) translateZ(78px);
    width: 56.5%;
    margin-top: 4.5%;
pointer-events: none;
clip-path: polygon(0% 0%, 100% 0%, 100% 95%, 0% 95%);
height: auto;
}

.resultsPreviewTarget .leftSide.left02.movie_frame {
    transform: rotateY(-90deg) translateZ(115px);
    width: 100%;
    margin-top: 0%;
    height: auto;
}
.resultsPreviewTarget .leftSide.left04 {
    transform: rotateY(-90deg) translateZ(53px);
}
.voiceIcon {
    position: absolute;
    bottom: 24%;
    right: 6%;
    width: 41px;
}
.voiceIcon.s2 {
    bottom: 34%;
    right: 4%;
}
.voiceIcon.s3 {
    bottom: 36%;
    right: 4%;
}

body .resultsPreviewTarget.threeDirection>div {
opacity: 1;
}
.resultsPreviewTarget>div.cube {
width: 200px;
transform: translateX(50px);
align-items: flex-start;
background: none;
}
.resultsPreviewTarget .cube.cube_front {
transform: translateX(50px) translateZ(100px);
}
.resultsPreviewTarget .cube.cube_back {
transform: translateX(50px) translateZ(-100px) rotateY(180deg);
}
.resultsPreviewTarget .cube.cube_right {
transform: translateX(150px) translateZ(0px) rotateY(90deg);
}
.resultsPreviewTarget .cube.cube_left {
transform: translateX(-50px) translateZ(0px) rotateY(-90deg);
}
#movie {
background-image: url(../img/poster.jpg);
background-size: cover;
max-width: initial;
    width: 100%;
}
#wkSlider2 {
position: relative;
}
span.ui-slider-handle.ui-corner-all.ui-state-default {
display: block;
width: 20px;
height: 20px;
background-color: #F00;
position: absolute;
}
#wkValue {
padding-top: 30px;
}
.wrap {
width: 100%;
margin: auto;
perspective: 800px;
transform: scale(0.815);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.button {
background-color: #FFF;
color: #000;
padding: 10px;
border-radius: 5px;
cursor: pointer;
}
#area {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
overflow: hidden;
pointer-events: none;
}
#target {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 100000px;
transform: translateX(-50000px);
opacity: 0;
}
.ctaWrap {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
z-index: 150;
pointer-events: none;
}
.ctaInner {
position: relative;
}
.ctaAnimation {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.ctaButon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    animation: ctaAnimation 1s linear infinite;
transform-origin: 80% 95%;
}
@keyframes ctaAnimation {
0% {
transform: scale(1.0);
}
80% {
transform: scale(1.0);
}
90% {
transform: scale(1.1);
}
100% {
transform: scale(1.0);
}
}
.voiceMp3{
display: none;
}
/*#hand{
position: absolute;
z-index: 10;
pointer-events: none;
transition: 0.1s;
top: 0;
left: 0;
right: 0;
bottom: 0;
}*/

#hand_move {
	pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
}
.handInner{
	position: relative;
}
.hand_obi{
	position: absolute;
	top: 0;
	animation: hand_obiAnimation 3s 0.7s linear infinite;
}
.hand{
	position: relative;
	animation: handAnimation 3s linear infinite;
}
@keyframes handAnimation{
0%{transform: translateX(0%);}
25%{transform: translateX(-20%);}
50%{transform: translateX(0%);}
75%{transform: translateX(20%);}
100%{transform: translateX(0%);}
}

@keyframes hand_obiAnimation{
0%{transform: translateX(0%);}
25%{transform: translateX(-25%);}
50%{transform: translateX(0%);}
75%{transform: translateX(25%);}
100%{transform: translateX(0%);}
}




.ctaCover span {
position: absolute;
z-index: 20;
display: block;
}
.cover_top {
top: 0;
left: 0;
right: 0;
height: 10px;
}
.cover_left {
top: 0;
left: 0;
bottom: 0;
width: 10px;
}
.cover_right {
top: 0;
right: 0;
bottom: 0;
width: 10px;
}
.cover_bottom {
bottom: 0;
left: 0;
right: 0;
height: 10px;
}