@charset "utf-8";

/* reset */
* {margin: 0;padding: 0;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;}
h1, h2, h3, h4, h5, h6 {font-weight: 700; font-size: inherit;}
a {color: inherit; text-decoration: inherit;}
img {vertical-align: middle;}
a img {border: none;}
li {list-style: none;}
address, em, i {font-style: normal;}
a:focus {outline: none}
button:focus {outline: none}

/* layout */
body {font-family: 'Spoqa Han Sans Neo',sans-serif;font-size: 14px;color:#3E3E3E;}
.en {font-family: 'Neue Haas Grotesk Display Pro', sans-serif;font-weight: 400;}
.italic {font-style: italic;}
.cosi {font-family:'Cosi Times',serif;}

.wrap {height: 100%;width: 100%;overflow: hidden;background: #fff;}

/* 공통요소 */
h2.title {text-align: center;font-size: 24px;color:#fff;text-transform: uppercase;font-family: 'Neue Haas Grotesk Display Pro', sans-serif;font-weight: 400;}


/* header */
header {width: 100%;position: fixed;z-index: 999;mix-blend-mode: difference;filter:invert(100%);}
.innerHeader {width: 100%;height: 100px;margin:0 auto;padding:60px 70px 0;box-sizing: border-box;}
.innerHeader h1 {float:left;mix-blend-mode:difference;filter:invert(100%);}
.innerHeader .openBtn {display: block;float:right;width:32px;height:17px;padding:20px 0;box-sizing: border-box;position:relative;}
.innerHeader .openBtn span {display: block;position: absolute;height: 2px;right:0;}
.innerHeader .openBtn span.a {top:10px;}
.innerHeader .openBtn span.b {top:20px;}
.innerHeader .openBtn span img {height:100%;width:100%;}

/* menuOpen */
.menuOpen {width:100%;height:100%;background: #141414;position: fixed;left:-100%;top:0;z-index: 1111;transition: all 0.7s;}
.menuOpen .gnb {width: 90%;margin:80px auto;position: relative;color:#fff;}
.menuOpen .gnb .gnbTop {display: flex;justify-content: space-between;}
.menuOpen .gnb .gnbTop .logo {width: 136px;}
.menuOpen .gnb .gnbTop .logo img {width: 100%;}
.menuOpen .gnb .gnbTop .close {font-size: 30px;}
.menuOpen .gnb ul {text-transform: uppercase;width: 75%;height:100%;padding:10vh 0;margin:5vh auto 0;text-align: center;font-size: 9vh;box-sizing: border-box;border-top:1px solid #f7f7f7;border-bottom: 1px solid #f7f7f7;display: flex;flex-direction: column;justify-content: space-between;}
.menuOpen .gnb ul li {height: 12vh;}
.menuOpen .gnb ul li:hover a {color:#FFFF5D;}

/* menuOpen on붙었을때 */
.menuOpen.on {left:0;}

/* section.visual */
.visual {width: 100%;height: 100vh;background: #141414;position: relative;}
.simply-scroll .simply-scroll-clip {position: relative;transition:1.2s;transform:translate(0%,450px) rotate(5deg) scale(1.1);opacity:1;-webkit-filter:brightness(13%);filter:brightness(13%);overflow: hidden;}
.simply-scroll .simply-scroll-clip .simply-scroll-list li {float:left;width: 450px;margin-right:-1px;}
.simply-scroll .simply-scroll-clip .simply-scroll-list li img {width: 100%;}

@-webkit-keyframes simple {
    0% {transform:translate(150%,450px) rotate(5deg) scale(1.1);opacity:0;}
    15% {transform:translate(150%,450px) rotate(5deg) scale(1.1);opacity:0;}
}

@keyframes simple {
    0% {transform:translate(100%,450px) rotate(5deg) scale(1.1);opacity:0;}
    15% {transform:translate(100%,450px) rotate(5deg) scale(1.1);opacity:0;}
}

/* animation */
.simply-scroll-clip {-webkit-animation-name: simple;animation-name: simple;-webkit-animation-duration: 0.8s;animation-duration: 0.8s;}


.visual .videoBox {width:70vw;height:70vh;position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);overflow: hidden;border-radius: 50px;}
.visual .videoBox .me {width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-moz-object-fit:cover;position: absolute;left:50%;transform: translateX(-50%);}
.visual .videoBox h2 {position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index: 10;color:#fff;font-size: 110px;font-weight: 100;}


/* section.bigtitle */
.bigtitle {width: 100%;overflow: hidden;background: #141414;}
.bigtitle .inner {width: 1200px;margin:0 auto;padding:400px 0;}
.bigtitle .inner .title {margin-bottom:70px}
.bigtitle .inner .title p {width: 100%;height:150px;font-size: 145px;line-height: 150px;color:#ccc;letter-spacing: -3px;text-align: center;}
.bigtitle .inner .title p.b {color:#ddd;}
.bigtitle .inner .title p.c {color:#fff;}

.bigtitle .inner .intro {text-align: justify;color:#ddd;font-size: 14.5px;font-weight: 200;line-height: 1.8;opacity: 0;transition:all 1.2s ease;}

/* intro motion */
@keyframes slide-up {
    0% {transform: translateY(100px);opacity: 0;}
    30% {transform: translateY(100px);opacity: 0;}
}
.bigtitle .inner .intro.motion {animation: slide-up .8s ;transition:all 1.2s ease;opacity: 1;}

/* section.profile */
.profile {width:1440px;margin:0 auto;overflow: hidden;padding:200px 0 300px;box-sizing: border-box;}
.profile p.img {width: 465px;height: 550px;float:left;overflow: hidden;margin:100px 0 0 50px;border-radius: 30px;opacity:0;transform:translateY(200px);transition:all 1.2s ease;}
.profile p.img img {width: 100%;}

/* profile 오른쪽 텍스트박스 */
.profile .text {width:55%;float:right;color:#000;position: relative;}
.profile .text p {width: 100%;font-size: 17px;letter-spacing: -1px;margin-bottom:70px;opacity: 0;transform: translateY(100px);}
.profile .text p span {display: block;font-size: 32px;}
.profile .text ul {float:left;}
.profile .text ul li {margin-bottom:35px;height:27px;line-height: 27px;}
.profile .text ul li:nth-child(3) {height: 100px;}
.profile .text ul li:nth-child(5) {padding-top:55px; position: relative;}
.profile .text ul li:nth-child(6) {position: relative;}
.profile .text .title {width: 25%;font-size: 20px;font-weight: bold;padding-top:20px;box-sizing: border-box;}
.profile .text .title li {transform: translate(0px,100px);opacity: 0;transition:all 0.2s ease;}
.profile .text .cont {width: 75%;font-size: 16px;font-weight: 400;color:#202020;padding-top:20px;box-sizing: border-box;}
.profile .text .cont li {transform: translate(0px,100px);opacity: 0;transition:all 0.2s ease;}
.profile .text .cont li:nth-child(3) {line-height: 35px;}
.profile .text .cont span {vertical-align:middle;}
.profile .text .cont span.date {font-size: 20px;display:inline-block;margin:0 20px;}

/* profile 텍스트박스 career 열의 dot와 line */
.profile .text .cont li:nth-child(5):before {content:'';position: absolute;width: 7px;height: 7px;border-radius: 50%;background: #FF3434;left:-10px;bottom:10px;}
.profile .text .cont li:nth-child(5):after {content:'';position: absolute;width: 1px;height: 60px;background: #c8c8c8;z-index: 0;left:-7px;bottom:-50px;}
.profile .text .cont li:nth-child(6):before {content:'';position: absolute;width: 7px;height: 7px;border-radius: 50%;background: #FF3434;left:-10px;bottom:10px;}

/* profile 텍스트박스 중간의 line */
.profile .text span.line {position: absolute;height:1px;width:100%;background: #bcbcbc;left:0;bottom:165px;transform: translate(0px,100px);opacity: 0;transition:all 0.2s ease;}

/* profile motion */
.profile.motion p.img {transform:translate(0px,0px);opacity: 1;transition-delay: 0.5s;transition: all 1s ease-in-out;}
.profile .text.motion p {transform:translate(0px,0px);opacity: 1;transition-delay: 0.5s;transition: all 1s ease-in-out;}
.profile .text.motion .title li {transform:translate(0px,0px);opacity: 1;transition-delay: 0.8s;transition: all 1.5s ease-in-out;}
.profile .text.motion .cont li {transform:translate(0px,0px);opacity: 1;transition-delay: 0.8s;transition: all 1.5s ease-in-out;}
.profile .text.motion ul li.career {transform:translate(0px,0px);opacity: 1;transition-delay:1s;transition: all 1.9s ease-in-out;}
.profile .text.motion span.line {transform:translate(0px,0px);opacity: 1;transition-delay:1s;transition: all 1.9s ease-in-out;}

/* section.philosophy */
.philosophy {width: 1440px;margin:0 auto 100px;}
.philosophy h2 {color:#000;font-weight: 500;transform: translate(0px,100px);opacity: 0;transition:all 0.2s ease;}
.philosophy .textBox {padding:180px 125px 240px;box-sizing: border-box;position: relative;}
.philosophy .textBox:before {content: '';position: absolute;width:32px;height: 28px;-webkit-clip-path: polygon(50% 7%, 0% 100%, 100% 100%);clip-path: polygon(50% 7%, 0% 100%, 100% 100%);background: #FF4747;right:350px;top:75px;transform: translate(0px,100px);opacity: 0;transition:all 0.2s ease;}
.philosophy .textBox:after {content: '';position: absolute;width:32px;height: 28px;-webkit-clip-path: polygon(50% 7%, 0% 100%, 100% 100%);clip-path: polygon(50% 7%, 0% 100%, 100% 100%);background: #6447FF;left:205px;top:350px;transform: translate(0px,100px);opacity: 0;transition:all 0.2s ease;}
.philosophy .textBox h3 {font-size: 130px;text-align: center;color:#000;width: 100%;letter-spacing: -3px;}
.philosophy .textBox div {margin-top: 130px;}
.philosophy .textBox div p {width: 40%;font-size: 19px;font-weight: 300;color:#202020;text-align: justify;transform: translate(0px,100px);opacity: 0;transition:all 0.2s ease;}
.philosophy .textBox div p:first-child {float:left;}
.philosophy .textBox div p:last-child {float: right;}

/* philosophy motion */
.philosophy.motion h2 {transform:translate(0px,0px);opacity: 1;transition-delay: 0.2s;transition: all 0.5s ease-in-out;}
.philosophy.motion .textBox:before {transform:translate(0px,0px);opacity: 1;transition-delay: 0.2s;transition: all 0.7s ease-in-out;}
.philosophy.motion .textBox:after {transform:translate(0px,0px);opacity: 1;transition-delay: 0.2s;transition: all 1s ease-in-out;}
.philosophy.motion .textBox h3 .char {display: inline-block;animation: slide-up 1s cubic-bezier(.10, 0, .10, 1) both;animation-delay: calc(0.03s * var(--char-index));}
.philosophy.motion .textBox div p {transform:translate(0px,0px);opacity: 1;transition-delay:0.5s;transition: all 1.5s ease-in-out;}

/* section.timeline */
.timeline {width: 100%;padding-top:200px;box-sizing: border-box;background: #141414;overflow: hidden;position: relative;}
.timeline h2 {width: 100%;margin-bottom:70px;transform: translate(0px,100px);opacity: 0;transition:all 0.2s ease;}

.timeline .drag {display:block;color:#ccc;font-size: 22px;font-weight: 200;position: absolute;bottom:250px;right:40px;}

/* 슬라이드 */
.timeline .slideBox {width: 1920px;margin:0 auto 200px;height:600px;transform:rotate(-5deg) translate(0px,100px);opacity: 0;transition:all 0.2s ease;}
.timeline .slideBox .slide {width: 100%;height:100%;}
.timeline .slideBox .slide li {margin:0 30px;padding-bottom:50px;}
.timeline .slideBox .slide li:nth-child(2n) {margin-top:70px;}
.timeline .slideBox .slide li a {display: block;width: 100%;height:100%;position: relative;}
.timeline .slideBox .slide li a p.img {width:100%;transition:all 2s;position: relative;}
.timeline .slideBox .slide li a p.img img {width: 100%;filter:grayscale(1);border-radius: 10px;}
.timeline .slideBox .slide li a span {color:#fff;}
.timeline .slideBox .slide li a span.cosi {display:block;width: 400px;height: 300px;font-size: 3.5vw;text-align: center;position: absolute;left:50%;top:50%;transform: translate(-50%,-40%);line-height: 1;padding-top:70px;box-sizing: border-box;opacity:0;transition:opacity 0.3s;}
.timeline .slideBox .slide li a span.black {color:#000;}

.timeline .slideBox .slide li a span.year {display: block;font-size: 20px;font-weight: 200;transform:rotate(90deg);position: absolute;right:-32px;top:20px;opacity:0;}
.timeline .slideBox .slide li a span.desc {display: block;font-size: 18px;font-weight: 100;letter-spacing: -1px;position: absolute;left:50%;transform:translateX(-50%);bottom:-25px;opacity:0;}

/* 스크롤버튼 */
.timeline .slideBox .slide ul.slick-dots button {display:none;}
/* ul.slick-dots #slick-slide-control00 {}
ul.slick-dots #slick-slide-control04 {} */

/* 호버효과 */
.timeline .slideBox .slide li a:hover p.img img {-webkit-filter:brightness(90%);filter:brightness(90%);filter:grayscale(0);}
.timeline .slideBox .slide li a:hover span.cosi {opacity:1;}/*글자 일어서는 애니메이션 나중에 넣을 것*/
.timeline .slideBox .slide li a:hover span.year {opacity:1;}
.timeline .slideBox .slide li a:hover span.desc {opacity:1;}

/* timeline motion */
.timeline.motion h2 {transform:translate(0px,0px);opacity: 1;transition-delay: 1s;transition: all 0.7s ease-in-out;}
.timeline.motion .slideBox {transform:rotate(-5deg) translate(0px,0px);opacity: 1;transition-delay: 2s;transition: all 1s ease-in-out;}

/* section.skill */
.skill {width: 100%;overflow: hidden;background: #141414;padding:300px 0 700px;position: relative;margin-bottom:100px;}
.skill h2 {padding-bottom: 150px;transform: translate(0px,100px);opacity: 0;transition:all 0.2s ease;}

.skill .text {width: 1440px;margin: 0 auto 200px;color:#fff;font-weight: 200;}
.skill .text .slogan {font-size: 110px;text-align: center;letter-spacing: -1px;margin-bottom:60px;transform: translate(0px,100px);opacity: 0;transition:all 0.2s ease;}
.skill .text .slogan span {font-weight: 100;}
.skill .text .desc {font-size: 19px;line-height:1.8;text-align: center;color:#ccc;transform: translate(0px,100px);opacity: 0;transition:all 0.2s ease;}


/* 악보 */
.skill .inner {width: 95%;margin:0 auto;overflow: hidden;position: relative;padding-bottom:20px;box-sizing: border-box;}
.skill .inner .score span{display:block;width: 0%;height: 1px;background:rgba(255,255,255,0.3);margin-bottom:80px;}

.skill .inner ul {width: 1440px;position: absolute;top:0;left:50%;transform:translateX(-50%);display:flex;justify-content: space-between;}
.skill .inner ul li {text-align: center;color:#ddd;font-size: 16px;}
.skill .inner ul li span {display:block;font-size: 150px;height:380px;box-sizing: border-box;opacity: 0;}
.skill .inner ul li span.color {color:#51FFF3;font-size: 190px;}
.skill .inner ul li p {opacity: 0;transform:translate(0px,100px);transition: all 0.5s ease;}

/* skill specific */
.skill .specific {width: 1440px;margin:0 auto;padding-top:220px;color:#ddd;font-weight: 100;}
.skill .specific ul {width: 50%;transform: translate(0,100px);opacity:0;transition: all 0.3s ease;}
.skill .specific ul li {float:left;width: 33%;height:150px;margin-bottom:50px;line-height: 1.6;}
.skill .specific ul li span {display:block;font-size: 18px;padding-bottom:10px;color:#eee;}
.skill .specific ul li p {font-size: 15px;}


/* skill motion */
.skill h2.motion {transform:translate(0px,0px);opacity: 1;transition-delay: 1s;transition: all 0.5s ease-in-out;}
.skill .text.motion .slogan {transform:translate(0px,0px);opacity: 1;transition-delay: 1s;transition: all 1s ease-in-out;}
.skill .text.motion .desc {transform:translate(0px,0px);opacity: 1;transition-delay: 1.5s;transition: all 1.5s ease-in-out;}

/* skill inner motion */
.skill .inner.motion .score span:nth-child(1) {width: 100%;transition:width 0.8s ease-in-out;}
.skill .inner.motion .score span:nth-child(2) {width: 100%;transition:width 2s ease-in-out;}
.skill .inner.motion .score span:nth-child(3) {width: 100%;transition:width 1.5s ease-in-out;}
.skill .inner.motion .score span:nth-child(4) {width: 100%;transition:width 1.8s ease-in-out;}
.skill .inner.motion .score span:nth-child(5) {width: 100%;transition:width 2.5s ease-in-out;}


@keyframes scoreFloat {
    0% {transform: translateY(0);}
    50% {transform: translateY(10px);}
}
.skill .inner.motion ul li:nth-child(1) span {padding-top:200px;opacity: 1;transition: all 1s ease-in-out;animation:scoreFloat 2s infinite;}
.skill .inner.motion ul li:nth-child(2) span {padding-top:57px;opacity: 1;transition: all 2s ease-in-out;animation:scoreFloat 1.5s infinite;}
.skill .inner.motion ul li:nth-child(3) span {padding-top:165px;opacity: 1;transition: all 2.5s ease-in-out;animation:scoreFloat 2s infinite;}
.skill .inner.motion ul li:nth-child(4) span {padding-top:120px;opacity: 1;transition: all 1.8s ease-in-out;animation:scoreFloat 1.8s infinite;}
.skill .inner.motion ul li:nth-child(5) span {padding-top:10px;opacity: 1;transition: all 1.2s ease-in-out;animation:scoreFloat 2.2s infinite;}
.skill .inner.motion ul li:nth-child(6) span {padding-top:80px;opacity: 1;transition: all 2.7s ease-in-out;animation:scoreFloat 2.7s infinite;}
.skill .inner.motion ul li p {transform:translate(0px,0px);opacity: 1;transition: all 1.5s ease-in-out;}

.skill .specific.motion ul {transform: translate(0,0);transition-delay: 1s;opacity:1;transition: all 0.5s ease-in-out;}

/* 높은음자리표 오브젝트 gclef */
.gclef {width:250px;position: absolute;bottom:0;right:100px;}
.gclef li {position: absolute;width: 100%;}
.gclef li img {width: 100%;height:auto;}
.gclef li:nth-child(1) {bottom:350px;right: 200px;}
.gclef li:nth-child(2) {bottom:350px;right: 160px;}
.gclef li:nth-child(3) {bottom:350px;right: 120px;}

/* section.whatAbout */
.whatAbout {width: 100%;background-color: #f7f7f7;-webkit-clip-path: polygon(0 0, 100% 40%, 100% 100%, 0% 100%);clip-path: polygon(0 0, 100% 40%, 100% 100%, 0% 100%);margin-top:-600px;padding-top:100px;}
.whatAbout h2 {margin-top:400px;color:#000;margin-bottom:120px;font-weight: 500;}
.whatAbout .inner {width: 1440px;overflow: hidden;margin:0 auto;padding-bottom:200px;}
.whatAbout .inner ul {width:100%;display:flex;justify-content: space-between;}
.whatAbout .inner ul li {width: 25%;height:250px;}
.whatAbout .inner ul li a {display:block;width: 100%;height:200px;background: #fff;position: relative;}
.whatAbout .inner ul li a p {width: 100%;overflow: hidden;position: absolute;top:50%;transform:translateY(-50%);}
.whatAbout .inner ul li a p.twoLine1 {top:40%}
.whatAbout .inner ul li a p.twoLine2 {top:60%;}
.whatAbout .inner ul li a p span {display:block;margin:0 auto;text-align: center;font-size: 36px;}
.whatAbout .inner ul li span.title {display:block;text-align: center;margin-top:20px;}


/* what_motion */
.whatAbout .inner.motion ul li a p .cosi, .whatAbout .inner.motion ul li a p .en {animation: typoUp 1.5s;perspective-origin:left;perspective: 100px;}
.whatAbout .inner.motion ul li a p .cosi .char,.whatAbout .inner.motion ul li a p .en .char {display: inline-block;animation: slide-up 1.5s cubic-bezier(.10, 0, .10, 1) both;animation-delay: calc(0.03s * var(--char-index));}

@keyframes typoUp {
    0% {transform: rotateX(90deg) skew(15deg,15deg);}
    40% {transform:rotateX(60deg) skew(15deg,15deg);}
    
}

/* footer */
footer{width: 100%;overflow: hidden;}
footer .inner {width: 90%;margin:120px auto 70px;color:#000;}
footer .inner h2 {width: 230px;margin:0 auto 70px;}
footer .inner h2 a {display: block;width: 100%;height: 100%;}
footer .inner h2 a img {width: 100%;}
footer .inner p.contact {width: 1120px;height: 400px;margin:0 auto 200px;font-size: 170px;font-weight: 500;line-height: 400px;text-align: center;letter-spacing:-12px;border-top:1px solid #141414;border-bottom: 1px solid #141414;}
footer .inner ul {width: 100%;display: flex;justify-content: space-between;align-items : flex-end;}
footer .inner ul li {width: 25%;font-size: 14px;font-weight: 600;color:#333;}
footer .inner ul li.copyright {width: 50%;}
footer .inner ul li:nth-child(2) {text-align: center;}
footer .inner ul li:nth-child(3) {text-align: right;padding-right:5%;box-sizing: border-box;}
footer .inner ul li .name {font-size: 16px;}
footer .inner ul li p {float:left;margin-right:25px;}
footer .inner ul li span {font-size: 24px;}

/* topBtn */
.topBtn {display: block;width: 50px;height: 50px;border:1px solid #000;border-radius: 50%;position:fixed;bottom:60px;right:5%;z-index: 200;mix-blend-mode: difference;filter: invert(100%);}
.topBtn span {display: block;width: 100%;font-size: 30px;font-weight: normal;text-align: center;position: absolute;left:50%;transform: translate(-50%);top:7px;color:#000;}