* {margin: 0;padding: 0;}
body,html {font-family: 'Noto Sans KR', sans-serif; color: #333; overflow-x: hidden;}
ul {list-style: none;}
a {display: block; width: 100%; text-decoration: none; color: #333;}
a:visited{text-decoration: none; color: #333;}
img {max-width: 100%;}
button{background-color: transparent; border-radius: 0; border: none; box-shadow: none; outline: 0; cursor: pointer; color: #333;}
body::-webkit-scrollbar {width: 4px;}
body::-webkit-scrollbar-thumb {height: 160px; background: #EBEBEB; border-radius: 4px;}
body::-webkit-scrollbar-track {background: rgb(0, 0, 0, 0.8);}
.wrap {width: 100%; margin: 0 auto;}
.inner {max-width: 1280px; height: 100%; margin: 0 auto; padding: 0 60px;}

/* topBtn */
.topBtn{position: fixed; bottom: 20px; right: 20px; width: 40px; height: 40px; border: 5px solid rgb(117, 117, 117,0.5); border-radius: 40px; text-align: center; z-index: 9998; cursor: pointer; display: none;}
.topBtn i{line-height: 40px; font-size: 1.5rem; color: rgb(117, 117, 117,0.5);}

/* header */
/* header 섹션의 z-index는 2000부터 부여*/
header{position: fixed; width: 100vw; padding: 10px 40px; box-sizing: border-box; z-index: 2000; backdrop-filter: blur(10px); border-bottom: 1px solid rgb(221, 221, 221, 0.2);}
.headerBody{display: flex; justify-content: space-between; align-items: center; box-sizing: border-box;}
header .logo{width: 60px; height: 60px;}
header .logo a img{width: 100%;}
.gnb{display: flex; justify-content: space-between; gap: 30px;}
.gnb li{position: relative;}
.gnb li a{color: #505050;}
.gnb li::after{ content: ''; display: block; width: 0%; height: 1px; position: absolute; transform: translateX(-50%); left: 50%; background-color: #505050; transition: 0.3s;}
.gnb li:hover::after{width: 100%;}

/* Intro */
#intro {position: relative; width: 100%; height: 100vh; text-align: center; color: #ffffff; box-sizing: border-box; overflow: hidden;}
/* intro 섹션의 z-index는 90~부터 부여*/
.spotlight{display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 660px; height: 660px; max-width: 660px; max-height: 660px; border-radius: 50%; background-color: black; z-index: 98;}
.spotlight .introTxt{display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; max-width: 100%; font-size: 1.4rem; font-weight: 300;}
.spotlight .introEyes{display: flex; justify-content: space-between; width: 100px;}
.introEyes img{width: 12px;}
.introTxt h2,.introTxt h3{ display: block; font-size: 2.4rem; font-weight: 500; color: #ffffff;
 text-shadow:
    0 0 7px #F8B62C,
    0 0 10px #F8B62C,
    0 0 21px #F8B62C,
    0 0 42px #F8B62C;
}
.spotlight .introTxt h2{animation: wiggle ease-in-out 1.5s infinite;}
@keyframes wiggle {
    0% {transform: rotate(0deg);}
    10% {transform: rotate(-2deg);}
    20% {transform: rotate(2deg);}
    30% {transform: rotate(-2deg);}
    40% {transform: rotate(2deg);}
    50% {transform: rotate(0deg);}
    100% {transform: rotate(0deg);}
}

.elipse{position: absolute; border-radius: 100%;}
.introElipse1{bottom: -15%; left: -5%; width: 500px; height: 500px; background-color: #F8B62C; border: 1px solid #bb8615; animation: motion 1s ease-in-out 0s infinite alternate;}
.introElipse2{top: 22%; left: 10%; width: 230px; height: 230px; background-color: #EBEBEB; border: 1px solid gray; filter: blur(2px); z-index: 96; animation: motion-big 2.5s ease-in-out 0s infinite alternate;}
.introElipse3{top: 73%; left: 58%; width: 160px; height: 160px; background-color: #ffffff; border: 1px solid #707070; z-index: 100; animation: motion-big 2s ease-in-out 0s infinite alternate;}
.introElipse4{top: 40%; left: 65%; width: 300px; height: 300px; background-color: #CFCFCF; filter: blur(1.5px); animation: motion-big 3s ease-in-out 0s infinite alternate;}
.introElipse5{top: 18%; right: 5%; width: 150px; height: 150px; background-color: rgba(248, 182, 44, 0.6); filter: blur(3px); z-index: 95; animation: motion-big 4s ease-in-out 0s infinite alternate-reverse;}
.introElipse6{top: 6%; right: 15%; width: 80px; height: 80px;  background-color: #CFCFCF; border: 1px solid #707070; filter: blur(2px); z-index: 94; animation: motion 3s ease-in-out 0s infinite alternate;}
.introElipse7{bottom: -10%; right: -5%; width: 360px; height: 360px; background-color: black; animation: motion-big 2.5s ease-in-out infinite alternate-reverse;}
.introElipse8{top: -25%; left: 30%; width: 300px; height: 300px; background-color: #F8B62C; filter: blur(4px); animation: motion-big 2s ease-in-out infinite alternate;}
.introElipse9{top: -10%; left: -5%; width: 300px; height: 300px; background-color: black; filter: blur(3px); animation: motion-big 2s ease-in-out infinite alternate;}
@keyframes motion{
    0% {transform: translate(0, -12px);}
    100% {transform: translate(0, 12px);}
}
@keyframes motion-big{
    0% {transform: translate(0, -20px);}
    100% {transform: translate(0, 20px);}
}
@keyframes elipse-scale{
    0% {transform: scale(1);}
    50% {transform: scale(1.2);}
    100% {transform: scale(1);}
}

/* portfolioSec */
#portfolioSec{width: 100%; padding: 100px 0; background:#F8B62C url(../img/bgTxt.png) no-repeat fixed center;}
.portfolioWrap{display: grid; grid-template-columns: repeat( 2,1fr); gap: 30px; width: 100%; box-sizing: border-box; margin: 0 auto;}
.portfolioTitle{text-align: center; padding-bottom: 100px;}
.portfolioTitle .eyes{margin: 0 auto; width: 100px; display: flex; justify-content: space-between;}
.portfolioTitle .eyes img{width: 12px;}
.portfolioTitle h3{font-size: 2.5rem; font-weight: 900; color: #ffffff;}

.portfolioCon{display: flex; flex-direction: column; align-items: center; gap: 20px; box-sizing: border-box; max-width: 100%; padding: clamp(16px, 5vw, 40px) clamp(20px, 6vw, 50px); border-radius: 20px; background-color: #ffffff; box-shadow: 5px 5px 10px rgb(0, 0, 0, 0.1); z-index: 1;}
.portfolioThumb{width: 100%; border: 1px solid #ddd;} 
.portfolioThumb a{position: relative; overflow: hidden;} 
.portfolioThumb a img{display: block; width: 100%; transition: all 0.3s;} 
.portfolioThumb a span{opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.5rem; font-weight: 300; color: #ffffff; transition:  0.3s;} 
.portfolioThumb a:hover img{position: relative; scale: 1.02; filter: blur(3px) brightness(50%);} 
.portfolioThumb a:hover span{opacity: 1;}
.portfolioInfo h5{text-align: center; font-size: 1.2rem; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid lightgray; word-break: keep-all;} 
.portfolioInfo ul{box-sizing: border-box;}
.portfolioInfo ul li{margin-bottom: 8px;}
.portfolioInfo ul li a{display: inline-block; width: fit-content; font-weight: bold; transition: all 0.2s;}
.portfolioCon:nth-child(5) .portfolioInfo ul li a:hover{color: #007ef4;}
.portfolioCon:last-child .portfolioInfo ul li a:hover{color: #009178;}
.portfolioInfo ul li p{font-weight: bold; margin-top: 5px;}
.portfolioInfo ul li strong::after{content:':'; margin: 0 5px;}
.portfolioInfo ul li .storyBoard:hover{color:#FF7262; text-decoration: underline;}

/* mid-banner */
.mid-banner{display: flex; justify-content: center; align-items: center; width: 100%; height: 150px; background-color: black;}
.eyes{display: flex; justify-content: space-between; width: 160px;}
.mid-banner.blinkActive .eyes{animation: blink 2s;}
.eyes .eye{position: relative; display: flex; align-items: center;}
.eyes .eye .lightEffect{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; width: 180%; height: 180%; border-radius: 20px; background-color: rgba(254, 231, 168, 60%); filter: blur(15px);}
.eyes .eye img{width: 20px;}
@keyframes blink{
    0%,30%,50%,60%,64%,85%,90% {opacity: 0;}
    40%,55%,63%,100% {opacity: 1;}
}

/* aboutMeSec */
#aboutMeSec{position: relative;}
#aboutMeSec .introduce{width: 100%; padding: 120px; box-sizing: border-box;}
/* 소개문구 스크롤액션 */
.introduce .introduceTitle1 .titleBox,.introduce .introduceTitle2 .titleBox{width: 100%; position: relative; text-align: center;}
.introduce .introduceTitle1 .titleBox{left: -100%;}
.introduce .introduceTitle2 .titleBox{right: -100%;}
.introduce .introduceTitle1 .titleBox h3,.introduce .introduceTitle2 .titleBox h3{display: inline-block; margin-right: 5px; font-size: 2rem; font-weight: 900; color: #F8B62C; -webkit-text-stroke-width: 1.8px; -webkit-text-stroke-color: black; word-break: keep-all;}
.introduce .introduceTitle1 .titleBox span,.introduce .introduceTitle2 .titleBox span{display:inline-block; margin-right: 5px; font-size: 1.5rem; font-weight: bold; color: #F8B62C;}

/* profileCard */
#aboutMeSec::after{content: ''; display: block; width: 100%; height: 300px; position: absolute; bottom: 0; background-color: black; z-index: -1;}
.profileCard{opacity: 0; transform: translateY(200px); width: 1000px; max-width: 1000px; min-width: 0; box-sizing: border-box; margin: 0 auto; padding: 80px 70px; border-radius: 70px; background-color: #F8B62C; box-shadow: 0px -1px 20px 10px rgba(0, 0, 0, 0.2); text-align: center; z-index: 50;}
.profileCard h3{width: 100%; font-size: 2.5rem; margin-bottom: 20px; color: #ffffff;}
.profile-content{display: flex; justify-content: center; gap: 40px;}
.profilePic{width: 200px; max-width: 200px; height: 270px; max-height: 270px; border: 2px solid black; border-radius: 20px; overflow: hidden; margin-bottom: 10px;}
.profilePic img{width: 100%; height: 100%; object-fit: cover;}
.myprofile .resume{box-sizing: border-box; padding: 16px 45px; border-radius: 10px; background-color: #ffffff; border: 2px solid black; font-size: 1rem; font-weight: bold; transition: all 0.2s;}
.resume:hover{background-color: black; color: #ffffff;}
.profileInfo{text-align: left; overflow-wrap: anywhere; word-break: break-all;}
.profileInfo>li{margin-bottom: 15px;}
.profileInfo>li h4{font-size: 1.3rem; margin-bottom: 5px; color: #ffffff; padding-bottom: 3px; border-bottom: 1px solid #ffffff;}
.profileInfo>li ul li{margin: 5px 0; word-break: keep-all; font-size: 1.2rem; font-weight: 500;}

/* skillsSec */
#skillSec{color: #ffffff; box-sizing: border-box; padding: 100px 0; background-color: black;}
.skillContent{display: flex; flex-direction: column; align-items: center; margin-bottom: 60px; max-width: 100%;}
.skillContent .skillTxt{overflow-wrap: anywhere; word-break: keep-all; text-align: center;}
.skillContent span,.skillContent p{font-size: 1.1rem; word-break: keep-all; text-align: center;}
.skillContent .skillTxt h3{display: inline-block; font-size: 1.4rem; color: #F8B62C;}
.skillContent ul{display: flex; align-items: center; gap: 50px; margin: 40px 0; box-sizing: border-box; max-width: 100%;}
.skillContent ul li{width: 50px;}
.skillContent ul li img{width: 100%;}
.personality h3{margin-bottom: 10px;}
.personality p{margin-bottom: 8px;}
.skillContent.cooperation{margin-bottom: 0px;}
.cooperation .githubLink{display: inline-block; width: fit-content; margin-top: 20px; padding: 12px 25px; font-size: 1.2rem; font-weight: 500; color: #ffffff; border-radius: 10px; border: 1px solid #ffffff; transition: all 0.2s;}
.cooperation .githubLink:hover{background-color: #ffffff; color: #333;}

/* contact */
#contactSec{position: relative; height: 100vh; text-align: center; box-sizing: border-box; padding: 150px 0; overflow: hidden; background-image: url(../img/contactBg.png); background-position: center; background-size: cover;}
#contactSec .inner{height: 100%; display: flex; flex-direction: column; justify-content: center;}
#contactSec .contactTitle{max-width: 100%; margin: 0 auto; margin-bottom: 80px;}
#contactSec .inner .contactTitle .eyes{margin: 20px auto; display: flex; width: 100%; max-width: 150px; justify-content: space-between; align-items: center;}
#contactSec .inner .contactTitle .eyes img.wink{height: 50px; animation: wink ease 2s infinite;}
@keyframes wink{
    0% {transform: rotate(0deg);}
    30% {transform: rotate(30deg);}
    45% {transform: rotate(-20deg);}
    60% {transform: rotate(20deg);}
    75% {transform: rotate(-10deg);}
    85%,95%,100% {transform: rotate(0deg);}
}

#contactSec .inner .contactTitle .contact>h3{display: block; font-size: 2rem;}
#contactSec .inner .contactTitle strong{font-size: 1.6rem;}
.flipCon{display: flex; align-items: center; justify-content: center; gap: 100px;}
.flip{width: 320px; height: 320px; perspective: 1100px; text-align: center;}
.flip:last-child{margin: 0;}
/* 플립카드 앞 */
.flip .card{display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; transform-style: preserve-3d; transition: 0.3s; border-radius: 50%; background-color: #ffffff; box-shadow: 10px 10px 10px rgba(142, 77, 20, 0.3); cursor: pointer;}
.flip .card .front,.flip .card .back{position: absolute; width: 100%; backface-visibility: hidden;}
.flip .card .front img{width: 25%; margin-bottom: 15px;}
.flip .card .front h5, .flip .card .front span{font-size: 1.5rem;}
/* 플립카드 뒤 */
.flip .card .back{display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; height: 100%; overflow: hidden; transform: rotateY(180deg); cursor: pointer;}
.flip .card .back h6{font-size: 1.8rem;}
.flip .card .back strong{font-size: 1.2rem;}
.flip .card .back span{font-size: 1.6rem;}
.flip .card .back img{width: 40%;}
.flip .card:hover{transform: rotateY(180deg);}
.flip .card:hover .back span,.flip:hover .card .back span a{transition: 0.3s ease-out; color: #F8B62C;}

/* QR popup */
.qrPopbg{display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 90%); z-index: 9999;}
.qrPop{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-block; text-align: center;}
.qrPop img{display: block; max-width: 100%; max-height: 360px; margin-bottom: 20px;}
.qrPop span{display: inline-block; font-size: 2rem; font-weight: lighter; color: #ffffff; cursor: pointer;}
.qrPop span:hover{margin-bottom: -1px; border-bottom: 1px solid #ffffff;}

/* footer */
footer{width: 100%; height: 150px; background-color: black; color: #ffffff; text-align: center;}
footer .inner{position: relative; height: inherit;}
.footer-logo{position: absolute; top: 50%; left: 20px; transform: translateY(-50%);}
.footer-logo a{display: block; width: 80px; height: 80px;}
.footer-logo a img{display: block; width: 100%;}
.footer-info{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; text-align: center; font-weight: 300; color: rgba(255, 255, 255, 60%);}
.footer-info p{margin-bottom: 5px; word-break: keep-all;}
.footer-info strong{font-size: 0.8rem;}


/* responsive-------------------------------------------------------------*/
@media screen and (max-width:1280px){
    /* bgtxt 높이 조절*/
    .inner {max-width: 1024px;} 

    /* Intro */
    .spotlight{width: 500px; height: 500px; max-width: 500px; max-height: 500px;}
    .spotlight .introTxt{font-size: 1rem;}
    .spotlight .introEyes{width: 90px;}
    .introEyes img{width: 8px;}
    .introTxt h2,.introTxt h3{font-size: 1.6rem;}
    
    .introElipse1{bottom: -8%; left: -15%; width: 300px; height: 300px;}
    .introElipse2{top: 20%; left: 10%; width: 150px; height: 150px;}
    .introElipse3{top: 73%; left: 58%; width: 120px; height: 120px;}
    .introElipse4{top: 40%; left: 70%; width: 220px; height: 220px;}
    .introElipse5{top: 12%; right: -5%; width: 150px; height: 150px;}
    .introElipse6{top: 2%; right: 12%; width: 80px; height: 80px;}
    .introElipse7{bottom: -10%; right: -5%; width: 200px; height: 200px;}
    .introElipse8{top: -25%; left: 30%; width: 250px; height: 250px;}
    .introElipse9{top: -10%; left: -12%; width: 220px; height: 220px;}
    
    /* portfolioSec */ 
    .portfolioTitle .eyes{width: 90px;}
    .portfolioTitle .eyes img{width: 10px;}
    .portfolioTitle h3{font-size: 2.3rem;}
    
    /* mid-banner */
    .eyes{display: flex; justify-content: space-between; width: 140px;}
    .eyes .eye img{width: 15px;}
    
    /* aboutMeSec */    
    /* profileCard */
    .profileCard{width: 900px; max-width: 900px; padding: 60px 70px;}
    .profileCard h3{margin-bottom: 30px;}
    
    /* contact */
    #contactSec{padding: 120px 0;}
    #contactSec .inner .contactTitle .eyes{margin: 20px auto; display: flex; width: 120px;}
    #contactSec .inner .contactTitle .eyes img,#contactSec .inner .contactTitle .eyes img.wink{height: 40px;}
    .flip{width: 280px; height: 280px;}
    .flip .card .front img{width: 20%;}
    .flip .card .front h5,.flip .card .front span{font-size: 1.3rem;}
    .flip .card .back h6{font-size: 1.6rem;}
    .flip .card .back strong{font-size: 1.1rem;}
    .flip .card .back span{font-size: 1.4rem;}
    
    /* footer */
    .footer-info p{font-size: 0.8rem;}

}
@media screen and (max-width:1024px){
    .topBtn {width: 40px; height: 40px; border-radius: 40px;}
    .topBtn i{line-height: 40px; font-size: 1.8rem;}
    .inner {max-width: 768px;} 

    /* Intro */
    .spotlight{width: 480px; height: 480px; max-width: 480px; max-height: 480px;}
    .spotlight .introEyes{width: 80px;}
    .introEyes img{width: 7px;}
    .introTxt h2,.introTxt h3{font-size: 1.6rem;}
    
    .introElipse1{width: 280px; height: 280px;}
    .introElipse2{width: 130px; height: 130px;}
    .introElipse3{width: 100px; height: 100px;}
    .introElipse4{width: 200px; height: 200px;}
    .introElipse5{width: 120px; height: 120px;}
    .introElipse6{width: 60px; height: 60px;}
    .introElipse7{width: 180px; height: 180px;}
    .introElipse8{width: 220px; height: 220px;}
    .introElipse9{width: 200px; height: 200px;}

    /* portfolioSec */
    .portfolioWrap{grid-template-columns: 1fr;}
    
    /* aboutMeSec */    
    /* profileCard */
    .profileCard{width: 90%;}
    .profileInfo>li ul li{font-size: 1.1rem;}
    
    /* contact */
    .flipCon{gap: 60px;}


}
@media screen and (max-width:952px){
    /* 소개문구 스크롤액션 줄바꿈처리 */
    .introduce .introduceTitle1 .titleBox h3, .introduce .introduceTitle2 .titleBox h3{display: block;}
}
/* mobile */
@media screen and (max-width:768px){
    .inner {max-width: 440px; padding: 0 30px;} 
    /* header */
    header{padding:0;}
    .headerBody{justify-content: center; padding: 20px;}
    header .logo{display: none;}
    .gnb{gap: 40px;}
    .gnb li a{font-size: 0.8rem;}
    
    /* Intro */
    .spotlight{width: 400px; height: 400px; max-width: 400px; max-height: 400px;}
    .spotlight .introTxt{font-size: 1rem;}
    .spotlight .introEyes{width: 70px;}
    .introEyes img{width: 6px;}
    .introTxt h2,.introTxt h3{font-size: 1.5rem;}
    
    .introElipse1{width: 180px; height: 180px;}
    .introElipse2{width: 110px; height: 110px;}
    .introElipse3{width: 70px; height: 70px;}
    .introElipse4{width: 180px; height: 180px;}
    .introElipse5{width: 100px; height: 100px;}
    .introElipse6{width: 40px; height: 40px;}
    .introElipse7{width: 120px; height: 120px;}
    .introElipse8{display: none;}
    .introElipse9{width: 200px; height: 200px;}

    /* profileCard */
    .profileCard{border-radius: 50px; padding: 50px;}
    .profile-content{flex-direction: column; align-items: center; gap: 30px;}
    .myprofile .profilePic{width: 200px; max-width: 200px; height: 270px; max-height: 270px; margin-bottom: 15px;}
    
    /* skillsSec */ 
    .skillContent{max-width: 100%; margin-bottom: 40px;}
    
    /* contact */
    #contactSec{background-image: url(../img/contactBg_m.png);}
    .flipCon{display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px;}
    .flip{width: 100%; max-width: 250px; height: 160px;}
    .flip .card{border-radius: 20px;}
    .flip .card .front h5{font-size: 1.2rem;}
    .flip .card .front span{font-size: 1.2rem;}
    .flip .card .back h6{font-size: 1.3rem;}
    .flip .card .back strong{font-size: 1rem;}
    .flip .card .back span{font-size: 1.3rem;}
    
    /* footer */
    .footer-logo{display: none;}
}
@media screen and (max-width:622px){
    .introduce .introduceTitle1 .titleBox h3, .introduce .introduceTitle2 .titleBox h3{font-size: 1.8rem;}
}
@media screen and (max-width: 414px){
    .inner {padding: 0 8vw; box-sizing: border-box;} 
    .topBtn {width: 40px; height: 40px; border-radius: 40px;}
    .topBtn i{line-height: 40px; font-size: 1.8rem;}
    /* header */
    /* 모바일 햄버거 메뉴 */
    .hamBg{display: none; position: fixed; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.6); z-index: 3000; backdrop-filter: blur(3px); }
    .hamBg.active{display: block;}
    .ham{position: fixed; top: 20px; right: 20px; width: 30px; height: 22px; cursor: pointer; z-index: 3002;}
    .ham span{position: absolute; left: 0; width: 30px; height: 2px; border-radius: 2px; background-color: #333; transform-origin: center center; transition: all 0.2s;}
    .ham span:first-child{top: 0;}
    .ham span:nth-child(2){top: 10px;}
    .ham span:last-child{top: 20px;}

    .ham.active span:first-child{transform: rotate(45deg); top: 10px;}
    .ham.active span:nth-child(2){ opacity: 0;}
    .ham.active span:last-child{transform: rotate(-45deg); top: 10px;}

    header{position: fixed; top: 0; right: 0; transform: translateX(100%); width: 70%; height: 100vh; box-sizing: border-box; z-index: 3001; background-color: #ffffff; border-left: 1px solid rgb(221, 221, 221);}    
    header.active{transform: translateX(0);  transition: transform 0.2s;}
    .headerBody{position: relative; display: block; height: 100%; padding-left:30px;}
    .gnb{display: inline-block; margin-top: 50px;}
    .gnb li{position: static; margin-bottom: 20px;}
    .gnb li a{display: inline-block; font-size: 1.2rem; transition: all 0.3s;}
    .gnb li:hover a{color: #bb8615;}
    .gnb li::after{display: none;}

    /* Intro */
    .spotlight{width: 320px; height: 320px; max-width: 400px; max-height: 400px;}
    .spotlight .introTxt{font-size: 1rem; gap: 10px;}
    .spotlight .introEyes{width: 60px; margin-bottom: 10px;}
    .introEyes img{width: 6px;}
    .introTxt h2,.introTxt h3{font-size: 1.5rem;}

    /* portfolioSec */
    .portfolioInfo h5{font-size: 1.1rem;} 
    .portfolioInfo ul li{font-size: 0.9rem;}
    
    /* mid-banner */
    .eyes{width: 120px;}
    .eyes .eye img{width: 12px;}

    /* aboutMeSec */
    #aboutMeSec .introduce{padding: 100px 20px;}
    /* profileCard */
    .profileCard{width: 100%; max-width: 100%; padding: 40px 8vw; border-radius: 40px 40px 0 0;}
    .profileCard h3{margin-bottom: 20px;}
    .profile-content{gap: 30px; width: 100%; text-align: center;}
    .myprofile .profilePic{width: 100%;}
    .profileCard .profile-content{padding-left: 0px;}
    .profileInfo>li ul li{margin: 3px 0; font-size: 1rem; word-break: keep-all;}
    
    /* skillsSec */
    #skillSec{padding: 80px 0;}
    .skillContent .skillTxt h3{font-size: 1.1rem;}
    .skillContent .skillTxt span{font-size: 0.95rem;}
    .skillContent ul{gap:30px; margin: 40px 0;}
    .skillContent ul li{width: 40px;}
    .skillContent p{font-size: 0.95rem;}
    .personality h3,.personality p{margin-bottom: 5px;}
    .cooperation .githubLink{font-size: 1rem;}
    
    /* contactSec */
    #contactSec{padding: 60px 0;}
    .flipCon{gap: 30px;}
    

    



}