h1 {font-family: 'KBLJump_EB'; letter-spacing: 20%; font-weight: 500;}
h2 {font-family: 'KBLJump_EB'; letter-spacing: 20%; font-weight: 500;}
h3 {font-family: 'KBLJump_EB'; letter-spacing: 20%; font-weight: 500;}
h4 {font-family: 'KBLJump_EB'; letter-spacing: 20%; font-weight: 500;}
h5 {font-family: 'KBLJump_EB'; letter-spacing: 20%; font-weight: 500;}
h6 {font-family: 'KBLJump_EB'; letter-spacing: 20%; font-weight: 500;}

@keyframes a_rota {
	0% {transform: rotate(0);}
	100% {transform: rotate(360deg);}
}

@keyframes a_bounce_01 {
	0% {transform: translateX(0) translateY(0);}
	85% {transform: translateX(10%) translateY(-10%);}
    93% {transform: translateX(0) translateY(0);}
    95% {transform: translateX(2%) translateY(-2%);}
    100% {transform: translateX(0) translateY(0);}
}

@keyframes a_bounce_02 {
	0% {transform: translateX(0) translateY(0);}
	85% {transform: translateX(-10%) translateY(-10%);}
    93% {transform: translateX(0) translateY(0);}
    95% {transform: translateX(-2%) translateY(-2%);}
    100% {transform: translateX(0) translateY(0);}
}

body {overflow-x: hidden; background: #eee;}
canvas {display: none;}

/* 메인 비쥬얼 */

.main_section {height: 100vh; position: relative; margin-bottom: 100px;}
.main_box {height: 100vh; position: relative; display: flex; flex-direction: column; justify-content: center;}
.main_tit {position: relative; margin-right: auto;}
.main_tit h6 {letter-spacing: 30%; font-size: 14px; margin-bottom: 30px;}
.main_tit h1 {font-size: 68px; line-height: 140%; text-shadow: 0 6px 0 rgba(115,228,115,1) ; margin-bottom: 100px;}
.main_list {display: flex; gap: 12px; width: 500px; flex-wrap: wrap;}
.main_list li {border-radius: 20px; font-size: 12px; transition: .2s;}
.main_list li a {font-family: 'KBLJump_EB'; font-weight: 500; color: #fff; letter-spacing: 30%; width: 100%; height: 100%; padding: 10px 24px; display: block;}
.main_list li:nth-child(1n) {background: #000000;}
.main_list li:nth-child(2n) {background: #73E473;}
.main_list li:nth-child(3n) {background: #FF005D;}

.main_list li:hover {background: #333;}
.main_2026 {position: absolute; top: 0; right: 0; width: 130px; height: 130px; background: #73E473; border-radius: 80px 80px 80px 0; display: flex; flex-direction: column; justify-content: center; text-align: center; animation: a_bounce_01 2s infinite;}
.main_2026 p {font-family: 'KBLJump_EB'; font-size: 20px; color: #fff; transform: rotate(-45deg); letter-spacing: 10%;}

.main_visual_slide {width: 540px; position: absolute; top: -20%; right: 10%; transform: rotate(10deg); border-radius: 30px; overflow: hidden; z-index: -1;}
.main_visual_slide_link {border-radius: 30px; overflow:hidden; display: block; margin-bottom: 20px;}
.main_visual_slide_link img {width: 100%;}
.main_visual_back {position: absolute; top: -15%; left: -10%; z-index: -2; width: 640px; animation: a_rota 50s infinite linear;}

/* 프로필 */
.profile_section {position: relative;}
.profile_box {display: grid; grid-template-columns: 35% 65%; position: relative; padding: 160px 0; border-bottom: 1px solid #666;}
.profile_img {position: relative; width: 480px;}
.profile_img_box {width: 320px; height: 460px; border-radius: 40px; background: #fff; box-shadow: 0 0 30px rgba(0,0,0,.1); position: absolute; top: 50%; transform: translateY(-50%) rotate(-7deg); overflow: hidden;}
.profile_img_box canvas {position: absolute; top: 10%; left: 50%; transform: translateX(-50%); display: block;}
.profile_img_back {width: 320px; height: 460px; border-radius: 40px; background: #73E473; box-shadow: 0 0 30px rgba(0,0,0,.1); position: absolute; top: 50%; transform: translateY(-48%) translateX(5%) rotate(18deg);}
.profile_img_btn {width: 100px; height: 100px; border-radius: 80px 80px 80px 0; background: #000; position: absolute; top: 35%; right: 28%; display: flex; flex-direction: column; justify-content: center; text-align: center; animation: a_bounce_01 2s infinite;}

.profile_img_btn p {font-family: 'KBLJump_EB'; font-size: 14px; color: #fff; transform: rotate(-45deg); letter-spacing: 10%;}
.profile_img_deco {width: 100px; height: 100px; position: absolute; top: 40%; left: -10%;}
.profile_img_deco img {width: 100%;}

.profile_text {display: grid; gap: 80px; align-self: center;}
.profile_text_list {display: grid; align-items: stretch; gap: 60px;}
.profile_text_box {display: grid; gap: 20px;}
.profile_text_box.left {grid-column: 1;}
.profile_text_box.right {grid-column: 2; grid-row: 1 / span 3;}
.profile_text_box h5 {font-size: 18px;}
.profile_text_box h6 {font-size: 12px; font-family: 'KBLJump_B';}
.profile_text_box ul {display: grid; gap: 10px;}
.profile_text_box ul li {display: grid; grid-template-columns: 60px auto;}
.profile_text_box.career ul li {display: grid; grid-template-columns: 160px auto;}
.profile_text_box ul li p {line-height: 140%; font-size: 12px;}

.profile_visual_back {position: absolute; bottom: -2%; right: -3%; z-index: -1; width: 360px; animation: a_rota 50s infinite linear;}

/* 서브 프로필 */
.sub_section {position: relative;}
.sub_box {display: grid; position: relative; padding: 160px 0; border-bottom: 1px solid #666;}
.sub_text_list {display: grid; align-items: stretch; gap: 60px; grid-template-columns: 1fr 1fr 1fr; align-self: start; }
.sub_text_list h2 {grid-column: 1 / 3;}
.sub_text_box {display: grid; gap: 40px; align-self: start;}
.sub_text_box.project {grid-column: 3; grid-row: 1 / span 4; /}
.sub_text_box h5 {font-size: 18px;}
.sub_text_box h6 {font-size: 12px; font-family: 'KBLJump_B';}
.sub_text_box ul {display: grid; gap: 16px;}
.sub_text_box ul li {display: grid; grid-template-columns: 60px auto;}
.sub_text_box ul li p {line-height: 140%; font-size: 12px;}
.sub_text_box.project ul {gap: 40px}

.sub_visual_back {position: absolute; bottom: -25%; left: -5%; z-index: -1; width: 540px; animation: a_rota 50s infinite linear;}

/* 스킬 */
.skill_box {display: grid; grid-template-columns: 20% 80%; gap: 60px; align-items: center; padding: 160px 0; border-bottom: 1px solid #666;}
.skill_list {display: flex; flex-wrap: wrap; gap: 40px;}
.skill_list_box {display: flex; align-items: center; gap: 14px;}
.skill_list_box li {height: 80px; border-radius: 30px; box-shadow: 0 0 10px rgba(0,0,0,.2);}
.skill_list_box li:first-child {font-size: 16px; font-family: 'KBLJump_EB';  display: flex; align-items: center; padding: 0 30px; background: #000; color: #fff; letter-spacing: 10%;}
.skill_list_box li img {width: 80px; border-radius: 30px;}

/* 프로젝트 */
.project_section {position: relative;}
.project_box {padding: 160px 0;}
.project_box h2 {text-align: center; margin-bottom: 100px;}
.project_list {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px;}

.project_list .project_con {width: 100%; border-radius: 30px; overflow: hidden; position: relative;}
.project_list .project_con img {width: 100%; display: block}
.project_list .project_con a {position: absolute; width: 100%; height: 100%; text-align: center; padding: 30px; display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,.5); opacity: 0;}
.project_list .project_con a:hover {opacity: 1; transition: .3s;}
.project_list .project_con a h4 {color: #fff; font-size: 24px; font-family: 'Gmarket Sans'; font-weight: 700;}
.project_list .empty_list {padding: 100px 15px; font-size: 20px; text-align: center; grid-column: span 1/3;}
.project_list.por_list_etc {grid-template-columns: 1fr 1fr 1fr 1fr;}

.project_first {position: relative;}
.project_first_deco_01 {width: 160px; height: 160px; background: #FF005D; border-radius: 80px 80px 80px 0; position: absolute;}
.project_first_deco_02 {width: 240px; position: absolute; top: -10%; left: 25%;}
.project_first_btn {position: absolute; width: 90%; height: 60%; bottom: 0; right: 0; background: #000; display: flex; padding: 10%; border-radius: 60px 60px 0 60px; gap: 20px; align-items: end; justify-content: space-between; transition: .2s;}
.project_first_btn:hover {background: #333; transform: scale(1.02);}
.project_first_btn h4 {color: #fff;}
.project_first_btn img {width: 50px; animation: a_bounce_02 1s infinite;}

.project_visual_back {position: absolute; top: 3%; right: -6%; z-index: -1; width: 720px; animation: a_rota 50s infinite linear;}

.footer {text-align: center;}
.footer_box {padding: 0 0 100px 0; display: grid; gap: 10px;}
.footer_info {font-size: 16px;}
.footer_copy {color: #999;}

@media(max-width: 1400px) {  
    /* 메인 비쥬얼 */
    .main_visual_slide {right: 0;}
    .main_tit h6 {font-size: 10px;}
    .main_tit h1 {font-size: 54px;}
    .main_2026 {width: 110px; height: 110px;}
    .main_2026 p {font-size: 16px;}

    /* 프로필 */
    .profile_img {transform: scale(.8);}
}   

@media(max-width: 1080px) {  
    /* 메인 비쥬얼 */
    .main_tit {width: 370px;}
    .main_tit h6 {font-size: 8px; margin-bottom: 10px;}
    .main_tit h1 {font-size: 40px; margin-bottom: 50px;}
    .main_2026 {width: 70px; height: 70px;}
    .main_2026 p {font-size: 10px;}
    .main_visual_slide {width: 400px; top: 10%;}
    .main_list {width: 400px;}
    .main_list li a {font-size: 10px;}

    /* 프로필 */
    .profile_box {grid-template-columns: 50% 50%;}
    .profile_text h2 {transform: translateX(-50%);}
    .profile_text_list {}
    .profile_text_box.right {grid-column: unset; grid-row: unset;}
    .profile_img {transform: scale(1) translateX(10%);}

    /* 스킬 */
    .skill_box {grid-template-columns: 1fr;}

    /* 프로젝트 */
    .project_first_btn {border-radius: 30px 30px 0 30px;}
    .project_first_btn h4 {font-size: 16px;}
    .project_first_btn img {width: 30px;}

    .project_list {width: 100%; grid-template-columns: 1fr 1fr 1fr;}
    .project_list li button {height: 300px;}
    .main_list_btn {max-width: 400px; width: 100%; padding: 15px;}
}

@media(max-width: 760px) {  
    h2 {font-size: 28px;}

    /* 메인 비쥬얼 */
    .main_box {justify-content: start; padding-top: 120px;}
    .main_tit {width: 330px;}
    .main_tit h1 {font-size: 36px; margin-bottom: 40px;}
    .main_2026 {width: 60px; height: 60px;}
    .main_list {width: 200px; gap: 8px}
    .main_list li a {font-size: 8px;padding: 8px 16px;}
    .main_visual_slide {width: 260px; top: 10%;right: -25%; transform: rotate(20deg);}
    

    /* 프로필 */
    .profile_box {grid-template-columns: 1fr; padding: 80px 0;}
    .profile_text {gap: 460px;}
    .profile_text h2 {transform: translateX(0);}
    .profile_img {transform: scale(.7) translateX(15%) translateY(360px);} 

    /* 서브 프로필 */
    .sub_box {padding: 80px 0;}
    .sub_text_list {grid-template-columns: 1fr;}
    .sub_text_list h2 {grid-column: unset;}
    .sub_text_box.project {grid-column: unset; grid-row: unset;}
    .sub_text_box.project ul {gap: 16px;}

    /* 스킬 */
    .skill_box {padding: 80px 0;}
    .skill_list {gap: 30px;}
    .skill_list_box {flex-wrap: wrap;}
    .skill_list_box li {height: 60px; border-radius: 20px;}
    .skill_list_box li:first-child {font-size: 14px; padding: 0 20px;}
    .skill_list_box li img {width: 60px; border-radius: 20px;}
    

    /* 프로젝트 */
    .project_box {padding: 80px 0;}
    .project_list {display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}

    /* 메인 포트폴리오 */
    .main_por_deco_02 {grid-template-columns: none; grid-template-rows: auto auto; margin-bottom: 50px;}
    .project_list {gap: 15px; grid-template-columns: 1fr;}
    .project_list li {}
    .main_por_list .empty_list {grid-column: unset;}
    .project_list.por_list_etc {grid-template-columns: 1fr 1fr;}
}