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


/* ---------- visual ---------- */
.wrap {background: #000; color: #fff;}
.visual {position: relative;}
.visual .inner {width: 100%; margin: 0 auto;}
.visual .box {width: 100%; height: 1300px; box-sizing: border-box;}
.visual .box .tit {font-size: 200px; display: block; text-align: center; line-height: 0.9; padding-top: 7.55vw;}
.visual .box .img {width: 21.82vw;margin: -50px auto 0;}
.visual .box .img img {width: 100%; height: 100%;}

.visual .box .svgAni1 {position: absolute; width: 48.2vw; top: 19%; left: 27%; z-index: 1;}
.visual .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;}
}

.visual .Ryan {width: 90%; margin: 0 auto 40vw; position: relative;}
.visual .Ryan .meTxt {text-align: center; display: block; margin-top: 31vw; margin-bottom: 4vw;}
.visual .Ryan .meTxt h3 {font-size: 80px; font-style: italic;}
.visual .Ryan .meTxt p {font-size: 40px; font-weight: 100; margin-top: -10px;}

/* ---------- .Ryan .meImg .card ---------- */
.visual .Ryan .meImg {display: flex; position: relative;}
.visual .Ryan .meImg .card {background: #fff; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); padding: 15px; width: 250px; cursor: pointer; transform: rotate(-3deg); position: absolute; display: inline-block; filter: grayscale(1);}
.visual .Ryan .meImg .card:nth-child(2n) {transform: rotate(3deg);}

.visual .Ryan .meImg .card:nth-child(1) {top: 0; left: 5%;}
.visual .Ryan .meImg .card:nth-child(2) {top: 0; left: 20%;}
.visual .Ryan .meImg .card:nth-child(3) {top: 0; left: 35%;}
.visual .Ryan .meImg .card:nth-child(4) {top: 0; right: 35%;}
.visual .Ryan .meImg .card:nth-child(5) {top: 0; right: 20%;}
.visual .Ryan .meImg .card:nth-child(6) {top: 0; right: 5%;}
.visual .Ryan .meImg .card:hover {transform: scale(1.2) rotate(0); z-index: 10; transition: all 0.4s; filter: grayscale(0);}
.visual .Ryan .meImg .card .img {overflow: hidden; border-radius: 10px; }
.visual .Ryan .meImg .card .img img {width: 110%; border-radius: 10px; }

/* popupCard */
.popup_container {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; display: none; z-index: 50;box-sizing: border-box;}
.popup_box {background: #fff; padding: 20px; position: relative; text-align: center; width: 60%; border-radius: 10px; display: flex;}
.popup_container .popup_box .popup_textBox {width: 50%; text-align: left; padding: 3.3vw 0 3.3vw 1.7vw;font-family: 'PP Editorial New';}
.popup_container .popup_box .popup_imgBox {width: 40%; }
.popup_container .popup_box .popup_imgBox img {width: 100%; border-radius: 10px;}
.popup_box h4 {font-size: 22px; font-weight: 100;}
.popup_box h3 {color: #000; font-size: 3.3vw; font-weight: 300; margin-bottom: 3.3vw;}
.popup_box p {color: #888; font-family: 'Pretendard'; font-weight: 100; font-size: 1vw; line-height: 1.4; letter-spacing: -1px;}
.close_btn {position: absolute; top: 10px; right: 10px; cursor: pointer;}


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

/* ---------- projects ---------- */
.projects {width: 100%; position: relative;}
.projects .inner {width: 100%; }

/* projects .project */
.projects .project {width: 90%; margin: 20vw auto 40vw; }
.projects .project .titBox { top: 0; width: 100%; z-index: 1; }
.projects .project h3 {font-size: 120px; text-align: center;}
.projects .project p {font-size: 20px; font-weight: 100; text-align: center;}
.projects .project .btnBox {margin-top: 5vw;}

.projects .project ul {width: 80%; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; position: absolute; top: -10%; left: 50%; transform: translateX(-50%); z-index: 2;}  
.projects .project ul li {width: 30%; margin-top: 100px;z-index: 2; }
.projects .project ul li:nth-child(2) {margin-top: 0;}
.projects .project ul li a {display: block;}
.projects .project ul li a .imgBox img {width: 100%; height: 100%; object-fit: cover; border-radius: 10px; box-shadow: 2px 4px 10px 2px rgba(0, 0, 0, 0.2);}
.projects .project ul li a .textBox {position: relative;}
.projects .project ul li a .textBox h3 {font-size: 24px; display: none;}
.projects .project ul li a .textBox p {font-size: 16px; border: 1px solid
    #000; position: absolute; padding: 0.26vw 1.04vw; border-radius: 2.6vw; text-align: center; box-sizing: border-box; bottom: 10px; right: 10px; font-weight: 500; background: #fff;}
.projects .project .btnBox {padding: 0 1.35vw;}

/* projects .personal */
.projects .personal {width: 100%;}
.projects .personal h3 {font-size: 120px; text-align: center;}
.projects .personal p {font-size: 20px; font-weight: 100; text-align: center; }
.projects .personal ul {margin-top: 2vw;}
.simply-scroll-container {position: relative; width: 100%;}
.simply-scroll-clip {position: relative; overflow: hidden;}
.simply-scroll .simply-scroll-list  {display: flex; flex-wrap: wrap; }
.simply-scroll .simply-scroll-list li {width: 300px; margin: 0 10px; box-sizing: border-box; border-radius: 20px; overflow: hidden; position: relative; border:1px solid #eee;}
.simply-scroll .simply-scroll-list img {width: 100%; vertical-align: middle; filter:grayscale(1); opacity: 0.8; transition: all .5s; height: 100%; object-fit: cover;}
.simply-scroll .simply-scroll-list img:hover {filter:grayscale(0); opacity: 1;}


.hesitate {display: block; text-align: center; margin: 30vw 0;}
.hesitate p {font-weight: 300; font-size: 4.42vw;}

/* ---------- footer ---------- */
footer {width: 100%; margin: 0 auto; background: #000; color: #fff; padding: 7.76vw 0;} 
footer h2 {font-size: 10.41vw; font-weight: 600; text-align: center; }
footer .box {display: flex; width: 80%; margin: 8.59vw auto 0;}
footer .box .svgAni10 {position: absolute; width: 64.32vw; bottom: 6%; 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 .img {width: 21.58vw;}
footer .box .img img { width: 100%;}
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;}


/* 반응형 웹 */
/* 1800px - 1401px */
@media (max-width: 1800px) {
    .svgAni10 {bottom: 5.5%;}
}

/* 1400px - 1280px */
@media (max-width:1400px) {
    header .innerHeader .gnb {width: 35vw;border-radius: 0 0 2vw 0; }
    header .innerHeader .gnbList {width: 33vw; font-size: 16px;}
    header .innerHeader .gnbList li {margin-bottom: 4px;}
}

/* Large devices (desktops, 1024px to 1279px) */
@media (max-width: 1279px) {
    .button_container {width: 10vw;}
    .moreBtn {padding: 0.7vw 1.6vw; font-size: 1.2vw; border-radius: 2.2vw;}
}

/* Medium devices (tablets, 768px to 1023px) */
@media (max-width: 1023px) {
    header .innerHeader .gnbList {border-radius: 0 0 2vw 0; padding: 10vw 0 5vw 2vw; top: -40vw;}
    header .innerHeader .gnb .logo {margin-left: 2vw;}
    header .innerHeader .gnb .menu, header .innerHeader .gnb .close {right: 2vw;}
}