@charset "utf-8";    /* 인코딩할 때 깨지지 말라고 붙여주는 것 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* 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}

body {font-family: 'pretendard'; background: #000; }
.wrap {position: relative; margin: 0 auto; overflow: hidden; background: #0B0B0B;}
/* 공통요소 */
.inner {width: 85%; margin:0 auto;}
.tit {font-size: 5.5vw; color: #E97FFF; font-weight: 500; font-family: 'NeueMachina'; letter-spacing: -1px;}
.txtBox {font-family: 'pretendard'; font-size: 18px; line-height: 1.5;}

/* header */
header { width: 100%; height: 80px; line-height: 80px;position: fixed; top: 0; left: 0; z-index: 10000;}
.innerHeader { width: 90%; margin: 0 auto; display: flex; justify-content: space-between; }

.innerHeader .logo { width: 150px; font-weight: 500;font-size: 22px; display: block;  line-height: 1.4;  color:#fff; margin-top: 18px;}
.innerHeader .logo span {display: block; font-size: 11px; }

.innerHeader .gnb {display: flex; justify-content:space-between; width: 33%; margin-top: 18px;
}
.innerHeader .gnb li {height:50px; margin: 0 5px; }

.innerHeader .gnb li a {display: block; width: 100%; height: 100%; padding: 10px 25px; box-sizing: border-box; font-size: 18px; color: #fff;border: 1px solid #fff; border-radius: 45px; background: #000; text-align: center; line-height: 1.4;}
header.active {transform: translateY(-100%);}


/* visual */
.visual {width: 100%; position: relative; margin-bottom: 300px; }
.visual .scrollTxt {position: absolute; left: 50%; top:30%; transform: translate(-50%,-50%); font-size: 18px; color:rgba(255,255,255,0.3); text-align: center; width: 50%; line-height: 1.5;}
.visual .topBox {position: relative;}
.visual .topBox .cover {opacity: 0; width: 100%;}
.visual .topBox .cover img {width: 100%;}
.visual .topBox .dashBox {position: absolute; z-index: 100; left: 25%; top:25%; width: 900px; height: 500px;}
.visual .topBox .dashBox .a {position: absolute;  left: 0; top:0; overflow: hidden; }
.visual .topBox .dashBox .b {position: absolute; left:61.5%; top:62%; overflow: hidden;}

.visual .bottomBox {width: 100%; position:absolute; left:0; bottom:-185px;}
.visual .bottomBox p.img {width: 100%; }
.visual .bottomBox p.img img {width: 110%;}
.visual .bottomBox .txtBox {position: absolute; bottom: 50px; left:50%; transform: translateX(-50%); color: #fff;}
.visual .bottomBox .txtBox p { margin-bottom: 20px; font-size: 84px; color: #E97FFF; border: 2px solid #E97FFF; border-radius: 100px; width: 360px; padding: 20px 50px 26px;
text-align: center; font-family: 'NeueMachina'; line-height: 1;}
.visual .bottomBox .txtBox h2 { font-size: 320px; font-family: 'NeueMachina'; font-weight: Regular; line-height: 1;}

/* 공통마스크글자 */

.textBox .mask {display: block;}
.textBox .mask .text {-webkit-text-fill-color: rgba(255,255,255,0.2);-webkit-background-clip: text;background-repeat: no-repeat;background-image: linear-gradient(#fff, #fff);background-size: 0% 100%;
line-height: 1.2;}
.textBox .mask .text b{font-weight: normal;}

/* uiux */
.uiux {width: 100%; margin-bottom: 180px; }
.uiux .lineBox {position: relative; width: 100%; left:0; height: 180px; margin-bottom: 110px;}
.uiux .lineBox .circleBox { width: 150px; height: 150px; border-radius: 100%; border:2px solid #fff; position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%); background:#0B0B0B; z-index: 3; }
.uiux .lineBox .circleBox:before {content: ''; width: 30px; height: 30px; border-radius: 100%; background: #fff; position: absolute; left: 50%; top:50%;  transform: translate(-50%,-50%);}
.uiux .lineBox .line {width: 100%; height: 2px; background: #fff;position: absolute;left: 0; top:50%; transform: translateY(-50%); z-index: 2;}
.uiux .textBox {width: 80%; margin: 0 auto;text-align: center; font-size: 46px; }
.uiux .textBox  { margin-bottom: 50px;}

.uiux .textBox .tit_txt {display: block; font-size: 48px;font-family: 'NeueMachina';
    letter-spacing: -3px;margin-bottom: 30px;}
    
.uiux .textBox .tit_txt em {display: block; font-size: 52px; font-weight: bold; margin-bottom: 30px;}
.uiux .textBox .kr {font-size: 22px; line-height: 1.2; }

/* lilneDesign */
.lineDesign { width: 100%; position: relative;margin-bottom: 500px;}
.lineDesign .bird {position: absolute; left:40%; top:2%; z-index: 100;;}

.lineDesign .scroll-effect .txt {font-size: 100px; color: #000; position: absolute; top: 440px; left: 640px; opacity: 0; transition: opacity 0.5s ease;}
.lineDesign .scroll-effect .txt.active {opacity: 1; z-index: 100; /* 텍스트가 나타날 때 투명도를 1로 설정합니다. */
}


.lineDesign .lineImg {position: relative;  width:100%; height: 4500px;}
.lineDesign .lineImg li {position: absolute; }
.lineDesign .lineImg li:nth-child(1){left: 0; top:0;}
.lineDesign .lineImg li:nth-child(2){left: 0; top:816px;}
.lineDesign .lineImg li:nth-child(3){right: 0; top:600px;}
.lineDesign .lineImg li:nth-child(4){right: 183px; top:26%;}
.lineDesign .lineImg li:nth-child(5){left: 0; bottom:1420px; z-index: 100;}
.lineDesign .lineImg li:nth-child(6){left: 0; bottom:100px;}
.lineDesign .lineImg li:nth-child(7){right: 0; bottom:1600px;}
.lineDesign .lineImg li:nth-child(8){right: 0; bottom:75px;}
.lineDesign .cloud {width: 100%; position: absolute; bottom:-0.2%; left:0; height: 500px;}
.lineDesign .cloud li {position: absolute; left: 0; top:0;}
.lineDesign .cloud li:nth-child(1) {top: 375px; left: 36%;}
.lineDesign .cloud li:nth-child(2) {width: 100%;}
.lineDesign .cloud li img {width: 100%;}

/* slogan */
.slogan {margin-bottom: 300px;}
.slogan .titleBox {font-size: 60px;color: #fff;  line-height: 1.2;letter-spacing: 1.6px;}
.motion .char {
    display: inline-block;
    animation: slide-up2 0.4s cubic-bezier(.5,0,.5,1) both;
    animation-delay: calc(70ms * var(--char-index));
  }
  @keyframes slide-up2 {
      0% {transform: translateX(30px); opacity: 0;}
      30% {transform: translateX(30px); opacity: 0;}
  }
  .motion .aa .char { animation: slide-up2 0.6s cubic-bezier(.5,0,.5,1) both;}
  .motion .bb .char { animation: slide-up2 0.8s cubic-bezier(.5,0,.5,1) both;}
  .motion .cc .char { animation: slide-up2 1s cubic-bezier(.5,0,.5,1) both;}
  .motion .dd .char { animation: slide-up2 1.6s cubic-bezier(.5,0,.5,1) both;}
  .motion .ee .char { animation: slide-up2 1.4s cubic-bezier(.5,0,.5,1) both;}
/* about */
.about { height: 100vh; padding: 180px 0; box-sizing: border-box;}
.about .inner {display: flex;}
.about .inner .leftBox {width: 60%; padding-top: 20px;margin-right: 50px; }
.about .inner .leftBox .tit {margin-bottom: 50px;}
.about .inner .leftBox .txtBox {color: #fff; }
.about .inner .leftBox .txtBox .subTitle {font-size: 32px; font-weight:500; 
margin-bottom: 30px; line-height: 1.3; letter-spacing: -1px; font-weight: normal;}  

/* .about .inner .leftBox .txtBox p {margin:20px 0;} */
.about .inner .leftBox .txtBox .subTxt {margin-bottom: 40px; font-size: 24px; color:rgb(201, 201, 201); }
.about .inner .leftBox .txtBox h3 {font-size: 24px; color:#fff;font-weight: normal;margin-bottom: 5px;}
.about .inner .leftBox .txtBox .detail {color:#d8d8d8;}

@keyframes textAni1 {       
    0% {opacity: 0;}
    40% {opacity: 0; transform: translate3d(0,50px,0);}
}
.about .inner .leftBox .detail {font-size: 18px;}
.about .inner .leftBox .detail li {margin-bottom: 10px;}
.about .inner .rightBox { width: 55%; position: relative; }
.about .inner .rightBox .numList { color: #fff; display: flex; font-size: 800px; font-family: 'NeueMachina'; position: absolute; line-height: 0.65; width: 679px; font-weight: 500; }

.about .inner .rightBox .numList  li {position: absolute; width:40%;}
.about .inner .rightBox .numList  li:nth-child(1) {-webkit-text-stroke: 3px #fff; color: transparent;  left: 0; top: 0; }
.about .inner .rightBox .numList  li:nth-child(2) {-webkit-text-stroke: 3px #fff; color:#0b0b0b;  left:50%; transform: translateX(-50%); top: 0;}
.about .inner .rightBox .numList  li:nth-child(3) { right:0; top: 0;-webkit-text-stroke: 2px #fff;}

.about .inner .rightBox .plusBox  {position:absolute; right: 30%; bottom:0px; 
 width: 180px; height: 130px;  padding-top: 100px; box-sizing: border-box; text-transform: uppercase;}
.about .inner .rightBox .plusBox:before {position: absolute; content: ''; width: 80px; height: 10px; background: #E97FFF; top: 34px;}
.about .inner .rightBox .plusBox:after {position: absolute; content: ''; width: 10px; height: 80px; background: #E97FFF; top: 0px; left:39px; transform: translateX(-50%);}
.about .inner .rightBox .plusBox p {font-size: 18px; color: #fff; }

/* motion animation */
.about .inner .leftBox.motion .tit {animation-name: textAni1; animation-duration: .8s;}
.about .inner .leftBox.motion .txt {animation-name: textAni1; animation-duration: 1s;}
.about .inner .leftBox.motion .txtBox {animation-name: textAni1; animation-duration: 1.2s;}
.about .inner .leftBox.motion .btn {animation-name: textAni1; animation-duration: 1.4s;}



/* career */
.career { height: 120vh; padding: 180px 0 0; box-sizing: border-box; position: relative; }
.career span.a {display: inline-block; position: absolute; left: 0; bottom:0px}
.career span img {filter: brightness(60%)}
.career .circleBox {position: absolute; width: 100%; height: 260px; left: 0; top: 40%; z-index: 0;}
.career .circleBox span {position:absolute; left: 50%; transform: translate(-50%,-50%);  top: 50%;border: 3px dashed rgba(255, 255, 255, 0.3);  border-radius: 100%;}
.career .circleBox span.a{width: 1420px;height: 286px; }
.career .circleBox span.b{width: 1790px;height: 433px;}
.career .circleBox span.c{width: 2160px;height: 603px;}
.career .circleBox .yearBox {position: absolute; width: 1235px; height: 20px;  left: 50%; transform: translateX(-50%); bottom: -177px; }
.career .circleBox .yearBox li {position: absolute;  color:#fff; font-size: 20px; padding-top: 40px;}
.career .circleBox .yearBox li::before{content: ''; width: 20px; height: 20px; border-radius: 100%; background: #fff; position: absolute; top:0; left:0 }
.career .circleBox .yearBox li.d::before {width: 65px; height: 65px; background: #E97FFF; top:-70px}
.career .circleBox .yearBox li.a {left: 0; top:-50px;}
.career .circleBox .yearBox li.b {left:33%; top:0}
.career .circleBox .yearBox li.c {right:33%; top:0;}
.career .circleBox .yearBox li.d {right: 0; top:0;}



/* .career .inner {position: absolute; left: 50%; transform: translateX(-50%); } */
.career .inner {position: relative; z-index: 1; }
.career .inner .tit {margin-top: -100px;}
.career .inner ul {display: flex; justify-content:space-between; }
.career .inner ul.topBox {width: 80%; height: 600px; color: #fff; margin: 0 auto;  display: flex; justify-content: space-between;}
.career .inner ul.topBox li { border-radius: 30px; border: 1.2px solid #E97FFF; padding: 1.5vh 1.5vw; box-sizing: border-box;  width: 23%; height: 460px; margin-top: 100px; background: #0B0B0B; overflow: hidden;}
.career .inner ul h3 {margin-top: 20px; font-size: 23px; font-weight: 500; margin-bottom:4px;}
.career .inner ul.topBox li p {line-height: 1.8; color: #858585; }
/* .career .inner ul.yearBox {color: #fff; margin: 0 auto; width: 920px; font-size: 24px;} */


.career .inner ul.topBox li.a1.motion  {animation-name: textup; animation-duration: 0.8s;}
.career .inner ul.topBox li.b1.motion  {animation-name: textup; animation-duration: 1.4s;}
.career .inner ul.topBox li.c1.motion {animation-name: textup; animation-duration: 1.8s;}
.career .inner ul.topBox li.d1.motion {animation-name: textup; animation-duration: 2s;}
@keyframes textup {
    0% {opacity: 0;}
    20% {opacity: 0; transform: translate3d(0,50px,0);}
    80% {opacity: 1; transform: translate3d(0,0px,20px);}
}

/* work */
.con02 {position: relative; margin-bottom: 1000px;}
.con02 span.b {display: inline-block; position: absolute; right: 0; bottom:-452px; }
.con02 span img {filter: brightness(60%)}
.con02 .title{width: 100%; height: 100vh; font-size: 170px; line-height: 0.9; text-align: center; padding-top: 30vh; box-sizing: border-box;font-weight: 500; font-family: 'NeueMachina';}
.con02 .title .en2 { font-size: 160px; letter-spacing: -5px; }
.con02 .title .a {font-size: 140px; letter-spacing: -3px;font-family: 'pretendard'; font-weight:normal;color:#E97FFF;  }
.con02 .workList { width: 70%; display: flex; margin: 0 auto; justify-content: space-between; flex-wrap: wrap;}
.con02 .workList > li { width: 45%; margin-top: 200px;}
.con02 .workList > li:nth-child(2n){margin-top: 0;}
.con02 .workList > li a {display: block; width: 100%; height: 100%; }
.con02 .workList .imgBox {border-radius: 45px;}
.con02 .workList li a .imgBox img{width: 100%;border-radius: 45px; filter: brightness(50%);}
.con02 .workList li a .textBox {display: flex; justify-content: space-between;  }
.con02 .workList li a .textBox h3{ font-weight: normal; font-size: 1.2vw; margin: 20px 0 5px; line-height: 0.9; }
.con02 .workList li a .textBox .info { display: flex; justify-content: space-between; color: #888; font-size: 0.8vw; color: #fff; margin-top: 20px; ; }
.con02 .workList li a .textBox .info li {align-self: center; padding:10px 15px; border-radius: 20px; border:1px solid #fff; text-transform: uppercase; margin-left: 10px; cursor: pointer;}



/* .workList hover -> button */
.con02 .workList li a .imgBox {position: relative;}
.con02 .workList li a .imgBox::before {content: ''; width: 168px; height: 168px; border-radius: 100%; border: 1px solid #fff; background: url(../img/readMore2.png)no-repeat center/35px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(45deg); z-index: 1; transition: all 0.3s; opacity: 0;}
.con02 .workList li a .imgBox:after {content: ''; width: 0px; height: 0px; border-radius: 100%; background: #fff url(../img/readMore3.png)no-repeat center/160px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 1; animation-name: spin; animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: linear; transition: .4s;}
@keyframes spin {
    0%{transform: translate(-50%,-50%) rotate(0deg);}
    100%{transform: translate(-50%,-50%) rotate(360deg);}
}

.con02 .workList li a:hover .imgBox img {filter: brightness(80%); transition: 0.3s;}
.con02 .workList li a:hover .imgBox::before { opacity: 1; z-index: 2;}
.con02 .workList li a:hover .imgBox::after { width: 168px; height: 168px; }

/* star */
.slide {height: 100vh; padding: 0px 0; box-sizing: border-box; margin-bottom: 200px;}
.slide .star {display: flex; width: 100%; margin-bottom: 100px;}
.slide .star li {text-align: center; width: 20%;}
.slide .star li img {width: 90%; }

.slideBox {display: flex; white-space: nowrap;font-size: 145px; letter-spacing: -2px;font-weight: 500; font-family: 'NeueMachina';}
.slideBox li {animation: slideBox 20s linear infinite; padding: 0 10px;}
@keyframes slideBox {
    0% {transform: translate3d(0, 0, 0);}
    100% {transform: translate3d(-100%, 0, 0); }
}
 
.slideBox_re {display: flex; white-space: nowrap; font-size: 145px; letter-spacing: -2px;}
.slideBox_re li {animation: slideBox_re 20s linear infinite; padding: 0 30px; -webkit-text-stroke: 2px #fff; color:transparent;}
@keyframes slideBox_re {
    0% {transform: translate3d(-100%, 0, 0);}
    100% {transform: translate3d(0, 0, 0); }
}

/* SKILLS */
.skills {  padding: 180px 0; box-sizing: border-box; }
.skills .inner .tit {margin-bottom: 20px; line-height: 1;}
.skills .inner .kr {font-size: 20px; color:#888;  margin-bottom: 100px;}
.skills .inner ul  { width: 100%;display: flex; justify-content:space-between; margin-bottom: 50px; }
.skills .inner ul li {width: 23%; text-align: center;}
.skills .inner ul li a {display: block; width: 100%;height: 100%; }
.skills .inner ul li a .onlineText {width: 100%;  border-radius: 30px; height: 32vh;
border: 1.2px solid #E97FFF; padding: 2vh 1.5vw 1.8vh; box-sizing: border-box; text-align: left;
background: #0D0D0D; }
.skills .inner ul li a .onlineText h3 {font-size: 1vw; line-height: 1.3;margin-bottom: 20px; font-weight: 500;}
.skills .inner ul li a .onlineText h3 span {display: block; font-size: 15px; margin-bottom: 10px; font-weight: normal;}
.skills .inner ul li a .onlineText .review {font-size: 0.9vw; margin-bottom: 20px; color:#E97FFF}
.skills .inner ul li a .onlineText .title {font-size: 0.85vw; margin-bottom: 20px; color:#fff;}
.skills .inner ul li a .onlineText .overview {font-size: 15px; line-height: 1.4;  color:#888; margin-bottom: 10px; text-align: left; }
.skills .inner ul li a .onlineText .more {display: inline-block; font-size: 16px; color:#FFF; padding: 5px 15px; box-sizing: border-box; border:1px solid #FFF;  border-radius: 50px; float: right;background: #0D0D0D;}
/* .skills .inner ul img {width: 90%;} */
.skills .inner ul.top {transform: translateX(-20%);} 
.skills .inner ul.bottom {transform: translateX(20%);} 

.handBox { position: relative;  height: 80vh; padding: 150px 0;}
.handBox .leftHand  {position: absolute; left: 0; top: 0;}
.handBox .rightHand { width: 1510px; position: absolute; right: 0; bottom: 300px; }
.hand .rightHand img {width: 100%;}

/* STRENGTH
.strength { height: 180vh; display: flex; align-items: center; justify-content: center; color: #ff6464; position: relative; border: 1px solid red;}
.strength h2 {font-size: 200px; text-transform: uppercase;}
.strength ul {width: 120%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; justify-content: space-between; flex-wrap: wrap;}
.imgBox li {display: flex; width: 21%; margin: 100px;}
.imgBox li:nth-child(4) {transform: translateX(400px);}
.imgBox li:nth-child(5) {transform: translateX(-400px);} */




/* portfolio */
.portfolio {position: relative; height: 100vh;   align-items: center; justify-content: center; margin-bottom: 200px;}
.portfolio .textBox { }
.portfolio .textBox .tit{ letter-spacing: -5px; color: #fff; margin-left: 150px; font-size: 62px;}
.portfolio .textBox .tit span {display: block; font-size: 5.5vw; color:#E97FFF}
.portfolio .list {display: flex; z-index: 10; position: absolute; top: 50%; left: 8%;}
.portfolio .list li {width: 530px; height: 400px; flex-shrink: 0 !important; padding: 0 30px; }
/* 'padding'은 가로 스크롤의 총 길이에 포함됨
'flex-shrink' :0; 으로 적용할때 li가 너비를 자기 사이즈 (width)를 유지합니다. */
.portfolio .list .port01 {width: 530px; height: 400px; background: #101010; border:1px solid #E97FFF; border-radius: 30px; padding:40px;  box-sizing: border-box; margin-right: 50px; }
.portfolio .list li .box {width: 100%;}
.portfolio .list .port01 .box a {display: block; display: flex; justify-content: space-between; cursor: pointer;}
.portfolio .list .port01 .box a .leftText {width: 40%; padding-top: 160px; color:#fff; line-height: 1.6;font-size: 18px;}
.portfolio .list .port01 .box a .leftText .name {font-weight: bold;}
.portfolio .list .port01 .box a .leftText .more {display: inline-block; border:1px solid #fff; margin-top: 15px; padding : 3px 20px; border-radius: 15px;}
.portfolio .list .port01 .box a .img {width: 45%; margin-top: 10px; border-radius: 10px; overflow: hidden;}
.portfolio .list .port01 .box a .img img {width: 100%; filter: brightness(50%);}

.portfolio .list .port01 .box a:hover .img img {width: 100%; filter: brightness(100%);}




/* white cloud */
.whitecloud { width: 100%; position: relative; height: 140vh;  }
.whitecloud .cloud {}
.whitecloud .cloud li:nth-child(1) {position: absolute; left: 0; top: -40px; z-index: 1;}
.whitecloud .cloud li:nth-child(2) {position: absolute; right: -100px; top: -275px; z-index: 10;}
.whitecloud .cloud li:nth-child(3) {position: absolute; bottom: -1240px; z-index: 100; width: 100%;} 
.whitecloud .cloud li:nth-child(3) img {width: 100%;}
.whitecloud .txtBox {padding: 200px; box-sizing: border-box; position: relative; height: 100vh; z-index: 1000;}
.whitecloud .txtBox p {
    width: 70%;
    color: #0c0b0b;
    text-align: center;
    text-transform: uppercase;
    background-clip: border-box; 
    border: 1px solid #000;
     border-radius: 120px;
    font-size: 130px;
    margin: 0 auto;
    background: #fff;
    }

.whitecloud .txtBox .a {position: absolute; top: 40%; left: 15%; transform:  rotate(-4deg);}
.whitecloud .txtBox .b {position: absolute; top: 61%; left: 20%; font-size: 130px; transform: rotate(7deg);}
.whitecloud .txtBox .c {position: absolute; top: 77%; left: 13%; transform:  rotate(-7deg); letter-spacing: -5px;font-size: 130px;}

.whitecloud .blackcloud {position: absolute; left: 0; bottom: 0; z-index: 3000; width: 100%; }
.whitecloud .blackcloud .cloud {width: 100%;}
.whitecloud .blackcloud .cloud img {width: 100%;}
.whitecloud .blackcloud .text {color:#fff; font-size: 42px;position: absolute; left: 50%; top:5%; transform: translatex(-50%); text-align: center;}

.whitecloud .textBox {width: 80%; margin: 0 auto;text-align: center; font-size: 46px; }
.whitecloud .textBox .tit_txt {display: block; font-family: 'NeueMachina';
    letter-spacing: -1px;margin-bottom: 30px;font-size: 2.2vw;}
    
.whitecloud .textBox .tit_txt em {display: block;  font-weight: bold;font-size: 2.7vw;
margin-bottom: 15px;}
.whitecloud .textBox .tit_txt .kr {font-size: 20px; color:#888; line-height: 0.9;}
.whitecloud .textBox .tit_txt {width:80%}


/* gallery */
.gallery {width: 100%; margin: 0 auto;  padding: 200px 0; }
.gallery .inner h2 {line-height: 1; margin-bottom: 20px;}
.gallery .inner .kr {font-size: 20px;margin-bottom: 200px; color:#888; }
.gallery .photo {display: flex; justify-content: space-between;  width: 85%; margin: 0 auto; }
.gallery .photo li {cursor: pointer; transition: all 0.5s ; width: 23%;}
.gallery .photo li a{display: block; width: 100%; height: 100%; cursor: pointer;}
.gallery .photo li a img {width: 100%;}
.gallery .photo li:hover {transform: scale(1.1); transition: all 0.4s;}
.gallery .photo li:nth-child(1) {transform: scale(1.1) rotate(-5deg); margin-left: 3vw;}
.gallery .photo li:nth-child(2) {transform: scale(1.1) rotate(3deg);  margin-top: -20px; }
.gallery .photo li:nth-child(3) {transform: scale(1.1) rotate(-3deg);}
.gallery .photo li:nth-child(4) {transform: scale(1.1) rotate(3deg);  margin-top: -30px; margin-right: 3vw; }
.gallery .photo li:nth-child(1):hover {transform: scale(1.1) rotate(5deg);}
.gallery .photo li:nth-child(2):hover {transform: scale(1.1) rotate(0deg);  margin-top: -10px; }
.gallery .photo li:nth-child(3):hover {transform: scale(1.1) rotate(2deg); margin-top: -10px;}
.gallery .photo li:nth-child(4):hover {transform: scale(1.1) rotate(0deg);  margin-top: -20px; }


.gallery .photo li img {height: auto; cursor: pointer;}
.gallery .imgBox {position: absolute; transform: scale(0); opacity: 0; z-index: 100;}
.gallery a.btn {margin-top: 45px; float: right; display: block; color: #fff; font-size: 28px; border: 1px solid #fff; border-radius: 45px; width: 120px; height: 40px; padding: 10px 20px; line-height: 40px; text-align: center;}
.wrap.on {overflow: hidden;}



footer .goTop {position: fixed; right: 80px;bottom: 60px; font-size: 30px; color:#fff; display: block;
 width: 80px; height: 80px;border-radius: 50%; border:1px solid #fff; display: flex;
justify-content: center; align-items: center; background:  #0D0D0D;}


/* footer */
footer {width: 100%; position: relative; height: 100vh; }
footer .textWrap {position: absolute; width: 100%; top: 30%; left: 0; padding: 0px 120px; box-sizing: border-box; font-size: 6.7vw; line-height: 1; letter-spacing: -1px;}
footer .textWrap .title {font-size: 1.5vw; margin-bottom: 30px; padding-left: 15px; color: #E97FFF;}
footer .textWrap .contact {margin-bottom: 30px; font-family: 'NeueMachina'; }
footer .textWrap .address {font-weight: 200;}
footer .textWrap a {display: block; margin-top: -30px;}
footer .bottom {position: absolute; bottom: 5%; width: 85%; display: flex; justify-content: space-between;  font-size: 30px; letter-spacing: -1px; font-family: 'NeueMachina';}
footer .bottom .sns {display: flex; }
footer .bottom .sns li { }
footer .bottom .sns li a {display: block; width: 100%; height: 100%; cursor: pointer; font-size: 48px;}
.copyright {font-size: 1.2vw; padding-right: 20px;}