:root {
    --big-font : clamp(24px, 3vw, 50px);
    --big-lh : clamp(40px, 4.5vw, 80px);
    --basic-font : clamp(18px, 1.5vw, 24px);
    --basic-lh : clamp(30px, 2.2vw, 40px);
    --section-v-space-250 : clamp(80px, 13vw, 250px);
    --section-v-space-150 : clamp(60px, 8vw, 150px);
    --section-v-space-50 : clamp(30px, 3vw, 50px);
    --section-v-space-30 : clamp(15px, 1.8vw, 30px);
}
html {scroll-behavior: smooth; height: auto;}
body {font-family: 'Pretendard', sans-serif; overflow-x: hidden; font-weight: 400; background: linear-gradient(to bottom,  #121a20 0%,#111213 100%);}
.pad_t_250 {padding-top: var(--section-v-space-250);}
.pad_b_250 {padding-bottom: var(--section-v-space-250);}
.pad_t_150 {padding-top: var(--section-v-space-150);}
.pad_b_150 {padding-bottom: var(--section-v-space-150);}
.pad_t_50 {padding-top: var(--section-v-space-50);}
.pad_b_50 {padding-bottom: var(--section-v-space-50);}
.pad_t_30 {padding-top: var(--section-v-space-30);}
.pad_b_30 {padding-bottom: var(--section-v-space-30);}

.mar_t_250 {margin-top: var(--section-v-space-250);}
.mar_b_250 {margin-bottom: var(--section-v-space-250);}
.mar_t_150 {margin-top: var(--section-v-space-150);}
.mar_b_150 {margin-bottom: var(--section-v-space-150);}
.mar_t_50 {margin-top: var(--section-v-space-50);}
.mar_b_50 {margin-bottom: var(--section-v-space-50);}
.mar_t_30 {margin-top: var(--section-v-space-30);}
.mar_b_30 {margin-bottom: var(--section-v-space-30);}

.swiper-slide { width: auto; height: 100%;} 

.scroll-down {position: absolute; bottom: 50px; color: white; text-decoration: none; font-size: 16px; z-index: 3; text-align: center; width: 100%;  animation: bounce 2s infinite;}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}



/* 부드럽게 계속 흐르는 효과를 위한 CSS 필수 설정
#portfolio .swiper-wrapper {-webkit-transition-timing-function: linear !important; -o-transition-timing-function: linear !important; transition-timing-function: linear !important;}
#portfolio .swiper-slide {transition: none !important;}
 */




/* AOS 스타일 오버라이드 및 전역 설정 */
[data-aos] {pointer-events: none; /* 애니메이션 중 클릭 방지 */}
[data-aos].aos-animate {pointer-events: auto; /* 애니메이션 후 클릭 활성화 */}


#main {position: relative; background: url('/edit/images/main_img.png') no-repeat center bottom; background-size: cover; height: 100svh; max-height: 1080px; }
#main h1 {text-align: center; color: white; font-weight: 700; font-size: var(--big-font); line-height: var(--big-lh);}

#point {text-align: center;}
#point h2 {color: white; font-weight: 700; font-size: var(--big-font); line-height: var(--big-lh);}
#point p {color: white; font-size: var(--basic-font); line-height: var(--basic-lh);}
#point span {color: white; font-size:14px; line-height: 20px; color:#2e4f68; display: block; margin-top: 10px;	}
#point .deadline_img {height: 280px;}
#point .license_slide .swiper-wrapper {transition-timing-function: linear !important;}
#point .license_slide .swiper-slide {margin-right: 30px; }

#portfolio .category h2 {float:left; width: 30%; color: white; font-weight: 700; font-size: var(--big-font); line-height: var(--big-lh); padding-left: 10%;}
#portfolio .category .portfolio_slide {float:left; width: 70%;}
#portfolio .category .portfolio_slide .swiper-slide {width: 300px; height: 300px; border-radius:20px; overflow: hidden; background: #485767; font-size: 20px; text-align: center; margin-right: 20px;}
#portfolio .category .portfolio_slide .swiper-slide img {position: absolute; top: 0; left: 0; width: 100%; height: 100%;  object-fit: cover;}

.portfolio_slide .swiper-slide:hover img {
    filter: brightness(1.1);
    transition: 0.3s;
}

#qna {text-align: center; position: relative; overflow: hidden; /*background-color: #0b0c10;*/ }
#qna .text_box {position: relative; z-index: 2;	}
#qna h2 {color: white; font-weight: 700; font-size: var(--big-font); line-height: var(--big-lh);}
#qna p {color: white; font-size: var(--basic-font); line-height: var(--basic-lh);}
#qna .kakao {display: inline-block;}
#qna .kakao img {width:250px;}
#qna span.email {color: white; font-size:16px; line-height: 20px; color:#fff500; display: block; margin-top: 15px;	}


/* 파티클 컨테이너 */
.particle-container {position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.qna-content { position: relative; z-index: 2;}
.particle { position: absolute; bottom: -20px; border-radius: 50%; background: radial-gradient(circle, rgba(100, 180, 255, 0.7) 0%, rgba(100, 180, 255, 0.2) 40%, rgba(100, 180, 255, 0) 70%);
  filter: blur(1px); pointer-events: none; animation: riseUp linear forwards;}

@keyframes riseUp {
  0% {
    transform: translateY(0) scale(0.5) translateX(0);
    opacity: 0;
  }
  15% {
    opacity: 0.8; /* 올라오면서 선명해짐 */
  }
  85% {
    opacity: 0.8;
  }
  100% {
    /* 수직으로 올라가면서 좌우로 살짝 흔들리는 느낌을 주거나, 랜덤하게 처리 */
    transform: translateY(-500px) scale(1.5) translateX(10px);
    opacity: 0; /* 완전히 올라가면 사라짐 */
  }
}





@media screen and (max-width:1080px) {
	#main h1 {font-size: 30px; line-height: 45px;}
	#point .point_img {width:300px;}
	#point .license_slide .swiper-slide {margin-right: 10px;}
	#point .license_slide .swiper-slide img {width: 120px;}
	#portfolio .category {margin-bottom: 80px;}
	#portfolio .category h2 {width: 100%; padding-left: 0; text-align: center; margin-bottom: 30px;}
	#portfolio .category .portfolio_slide {width: 100%;}
	#portfolio .category .portfolio_slide .swiper-slide {width: 200px; height: 200px; border-radius: 15px; margin-right: 10px;}
	#qna .kakao img {width: 200px;}
}