@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 {text-align: center;font-size: 22px;color:#000;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;}

/* visual */
.visual {width: 100%;height: 100vh;}
.visual .inner {width: 1440px;height: 100vh;margin:0 auto;}
.visual .inner .score {width: 30%;height: 100%;float: left;position: relative;box-sizing: border-box;/*left:15vw;*/}
.visual .inner .score p {width: 16px;height:56px;text-align: left;position: absolute;bottom:10vh;left:-5%;}
.visual .inner .score p img {width: 100%;}
.visual .inner .score div {width: 100%;height: 100%;position: relative;}
.visual .inner .score div span {display:block;width: 1px;height: 100%;position: absolute;}
.visual .inner .score div span:nth-child(1) {left:100px;background: #232323;}
.visual .inner .score div span:nth-child(2) {left:180px;background: #565656;}
.visual .inner .score div span:nth-child(3) {left:260px;background: #828282;}
.visual .inner .score div span:nth-child(4) {left:340px;background: #acacac;}
.visual .inner .score div span:nth-child(5) {left:420px;background: #c2c2c2;}
.visual .inner .score ul {width:100%;position: absolute;left:-50px;top:0;padding-top:90px;box-sizing: border-box;display:flex;}

/* .visual .inner .score ul li {margin-right:-9px;}
.visual .inner .score ul li:nth-child(1){padding-top:60vh;}
.visual .inner .score ul li:nth-child(2){padding-top:25vh;}
.visual .inner .score ul li:nth-child(4){padding-top:45vh;} */

.visual .inner .score ul li {position: relative;}
.visual .inner .score ul li:nth-child(1){top:60vh;left:100px;}
.visual .inner .score ul li:nth-child(2){top:25vh;left:100px;}
.visual .inner .score ul li:nth-child(3) {top:0;left:100px;}
.visual .inner .score ul li:nth-child(4){top:45vh;left:90px;}


.visual .inner .visualText {width: 70%;height: 100%;float: right;padding:22vh 3vw 0 7vw;box-sizing: border-box;position: relative;left:5vw;}

.visual .inner .visualText .restBox {width: 283px;height: 338px;position: relative;left:-70px;top:-20px;}
.visual .inner .visualText .restBox p{width: 100%;position: absolute;}
.visual .inner .visualText .restBox p img {width: 100%;}
.visual .inner .visualText .restBox p:nth-child(1) {left:-25px;}
.visual .inner .visualText .restBox p:nth-child(3) {left:25px;}

.visual .inner .visualText .textBox {width:100%;position:relative;top:-20vh;color:#000;}
.visual .inner .visualText .textBox p {font-size: 21px;text-align: center;color:#565656;}
.visual .inner .visualText .textBox h2 {font-size: 110px;text-align: center;font-weight: 500;letter-spacing: 3px;}
.visual .inner .visualText .textBox ul {width: 60%;margin:80px auto 0;font-size: 14px;display:flex;justify-content: space-between;}
.visual .inner .visualText .textBox ul li {width: 27%;position: relative;box-sizing: border-box;padding-left:3%;}
.visual .inner .visualText .textBox ul li:nth-child(1) {margin-left:9%;}
.visual .inner .visualText .textBox ul li:before {content:'';width: 1px;height: 16px;position: absolute;left:5%;top:0;background: #707070;transform:rotate(40deg);}

/* section.cloneCoding */
.cloneCoding {width: 100%;overflow: hidden;background: #F7F7F7;padding-bottom:200px;}
.cloneCoding .inner {width: 1440px;margin:180px auto 0;}
.cloneCoding .inner h2 {margin-bottom:30px;}
.cloneCoding .inner .subtitle {text-align: center;font-size: 22px;color:#232323;font-weight: 200;margin-bottom:110px;}
.cloneCoding .inner ul {width: 100%;border-top:1px solid #000;border-bottom:1px solid #000;box-sizing: border-box;}
.cloneCoding .inner ul li {width: 100%;height: 270px;border-bottom:1px solid #c2c2c2;font-size: 77px;transition: all 0.5s;position: relative;}
.cloneCoding .inner ul li:last-child {border:none;}
.cloneCoding .inner ul li a {position: absolute;z-index: 1;display:block;width: 100%;height: 100%;line-height: 270px;padding-left: 10rem;transition: all 0.3s;box-sizing: border-box;}
.cloneCoding .inner ul li a span {display:inline-block;height: 100%;width: 100%;;transition: all 0.3s;}
.cloneCoding .inner ul li a span.num {width: 5%;font-size: 20px;vertical-align: top;box-sizing: border-box;}
.cloneCoding .inner ul li a span.title {width: 95%;}
.cloneCoding .inner ul li.twoline a span.title{line-height: 1;padding-top:5%;box-sizing: border-box;}

.cloneCoding .inner ul li p {width: 660px;height:400px;position: absolute;z-index:0;top:0;overflow: hidden;transform:translateY(-50%);}
.cloneCoding .inner ul li:nth-child(2n) p.img {right:3%;}
.cloneCoding .inner ul li p.img img{width: 100%;height:auto;opacity: 0;transition: all 0.3s;object-fit: fill;object-position: 50% 50%;}


/* 호버효과 */
.cloneCoding .inner ul li:hover a {padding-left:0;transition:all 0.5s;}
.cloneCoding .inner ul li.on p img {opacity:1;transition: all 0.3s;}



/* section.graphic */
section.graphic {width: 100%;overflow: hidden;margin:200px auto 0;}
.graphic h2 {width: 100%;margin-bottom: 20px;}
.graphic p.subtitle {width: 100%;text-align: center;font-size: 22px;font-weight: 200;margin-bottom:110px;}
.graphic div.img {width: 100%;height: 90vh;background: url(../img/galleryMockup.png) no-repeat;background-size: cover;background-attachment: fixed;background-position-y: -100px;}
/* .graphic p.img {width: 100%;}
.graphic p.img img {width: 100%;} */



/* section.ncs */
section.ncs {width: 100%;overflow: hidden;padding:200px 0 150px;background: #202020;box-sizing: border-box;}
section.ncs .inner {padding-top:7vh;}
.ncs h2 {color:#fff;}
.ncs ul {width: 100%;height: 550px;display: flex;margin-top:185px;flex-wrap: nowrap;position: relative;}
.ncs ul li {flex-shrink: 0 !important;width: 420px;height:550px;padding:0 50px;}
.ncs ul li .box {width: 100%;height: 100%;padding:20px;border-radius: 10px;position: relative;background: #fff;box-sizing: border-box;}
.ncs ul li.b .box {background: #eee;}
.ncs ul li.c .box {background: #dedede;}

.ncs ul li a {display: block;width: 100%;height:100%;border: 1px solid #707070;padding:72px 35px 32px;box-sizing: border-box;border-radius: 10px;}
.ncs ul li div a span {display:block;width: 100%;text-align: center;}
.ncs ul li div a span.subject {font-weight: bold;font-size: 36px;margin-bottom:13px;}
.ncs ul li div a span.date {font-size: 18px;color:#8E8E8E;margin-bottom:65px;}
.ncs ul li div a span.desc {font-size: 16px;color:#606060;margin-bottom:48px;line-height:1.6;}
.ncs ul li div a span.arrow {height:50px;text-align: right;margin-bottom:36px;}
.ncs ul li div a span.arrow img {height: 100%;}
.ncs ul li div a span.category {width: 215px;height: 40px;line-height: 40px;margin:0 auto;border-radius: 30px;color:#fff;background: #828282;}

.ncs .list li.a {transform:rotate(-20deg);}
.ncs .list li.b {transform:rotate(-10deg);}
.ncs .list li.c {transform:rotate(20deg);}

/* section.whatAbout */
.whatAbout {width: 100%;background-color: #202020;padding-top:100px;}
.whatAbout h2 {margin-top:100px;color:#fff;margin-bottom:100px;}
.whatAbout .inner {width: 1440px;overflow: hidden;margin:0 auto;padding-bottom:200px;color:#fff;}
.whatAbout .inner ul {width:100%;display:flex;justify-content: space-between;}
.whatAbout .inner ul li {width: 25%;}
.whatAbout .inner ul li a {display:block;width: 100%;height: 200px;position: relative;border-bottom: 1px solid rgba(255,255,255,0.5);}
.whatAbout .inner ul li a p.cosi {width: 100%;display:block;position: absolute;top:50%;transform: translateY(-50%);text-align: center;font-size: 36px;}


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