@media (min-width:2000px){
    html{
        width: 1920px;
        margin: 0 auto;
    }
}

html{
    font-family: 'Pretendard', sans-serif;
    font-size: var(--basic-font-pc);
    scroll-behavior: smooth;
}
::-webkit-scrollbar{
    width: 10px;
    height: 5px;
}
::-webkit-scrollbar-thumb{
    background: #333;
    border-radius: 20%;
}
::-webkit-scrollbar-track{
    background-color: #fff;
}
header{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 10000;
    opacity: 1;
    pointer-events: auto;
}
header.pc .gnb {
    /* 부드러운 변화를 위해 추가 */
    transition: opacity 0.3s ease;
    opacity: 1; /* 초기 상태 */
}
header.pc .gnb.scrolled {
    opacity: 0.5; /* 원하는 투명도 수치로 조절하세요 */
}

/* 마우스를 올렸을 때는 다시 선명하게 (사용성 고려) */
header.pc .gnb.scrolled:hover {
    opacity: 1;
}


header .common-frame{
    padding:  1rem;
}
.gnb{
    display: inline-flex;
    gap: 3rem;
    font-size: 0.7rem;
    font-weight: 500;
    background-color: #333;
    backdrop-filter: blur(10px);
    color: #fff;
    list-style: none;
    text-decoration: none;
    padding: 0.25rem 1rem;
    border-radius: 100px;
    align-items: center;
    min-height: 30px;
    flex-wrap: nowrap;
}
.gnb li{
    flex-shrink: 0;
}
.smart-header{
    display: none;
}
.smart-menu{
    display: none;
}
.mo{
    display: none;
}
.demi{
    font-family: "demi";
    font-weight: 400;
}
.hero{
    height: 100vh;
    min-height: 700px;
    background: url(../img/wave_dreamy_center.gif) no-repeat 50% 50% / cover;
    color: #fff;
    margin-bottom: 3rem;
}
.common-frame{
    width: auto;
    margin: 0 3rem;
}
.hero .common-frame{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.hero h1{
    font-size: 5rem;
}
.txt-box{
    display: flex;
    flex-direction: column;
    width: 1440px;
    margin: 0 auto;
}
.c1{
    align-self: flex-start;
    padding-left: 15rem;
}
.c2{
    align-self: center;
}
.c3{
    align-self: flex-end;
}
.name{
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    text-align: right;
    line-height: 140%;
}
.philo{
    margin-bottom: 5rem;
}
.philo h2{
    font-size: 4rem;
    line-height: 100%;
}
.philo h2:last-of-type{
    margin-bottom: 3rem;
}
.p-box{
    display: flex;
    justify-content: flex-end;
}
.p-box p{
    font-size: 2rem;
    line-height: 140%;
    margin-bottom: 5rem;
}
.philo h4{
    font-weight: bold;
    margin-bottom: 1rem;
}
.resume{
    height: 100vh;
    background-color: #333;
}
.resume-left figure{
    padding-top: 4rem;
    margin-bottom: 1.5rem;
    line-height: 0;
}
.resume-left figure img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.grid-box1{
    display: grid;
    grid-template-columns: 100px 250px;
    gap: .5rem 3rem;
}
.grid-box1 dt {
    font-weight: normal;
    color: #dbdbdb;
}
.grid-box1 dd{
    font-weight: 500;
}
.resume .common-frame{
    display: flex;
    gap: 8rem;
}
.resume-left{
    flex: 3;
    color: #fff;
    padding-left: 3rem;
}
.resume-right{
    flex: 8;
    color: #fff;
    text-transform: uppercase;
}
.gray{
    color: #dbdbdb;
}
.grid-box2{
    display: grid;
    grid-template-columns: 100px 300px 200px;
    gap: 1rem 3rem;
}
.grid-wrap h3{
    margin-bottom: 2rem;
    font-size: 1.2rem;
    font-weight: 700;
}
.grid-wrap:first-child{
    padding-top: 7rem;
    margin-bottom: 3rem;
}
.grid-wrap section{
    text-transform: initial;
}
.resume {
    position: relative; /* 배경 글자의 기준점 설정 */
    overflow: hidden;   /* 글자가 섹션 영역 밖으로 나가지 않게 차단 */
}

.resume::before {
    /* 1. 내용 및 스타일 */
    content: "About ME";
    position: absolute;
    font-size: 10vw;
    font-weight: 900;
    color: #fff;
    white-space: nowrap;
    opacity: .2;
    top: 50%;
    left: 50%;
    z-index: 0; 
    pointer-events: none;
}
.common-frame {
    position: relative;
    z-index: 1;
}
.skills h1{
    font-size: 5rem;
    line-height: 100%;
    margin-bottom: 1rem;
    padding-top: 3rem;
}
.skill-grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 4rem 4rem;
    padding-top: 4rem;
}
.skill-grid .desc{
    font-size: 0.8rem;
    line-height: 1.6;
    color: #191917;
    font-weight: 300;
}
.skill-grid-card .num{
    font-size: 1.2rem;
    margin-bottom: .5rem;
    display: block;
}
.skill-grid-card h3{
    font-size: 2rem;
    border-bottom: 1px solid #00000020;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}
.skills{
    margin-bottom: 8rem;
}

/* 섹션 전체 레이아웃 */
.popup { 
    padding: 5rem 0; 
    overflow: hidden; 
    background-color: #333;
    color: #fff;
}
.popup h2{
    font-size: 5rem;
    margin-bottom: .5rem;
}
.popup-contents { 
    display: flex; 
    align-items: center; 
    gap: 3rem; 
    margin-top: 4rem; 
}

/* 텍스트 슬라이더 영역 */
.pop-txt { 
    max-width: 450px; 
    flex-shrink: 0; 
    position: relative; 
}

.popup-txt-slider { 
    width: 100%; 
    height: 300px; 
}

.popup-txt-slider .swiper-slide { 
    background: #333; 
    opacity: 0 !important; 
    transition: opacity 0.5s; 
}

.popup-txt-slider .swiper-slide-active { 
    opacity: 1 !important; 
}

.pop-txt h3 { 
    font-size: 1.2rem; 
    font-weight: 700; 
    margin-bottom: 1rem; 
    word-break: keep-all; 
}
.pop-txt h3 +p{
    margin-bottom: .5rem;
}
.pop-txt p { 
    font-size: .9rem; 
    color: #e2e2e2; 
    word-break: keep-all; 
}

/* 이미지 슬라이더 영역 */
.pop-station { 
    flex-grow: 1; 
    min-width: 0; 
    position: relative; 
}

.popup-img-slider { 
    overflow: visible !important; 
}

/* 이미지 슬라이드 기본 상태 (이전 슬라이드는 자동으로 이 상태가 됨) */
.popup-img-slider .swiper-slide {
    /* max-width: 500px;  */
    /* max-height: 500px; */
    transition: all 0.6s ease-in-out;
    overflow: hidden;
    opacity: 0;
    filter: blur(20px);
    transform: scale(0.8);
}

/* 활성화된(중앙) 이미지 상태 */
.popup-img-slider .swiper-slide-active {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
    z-index: 10;
}

/* 다음에 올 슬라이드 상태 */
.popup-img-slider .swiper-slide-next {
    opacity: 0.3;
    filter: blur(8px);
    transform: scale(0.9);
    display: block; 
}

.popup-img-slider img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

.poster-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6rem;
    gap: 5rem;
    
    /* 초기 페이드 인 준비 상태 */
    opacity: 0;
    transform: translateY(60px);
    transition: all 0.9s ease-out;
}

/* 짝수 번째(2, 4번) 아이템 방향 반전 */
.poster-item:nth-child(even) {
    flex-direction: row-reverse;
}
.poster-item:nth-child(even) .poster-txt{
}
.poster-item:nth-child(odd) .poster-img{
    justify-items: flex-start;
}
.poster-item:nth-child(odd){
    gap: 0;
}
.poster-item:nth-child(odd) .poster-txt{
    /* flex: 1.2; */
}

/* 화면 중앙에 들어올 때 나타나는 클래스 */
.poster-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 이미지 영역 */
.poster-img {
    flex: 1;
    justify-items: center;
    flex-shrink: 0;
}
.poster-img img {
    height: auto;
    display: block;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* 은은한 그림자 */
}

/* 텍스트 영역 */
.poster-txt {
    flex: 1.2;
    justify-self: center;

}
.poster-txt h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
    font-weight: 800;
    color: #111;
    /* word-break: keep-all; */
}
.poster-txt p {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
    word-break: keep-all; /* 단어 단위 줄바꿈 적용 */
}
.poster::before {
    content: "Poster";
    position: sticky;
    /* top: 20%; 대신 transform에서 시작 위치를 잡습니다 */
    top: 10%; 
    left: 50%;
    font-size: 15vw;
    font-weight: 900;
    color: #333;
    white-space: nowrap;
    opacity: .05;
    z-index: -1; 
    pointer-events: none;
    will-change: transform;
    
}
.poster.pc h2{
    font-size: 5rem;
    margin-bottom: .5rem;
}
.poster.pc h2+p{
    margin-bottom: 2rem;
}

.banner h2{
    font-size: 5rem;
}
.banner h2+p{
    margin-bottom: 1rem;
}
.banner{
    padding:4rem 0;
    background-color: #333;
    color:#fff;
    margin-top: 6rem;
}
.banner-slider h3{
    font-size: 1.3rem;
    font-weight: 700;
}
.banner-txt{
    margin-top: 1rem;
    display: flex;
}
.banner-txt h3{
    flex: 1;
}
.banner-txt p{
    flex: 1 ;
}
.thankyou{
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #333;
}
.thankyou .inner-box{
    position: relative;
    z-index: 3;
    color: #fff;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.thankyou .inner-box h1{
    font-weight: 800;
    font-size: 4.5rem;
    line-height: 1.15;
    margin-bottom: 1.5rem;
}
.inner-sub{
    font-size: 0.9rem;
    opacity: 0.8;
    margin-bottom: 3rem;
    letter-spacing: -0.2px;
}
.inner-name{
    font-size: 0.85rem;
    opacity: 0.9;
    letter-spacing: 0.5px;
}
.detail{
    margin-top: 6rem;
    margin-bottom: 6rem;
}
.detail h2{
    font-size:5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-align: center;
}
.detail h2+p{
    font-size:1rem;
    margin-bottom: 3rem;
    text-align: center;
}
.detail h2+p+p{
    margin-bottom: 3rem;
    text-align: center;
}
.detail-swiper figure{
    position: relative;
    margin-bottom: 2rem;
}
.detail-swiper figure:hover img{
    filter: brightness(0.4);
}
.detail-swiper figure:after{
    color:#fff;
    font-size:1.5rem;
    font-weight: 700;
    content:"click";
    position: absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    display: none;
}
.detail-swiper figure:hover:after{
    display: block;
}
.detail-swiper figure:hover{
    cursor: pointer;
}
.detail-swiper h4{
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.btn-close{
    background-color: #fff;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    width:2.5rem;
    aspect-ratio: 1/1;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.203);
    position: sticky;
    top:1rem;
    left:50%;
    transform: translateX(-50%);
}
.btn-close img{
    height:1.2rem;
}

.btn-top{
    cursor: pointer;
    background-color: #fff;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    width:2.5rem;
    aspect-ratio: 1/1;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.203);
    position: sticky;
    top:calc(100vh - 3.5rem);
    left:50%;
    transform: translateX(-50%);
    margin-bottom: 3rem;
}
.btn-top img{
    height:1.2rem;
}


.detail-title {
    text-transform: uppercase;
    font-weight: 900;
    text-align: center;
    font-size: calc(100vw/10);
    margin-top: 4rem;
    position: sticky;
    top:38vh;
    z-index: -1;
}
.detail-content{
    text-align: center;
    padding-bottom: 6rem;
}
.detail-content h3{
    margin-top: 5rem;
    margin-bottom: 1rem;
    font-size:2rem;
}
.detail-content h2{
    margin-bottom: 6rem;
    font-size:3rem;
    font-weight: 700;
}
.po{
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 4rem;
    padding-bottom: 2rem;
    position: relative;
}
.po:after{
    content:"";
    position:absolute;
    width:1rem;
    height:0.2rem;
    background-color: #000;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
}
.detail-dl{
    width:890px;
    margin:0 auto;
}
.detail-dl dt{
    font-weight: 700;
    margin-bottom: 1rem;
}
.detail-dl dt span{
    display: block;
    margin-bottom: 0.5rem;
}
.detail-dl dd{
    margin-bottom: 3rem;
    line-height: 140%;
}
.project .common-frame{
    margin-bottom: 6rem;
}
.project h2{
    font-size:5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-align: center;
}
.project h2+p{
    font-size:1rem;
    margin-bottom: 3rem;
    text-align: center;
}
.ptitle{
    margin: 4rem 0 2rem;
    text-align: center;
    font-weight: 700;
}
.responsive-icon{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 50%;
    margin: 0 auto;
}
.responsive-icon li{
    flex: 1;
}
.responsive-icon h5{
    font-weight: 700;
    margin-top: 1rem;
    margin-bottom: .25rem;
    text-transform: uppercase;
}
.project-content{
    background-color: #DFDFDF;
    padding-top: 6rem;
    text-align: center;
}
.projectype2{
    background-color: #7E8F7C;
    color: #fff;
}
.project-detail{
    line-height: 0;
}
.project-detail img{
    width: 100%;
}
.project-content h3{
    font-weight: 700;
    display: inline-flex;
    flex-direction: column;
    gap: .25rem;
    margin-bottom: 3rem;
}
.project-content h4{
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: .5rem;
}
.project-content h4+p{

}
.project-sticky{
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 3rem 0;
    position: sticky;
    top: 5rem;
    font-weight: 500;
}
.project-sticky a{
    display: block;
    padding: .5rem 1.5rem;
    font-size: .8rem;
    background-color: #333;
    color: #fff;
    border-radius: 100px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    min-width: 40px;
}
.project-sticky a:hover{
    background-color: #fff;
    color: #333;
}
.smart-header{
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: 100%;
    top: 1rem;
    left: 0;
    z-index: 2000;
}
.btn-menu{
    width: 2rem;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: #333;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    z-index: 1000;
}
.btn-close-menu{
    width: 2rem;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: #333;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    z-index: 3000;
}

.smart-menu{
    position: fixed;
    z-index: 1000;
    left: 0rem;
    top: 0rem;
    bottom: 0rem;
    right: 0rem;
    background-color: #3a3a3acb;
    color: #fff;
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: auto;
    opacity: 0;
    transition: all .5s ease 0s;
    pointer-events: none;
}
.smart-menu.on{
    opacity: 1;
    pointer-events: auto;
}
.gnb-smart{
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    font-weight: 600;
    text-transform: capitalize;
}

.btn-close-menu img{
    height: 1rem;
}
.btn-menu img{
    height: 1rem;
}

.smart-header{
    display: none;
}







@media (max-width:1600px){
    .popup-contents{
        gap: 4rem;
    }
    .pop-txt{
        width: calc((100% - 1rem)/3);
    }
    .pop-station {
        width: calc((100% - 1rem)/3 * 2);
    }
    .hero h1 {
        font-size: 4rem;
    }
    /* .c1 {
        align-self: center;
        padding-left: 0;
    } */

}

@media (max-width:1510px){
    .c1{
        align-self: center;
        padding-left: 0rem;
    }
    .c3{
        align-self: center;
    }
    .txt-box {
        display: flex;
        flex-direction: column;
        width: auto;
        margin: 0 auto;
    }
}
@media (max-width:1440px){
    html{
        font-size: var(--basic-font-pad);
    }
    .txt-box{
        width: auto;
    }
    .c1{
        align-self: center;
        padding-left: 0rem;
    }
    .c3{
        align-self: center;
    }
    .hero h1{
        font-size: 80px;
    }
    .resume-left {
        padding-left: 0rem;
    }
    .resume .common-frame{
        gap: 3rem;
    }
    .grid-box2 {
        gap: 1rem 2rem;
    }
    .grid-box1 {
        gap: .5rem 2rem;
    }
    .grid-box2{
        grid-template-columns: 1fr 3fr 2fr;
    }

    .pop-txt {
        width: calc((100% - 1rem)/3);
    }
    .poster-item:nth-child(odd) {
        gap: 2rem;
    }
    .popup-img-slider img {
        /* width: 400px; */
        /* height: 400px; */
        object-fit: cover;
    }
}
@media (max-width:1200px){
    .pop-txt{ 
        width: calc((100% - 1rem)/2); 
    }
    .pop-station { 
        width: 100%; 
    }
    .popup-contents{
        flex-direction: column-reverse;
    }
    .pop-txt {
        align-self: flex-start;
    }
}
@media(max-width:1024px){
    html{
        font-size: var(--basic-font-pad);
    }
    .common-frame{
        width: auto;
        margin: 0 2rem;
    }
    .txt-box{
        width: auto;
    }
    .c1{
        align-self: center;
        padding-left: 0rem;
    }
    .c3{
        align-self: center;
    }
    .hero h1{
        font-size: 80px;
    }
    .philo h2{
        font-size: 60px;
    }
    .p-box p{
        font-size: 30px;
    }
    .resume .common-frame{
        gap: 1rem;
    }
    .resume-left figure {
        aspect-ratio: 300 / 431;
        height: 100%;
        max-height: 430px;
    }
    .grid-box2 {
        gap: 1rem 1rem;
        grid-template-columns: 1fr 2fr 2fr;
    }
    .grid-box1 {
        gap: .5rem 0rem;
    }
    .skill-grid{
        grid-template-columns: repeat(2,1fr);
        gap: 3rem 3rem;
        padding-top: 4rem;
    }
    .skills h1 {
        font-size: 4rem;
    }
    .resume{
        height: auto;
        padding-bottom: 5rem;
    }
    .popup h2 {
        font-size: 4rem;
    }
    .poster.pc h2 {
        font-size: 4rem;
    }
    .banner h2 {
        font-size: 4rem;
    }
    .poster-txt h3 {
        font-size: 2rem;
    }
    .poster-item {
        gap: 2rem;
    }
    
    .poster-item {
        margin-bottom: 12rem;
    }
    .popup-contents{
        flex-direction: column-reverse;
        gap: 2rem;
    }
    .detail-dl{
        width:auto;
        margin:0 2rem;
    }
    .detail-content h2{
        font-size:2rem;
    }
    .detail h2 {
        font-size: 4rem;
    }
    .project h2 {
        font-size: 4rem;
    }
}

@media(max-width:900px){
    .popup {
        /* padding: 3rem 0; */
    }
    .popup-img-slider img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .gnb{
        gap: 2rem;
        font-size: .6rem;
    }
}


@media(max-width:768px){
    html{
        font-size: var(--basic-font-mobile);
    }
    .pc{
        display: none;
    }
    .mo{
        display: block;
    }
    .common-frame{
        width: auto;
        margin: 0 1rem;
    }
    .hero h1{
        font-size: 60px;
    }
    .philo h2{
        font-size: 40px;
    }
    .p-box p{
        font-size: 14px;
    }
    .resume{
        height: auto;
    }
    .resume .common-frame{
        flex-direction: column;
    }
    .resume-left{
        flex: initial;
    }
    .resume-right{
        flex: initial;
    }
    .grid-box2 {
        grid-template-columns: 1fr 3fr 2fr;
        gap: 1rem 3rem;
    }
    .grid-wrap:first-child {
        padding-top: 2rem;
    }
    .resume::before {
        display: none;
    }
    .skill-grid{
        grid-template-columns: repeat(1,1fr);
        gap: 2rem;
        padding-top: 4rem;
    }
    .skills h1 {
        font-size: 3rem;
    }
    .skill-grid .desc {
        font-size: 0.9rem;
    }
    .resume-left figure {
        aspect-ratio: 350 / 500;
        height: 100%;
        max-height: 500px;
        width: 100%;
    }
    .resume-left, .resume-right{
        margin: 0 1rem;
    }
    .grid-box2 {
        grid-template-columns: 2fr 1fr;
        gap: .5rem 1rem;
    }
    .grid-box2>section:nth-of-type(3n+1){grid-column: 1/3;}
    .skill-grid-card h3{
        font-size: 1.5rem;
    }
    .mg{
        margin-bottom: 1.5rem;
    }
    .popup-contents{
        flex-direction: column-reverse;
        gap: 2rem;
    }
    .pop-txt{
        width: 100%;
        max-height: 200px;
    }
    .popup h2 {
        font-size: 3rem;
    }

    .poster h2{
        font-size: 3rem;
    }
    .poster h2+p{
        margin-bottom: 2rem;
    }
    .poster-txt h3{
        font-size: 1.5rem;
        margin: 2rem 0 .5rem;
    }
    .poster-txt p {
        margin-bottom: 5rem;
    }
    .poster::before {
        display: none;
        
    }
    .banner h2 {
        font-size: 3rem;
    }
    .banner-txt{
        flex-direction: column;
        gap: .5rem;
    }
    .poster-img{
        aspect-ratio: 250/500;
        max-height: 500px;
    }

    .popup-contents{
        flex-direction: column-reverse;
    }
    .pop-station {
        align-self: center;
        width: 100%;
    }
    .popup{
        margin-bottom: 5rem;
        padding: 0;
        padding-top: 5rem;
    }
    .pop-station {
        /* width: 100vw;  */
        /* margin-left: calc(-3rem);  */
        overflow: hidden;
    }

    /* 스위퍼 자체의 위치 고정 */
    .popup-img-slider {
        width: 100%;
        margin: 0 auto;
        overflow: visible !important; /* 다음 슬라이드 블러 효과를 위해 필수 */
    }

    .popup-img-slider .swiper-slide {
        /* 이미지가 너무 크면 쏠려 보일 수 있으니 너비 지정 */
        /* width: 300px;  */
        /* height: 300px; */
        /* margin: 0 auto;  */
        text-align: center;
    }
    .popup-img-slider img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        max-width: 500px;
    }
    .detail-title{
        font-size: calc(100vw/6);
        line-height: 100%;
    }
    .detail h2{
        font-size:2rem;
    }
    .detail h2+p{
        font-size:1rem;
    }
    .thankyou .inner-box h1 {
        font-size: 3rem;
    }
    .project h2{
        font-size: 2rem;
    }
    .project h2+p{
        font-size: 1rem;
    }
    .responsive-icon{
        width: auto;
    }
    .project-content h4 {
        font-size: 2rem;
    }
    .smart-menu{
        display: flex;
    }
    .project-sticky {
        top: 3rem;
    }
    .smart-header{
        display: flex;
    }
}

@media (max-width:450px){
    .philo h2 {
        font-size: 30px;
    }

}

@media(max-width:400px){
    .hero h1{
        font-size: 40px;
    }
    .common-frame p:first-child{
        text-align: center;
        margin-bottom: 2rem;
    }
    .grid-box1 {
        grid-template-columns: 1fr 3fr;
        gap: .5rem 1rem;
    }

    .grid-box2 section{
        font-size: 11px;
    }
    .skills h1 {
        font-size: 2rem;
    }
    .resume-left, .resume-right{
        margin: 0;
    }
    .grid-box2 {
        gap: .5rem 1rem;
    }
    .philo h2 {
        font-size: 20px;
    }
        .pop-txt {
        width: 100%;
        max-height: 250px;
    }
    .thankyou .inner-box h1 {
        font-size: 2rem;
    }
    .banner-txt h3 {
        margin-bottom: .5rem;
        margin-top: 1rem;
    }
    .banner h2+p {
        margin-bottom: 2rem;
    }
}
@media(max-width:300px){

    .pop-txt h3 {
        font-size: 1.2rem;
    }
    /* .popup-img-slider .swiper-slide img{
        width: 280px; 
        height: 280px;
    }
    .popup-img-slider .swiper-slide{
        text-align: center;
        width: 280px; 
        height: 280px;
    } */
}