@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;}
a {color: inherit; text-decoration: inherit;}
li {list-style: none;}
address, em, i {font-style: normal;}
button {background: none; border: none;}
img {vertical-align: middle;}

/* layout */
.wrap {position: relative; overflow: hidden; background: #000; color: #fff; }
.en {font-family: 'Neulis Sans';font-weight: 300;}
.en_s {font-family: 'PP Editorial New'; font-weight: 300;}
.kr {font-family: 'Pretendard'; font-size: 0.93vw; font-weight: 100; color: #888; letter-spacing: -0.05vw; line-height: 1.6;}

/* btnBox */
.button_container {width: 9.16vw; margin: 0 auto;}
.button1 {overflow: hidden; position: relative;display: inline-block;border-radius: 2.6vw;}
.button_circle {background-color: #000;border-radius: 50%;position: absolute;left: 50%; top: 50%; transform: translate(-50%, -50%); width: 0; height: 0;pointer-events: none;}
.moreBtn {padding: 0.5vw 1vw;color: #fff;background: #000;font-size: 0.83vw;border: none;border-radius: 2.6vw;text-align: center;cursor: pointer;box-sizing: border-box;font-family: 'Neulis Sans';font-weight: 300;z-index: 100000;transition: 0.4s;text-decoration: none;display: inline-block;}
.moreBtn:hover {color: #000;}
.text_container {position: relative; z-index: 10000;}
.explode-circle {animation: explode 0.5s forwards;}
.desplode-circle {animation: desplode 0.5s forwards;}
@keyframes explode {
    0% {width: 0;height: 0;background: #888;}
    100% {width: 400px; height: 400px;background: #fff;border-radius: 50%;}
}

@keyframes desplode {
    0% {width: 400px;height: 400px;background: #fff;border-radius: 50%;}
    100% {width: 0;height: 0;background-color: #888;border-radius: 50%;}
}


/* ---------- header ---------- */
header {width: 100%; height: 60px; position: fixed; z-index: 100; }
header .innerHeader{width: 98vw;height: 100%; display: flex; justify-content: space-between; align-items: center;}

header .innerHeader .gnb{width: 23vw; height: 100%; border-radius: 0 0 1.5vw 0; background-color: #000; display: flex; justify-content: space-between; align-items: center; position: relative;transition: background-color 0.3s; z-index: 95;}
header .innerHeader .gnb .logo{width: 30%; overflow: visible; margin-left: 1.2vw; z-index: 95;}
header .innerHeader .resume {font-size: 20px;color: black; z-index: 10;}

.logo-link {display: block;width: 108px; height: 22px; background-image: url('../img/logo_black.png');background-size: contain;background-repeat: no-repeat;}

/* .box 또는 footer에 진입 시 적용될 클래스 */
.header-alternate .logo-link {
    background-image: url('../img/logo_black.png'); /* 대체 로고 이미지 */
}

.gnbList {display: block; position: absolute; top: 0; left: 0; width: 100%; background: #000; opacity: 1;transform: translateY(-600px); z-index: 90;padding: 6vw 1.2vw 2vw;box-sizing: border-box;transition: all ease-in-out 0.5s;border-radius: 0 0 1.5vw 0;font-weight: 100;}

.gnbList.on {display: block; opacity: 1; transform: translateY(0px);}
.gnbList li {padding-bottom: 0.5vw;}
.gnbList li:hover {color: #000; transition: all 0.3s;}


/* 흰색 배경일 때 적용될 스타일 */
.white-bg .gnb, .white-bg .gnbList {background: #000; color: #fff;}
.white-bg .logo-link {background-image: url('../img/logo_white.png');}
.white-bg .menuOpen span {background: #000;}

/* 검은색 배경일 때 적용될 스타일 */
.black-bg .gnb, .black-bg .gnbList {background: #fff;color: #000;}
.black-bg .logo-link {background-image: url('../img/logo_black.png');}
.black-bg .menuOpen span {background-color: #000;}

/* header.active */
header.active {transform: translateY(-100%); transition: all 0.3s;}


/* ---------- menuOpen ---------- */
.menuOpen {cursor: pointer;display: block;position: relative;width: 24px;height: 18px;right: 1.4vw;top: 0%;z-index: 110;}
.menuOpen span {background: #fff;height: 2px;width: 100%;position: absolute;transition: transform 0.3s, background 0.3s;left: 0;stroke-linecap: round;}
.menuOpen .a { top: 0; }
.menuOpen .b { top: 50%; transform: translateY(-50%);}  
.menuOpen .c { bottom: 0; } 

.menuOpen.on .a {transform: rotate(45deg) translate(6px, 6px);}
.menuOpen.on .b {opacity: 0;}
.menuOpen.on .c {transform: rotate(-45deg) translate(6px, -6px);}
/* ------------------------------ */


/* ---------- projects ---------- */
.projects {position: relative; overflow: visible;}
.projects .inner {width: 100%;margin: 0 auto;}
.projects .box {width: 100%; height: 75vw; box-sizing: border-box;}
.projects .box .tit {font-size: 200px; display: block; text-align: center; line-height: 0.9; padding-top: 7.55vw;}
.projects .box .img {width: 19vw; position: absolute; left: 42%; z-index: 4;}
.projects .box .img img {width: 100%; height: 100%;}

.projects .box .svgAni1 {position: absolute; width: 48.2vw; left: 27%;}
.projects .box .svgAni1.motion .path1 {stroke-dasharray: 1740; stroke-dashoffset: 1740; animation: ani1 2s linear forwards;}
@keyframes ani1 {
    0%{stroke-dashoffset: 1740;}
    100%{stroke-dashoffset: 0;}
}


/* ---------- projects.uiux ---------- */
.uiux {width: 90%; margin: 0 auto; height: 50vw;}
.uiux .titBox {width: 100%; display: block; position: sticky; position: -webkit-sticky; height: auto; }
.uiux .titBox h3 {font-size: 120px; line-height: 0.9; text-align: center;}
.uiux .titBox .txt {text-align: center; margin: 1.15vw 0 3vw 0; font-size: 1.3vw; font-weight: 100;}

/* .uiux .cardBox */
.uiux .cardBox {margin: 0 auto; position: relative; height: 150vw; overflow: visible;}
.uiux .cardBox .cardCon {position: relative;}
.uiux .cardBox .card {background: #fff; padding: 3vw; margin: 0 auto; width: 60vw; height: 23vw; color: #000; position: absolute; top: 0; border: 1px solid #000; border-radius: 1vw; box-sizing: border-box; left: 15%;}
.uiux .cardBox .card .cardInner {display: flex; justify-content: space-between; box-sizing: border-box s;}
.uiux .cardBox .card .cardInner .cardTxt {width: 60%; }
.uiux .cardBox .card .cardInner .cardTxt .subTit {display: inline-block;}
.uiux .cardBox .card .cardInner .cardTxt .subTit li {font-size: 16px; margin-bottom: 10px;}
.uiux .cardBox .card .cardInner .cardTxt .subTit li:nth-child(2) {font-size: 50px; font-family: 'PP Editorial New';}
.uiux .cardBox .card .cardInner .cardTxt .subTit li:nth-child(3) {font-family: 'Pretendard'; font-weight: 100; margin: 10px 0; font-size: 16px; color: #888;}
.uiux .cardBox .card .cardInner .cardTxt .btnBox {position: absolute; bottom: 10%;}
.uiux .cardBox .card .cardInner .cardImg {display: block; width: 45%;}
.uiux .cardBox .card .cardInner .cardImg img {width: 100%; border-radius: 10px;}

/* ---------- projects.clone ---------- */
.clone {width: 90%; margin: 0 auto;}
.clone .titBox {width: 48%;}
.clone .titBox h3 {font-size: 6.87vw; margin-top: 10.41vw; line-height: 6.61vw;}
.clone .titBox .txt {margin: 1.15vw 0 3vw 0; font-size: 1.3vw; font-weight: 100;}

.clone .mySwiper {width: 75%; position: relative; margin-right: 10px; padding-bottom: 40px;}
.clone .swiper-slide img {width: 100%; border-radius: 10px; height: 100%;}
.clone .button {color: #000;}

.swiper-button-prev, .swiper-button-next {position: absolute; top: 50%; color: #000!important; }
.swiper .swiper-pagination-bullet {background-color: #000; margin: 0 10px;}


/* ---------- projects.ncs ---------- */
.ncs {width: 85%; margin: 0 auto; position: relative; height: 100%;}
.ncs .titBox {width: 95%; display: block;margin-top: 15vw;}
.ncs .titBox h2 {font-size: 120px; line-height: 0.8; text-align: end; font-weight: 300;}
.ncs .titBox .txt {font-size: 1.5vw; text-align: end; margin: 1vw 0 3vw 0;}

.ncs .table {margin: 0 auto 5vw; box-sizing: border-box; color: #888; position: relative; height: 30vw;}
.ncs .table .tableInner {width: 70%; border-top: 0.15vw solid #000; border-bottom: 0.15vw solid #000;}
.ncs .table .tableInner li {display: flex; justify-content: space-between; border-bottom: 0.05vw solid #000; position: relative; overflow: hidden; transition: all 0.3s; height: auto; cursor: pointer;}
.ncs .table .tableInner li:nth-child(4) {border-bottom: none}
.ncs .table .tableInner li .tableTxt {padding: 1.5vw; transition: all 0.3s;}
.ncs .table .tableInner li .tableTxt .tit {font-size: 2.39vw;}
.ncs .table .tableInner li .tableTxt .txt {font-size: 0.83vw; color: #888; max-height: 0; overflow: hidden; transition: all 0.2s;}

.ncs .table .tableInner li .tableTxt .tableImg {position: fixed; top: 0; left: 0; width: 300px; object-fit: cover; opacity: 0; z-index: 5; border-radius: 20px;}

/* .tableInner li.on */
.ncs .table .tableInner li.on {background: #000; transition: width 0.3s; max-height: 15vw;}
.ncs .table .tableInner li.on .tableTxt .tit {color: #fff; transition: all 0.4s ease-in-out;}
.ncs .table .tableInner li.on .tableTxt .txt {opacity: 1; transition: all 0.3s ease-in-out;max-height: 10vw;}

/* ---------- personal ---------- */
.personal {width: 90%; margin: 0 auto; height: 1000px;}
.personal .titBox {width: 100%;display: block;position: relative;text-align: center;margin-top: 10.41vw;}
.personal .titBox h3 {font-size: 120px;line-height: 0.8;margin-top: 15vw;}
.personal .titBox .txt {margin: 1.15vw 0;font-size: 1.3vw;font-weight: 100; text-align: center;}
.personal .workList {display: flex;width: 100%;overflow: hidden;height: 500px;align-items: center;justify-content: center;}

.accordion {display: flex;width: 100%;height: 400px;}
.accordion_card {background-size: cover; background-position: center;background-repeat: no-repeat;height: 440px;width: 200px;border-radius: 20px;color: #fff;cursor: pointer;flex: 0.5;margin: 10px;position: relative;transition: flex 0.5s ease; filter: grayscale(1);}
.accordion_card .workTit {font-size: 35px;position: absolute;bottom: 20px;left: 20px;margin: 0;opacity: 0;transition: opacity 0.5s ease;}
.accordion_card:hover {flex: 5; filter: grayscale(0);}
.accordion_card:hover .workTit {opacity: 1;}


/* ---------- skills ---------- */
.skills {width: 50%; margin: 15vw auto 0;}
.skills h3 {font-size: 120px; text-align: center;}
.skills p {font-size: 20px; font-weight: 100; text-align: center;}
.skills ul {display: flex; justify-content: space-between; margin-top: 5.42vw; width: 50%;}
.skills ul li {width: 35%;}
.skills .img {width: 7vw; display: block; margin: 0 auto;}
.skills .img img {width: 85%}
.skills .iconBox {display: flex;}
.skills .name {font-size: 16px; margin-top: 0.31vw; font-weight: 300;}


.projects .knowTxt {display: block; text-align: center; margin: 32.55vw 0;}
.projects .knowTxt p {font-weight: 300; font-size: 65px;}
.projects .svgAni8 {position: absolute; bottom: -4%; right: 30%; width: 360px;}
.projects .svgAni8.motion .path8 {stroke-dasharray: 1463; stroke-dashoffset: 1463; animation: ani8 .4s linear .4s forwards; }
@keyframes ani8 {
    0%{stroke-dashoffset: 1463;}
    100%{stroke-dashoffset: 0;}
}
.projects .knowTxt .btnBox {position: absolute; left: 50%; bottom: -5%; transform: translateX(-50%);}


/* ---------- footer ---------- */
footer {width: 100%; margin: 0 auto; background: #000; color: #fff; padding: 7.76vw 0;} 
footer h2 {font-size: 10.4vw; font-weight: 600; text-align: center; }
footer .box {display: flex; width: 80%; margin: 8.59vw auto 0;}
footer .box .img {width: 21.58vw;}
footer .box .img img {width: 100%;}
footer .box .svgAni10 {position: absolute; width: 64.32vw; bottom: 4.8%; left: 18.5%;}
footer .box .svgAni10.motion .path10 {stroke-dasharray: 1808; stroke-dashoffset: 1808; animation: ani10 1.4s linear .4s forwards;}
@keyframes ani10 {
    0%{stroke-dashoffset: 1808;}
    100%{stroke-dashoffset: 0;}
}
footer .box .contactBox {display: block; width: 100%;}
footer .box .contactBox .contact {display: flex; justify-content: flex-end;}
footer .box .contactBox .contact .link li {font-size: 1.25vw; font-weight: 100; margin-bottom: 1.04vw; text-align: end ;}
footer .box .contactBox .contact .link li:nth-child(1) {font-size: 2.08vw; font-weight: 300; margin-bottom: 1.25vw;}
footer .box .contactBox .contact .link li:nth-child(2), footer .box .contactBox .collaborate li:nth-child(2) {margin-left: 2.71vw;}
footer .box .contactBox .collaborate {display: flex; font-size: 1.25vw; font-weight: 100; color: #888;justify-content: flex-end;}
footer .box .contactBox .collaborate li {text-align: end; margin-top: 6.93vw;}

.topBtn {position: fixed;bottom: 50px;right: 30px;width: 50px;height: 50px;background-color: #1d1d1d;color: #fff;border-radius: 50%;display: flex;align-items: center;justify-content: center;cursor: pointer;opacity: 0;transition: opacity 0.3s;box-sizing: border-box;padding-bottom: 5px;z-index: 300;mix-blend-mode:exclusion;}

.arrow{width: 0; height: 0; border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 15px solid #fff;}

.topBtn.show {opacity: 1;}