@charset "utf-8";
html, body {width: 100%; height: var(--fullh); background: #000; touch-action: pan-x;}
#wrap {width: 100%; height: 100%; max-width: 550px; overflow: hidden; margin: auto; position: relative;}

/* s:quick */
#quick {position: absolute; z-index: 999; width: 100%; left: 0; bottom: 7%; opacity: 0;}
#quick .inner {width: calc(100% - 120px); margin: auto; display: flex; align-items: center; justify-content: space-between;}
#quick .btn {} 
#quick .btn a {display: block; width: 56px; height: 56px; border: 1px solid rgba(255,255,255,0.1); background-color: rgba(255,255,255,0.06); background-position: center; background-repeat: no-repeat; border-radius: 50%; color: rgba(0,0,0,0); box-sizing: border-box; background-size: 36px;}
#quick .btn.home-btn a {background-image: url(/img/icon_quick001.png); }
#quick .btn.call-btn a {background-image: url(/img/icon_quick02.png);}
#quick .btn.youtube a {background-image: url(/img/icon_quick003.png); }

@media screen and (max-width:480px){
  #quick {bottom: 4%;}
}

@media screen and (max-height:670px){
  #quick .btn a {width: 48px; height: 48px; background-size: 30px;}
}
/* e:quick */


/* s:intro */
#intro {position: fixed; max-width: 560px; width: 102%; height: 100%; transform: translateX(-50%); background: #030003; z-index: 99999; display: flex; align-items: center; justify-content: center; left: 50%; top: 0; opacity: 0;}
#intro .intro-wrap {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
#intro .bg {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: url(/img/intro_texture.png); background-position: center; background-size: auto 100%;}
#intro .bg::before {content:""; display: block; width: 100%; height: 100%; background-image: url(/img/intro_dust.png); background-position: center;  background-size: auto 100%;}
#intro .center {font-size: 0; position: relative;}
#intro .center .logo {display: flex; justify-content: center; align-items: center; } 
#intro .center .logo .text {display: inline-block; height: 57px; opacity: 0;}
#intro .center .logo .text img {height: 100%;}
#intro .center .logo .text.o {margin: 0 5px;}
#intro .center .logo .text.s {margin: 0 2px 0 4px;}
#intro .center .logo .text.x {margin-left: 14px;}
#intro .center .logo2 {position: absolute; left: 50%; top: 50%; opacity: 0; width: 80px;}
#intro .center .logo2 img {width: 100%;}
#intro .center .logo2 .front {filter:drop-shadow(0 0 24px rgba(255,255,255,0.48)); -webkit-filter: drop-shadow(0 0 24px rgba(255,255,255,0.48)); position: relative; z-index: 1;}
#intro .center .logo2 .back {position: absolute; left: 50%; top: 50%; z-index: 0; display: none;}



@media screen and (min-width:768px) {

}
@media screen and (min-width:480px) {
}
/* e:intro */


/* contents */
#wrap main {width: 100%; height: 100%;}
#wrap main:not(#main) {opacity: 0;}
/* #wrap main:not(#main) {transform: scale(1.05); transition: 0.8s ease;}
#wrap main:not(#main).page-in {transform: scale(1); } */

.nav {position: fixed; width: 100%; max-width: 550px; left: 50%; transform: translateX(-50%); display: flex; justify-content: space-between; top: 50px; z-index: 10000;}
.nav a {color: #fff; font-size: 18px;}


/********** main **********/
#main {background-color: #E9E9E9; background-image: url(/img/main_bg.jpg); background-position: center bottom; background-repeat: no-repeat; background-size: cover; perspective: 1000px;}
#main::after {content:""; width: 100%; height: 100%; background: #000; position: absolute; left: 0; top: 0; z-index: 9; }
#main.on::after {display: none;}


#main {
  --boxSize: 120px;
  --halfSize: calc(var(--boxSize)/2);
}
#main .box-container {width: 100%; height: 100%; margin: auto; position: relative; display: flex; flex-wrap: wrap; }
#main .box-container::after {content:""; z-index: 9; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.15); backdrop-filter: blur(6px); transition: 0.5s 0.5s; opacity: 0; pointer-events: none;}
#main .box-container .backdrop {width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; filter: url(#noise); opacity: 0; transition: 0.5s 0.5s; pointer-events: none; }

#main .box-container .box-item {position: absolute; left: 50%; top: 50%; z-index: 2; will-change: transform; }
#main .box-container .box-item:nth-child(1) {transform: translate(-140%,-180%);}
#main .box-container .box-item:nth-child(2) {transform: translate(50%, -180%);}
#main .box-container .box-item:nth-child(3) {transform: translate(-140%,40%);}
#main .box-container .box-item:nth-child(4) {transform: translate(50%,40%);}

#main .box-container .box-item .item-cont { transform: rotate(0deg);}
/* 뒷그림자 */
/* #main .box-container .box-item .item-cont::before {content:""; width: 160%; height: 140%; background: rgba(0, 0, 0, 0.3); border-radius: 40%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); filter: blur(10px); } */
#main .box-container .box-item .box { position: relative; transform-style: preserve-3d;  display: block; transform: rotateX(-15deg) rotateY(30deg);  width: var(--boxSize);  height: var(--boxSize); user-select: none;}

#main .box-container .box-item .box .tape { width: var(--boxSize); height: var(--boxSize); position: absolute; user-select: none; }
#main .box-container .box-item .box .tape.top {transform: translateY(calc(var(--halfSize)*-1)) rotateX(90deg) rotateY(0deg); display: flex; align-items: end; }
#main .box-container .box-item .box .tape.top .tobox {width: 100%; height: 100%; background-image: url(/img/tape_top.png); background-position: center bottom; background-repeat: no-repeat; background-size: 100% auto; }
#main .box-container .box-item .box .tape.top .toout {position: absolute; left: 0; top: 0; width: 100%; height: 0%; background-image: url(/img/tape_top.png); background-position: center top; background-repeat: no-repeat; background-size: 100% auto; transform-origin: 50% 0; transform: skewX(25deg);}
#main .box-container .box-item .box .tape.front {transform: translateZ(var(--halfSize)); display: flex; align-items: end; }
#main .box-container .box-item .box .tape.front .tobox {width: 100%; height: 100%; background-image: url(/img/tape_front.png); background-position: center; background-repeat: no-repeat; background-size: 100% auto;}
#main .box-container .box-item .box .tape.front .toout {background-image: url(/img/tape_front.png); background-position: center; background-repeat: no-repeat; background-size: 100% auto; position: absolute; left: 0; top: 0%; width: 100%; height: 0%; transform-origin: 50% 0%; transform: skewX(15deg);}

#main .box-container .box-item .box .surface { width: var(--boxSize); height: var(--boxSize);  position: absolute; background-color: #A6856D; background-image: url(/img/box_surface.jpg); cursor: pointer; user-select: none; background-position: center; background-repeat: no-repeat; }

#main .box-container .box-item .box .surface.front { transform: translateZ(var(--halfSize)); }
#main .box-container .box-item .box .surface.bottom {transform: translateY(var(--halfSize)) rotateX(90deg); }
#main .box-container .box-item .box .surface.top1 { transform: translateY(calc(var(--halfSize)*-1)) rotateX(90deg) rotateY(0deg); width: var(--halfSize); transform-origin: left;   transition-duration: 1s; }
#main .box-container .box-item .box .surface.top2 { transform: translateY(calc(var(--halfSize)*-1 + 1px)) translateX(var(--halfSize)) rotateX(90deg) rotateY(0deg); width: var(--halfSize);   transform-origin: right; transition-duration: 1s; border-left: 1px solid rgba(255,255,255,0.05); }
#main .box-container .box-item .box .surface.back {transform: translateZ(calc(var(--halfSize)*-1));}
#main .box-container .box-item .box .surface.left { transform: translateX(calc(var(--halfSize)*-1 + 1px)) rotateY(90deg);  }
#main .box-container .box-item .box .surface.right { transform: translateX(var(--halfSize)) rotateY(90deg); border-right: 1px solid rgba(0,0,0,0.2); }

#main .box-container .box-item .box .surface.front::before {content:""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: url(/img/box_front.jpg); background-position: center; background-size: auto 100%;}
#main .box-container .box-item .box .surface.left::before {content:""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: url(/img/box_side.jpg); background-position: center; background-size: cover;}
#main .box-container .box-item .box .surface.top1::before {content:""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: url(/img/box_top.jpg);  background-position: left center; background-size: auto 100%; background-repeat: no-repeat;}
#main .box-container .box-item .box .surface.top2::before {content:""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: url(/img/box_top.jpg);  background-position: right center; background-size: auto 100%; background-repeat: no-repeat;}
#main .box-container .box-item .box .surface.top2::after {content:""; width: 2px; height: 100%; left: 0; top: 0; background: linear-gradient(to top, #9C7048, #B88B60 98%, #B98C61); position: absolute;}

#main .box-container .box-item .box .surface.front::after {content:""; }


#main .box-container .box-item .box .hide-item {color: #fff; font-weight: 700;  position: absolute; left: 50%; top: 10%; transform: translate(-50%,-50%) rotateY(-30deg); line-height: 1;}

@media screen and (max-width:550px) {
  #main {
    --boxSize: 90px;
  }
}

/** main animation /*/
#main .box-container .box-item.item01 .item-cont {
  animation: movebox2 23s linear reverse infinite;
}
#main .box-container .box-item.item02 .item-cont {
  animation: movebox 25s linear infinite;
}
#main .box-container .box-item.item03 .item-cont {
  animation: movebox 20s linear reverse infinite;
}
#main .box-container .box-item.item04 .item-cont {
  animation: movebox2 19s linear infinite;
}
@keyframes movebox{
  0% { transform: translate(0, 0) rotateZ(0deg);} 
  20%{transform: translate(10px, 10px) rotateZ(2deg);}  
  40%{transform: translate(10px, 15px) rotateZ(-2deg);} 
  60%{transform: translate(-7px, 17px) rotateZ(2deg);} 
  80%{transform: translate(-10px, 7px) rotateZ(-2deg);} 
  100% {transform: translate(0, 0) rotateZ(0deg);}
}

@keyframes movebox2{
  0% {
    transform: translate(0, 0) rotateZ(0deg);
  } 
  20%{
    transform: translate(-7px, 10px) rotateZ(0deg);
  }  
  40%{
    transform: translate(5px, 5px) rotateZ(-4deg);
  } 
  60%{
    transform: translate(7px, 17px) rotateZ(0deg);
  } 
  80%{
    transform: translate(2px, -3px) rotateZ(0deg);
  } 
  100% {
    transform: translate(0, 0) rotateZ(0deg);
  }
}

#main .box-container .box-item.center { transform: translate(-50%,-50%) !important; transition: 0.8s ease-in-out;}

/* 날개 애님 */
#main .box-container .box-item .box .surface.top1.active { transform: translateY(calc(var(--halfSize)*-1)) rotateX(90deg) rotateY(-230deg);}
#main .box-container .box-item .box .surface.top2.active { transform: translateY(calc(var(--halfSize)*-1 + 1px)) translateX(var(--halfSize)) rotateX(90deg) rotateY(230deg);}

#main .box-container.active::after {opacity: 1;}
#main .box-container.active .backdrop {z-index: 10; opacity: 0.45; pointer-events: auto; }
#main .box-container .box-item.active  {z-index: 20;}
#main .box-container .box-item.active .item-cont {animation:none !important;}
#main .box-container .box-item.active .item-cont::before {opacity: 0;}

#main #mist {position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; } 



/********** scratch **********/
#scratch {background-color: #111; background-image: url(/img/scratch_bg.jpg); background-position: center bottom; background-repeat: no-repeat; background-size: cover; display: flex; align-items: center; justify-content: center; }
#scratch img {max-width: 100%;}

#scratch .envelope {font-size: 0; position: relative; width: 247px; /* opacity: 0; pointer-events: none; */}
#scratch .envelope .enve-item {font-size: 0;}
#scratch .envelope .enve-top {position: absolute; left: 50%; top: -2px; transform: translateX(-50%);  perspective: 800px; -webkit-perspective: 800px; z-index: 5; width: 100%;}
#scratch .envelope .enve-top .open {transform-style: preserve-3d; transform-origin: 50% 1px; position: relative;  backface-visibility: hidden; -webkit-backface-visibility: hidden;  visibility:visible; }
#scratch .envelope .enve-top .open img {position: relative; z-index: 1; backface-visibility: hidden;}
#scratch .envelope .enve-top .open::after {content:""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-image: url(/img/envelope_cover_back.png); backface-visibility: hidden; background-position: top center; background-size: 100% auto; transform: rotateY(180deg) translateZ(1px); background-repeat: no-repeat;}

#scratch .envelope .enve-front {position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: 4; width: 100%;}
#scratch .envelope .enve-wrap {position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden;  z-index: 3;}
#scratch .envelope .enve-in {position: absolute; left: 50%; top: 5%; transform: translateX(-50%); width: 82.6%;}

#scratch.active .envelope {opacity: 0; pointer-events: none;}
#scratch.active .scratch-container {opacity: 1; pointer-events: auto;}

#scratch .scratch-container {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 204px;  aspect-ratio:1/1.853; display: flex;  justify-content: center; align-items:center; opacity: 0; pointer-events: none;}
#scratch .scratch-container::before {content:""; position: absolute; top: 0; left: 0; width: 100%;  height: 100%; background-image: linear-gradient(160deg, transparent 40%, rgb(255 0 0 / .4) 50%, transparent 60%);  background-position: bottom right; background-size: 300% 300%; background-repeat: no-repeat; mask-image: url(/img/scratch_cover.png); z-index: 10; pointer-events: none;}
#scratch .scratch-container.shine::before {animation: shine 6s;}

#scratch #scratchBase { text-align: center; position: absolute; -webkit-user-select: unset; -ms-user-select: unset; user-select: unset; opacity: 1; width: 242px; margin: auto; font-size: 0; transform: scale(0.83);}
#scratch #scratchBase img {width: 100%;}
#scratch #scratchBase::after {content:""; position: absolute; top: 0; left: 0; width: 100%;    height: 100%; background-image: linear-gradient(135deg, transparent 40%, rgb(255 255 255 / .8) 50%, transparent 60%); background-position: bottom right; background-size: 300% 300%;   background-repeat: no-repeat; mask-image: url(/img/ticket.png);}

#scratch #scratchCanvas { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout: none; -webkit-user-select: none; z-index: 9;  top: 50%; left: 50%; transform: translate(-50%,-50%); position: absolute; width: 100%; aspect-ratio:1/1.853; }

/* scratch end */
@keyframes shine {
  50% {
    background-position: 0% 0%;
  }
  100% {
    background-position: -50% -50%;
  }
}
@keyframes popUp {
  0% {transform: scale(0.83);}
  50% {transform: scale(1.1);}
  100% {transform: scale(1);}
}
#scratch .scratch-container.end {}
#scratch .scratch-container.end #scratchCanvas {opacity: 0; transition: 0.4s; pointer-events: none;}
#scratch .scratch-container.end #scratchBase {animation: popUp 1s 0.4s ease-in-out forwards; }
#scratch .scratch-container.end #scratchBase::after {animation: shine 8s;}

@media screen and (max-height:670px) {
  #scratch .envelope {width: 220px;}
  #scratch .scratch-container {width: 181px;}
  #scratch .scratch-container::before {mask-size: 180px auto;}
  #scratch #scratchBase {width: 216px;}
  #scratch #scratchBase::after {mask-size:216px auto;}
}



/********** gacha **********/
#gacha {background-color: #111; background-image: url(/img/gacha_bg.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; position: relative;}

#gacha .gacha-wrap {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding-top: 10vh;}
#gacha #machine {/*width: 253px; */ height: 473px; position: relative; font-size: 0; max-height: calc(90% - 96px); }
#gacha #machine .back {font-size: 0; position: absolute; z-index: 1; left: 0; top: 0; height: 100%;}
#gacha #machine .back img {height: 100%;}
#gacha #machine .back::before {content:""; width: 100%; height: 56%; top: 12%; background: rgba(0,0,0,0.2); backdrop-filter: blur(50px); position: absolute; left: 0; touch-action:none;}
#gacha #machine .front {font-size: 0; position: relative; z-index: 3; pointer-events: none; height: 100%; touch-action:none;}
#gacha #machine .front img {height: 100%;} 
#gacha #machine .handle {font-size: 0; position: absolute; z-index: 5; right: 12%; bottom: 12%; cursor: pointer; background: url(/img/machine_button.png) center; background-size: cover; width: 22%;}
#gacha #machine .handle span {display: block; padding-top: 100%; width: 100%;}
#gacha #machine .mid {width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2;}
#gacha #machine .ball-box {position: absolute; width: 100%; height: 50%; top: 14%; }
#gacha #machine .ball-box .ball {width: 18.9%; border-radius: 50%; position: absolute;  background-size: cover; background-position: center; }
#gacha #machine .ball-box .ball span.size-ball {display: block; padding-top: 100%;}
#gacha #machine .ball-box .ball:not(.price) {background-image: url(/img/gacha_ball.png);}
#gacha #machine .ball-box .ball.price {}
#gacha #machine .ball-box .ball.price .right {content:""; position: absolute; right: 0; top: 0; background: url(/img/price_ball_right.png) center no-repeat; background-size: 100%; width: 50%; height: 100%;}
#gacha #machine .ball-box .ball.price .left {content:""; position: absolute; left: 0; top: 0; background: url(/img/price_ball_left.png) center no-repeat; background-size: 100%; width: 58%; height: 100%;}

#gacha .price-layer {position: fixed; width: 100vw; height: 100%; left: 50%; top: 0; pointer-events: none; transform: translateX(-50%); z-index: 10;}
#gacha .price-layer .light {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width:50px; height: 50px; border-radius: 50%; -webkit-backface-visibility: hidden;}
#gacha .price-layer .light span {position: absolute; left: 50%; top: 50%;  width: 100%; height: 100%; border-radius: 50%;}
#gacha .price-layer .light span:first-child { background: radial-gradient(rgba(255,255,255,0),rgba(255,255,255,0.6)); }
#gacha .price-layer .light span:last-child {border: 1px solid rgba(255,255,255,0.9);}
/* #gacha .price-layer .light::before {content:""; background: #fff; transform: translate(-50%,-50%); display: block; border-radius: 50%; width: 100%; height: 100%; -webkit-backface-visibility: hidden; transform-origin: center; animation: wave-animate 2s infinite ease-out; } */
#gacha .price-layer .ball.price {max-width: 48px; border-radius: 50%; position: absolute; background-size: cover; background-position: center; cursor: pointer;}
#gacha .price-layer .popup-text {opacity: 0; position: absolute; left: 50%; top: 50%; /*font-size: 50px; font-weight: 700; color: #fff; text-align: center; line-height: 1.2;*/ width: 258.5px; z-index: 1; }
#gacha .price-layer .popup-text img { width: 100%; }
#gacha .price-layer .popup-text img.shine {animation: gachaShine 2s linear alternate 2 forwards;}

@keyframes gachaShine {
  0% {filter:drop-shadow(0px 0px 0px rgba(255,255,255,0)); -webkit-filter:drop-shadow(0px 0px 0px rgba(255,255,255,0)); }
  50% {filter:drop-shadow(0px 0px 20px rgba(255,255,255,0.9)); -webkit-filter:drop-shadow(0px 0px 15px rgba(255,255,255,0.9)); }
}

@keyframes wave-animate {
  0% {
    transform: scale(0);
    opacity: 1;
    
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

@keyframes light {
  0% {
      background-image: linear-gradient(to bottom, rgba(255,255,255,0.8) 0%, #ffed17 100%)
  }
  25% {
    background-image: linear-gradient(to left, #ffed17 0%, #ffb009 100%)
  }
  50% {
    background-image: linear-gradient(to top, #ffb009 0%, #ffed17 100%)
  }
  75% {
    background-image: linear-gradient(to right, #ffed17 0%, #ffb009 100%)
  }
  100% {
    background-image: linear-gradient(to bottom, #ffb009 0%, #ffed17 100%)
  }
}

#gacha .price-layer .ball.price span.size-ball {display: block; padding-top: 100%;}
#gacha .price-layer .ball.price .right {position: absolute; right: 0; top: 0; background: url(/img/price_ball_right.png) center no-repeat; background-size: 100%; width: 50%; height: 100%;}
#gacha .price-layer .ball.price .left {position: absolute; left: 0; top: 0; background: url(/img/price_ball_left.png) center no-repeat; background-size: 100%; width: 58%; height: 100%;}

#gacha .price-layer.active {background: rgba(0,0,0,0.7); backdrop-filter: blur(3px); transition: 0.6s;}


@media screen and (max-width:500px) {
  #gacha .gacha-wrap {padding: 11px 0 22px;}
}




/********** broken **********/
#broken {background-color: #111; background-image: url(/img/broken_bg.png); background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; display: flex;}

#broken.inactive {pointer-events: none;}

#broken .broken-heart {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 0; width: 540px; z-index: 1; cursor: pointer; pointer-events: none;}
#broken .broken-heart .heart-box { width: 100%; }
#broken .broken-heart .heart-box img {width: 100%;}

#broken .bg {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: url(/img/heart_ending_bg.png); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0;}

#broken .text-layer {position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding-bottom: 5vh; pointer-events: none;}
#broken .text-layer .last {position: absolute; left: 0; top: 0; width: 100%; height: 100%;  display: flex; justify-content: center; align-items: center; font-size: 0; padding-bottom: 5vh;}
#broken .text-layer .last .img-box {font-size: 0; position: relative; }
#broken .text-layer .last .img-box img {width: 100%;}
#broken .text-layer .last .img-box .line {display: flex; justify-content: center; align-items: center; width: 262px; margin: auto; }
#broken .text-layer .last .img-box .line:nth-child(2) {margin: 27px auto; width: 47px;}
#broken .text-layer .last .img-box .line:nth-child(3) {width: 196px;}
#broken .text-layer .last .img-box .line span {display: block; height: 33px; margin: 0 2px; font-size: 0; width: fit-content;}
#broken .text-layer .last .img-box .line span.a {margin: 0 14px 0 -2px;}
#broken .text-layer .last .img-box .line span img {height: 100%;}

/* #broken .text-layer .last .img-box .img {width: 100%; position: relative; z-index: 1;}
#broken .text-layer .last .img-box .back {width: 100%; opacity: 0.5; z-index: 0; position: absolute; left: 50%; top: 50%;  } */
#broken.active .text-layer {pointer-events: auto;}
#broken .text-layer p {color: #7D7D7D; font-size: 20px; font-weight: 600; text-align: center; font-family: var(--pretendard); position: relative; z-index: 2;}




/********** paper **********/
#paper {background-color: #111; background-image: url(/img/paper_bg.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; position: relative;}
#paper .paper-wrap {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(-10deg);  width: 147px; height: 187px; perspective:800px; }
#paper .paper-wrap .item {width: 147px; height:187px; font-size: 20px; position: relative; backface-visibility: hidden; -webkit-backface-visibility: hidden; z-index: 1; perspective:800px;} 
#paper .paper-wrap .item .paper {width: 100%; height: 100%; transform-style: preserve-3d; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition-timing-function: linear; }
#paper .paper-wrap .item .paper img {width: 100%;}
#paper .paper-wrap .item .front { position: relative; font-size: 0;}
#paper .paper-wrap .item .back { position: absolute; left: 0; top: 0; transform: translateZ(-1px) rotateY(0deg); }

#paper .paper-wrap .item01 {position: absolute; left: 0; top: 0; transform: translateY(-100%);  z-index: 2; perspective-origin: 100% 100%;}
#paper .paper-wrap .item01 .paper { transform-origin: right bottom; transform: rotateX(-180deg);}
#paper .paper-wrap .item02 {position: absolute; left: 0; top: 0; transform: translate(100%,-100%); z-index: 2; perspective-origin: 0% 100%;}
#paper .paper-wrap .item02 .paper { transform-origin: left bottom; }
#paper .paper-wrap .item02 .img {height: 100%; display: flex; align-items: end;}
#paper .paper-wrap .item03 {position: absolute; left: 0; top: 0; transform: translateX(100%); perspective-origin: 0% 0%;}
#paper .paper-wrap .item03 .paper {transform-origin:left top; /*transform: rotateY(-180deg);*/ }

#paper .paper-wrap.active {transform: rotate(0deg) translate(-100%,0%); transition: 1.2s;}