.font-johto{-webkit-font-smoothing:none;font-smooth:never;backface-visibility:hidden;font-family:Johto Mono Web,monospace;font-size:16px;font-weight:400}.dotmatrix{color:#242803;background:#a7b72d}.screen{font-size:8px}
.language-cards{cursor:pointer;width:109%;height:10rem;margin-left:-9%;font-size:1rem}.language-cards .card{transform-style:preserve-3d;text-align:center;background:0 0;border-radius:.65rem;width:9.5rem;height:6.5rem;font-size:1.5rem;transition:all .3s;position:relative}.language-cards .card.card-arabic{transform:translate3d(0,.5rem,-5rem)rotateY(0)rotate(-12deg);box-shadow:-.1rem 4px 6px #3232321c,-.1rem 1px 3px #00000014}.language-cards .card.card-cyrillic{transform:translateZ(-5rem)rotateY(0)rotate(-5deg);box-shadow:-.05rem 4px 6px #3232321c,-.05rem 1px 3px #00000014}.language-cards .card.card-hangul{transform:translateZ(-5rem)rotateY(0)rotate(2deg);box-shadow:.05rem 4px 6px #3232321c,.05rem 1px 3px #00000014}.language-cards .card.card-katakana{transform:translate3d(0,.6rem,-5rem)rotateY(0)rotate(10deg);box-shadow:.1rem 4px 6px #3232321c,.1rem 1px 3px #00000014}.language-cards .col-xs-3{perspective:35rem}.language-cards .col-xs-3:hover .card.card-arabic{transform:translateY(.7rem)rotateY(180deg)rotate(10deg);box-shadow:.1rem 4px 1rem #3232321c,-.1rem 1px .5rem #00000014}.language-cards .col-xs-3:hover .card.card-cyrillic{transform:translate(0,0)rotateY(180deg)rotate(3deg);box-shadow:.05rem 4px 1rem #3232321c,-.05rem 1px .5rem #00000014}.language-cards .col-xs-3:hover .card.card-hangul{transform:translate(0,0)rotateY(180deg)rotate(0);box-shadow:-.05rem 4px 1rem #3232321c,.05rem 1px .5rem #00000014}.language-cards .col-xs-3:hover .card.card-katakana{transform:translateY(.7rem)rotateY(180deg)rotate(-6deg);box-shadow:-.1rem 4px 1rem #3232321c,.1rem 1px .5rem #00000014}.language-cards .front,.language-cards .back{backface-visibility:hidden;background:#fff;border-radius:.65rem;justify-content:center;align-items:center;padding:1rem;display:flex;position:absolute;inset:0}.language-cards .front{transform:rotateY(0)}.language-cards .back{transform:rotateY(180deg)}#heroAnimation{position:relative}#heroAnimation .animation-wrap{width:100vw;height:35.7vw;margin:0 auto 2.82405rem;position:relative}#heroAnimation .animation{margin:0 auto;position:relative}#heroAnimation .fishbrowser{width:50vw;display:inline-block}#heroAnimation .browserwrap{background:#eee;border-radius:1vw;position:relative;overflow:hidden}#heroAnimation .locker{position:absolute}#heroAnimation .locker-wrap{position:relative}#heroAnimation .photo{z-index:7;opacity:0;position:absolute;top:0;left:0;right:0}#heroAnimation .tray{z-index:6;width:50vw;position:absolute;bottom:-18vw}#heroAnimation .parcel{position:absolute}#heroAnimation .methods{z-index:6;width:25vw;height:18vw;display:inline-block;position:relative}#heroAnimation .method{background:#3c7a8d;border-radius:1vw;width:15vw;position:absolute}#heroAnimation .methodA{z-index:1;top:0;right:1.25vw}#heroAnimation .methodB{z-index:2;top:1.8vw;right:3.75vw}#heroAnimation .methodC{z-index:3;top:3.6vw;right:6.25vw}#heroAnimation .methodD{z-index:4;top:5.4vw;right:8.75vw}#heroAnimation .shops{width:25vw;height:18vw;display:inline-block;position:relative}#heroAnimation .shop{border-radius:.8vw;width:15vw;position:absolute}#heroAnimation .shop img{border-radius:.6vw}#heroAnimation .shopA{z-index:1;top:0;left:1.25vw}#heroAnimation .shopB{z-index:2;top:1.8vw;left:3.75vw}#heroAnimation .shopC{z-index:3;top:3.6vw;left:6.25vw}#heroAnimation .shopD{z-index:4;top:5.4vw;left:8.75vw}#heroAnimation .items{z-index:5;position:absolute;inset:0}#heroAnimation .item{opacity:0;border-radius:10vw;width:6.5vw;padding:1vw;position:absolute;top:69vw;left:23vw}@media (min-width:1000px){#heroAnimation .animation-wrap{width:1000px;height:357px}#heroAnimation .fishbrowser{width:500px}#heroAnimation .browserwrap{border-radius:10px}#heroAnimation .tray{width:500px;bottom:-180px}#heroAnimation .methods{width:250px;height:180px}#heroAnimation .method{border-radius:10px;width:150px}#heroAnimation .methodA{top:0;right:12.5px}#heroAnimation .methodB{top:18px;right:37.5px}#heroAnimation .methodC{top:36px;right:62.5px}#heroAnimation .methodD{top:54px;right:87.5px}#heroAnimation .shops{width:250px;height:180px}#heroAnimation .shop{border-radius:8px;width:150px}#heroAnimation .shop img{border-radius:6px}#heroAnimation .shopA{top:0;left:12.5px}#heroAnimation .shopB{top:18px;left:37.5px}#heroAnimation .shopC{top:36px;left:62.5px}#heroAnimation .shopD{top:54px;left:87.5px}#heroAnimation .item{border-radius:100px;width:65px;padding:10px;top:690px;left:230px}}