/* 공통 */
.page_inner {display: flex; width: 1600px; margin: 0 auto; box-sizing: border-box; padding: 0 2rem;}
.common_trans_attr { transition: all 1s ease; transform: translateY(105%); }
section.on .common_trans_attr {transform: translateY(0);}

section {background: #121212;}
section .page_inner {height: 100%; flex-direction: column; justify-content: center; align-items: center;}

.section_title_wrap {overflow: hidden;}
.section_title {width: 100%; font-size: 3rem; font-weight: 700; text-align: center; transform: translateY(100%); transition: all 1s ease;}
.section_title span {color: var(--main-color);}
.section_sub_title_wrap {margin-top: 1rem;}
.section_sub_title_wrap .section_title {color: var(--gray-color); font-size: 1.125rem; font-weight: 400;}
section.on .section_title {transform: translateY(0);}

/* 헤더 */
#header {position: fixed; width: 100%; top: 0; border-bottom: 1px solid var(--border-color); z-index: 2; background-color: #0a0a0ae6; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(4px);}
#header .page_inner {padding: 1.6rem 2rem; justify-content: space-between;}
#header .logo {font-size: 1.5rem; font-weight: 700;}
#header .logo span {color: var(--main-color);}
#header .gnb_wrap {display: flex; align-items: center; justify-content: center; gap: 60px;}

#header .gnb_wrap .gnb a {position: relative; display: flex; justify-content: center; transition: all 0.4s ease;}
#header .gnb_wrap .gnb:hover a {color: var(--main-color);}
#header .gnb_wrap .gnb.on a:after {content: ""; position: absolute; top: -10px; width: 4px; height: 4px; background: var(--main-color); border-radius: 50%;}

/* 푸터 */
#footer {position: fixed; width: 100%; height: 40px; line-height: 40px; bottom: 0; border-top: 1px solid var(--border-color); background-color: #0a0a0ae6;}
#footer .page_inner {justify-content: space-between;}
#footer p {color: var(--gray-color);}

/* 네비게이션 */
#fp-nav.right {position: relative; display: flex; justify-content: center; align-items: center; top:initial; bottom: 0; right: 0; margin-top: 0 !important; margin-right: 25px; width: 120px; height: 40px; background: var(--secondary-color); border-radius: 6px 6px 0 0;}
#fp-nav.right:before, #fp-nav.right:after {content: ""; position: absolute; transition: all 0.4s ease;}
#fp-nav.right:before { transform: translateX(-100%); left: 0; bottom: 0; border-top: 18px solid transparent; border-right: 12px solid var(--secondary-color); border-bottom: 18px solid var(--secondary-color); border-left: 12px solid transparent; }
#fp-nav.right:after { transform: translateX(100%); right: 0; bottom: 0; border-top: 18px solid transparent; border-left: 12px solid var(--secondary-color); border-bottom: 18px solid var(--secondary-color); border-right: 12px solid transparent; }

#fp-nav.right ul {display: flex; width: 100%; justify-content: space-around;}
#fp-nav ul li a span, .fp-slidesNav ul li a span {background: #dbc3b1;}
#fp-nav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li a.active span, .fp-slidesNav ul li:hover a.active span {background-color: var(--basic-color);}

/* intro */
.intro_section .bg_wrap {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient( to bottom, #0a0a0a 0%, #121212 50%, #0a0a0a 100%); opacity: 0; visibility: hidden; transition: all 0.4s ease; }
.intro_section.on .bg_wrap {opacity: 0.2; visibility: visible;}
.intro_section .bg_circle {position: absolute; width: 24rem; height: 24rem; border-radius: 50%; filter: blur(64px);}
.intro_section .left_circle {top: 8rem; left: 5rem; background-color: #06b6d4;}
.intro_section .right_circle {bottom: 5rem; right: 5rem; background-color: #a855f7;}

.intro_section .badge_icon_wrap {overflow: hidden; margin-bottom: 2rem;}
.intro_section .badge_icon_wrap .badge_icon {color: var(--main-color); background-color: #22d3ee1a; padding: 0.6rem 1rem; border: 1px solid var(--main-color); border-radius: 9999px; box-sizing: border-box;}

.intro_section .txt_area { display: flex; flex-wrap: wrap; margin-bottom: 50px; }
.intro_section .txt_wrap {position: relative; display: flex; width: 100%; justify-content: center; overflow:hidden; text-align: center; font-size: 4.5rem; font-weight: 700;}
.intro_section .txt_wrap:last-child {margin-top: 30px;}
.intro_section .sub_intro_txt {background: linear-gradient(90deg, var(--main-color) 0%, var(--secondary-color) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;}
.intro_section .intro_txt_kr {font-size: 1.25rem; font-weight: 500; color: var(--gray-color);} 
.intro_section.on .intro_txt_kr.on::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 0; color: transparent; background: linear-gradient(90deg, var(--basic-color) 0%, var(--basic-color) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; overflow: hidden; white-space: nowrap; animation: colorReveal 3s steps(var(--steps)) forwards; }

.intro_section .button_wrap {display: flex; margin-bottom: 80px; gap: 20px; overflow: hidden; }
.intro_section .button_wrap a {padding: 1rem 2rem; font-weight: 600; border-radius: 0.5rem; transition: all 0.4s ease;}
.intro_section .button_wrap a:hover {background-color: var(--main-color); color: #0a0a0a;}
.intro_section .button_wrap .portfolio_btn {background-color: #67e8f9; color: #0a0a0a;}
.intro_section .button_wrap .contact_btn {border: 1px solid var(--main-color); color: var(--main-color);}

.intro_section .mouse_icon_wrap {overflow: hidden;}
.intro_section .mouse_icon {display: flex; justify-content: center; align-items: flex-start; width: 32px; height: 60px; border: 1px solid rgba(255,255,255, 0.4); border-radius: 50px; box-sizing: border-box;}
.intro_section .mouse_circle {position: relative; display:block; width: 8px; height: 8px; background: var(--basic-color); border-radius: 50%; animation: bounce 3s ease-in-out infinite;} 

/* about */
.about_section .about_description_wrap { transition: all 1s ease; transform: translateX(-105%);}
.about_section.on .about_description_wrap {transform: translateX(0);}

.about_section .page_inner {flex-direction: row; gap: 4rem;}
.about_section .page_inner > div {display: flex; align-items: center; width: 50%; height: 100%;}
.about_section .about_description_area {overflow: hidden;}
.about_section .description_title {font-weight: 700; font-size: 3rem; margin-bottom: 1.5rem;}
.about_section .description_title span {color: var(--main-color);}
.about_section .about_description { /*height: 118px; overflow-y: auto; padding-right: 1rem;*/ margin-bottom: 2rem;}
.about_section .about_description p {margin-bottom: 1.5rem; color: var(--gray-color); font-size: 1.125rem; line-height: 1.25; word-break: keep-all;}
.about_section .description_icon_wrap {display: flex; gap: 1.5rem;}
.about_section .description_icon_wrap a {display: flex; justify-content: center; align-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid #374151; transition: all 0.4s ease;}
.about_section .description_icon_wrap a:hover {border-color: var(--main-color);}
.about_section .description_icon_wrap a:hover path {fill: var(--main-color);}

.about_section .about_card_area {overflow: hidden; padding: 0 1rem;}
.about_section .about_card_wrap {width: 100%; transform: translateX(105%); transition: all 1s ease; }
.about_section.on .about_card_wrap {transform: translateX(0);}
.about_section .about_card_bg {position: absolute; inset: 0px; transform: rotate(6deg) scaleX(1) scaleY(1); border-radius: 1rem; background: linear-gradient(to bottom right, var(--main-color), var(--secondary-color));}
.about_section .card_item_wrap {display: flex; flex-direction: column; gap: 24px; padding: 2rem; background-color: var(--box-bg-color); border: 1px solid var(--border-color); border-radius: 1rem;}
.about_section .card_item {display: flex; align-items: center; gap: 16px;}
.about_section .card_icon {width: 30px;}
.about_section .card_icon i {display: flex; align-items: center; font-size: 1.5rem; color: var(--main-color);}
.about_section .card_icon svg {height: 1em;}
.about_section .card_content .title {font-weight: 600; font-size: 1.125rem; line-height: 1.75rem;}
.about_section .card_content .content {color: var(--gray-color); font-size: 16px;}

/* skills */
.skills_section .page_inner {gap: 2rem;}
.skills_section .section_title_area {margin-top: 2rem;}
.skills_section .skills_box_area {width: 100%;}
.skills_section .box_area_inner {overflow:hidden;}

.skills_section .skills_box_list {display: flex;}
.skills_section .skill_box {display: flex; flex-direction: column; gap: 1.5rem; height: auto; padding: 2rem; background: var(--box-bg-color); border: 1px solid var(--border-color); border-radius: 0.75rem; transition: all 0.4s ease; box-sizing: border-box;}
.skills_section .skill_box:hover {border: 1px solid var(--main-color);}
.skills_section .skill_box .box_icon {display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 0.5rem;}
.skills_section .skill_box .box_icon i {font-size: 1.875rem; color: var(--basic-color); line-height: 0;}
.skills_section .skill_box .box_icon svg {height: 1em;}
.skills_section .skill_box .box_title {font-size: 1.5rem; font-weight: 600;}
.skills_section .skill_box .box_content { display: box; line-clamp: 2; box-orient: vertical; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;font-size: 1rem; color: var(--gray-color); word-break: keep-all;}
.skills_section .skill_box .skill_level_list {display: flex; flex-direction: column; gap: 1rem; max-height: 145px; overflow-y: auto; }
.skills_section .skill_box .skill_level_list.has_scroll {padding-right: 15px;}
.skills_section .skill_box .skill_header {display: flex; justify-content: space-between; margin-bottom: 0.725rem;}
.skills_section .skill_box .skill_header > * {font-size: 0.875rem;}
.skills_section .skill_box .skill_bar_wrap {height: 0.5rem; background-color: #2b2b2b; border-radius: 9999px;}
.skills_section .skill_box .skill_bar {width: 0; height: 100%; background-color: #ffffff; border-radius: 9999px; transition: width 1s ease;}

.skills_section .publishing_box .box_icon {background: linear-gradient(to bottom right, var(--main-color), #0891b2);}
.skills_section .publishing_box .per {color: var(--main-color);}
.skills_section .publishing_box .skill_bar { background: linear-gradient(to right, var(--main-color), #0891b2);}

.skills_section .front_box .box_icon {background: linear-gradient(to bottom right, #c084fc, #9333ea);}
.skills_section .front_box .per {color: var(--secondary-color);}
.skills_section .front_box .skill_bar { background: linear-gradient(to right, #c084fc , #9333ea);}

.skills_section .back_box .box_icon {background: linear-gradient(to bottom right, var(--tertiary-color), #db2777);}
.skills_section .back_box .per {color: var(--tertiary-color);}
.skills_section .back_box .skill_bar { background: linear-gradient(to right, var(--tertiary-color) , #db2777);}

.skills_section .database_box .box_icon {background: linear-gradient(to bottom right, var(--quaternary-color), #ca8a04);}
.skills_section .database_box .per {color: var(--quaternary-color);}
.skills_section .database_box .skill_bar { background: linear-gradient(to right, var(--quaternary-color) , #ca8a04);}

.skills_section .swiper-button-prev, .skills_section .swiper-button-next {opacity: 0; visibility: hidden; transition: all 2s ease; color: var(--main-color);}
.skills_section.on .swiper-button-prev, .skills_section.on .swiper-button-next {opacity: 1; visibility: visible;}
.skills_section.on .swiper-button-next.swiper-button-disabled, .skills_section.on .swiper-button-prev.swiper-button-disabled {opacity: 0.35;}
.skills_section .swiper-button-prev {left: -50px;}
.skills_section .swiper-button-next {right: -50px;}

.skills_section .skills_simple_area .skills_box_list {display: grid; gap: 2rem; grid-template-columns: repeat(4, minmax(0, 1fr));}
.skills_section .skills_simple_area .skill_box {padding: 1.5rem; gap: 0.5rem; justify-content: center; align-items: center;}
.skills_section .skills_simple_area .box_icon {width: auto; height: auto;}
.skills_section .skills_simple_area .box_icon i {font-size: 2.25rem;}
.skills_section .skills_simple_area .box_name {font-size: 1rem;}

/* projects */
.projects_section .page_inner {gap: 2rem;}
.projects_section .section_title_area {margin: 2rem 0 4rem;}
.projects_section .slide_area {position: relative; display: flex; width: 100%; overflow: hidden;}
.projects_section .projectSlide {display: flex; width: 100%; flex-direction: column; align-items: center; }
.projects_section .swiper-slide {position: relative; border: 2px solid rgba(255, 255, 255, 0.6); box-sizing: border-box; cursor: pointer;}

/* projects hover 선 효과 */
.projects_section .swiper-slide:before, .projects_section .swiper-slide:after, .projects_section .swiper-slide .slide_inner:before, .projects_section .swiper-slide .slide_inner:after {content: ""; position: absolute; background: var(--main-color); transition: all 0.4s ease;}
.projects_section .swiper-slide:before, .projects_section .swiper-slide:after {width: 2px; height: calc( 100% + 2px );}
.projects_section .swiper-slide:before {top:-2px; left: -2px; transform: scaleY(0); transform-origin: left bottom;}
.projects_section .swiper-slide:hover:before {transform: scaleY(1);}
.projects_section .swiper-slide:after {top:0; right: -2px; transform: scaleY(0); transform-origin: right top;}
.projects_section .swiper-slide:hover:after {transform: scaleY(1);}
.projects_section .swiper-slide .slide_inner:before, .projects_section .swiper-slide .slide_inner:after {width: calc(100% + 2px); height: 2px;}
.projects_section .swiper-slide .slide_inner:before {top: -2px; left: 0; transform: scaleX(0); transform-origin: left top;}
.projects_section .swiper-slide:hover .slide_inner:before {transform: scaleX(1);}
.projects_section .swiper-slide .slide_inner:after {bottom: -3px; right: 0; transform: scaleX(0); transform-origin: right bottom;}
.projects_section .swiper-slide:hover .slide_inner:after {transform: scaleX(1);}

.projects_section .slide_inner {position: relative; display: flex; flex-direction: column;}
.projects_section .slide_main_img {height: 16rem; overflow: hidden; transition: all 0.4s ease; padding: 0 2rem; background: #444452;}
.projects_section .swiper-slide:hover .slide_main_img {padding: 0 1rem;}

.projects_section .swiper-slide .client_name {position: absolute; top: 1rem; right: 0; padding: 1rem; background: rgba(187, 187, 187, 0.1); backdrop-filter: blur(3px); -webkit-backdrop-filter: (3px);}
.projects_section .swiper-slide .client_name P {font-size: 1rem; }
.projects_section .swiper-slide .slide_content {display: flex; flex-direction: column; gap: 0.5rem; padding: 1.5rem; background: var(--box-bg-color);}
.projects_section .swiper-slide .content_header {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem;}
.projects_section .swiper-slide .project_type { padding: 0.25rem 0.75rem; border: 1px solid var(--tertiary-color); border-radius: 9999px;}
.projects_section .swiper-slide .project_type p {font-size: 0.75rem; color: var(--tertiary-color);}

.projects_section .swiper-slide .skill_icon_list {display: flex; gap: 0.5rem;}
.projects_section .swiper-slide .skill_icon_list i {display: flex;}
.projects_section .swiper-slide .skill_icon_list .html_icon i {color: #fb923c;}
.projects_section .swiper-slide .skill_icon_list .css_icon i {color: #60a5fa;}
.projects_section .swiper-slide .skill_icon_list .js_icon i {color: #facc15;}
.projects_section .swiper-slide .skill_icon_list .response_icon i {color: var(--tertiary-color);}
.projects_section .swiper-slide .skill_icon_list svg {height: 1.5em;}

.projects_section .swiper-slide .project_name {font-weight: 600; font-size: 1.25rem;}
.projects_section .swiper-slide .project_desc {font-size: 0.875rem; color: var(--gray-color); margin-bottom: 0.5rem;}
.projects_section .swiper-slide .view_btn {display: inline-flex; color: var(--main-color); font-size: 0.875rem;}
.projects_section .swiper-slide .view_btn span {position: relative;}
.projects_section .swiper-slide .view_btn span:after {content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease;}
.projects_section .swiper-slide:hover .view_btn span:after {transform: scaleX(1);}
.projects_section .swiper-slide .view_btn i { display: flex; align-items: center; margin-left: 0.5rem; }
.projects_section .swiper-slide .view_btn svg {height: 1em; margin-top: 1px;}


.projects_section .swiper-pagination {position: relative; margin-top: 30px; width: 375px; top: initial; bottom: 0; left: initial; background: #ffffff21;}
.projects_section .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background: var(--secondary-color);}

/* contact */

.contact_section .page_inner {gap: 2rem;}
.contact_section .section_title_area {margin: 2rem 0 4rem;}

.contact_section .section_content_area {display: flex; width: 100%; justify-content: center; padding: 0 15rem; box-sizing: border-box; overflow:hidden;}
.contact_section .section_content_area > * {width: 50%;}

.contact_section .information_title {font-weight: 600; font-size: 1.5rem; margin-bottom: 1.5rem;}
.contact_section .infomation_content_list {display: flex; gap: 1.5rem; flex-direction: column; margin-bottom: 2rem;}
.contact_section .infomation_content_list li {display: flex; width: 100%; align-items: center; gap: 1rem; }
.contact_section .infomation_content_list .list_icon { display: flex; width: 3rem; height: 3rem; justify-content: center; align-items: center; background-color: rgba(var(--main-rgb-color) / 0.1); border-radius: 0.5rem; }
.contact_section .infomation_content_list .list_icon i {display: flex; font-size: 1.25rem; color: var(--main-color);}
.contact_section .infomation_content_list .list_icon svg {height: 1em;}
.contact_section .infomation_content_list .list_content {display: flex; gap: 0.25rem; flex-direction: column;}
.contact_section .infomation_content_list .list_content {display: flex; gap: 0.25rem; flex-direction: column;}
.contact_section .infomation_content_list .list_content p {font-size: 1rem;}
.contact_section .infomation_content_list .list_content .title {font-weight: 600; }
.contact_section .infomation_content_list .list_content .content {color: var(--gray-color);}

.contact_section .contact_icon_list { display: flex; gap: 1rem; }
.contact_section .contact_icon_list li { display: flex; justify-content: center; align-items: center; width: 3rem; height: 3rem; border-radius: 0.5rem; border: 1px solid #374151; transition: all 0.4s ease; cursor: pointer;}
.contact_section .contact_icon_list li:hover {border: 1px solid var(--main-color);}
.contact_section .contact_icon_list li i { display: flex; font-size: 1.25rem; transition: all 0.4s ease; }
.contact_section .contact_icon_list li:hover i {color: var(--main-color); }
.contact_section .contact_icon_list li svg {height: 1em;}

.contact_section .contact_input_wrap {display: flex; flex-direction: column; gap: 1.5rem; overflow-y: auto; padding: 0 1rem;}
.contact_section .contact_input_wrap input::placeholder, .contact_section .contact_input_wrap textarea::placeholder {color: var(--gray-color);}
.contact_section .contact_input_wrap input[type="text"], .contact_section .contact_input_wrap textarea, .contact_section .contact_input_wrap .file_name {width: 100%; border: 1px solid var(--border-color); background: var(--box-bg-color); color: var(--basic-color); border-radius: 0.5rem; box-shadow: 0px 0px 20px #000000; box-sizing: border-box;}
.contact_section .contact_input_wrap input[type="text"], .contact_section .contact_input_wrap .file_name {height: 50px; padding: 0 1rem;}
.contact_section .contact_input_wrap textarea {padding: 1rem; height: 150px;}
.contact_section .file_wrap {display: flex; align-items: center; width: 100%; gap: 1rem;}
.contact_section .file_wrap .file_name {width: 100%; }
.contact_section .file_wrap .file_input {position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; border: 0;}
.contact_section .file_wrap label { display: flex; width: 7.5rem; height: 100%; background: var(--basic-color); color: var(--sub-basic-color); justify-content: center; align-items: center; cursor: pointer; border-radius: 0.5rem; box-shadow: 0px 0px 20px #000000;}
.contact_section .submit_btn {width: 100%; height: 50px; background: var(--main-color); box-shadow: 0px 0px 20px #000000; color: var(--sub-basic-color); border-radius: 0.5rem; font-weight: 500; font-size: 1rem; }