@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Quantico:ital,wght@0,400;0,700;1,400;1,700&display=swap');

@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-weight: 100; /* Thin */
	src: url('/fonts/Pretendard-Thin.woff') format('opentype');
}

@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-weight: 200; /* ExtraLight */
	src: url('/fonts/Pretendard-ExtraLight.woff') format('opentype');
}

@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-weight: 300; /* Light */
	src: url('/fonts/Pretendard-Light.woff') format('opentype');
}

@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-weight: 400; /* Regular */
	src: url('/fonts/Pretendard-Regular.woff') format('opentype');
}

@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-weight: 500; /* Medium */
	src: url('/fonts/Pretendard-Medium.woff') format('opentype');
}

@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-weight: 600; /* SemiBold */
	src: url('/fonts/Pretendard-SemiBold.woff') format('opentype');
}

@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-weight: 700; /* Bold */
	src: url('/fonts/Pretendard-Bold.woff') format('opentype');
}

@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-weight: 800; /* ExtraBold */
	src: url('/fonts/Pretendard-ExtraBold.woff') format('opentype');
}

@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-weight: 900; /* Black */
	src: url('/fonts/Pretendard-Black.woff') format('opentype');
}

* {
	font-family: 'Pretendard';
	font-weight: 400;
	margin: 0;
	box-sizing: border-box;
	
		line-height: 140%;
	letter-spacing: -0.025em;
}

h1 {
	font-size: 3em;
}

h2 {
	font-size: 2.25em;
}

h3 {
	font-size: 1.75em;
}

h4 {
	font-size: 1.25em;
}

h5 {
	font-size: 1em;
}

h6 {
	font-size: 0.875em;
}

.fw-500 {
	font-weight: 500;
}

.fw-600 {
	font-weight: 600;
}

.fw-700 {
	font-weight: 700;
}


a{
	text-decoration: none !important;
}



.gradient-title {
	font-family: 'Quantico';
	font-weight: 800; /* 굵게 */
	background: linear-gradient(90deg, #8041FF 0%, #83D6FF 40%, #cfefff 100%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	letter-spacing: 0.5px;
}

.m-top-48px{
	margin-top:48px;
}

.mtop0 {
	margin-top: 0 !important;
}

.mtop1 {
	margin-top: 1rem !important;
}

.mtop2 {
	margin-top: 2rem !important;
}

.mtop3 {
	margin-top: 3rem !important;
}

.mtop5 {
	margin-top: 5rem !important;
}

.m-bottom-1 {
	margin-bottom: 1rem !important;
}

.m-bottom-2 {
	margin-bottom: 2rem !important;
}

.m-bottom-3 {
	margin-bottom: 3rem !important;
}

.m-bottom-4 {
	margin-bottom: 4rem !important;
}

.m-bottom-5 {
	margin-bottom: 5rem !important;
}

.padding-top-5rem {
	padding-top: 5rem !important;
}

.line-wrapper {
	width: 100%;
	display: flex;
	justify-content: center;
	margin: 3rem 0;
}

.bottom-line {
	width: 100%;
	max-width: 100%;
	border-bottom: 1px solid #D9D9D9;
}

.bottom-line.blue {
	width: 100%;
	max-width: 100%;
	height: 2px;
	background: linear-gradient(to right, #3787FF, #3AD4FF);
}

@media ( min-width : 1600px) {
	.line-wrapper {
		padding: 0 12rem;
	}
}

/* flex 기본 */
.fl {
	display: flex;
}

.jc-center {
	justify-content: center;
}

.jc-between {
	justify-content: space-between;
}

.jc-around {
	justify-content: space-around;
}

.jc-start {
	justify-content: flex-start;
}

.jc-end {
	justify-content: flex-end;
}

.ai-center {
	align-items: center;
}

.ai-start {
	align-items: flex-start !important;
}

.ai-end {
	align-items: flex-end;
}

.wrap {
	flex-wrap: wrap;
}

/* 간격 유틸리티 (gap: 0.5rem ~ 5rem) */
.gap-1 {
	gap: 1rem;
}

.gap-2 {
	gap: 2rem;
}

.gap-3 {
	gap: 3rem;
}

.gap-4 {
	gap: 4rem;
}

.gap-5 {
	gap: 5rem;
}

/* 반응형 column 전환용 */
.col-on-mobile {
	flex-direction: row;
}

@media ( max-width : 768px) {
	.col-on-mobile {
		flex-direction: column;
	}
}

.image-row img {
	width: calc(( 100% - 5rem)/6); /* gap 4rem 이면 총 5개 간격 → 약 5rem */
	max-width: 190px; /* 너무 커지지 않게 제한 */
	height: auto;
}

@media ( max-width : 992px) {
	.image-row img {
		width: calc(( 100% - 2rem)/3);
	}
}

@media ( max-width : 600px) {
	.image-row img {
		width: calc(( 100% - 1rem)/2);
	}
}

/* 공통 테이블 wrapper */
.table-container {
	padding: 1rem;
	border-radius: 12px;
	overflow-x: auto;
}

/* 재활용 가능한 테이블 베이스 스타일 */
table {
	width: 100%;
	border-collapse: collapse;
	font-family: 'Pretendard', sans-serif;
	font-size: 14px;
	color: #111;
	background-color: #fff;
	border-radius: 8px;
	overflow: hidden;
}

/* 테이블 스타일: purple header */
.purple-table thead {
/* 	background-color: #f3ebff; */
	color: #333;
}

/* 추후 확장 가능 예시
.gray-table thead { background-color: #f0f0f0; }
.blue-table thead { background-color: #e0f3ff; }
*/
.purple-table th {
	font-weight: 500;
	font-size: 18px;
	line-height: 140%;
	letter-spacing: -0.025em;
	color: #505050;
}

.purple-table td {
	font-weight: 500;
	font-size: 18px;
	line-height: 140%;
	letter-spacing: -0.025em;
	color: #111111;
}

table th:first-child, table td:first-child {
	width: 48px;
	text-align: center;
}

table th, table td {
	padding: 12px 16px;
	text-align: center;
	border-bottom: 1px solid #e0e0e0;
}

table th:first-child, table td:first-child {
	width: 48px;
	text-align: center;
}

@media (max-width:1280px){

	.purple-table td{
		font-size:1rem;
	}
	
}



/* 체크박스 */
.custom-checkbox {
	appearance: none;
	width: 16px;
	height: 16px;
	border: 2px solid #999;
	border-radius: 4px;
	background-color: #fff;
	cursor: pointer;
	position: relative;
	transition: background 0.2s ease;
}


.custom-checkbox:checked {
	background-color: #0084FF;
	border-color: #0084FF;
}

.custom-checkbox:checked::after {
	content: '';
	position: absolute;
	top: 0px;
	left: 4px;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}


/* 상태 원형 뱃지 */
.status-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	margin-right: 6px;
	vertical-align: middle;
}

.status-dot.success {
	background-color: #28a745;
}

.status-dot.error {
	background-color: #dc3545;
}

.ta-left{
	text-align:left;
}


.gradient-bg-blue{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 8px 12px;
gap: 10px;

background: linear-gradient(145.36deg, #3787FF 14.88%, #3AD4FF 92.64%);
border-radius: 8px;
border:solid 0px;
color:white;
	
}

.text-gradient-white-blue {
  /* 그라디언트 배경 설정 */
  background: linear-gradient(to right, #FFFFFF, #9CEAFF);
  
  /* 텍스트에 배경을 클리핑 */
  -webkit-background-clip: text;
  background-clip: text; /* 표준 속성 (크로스 브라우징) */
  
  /* 텍스트 채우기 색상을 투명하게 */
  -webkit-text-fill-color: transparent;
  color: transparent; /* 표준 속성 (크로스 브라우징) */
  
  /* 필요한 경우 텍스트 렌더링 최적화 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


.text-gradient-light-dark-blue {
  /* 그라디언트 배경 설정 */
  background: linear-gradient(to right, #9CEAFF, #33A3FF);
  
  /* 텍스트에 배경을 클리핑 */
  -webkit-background-clip: text;
  background-clip: text; /* 표준 속성 */
  
  /* 텍스트 채우기 색상을 투명하게 */
  -webkit-text-fill-color: transparent;
  color: transparent; /* 표준 속성 */
  
  /* 필요한 경우 텍스트 렌더링 최적화 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}




.text-gradient-deep-blue{
    background: linear-gradient(to right top, #3787FF, #3AD4FF); /* 좌하단에서 우상단으로 (대각선) */
    -webkit-background-clip: text; /* 웹킷 기반 브라우저 (Chrome, Safari 등) */
    background-clip: text;
    -webkit-text-fill-color: transparent; /* 웹킷 기반 브라우저 */
    color: transparent; /* 일반 브라우저 (fallback) */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-weight:700;
    
}

/* 텍스트의 베이스라인을 기준으로 애니메이션 시작 */
.animate-from-bottom {
  opacity: 0;
  transform: translateY(100%); /* 요소 높이만큼 아래에서 시작 */
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  transform-origin: bottom; /* 변형 기준점을 하단(베이스라인에 가깝게)으로 지정 */
}

.animate-from-bottom.visible {
  opacity: 1;
  transform: translateY(0);
}




.blurred-panel{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 0px 14px;
	/* gap: 14px; */
	width: 211px;
	height: 56px;
	background: linear-gradient(135.11deg, rgba(255, 255, 255, 0.25) 4.44%, rgba(255, 255, 255, 0.1) 97.59%);
	backdrop-filter: blur(5px);
	border-radius: 50px;
	border:1px solid white;
	cursor:pointer;
}

.blurred-panel:hover{

background: linear-gradient(145.36deg, #3787FF 14.88%, #3AD4FF 92.64%);
backdrop-filter: blur(5px);

}




.blue-line-blur-box{
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;
}






.icon-blue-ellipse::before {
  content: url('/images/icon/blue_Ellipse.svg');
  display: inline-block;
  vertical-align: middle; /* 텍스트와 아이콘 수직 정렬 */
  margin-right: 5px; /* 아이콘과 텍스트 간 간격 */
}



#tryDemo a{
	color:white;
	font-weight:600;
}



.auth-option {
	font-weight: 700;
	font-size: 16px;
	line-height: 140%;
	letter-spacing: -0.025em;
	color: #3787FF;
	background-color: white;
	padding: 7px 10px;
	border-radius: 5px;
}






.owl-dot.active span{
	background-color:#0084FF !important;
}

.owl-dot span{
	background-color:#3787FF;
	opacity:40%;
}






/*footer*/
footer {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  background: #0C1037; /* 이미지처럼 더 진한 남색으로 조정 */
  padding: 40px 150px;
  color: white;
  font-size: 14px;
  line-height: 1.6;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  align-content: center;
}

.footer-left {
  flex: 1;
  min-width: 280px;
  margin-bottom: 20px;
}

.footer-policy span {
  margin-right: 20px;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 10px;
}

.footer-contact p {
  margin: 2px 0;
}

.footer-right {
  text-align: right;
  min-width: 280px;
  flex: 1;
  display:flex;
  align-items: flex-end;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}

.footer-right .footer-logo {
  height: 30px;
  margin-bottom: 10px;
}

.footer-right p {
  font-size: 12px;
  margin: 0;
}


.footer-contact p span{
	color:#ADADAD;
	
}

p.copyright{
	color:#ADADAD;
}

/* 반응형 */
@media (max-width: 768px) {
  footer {
    flex-direction: column;
    text-align: center;
    align-items: center;
	  padding:30px 30px;
  }

  .footer-left, .footer-right {
    text-align: center;
	  width:100%;
	  
  }

	.footer-right{
		display:flex;
		align-items: flex-start;
	}

  .footer-policy span {
    display: block;
    margin-bottom: 5px;
  }

  .footer-right .footer-logo {
    margin: 20px 0 10px;
  }

	.footer-policy{
		display:flex;
		justify-content: flex-start;
	}

	 .footer-contact{
		 display:flex;
		 flex-direction:column;
		 align-items: flex-start;
		}


	p.copyright{
	color:#ADADAD;
		text-align:left;
		word-break:keep-all;
		
}
}









.scroll-indicator {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 14px;
}
.scroll-indicator .scroll-mouse {
  width: 24px;
  height: 40px;
  border: 1px solid white;
  border-radius: 50px;
}
.scroll-indicator .scroll-dot {
  width: 6px;
  height: 6px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  animation: scroll-dot-move 1.5s infinite ease-in-out;
}
@keyframes scroll-dot-move {
  0% { top: 30px; opacity: 1; }
  50% { top: 40px; opacity: 0.5; }
  100% { top: 30px; opacity: 1; }
}





.common-sub-title{
		font-size:20px !important;
	font-weight: 700 !important;
}

.common-main-copy{
	font-size:38px !important;
	color:#111 !important;
	font-weight: 700 !important;
	word-break:keep-all;
}

.common-main-copy.white{
	color:#fff !important;
}

.common-info{
		font-size:20px !important;
	color:#505050 !important;
	font-weight: 500 !important;
}

@media(max-width:768px){

	.common-sub-title{
		font-size:16px !important;
	font-weight: 700 !important;
}

.common-main-copy{
	font-size:24px !important;
	color:#111 !important;
	font-weight: 700 !important;
	word-break:keep-all;
}


.common-info{
		font-size:16px !important;
}

	
}


.text-right{
	text-align:right;
}




.padding-horizontal-8{
	padding:0px 8px;
}

.blue-circle{
	background-color:#0084FF;
	padding:5px 15px;
	border-radius:50%;
	color:white;
	font-weight:600;
	margin-right:12px;
}





/* 화살표 공통 스타일 */
.owl-nav button.owl-prev,
.owl-nav button.owl-next {
  width: 42px;
  height: 42px;
  border-radius: 36px;
  background: #FFFFFF !important;
  border: 1.3125px solid #FFFFFF !important;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
  transition: background 0.3s ease;
	border-radius:50% !important;
color:#0084FF !important;
}

/* 왼쪽(Prev) 위치 */
.owl-nav button.owl-prev {
  left: 5%; /* 위치 조정 */
}

/* 오른쪽(Next) 위치 */
.owl-nav button.owl-next {
  right: 5%; /* 위치 조정 */
}


/* Prev/Next 버튼 안의 span 크기 조절 */
.owl-nav button span {
  font-size: 40px; /* 원하는 크기로 조절 (예: 24~40px) */
  color: #0084FF;  /* 글자 색상도 조절 가능 */
  line-height: 0.9;
}




@media(max-width:768px){
/* 왼쪽(Prev) 위치 */
.owl-nav button.owl-prev {
  left: 0%; /* 위치 조정 */
}

/* 오른쪽(Next) 위치 */
.owl-nav button.owl-next {
  right: 0%; /* 위치 조정 */
}
	
}



.h-500px{
	height:500px;
}






.white-btn {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 8px 12px;
	gap: 4px;
	background: #FFFFFF;
	border: 1px solid #0084FF;
	border-radius: 25px;
}

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



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


.fw-24{
	font-weight: 700;
	font-size: 24px;
	color: #111111;
}

.fw-20{
	font-weight: 600;
	font-size: 20px;
	color: #111111;
}



@media(max-width:768px){

	.fw-24{
		font-size:18px;
	}
	
	
.fw-20{
	font-size: 16px;
}

	
}


.col-lg-6-custom{
	width:100%;
}