@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:#000;}
.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 {color:#000;text-transform: uppercase;font-family: 'Neue Haas Grotesk Display Pro', sans-serif;font-size: 66px;font-weight: 700;}



/* 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: #fff url(../img/portfolioBG.png) no-repeat;background-size:115%;background-position-y:-30vh;background-position-x:-2vw;overflow: hidden;position: relative;}
.visual .inner {width: 435px;height: 255px;margin:40vh auto 0;text-align: center;}
.visual .inner p {font-size: 30px;font-weight: 200;}
.visual .inner h2 {font-size: 72px;margin:10px 0 85px;font-weight: normal;}
.visual .inner  ul {width: 100%;display: flex;justify-content: space-between;}
.visual .inner  ul li a {display: block;width: 100%;height: 100%;padding:8px 15px;border-radius: 30px;border:1px solid rgba(0,0,0,0.1);box-sizing: border-box;}

/* 이전다음버튼 */
.visual .btn {width:100px;position: absolute;top:50%;}
.visual .btn a {display: block;width: 100%;height: 100%;color:#000;}
.visual .prev {left:0;text-align: right;}
.visual .prev::before {content:'';width:40px;height:1px;position: absolute;left:0px;top:50%;background: #000;}
.visual .next {right:0;}
.visual .next::before {content:'';width:40px;height:1px;position: absolute;right:0px;top:50%;background: #000;}

/* section.summary */
.summary {width: 100%;overflow: hidden;padding:220px 0;}
.summary .inner {width: 1440px;margin:0 auto;overflow: hidden;}
.summary .inner > div {width: 50%;}
.summary .inner .diagram {float: left;}
.summary .inner .diagram .title {font-size: 32px;font-weight: 800;text-align: center;margin-bottom: 100px;}
.summary .inner .diagram .circleBox {width: 360px;height: 360px;margin:0 auto;background: url(../img/diagramCicle.png) no-repeat;background-size: 90%;background-position: center;position: relative;}
.summary .inner .diagram .circleBox p {width: 115px;height: 115px;border-radius: 50%;border:1px solid #707070;background: #f7f7f7;position: absolute;font-size: 15px;text-align: center;line-height: 115px;}
.summary .inner .diagram .circleBox p.c1 {left:50%;transform:translateX(-50%);top:-30px;}
.summary .inner .diagram .circleBox p.c2 {bottom:40px;left:-20px;}
.summary .inner .diagram .circleBox p.c3 {bottom:40px;right:-20px;}

.summary .inner .description {float: right;padding-right:30px;box-sizing: border-box;}
.summary .inner .description ul {display: flex;margin-bottom:70px;}
.summary .inner .description ul li {float:left;margin-right:35px;}
.summary .inner .description ul li a {display: block;width: 100%;height: 100%;padding:9px 25px;box-sizing: border-box;border-radius: 50px;background: #707070;color:#fff;font-size: 18px;}
.summary .inner .description .text {font-size: 22px;word-break: keep-all;font-weight: 300;color:#232323;line-height: 1.5;text-align: justify;padding-bottom:65px;border-bottom: 1px solid #707070;}
.summary .inner .description div {width: 100%;margin-top:73px;padding-left:10px;box-sizing: border-box;}
.summary .inner .description div p {width: 50%;font-size: 19px;font-weight: 300;line-height: 1.7;}
.summary .inner .description div .program {float: left;}
.summary .inner .description div .date {float:right;}
.summary .inner .description div p span {display: block;font-size: 30px;font-weight: bold;color:#707070;margin-bottom:5px;}

/* section.uiux */
/* uiuxCover */
.uiux .uiuxCover {width: 100%;height: 60vh;background: #f7f7f7;}
.uiux .uiuxCover h2 {text-align: center;width: 80%;margin:0 auto 20px;padding-top:25vh;box-sizing: border-box;}
.uiux .uiuxCover p {font-size: 24px;width: 50%;margin:0 auto;text-align: center;}


/* fix메뉴 */
.uiux .container {width: 100%;background: #232323;overflow: hidden;display: flex;}
.uiux .container .fix {width: 25%;height: 100vh;position: relative;}
.uiux .container .fix .text {height:400px;position: absolute;top:50%;left:50px;}

.uiux .container .fix .text h2 {font-size: 50px;color:#fff;margin:0 auto 50px;padding-left:10px;text-align: center;font-weight: 600;}
.uiux .container .fix .text ul {width: 100%;padding-left:60px;box-sizing: border-box;}
.uiux .container .fix .text ul li {width: 100%;height: 50px;line-height: 50px;font-size: 22px;color:#ddd;position: relative;transition:all 0.3s;}
.uiux .container .fix .text ul li:before {content:'';width: 9px;height: 9px;border-radius: 50%;background: #ddd;position: absolute;left:-30px;top:50%;transform:translateY(-50%);}
.uiux .container .fix .text ul li:after {content:'';width: 0px;height: 1px;background: #fff;position: absolute;top:50%;left:10px;transition:all 0.3s;}
.uiux .container .fix .text ul li a {display: block;width: 100%;height: 100%;position: relative;transition:all 0.3s;}

/* on 붙었을 때 */

.uiux .container .fix .text ul li.on:after {width: 60px;transition:all 0.3s;}
.uiux .container .fix .text ul li.on a {transform:translateX(80px);transition:all 0.3s;}

/* .motion */
/* .uiux .container .fix .text.motion {animation-name:fix;animation-duration: 0.5s;}

@keyframes fix {
    0% {opacity:0;transform: translateY(300px);}
    10% {opacity:0;transform: translateY(300px);}
} */

/* 텍스트 공통 애니메이션 */
@keyframes textAni {
    0% {opacity: 0;}
    30% {opacity: 0;}
}

.text.motion .word {
    animation: textAni 0.8s both;
    animation-delay: calc(0.02s * var(--word-index));
}

/* uiux list 공통*/
.uiux .container .list {width: 75%;background: #141414;float:right;}
.uiux .container .list li {width: 900px;margin:235px auto 0;text-align: center;overflow: hidden;}
.uiux .container .list li h3 {font-size: 26px;color:#fff;font-weight: 600;margin-bottom: 15px;letter-spacing: 0;}
.uiux .container .list li > p {font-size: 17px;color:#fff;margin-bottom:100px;font-weight: 200;}

.uiux .container .list li .imgBox img, .uiux .container .list li .imgBox video {filter:brightness(70%);}
.uiux .container .list li .imgBox video {width:100%;height:100%;object-position: 50% 50%;object-fit: cover;}
.uiux .container .list li .imgBox .img1, .uiux .container .list li .imgBox .img2 {overflow: hidden;border-radius: 50px;}
.uiux .container .list li .imgBox .img1 {width: 880px;height:530px;}
.uiux .container .list li .imgBox .img2 {width: 620px;height:465px;}
.uiux .container .list li .imgBox .img2 img {width: 100%;height: auto;}

/* brainstorming */
.uiux .container .list .li1 .imgBox .img1 {margin:0 auto 85px;}
.uiux .container .list .li1 .imgBox p:nth-child(2) {float:left;margin-bottom:75px;}
.uiux .container .list .li1 .imgBox p:nth-child(3) {float:right;}

/* mindmapping */
.uiux .container .list .li2 .imgBox .img1 {margin:0 auto 85px;}
.uiux .container .list .li2 .imgBox p:nth-child(2) {float:right;margin-bottom:75px;}
.uiux .container .list .li2 .imgBox p:nth-child(3) {float:left;}
.uiux .container .list .li2 .imgBox p:nth-child(3) img {object-position: 50% -150px;}

/* information architecture*/
.uiux .container .list .li3 {width: 1000px;}
.uiux .container .list .li3 .imgBox p {width: 100%;}
.uiux .container .list .li3 .imgBox p img {filter: brightness(100%);}

/* research */
.uiux .container .list .li4 {width: 100%;}
.uiux .container .list .li4 .imgBox img {width: 100%;filter:brightness(40%)}

/* concept & idea sketch */
.uiux .container .list .li5 {width: 1000px;}
.uiux .container .list .li5 .imgBox {width: 100%;display: flex;justify-content: space-between;padding-bottom:100px;}
.uiux .container .list .li5 .imgBox p {width: 200px;}
.uiux .container .list .li5 .imgBox p img {width: 100%;filter: brightness(90%);}

/* section.style */
.style {width: 100%;overflow: hidden;background: #f7f7f7;}
.style span {display: block;width: 100%;text-align: center;font-size: 25px;font-weight: 700;margin-bottom: 80px;color:#141414}

.style .inner {width: 1400px;margin:280px auto;}
.style .inner h2 {text-align: left;width:100%;margin-bottom:20px}
/* .style .inner h2:before {content:'02';color:rgba(137,205,223,0.65);} */
.style .inner > p {width:100%;padding-bottom:60px;border-bottom:1px solid #232323;margin-bottom:150px;font-size: 32px;color:#aaa;font-weight: 500;}
.style .inner .content1 {width: 100%;overflow: hidden;margin-bottom:190px;}

.style .inner .content1 .logo {width: 60%;float:left;}
.style .inner .content1 .logo p {width: 600px;margin:0 auto 90px;}
.style .inner .content1 .logo p img{width: 100%;}

.style .inner .content1 .symbol {width: 40%;float: right;}
.style .inner .content1 .symbol .img {width: 205px;margin:170px auto 150px;position: relative;z-index: 1;}
.style .inner .content1 .symbol .img:after {content:'';width: 370px;height: 370px;margin:0 auto;background: #fff;position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index: -1;}
.style .inner .content1 .symbol .img img {width: 100%;}
.style .inner .content1 .symbol .txt {width: 320px;margin:0 auto;text-align: center;font-size: 18px;line-height: 1.4;}

.style .inner p.sub {width:100%;font-size: 25px;font-weight: 600;color:#FF4646;margin-bottom:60px;}

.style .inner .content2 {display: flex;margin-bottom: 125px;}
.style .inner .content2 .paragraph {width: 45%;height:550px;border-right:1px solid #aaa;padding:0 60px;box-sizing: border-box;}
.style .inner .content2 .paragraph .img {width: 400px;}
.style .inner .content2 .paragraph .img img {width: 100%;}
.style .inner .content2 .color {width: 55%;height: 550px;padding-left:60px;}
.style .inner .content2 .color .img {width: 542px;height: 550px;}
.style .inner .content3 {width: 100%;overflow: hidden;}
.style .inner .content3 .sub {padding-left: 60px;}
.style .inner .content3 .fontBox {display: flex;justify-content: space-between;}
.style .inner .content3 .fontBox li {width: 33.3333%;border-right:1px solid #aaa;box-sizing: border-box;}
.style .inner .content3 .fontBox li:last-child {border:none;}
.style .inner .content3 .fontBox li p {width: 320px;margin:0 auto;}
.style .inner .content3 .fontBox li:nth-child(2) p {width: 340px;}
.style .inner .content3 .fontBox li p img {width: 100%;}

/* section.wire */
.wire {width: 100%;overflow: hidden;background: #141414;}
.wire .inner {width: 1400px;margin:0 auto;padding:170px 0;box-sizing: border-box;}
/* .wire .inner h2.title:before {content:'03';color: rgba(146,223,137,0.65);} */
.wire .inner h2 {color:#fff;}
.wire .inner .content p {width: 100%;text-align: center;font-size: 20px;font-weight: 200;margin:170px auto 105px;color:#fff;}
.wire .inner .content ul {width: 90%;display: flex;justify-content: space-between;margin:0 auto;}
.wire .inner .content ul li {width: 200px;}
.wire .inner .content ul li img {width: 100%;}

/* section.test */
.test {width: 100%;overflow: hidden;background: #f7f7f7;}
.test .inner {width: 1400px;margin:0 auto;padding:285px 0 200px;box-sizing: border-box;}
.test .inner h2 {margin-bottom: 150px;}
/* .test .inner h2.title:before {content:'04';color:rgba(255,233,123,0.65);} */
.test .inner .coding {width: 1100px;height: 650px;background: gray;margin:0 auto 135px;overflow: hidden;}
.test .inner .coding video {width:100%;height:100%;object-fit: cover;object-position: 50% 50%;}
.test .inner .descBox {width: 1100px;margin:0 auto;display:flex;}
.test .inner .descBox .text {width: 50%;padding-left: 5%;box-sizing: border-box;}
.test .inner .descBox .text .sub {font-size: 22px;font-weight: bold;margin-bottom: 20px;}
.test .inner .descBox .text p {line-height: 1.2;}

/* footer */
footer{width: 100%;overflow: hidden;background: #000;}
footer .inner {width: 90%;margin:120px auto 70px;color:#fff;}
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 #fff;border-bottom: 1px solid #fff;}
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:#fff;}
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;}