@charset "UTF-8";

html, body {
  margin: 0; padding: 0;
}

/* main.html에만 적용할 수 있도록 */
body.main-no-scroll {
  overflow: hidden; /* 스크롤 비활성화 */
}


body.paging-on .main-wrap {
  position: relative;
  top: 0;
  transition: top 0.7s ease-in-out;
}

.wrap-page {
  /* height: 100vh; */
  overflow: hidden;
}

.normal-scroll-section {
  height: auto; /* 컨텐츠 길이에 따라 */
  overflow-y: auto;
}

/* 일반 스크롤 모드일 때 body에 클래스 추가하여 스크롤 허용 */
body.scroll-enabled {
  overflow-y: auto;
}



.hero-section {
	position: relative;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	/* background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/images/main_bg.gif');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat; */
	color: white;
	overflow: hidden;
}



/* 텍스트 컨테이너 */
.hero-section .overlay {
	position: relative;
	z-index: 2;
	text-align: center;
	color: white;
	max-width: 1400px;
	padding: 0 20px;
}

.vertical-line{
	height:100px;
	width: 1px;
	color:white;
	margin:auto;
	background-color:white;
	margin-bottom:12px;
}

.line{
height:2px;
	width: 50px;
	color:white;
	margin:auto;
	background-color:white;
	margin-bottom:12px;
	margin-top:12px;
	
}

.hero-title{
	font-size:96px;
	font-weight: 800;
	color: #ffffff;
	line-height: 130%;
	margin-bottom: 16px;
 text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	
}



/* 타이틀 텍스트 */
.solution-title {
	font-size: 40px;
	font-weight: 800;
	color: #ffffff;
	line-height: 130%;
}

/* 서브 타이틀 텍스트 */
.solution-subtitle {
	font-size: 20px;
	font-weight: 500;
	color: #ffffff;
	line-height: 140%;
	word-break:keep-all;
}

/* 스크롤 아이콘 */
.hero-section img, .company-intro img {
	position: absolute;
	bottom: 40px;
	animation: bounce 2s infinite;
}

/* 스크롤 bounce 효과 */
@keyframes bounce {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}




.hero-sub-menu {
	position: absolute;
	left: 0;
	font-size: 20px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.5);
	text-align: left;
		cursor:pointer;
		
}

.hero-sub-menu div {
	margin-bottom: 40px;
	position: relative;
	padding-left: 25px; /* 선 + 여백 공간 확보 */
}


/* 공통 선 */
.hero-sub-menu div::before {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	height: 2px;
	background-color: rgba(255, 255, 255, 0.5);
}

/* 비활성 항목: 선 길이 16px */
.hero-sub-menu div::before {
	width: 16px;
}

/* 활성 항목: 선 길이 40px + 색상 강조 */
.hero-sub-menu .active {
	font-weight: 500;
	color: rgba(255, 255, 255, 1);
		padding-left: 50px; /* 선 + 여백 공간 확보 */
}

.hero-sub-menu .active::before {
	width: 40px;
	background-color: rgba(255, 255, 255, 1);
}


.background-video {
	
	    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%; /* 너비를 최소 100%로 설정 */
    min-height: 100%; /* 높이를 최소 100%로 설정 */
    width: auto;
    height: auto;
    transform: translate(-50%, -50%); /* 정확한 중앙 정렬 */
    object-fit: cover; /* 비디오의 가로세로 비율을 유지하면서 요소를 꽉 채움 */
    z-index: -1; /* 다른 콘텐츠보다 뒤에 위치하도록 */
	opacity: 0;
	transition: opacity 0.7s ease-in-out;
}

.background-video.active {
	opacity: 1;
}



@media(max-width:1280px){

		.hero-title{
			font-size:50px;
			
		}

	.solution-subtitle{
		font-size:18px;
		
	}

	.hero-section .overlay{
		max-width:600px;
		
	}
	

}


@media(max-width:768px){


	.hero-title{
font-weight: 800;
font-size: 28px;
line-height: 130%;
text-align: center;

			
	}

	.hero-sub-menu {

		top:80px;
		
	}

	.hero-sub-menu div {
	margin-bottom: 30px;
	}
	
}



.main-feature-section {
    position: relative;
    height: 100vh;
    background-color: #0a012b;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.feature-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%; /* 배경 이미지 비율 */
    transform: translate(-50%, -50%) !important;
    /* opacity: 0.15; */ /* 흐리게 처리해서 텍스트 강조 */
    z-index: 1;
	width:40%;
filter: blur(4px);
	  
	
}

.feature-text-wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1392px;
    padding: 0 40px;
    color: #fff;
}

.feature-title-part1,
.feature-title-part2 {
    font-size: 3.8rem;
    /* line-height: 1.3; */
    margin: 0;
	font-weight:700;
	
}

.feature-title-part1 {
    text-align: center;
    /* margin-bottom: 0.3em; */
}

.feature-title-part2 {
    text-align: center;
    margin-bottom: 1em;
}

.feature-description {
    text-align: center;
    font-size: 1.3rem !important;
    line-height: 1.6;
    
font-weight: 500;
font-size: 28px;
line-height: 140%;
text-align: center;
letter-spacing: -0.025em;

color: #FFFFFF;
	width:70%;
	margin:auto;
	    position: relative; /* 가상 요소의 위치 지정을 위해 필요 */
    padding:40px 40px; /* 브라켓이 텍스트와 겹치지 않도록 여백 추가 */

    
}


.feature-description::before,
.feature-description::after {
    content: ''; /* 가상 요소에 내용이 없음을 명시 */
    position: absolute;
    top: 50%; /* 세로 중앙 정렬 */
    transform: translateY(-50%); /* 정확한 세로 중앙 정렬 */
    width: 20px; /* 브라켓의 너비 */
    height: calc(100% - 20px); /* 브라켓의 높이 (텍스트 높이에 맞춰 조절) */
    border: 2px solid #FFFFFF; /* 브라켓의 색상 및 두께 */
}

.feature-description::before {
    left: 0; /* 왼쪽 브라켓 */
    border-right: none; /* 오른쪽 선 제거 */
    border-top-left-radius: 5px; /* 모서리 둥글게 (옵션) */
    border-bottom-left-radius: 5px; /* 모서리 둥글게 (옵션) */
}

.feature-description::after {
    right: 0; /* 오른쪽 브라켓 */
    border-left: none; /* 왼쪽 선 제거 */
    border-top-right-radius: 5px; /* 모서리 둥글게 (옵션) */
    border-bottom-right-radius: 5px; /* 모서리 둥글게 (옵션) */
}






/* .main-third-section {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url('/images/third_bg.png');
  background-size: cover;
  background-position: center;
  position: relative;
  padding: 100px 0;
  overflow: hidden;
 height:100vh;
} */


.main-performance-section {
   position: relative;
  padding: 100px 0;
    overflow: hidden;
    height: 100vh; /* 높이는 그대로 유지 */
    color: white; /* 텍스트 색상 */
    z-index: 1; /* z-index를 설정하여 콘텐츠가 오버레이 위에 오도록 합니다. */

	background-color:#0a012b;
	
}


/* 배경 비디오 스타일 */
.main-performance-section .background-video {
 position: absolute; 
	top:0;
	width: 100%;
height: 100%;
object-fit: cover; /* 비디오가 섹션을 꽉 채우도록 설정 */
z-index: -2; /* 가장 뒤에 배치 (그라디언트 오버레이보다 아래) */
    transform: rotate(260deg) scale(2.2); /* 250도 회전 후 1.5배 확대 (조정 가능) */
    transform-origin: center center; /* 회전 기준점을 중앙으로 설정 (기본값) */
}

/* 그라디언트 오버레이 스타일 */
.main-performance-section .gradient-overlay {
    position: absolute; 

	top:0;
	width: 100%;
    height: 100%;
        background-image: linear-gradient(rgb(0 0 0 / 50%), rgb(4 0 97 / 50%));
    z-index: -1; 
}


.performance-text-wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 40px 40px;
    color: #fff;
    text-align:center;
}

.performance-desc{
font-weight: 700;
font-size: 44px;
line-height: 140%;
text-align: center;
letter-spacing: -0.025em;
color:#111;
}

.performance-image-wrapper {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.performance-img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  z-index: 1;
  transition: opacity 0.4s ease-in-out;
  visibility: visible;
}

.performance-img.bg-img.active {
  opacity: 1;
}

.performance-img.top-img {
  opacity: 1 !important;
  z-index: 10 !important;
  margin-top: 25%;
  transition: none !important;
}



.peformance-title{

font-weight: 700;
font-size: 24px;
line-height: 140%;
background: linear-gradient(145.36deg, #3787FF 14.88%, #3AD4FF 92.64%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}




.main-case-section, .main-count-section{
    position: relative;
    height: 100vh;
  /*  background-image: url('/images/personal/areas_bg.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
	*/
	
    
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
      flex-direction: column;

	background-color:#0a012b;

	color:#fff;
	
        
}



    .hover-img-wrapper {
      position: relative;
      width: 480px;
      height: 480px;
      border-radius: 16px;
      overflow: hidden;
      cursor: pointer;
    }

.hover-img-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  transition: opacity 1s ease-out;
  display: block;
}

.hover-img-wrapper img.default {
  z-index: 1;
  opacity: 1;
}

.hover-img-wrapper img.hover {
  z-index: 2;
  opacity: 0;
}

.hover-img-wrapper:hover img.hover {
  opacity: 1;
}

.hover-img-wrapper:hover img.default {
  opacity: 0;
}
    
    
    





.main-service-section{
    position: relative;
    min-height: 70vh;
    background-color: #0a012b;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

    
    
    
    .try-demo{
    background-image:url('/images/personal/try-demo-bg.png');
    /* max-width:1520px; */
    width:100%;
    display:flex;
    min-height: 410px;
    align-items: center;
    justify-content: space-around;
	

		
	    /* 배경 이미지 관련 추가 */
    background-position: center center;   /* 배경 이미지를 중앙에 위치 */
    background-repeat: no-repeat;          /* 반복 금지 */
    background-size: cover;                /* 영역에 꽉 차도록 크기 조정 */
    border-radius:20px;
    margin-bottom:120px;
    }


.demo-sub{

font-weight: 700;
font-size: 24px;
line-height: 140%;
/* identical to box height, or 34px */
letter-spacing: -0.025em;

color: #FFFFFF;
}

.demo-intro{

font-family: 'Pretendard';
font-style: normal;
font-weight: 700;
font-size: 44px;
line-height: 140%;
/* or 62px */
letter-spacing: -0.025em;

color: #FFFFFF;
margin-bottom:24px;
	


}


.demo-btn{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 10px 12px 10px 20px;
gap: 10px;
width: 211px;
height: 64px;
background: #FFFFFF;
border-radius: 50px;

font-weight: 700;
font-size: 20px;
line-height: 140%;
/* identical to box height, or 28px */
letter-spacing: -0.025em;
color: #0084FF;
cursor:pointer;

}


.demo-btn:hover{
	background:#83D6FF;
	color:white;
	
}

.main-demo-section{
    position: relative;
    /* height: 100vh; */
    background-color: white;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}


/* 섹션 기본 */
.company-intro {
  position: relative;
  height: 50vh;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #000B2D;      /* 바탕 색 */
  overflow: hidden;
  color: #fff;
}

.company-intro::before {
  content: '';
  position: absolute;
  bottom: 0; /* 바닥 고정 */
  left: 50%;
  transform: translateX(-50%) scale(1);
  width: 100%;
  max-width: 1920px;
  height: auto;
  aspect-ratio: 1920 / 1080;

  background: url('/images/company_bg.png') bottom center / contain no-repeat;
  z-index: 0;

  animation: zoomFromBottom 20s ease-in-out infinite;
  transform-origin: bottom center;
  will-change: transform;
}

@keyframes zoomFromBottom {
  0% {
    transform: translateX(-50%) scale(1);
  }
  50% {
    transform: translateX(-50%) scale(1.05);
  }
  100% {
    transform: translateX(-50%) scale(1);
  }
}



/* 오버레이 텍스트는 위로 */
.company-intro .overlay {
  position: relative;
  z-index: 1;
  padding: 24px 32px;
}



.company-section {
	  background-image: url('/images/company/company-bg_1.png');
  background-repeat: no-repeat;       /* 반복하지 않음 */
  background-position: center center; /* 가운데 정렬 */
  background-size: cover;             /* 섹션 전체를 꽉 채움 */
  
  position: relative;
  overflow: hidden;
  padding: 100px 20px;
  text-align: center;
  height: 100vh;

  display: flex;
  flex-direction: column;
  justify-content: center;  /* 수직 중앙 정렬 */
  align-items: center;      /* 가로 중앙 정렬 */
}


.company-background {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  opacity: 0.15;
  pointer-events: none;
}

.company-background img {
  max-width: 100%;
  height: auto;
}

.company-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
}


.company-content h1 {
font-weight: 700;
font-size: 50px;
line-height: 140%;
text-align: center;
letter-spacing: -0.025em;
color: #FFFFFF;

  
}

.company-content .gradient-box {
  background: white; /* 흰색 네모 배경 */
 padding:0px 10px;
  display: inline-block;

  background-clip: padding-box; /* 배경 안 잘리도록 */
  position: relative;
}

/* 텍스트 그라디언트 적용 */
.company-content .gradient-box::before {
  content: "혁신과 창의성";
  background: linear-gradient(90deg, #007cf0, #00dfd8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;

  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 실제 텍스트는 투명 처리해서 ::before만 보이게 */
.company-content .gradient-box {
  color: transparent;
  position: relative;
}

.company-content p {
  max-width: 1400px;
font-weight: 500;
font-size: 20px;
line-height: 140%;
text-align: center;
letter-spacing: -0.025em;
color: #F5F5F5;
}




.company-service-section{
	min-height:100vh;
	height:auto;
	
		 background-image: url('/images/personal/areas_bg.png'); 
  background-size: cover; /* 이미지가 요소를 꽉 채우도록 설정 (일부가 잘릴 수 있음) */
    background-position: center center; /* 이미지를 요소의 중앙에 배치 */
    background-repeat: no-repeat; /* 이미지가 반복되지 않도록 설정 */                     
  
  display: flex;
  flex-direction: column;
  
/* 	background-color:#030B10;
	
	 background-image: url('/images/company_bg3.png');  배경 이미지 경로
  background-repeat: no-repeat;                      반복 안 함
  background-position: right center;                 오른쪽 중앙에 위치
  background-size: contain;                           이미지 크기 유지하며 섹션에 맞게 조정
   */
}



.company-service-text-wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 100px 40px 20px 40px;
    color: #fff;
    text-align:center;
}

.company-service-desc{
font-weight: 700;
font-size: 44px;
line-height: 140%;
text-align: center;
letter-spacing: -0.025em;

color: #000;

}

.company-service-title{

font-weight: 700;
font-size: 24px;
line-height: 140%;
background: linear-gradient(145.36deg, #3787FF 14.88%, #3AD4FF 92.64%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}



.slider-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
gap:10px;
min-height:330px;
	
}

.slide-container {
  overflow: hidden;
  width: 100%;
  /* max-width: 1400px; */
}

.slide-track {
  display: flex;
  transition: transform 0.5s ease-out; /* Smart animate + Ease out */
  gap:20px;
  align-items: center;
  justify-content: flex-end;
}
/* active인 카드 크기 크게, 비활성 카드는 작게 */
.slide-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 20px 40px;
  width: 560px; /* 기본 작게 */
  height: 280px;
  background: linear-gradient(135.11deg, rgba(255, 255, 255, 0.35) 4.44%, rgba(255, 255, 255, 0.14) 97.59%);
  backdrop-filter: blur(5px);
  border-radius: 40px;
  color: #fff;
  transition: all 0.5s ease; /* 크기 및 변화 부드럽게 */
  overflow: hidden;
  border:1px solid #fff;
}

.slide-card.active {
  width: 560px;  /* 크게 */
  height: 330px;
}

.slide-card:not(.active) p {
  display: none;
}


.slide-bar{
	max-width:1400px;
	height:2px;

	margin:auto;
	margin-top:2rem;

height: 4px;
background: linear-gradient(135.11deg, rgba(255, 255, 255, 0.35) 4.44%, rgba(255, 255, 255, 0.14) 97.59%);
backdrop-filter: blur(5px);
}

.slide-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background-color: #3787FF;
  transition: width 0.4s ease;
}



/* 슬라이드 이동 버튼 위치 조정 */
.company-service-text-wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 100px 40px 20px 40px;
  color: #fff;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  /* 상대적 위치 유지 */
}


/* 버튼 그룹을 감싸는 wrapper 생성 */
.slider-controls {
  position: absolute;
  right: 40px;
  top: 130px; /* Try Demo와 대표 기술 & 서비스 텍스트 높이에 맞게 조정 */
  display: flex;
  gap: 10px;
  z-index: 20;
}




.slide-card h6{
font-weight: 700;
font-size: 16px;
line-height: 140%;
}

.slide-card h3{
font-style: normal;
font-weight: 700;
font-size: 28px;
line-height: 140%;
letter-spacing: -0.025em;

color: #FFFFFF;

}

.slide-card p{
font-weight: 500;
font-size: 20px;
line-height: 140%;
letter-spacing: -0.025em;

color: #FFFFFF;

	
}

.slide-btn {
  background: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s;
  border:0px solid;
}

/* .slide-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
} */




.sub-nav{
	display:flex;
	padding: 11rem 12rem 0rem 12rem;
	justify-content: flex-end;
	gap:20px;
	
}



.owl-carousel {
	overflow: hidden;
}

.slide-box{
	width: 70%;height: 500px;display:flex;flex-direction: column;align-items: center;justify-content: center;
	position: relative;
	width: 100%;
	height: 500px;
	display: flex;
	border-radius: 20px;
		margin:auto;
	max-width:1520px;
}

.main-case-slide-1 {
	background-image: url('/images/personal/slide-1.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
	color: white;
}

.main-case-slide-2 {
	background-image: url('/images/personal/slide-2.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
	color: white;
}

.main-case-slide-3 {
	background-image: url('/images/personal/slide-3.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
	color: white;
}

.main-case-slide-4 {
	background-image: url('/images/personal/slide-4.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
	color: white;
}

.main-case-slide-5 {
	background-image: url('/images/personal/slide-5.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
	color: white;
}


.slide-title{
font-weight: 700;
font-size: 38px;
line-height: 140%;
letter-spacing: -0.025em;
color: #FFFFFF;
}


.slide-desc{
font-weight: 400;
font-size: 20px;
line-height: 140%;
text-align: center;
letter-spacing: -0.025em;
color: #F5F5F5;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}



@media (max-width: 768px) {

	.performance-desc{

font-weight: 700;
font-size: 20px;
line-height: 140%;

letter-spacing: -0.025em;


	}

	.main-pannel{
	display:flex;
	flex-direction: column;
	align-items: center;
		gap:10px !important;
	}
	
.slide-box{
	height:500px;
}

	.slide-title{
font-weight: 700;
font-size: 20px;
line-height: 140%;
/* or 28px */
text-align: center;
letter-spacing: -0.025em;

		
	}

	.centered-list li{
font-style: normal;
font-weight: 400;
font-size: 15px;
line-height: 140%;
/* or 21px */
letter-spacing: -0.025em;

color: #F5F5F5;

text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
text-align:left !important;
		

	}

	.areas-wrapper{
		display:flex;
		flex-direction:column;
		gap:10px !important;
	}

	.hover-img-wrapper{
		max-width:320px;
		max-height:320px;
		
	}
	
}




.centered-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center; /* li 자체를 가운데 정렬 */
    gap: 10px;
}

.centered-list li {
    display: block;
    position: relative;
    padding-left: 20px; /* 마커 위치 공간 */
    text-align: left;
    color: #f5f5f5;
}

.centered-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    color: white;
    font-size: 1.2em;
    line-height: 1.2;
}




.case-box{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0px;
gap: 10px;

width: auto;
min-height: 285px;

background: rgba(255, 255, 255, 0.7);
box-shadow: 0px 0px 12px #3787FF;
backdrop-filter: blur(5px);
border-radius: 40px;

	
}

.case-box .case-count{
font-weight: 700;
font-size: 96px;
line-height: 130%;
letter-spacing: -0.025em;

background: linear-gradient(145.36deg, #3787FF 14.88%, #3AD4FF 92.64%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;

}

.case-box .case-desc{
font-weight: 600;
font-size: 28px;
line-height: 140%;
letter-spacing: -0.025em;
color: #111111;

}


.case-desc p{
font-size:22px;
	font-weight:400;
}
	
	
	.service-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 30px;
  gap: 15px;
  width: 70%;
  background: linear-gradient(0deg, #FFFFFF, #FFFFFF),
              linear-gradient(135.11deg, rgba(255, 255, 255, 0.5) 4.44%, rgba(255, 255, 255, 0.2) 97.59%);
  box-shadow: 0px 0px 8px #3787FF;
  backdrop-filter: blur(5px);
  border-radius: 20px;
  margin: auto;
  transition: all 0.3s ease;
}

.service-box.active {
  background: linear-gradient(145.36deg, #3787FF 14.88%, #3AD4FF 92.64%);
}

.service-box .service-item:first-child {
	flex:0 0 100%;
}




.service-title {
  font-weight: 700;
  font-size: 24px;
  line-height: 140%;
  letter-spacing: -0.025em;
  color: #111111;
}


.service-title,
.service-eng-title,
.service-desc {
  transition: color 0.3s ease;
}


.service-eng-title{
	width:100%;
	display:flex;
	justify-content: space-between;
	align-items: center;
}


.service-box.active .service-title,
.service-box.active .service-eng-title,
.service-box.active .service-desc {
  color: #fff !important;
  	-webkit-text-fill-color:#ffffff;
}



.service-desc {
  margin-top: 10px;
  font-weight:500;
  font-size: 1.2rem;
	width:70%;
	
}



.go-site{
	    background-image: url('/images/company/company-bg3.png');
	    background-size: cover;
	    background-position: center center;
	    background-repeat: no-repeat;
	    max-width:1400px;
	    margin:auto;
	    margin-top:5rem;
	    margin-bottom:5rem;
	    padding:2rem;
	    border-radius:20px;
	    display:flex;
	    justify-content: space-between;
	    align-items: center;
	color:white;
	
}


.go-site .sub{
font-weight:700;	
font-size:28px;
}

.go-site .intro{
font-weight:600;	
	font-size:1.2rem;
	
}





.downloads-intro{
	    background-image: url('/images/header.png');
	    background-size: cover;
	    background-position: center center;
	    background-repeat: no-repeat;
	    height: 30vh;
	    display:flex;
	    flex-direction: row;
	    align-items: center;
	    justify-content: flex-start;
	    padding-left:150px;
	    padding-top: 69px;
}


.demo-title-wrap{
	    background-image: url('/images/demo-bg.png');
	    background-size: cover;
	    background-position: center center;
	    background-repeat: no-repeat;
	    height: 50vh;
	    display:none;
	    flex-direction: row;
	    align-items: center;
	    justify-content: center;
}



/* 769px ~ 1280px: 데스크톱 레이아웃 유지 + 좌우 여백 축소, 모바일 UI 숨김 */
@media (min-width: 932px) and (max-width: 1280px) {

  /* 상단 바 여백 축소 */
  .downloads-intro {
    padding-left:48px; /* 데스크톱(150px) 대비 좌우 여백 축소 */
    box-sizing: border-box;
  }

}




/* ======= 모바일 ======= */
@media (max-width: 932px) {
   /* 상단 바 여백 축소 */
  .downloads-intro {
    padding-left:16px; /* 데스크톱(150px) 대비 좌우 여백 축소 */
    box-sizing: border-box;
  }
}

.video-section-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.video-box {
  width: 440px;
  height: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0, 123, 255, 0.2);
  transition: transform 0.3s ease;
}

.video-box:hover {
  transform: translateY(-5px);
}

.video-container iframe {
  width: 100%;
  height: 248px; /* 16:9 비율 유지 */
  border-radius: 8px;
}

.video-box .text-gradient-deep-blue {
  font-size: 1.2rem;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  text-align: center;
	font-weight:700;
	
}

.video-box div:last-child {
  font-size: 1.2rem;
  text-align: center;
font-weight: 700;
font-size: 24px;
line-height: 140%;
/* identical to box height, or 34px */
letter-spacing: -0.025em;

color: #111111;

}

.solution-text-wrap {
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	background-color: transparent; /* 배경 지정 시 추가 */
}

.solution-text-line {
	display: inline-block;
	white-space: nowrap;
	animation: scrollLeft 20s linear infinite;
	font-size: 5vw;
	font-weight: 700 !important;
	color: #ECF7FF;
}

.solution-text-line span {
	display: inline-block;
	padding-right: 5vw; /* 간격 설정 */
font-weight: 700;

}
  
@keyframes scrollLeft {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}





/* contact */
/* 전체 컨테이너 */
.contact-section {
  max-width: 1000px;
  margin: 0 auto;
  padding: 60px 20px;
  font-family: 'Noto Sans KR', sans-serif;
  color: #000;
  text-align: center;
}

.contact-section .title {

font-weight: 700;
font-size: 38px;
line-height: 140%;
/* or 53px */
letter-spacing: -0.025em;

color: #111111;

}

.contact-section .subtitle {


font-weight: 500;
font-size: 20px;
line-height: 140%;
/* identical to box height, or 28px */
letter-spacing: -0.025em;

color: #505050;

}

.contact-section .required-info {

  text-align: right;


font-weight: 500;
font-size: 16px;
line-height: 140%;
/* or 22px */
letter-spacing: -0.025em;

color: #0084FF;


}

/* 폼 레이아웃 */
.contact-form {
  width: 100%;
}

.form-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.form-row.full-width {
  display: block;
}

.form-group {
  display: flex;
  flex-direction: column;
  width: 48%;
  text-align: left;
}

.form-row.full-width .form-group {
  width: 100%;
}

/* 라벨 */
.form-group label {

font-weight: 500;
font-size: 24px;
line-height: 140%;
/* identical to box height, or 34px */
display: flex;
align-items: center;
text-align: center;
letter-spacing: -0.025em;
margin-bottom:1rem;
color: #111111;
	
}

/* input, textarea 스타일 */
.form-group input,
.form-group textarea {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 1.2rem;
  color: #888;
  background-color: #f7f7f7;
  resize: none;
  transition: border-color 0.3s ease;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #bbb;
font-size: 1.2rem;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #007bff;
  background-color: #fff;
  color: #333;
}

/* 버튼 영역 */
.button-row {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.submit-btn {
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 14px 60px;
  font-size:1.2rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
	font-weight:700;
}

.submit-btn:hover {
  background-color: #0056b3;
}

/* 반응형 */
@media (max-width: 600px) {
  .form-row {
    flex-direction: column;
  }

  .form-group {
    width: 100%;
    margin-bottom: 16px;
  }
}




#loginModal .modal-content{
	padding:1rem 2rem;
	border-radius:20px;
	
}

#loginModalLabel{
	font-size:1.4rem;
	font-weight:600;
}





.main-case-section .container-fluid{
	max-width:1520px;	
}




/*profile modal*/

.profile-edit-modal {
	padding: 2rem;
}

#profileEditModal .modal-title {
	font-weight: 600;
	font-size: 38px;
	line-height: 140%;
	display: flex;
	letter-spacing: -0.025em;
	color: #111111;
	align-items: center;
}

.profile-edit-modal .form-group {
	width: 100%;
}


.profile-edit-modal .btn-primary{
	width:20%;

background: #0084FF;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
border-radius: 8px;


font-weight: 700;
font-size: 20px;
line-height: 140%;
letter-spacing: -0.025em;

color: #FFFFFF;


	
}


.profile-edit-modal #password{
	width:100%;
}



.profile-bottom{
	display:flex;
	justify-content: space-between;
}

.profile-bottom span:first-child {


font-weight: 700;
font-size: 20px;
line-height: 140%;
/* identical to box height, or 28px */
display: flex;
align-items: center;
text-align: center;
letter-spacing: -0.025em;

color: #0084FF;
	
}

.profile-bottom span:nth-child(2) {
font-weight: 500;
font-size: 16px;
line-height: 140%;
/* or 22px */
display: flex;
align-items: center;
text-align: center;
letter-spacing: -0.025em;

color: #505050;

}





@media(max-width:1280px){
	#profileEditModal .d-flex{
		flex-direction:column;
		
	}

	.profile-edit-modal .btn-primary{
		margin:0 !important;
		margin-top:0.5rem !important;
		width:100%;
		
	}

	.profile-edit-modal #password{
		width:100%;
		
	}

	.profile-bottom{
		flex-direction:column;
		justify-content:center;
		margin-top:2rem;
		border-top:solid 1px #eee;
		padding-top:2rem;
	}

	.profile-bottom span:first-child{
		font-size:1.2rem;
		
	}

	.profile-bottom span:nth-child(2){
		text-align:left;
	}

	.case-box .case-count{
		font-size:70px;
	}

	.case-box .case-desc{
		font-size:20px;
	}	
	.case-desc p{
font-size:18px;
	}
}







.main-demo-section{
    position: relative;
    /* height: 100vh; */
	    background-color: #0a012b;
	overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 150px;
}

.cases-wrapper{
width:90%;
}




.try-right {
  position: relative; /* 필요시 배경 기준을 위한 상대 위치 지정 */
  background: url('/images/personal/sqml-di.gif') 
              center center / contain no-repeat;
  width: 50%;     /* 영역 가로 */
	min-height:400px;
}



.download-section {
	display: flex;
	flex-direction: column;
	gap: 4rem;
}

.download-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

.download-title {
	font-weight: 700;
	font-size: 36px;
	line-height: 140%;
	letter-spacing: -0.025em;
	color: #111111;
}

.download-description {
	font-weight: 500;
	font-size: 20px;
	line-height: 140%;
	letter-spacing: -0.025em;
	color: #505050;
}

.download-section {
	display: flex;
	flex-direction: column;
	gap: 4rem;
}

.download-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

.download-button {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 14px 20px;
	gap: 8px;
	width: 180px;
	height: 57px;
	background: #0084FF;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
	border-radius: 50px;
	border: none;
	cursor: pointer;
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 140%; /* 약 28px */
	letter-spacing: -0.025em;
	color: #FFFFFF;
}

.download-icon {
	border-radius: 4px; /* 원하시면 조절 가능 */
	flex-shrink: 0; /* 크기 고정 */
}

.download-text {
	flex-grow: 0;
	user-select: none;
}








@media (max-width: 1280px) {
  /* 769px 이상 1280px 이하의 화면에 적용될 스타일 */
	.wrap-page{
		height:auto;
		
	}
  .cases-wrapper {
    gap: 5px !important;
    width: 90%;
  }
  
  .hover-img-wrapper {
    max-width: 320px;
  }

	.main-count-section{
		height:auto;
	padding:40px;
	}
  
  /* 1) Row를 가로 → 세로 스택으로 전환 */
  .count-wrapper {
               /* 가로배치 → 세로배치 */
               align-items: center;             /* 자식 폭을 100%로 늘릴 수 있게 */
               display: flex;
               max-width: 1280px;
               justify-content: center;
               flex-direction: column;
               align-content: flex-start;
  }

  /* 2) 상·하로 쌓인 두 컬럼을 모두 가로 100%로 확장 */
  .count-wrapper > .col-lg-5,
  .count-wrapper > .col-md-6 {
   max-width:1280px;
   width: 100%;
  }

  /* 3) 이미지 컬럼과 그리드 간 간격 확보 */
  .count-wrapper > .col-lg-5 {
    margin-bottom: 24px !important;
    width: 100%;
  }

  /* 4) 그림은 행의 가로폭에 맞춰 꽉 차게 */
  .count-wrapper picture,
  .count-wrapper img.img-fluid {
    width: 100%;
    height: auto;
    display: block;
  }

  /* 5) 2×2 케이스 그리드의 최대 폭을 적당히 제한(옵션) */
  .count-wrapper .col-md-6 .row.g-4 {
    max-width: 1200px;            /* 필요 시 880~1024px 사이로 조절 */
    /* margin-left: auto; */
    /* margin-right: auto; */
  }
  
.case-box{width: 100%;height: 100px !important;
		 }


	.try-demo{
	width:90%;
	padding:3rem;
	margin-bottom: 3rem;
	}

	.demo-intro{
		font-size:2rem;
	}

	.demo-left{
		width:40%;
	}
	.try-right{
		width:50%;
	}

	.go-site{
		width:90%;
	}
		.service-box{
		width:90%;
	}

	.solution-intro-1{
		display:flex;
		flex-direction:column;
	}

	.solution-intro-1 .intro-item{
		width:100%;
		
	}

	.certification-content{
		flex-direction:column;

	}

	.certification-content div{
		width:100%;
	}

	.slide{
		flex-direction:column;
	}

	.slide .slide-left, .slide .slide-right{
		width:100%;
		
	}

.solution-video-container{
	flex-direction:column;
	
}

	.video-title-wrapper{
		width:100% !important;
	}

	.icp-frame{
		display:none;
		
	}

	
}







/* ===== 768px 미만(모바일) ===== */
@media (max-width: 768px) {
	
	
	.wrap-page{
		min-height:100vh;
		height:auto;
	}
	.solution-title {
		font-size: 2.5rem;
	}
	.solution-subtitle {
		font-size: 1rem;
	}

	.main-case-section, .main-count-section{
	height:auto !important;
		padding-bottom:5rem;
	}


.main-feature-section {
    /* 100vh 고정 대신 가변 + 최소 높이로 안전하게 */
    height: auto;
    min-height: 100vh;
    padding: 64px 16px;          /* 위아래 여유 */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 아이콘을 배경처럼 꽉 차게: 컨테이너를 덮는 이미지로 처리 */
  .feature-icon {
    position: absolute;
    inset: 0;
    /* top:0; right:0; bottom:0; left:0 */
    width: 100%;
    height: 100%;
    transform: none !important;  /* 중앙 이동 해제 */
    object-fit: cover;           /* 비율 유지한 채로 꽉 채우기 */
    filter: blur(3px);           /* 배경 느낌만 남기기(필요 시 조정/제거) */
    opacity: 0.35;               /* 텍스트 대비 확보 */
    z-index: 1;
	  margin:auto;
  }

  .feature-text-wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 680px;            /* 모바일에서 과도한 폭 제한 */
    padding: 0 12px;
    text-align: center;
    color: #fff;
  }

  /* 타이틀 가독성/반응형 크기 조정 */
  .feature-title-part1,
  .feature-title-part2 {
    /* 1.6rem ~ 2.2rem 사이로 반응형 축소 */
    font-size: clamp(1.6rem, 5vw, 2.2rem);
    line-height: 1.25;
    margin: 0;
    word-break: keep-all;        /* 한국어 줄바꿈 자연스럽게 */
  }

  .feature-title-part2 {
    margin-top: 0.25em;
    margin-bottom: 0.75em;
  }

  /* 본문 가독성/폭 조정 + 브라켓 제거 */
  .feature-description {
    width: 100%;
    margin: 0 auto;
    padding: 20px 16px;
   font-size:1.2rem !important;
    line-height: 1.3;
    letter-spacing: -0.015em;    /* 모바일에서는 살짝 완화 */
	  text-align:left;
	  
  }

  /* 모바일에서는 [ ] 브라켓 라인 제거 */
  .feature-description::before,
  .feature-description::after {
    content: none !important;
    display: none !important;
  }
  
  
  
  .try-demo {
    max-width: 90%;
    /* width: 100%; */
    min-height: auto;          /* 고정 높이 해제 */
    padding: 32px 16px;        /* 내부 여백 */
    display: flex;
    flex-direction: column;    /* 세로 배치 */
    align-items: center;       /* 중앙 정렬 */
    justify-content: center;
    gap: 16px;                 /* 요소 간격 */
	
  }

  /* 오른쪽 이미지는 숨김 */
  .try-demo .try-right {
    display: none !important;
  }

  /* 텍스트 영역 폭/정렬 */
  .try-demo .demo-left {
    width: 100%;
    max-width: 560px;          /* 모바일에서 적당한 텍스트 폭 */
    text-align: center;        /* 가운데 정렬(왼쪽 정렬 원하시면 left로 변경) */
    margin: 0 auto;
	  
  }

  /* 서브 타이틀 크기 조정 */
  .demo-sub{
    font-weight: 700;
    font-size: clamp(0.95rem, 3.6vw, 1.125rem); /* 15~18px 정도 */
    line-height: 1.4;
    letter-spacing: -0.015em;
  }

  /* 메인 타이틀 크기 조정 */
  .demo-intro{
    font-weight: 700;
    font-size: clamp(1.25rem, 6vw, 1.75rem);    /* 20~28px 정도 */
    line-height: 1.35;
    letter-spacing: -0.02em;
    margin: 6px 0 14px;
  }

  /* 버튼 가로폭/높이 조정 */
  .demo-btn{
    width: auto;               /* 내용에 맞게 */
    height: 52px;              /* 기존 64px → 52px로 축소 */
    padding: 10px 16px;
    font-size: 1rem;           /* 16px 근사 */
    gap: 8px;
    border-radius: 40px;       /* 비율 유지 */
  }
  

  /* 버튼 안 아이콘 이미지가 너무 크면 축소 */
  .demo-btn img{
    width: 20px;
    height: 20px;
  }

.main-demo-section {
		min-height:auto !important;
	padding:3rem 0rem;
}


	.cases-wrapper{
		display:flex;
		flex-direction:column;
		
	}
	
	
	.case-box .case-count{

font-weight: 700;
font-size: 40px;
line-height: 130%;
/* identical to box height, or 52px */
letter-spacing: -0.025em;

	}

	.case-box .case-desc{

font-weight: 600;
font-size: 1rem;
line-height: 140%;
/* identical to box height, or 20px */
text-align: center;
letter-spacing: -0.025em;

color: #111111;

	}
	
	
	
		/*회사 소개*/

	.company-intro { 
  position: relative; 
  overflow: hidden; /* 바깥으로 넘치는 부분 숨김(권장) */
  z-index: 0;
}

.company-intro::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scale(1);
  width: 150%;
  height: auto;
  aspect-ratio: 1920 / 1080;

  /* ✅ contain → cover 로 변경 (필수) */
  background: url('/images/company_bg.png') bottom center / cover no-repeat;

  z-index: 0;
  animation: zoomFromBottom 20s ease-in-out infinite;
  transform-origin: bottom center;
  will-change: transform;
}



	.company-content h1{
		font-size:2rem;
	}

	.service-box{
		width:90%;
		
	}

	.go-site{
		flex-direction:column;
		display:flex;
	}

	.go-site-left{
		text-align:center;
		
	}

	.go-site-left .sub{
		font-size:1.5rem;
		word-break:keep-all;
	}

	.go-site-left .intro{
		margin-top:1rem;
		font-size:1.3rem;
		word-break:keep-all;
	}

	.go-site-right{
	display:flex;
		
	}
	.go-site-right img{
		width:70%;
		margin:auto;
		
	}
	
		
	.icp-frame{
		display:none;
	}
	.slide-top-wrapper{
		flex-direction:column;
	
	}

	.title-sub{
		text-align:center;
		
	}


.slide-controls {/* display:none !important; */margin-top:1rem;display:flex;
				
				gap:10px !important;}


	
	.icp-item{
		flex-direction:column;
		
	}

	.icp-item *{
		width:100% !important;
		
	}

	.solution-video-container{
		height:auto !important;
		
	}


	.video-section-wrapper{
		flex-direction:column;
		
	}

	.video-box{
		width:100%;
		
	}

	.company-service-title{
		font-size:1rem;
	}
	.company-service-desc{
		font-size:1.5rem;
		
	}

	.download-row{
		flex-direction:column;
		
	}

	.download-title{
		font-size: 1.3rem;
		text-align:center;
	}

	.download-description{
		font-size:1rem;
		text-align:center;
		word-break:keep-all;
		
	}

	.download-button{
		height:50px;
		
	}

	.contact-section .title{
		font-size:1.5rem;
		
	}

	.contact-section .subtitle{
		font-size:1rem;
		word-break:keep-all;
		
	}

	.form-group label{
		font-size:1.3rem;
	}


	.scrollable-panel{
		margin-top:40px;
	}
	
}






/* application case 이수빈*/
 .content-box {
      display: flex;
      justify-content: space-between;
      align-items: stretch;
      gap: 20px;
      max-width: 1520px;
      width: 100%;
      margin: 0 auto;
      padding: 0 16px;
      flex-wrap: wrap;
    }

    .left-image-box {
      position: relative;
      width: 588px;
      height: 588px;
      border-radius: 40px;
      box-shadow: 0 0 15px rgba(55, 135, 255, 1);
      background: url("/images/personal/ac_img.png") center / cover no-repeat;
      backdrop-filter: blur(5px);
      border: 2px solid transparent;
      border: linear-gradient(138.66deg, rgba(255,255,255,0.46), rgba(255,255,255,0.35)) 1;
      flex-shrink: 0;
    }

    .left-image-box .text-overlay {
      position: absolute;
      bottom: 40px;
      left: calc(50% - 100px);
      transform: translateX(-50%);
      color: #fff;
      font-family: "Raleway-Bold", sans-serif;
      font-size: clamp(18px, 3.5vw, 38px);
      text-align: left;
      font-weight: 700;
    }

    .right-info-box {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      flex: 1;
    }

    .info-card {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-radius: 40px;
      background-color:white;
      box-shadow: 0 0 12px rgba(55, 135, 255, 1);
      backdrop-filter: blur(5px);
      padding: 20px;
      text-align: center;
    }

    .info-card .value {
      font-size: clamp(36px, 6vw, 76px);
      font-weight: 700;
      font-family: "Pretendard-Bold", sans-serif;
      background: linear-gradient(145.36deg, #3787ff 0%, #3ad4ff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .info-card .label {
      font-size: clamp(14px, 3.5vw, 24px);
      font-weight: 600;
      color: #000000;
    }

    .info-card .label span {
      display: block;
    }

    .info-card .label .sub {
      font-size: clamp(12px, 3vw, 20px);
      font-weight: 400;
    }

    @media (max-width: 1023px) {
  .content-box {
    flex-direction: column;
    align-items: center;
  }

  .left-image-box,
  .right-info-box {
    width: 100%;
    max-width: 588px; 
    margin: 0 auto;
  }
  .ac_img_box{
    height: 285px;
  }

  .right-info-box {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .info-card {
    width: 100%;
  }
    }

    
    
    

    
    .icp-wrapper {
	position: relative;
}

.icp-gradient-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 111px;

	background: linear-gradient(180deg, rgba(0, 132, 255, 0) 42.79%, #0084FF 120%);
	z-index: 10;
	pointer-events: none;
}



.video-upload-wrapper form,
.video-upload-wrapper input[type=file] {
    pointer-events: none;
}




.icp-item img.icp-img{
border-radius:20px;
}


/* 우측 영역 컨테이너 */
.usecase-preview {
    position: relative; /* 메뉴를 내부에서 절대 위치시킬 수 있도록 */
    overflow: hidden;
    flex: 0 0 70%;
}

.usecase-preview img,
.usecase-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
 height: 500px;
    border-radius: 20px;
}

.usecase-preview video {
	object-position: center bottom;
	max-width:1200px;
	margin:auto;	
}

/* 메뉴 오버레이 */
.usecase-menu {
    position: absolute;
    bottom: 15px;  /* 하단에서 15px 위 */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    background: rgba(255, 255, 255, 0.42);
    border-radius: 50px;
    padding: 10px;
    font-size: 16px;
    align-items: center;
    justify-content: center;
}

.usecase-menu .btn {
    cursor: pointer;
    padding: 0px 15px;
    background: #fff;
    border-radius: 50px;
    white-space: nowrap;   /* 줄바꿈 방지 */
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 140%;
    letter-spacing: -0.025em;
    color: #505050;
}

.usecase-menu .btn:hover{
	color:#0084FF;
}


.usecase-menu .btn.active{
background:#0084FF;
color:#fff;
font-weight:700;
}

/* 활성화 버튼 스타일 */
.usecase-menu .white-btn.active {
    background: #0084FF;
    color: #fff;
}

/* 반응형 */
@media (max-width: 991.98px) {
    .usecase-preview {
        flex: 1;
        width: 100%;
    }

    .usecase-menu {
        flex-wrap: wrap; /* 모바일에서는 줄바꿈 허용 */
        font-size: 14px;
        bottom: 10px;
        gap: 6px;
        padding: 6px 10px;
		width:90%;
		
    }

    .usecase-menu .white-btn {
        min-width: auto;
        padding: 5px 10px;
    }
}

/* 
#previewImage {
    opacity: 1; 초기 상태
    transition: opacity 0.4s ease-in-out;
}
#previewImage.fade-out {
    opacity: 0;
}

 */
 
 
.section-block.bg-sky{
	background-color:#DBEEFF;
}




.application-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 30px 10px;
	gap: 20px;
	background: linear-gradient(0deg, #FFFFFF, #FFFFFF), linear-gradient(135.11deg, rgba(255, 255, 255, 0.5) 4.44%,
		rgba(170, 232, 255, 0.2) 97.59%);
	box-shadow: 4px 4px 8px rgba(0, 132, 255, 0.4);
	border-radius: 20px;
	height: 100%; /* ✅ 카드 높이 동일하게 */
}

.application-card .title {
	font-weight: 600;
	font-size: 24px;
	line-height: 140%;
	text-align: center;
	letter-spacing: -0.025em;
	color: #111;
}

.application-card .info {
	font-weight: 400;
	font-size: 18px;
	line-height: 140%;
	letter-spacing: -0.025em;
	color: #111111;
	text-align: center;
}


.application-card img{
	width:74px;
	
}




.test-result-img {
  background-image: url('/images/personal/test_result.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 100%;

  height: 0;
  padding-bottom: 60%;
}





 .feature-card {
            border: none;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
            transition: transform 0.2s ease-in-out;
        }

        .card-badge {
            font-size: 0.9rem;
            font-weight: bold;
            padding: 0.6em 0.6em;
            background-color: #0084FF !important; /* 이미지와 유사한 뱃지 색상 */
            position: absolute;
            top: 0;
            right: 0;
            transform: translate(30%, -30%); /* 모서리에 걸치도록 위치 조정 */
            font-weight: 600;
            font-size: 24px;
            width:60px;
            height:60px;
            display:flex;
            align-items: center;
            justify-content: center;
        }

.card-badge img{
	width: 30px;
	height: 30px;
}
        .card-icon {
            font-size: 2rem;
            color: #0084FF; /* 아이콘 색상 */
            position: absolute;
            top: 1rem;
            right: 1rem;
        }



@media(max-width:1280px){

.test-result-img{
	padding-bottom:40%;
	margin:auto;
	max-width:unset;
	margin-top:50px;

}

}


@media(max-width:768px){
.test-result-img{
	padding-bottom:100%;
	margin:auto;
	max-width:unset;
	margin-top:10px;

}
}