/* header */
body {min-width: 1920px;}
header {
    position: fixed; left: 0; top: 0; z-index: 998;
    width: 100%;
    display: flex; 
    justify-content: space-between; align-items: center;
    padding: 25px 100px;
    background: rgba(13, 17, 23, 0.8);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(79, 70, 229, 0.1);
}
header * {color: #E2E8F0; font-family: 'Clash Display', 'Pretendard', sans-serif;}
header h1 {}
header h1 a {
    font-size: 1.875rem; font-weight: 600;
    background: linear-gradient(45deg, #4F46E5, #06B6D4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
header h1 a span {font-size: 1.25rem; margin-top: 5px; opacity: 0.8; -webkit-text-fill-color: #E2E8F0;}
header nav {}
header nav a {margin-right: 30px; padding: 5px; font-weight: 500; transition: all 0.3s ease;}
header nav a:hover {color: #4F46E5; border-bottom: 1px solid #4F46E5;}
header nav a:last-child {margin: 0;}
/* fullpage */
#wrap {}
#wrap > * {background: linear-gradient(135deg, #0D1117, #161B22);}
/* h1 공통 */
.title {
    font-size: 3.5rem; font-family: 'Clash Display', 'Pretendard', sans-serif;
    background: linear-gradient(45deg, #4F46E5, #06B6D4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    margin-bottom: 80px;
    font-weight: 700;
}
.line-h {
    line-height: 1.33;
}
/* 버튼 hover */
.link a:hover {background: linear-gradient(45deg, #4F46E5, #06B6D4); color: #FFFFFF;}
/* 1. 표지 */
.intro {
    background: linear-gradient(rgba(13, 17, 23, 0.9), rgba(13, 17, 23, 0.9)), url(../images/bg.jpg) center !important;
    position: relative; left: 0; top: 0; z-index: 999;
}
.intro .main_title {
    color: #E2E8F0; text-align: center;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
}
.intro .main_title * {font-family: 'Clash Display', 'Pretendard', sans-serif;}
.intro .main_title .year {font-size: 1.875rem; opacity: 0.8; color: #94A3B8;}
.intro .main_title h1 {
    font-size: 6.25rem; margin: 5px 0; font-weight: 700;
    background: linear-gradient(45deg, #4F46E5, #06B6D4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.intro .main_title .name {
    font-size: 3.125rem;
    background: linear-gradient(45deg, #4F46E5, #06B6D4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.intro .main_title .name span {}
/* scroll */
.intro .scroll {
    text-align: center; width: 100%;
    position: absolute; bottom: 50px;
    /* animation: move 0.7s linear alternate infinite; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}
.intro .scroll-text {
    font-family: 'Clash Display', 'Pretendard', sans-serif;
    font-size: 1.3rem;
    letter-spacing: 0.3em;
    color: #6ea8fe;
    font-weight: 700;
    margin-bottom: 8px;
    user-select: none;
}
.intro .scroll-arrow {
    font-size: 2.2rem;
    color: #4F46E5;
    line-height: 1;
    margin-bottom: 0.5rem;
    user-select: none;
}
.intro .scroll img { display: none; }
.intro .scroll::after {
    content: '';
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 6px;
    background: linear-gradient(90deg, #4F46E5 0%, #06B6D4 100%);
    border-radius: 3px;
    animation: none !important;
    z-index: 1000;
}
/* 2. 프로필 */
.profile_wrap {}
.profile {
    display: flex; flex-flow: row nowrap;
    align-items: center; justify-content: center;
    gap: 120px;
}
.profile * {color: #E2E8F0;}
.profile .photo {}
.profile .photo p {}
.profile .photo p img {width: 84%;
    padding-left: 78px;}
.profile .photo .info {
    font-size: 1.25rem; text-align: center;
    margin-top: 30px; line-height: 1.3;
}
.profile .photo .info span {
    background: linear-gradient(45deg, #4F46E5, #06B6D4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.profile .txt {
    display: grid;
    grid-template-areas: 
        'about_me skill'
        'awards experience';
    gap: 150px 120px;
}
/* 프로필 h2 공통 */
.profile .txt h2 {
    background: linear-gradient(45deg, #4F46E5, #06B6D4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 30px;
    font-family: 'Clash Display', 'Pretendard', sans-serif;
    font-size: 1.875rem;
}
.profile .txt .about_me {grid-area: about_me;}
.profile .txt .about_me h2 {}
.profile .txt .about_me p {margin-bottom: 20px;}
.profile .txt .about_me p:last-child {margin: 0;}
.profile .txt .skill {grid-area: skill;}
.profile .txt .skill h2 {}
.profile .txt .skill .icon {
    width: 400px;
    display: flex; flex-flow: row wrap;
    gap: 30px 20px;
}
.profile .txt .skill .icon li {}
.profile .txt .skill .icon li img {}
.profile .txt .awards_license {grid-area: awards;}
.profile .txt .awards_license h2 {}
.profile .txt .awards_license .info {width: 399px;}
.profile .txt .awards_license .info dt,
.profile .txt .experience .info dt {
    padding-right: 25px;
    float: left;
}
.profile .txt .awards_license .info dt {}
.profile .txt .awards_license .info dd, 
.profile .txt .experience .info dd {margin-bottom: 20px;}
.profile .txt .awards_license .info dd {}
.profile .txt .awards_license .info dd:last-child,
.profile .txt .experience .info dd:last-child {margin: 0;}
.profile .txt .awards_license .info dd:nth-of-type(5),
.profile .txt .awards_license .info dd:nth-of-type(6){margin-left: 60px;}
.profile .txt .experience {grid-area: experience;}
.profile .txt .experience h2 {}
.profile .txt .experience .info {width: 666px;}
.profile .txt .experience .info dt {}
.profile .txt .experience .info dd {margin-left: 218px;}
.profile .txt .experience .info dd:nth-of-type(1) {line-height: 1.5;}
/* 3. web design */
.web_wrap {}
.web_wrap .web {position: relative; left: 0; top: 0; z-index: 800;}
.web_wrap .web .title {}
.web_wrap .web .swiper {max-width: 1200px;}
.web_wrap .web .swiper .swiper-wrapper {}
.web_wrap .web .swiper .swiper-wrapper .swiper-slide {
    background: linear-gradient(135deg, #161B22, #1F2937);
    border-radius: 20px;
    display: flex; 
    justify-content: center; align-items: center;
    gap: 80px; padding: 50px 100px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(79, 70, 229, 0.1);
}
.web_wrap .web .swiper .swiper-wrapper .swiper-slide .thum {width: 577px;}
.web_wrap .web .swiper .swiper-wrapper .swiper-slide .thum img {
    width: 100%; 
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.web_wrap .web .swiper .swiper-wrapper .swiper-slide .web_info {}
.web_wrap .web .swiper .swiper-wrapper .swiper-slide .web_info h2 {
    font-size: 2.5rem; font-weight: 700;
    background: linear-gradient(45deg, #4F46E5, #06B6D4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.web_wrap .web .swiper .swiper-wrapper .swiper-slide .web_info p {
    font-weight: 500; margin: 15px 0 25px;
    color: #94A3B8;
}
.web_wrap .web .swiper .swiper-wrapper .swiper-slide .web_info ul {}
.web_wrap .web .swiper .swiper-wrapper .swiper-slide .web_info ul li {
    margin-bottom: 15px;
    color: #E2E8F0;
}
.web_wrap .web .swiper .swiper-wrapper .swiper-slide .web_info ul li span {
    font-weight: 600;
    background: linear-gradient(45deg, #4F46E5, #06B6D4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.web_wrap .web .swiper .swiper-wrapper .swiper-slide .web_info .link {
    margin-top: 25px; width: 320px;
    display: flex; flex-flow: row wrap; gap: 10px;
}
.web_wrap .web .swiper .swiper-wrapper .swiper-slide .web_info .link a {
    background: linear-gradient(135deg, #161B22, #1F2937);
    color: #E2E8F0; font-weight: 500;
    display: inline-block; border-radius: 8px;
    line-height: 46px; width: 150px; text-align: center;
    border: 1px solid rgba(79, 70, 229, 0.1);
    transition: all 0.3s ease;
}
.web_wrap .web .swiper .swiper-wrapper .swiper-slide .web_info .link a:hover {
    background: linear-gradient(45deg, #4F46E5, #06B6D4);
    color: #FFFFFF;
    border-color: transparent;
}
.web_wrap .web div[class^=swiper-button] {
    color: #4F46E5;
    position: absolute; top: 60%;
}
.web_wrap .web .swiper-button-prev {left: 150px;}
.web_wrap .web .swiper-button-next {right: 150px;}
/* 4. App design */
.app_wrap {}
.app_wrap .app {position: relative; left: 0; top: 0; z-index: 800;}
.app_wrap .app .title {}
.app_wrap .app .swiper {max-width: 1050px;}
.app_wrap .app .swiper .swiper-wrapper {}
.app_wrap .app .swiper .swiper-wrapper .swiper-slide {
    background: linear-gradient(135deg, #161B22, #1F2937);
    border-radius: 20px;
    display: flex; 
    justify-content: center; align-items: center;
    gap: 180px; padding: 50px 100px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(79, 70, 229, 0.1);
}
.app_wrap .app .swiper .swiper-wrapper .swiper-slide .thum {}
.app_wrap .app .swiper .swiper-wrapper .swiper-slide .thum img {width: 100%; border-radius: 10px;}
.app_wrap .app .swiper .swiper-wrapper .swiper-slide .app_info {}
.app_wrap .app .swiper .swiper-wrapper .swiper-slide .app_info h2 {
    font-size: 3.125rem; font-weight: 700;
    background: linear-gradient(45deg, #4F46E5, #06B6D4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.app_wrap .app .swiper .swiper-wrapper .swiper-slide .app_info p {
    font-weight: 600; margin: 20px 0 74px;
    color: #94A3B8;
    padding-left: 10px;
}
.app_wrap .app .swiper .swiper-wrapper .swiper-slide .app_info ul {}
.app_wrap .app .swiper .swiper-wrapper .swiper-slide .app_info ul li {
    margin-bottom: 15px;
    color: #E2E8F0;
}
.app_wrap .app .swiper .swiper-wrapper .swiper-slide .app_info ul li span {
    font-weight: 600;
    background: linear-gradient(45deg, #4F46E5, #06B6D4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.app_wrap .app .swiper .swiper-wrapper .swiper-slide .app_info .link {
    margin-top: 25px; 
    display: flex; 
}
.app_wrap .app .swiper .swiper-wrapper .swiper-slide .app_info .link a {
    background: linear-gradient(135deg, #161B22, #1F2937);
    color: #E2E8F0; font-weight: 500;
    display: inline-block; border-radius: 8px;
    line-height: 46px; width: 150px; text-align: center;
    margin-right: 10px;
    border: 1px solid rgba(79, 70, 229, 0.1);
    transition: all 0.3s ease;
}
.app_wrap .app .swiper .swiper-wrapper .swiper-slide .app_info .link a:hover {
    background: linear-gradient(45deg, #4F46E5, #06B6D4);
    color: #FFFFFF;
    border-color: transparent;
}
.app_wrap .app .swiper .swiper-wrapper .swiper-slide .app_info .link a:last-child {margin:0}
.app_wrap .app div[class^=swiper-button] {
    color: #4F46E5;
    position: absolute; top: 60%;
}
.app_wrap .app .swiper-button-prev {left: 150px;}
.app_wrap .app .swiper-button-next {right: 150px;}
/* 5. sns */
.sns_wrap {}
.sns_wrap .sns {}
.sns_wrap .sns .title {}
.sns_wrap .sns .swiper {}
.sns_wrap .sns .swiper .swiper-wrapper {transition-timing-function: linear;}
.sns_wrap .sns .swiper .swiper-wrapper .swiper-slide {align-self: center;}
.sns_wrap .sns .swiper .swiper-wrapper .swiper-slide img {width: 100%;}
/* 6.illust */
.illust_wrap {}
.illust_wrap .illust {}
.illust_wrap .illust .title {}
.illust_wrap .illust .swiper {}
.illust_wrap .illust .swiper .swiper-wrapper {transition-timing-function: linear;}
.illust_wrap .illust .swiper .swiper-wrapper .swiper-slide {align-self: center;}
.illust_wrap .illust .swiper .swiper-wrapper .swiper-slide img {width: 78%;}
/* 7.video */
.video_wrap {}
.video_wrap .video {
    text-align: center; width: max-content;
    margin: 0 auto;
}
.video_wrap .video .title {}
.video_wrap .video > a {
    background: linear-gradient(135deg, #161B22, #1F2937);
    color: #E2E8F0;
    border-radius: 8px;
    height: 46px; width: 150px;
    margin: 0 auto 80px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(79, 70, 229, 0.1);
    transition: all 0.3s ease;
}
.video_wrap .video > a:hover {
    background: linear-gradient(45deg, #4F46E5, #06B6D4);
    color: #FFFFFF;
    border-color: transparent;
}
.video_wrap .video > a img {margin: 10.5px 10px 10.5px 15px;}
.video_wrap .video > a span {
    font-weight: 500; margin: 10px 15px 10px 0;
    display: inline-block; line-height: 46px;
}
.video_wrap .video .thum {
    display: flex; flex-flow: row wrap;
    gap: 50px; 
    max-width: 1430px;
}
.video_wrap .video .thum a {width: 320px; overflow: hidden;}
.video_wrap .video .thum a img {width: 100%; transition: transform 0.5s;}
.video_wrap .video .thum a:hover img {transform: scale(1.1);}
/* 8. outro */
.outro {}
.outro .title:first-child {margin-bottom: 30px;}
.outro .title:last-child {
    font-family: 'Clash Display', 'Pretendard', sans-serif;
    background: linear-gradient(45deg, #4F46E5, #06B6D4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* text selection color */
::selection {
    background: linear-gradient(90deg, #4F46E5 0%, #06B6D4 100%);
    color: #fff;
}

/* For Firefox */
::-moz-selection {
    background: linear-gradient(90deg, #4F46E5 0%, #06B6D4 100%);
    color: #fff;
}
.ml-63 {
    margin-left: 63px;
}
.mb-20 {
    margin-left: 20px;
}

.mb-200 {
    margin-bottom: 200px;
}

.study-b:hover {
    text-decoration: underline;
    color: #625cd6;
}
.fs-22 {
    font-size: 22px;
}