body {
    margin: 0;
    padding: 0;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    }

html, body {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    }



header {
    position:fixed; left:0; top:0;
    display: flex; gap:50px; align-items: center;
    padding-left:40px;
    width:100%; height:54px;
    border-bottom:0.3px solid rgba(51,51,51,0.3);
    z-index: 800;
}
header.hide {
    opacity: 0;
    pointer-events: none;
}
header nav {}
header nav a {
    font-size:0.875rem;
    font-weight: 700;
    opacity: 0.6;
    transition: opacity 0.2s;
    margin-right:50px;
    transition: color 0.7s ease, opacity 0.7s ease;
}
header a:hover,
header nav a.active {
    color:#1B3C53;
    opacity: 1;
}
header a:last-child {margin-right: 0;}

#wrap {
    height:100vh;
}
#wrap .swiper-wrapper {}
#wrap .swiper-wrapper .swiper-slide {}
#wrap .swiper-wrapper .intro {
    position:relative;
}


/* ------------------------------- 인트로 */
#wrap .swiper-wrapper .intro .title {
    position: absolute;
    top: 380px;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100vh;
    font-size: 10vw;
    font-weight:500;
   /*  font-family: 'Patrick Hand', cursive; */ /* 감성적인 붓글씨 */
    color: transparent; /* 본문 텍스트 숨김 */
    text-align: center;
    margin: 0 auto;
    line-height: 1.3;
    position: relative;
}

.title::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: linear-gradient(90deg, #1B3C53, #B0C4DE);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    overflow: hidden;
    clip-path: inset(0 100% 0 0);
    animation: brushReveal 2s steps(60) 0.5s forwards;
    }

@keyframes brushReveal {
    to {
        clip-path: inset(0 0 0 0);
    }
}


#wrap .swiper-wrapper .intro .title .top_line {
    position: relative;
}
#wrap .swiper-wrapper .intro .title .top_line::after {
    content: "";
    position: absolute;
    bottom: 50%; left: 77%;
    transform: translateX(-50%);
    width: 1px;
    height: 0;
    background-color: #1B3C53;
    animation: growLine 1.2s ease forwards;
    animation-delay: 0.3s; 
}
#wrap .swiper-wrapper .intro .title .bot_line::after {
    content: "";
    position: absolute;
    top: 29%; right:652px;
    transform: translateX(-50%);
    width: 1px;
    height: 0;
    background-color: #1B3C53;
    animation: growLine 1.2s ease forwards;
    animation-delay: 0.3s;
}

#wrap .swiper-wrapper .intro .contact {
    display:flex; flex-flow:column nowrap;
    gap:30px;
    position:absolute; left:140px; bottom:60px;
}
#wrap .swiper-wrapper .intro .contact h2 {
    color:#1B3C53;
    font-size: 1.5rem;
    letter-spacing:0.14em;
}
#wrap .swiper-wrapper .intro .contact .phone {}
#wrap .swiper-wrapper .intro .contact .phone p {
    color:#1B3C53;
}
#wrap .swiper-wrapper .intro .contact .email {}
#wrap .swiper-wrapper .intro .contact .email p {
    color:#1B3C53;
}

#wrap .swiper-wrapper .intro .contact .phone p:first-child,
#wrap .swiper-wrapper .intro .contact .email p:first-child {
    margin-bottom:10px;
    font-size: 1.125rem;
}

#wrap .swiper-wrapper .intro .content {
    position:absolute; right:800px; bottom:200px;
    text-align: center;
}
#wrap .swiper-wrapper .intro .content p {
    font-size: 1.2rem;
    color:#1B3C53;
    font-weight:500;
    margin-bottom:20px;
    animation:contentUp 3s ease both;
}
#wrap .swiper-wrapper .intro .content p:nth-child(1) {
    animation-delay: 0.6s;
    font-weight:400;
}
#wrap .swiper-wrapper .intro .content p:nth-child(2) {
    animation-delay: 0.8s;
}
#wrap .swiper-wrapper .intro .content p:nth-child(3) {
    animation-delay: 1s;
}
#wrap .swiper-wrapper .intro .content p:last-child {
    margin-bottom: 0;
}

@keyframes contentUp {
    0% {opacity: 0; transform: translateY(30px);}
    100% {opacity: 1; transform: translateY(0);}
}

#wrap .swiper-wrapper .intro .web {
    display: flex; gap:30px;
    padding:10px 5px 10px 20px;
    position:absolute; top:350px; left:678px;
}
#wrap .swiper-wrapper .intro .web p {
    color:#1B3C53; font-size: 0.75rem;
    font-weight: 500;
    animation: webLeft 3s ease both;
}
#wrap .swiper-wrapper .intro .web p:nth-child(1) {
    animation-delay: 1.9s;
}
#wrap .swiper-wrapper .intro .web p:nth-child(2) {
    animation-delay: 1.8s;
}
#wrap .swiper-wrapper .intro .web p:nth-child(3) {
    animation-delay: 1.7s;
}
#wrap .swiper-wrapper .intro .web::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0.1px;
    background-color: #B0C4DE;
    animation: webLeftLine 2s ease forwards;
    animation-delay: 1.8s;
}
#wrap .swiper-wrapper .intro .title::after {
    content: "";
    position: absolute;
    bottom: 91.4%; right: 45.95%;
    transform: translateX(-50%);
    width: 0.5px;
    height: 0;
    background-color: #B0C4DE;
    animation: growLine 2s ease forwards;
    animation-delay: 1.6s; 
}
@keyframes growLine {
    0% {height: 0;}
    100% {height: 480px;}
}
@keyframes webLeft {
    0% {opacity: 0; transform: translateX(30px);}
    100% {opacity: 1; transform: translateX(0);}
}
@keyframes webLeftLine {
    0% {width: 0; right:0;}
    100% {width: 100%; right:0;}
}

/* ------------------------------- 프로필 */
#wrap .swiper-wrapper .profile {
    position: relative;
    z-index:600;
    background: url(../images/ji_yun.png) no-repeat center 40% / contain;
}
#wrap .swiper-wrapper .profile >p {
    font-size:1.75rem;
    color:rgba(27,60,83,0.8);
    line-height: 1.8;
    position:absolute; left:600px; top:120px;
}
#wrap .swiper-wrapper .profile >p span {
    font-size: 1.2rem; color:rgba(27,60,83,0.8);
    font-weight:500;
}
#wrap .swiper-wrapper .profile >p em {
    font-size:2rem; font-weight:600;
    color:rgba(27,60,83,0.8);
}
#wrap .swiper-wrapper .profile .container {
    display:flex; gap:80px; align-items: end;
    padding:220px 0 160px 250px;
}
#wrap .swiper-wrapper .profile .container .profile_photo {
    display:flex; flex-flow:column nowrap; align-items: center;
}
#wrap .swiper-wrapper .profile .container .profile_photo p {
    margin-bottom:30px;
}
#wrap .swiper-wrapper .profile .container .profile_photo p img {}
#wrap .swiper-wrapper .profile .box {
    background-color: rgba(256,256,256,0.6);
    padding:40px;
    width:max-content;
    border-radius: 50px;
}
#wrap .swiper-wrapper .profile .box > p {
    width:150px; border-bottom:0.5px solid #1B3C53;
    padding:10px 0;
    margin-bottom:20px;
    color:#1B3C53;
    font-size: 1.25rem; font-weight: 600;
}
#wrap .swiper-wrapper .profile .box li {
    margin-bottom:10px;
}
#wrap .swiper-wrapper .profile .box li:last-child {margin-bottom:0;}

#wrap .swiper-wrapper .profile .container .profile_photo .profile_wrap {}
#wrap .swiper-wrapper .profile .container .profile_photo .profile_wrap .profile_cont {}
#wrap .swiper-wrapper .profile .container .profile_photo .profile_wrap .profile_cont li {
    margin-bottom:15px;
}
#wrap .swiper-wrapper .profile .container .profile_photo .profile_wrap .profile_cont li em {
    font-weight:500; display: inline-block;
    width:80px;
}
#wrap .swiper-wrapper .profile .container .profile_photo .profile_wrap .profile_cont li span {}
#wrap .swiper-wrapper .profile .container .profile_photo .profile_wrap .profile_cont li:first-child span {
    font-weight:500; font-size: 1.2rem;
}
#wrap .swiper-wrapper .profile .container .profile_photo .profile_wrap .profile_cont li:first-child span:nth-child(3) {
    font-size:0.875rem; margin-left:10px;
    font-weight:400;
}
#wrap .swiper-wrapper .profile .container .profile_photo .profile_wrap .profile_cont li span em {
    font-size:0.75rem; margin-left:10px;
}

#wrap .swiper-wrapper .profile .container .content_wrap {
    display: flex; gap:30px; align-items: end;
}
#wrap .swiper-wrapper .profile .container .content_wrap .left {}
#wrap .swiper-wrapper .profile .container .content_wrap .left .career1 {
    width:540px;
    margin-bottom:60px;
}
#wrap .swiper-wrapper .profile .container .content_wrap .left .career1 p {}
#wrap .swiper-wrapper .profile .container .content_wrap .left .career1 .career1_cont {}
#wrap .swiper-wrapper .profile .container .content_wrap .left .career1 .career1_cont li  {}
#wrap .swiper-wrapper .profile .container .content_wrap .left .career1 .career1_cont li span {
    color:rgba(51,51,51,0.7); margin-right:20px;
}
#wrap .swiper-wrapper .profile .container .content_wrap .left .career1 .career1_cont li em {}

#wrap .swiper-wrapper .profile .container .content_wrap .left .career2 {
    width:540px;
}
#wrap .swiper-wrapper .profile .container .content_wrap .left .career2 p {}
#wrap .swiper-wrapper .profile .container .content_wrap .left .career2 .career2_cont {}
#wrap .swiper-wrapper .profile .container .content_wrap .left .career2 .career2_cont li {}
#wrap .swiper-wrapper .profile .container .content_wrap .left .career2 .career2_cont li span {
    color:rgba(51,51,51,0.7); margin-right:20px; 
}
#wrap .swiper-wrapper .profile .container .content_wrap .left .career2 .career2_cont li em {}

#wrap .swiper-wrapper .profile .container .content_wrap .skill {
    height:max-content;
}
#wrap .swiper-wrapper .profile .container .content_wrap .skill p {}
#wrap .swiper-wrapper .profile .container .content_wrap .skill .skill_cont {}
#wrap .swiper-wrapper .profile .container .content_wrap .skill .skill_cont li {
    margin-bottom:20px;
}
#wrap .swiper-wrapper .profile .container .content_wrap .skill .skill_cont li em {
    width:120px; display: inline-block;
    font-size: 1.25rem; margin-right:20px;
}
#wrap .swiper-wrapper .profile .container .content_wrap .skill .skill_cont li span {}
#wrap .swiper-wrapper .profile .bg_img {
    z-index: 200;
    position:absolute; left:0; top:186px;
}

/* 그룹 */
#wrap .swiper-wrapper .profile .container .content_wrap .left .career1 .career1_cont li span,
#wrap .swiper-wrapper .profile .container .content_wrap .left .career1 .career1_cont li em,
#wrap .swiper-wrapper .profile .container .content_wrap .left .career2 .career2_cont li span,
#wrap .swiper-wrapper .profile .container .content_wrap .left .career2 .career2_cont li em,
#wrap .swiper-wrapper .profile .container .content_wrap .skill .skill_cont li span {
    font-size: 0.875rem;
}
#wrap .swiper-wrapper .profile .container .content_wrap .left .career1 .career1_cont li em,
#wrap .swiper-wrapper .profile .container .content_wrap .left .career2 .career2_cont li em {
    font-weight:500;
}


/* ------------------------------- 웹디자인 */
#wrap .swiper-wrapper .web_design {}
#wrap .swiper-wrapper .web_design .title {
    padding:50px 80px; margin-top:54px;
    text-align: left;
}
#wrap .swiper-wrapper .web_design .title h2 {
    font-size: 3rem; font-weight: 600;
    margin-bottom:20px;
    color:rgba(27,60,83,0.8)
}
#wrap .swiper-wrapper .web_design .title p {
    font-size: 1.25rem  ;
}

#wrap .swiper-wrapper .web_design .container {
    width:1300px; margin:0 auto;
    padding:20px 0 60px;
    position:relative;
}
#wrap .swiper-wrapper .web_design .container #project_swiper {
    height:600px; width:1200px;
}
#wrap .swiper-wrapper .web_design .container #project_swiper .swiper-wrapper {}
#wrap .swiper-wrapper .web_design .container #project_swiper .swiper-wrapper .swiper-slide {
    display: flex; gap:100px; justify-content: center;
    align-items: center;
}
#wrap .swiper-wrapper .web_design .container #project_swiper .swiper-wrapper .swiper-slide p {
    width:600px; 
}
#wrap .swiper-wrapper .web_design .container #project_swiper .swiper-wrapper .swiper-slide p img {width:100%;}
#wrap .swiper-wrapper .web_design .container #project_swiper .swiper-wrapper .swiper-slide .content {
    width:400px; height:max-content;

}
#wrap .swiper-wrapper .web_design .container #project_swiper .swiper-wrapper .swiper-slide .content p {
    margin-bottom:40px;

}
#wrap .swiper-wrapper .web_design .container #project_swiper .swiper-wrapper .swiper-slide .content p span {
    font-size: 1.125rem; margin-right:10px;
}
#wrap .swiper-wrapper .web_design .container #project_swiper .swiper-wrapper .swiper-slide .content p em {
    font-size: 1.75rem; font-weight: 500;
}
#wrap .swiper-wrapper .web_design .container #project_swiper .swiper-wrapper .swiper-slide .content ul {}
#wrap .swiper-wrapper .web_design .container #project_swiper .swiper-wrapper .swiper-slide .content ul li {
    margin-bottom:20px;
}
#wrap .swiper-wrapper .web_design .container #project_swiper .swiper-wrapper .swiper-slide .content ul li:last-child {
    margin-bottom:0;
}
#wrap .swiper-wrapper .web_design .container #project_swiper .swiper-wrapper .swiper-slide .content .btn_wrap {
    display: flex; justify-content: space-between;
    margin-top:40px;
}
#wrap .swiper-wrapper .web_design .container #project_swiper .swiper-wrapper .swiper-slide .content .btn_wrap a {
    width:195px; padding:10px 65px;
    border:1px solid #1B3C53; color:#1B3C53;
    border-radius: 5px;
    font-size:0.875rem;
    transition: background-color 1s ease, color 1s ease, border-color 1s ease;
}
#wrap .swiper-wrapper .web_design .container #project_swiper .swiper-wrapper .swiper-slide .content .btn_wrap a:hover {
    background-color: #1B3C53;
    color:#F9F3EF;
}

#wrap .swiper-wrapper .web_design .container .swiper-button-prev,
#wrap .swiper-wrapper .web_design .container .swiper-button-next {
    color:#1B3C53;
}
#wrap .swiper-wrapper .web_design .container .swiper-pagination-bullet {
    background-color: #1B3C53;
}

/* ------------------------------- 배너디자인 */
#wrap .swiper-wrapper .banner_design {}
#wrap .swiper-wrapper .banner_design h2 {
    padding:50px 80px; margin-top:54px;
    font-size:3rem; font-weight:600;
    color:rgba(27,60,83,0.8);
}

#wrap .swiper-wrapper .banner_design .bnr_container {}
#wrap .swiper-wrapper .banner_design .bnr_container #bnr_swiper {
    /* background-color:aqua; */
    border-radius: 20px;
    width:1600px; height:200px;
    margin:50px auto 0;
}
#wrap .swiper-wrapper .banner_design .bnr_container #bnr_swiper .swiper-wrapper {
    transition-timing-function: linear;
}
#wrap .swiper-wrapper .banner_design .bnr_container #bnr_swiper .swiper-wrapper .swiper-slide {
    width:400px; cursor: pointer;
}
#wrap .swiper-wrapper .banner_design .bnr_container #bnr_swiper .swiper-wrapper .swiper-slide img {
    width:100%;
}


#wrap .swiper-wrapper .banner_design .container {}
#wrap .swiper-wrapper .banner_design .container #sns_swiper {
    /* background-color:aqua; */
    border-radius: 20px;
    width:1600px; height:380px;
    margin:10px auto 0;
}
#wrap .swiper-wrapper .banner_design .container #sns_swiper .swiper-wrapper {
    transition-timing-function: linear;
}
#wrap .swiper-wrapper .banner_design .container #sns_swiper .swiper-wrapper .swiper-slide {
    cursor: pointer;
}
#wrap .swiper-wrapper .banner_design .container #sns_swiper .swiper-wrapper .swiper-slide img {
    width:100%;
}

/* ------------------------------- 상세페이지 */
#wrap .swiper-wrapper .detailed_page {}
#wrap .swiper-wrapper .detailed_page h2 {
    padding:50px 80px; margin-top:54px;
    font-size:3rem; font-weight:600;
    color:rgba(27,60,83,0.8);
}
#wrap .swiper-wrapper .detailed_page .container {
/*     border-top:1px solid #1B3C53;
    border-bottom:1px solid #1B3C53; */
    width:1920px; 
    padding:30px 0;
}
#wrap .swiper-wrapper .detailed_page .container #detail_swiper {}
#wrap .swiper-wrapper .detailed_page .container #detail_swiper .swiper-wrapper {
    transition-timing-function: linear;
}
#wrap .swiper-wrapper .detailed_page .container #detail_swiper .swiper-wrapper .swiper-slide {
    width:250px; height:600px;
    cursor: pointer;
}
#wrap .swiper-wrapper .detailed_page .container #detail_swiper .swiper-wrapper .swiper-slide img {
    width:100%;
}

/* ------------------------------- 아웃트로 */
#wrap .swiper-wrapper .outro {
    background: url(../images/intro1.png) 65% center / cover;
    position:relative;
}
#wrap .swiper-wrapper .outro h2 {
    font-size: 4rem; font-weight: 700;
    
}
#wrap .swiper-wrapper .outro .thank_you {
    position:absolute; right:510px; top:427px;
}
#wrap .swiper-wrapper .outro .for_reading {
    position:absolute; right:320px; bottom:380px;
}

#wrap .swiper-wrapper .outro h2 span {
    letter-spacing: 0.14em;
    font-size: 4rem; font-weight: 600;
}
#wrap .swiper-wrapper .outro h2 .thank {
    color:#F9F3EF;
}
#wrap .swiper-wrapper .outro h2 .you {
    color:#1B3C53;
}

#wrap .swiper-wrapper .outro .contact {
    display:flex; flex-flow:column nowrap;
    gap:50px;
    position:absolute; left:80px; bottom:62px;
}
#wrap .swiper-wrapper .outro .contact h3 {
    color:#F9F3EF;
    font-size: 1.5rem;
    letter-spacing:0.14em;
}
#wrap .swiper-wrapper .outro .contact h3 .phone {}
#wrap .swiper-wrapper .outro .contact .phone p {
    color:#F9F3EF;
}
#wrap .swiper-wrapper .outro .contact h3 .email {}
#wrap .swiper-wrapper .outro .contact .email p {
    color:#F9F3EF;
}
#wrap .swiper-wrapper .outro .contact .phone p,
#wrap .swiper-wrapper .outro .contact .email p {
    margin-bottom:10px; font-size: 1.125rem;
}

#wrap .swiper-wrapper .outro .content {
    position:absolute; right:370px; bottom:280px;
}
#wrap .swiper-wrapper .outro .content p {
    color:#1B3C53;
    animation:contentUp 2s ease both;
}
#wrap .swiper-wrapper .outro .content p:first-child {
    animation-delay: 0.4s;
}
#wrap .swiper-wrapper .outro .content p:last-child {
    margin-top:10px;
    line-height:1.6;
    animation-delay: 0.6s;
}
#wrap .swiper-wrapper .outro .thank_you::after {
    content: "";
    position: absolute;
    bottom: 68%; left:0.6%;
    transform: translateX(-50%);
    width: 1px;
    height: 0;
    background-color: #F9F3EF;
    animation: growLine 1.2s ease forwards;
    animation-delay: 0.3s; 
}




/* 팝업디자인 모음 */
/* -------------------------------------- 배너팝업 */
.bnr_popupbg {
    position:fixed; left:0; top:0;
    z-index: 500;
    background: rgba(0,0,0,0.5);
    width:100%; height:100vh;
    display:none;
}
.bnr_popupbg .popup {
    width:max-content; height:max-content;
    margin:250px auto;
    overflow:auto;
}
.bnr_popupbg .popup img {width:100%;}

/* -------------------------------------- 디자인팝업 */
.sns_popupbg {
    position:fixed; left:0; top:0;
    z-index: 500;
    background: rgba(0,0,0,0.5);
    width:100%; height:100vh;
    display:none;
}
.sns_popupbg .popup {
    width:700px; margin:80px auto;
    height:800px; overflow:auto;
}
.sns_popupbg .popup img {width:100%;}

/* -------------------------------------- 디자인팝업 */
.detail_popupbg {
    width:100%; height:100vh;
    background-color: rgba(0,0,0,0.5);
    position:fixed; left:0; top:0;
    z-index: 500;
    display: none;
}
.detail_popupbg .popup {
    width:700px; height:850px;
    margin:60px auto; overflow:auto;

}
.detail_popupbg .popup img {width:100%}