@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes show{0%{opacity:0}to{opacity:1}}@keyframes hide{0%{opacity:1}to{opacity:0}}@keyframes move-top{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes move-right{0%{transform:translate(0%)}to{transform:translate(-100%)}}@keyframes move-bottom{0%{transform:translateY(0%)}to{transform:translateY(100px)}}@keyframes move-left{0%{transform:translate(100%)}to{transform:translate(0%)}}@keyframes moving-right{0%{opacity:0;transform:translate(-25%)}5%{opacity:1}95%{opacity:1}to{opacity:0;transform:translate(25%)}}@keyframes moving-left{0%{opacity:0;transform:translate(25%)}5%{opacity:1}95%{opacity:1}to{opacity:0;transform:translate(-25%)}}@keyframes shadow-moving-right{0%{opacity:0;text-shadow:-30px 0 10px #1b1b1b4d}5%{opacity:1}95%{opacity:1;text-shadow:-10px 0 10px #1b1b1b4d}to{opacity:0;text-shadow:10px 0 30px #1b1b1b1a}}@keyframes shadow-moving-left{0%{opacity:0;text-shadow:30px 0 10px #1b1b1b4d}5%{opacity:1}95%{opacity:1;text-shadow:10px 0 10px #1b1b1b4d}to{opacity:0;text-shadow:10px 0 30px #1b1b1b1a}}@keyframes shadow-moving-right-mobile{0%{opacity:0;text-shadow:-15px 0 5px #1b1b1b33}5%{opacity:1}95%{opacity:1;text-shadow:-5px 0 5px #1b1b1b33}to{opacity:0;text-shadow:5px 0 10px #1b1b1b1a}}@keyframes shadow-moving-left-mobile{0%{opacity:0;text-shadow:15px 0 5px #1b1b1b33}5%{opacity:1}95%{opacity:1;text-shadow:5px 0 5px #1b1b1b33}to{opacity:0;text-shadow:5px 0 10px #1b1b1b1a}}@keyframes slide-right{0%{opacity:0;margin-left:-100%}to{opacity:.2;margin-left:30%}}@keyframes screen-cover{0%{border-radius:10%;transform:rotate(-240deg)translate(-40%,-220%)scale(2)}50%{border-radius:0%;transform:rotate(-320deg)translateY(-10%)scale(1.7)}to{border-radius:10%;transform:rotate(-405deg)translate(-40%,-220%)scale(2)}}@keyframes screen-cover-xl{0%{border-radius:10%;transform:rotate(-240deg)translate(-40%,-220%)scale(2)}50%{border-radius:0%;transform:rotate(-320deg)translateY(-10%)scale(1.8)}to{border-radius:10%;transform:rotate(-405deg)translate(-40%,-220%)scale(2)}}@keyframes screen-cover-l{0%{border-radius:10%;transform:rotate(-240deg)translate(-40%,-220%)scale(2)}50%{border-radius:0%;transform:rotate(-320deg)translateY(-10%)scale(2)}to{border-radius:10%;transform:rotate(-405deg)translate(-40%,-220%)scale(2)}}@keyframes screen-cover-m{0%{border-radius:10%;transform:rotate(-240deg)translate(-40%,-250%)scale(2)}50%{border-radius:0%;transform:rotate(-320deg)translateY(-10%)scale(2.3)}to{border-radius:10%;transform:rotate(-405deg)translate(-40%,-250%)scale(2)}}@keyframes screen-cover-s{0%{border-radius:10%;transform:rotate(-240deg)translate(-40%,-300%)scale(1.1)}50%{border-radius:0%;transform:rotate(-320deg)translate(-50%,-70%)scale(2.8)}to{border-radius:10%;transform:rotate(-405deg)translate(-40%,-300%)scale(1.1)}}@keyframes focusing{0%{background-color:#0000}50%{background-color:#1b1b1b33}to{background-color:#0000}}@keyframes neon{0%{text-shadow:0 0 10px #bdbdbd,0 0 20px #bdbdbd}to{text-shadow:0 0 5px #bdbdbd,0 0 10px #bdbdbd}}.video-area .canvas-frame{z-index:-1;filter:grayscale();display:inline-block;position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%);box-shadow:0 0 2.5rem #1b1b1b4d}.video-area .canvas-frame.will-change{will-change:transform}.video-area .canvas-frame.will-change canvas{will-change:contents}.video-area .canvas-frame:before{content:"";background-color:#1b1b1b80;width:100%;height:100%;transition:background-color .6s cubic-bezier(.4,0,.2,1);position:absolute;top:0;left:0}.video-area .canvas-frame.target1{width:50%;margin-top:-25%;margin-left:-10%}@media (max-width:1596px){.video-area .canvas-frame.target1{margin-top:-30%}}@media (max-width:1200px){.video-area .canvas-frame.target1{margin-top:-40%}}@media (max-width:984px){.video-area .canvas-frame.target1{margin-top:-60%}}@media (max-width:768px){.video-area .canvas-frame.target1{width:55%;margin-top:-80%;margin-left:-12%}}@media (max-width:576px){.video-area .canvas-frame.target1{width:65%;margin-top:-125%;margin-left:-16%}}@media (max-width:320px){.video-area .canvas-frame.target1{width:60%;margin-top:-110%;margin-left:-14%}}.video-area .canvas-frame.target2{width:35%;margin-top:-15%;margin-left:-33%}@media (max-width:1596px){.video-area .canvas-frame.target2{margin-top:-20%}}@media (max-width:1200px){.video-area .canvas-frame.target2{margin-top:-30%}}@media (max-width:984px){.video-area .canvas-frame.target2{margin-top:-50%}}@media (max-width:768px){.video-area .canvas-frame.target2{width:40%;margin-top:-70%;margin-left:-35%}}@media (max-width:576px){.video-area .canvas-frame.target2{width:50%;margin-top:-105%;margin-left:-39%}}@media (max-width:320px){.video-area .canvas-frame.target2{width:45%;margin-top:-100%;margin-left:-37%}}.video-area .canvas-frame.target3{width:25%;margin-top:-18%;margin-left:32%}@media (max-width:1596px){.video-area .canvas-frame.target3{margin-top:-23%}}@media (max-width:1200px){.video-area .canvas-frame.target3{margin-top:-33%}}@media (max-width:984px){.video-area .canvas-frame.target3{margin-top:-53%}}@media (max-width:768px){.video-area .canvas-frame.target3{width:30%;margin-top:-73%;margin-left:34%}}@media (max-width:576px){.video-area .canvas-frame.target3{width:40%;margin-top:-113%;margin-left:38%}}@media (max-width:320px){.video-area .canvas-frame.target3{width:35%;margin-top:-103%;margin-left:36%}}.video-area .canvas-frame.target4{width:40%;margin-top:0%;margin-left:20%}@media (max-width:1596px){.video-area .canvas-frame.target4{margin-top:-5%}}@media (max-width:1200px){.video-area .canvas-frame.target4{margin-top:-15%}}@media (max-width:984px){.video-area .canvas-frame.target4{margin-top:-35%}}@media (max-width:768px){.video-area .canvas-frame.target4{width:45%;margin-top:-55%;margin-left:22%}}@media (max-width:576px){.video-area .canvas-frame.target4{width:55%;margin-top:-85%;margin-left:26%}}@media (max-width:320px){.video-area .canvas-frame.target4{width:50%;margin-top:-85%;margin-left:24%}}.video-area .canvas-frame.target5{width:25%;margin-top:20%;margin-left:-20%}@media (max-width:1596px){.video-area .canvas-frame.target5{margin-top:15%}}@media (max-width:1200px){.video-area .canvas-frame.target5{margin-top:5%}}@media (max-width:984px){.video-area .canvas-frame.target5{margin-top:-5%}}@media (max-width:768px){.video-area .canvas-frame.target5{width:30%;margin-top:-15%;margin-left:-22%}}@media (max-width:576px){.video-area .canvas-frame.target5{width:40%;margin-top:-25%;margin-left:-26%}}@media (max-width:320px){.video-area .canvas-frame.target5{width:35%;margin-top:-25%;margin-left:-24%}}.video-area .canvas-frame.target6{width:15%;margin-top:35%;margin-left:10%}@media (max-width:1596px){.video-area .canvas-frame.target6{margin-top:30%}}@media (max-width:1200px){.video-area .canvas-frame.target6{margin-top:20%}}@media (max-width:984px){.video-area .canvas-frame.target6{margin-top:10%}}@media (max-width:768px){.video-area .canvas-frame.target6{width:20%;margin-top:0%;margin-left:12%}}@media (max-width:576px){.video-area .canvas-frame.target6{width:30%;margin-top:-10%;margin-left:16%}}@media (max-width:320px){.video-area .canvas-frame.target6{width:25%;margin-top:-10%;margin-left:14%}}.video-area .canvas-frame canvas{width:100%;height:100%;display:block}
@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes show{0%{opacity:0}to{opacity:1}}@keyframes hide{0%{opacity:1}to{opacity:0}}@keyframes move-top{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes move-right{0%{transform:translate(0%)}to{transform:translate(-100%)}}@keyframes move-bottom{0%{transform:translateY(0%)}to{transform:translateY(100px)}}@keyframes move-left{0%{transform:translate(100%)}to{transform:translate(0%)}}@keyframes moving-right{0%{opacity:0;transform:translate(-25%)}5%{opacity:1}95%{opacity:1}to{opacity:0;transform:translate(25%)}}@keyframes moving-left{0%{opacity:0;transform:translate(25%)}5%{opacity:1}95%{opacity:1}to{opacity:0;transform:translate(-25%)}}@keyframes shadow-moving-right{0%{opacity:0;text-shadow:-30px 0 10px #1b1b1b4d}5%{opacity:1}95%{opacity:1;text-shadow:-10px 0 10px #1b1b1b4d}to{opacity:0;text-shadow:10px 0 30px #1b1b1b1a}}@keyframes shadow-moving-left{0%{opacity:0;text-shadow:30px 0 10px #1b1b1b4d}5%{opacity:1}95%{opacity:1;text-shadow:10px 0 10px #1b1b1b4d}to{opacity:0;text-shadow:10px 0 30px #1b1b1b1a}}@keyframes shadow-moving-right-mobile{0%{opacity:0;text-shadow:-15px 0 5px #1b1b1b33}5%{opacity:1}95%{opacity:1;text-shadow:-5px 0 5px #1b1b1b33}to{opacity:0;text-shadow:5px 0 10px #1b1b1b1a}}@keyframes shadow-moving-left-mobile{0%{opacity:0;text-shadow:15px 0 5px #1b1b1b33}5%{opacity:1}95%{opacity:1;text-shadow:5px 0 5px #1b1b1b33}to{opacity:0;text-shadow:5px 0 10px #1b1b1b1a}}@keyframes slide-right{0%{opacity:0;margin-left:-100%}to{opacity:.2;margin-left:30%}}@keyframes screen-cover{0%{border-radius:10%;transform:rotate(-240deg)translate(-40%,-220%)scale(2)}50%{border-radius:0%;transform:rotate(-320deg)translateY(-10%)scale(1.7)}to{border-radius:10%;transform:rotate(-405deg)translate(-40%,-220%)scale(2)}}@keyframes screen-cover-xl{0%{border-radius:10%;transform:rotate(-240deg)translate(-40%,-220%)scale(2)}50%{border-radius:0%;transform:rotate(-320deg)translateY(-10%)scale(1.8)}to{border-radius:10%;transform:rotate(-405deg)translate(-40%,-220%)scale(2)}}@keyframes screen-cover-l{0%{border-radius:10%;transform:rotate(-240deg)translate(-40%,-220%)scale(2)}50%{border-radius:0%;transform:rotate(-320deg)translateY(-10%)scale(2)}to{border-radius:10%;transform:rotate(-405deg)translate(-40%,-220%)scale(2)}}@keyframes screen-cover-m{0%{border-radius:10%;transform:rotate(-240deg)translate(-40%,-250%)scale(2)}50%{border-radius:0%;transform:rotate(-320deg)translateY(-10%)scale(2.3)}to{border-radius:10%;transform:rotate(-405deg)translate(-40%,-250%)scale(2)}}@keyframes screen-cover-s{0%{border-radius:10%;transform:rotate(-240deg)translate(-40%,-300%)scale(1.1)}50%{border-radius:0%;transform:rotate(-320deg)translate(-50%,-70%)scale(2.8)}to{border-radius:10%;transform:rotate(-405deg)translate(-40%,-300%)scale(1.1)}}@keyframes focusing{0%{background-color:#0000}50%{background-color:#1b1b1b33}to{background-color:#0000}}@keyframes neon{0%{text-shadow:0 0 10px #bdbdbd,0 0 20px #bdbdbd}to{text-shadow:0 0 5px #bdbdbd,0 0 10px #bdbdbd}}#skill{z-index:0;background-color:#fff;position:relative}.skill-section{height:100vh;position:relative;overflow:hidden}@media (max-width:768px){.skill-section{height:100vh}}.skill-section:hover .list a{will-change:transform,opacity}.skill-section .skill-frame{transition:padding .6s cubic-bezier(.4,0,.2,1);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media (max-width:768px){.skill-section .skill-frame{padding-top:10rem}}.skill-section .skill-frame h1{font-family:Syncopate;transition:font-size .6s cubic-bezier(.4,0,.2,1);display:inline-block;position:absolute;top:0;left:10px}@media (max-width:768px){.skill-section .skill-frame h1{font-size:7.5rem}}@media (max-width:576px){.skill-section .skill-frame h1{font-size:7rem}}@media (max-width:320px){.skill-section .skill-frame h1{font-size:6.5rem}}.skill-section .skill-frame .list-frame{transform-style:preserve-3d;perspective:60rem;pointer-events:none}.skill-section .skill-frame .list-frame .list{pointer-events:auto;z-index:0;transform-origin:100%;transition:transform .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1);transform:translate(0,0)rotateY(-30deg)}.skill-section .skill-frame .list-frame .list:hover{background-color:#424242;transform:translate(0,0)rotateY(0)}.skill-section .skill-frame .list-frame .list:hover .link-button{color:#fff;letter-spacing:0}.skill-section .skill-frame .list-frame .list .link-button{text-align:right;color:#1b1b1b;width:100%;font-family:NEXON Lv2 Gothic;font-size:10rem;font-weight:700;line-height:inherit;letter-spacing:-.5rem;white-space:nowrap;z-index:4;padding:3rem 1.5rem;transition:color .3s cubic-bezier(.4,0,.2,1),font-size .6s cubic-bezier(.4,0,.2,1),letter-spacing .3s cubic-bezier(.4,0,.2,1);display:block;position:relative}@media (max-width:768px){.skill-section .skill-frame .list-frame .list .link-button{font-size:9rem}}@media (max-width:576px){.skill-section .skill-frame .list-frame .list .link-button{font-size:8rem}}@media (max-width:320px){.skill-section .skill-frame .list-frame .list .link-button{font-size:7rem}}.skill-section .skill-frame .list-frame .list .link-button.delay{pointer-events:none}
@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes show{0%{opacity:0}to{opacity:1}}@keyframes hide{0%{opacity:1}to{opacity:0}}@keyframes move-top{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes move-right{0%{transform:translate(0%)}to{transform:translate(-100%)}}@keyframes move-bottom{0%{transform:translateY(0%)}to{transform:translateY(100px)}}@keyframes move-left{0%{transform:translate(100%)}to{transform:translate(0%)}}@keyframes moving-right{0%{opacity:0;transform:translate(-25%)}5%{opacity:1}95%{opacity:1}to{opacity:0;transform:translate(25%)}}@keyframes moving-left{0%{opacity:0;transform:translate(25%)}5%{opacity:1}95%{opacity:1}to{opacity:0;transform:translate(-25%)}}@keyframes shadow-moving-right{0%{opacity:0;text-shadow:-30px 0 10px #1b1b1b4d}5%{opacity:1}95%{opacity:1;text-shadow:-10px 0 10px #1b1b1b4d}to{opacity:0;text-shadow:10px 0 30px #1b1b1b1a}}@keyframes shadow-moving-left{0%{opacity:0;text-shadow:30px 0 10px #1b1b1b4d}5%{opacity:1}95%{opacity:1;text-shadow:10px 0 10px #1b1b1b4d}to{opacity:0;text-shadow:10px 0 30px #1b1b1b1a}}@keyframes shadow-moving-right-mobile{0%{opacity:0;text-shadow:-15px 0 5px #1b1b1b33}5%{opacity:1}95%{opacity:1;text-shadow:-5px 0 5px #1b1b1b33}to{opacity:0;text-shadow:5px 0 10px #1b1b1b1a}}@keyframes shadow-moving-left-mobile{0%{opacity:0;text-shadow:15px 0 5px #1b1b1b33}5%{opacity:1}95%{opacity:1;text-shadow:5px 0 5px #1b1b1b33}to{opacity:0;text-shadow:5px 0 10px #1b1b1b1a}}@keyframes slide-right{0%{opacity:0;margin-left:-100%}to{opacity:.2;margin-left:30%}}@keyframes screen-cover{0%{border-radius:10%;transform:rotate(-240deg)translate(-40%,-220%)scale(2)}50%{border-radius:0%;transform:rotate(-320deg)translateY(-10%)scale(1.7)}to{border-radius:10%;transform:rotate(-405deg)translate(-40%,-220%)scale(2)}}@keyframes screen-cover-xl{0%{border-radius:10%;transform:rotate(-240deg)translate(-40%,-220%)scale(2)}50%{border-radius:0%;transform:rotate(-320deg)translateY(-10%)scale(1.8)}to{border-radius:10%;transform:rotate(-405deg)translate(-40%,-220%)scale(2)}}@keyframes screen-cover-l{0%{border-radius:10%;transform:rotate(-240deg)translate(-40%,-220%)scale(2)}50%{border-radius:0%;transform:rotate(-320deg)translateY(-10%)scale(2)}to{border-radius:10%;transform:rotate(-405deg)translate(-40%,-220%)scale(2)}}@keyframes screen-cover-m{0%{border-radius:10%;transform:rotate(-240deg)translate(-40%,-250%)scale(2)}50%{border-radius:0%;transform:rotate(-320deg)translateY(-10%)scale(2.3)}to{border-radius:10%;transform:rotate(-405deg)translate(-40%,-250%)scale(2)}}@keyframes screen-cover-s{0%{border-radius:10%;transform:rotate(-240deg)translate(-40%,-300%)scale(1.1)}50%{border-radius:0%;transform:rotate(-320deg)translate(-50%,-70%)scale(2.8)}to{border-radius:10%;transform:rotate(-405deg)translate(-40%,-300%)scale(1.1)}}@keyframes focusing{0%{background-color:#0000}50%{background-color:#1b1b1b33}to{background-color:#0000}}@keyframes neon{0%{text-shadow:0 0 10px #bdbdbd,0 0 20px #bdbdbd}to{text-shadow:0 0 5px #bdbdbd,0 0 10px #bdbdbd}}.icon-slider{width:100%;min-width:160rem;position:relative;left:-21.12rem;transform:translateY(-50%)}.icon-slider.four{height:33.3333vh}@media (max-width:768px){.icon-slider.four{height:25vh}}.icon-slider.five{height:25vh}@media (max-width:768px){.icon-slider.five{height:20vh}}.icon-slider.six{height:20vh}@media (max-width:768px){.icon-slider.six{height:16.6667vh}}.icon-slider.seven{height:16.6667vh}@media (max-width:768px){.icon-slider.seven{height:14.2857vh}}.icon-slider.eight{height:14.2857vh}@media (max-width:768px){.icon-slider.eight{height:12.5vh}}.icon-slider.nine{height:12.5vh}@media (max-width:768px){.icon-slider.nine{height:11.1111vh}}.icon-slider.ten{height:11.1111vh}.icon-slider .icon-content-frame{text-align:center;opacity:.3;width:11%;height:21.12rem;position:absolute}.icon-slider .icon-content-frame.will-change{will-change:transform}.icon-slider .icon-content-frame .content{background-color:#1b1b1b1a;border-radius:100%;width:14rem;height:14rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 5rem #1b1b1b1a}.icon-slider .icon-content-frame .content svg{width:12rem;height:12rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.icon-slider.reverse{left:21.12rem;transform:rotateY(180deg)translateY(-50%)}.icon-slider.reverse .content{position:absolute;top:50%;left:50%;transform:rotateY(180deg)translate(50%,-50%)}