@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 */
/* html {
    --color-texta: #1d1d1d;
    --color-textb: #fff;
} */
body {font-family: 'Spoqa Han Sans Neo',sans-serif;font-size: 14px;color:#3E3E3E;/*cursor:none;*/}
.wrap {width: 100%;overflow: hidden;background: #fff;position: relative;}

/* 시스템 커서 */
/* .cursor {
    width: 3rem;
    height: 3rem;
    border: 2px solid var(--color-texta);
    border-radius: 50%;
    position: absolute;
    z-index: 9999;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: all 0.3s ease;
    transition-property: background, transform;
    transform-origin: 100% 100%;
    backdrop-filter: sepia(20%);
    background-size: cover;
} */

/*.cursor-grow {
    transform: scale(2);
    background-color: var(--color-texta);
}*/

/* 점선이 들어갈 ::after(pseudo)요소 만들고 크기값 설정해주기*/
  /* .gnb li a:hover::after {
    width: calc(100% - 2rem);
    height: 3px;
    background-size: contain;
  } */
  /* 배경 이미지(svg)가 알맞게 들어가도록*/
/* hover된 링크의 글자 색상 정의(하얀색)*/
/* .hovered-link 선택자명은 추후 JS로 추가할 예정!*/
  /* .hovered-link {
      color: var(--color-textb) !important;
  } */
/* .gnb li a:hover::after의 svg에 배경이미지 지정!*/
  /* .hovered-link::after {
      background-image: url("../img/white_dot.svg");
  } */

/* 공통 font-family */
.en {font-family: 'Neue Haas Grotesk Display Pro', sans-serif;font-weight: 400;}
.italic {font-style: italic;}
.cosi {font-family:'Cosi Times',serif;}


/* 공통요소 */
h2.title {text-align: center;font-size: 22px;color:#fff;text-transform: uppercase;font-family: 'Neue Haas Grotesk Display Pro', sans-serif;font-weight: 400;}
.more {width:50px;height:100px;margin:0 auto;text-align: center;}
.more a {display: block;width: 100%;height: 100%;}
.more a img {width: 100%;}

/* 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 .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 */
section.visual {width: 100vw;height: 100vh;background: #f7f7f7;padding-top:60px;box-sizing: border-box;}

/* .visual .visualVideo {width: 100vw;height: 90vh;object-fit: cover;position: relative;z-index: 1001;top:0;left:0;animation:vid 2.5s ;opacity: 0;}
@keyframes vid {
    0% {opacity: 1;}
    5% {opacity: 0.9;}
    10% {opacity: 0.9;}
    25% {opacity: 0.5;}
    70% {opacity: 0.2;}
} */

.visual .inner {padding:0 70px;overflow: hidden;z-index: 1000;box-sizing: border-box;}
/* .visual .inner .fakelogo {width: 100%;height: 46px;animation-name: visualUp;animation-duration: 0.8s;}
.visual .inner .fakelogo img {height: 100%;} */

.visual .inner .centerBox {width: 1440px;margin:12vh auto 0;}
.visual .inner .centerBox .textBox {overflow: hidden;margin-bottom:40vh;padding-right: 150px;}
.visual .inner .centerBox .text {font-size:38px;letter-spacing: -1px;text-align: right;font-weight: 600;animation-name: visualUp;animation-duration: 0.8s;}
.visual .inner .centerBox h1.logo {width: 1100px;text-align: center;position:fixed;left:50%;top:45vh;transform:translate(-50%,-50%);z-index: 1000;mix-blend-mode:difference;filter:invert(100%);}
.visual .inner .centerBox h1.logo img {width: 100%;animation-name: skew;animation-duration: 1.5s;}
@keyframes skew {
    0% {transform: scale(0.7) perspective(100px)  rotateX(-5deg) translateY(100px);opacity: 0.8;}
    70% {transform: scale(0.98) perspective(100px)  rotateX(-0.5deg) translateY(-10px);opacity: 1;}
}


.visual .inner .centerBox ul {font-size: 21px;padding-left: 420px;font-weight: 500;display: flex;overflow: hidden;}
.visual .inner .centerBox ul li {margin-right: 20px;animation-name: visualUp;animation-duration: 0.8s;}
@keyframes visualUp {
    0% {transform: translateY(100px);opacity: 0;}
}

.visual .scroll {width: 14px;margin:20vh 0 0 5%;animation-name: visualUp;animation-duration: 0.8s;}
.visual .scroll img {width: 100%;}


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

.visual .inner .centerBox .text.motion .char {display: inline-block;animation: slide-up 1.5s cubic-bezier(.10, 0, .10, 1) both;animation-delay: calc(0.03s * var(--char-index));}

/* content1 */
.content1 {padding-bottom:800px;background: #141414;position: relative;}

.content1 .note {width: 650px;float:right;position: absolute;top:-55vh;right:-150px;animation: float 2.2s infinite;}
.content1 .note .slide {width: 100%;}
.content1 .note img {width: 100%;}
.content1 .note .txt {box-sizing: border-box;font-size: 20px;font-weight: 500;color:#000;position: absolute;top:275px;left:0;}

@keyframes float {
    0% {transform: translateY(0);}
    50% {transform: translateY(30px);}
}

/* 인디케이터 */
.content1 .note .slide .slick-dots {position: relative;overflow: hidden;height:20px;width: 30px;top:-280px;font-size: 18px;}
.content1 .note .slide .slick-dots:before {content:'/3';position: absolute;right:0px;top:0px;font-weight: bold;color:#000;}
.content1 .note .slide .slick-dots li {width: 10px;height: 20px;line-height: 20px;position: absolute;top:-20px;}
.content1 .note .slide .slick-dots li button {width: 100%;height: 100%;border:none;background:none;font-weight: bold;font-size: 18px;font-family: 'Neue Haas Grotesk Display Pro',sans-serif;}
.content1 .note .slide .slick-dots li.slick-active {top:0;}

/*.content1:after {content: '';position: absolute;left:0;bottom:0;z-index:5;
    width: 0;
    height: 0;
    border-bottom: 0px solid #f7f7f7;
    border-top: 800px solid transparent;
    border-left: 2000px solid #f7f7f7;
    border-right: 2000px solid transparent;}*/


/* section.hi */
section.hi {width: 100%;overflow: hidden;margin:0 auto;padding: 20vh 0 40vh;display:flex;justify-content: space-between;}
section.hi div.img {width: 350px;position: relative;opacity:0;}/*항상 img를 감싸는 블록요소에 크기를 주고 img는 그 블록요소에 100% 차게 둘 것. */
section.hi div.img:after {content: '';width: 130%;height: 100%;background: url(../img/hiBack.svg) no-repeat;position: absolute;left:0px;bottom:-120px;z-index:1;}
section.hi div.img img {width:100%;position: absolute;top:0px;left:85%;transform:translateX(-50%);z-index: 2;}

section.hi .text {float: right;width:70%;padding-top:200px;color:#fff;}
section.hi .text .textInner {width: 60vw;padding-left:5vw;box-sizing: border-box;}
section.hi .text .greet {font-size: 5.2vw;letter-spacing: -3px;font-weight: 400;margin-bottom: 25px;}
section.hi .text .scroll {font-size: 18px;height:90px;line-height: 46px;width:400px;text-align: center;margin:100px 0 0 10vw;}
section.hi .text .scroll span {display: block;height:100%;width:20px;margin:0 auto;}
section.hi .text .scroll span img {width: 100%;width:auto;}

/* keep scrolling 애니메이션 */
@keyframes keepScroll {
    0% {transform:translateY(0);}
    50% {transform:translateY(10px);}
}
section.hi .text .scroll span {animation: keepScroll 1s infinite;}

/* hi motion */
@keyframes hiText {
    0% {transform: translateX(-300px);opacity:0;}
    50% {transform: translateX(-300px);opacity:0;}
}

.hi div.img.motion {opacity: 1;animation:float 2.5s infinite;opacity: 1;transition:opacity 0.3s ease-in-out;}
.hi div.text.motion {animation-name:hiText;animation-duration: 1.1s;}

/* section.about */
.about {color:#fff;height:200vh;position: relative;}
.about .myKey {padding-top: 100px;position: relative;}
.about .myKey p, .about .myKey .svgVideo {position: absolute;font-size: 147px;white-space: nowrap;overflow: hidden;letter-spacing: -3px;}
.about .myKey .img1 {left:-150px;}
.about .myKey .img2 {right:-400px;top:80vh;}
/* .about .myKey p.txt1 {left:0;top:850px;z-index: 10;}
.about .myKey p.txt2 {left:50%;transform: translateX(-50%);top:1000px;z-index: 11;} */

.myKey .my.img1, .myKey .my.img2 {display: none;}

/* svg삽입 비디오 */

/* video {display: block;width: 100%;aspect-ratio: 4/3;} */

.svgVideo {width: 65vw;filter:brightness(40%);overflow: hidden;}

.svgVideo video {display: block;width:100%;}
.svgVideo.img1 video {object-position: -100px 0;}
.svgVideo.img2 video {width:75%;object-position: 0 -100px;}


/* .img1 video {clip-path:url(#svgPath1);-webkit-clip-path:url(#svgPath1);-o-clip-path:url(#svgPath1);z-index: 1;} 

.img2 video {clip-path:url(#svgPath2);-webkit-clip-path:url(#svgPath2);-o-clip-path:url(#svgPath2);z-index:1;} */

.svgVideo.img1 .masked {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cpath d='M 820.11,0c16.52,0,29.44,2.15,39.14,6.46,9.69,4.31,14.36,13.64,14.36,28.01,0,3.95-3.95,14-11.85,30.52-7.9,16.52-18.67,36.98-31.6,61.76s-28.01,52.06-44.88,82.59c-16.88,30.16-34.11,61.04-52.06,92.28-17.95,31.24-35.19,61.76-52.42,91.56-16.88,29.8-32.32,56.37-45.24,80.07h364.45l-58.53,103.77h-366.97c-24.78,38.06-49.91,70.02-75.76,95.87-25.85,26.21-53.14,47.4-81.87,63.55-28.73,16.16-59.96,28.01-93,35.55-33.39,7.54-69.3,11.13-108.44,11.13s-69.66-3.59-96.59-10.41c-26.93-6.82-49.19-16.52-66.79-28.37-17.59-12.21-30.52-25.85-39.14-41.65-8.62-15.8-12.93-32.32-12.93-49.91,0-36.27,11.85-66.07,35.91-89.41,24.06-23.34,56.01-41.65,96.59-54.94,40.57-13.29,87.25-22.26,140.4-27.65,53.14-5.39,109.52-7.9,168.04-7.9L652.07,96.95H327.83c-11.13,0-21.54,1.08-32.32,2.87-10.41,1.8-19.75,5.03-28.01,9.34-8.26,4.31-14.72,10.41-19.75,18.67-5.03,7.9-7.54,17.59-7.54,29.44,0,17.59,4.31,38.42,12.93,62.84,8.62,24.06,22.98,52.78,43.45,85.82H131.78c-17.59-29.8-30.88-57.09-40.57-82.59-9.34-25.13-14-48.83-14-70.74,0-48.47,22.62-85.82,67.86-112.39C190.66,13.29,256.01,0,341.83,0h478.28ZM168.04,640.58c0,4.31,1.08,8.62,3.59,13.29,2.51,4.31,6.82,8.62,13.29,12.21,6.46,3.95,14.72,7.18,24.78,9.34,10.05,2.51,23.34,3.59,39.14,3.59,21.9,0,43.09-5.39,63.2-16.16,20.11-10.77,35.19-24.78,44.88-41.65l26.21-44.52c-29.8,0-57.81,1.08-84.02,3.59-26.21,2.51-49.19,6.1-68.58,11.13-19.39,5.03-34.47,11.49-45.6,19.39-11.49,8.62-16.88,18.31-16.88,29.8 Z' /%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cpath d='M 820.11,0c16.52,0,29.44,2.15,39.14,6.46,9.69,4.31,14.36,13.64,14.36,28.01,0,3.95-3.95,14-11.85,30.52-7.9,16.52-18.67,36.98-31.6,61.76s-28.01,52.06-44.88,82.59c-16.88,30.16-34.11,61.04-52.06,92.28-17.95,31.24-35.19,61.76-52.42,91.56-16.88,29.8-32.32,56.37-45.24,80.07h364.45l-58.53,103.77h-366.97c-24.78,38.06-49.91,70.02-75.76,95.87-25.85,26.21-53.14,47.4-81.87,63.55-28.73,16.16-59.96,28.01-93,35.55-33.39,7.54-69.3,11.13-108.44,11.13s-69.66-3.59-96.59-10.41c-26.93-6.82-49.19-16.52-66.79-28.37-17.59-12.21-30.52-25.85-39.14-41.65-8.62-15.8-12.93-32.32-12.93-49.91,0-36.27,11.85-66.07,35.91-89.41,24.06-23.34,56.01-41.65,96.59-54.94,40.57-13.29,87.25-22.26,140.4-27.65,53.14-5.39,109.52-7.9,168.04-7.9L652.07,96.95H327.83c-11.13,0-21.54,1.08-32.32,2.87-10.41,1.8-19.75,5.03-28.01,9.34-8.26,4.31-14.72,10.41-19.75,18.67-5.03,7.9-7.54,17.59-7.54,29.44,0,17.59,4.31,38.42,12.93,62.84,8.62,24.06,22.98,52.78,43.45,85.82H131.78c-17.59-29.8-30.88-57.09-40.57-82.59-9.34-25.13-14-48.83-14-70.74,0-48.47,22.62-85.82,67.86-112.39C190.66,13.29,256.01,0,341.83,0h478.28ZM168.04,640.58c0,4.31,1.08,8.62,3.59,13.29,2.51,4.31,6.82,8.62,13.29,12.21,6.46,3.95,14.72,7.18,24.78,9.34,10.05,2.51,23.34,3.59,39.14,3.59,21.9,0,43.09-5.39,63.2-16.16,20.11-10.77,35.19-24.78,44.88-41.65l26.21-44.52c-29.8,0-57.81,1.08-84.02,3.59-26.21,2.51-49.19,6.1-68.58,11.13-19.39,5.03-34.47,11.49-45.6,19.39-11.49,8.62-16.88,18.31-16.88,29.8 Z' /%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    mask-size: cover;
  }

.svgVideo.img2 .masked {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 1600'%3E%3Cpath d='M 820.11,0c16.52,0,29.44,2.15,39.14,6.46,9.69,4.31,14.36,13.64,14.36,28.01,0,3.95-3.95,14-11.85,30.52-7.9,16.52-18.67,36.98-31.6,61.76s-28.01,52.06-44.88,82.59c-16.88,30.16-34.11,61.04-52.06,92.28-17.95,31.24-35.19,61.76-52.42,91.56-16.88,29.8-32.32,56.37-45.24,80.07h364.45l-58.53,103.77h-366.97c-24.78,38.06-49.91,70.02-75.76,95.87-25.85,26.21-53.14,47.4-81.87,63.55-28.73,16.16-59.96,28.01-93,35.55-33.39,7.54-69.3,11.13-108.44,11.13s-69.66-3.59-96.59-10.41c-26.93-6.82-49.19-16.52-66.79-28.37-17.59-12.21-30.52-25.85-39.14-41.65-8.62-15.8-12.93-32.32-12.93-49.91,0-36.27,11.85-66.07,35.91-89.41,24.06-23.34,56.01-41.65,96.59-54.94,40.57-13.29,87.25-22.26,140.4-27.65,53.14-5.39,109.52-7.9,168.04-7.9L652.07,96.95H327.83c-11.13,0-21.54,1.08-32.32,2.87-10.41,1.8-19.75,5.03-28.01,9.34-8.26,4.31-14.72,10.41-19.75,18.67-5.03,7.9-7.54,17.59-7.54,29.44,0,17.59,4.31,38.42,12.93,62.84,8.62,24.06,22.98,52.78,43.45,85.82H131.78c-17.59-29.8-30.88-57.09-40.57-82.59-9.34-25.13-14-48.83-14-70.74,0-48.47,22.62-85.82,67.86-112.39C190.66,13.29,256.01,0,341.83,0h478.28ZM168.04,640.58c0,4.31,1.08,8.62,3.59,13.29,2.51,4.31,6.82,8.62,13.29,12.21,6.46,3.95,14.72,7.18,24.78,9.34,10.05,2.51,23.34,3.59,39.14,3.59,21.9,0,43.09-5.39,63.2-16.16,20.11-10.77,35.19-24.78,44.88-41.65l26.21-44.52c-29.8,0-57.81,1.08-84.02,3.59-26.21,2.51-49.19,6.1-68.58,11.13-19.39,5.03-34.47,11.49-45.6,19.39-11.49,8.62-16.88,18.31-16.88,29.8 Z' /%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 1600'%3E%3Cpath d='M 820.11,0c16.52,0,29.44,2.15,39.14,6.46,9.69,4.31,14.36,13.64,14.36,28.01,0,3.95-3.95,14-11.85,30.52-7.9,16.52-18.67,36.98-31.6,61.76s-28.01,52.06-44.88,82.59c-16.88,30.16-34.11,61.04-52.06,92.28-17.95,31.24-35.19,61.76-52.42,91.56-16.88,29.8-32.32,56.37-45.24,80.07h364.45l-58.53,103.77h-366.97c-24.78,38.06-49.91,70.02-75.76,95.87-25.85,26.21-53.14,47.4-81.87,63.55-28.73,16.16-59.96,28.01-93,35.55-33.39,7.54-69.3,11.13-108.44,11.13s-69.66-3.59-96.59-10.41c-26.93-6.82-49.19-16.52-66.79-28.37-17.59-12.21-30.52-25.85-39.14-41.65-8.62-15.8-12.93-32.32-12.93-49.91,0-36.27,11.85-66.07,35.91-89.41,24.06-23.34,56.01-41.65,96.59-54.94,40.57-13.29,87.25-22.26,140.4-27.65,53.14-5.39,109.52-7.9,168.04-7.9L652.07,96.95H327.83c-11.13,0-21.54,1.08-32.32,2.87-10.41,1.8-19.75,5.03-28.01,9.34-8.26,4.31-14.72,10.41-19.75,18.67-5.03,7.9-7.54,17.59-7.54,29.44,0,17.59,4.31,38.42,12.93,62.84,8.62,24.06,22.98,52.78,43.45,85.82H131.78c-17.59-29.8-30.88-57.09-40.57-82.59-9.34-25.13-14-48.83-14-70.74,0-48.47,22.62-85.82,67.86-112.39C190.66,13.29,256.01,0,341.83,0h478.28ZM168.04,640.58c0,4.31,1.08,8.62,3.59,13.29,2.51,4.31,6.82,8.62,13.29,12.21,6.46,3.95,14.72,7.18,24.78,9.34,10.05,2.51,23.34,3.59,39.14,3.59,21.9,0,43.09-5.39,63.2-16.16,20.11-10.77,35.19-24.78,44.88-41.65l26.21-44.52c-29.8,0-57.81,1.08-84.02,3.59-26.21,2.51-49.19,6.1-68.58,11.13-19.39,5.03-34.47,11.49-45.6,19.39-11.49,8.62-16.88,18.31-16.88,29.8 Z' /%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    mask-size: cover;
  }


.simply-scroll-container {position: relative;top:50vh;filter:brightness(90%);}
.simply-scroll-clip {position: relative;overflow: hidden;}
.simply-scroll-list {display: flex;flex-wrap: wrap;}
.simply-scroll-list li {width: 450px;overflow: hidden;}
.simply-scroll-list li img {width: 100%;}


/* mykey img 모션 */
@keyframes Key1 {
    0% {transform: translateX(-300px);}
}
@keyframes Key2 {
    0% {transform: translateX(300px);}
}
.about .myKey .img1.motion {animation-name: Key1;animation-duration: 0.5s;}
.about .myKey .img2.motion {animation-name: Key2;animation-duration: 0.5s;}


.about .intro {position: absolute;bottom:40vh;left:10vw;}
.about .intro h3 {font-size: 40px;font-weight: 400;margin-bottom: 20px;}
.about .intro p {font-size: 18px;font-weight: 100;line-height: 1.8;}

/* intro 모션 */
@keyframes slide-up {
    0% {transform: translateY(100px);opacity: 0;}
    30% {transform: translateY(100px);opacity: 0;}
}

.about .intro.motion h3 .word {display: inline-block;animation: slide-up 0.6s cubic-bezier(.10, 0, .10, 1) both;animation-delay: calc(0.03s * var(--word-index));}
.about .intro.motion p {animation-name: slide-up; animation-duration:0.8s;}


/* section.skill */
.skill {width: 100%;overflow: hidden;}
.skill h2 {padding-bottom: 100px;}
.skill .inner {width: 95%;margin:0 auto;overflow: hidden;position: relative;}
.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;padding-top:0px;opacity: 0;}
.skill .inner ul li p {opacity: 0;transform:translate(0px,100px);transition: all 0.5s ease;}

.skill .inner ul li span.color {color:#51FFF3;font-size: 190px;}

.skill .inner .more {padding-top:300px;}

/* 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 2.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;}

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


/* h2.gallery (selected) 공통 요소 */
h2.gallery {width: 90%;margin:0 auto;font-size: 32px;font-weight: 600;color:#141414;line-height: 42px;position: relative;}
h2.gallery:after {content: '';position: absolute;width:170px;height:1px;background: #141414;}
h2.gallery:before {content: '';position: absolute;width:1px;height:70px;background: #141414;}


/* content2 */
.content2 {width:100%;overflow:hidden;background-color: #f7f7f7;-webkit-clip-path: polygon(0 0, 100% 15%, 100% 90%, 0% 100%);clip-path: polygon(0 0, 100% 15%, 100% 90%, 0% 100%);margin-top:-600px;padding-top:100px;}


.content2 h2.gallery {padding:500px 0 0 50px;}
.content2 h2.gallery:after {bottom:50px;left:20px;}
.content2 h2.gallery:before {bottom:0;left:30px;}

.content2 .clone .fix {position: relative;width: 100%;height:100px;margin-top:40px;}
.content2 .clone .fix .text {font-size: 150px;color:#bbb;position: relative;font-weight: 600;}
.content2 .clone .text p {width: 100%;line-height: 150px;letter-spacing: -3px;text-align: center;line-height: 1;}
.content2 .clone .text p span.italic {margin-right:15px;}

/* section.clone */
.clone {width: 100%;margin:0 auto;overflow: hidden;padding-bottom:300px;}
.clone > ul{width: 85%;margin:0 auto;position: relative;z-index: 10;top:100vh;overflow: hidden;}
.clone .ex {margin-bottom:50vh;overflow: hidden;}
.clone .ex:nth-child(1) .imgBox {padding-left:80px;box-sizing: border-box;}
.clone .ex .imgBox {width:55%;float:left;}
.clone .ex .imgBox p.img {height:500px;width: 100%;overflow: hidden;position: relative;}
.clone .ex .imgBox p.img img {width:100%;height:100%;position: absolute;left:50%;top:50%;transform:translate(-50%,-50%);object-fit: cover;}
.clone .ex .imgBox .version {width: 100%;display: flex;justify-content: flex-end;overflow: hidden;margin-top:15px;}
.clone .ex .imgBox .version li {margin: 8px 18px;}
.clone .ex .imgBox .version li a {display: block;width: 100%;font-size: 16px;letter-spacing: -1px;border:1px solid #3E3E3E;border-radius: 20px;padding:5px 20px;box-sizing: border-box;transition: all 0.2s;}

/* hover */
.clone .ex .imgBox .version li a:hover {background: #3E3E3E;color:#fff;transition: all 0.2s;}

.clone .ex .txtBox {width:45%;float:right;padding:220px 0 0 12vw;box-sizing: border-box;}
.clone .ex .txtBox h3 {font-size: 25px;font-weight: 500;color:#000;margin-bottom:20px;}
.clone .ex .txtBox h3 span {display:inline-block;width:100px;margin-left:-100px;font-weight: 800;position: relative;}
.clone .ex .txtBox h3 span:after {content:'';width:54px;height:1px;position:absolute;background: #000;left:35px;top:15px;}
.clone .ex .txtBox p {font-size: 16px;line-height: 1.8;}
.clone .ex .txtBox p.cont {margin-top:15px;font-size: 17px;font-weight: 400;}
.clone .ex .txtBox p.cont span {font-weight: 600;margin-right:10px;color:#3E3E3E;}

/* section.works */
.works {width: 100%;margin-bottom: 350px;overflow: hidden;}
.works h2.gallery {text-align: right;}
.works h2.gallery:before {right:-10px;bottom:-20px;}
.works h2.gallery:after {width:200px;right:-20px;bottom:-10px;}
.works .inner {width: 100%;height:720px;padding-top:100px;display: flex;}
.works .inner .textBox {width:35%;float:left;padding:0 50px 0 100px;box-sizing: border-box;text-align: center;transform: translate(0px,100px);transition:all 0.2s ease;opacity: 0;}
.works .inner .textBox .text {height:100%;box-sizing: border-box;padding-top:70px;box-shadow:0 0 10px rgba(0,0,0,0.1);position: relative;}
.works .inner .textBox .text .title {font-size: 88px;color:#141414;font-weight: 600;line-height: 1.1;letter-spacing: -2px;}
.works .inner .textBox .text .view {width: 100px;height: 30px;margin:30px auto 0}
.works .inner .textBox .text .view a {display: block;width: 100%;height: 100%;box-sizing: border-box;border:1px solid #707070;font-size: 13px;font-weight: 600;color:#3E3E3E;text-align: center;line-height: 30px;border-radius: 50px;transition: all 0.3s;}

/* dots(swiper-pagination)*/
.swiper-pagination {width: 100%;overflow:hidden;position: relative;top:0;left:0;margin-top:30px;}
.swiper-pagination-bullet {display:block;width: 100%;height: 60px;color:#000;font-size: 24px;line-height:60px;position: relative;top:0;left:0;background: none;border-radius: 0;font-family: 'Neue Haas Grotesk Display Pro';font-weight: 500;text-align: left;padding-left:7vw;box-sizing: border-box;}
.swiper-pagination-bullet:after {position: absolute;top:-2px;left:4vw;font-family: 'Neue Haas Grotesk Display Pro';font-weight: 600;font-size: 30px;color:#000;}
.swiper-pagination-bullet:before {content:'';display: block;position: absolute;bottom:5px;left:4.2vw;width:0%;height: 1px;background: #000;transition: all 0.5s ease;}
.swiper-pagination-bullet:nth-child(1):after {content:'01.';}
.swiper-pagination-bullet:nth-child(2):after {content:'02.';}
.swiper-pagination-bullet:nth-child(3):after {content:'03.';}
.swiper-pagination-bullet:nth-child(4):after {content:'04.';}
.swiper-pagination-bullet:nth-child(5):after {content:'05.';}
.swiper-pagination-bullet-active:before{width: 65%;transition: all 0.3s ease-in-out;}

.works .more {padding-top:150px;}

/* 스와이퍼 mySwiper */
.mySwiper {width: 65%;float:right;transform: translate(0px,100px);transition:all 0.2s ease;opacity: 0;margin-top:50px;}
.mySwiper .swiper-slide {width:560px;height:600px;transform:scale(0.8);transition:transform 0.5s;overflow: hidden;border-radius: 20px;object-fit: contain;}
.mySwiper .swiper-slide a {display: block;width: 100%;height: 100%;transition: all 0.2s ease;position: relative;}
.mySwiper .swiper-slide a:after {content:'+';display: block;width:50px; height:50px;line-height: 50px;text-align: center;font-size: 30px;position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:1px solid #ddd;color:#ddd;z-index:2;opacity:0;}
.mySwiper .swiper-slide img {height: 100%;}
.mySwiper .swiper-slide:nth-child(1) img {width:100%;height:auto;}
.mySwiper .swiper-slide.ver img {width:100%;height:100%;}
.swiper-slide.swiper-slide-active {transform:scale(1);}


/* works hover */
.works .inner .textBox .text .view a:hover {background: #3E3E3E;color:#fff;}
.mySwiper .swiper-slide a:hover img {filter: brightness(50%);transition: all 0.2s ease-in-out;}
.mySwiper .swiper-slide a:hover:after {opacity: 1;}

/* works.motion */
.works.motion .textBox {transform:translate(0px,0px);opacity: 1;transition-delay: 1.3s;transition: all 0.9s ease-in-out;}
.works.motion .mySwiper {transform:translate(0px,0px);opacity: 1;transition-delay: 1.3s;transition: all 1.2s ease-in-out;}

/* section.process */
.process {width: 100%;overflow: hidden;background: #141414;padding-bottom: 300px;}
.process .inner {width: 1440px;margin:200px auto 0;}
.process .inner h2 {margin-bottom: 150px;}
.process .inner ul.main {width: 100%;}
.process .inner ul.main li {border-bottom: 1px solid #707070;}
.process .inner ul.main li a {display: block;width: 100%;height: 100%;overflow: hidden;}
.process .inner ul.main li a .txt {height: 500px;font-size: 100px;font-weight: 500;color:#fff;letter-spacing: -1px;box-sizing: border-box;position: relative;}
.process .inner ul.main li a .txt span {display: block;font-size: 22px;font-weight: 300;letter-spacing: 0px;}
/* .process .inner ul.main li a .img {width: 400px;opacity: 0;transition: all 0.5s;}
.process .inner ul.main li a:hover .img {opacity: 1;} */
.process .inner ul.main li img.swipeimage {position:fixed;top:0;left:0;width: 400px;height: 500px;object-fit:cover;z-index: 9;opacity: 0;visibility: hidden;pointer-events: none;}

.process .inner ul.main li:nth-child(1) a .txt {float: left;padding:150px 100px 0;}
.process .inner ul.main li:nth-child(1) a .txt:after {content:'';width: 100%;height: 100%;position: absolute;background:url(../img/folioBack.png) no-repeat center/400px;top:-20px;left:0;}
.process .inner ul.main li:nth-child(1) a .img {float:right;}

.process .inner ul.main li:nth-child(2) a .txt {float: right;padding:150px 150px 0 ;}
.process .inner ul.main li:nth-child(2) a .txt:after {content:'';width: 100%;height: 100%;position: absolute;background:url(../img/ncsBack.png) no-repeat center/300px;top:0;right:-70px;}
.process .inner ul.main li:nth-child(2) a .img {float:left;}

.process .inner .ncs {width: 100%;overflow: hidden;border-bottom: 1px solid #707070;font-weight: 300;}
.process .inner .ncs p {width: 50%;float: left;font-size: 19px;padding:10px;box-sizing: border-box;font-weight: 200;color:#aaa}
.process .inner .ncs .list {width: 50%;float: right;}
.process .inner .ncs .list li {height: 160px;border-bottom: 1px solid #707070;border-left:1px solid #707070; line-height: 160px;padding-left:40px;box-sizing: border-box;}
.process .inner .ncs .list li:last-child {border-bottom:none;}
.process .inner .ncs .list li a {display: block;width: 100%;height: 100%;font-size: 24px;transition:all 0.2s ease;}
.process .inner .ncs .list li a span.subject {display: inline-block;width: 80%;padding-left:30px;box-sizing: border-box;font-weight: 400;color:#bbb;}

/* hover */
.process .inner .ncs .list li:hover a {color:#fff;transition: all 0.2s ease-in-out;}
.process .inner .ncs .list li:hover a span {color:#fff;}
.process .inner .ncs .list li:hover {border-bottom:1px solid #fff;border-top:1px solid #fff;box-sizing: border-box;}
.process .more {padding-top:200px;}

/* footer */
footer{width: 100%;overflow: hidden;background: #fff;}
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: 80%;height: 22vw;margin:0 auto 10vw;font-size: 10vw;font-weight: 500;line-height: 22vw;text-align: center;letter-spacing:-7px;border-top:1px solid #141414;border-bottom: 1px solid #141414;}
footer .inner p.contact span.cosi {font-weight: bold;}
footer .inner ul {width: 100%;display: flex;justify-content: space-between;align-items : flex-end;}
footer .inner ul li {width: 40%;font-size: 14px;font-weight: 600;color:#333;}
footer .inner ul li:nth-child(1) {display: flex;align-items : flex-end;}
footer .inner ul li.copyright {width: 20%;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;line-height: 100%;}
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;}









/* 반응형 interactive */
@media screen and (max-width:1720px) { /*1720px~1441px*/
    section.visual {height: 55vw;position: relative;overflow: hidden;}
    .visual .inner .centerBox {width: 90%;position: absolute;top:8.5vw;}
    .visual .inner .centerBox .textBox {padding-right:10%;margin-bottom: 25vw;}
    .visual .inner .centerBox h1.logo {width:64%;top:25vw}
    .visual .inner .centerBox ul {padding-left: 29%;position: absolute;bottom:15%}
    .visual .scroll {position: absolute;bottom:50px;left:0;}
    section.hi div.img {width: 20.3vw;}

    .content1 .note {top:-25vw;right: -200px;}

    /* .about .myKey .svgVideo {width:60vw;height:60vh;}
    .about .myKey .svgVideo video {height: 100%;} */
    .about .myKey .img2 video {width: 80%;}

    .skill .inner ul {width: 90%;}
    .skill .inner ul li span {font-size: 9.5vw;}
    .skill .inner ul li span.color {font-size: 11.5vw;}

    .content1 .gclef {width:200px;}

    .works .inner .textBox .text .title {font-size: 5vw;}
    .swiper-pagination-bullet {font-size: 1.4vw;padding-left:5vw}
    .swiper-pagination-bullet:after {left:2.5vw;font-size: 24px;}
    .swiper-pagination-bullet:before {left:0;}
    .swiper-pagination-bullet-active:before {width: 100%;}

    .process .inner {width: 85%;}
}



/* 1024 - 1440 태블릿 */
@media screen and (max-width:1440px) { /*1024px 체크*/
    .more {width: 3.5vw;}
    .more a {padding-left:3vw;}
    
    
    .visual .inner .centerBox {margin-top:6.5vw;}
    .visual .inner .centerBox .textBox {margin-bottom: 25vw;font-size: 2.5vw;}
    .visual .inner .centerBox .textBox .text {font-size: 2.9vw;}
    .visual .inner .centerBox h1.logo {width:64vw;top:24vw}
    .visual .inner .centerBox ul {font-size: 18px;bottom:2vw;}
    
    .content1 {padding-bottom: 60vw;}
    .content1 .note {right:-18vw;width: 45vw;}
    .content1 .note .txt {top:16vw}
    .content1 .note .slide .slick-dots {top:-22vw}

    section.hi {padding:15vh 0 30vh;}
    section.hi div.img {width: 20vw;}
    section.hi .text .greet {width: 79.7vw;font-size: 6vw;}
    section.hi .text .scroll {width: 27vw;}

    .about {height: 200vh;}
    .about .simply-scroll-list li {width: 300px;}
    .about .svgVideo {width: 85vw;}
    .about .svgVideo.img1 {left:-10vw;}
    .about .svgVideo.img2 {right:-40vw;top:70vh;}
    .about .intro {bottom: 35vh;}
    .about .intro h3 {font-size: 2.5vw;}
    .about .intro p {font-size: 16px;}
    
    .skill .inner .more {padding-top:200px;}
    .content1 .gclef {width: 15vw;right:0;}
    
    .clone .ex .txtBox p {text-align: justify;}
    .clone .ex .txtBox p br {display: none;}

    .works {margin-bottom: 200px;}
    .works .inner {display:contents;}
    .works .inner .textBox {width: 100%;float:none;margin-top:50px;padding:0 50px;}
    .works .inner .textBox .text {padding-bottom:20px;}
    .works .inner .textBox .text .title {font-size: 9vw;}
    .works .inner .textBox .text .title br {display: none;}
    .works .inner .textBox .text .view {display: none;}
    .works .inner .mySwiper {width: 100%;float:none;}
    .mySwiper .swiper-slide {width: 30vw;object-fit: cover;}
    .mySwiper .swiper-wrapper .swiper-slide.ver img {width: 100%;object-fit: cover;}
    .swiper-pagination {display: flex;}
    .swiper-pagination-bullet {font-size: 20px;padding:0 10px;text-align: center;}
    .swiper-pagination-bullet:after {display: none;}

    .process {padding-bottom: 200px;}
    .process .inner ul.main li a p.txt {height: 300px;font-size: 10vw;text-align: center;}
    .process .inner ul.main li:nth-child(1) a .txt {padding:50px 0 0 100px;}
    .process .inner ul.main li:nth-child(2) a .txt {padding:50px 150px 0 0;}
    .process .inner ul.main li a p.txt span {font-size: 20px;}
    .process .inner ul.main li:nth-child(1) a .txt:after {top:0;}
    .process .inner ul.main li:nth-child(2) a .txt:after {right:0;}
    .process .inner ul.main li img.swipeimage {height: 300px;width:auto;}
    .process .inner .ncs .list li {height: 10vw;line-height: 10vw;}
    .process .inner .ncs .list li a {font-size: 22px;}
    .process .inner .ncs .list li a span.subject {text-align: right;}
    .process .inner .ncs .list li a span.moreContent {display: none;}
    .process .more {padding-top:100px;}

    footer .inner {width: 87%;margin-top: 9vw;}
    footer .inner h2 {width: 13vw;margin-bottom: 6vw;}
    footer .inner ul li {font-size: 13px;}
    footer .inner ul li .name {font-size: 1.4vw;}
    footer .inner ul li span {font-size: 1.4vw;}

    .topBtn {width: 4vw;height: 4vw;}
    .topBtn span {top:0.5vw;}
}


/* 1024 이하 태블릿 */
@media screen and (max-width:1023px){ /* 768 체크 */
    .innerHeader {padding:30px 30px 0;}
    .innerHeader .openBtn {width:24px;}
    .menuOpen .gnb .gnbTop .logo {width: 12vw;}
    .menuOpen .gnb .gnbTop .close {font-size: 3.5vw;}
    .menuOpen .gnb ul {font-size: 10vw;}

    .visual .inner .centerBox {margin-top: 0;}
    .visual .inner .centerBox .textBox .text {text-align: center;font-size: 25px;}
    .visual .inner .centerBox .textBox {padding:0;}
    .visual .inner .centerBox ul {bottom:-3vw;font-size: 15px;padding:0;left:50%;transform: translateX(-60%);}
    .visual .inner .centerBox h1.logo {width: 50%;top:24vw;}
    .visual .scroll {width: 10px}
    
    .content1 {padding-bottom: 200px;}
    .content1 .note {top:-30vw;right:-18vw}
    .content1 .note .txt {font-size: 15px;}
    
    section.hi {padding:10vh 0 20vh;}
    section.hi div.img {width: 20vw;height:40vw;}
    section.hi div.img:after {bottom:-70px;}
    section.hi .text {padding-top:13vw;}
    section.hi .text .textInner {padding:0;margin-left: -1vw;}
    section.hi .text .greet {letter-spacing: -1px;}
    section.hi .text .scroll {font-size: 14px;}
    section.hi .text .scroll span {width: 15px;}

    .about {height: 150vw;}
    .simply-scroll-container {top:40vw;}
    .about .simply-scroll-list li {width: 150px;}
    .about .myKey .svgVideo {width: 80vw;}
    .about .myKey .svgVideo.img2 {right:-30vw;top:60vw}
    .about .intro {bottom: 35vw;}

    .skill .inner .score {margin:0 auto;width:80%;height: 500px;display: flex;justify-content: space-between;}
    .skill .inner .score span.noteLine {width:1px;height:0px;transition: all 0.2s ease;}
    .skill .inner.motion .score span.noteLine {height:100%;transition: height 1s ease-in-out;}
    .skill .inner.motion .score span:nth-child(1){width: 1px;transition:height 0.8s ease-in-out;}
    .skill .inner.motion .score span:nth-child(2){width: 1px;transition:height 0.8s ease-in-out;}
    .skill .inner.motion .score span:nth-child(3){width: 1px;transition:height 0.8s ease-in-out;}
    .skill .inner.motion .score span:nth-child(4){width: 1px;transition:height 0.8s ease-in-out;}
    .skill .inner.motion .score span:nth-child(5){width: 1px;transition:height 0.8s ease-in-out;}
    .skill .inner ul li span {font-size: 19vw;}
    .skill .inner ul li span.color {font-size: 19vw;}
    .skill .inner.motion ul li:nth-child(1) span {display: none;}
    .skill .inner.motion ul li:nth-child(2) span {padding:250px 0 0 3.5vw;position: relative;}
    .skill .inner.motion ul li:nth-child(2) span::before {content:'DESIGN';font-family: 'Neue Haas Grotesk Display Pro';display:block;color:#fff;font-size: 2vw;}
    .skill .inner.motion ul li:nth-child(3) span {padding:50px 0 0 11vw;position: relative;}
    .skill .inner.motion ul li:nth-child(3) span::before {content:'WEB';font-family: 'Neue Haas Grotesk Display Pro';display:block;color:#fff;font-size:2vw;}
    .skill .inner.motion ul li:nth-child(4) span {padding:140px 0 0 11vw;position: relative;}
    .skill .inner.motion ul li:nth-child(4) span::before {content:'UI/UX';font-family: 'Neue Haas Grotesk Display Pro';display:block;color:#fff;font-size: 2vw;}
    .skill .inner.motion ul li:nth-child(5) span {display: none;}
    .skill .inner.motion ul li:nth-child(6) span {display: none;}
    .skill .inner ul li p {display: none;}
    .skill .inner .more {padding-top: 15vw;}
    .content1 .gclef {width:13vw;right:-8vw;}
    .content1 .gclef li:nth-child(1) {bottom:50px;}
    .content1 .gclef li:nth-child(2) {bottom:50px;}
    .content1 .gclef li:nth-child(3) {bottom:50px;}

    .content2 {clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);margin-top:0;}
    .content2 h2.gallery {padding-top:100px;}
    .content2 .clone .fix {margin-top:25vh;}
    .content2 .clone .fix .text {font-size: 16vw;}
    .clone {padding-bottom: 50px;}
    .clone .ex {width:100%;display: flex;flex-direction: column;}
    .clone .ex .imgBox {width: 100%;}
    .clone .ex .txtBox {width: 50%;margin:0 auto;float:none;padding:50px 0 0 0 ;}
    .clone .ex .txtBox h3{text-align: center;}
    .clone .ex .txtBox h3 span {display: none;}
    .clone .ex .txtBox h3 span:after {display: none;}
    .clone .ex .txtBox p.cont {text-align: center;}

    .works {padding-top:200px;}
    .swiper-pagination-bullet {font-size: 14px;}
    .mySwiper .swiper-slide {width: 100vw;}

    .process {padding-bottom:100px;}
    .process .inner .ncs p {display: none;}
    .process .inner .ncs .list {width: 100%;float:none;}
    .process .inner .ncs .list li {border-left:none;height: 15vw;line-height: 15vw;}

    footer .inner ul li {font-size: 12px;}
    .topBtn {width: 38px;height: 38px;}
    .topBtn span {top:5px;font-size: 25px;}
}



/* 모바일 */
@media screen and (max-width:767px) { /* 모바일 전부 체크 (가로모드까지) */
    .more {width: 25px;}

    .innerHeader {padding:10px 20px 0;}
    .innerHeader .openBtn {width:24px;}
    h2.title {font-size: 12px;}
    section.visual {height: 100vh;}
    .visual .inner {width:90vw;height: 100%;margin:0 auto;padding:0;}
    .visual .inner .centerBox {width:100%; margin: 12vh auto 0;}
    .visual .inner .centerBox h1.logo {top:45vh;}
    .visual .inner .centerBox .textBox .text {font-size: 20px;}
    .visual .inner .centerBox ul {font-size: 13px;bottom:-45vh;flex-direction: column;text-align: center;}
    .visual .inner .centerBox ul li:nth-child(1) {margin-bottom:10px;}
    .content1 .note {width:300px;top:-25vh;right:-20vh}
    .content1 .note .txt {display: none;}
    .content1 .note .slide .slick-dots {top:-150px;font-size: 12px;}
    .content1 .note .slide .slick-dots li {height: 12px;line-height: 12px;left:9px}
    .content1 .note .slide .slick-dots li button {font-size: 12px;}
    
    section.hi {justify-content: flex-start;padding:20vh 0;}
    section.hi div.img {width: 150px;height:400px;margin:0 5vw 0 0;}
    section.hi div.img:after {width: 160px;left:20px;bottom:-50px;}
    section.hi .text {width:60vw;position: relative;z-index: 20;float:none;margin-left:-20px;}
    section.hi .text .textInner {width: 100%;}
    section.hi .text .textInner .greet {width:100%;letter-spacing: 0;font-size: 5vw;}
    
    section.hi .text .scroll {font-size: 10px;letter-spacing: 1;margin-top:5vw;color:#707070;}
    section.hi .text .scroll span {width:15px;opacity: 0.5;}

    .about {height: 1000px;margin-bottom:0;}
    .simply-scroll-container {top:200px;}
    .about .myKey .svgVideo {width: 700px;}
    .about .intro {width: 80%;margin:0 auto;}
    .about .myKey .svgVideo.img1{left:50%;transform:translate(-40%);}
    .about .myKey .svgVideo.img2 {display: none;}
    .about .intro h3 {font-size: 20px;text-align: center;}
    .about .intro br.mo {display: none;}
    .about .intro {top:650px;}
    .about .intro p {font-size: 14px;}

    .skill .inner .score {height: 300px;}
    .skill .inner.motion ul li:nth-child(2) span {padding-top:100px;}
    .content1 .gclef li:nth-child(1) {right:90px;}
    .content1 .gclef li:nth-child(2) {right:80px;}
    .content1 .gclef li:nth-child(3) {right:70px;}
    .content2 h2.gallery {padding:20px 0 0 0;text-align: center;font-size: 16px;}
    .content2 h2.gallery:after {display: none;}
    .content2 h2.gallery:before {display: none;}
    .clone {height: 2500px;}
    .content2 .clone .fix {margin-top:50px;}
    .content2 .clone .fix .text {color:#ddd;}
    .content2 .clone .text p span.italic {margin-right: 10px;}
    .content2 .ex .imgBox .version {width:80%;margin:0 auto;justify-content:space-between}
    .content2 .ex .imgBox .version  li {margin:20px auto;}
    .clone .ex .txtBox {width:80%;}

    .works {padding-top:50px;margin-bottom: 50px;}
    .works h2 {display: none;}
    .works .inner .textBox {padding:0 20px;}
    .works .inner .textBox .text {padding: 35px 0 20px;}
    .mySwiper .swiper-slide {height:80vw;}
    .mySwiper .swiper-slide img {width: 100%;}
    .swiper-pagination {margin-top:10px;}
    .swiper-pagination-bullet:after {display: block;font-size: 15px;left:50%;transform:translateX(-50%);}
    .swiper-pagination-bullet:before {display: none;}
    .works .inner .textBox .text .view {display: block;width: 80px;height: 25px;margin-top:10px;}
    .works .inner .textBox .text .view a {font-size: 11px;line-height: 25px;}
    .works .more {padding-top: 40px;}
    .process{padding-bottom: 50px;}
    .process .inner {margin:70px 0 0 0;width: 100%;}
    .process .inner h2 {margin-bottom: 50px;}
    .process .inner ul.main li:nth-child(1) a .txt {width:100%;height:120px;padding:40px 0;font-size: 30px;letter-spacing: 1;}
    .process .inner ul.main li:nth-child(1) a .txt span {font-size: 13px;letter-spacing: 1px;}
    .process .inner ul.main li:nth-child(1) a .txt:after {width: 250px;height:100%;left:0;background-size: cover;}
    .process .inner ul.main li:nth-child(2) a .txt {width:100%;height:120px;padding:40px 0;font-size: 30px;letter-spacing: 1;}
    .process .inner ul.main li:nth-child(2) a .txt span {font-size: 13px;letter-spacing: 1px;}
    .process .inner ul.main li:nth-child(2) a .txt:after {width: 150px;height:100%;right:0;background-size: cover;}
    .process .inner .ncs .list li {height:60px;line-height: 60px;}
    .process .inner .ncs .list li a{font-size: 15px;}
    .process .more {padding-top: 40px;}

    footer .inner {margin-bottom:30px;}
    footer .inner p.contact {letter-spacing: -3px;}
    footer .inner ul {flex-direction: column;align-items: flex-start;}
    footer .inner ul li {margin-bottom: 5px;width: 100%;}
    footer .inner ul li p {width: 100%;margin-right:0;font-size: 12px;}
    footer .inner ul li p:nth-child(2) {display: none;}
    footer .inner ul li p.name br {display: none;}
    footer .inner ul li:nth-child(1) {flex-direction: column;}
    footer .inner ul li:nth-child(1) p {margin-bottom: 5px;font-size: 12px;}
    footer .inner ul li:nth-child(2) {text-align: left;}
    footer .inner ul li:nth-child(3) {text-align: left;}
    footer .inner ul li:nth-child(3) br {display: none;}
    footer .inner ul li:nth-child(3) span {font-size: 12px;margin-left:2px;}

    .topBtn {width:20px;height:20px;bottom:30px;}
    .topBtn span {top:1px;font-size: 16px;}
}



/* 320 모바일 */
@media screen and (max-width:320px) { /* 320px 체크 */
    .clone .ex .imgBox .version li a {font-size: 12px;padding:5px 10px;}
}