@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-detail{padding-top:7.2rem;position:relative}.skill-detail>.container{position:relative}.skill-detail .skill-tab{z-index:1;width:100%;padding-top:7.2rem;position:absolute;top:-7.2rem;box-shadow:0 0 1rem #1b1b1b4d}.skill-detail .skill-tab:before{content:"";z-index:-1;background-color:#bdbdbd;width:100%;height:1px;position:absolute;bottom:0}.skill-detail .skill-tab li{display:inline-block;position:relative}.skill-detail .skill-tab li a,.skill-detail .skill-tab li button{color:#424242;font-size:1.6rem;font-weight:400;line-height:inherit;letter-spacing:inherit;padding:1.6rem 3rem;transition:background-color .3s cubic-bezier(.4,0,.2,1);display:inline-block}@media (max-width:984px){.skill-detail .skill-tab li a,.skill-detail .skill-tab li button{padding:1.6rem 2.7rem}}@media (max-width:768px){.skill-detail .skill-tab li a,.skill-detail .skill-tab li button{padding:1.6rem 2.4rem}}@media (max-width:576px){.skill-detail .skill-tab li a,.skill-detail .skill-tab li button{padding:1.6rem 2.1rem}}@media (max-width:320px){.skill-detail .skill-tab li a,.skill-detail .skill-tab li button{padding:1.6rem 1.8rem}}.skill-detail .skill-tab li a:hover,.skill-detail .skill-tab li button:hover{color:#1b1b1b;font-size:1.6rem;font-weight:700;line-height:inherit;letter-spacing:inherit}.skill-detail .skill-tab li a.active,.skill-detail .skill-tab li button.active{color:#1b1b1b;font-size:1.6rem;font-weight:700;line-height:inherit;letter-spacing:inherit;background-color:#efefef;border-bottom:.2rem solid #1b1b1b}.skill-detail .content-frame{height:calc(100vh - 7.2rem);padding-top:5.2rem;position:relative}.skill-detail .content-frame:before{content:"";z-index:1;background-color:#1b1b1b;width:3rem;height:3rem;margin-top:2.6rem;position:absolute;top:50%;left:calc(25% - 1.5rem);transform:translateY(-50%)rotate(45deg);box-shadow:-.3rem .3rem .5rem #1b1b1b4d}@media (max-width:984px){.skill-detail .content-frame:before{left:calc(33.3333% - 1.5rem)}}.skill-detail .content-frame:after{content:"";background-color:#0000;width:.1rem;height:calc(33.3333% - 1.6rem);margin-top:2.6rem;position:absolute;top:50%;left:25%;transform:translateY(-50%);box-shadow:0 0 1rem #1b1b1b80}@media (max-width:984px){.skill-detail .content-frame:after{left:33.3333%}}.skill-detail .content-frame .skill-list-frame{height:100%;overflow:hidden}.skill-detail .content-frame .skill-list-frame .skill-list{height:100%;overflow-y:auto}.skill-detail .content-frame .skill-list-frame .skill-list::-webkit-scrollbar{opacity:0;width:0}.skill-detail .content-frame .skill-list-frame .skill-list::-webkit-scrollbar-thumb{opacity:0}.skill-detail .content-frame .skill-list-frame .skill-list::-webkit-scrollbar-track{opacity:0}.skill-detail .content-frame .skill-list-frame .skill-list .scroll-content{height:100%}.skill-detail .content-frame .skill-list-frame .skill-list .default-list,.skill-detail .content-frame .skill-list-frame .skill-list .list{height:33.3333%;transition:background-color .3s cubic-bezier(.4,0,.2,1);position:relative}.skill-detail .content-frame .skill-list-frame .skill-list .default-list:before,.skill-detail .content-frame .skill-list-frame .skill-list .list:before{content:"";background-color:#efefef;width:100%;height:0%;transition:background-color .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1),border-radius .3s cubic-bezier(.4,0,.2,1),top .3s cubic-bezier(.4,0,.2,1),bottom .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.skill-detail .content-frame .skill-list-frame .skill-list .default-list .inner,.skill-detail .content-frame .skill-list-frame .skill-list .list .inner{height:100%;position:relative}.skill-detail .content-frame .skill-list-frame .skill-list .default-list .inner:before,.skill-detail .content-frame .skill-list-frame .skill-list .default-list .inner:after,.skill-detail .content-frame .skill-list-frame .skill-list .list .inner:before,.skill-detail .content-frame .skill-list-frame .skill-list .list .inner:after{content:"";background-color:#efefef;width:100%;height:0%;transition:background-color .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1),border-radius .3s cubic-bezier(.4,0,.2,1),top .3s cubic-bezier(.4,0,.2,1),bottom .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1);position:absolute;left:50%;transform:translate(-50%)}.skill-detail .content-frame .skill-list-frame .skill-list .default-list .inner div,.skill-detail .content-frame .skill-list-frame .skill-list .list .inner div{color:#1b1b1b;font-size:3rem;font-weight:700;line-height:inherit;letter-spacing:inherit;opacity:0;animation:.3s linear forwards show;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media (max-width:768px){.skill-detail .content-frame .skill-list-frame .skill-list .default-list .inner div,.skill-detail .content-frame .skill-list-frame .skill-list .list .inner div{animation:.3s linear .2s forwards show}}.skill-detail .content-frame .skill-list-frame .skill-list .default-list .inner div svg,.skill-detail .content-frame .skill-list-frame .skill-list .list .inner div svg{opacity:.3;transition:opacity .3s cubic-bezier(.4,0,.2,1)}@media (max-width:984px){.skill-detail .content-frame .skill-list-frame .skill-list .default-list .inner div svg,.skill-detail .content-frame .skill-list-frame .skill-list .list .inner div svg{transform:scale(.9)}}@media (max-width:768px){.skill-detail .content-frame .skill-list-frame .skill-list .default-list .inner div svg,.skill-detail .content-frame .skill-list-frame .skill-list .list .inner div svg{transform:scale(.8)}}@media (max-width:576px){.skill-detail .content-frame .skill-list-frame .skill-list .default-list .inner div svg,.skill-detail .content-frame .skill-list-frame .skill-list .list .inner div svg{transform:scale(.7)}}@media (max-width:320px){.skill-detail .content-frame .skill-list-frame .skill-list .default-list .inner div svg,.skill-detail .content-frame .skill-list-frame .skill-list .list .inner div svg{transform:scale(.6)}}.skill-detail .content-frame .skill-list-frame .skill-list .default-list.prev,.skill-detail .content-frame .skill-list-frame .skill-list .default-list.next,.skill-detail .content-frame .skill-list-frame .skill-list .list.prev,.skill-detail .content-frame .skill-list-frame .skill-list .list.next{z-index:1}.skill-detail .content-frame .skill-list-frame .skill-list .default-list.active,.skill-detail .content-frame .skill-list-frame .skill-list .list.active{z-index:0}.skill-detail .content-frame .skill-list-frame .skill-list .default-list.active:before,.skill-detail .content-frame .skill-list-frame .skill-list .list.active:before{background-color:#efefef;height:100%}.skill-detail .content-frame .skill-list-frame .skill-list .default-list.active .inner:before,.skill-detail .content-frame .skill-list-frame .skill-list .list.active .inner:before{bottom:100%}.skill-detail .content-frame .skill-list-frame .skill-list .default-list.active .inner:after,.skill-detail .content-frame .skill-list-frame .skill-list .list.active .inner:after{top:100%}.skill-detail .content-frame .skill-list-frame .skill-list .default-list.active .inner.top:before,.skill-detail .content-frame .skill-list-frame .skill-list .list.active .inner.top:before{border-top-left-radius:35%;border-top-right-radius:35%;height:30%}.skill-detail .content-frame .skill-list-frame .skill-list .default-list.active .inner.bottom:after,.skill-detail .content-frame .skill-list-frame .skill-list .list.active .inner.bottom:after{border-bottom-right-radius:35%;border-bottom-left-radius:35%;height:30%}.skill-detail .content-frame .skill-list-frame .skill-list .default-list.active .inner svg,.skill-detail .content-frame .skill-list-frame .skill-list .list.active .inner svg{opacity:1}.skill-detail .content-frame .skill-detail-content-frame{z-index:-1;pointer-events:none;height:calc(100% - 5.2rem);position:absolute;left:0;box-shadow:0 0 1rem #1b1b1b80}.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content{text-align:center;background-color:#1b1b1b;height:100%;position:relative;overflow:hidden}.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .pagenation{color:#fff;font-family:Syncopate;font-size:2rem;font-weight:700;line-height:inherit;letter-spacing:inherit;position:absolute;top:50%;left:1.2rem;transform:translateY(-50%)}.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .pagenation span{min-width:3rem;display:inline-block}.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content{z-index:1;width:50%;height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media (max-width:984px){.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content{width:60%}}@media (max-width:768px){.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content{width:70%}}@media (max-width:576px){.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content{width:80%}}@media (max-width:320px){.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content{width:90%}}.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div{flex-direction:column-reverse;height:53%;display:flex}.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div h2{color:#fff;font-family:Syncopate;font-size:4rem;font-weight:700;line-height:inherit;letter-spacing:inherit;opacity:0;position:relative;bottom:0}@media (max-width:320px){.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div h2{font-size:3rem}}.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div h2.opacity{animation:.3s linear forwards show}.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div .levels{padding-top:4rem;padding-bottom:7rem;position:relative;bottom:0}@media (max-width:984px){.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div .levels{padding-top:5rem}}@media (max-width:768px){.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div .levels{padding-top:6rem}}@media (max-width:576px){.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div .levels{padding-top:7rem}}@media (max-width:320px){.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div .levels{padding-top:8rem}}.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div .levels span{background-color:#424242;width:4rem;height:.8rem;display:inline-block}.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div .levels span:not(:last-child){margin-right:1.8rem}.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div .levels.opacity.level-1 span:first-child,.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div .levels.opacity.level-2 span:first-child,.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div .levels.opacity.level-3 span:first-child,.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div .levels.opacity.level-4 span:first-child,.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div .levels.opacity.level-5 span:first-child{transition:background-color .15s cubic-bezier(.4,0,.2,1) .1s}.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div .levels.opacity.level-1 span:nth-child(2),.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div .levels.opacity.level-2 span:nth-child(2),.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div .levels.opacity.level-3 span:nth-child(2),.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div .levels.opacity.level-4 span:nth-child(2),.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div .levels.opacity.level-5 span:nth-child(2){transition:background-color .15s cubic-bezier(.4,0,.2,1) .2s}.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div .levels.opacity.level-1 span:nth-child(3),.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div .levels.opacity.level-2 span:nth-child(3),.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div .levels.opacity.level-3 span:nth-child(3),.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div .levels.opacity.level-4 span:nth-child(3),.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div .levels.opacity.level-5 span:nth-child(3){transition:background-color .15s cubic-bezier(.4,0,.2,1) .3s}.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div .levels.opacity.level-1 span:nth-child(4),.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div .levels.opacity.level-2 span:nth-child(4),.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div .levels.opacity.level-3 span:nth-child(4),.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div .levels.opacity.level-4 span:nth-child(4),.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div .levels.opacity.level-5 span:nth-child(4){transition:background-color .15s cubic-bezier(.4,0,.2,1) .4s}.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div .levels.opacity.level-1 span:nth-child(5),.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div .levels.opacity.level-2 span:nth-child(5),.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div .levels.opacity.level-3 span:nth-child(5),.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div .levels.opacity.level-4 span:nth-child(5),.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div .levels.opacity.level-5 span:nth-child(5){transition:background-color .15s cubic-bezier(.4,0,.2,1) .5s}.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div .levels.opacity.level-1 span:first-child,.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div .levels.opacity.level-2 span:first-child,.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div .levels.opacity.level-2 span:nth-child(2),.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div .levels.opacity.level-3 span:first-child,.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div .levels.opacity.level-3 span:nth-child(2),.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div .levels.opacity.level-3 span:nth-child(3),.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div .levels.opacity.level-4 span:first-child,.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div .levels.opacity.level-4 span:nth-child(2),.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div .levels.opacity.level-4 span:nth-child(3),.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div .levels.opacity.level-4 span:nth-child(4),.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content>div .levels.opacity.level-5 span{background-color:#fff}.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content p{text-align:justify;color:#fff;height:47%;letter-spacing:inherit;opacity:0;margin:0 auto;font-size:1.8rem;font-weight:300;line-height:3rem}.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content p.opacity1{animation-name:show;animation-duration:.3s;animation-delay:.2s;animation-fill-mode:forwards}.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content p.opacity2{animation-name:show;animation-duration:.3s;animation-delay:.3s;animation-fill-mode:forwards}.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content p.opacity3{animation-name:show;animation-duration:.3s;animation-delay:.4s;animation-fill-mode:forwards}.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content p.opacity4{animation-name:show;animation-duration:.3s;animation-delay:.5s;animation-fill-mode:forwards}.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .content p.opacity5{animation-name:show;animation-duration:.3s;animation-delay:.6s;animation-fill-mode:forwards}.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .back-text{white-space:nowrap;color:#8d8d8d;font-family:Syncopate;font-size:15rem;font-weight:700;line-height:inherit;letter-spacing:inherit;opacity:0;z-index:0;margin-left:-100%;position:absolute;bottom:5rem;left:50%;transform:translate(-50%)}.skill-detail .content-frame .skill-detail-content-frame .skill-detail-content .back-text.opacity{animation:1s forwards slide-right}