@charset "UTF-8";

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

@keyframes colorchange {
	from {
		background-color: black;
	}
	to {
		background-color: #2A8EBF;
	}
}

body
{
	/*
	width : 100%;
	height : 100%;
	*/
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}


*
{
	font-family: 'Pretendard';
	box-sizing: border-box;
}

a
{
	color : white;
	text-decoration : none;
}

hr
{
	border: 1px solid #E7F2FF;
}

li
{
	position: relative;
	width: 100%;
}

/* 2026-01-28 추가 ------------------------------------------------------ */
.BtnShortcut 
{
	width: 40%;
	height: 70%;
	background-color: black;
	border: none;
	border-radius: 50px;
	color: white;
	font-size: 12pt;
	font-weight: 300;
	transition: background-color 0.3s, font-weight 0.3s, color 0.3s;
}

.BtnShortcut:hover 
{
	background-color: white;
	font-weight: 600;
/*	color: #2A8EBF; */
/*	color: #0C1026; */
/*	color: #097EFF; */
/*	color: #7DB2FF; */
/*	color: #328BE3; */
	color: #4287F8;
	cursor: pointer;
}

.ProdList 
{
	width: 25%;
	height: 400px;
	min-width: 320px;
	min-height: 400px;
	max-width: 320px;
	max-height: 400px;
/*	border: 2px solid #E2E2E2; */
	outline: none;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0px 0px 20px #BCBCBC;
	background-color: white;
	transition: background-color 0.3s, /*border 0.3s,*/ outline 0.3s;
}

.ProdList:hover 
{
/*	background-color: #2A8EBF;
	border: 5px solid #2A8EBF;*/
/*	background-color: #0C1026;
	border: 5px solid #0C1026; */
/*	background-color: #097EFF;
	border: 5px solid #097EFF; */
/*	background-color: #7DB2FF;
	border: 5px solid #7DB2FF; */
/*	background-color: #328BE3;
	border: 5px solid #328BE3; */
	background-color: #4287F8;
/*	border: none; */
	outline: 5px solid #4287F8;
	color: white;
}

.ProdImg
{
	width: 100%;
	height: 40%;
	box-shadow: 0px 3px 10px #B8B8B8;
}

.ProdList .ProdImg {
  transition: box-shadow 0.3s, transform 0.3s;
}

.ProdList:hover .ProdImg {
  box-shadow: none;
  transform: scale(1.02);
}

.menu
{
	position: relative;
	width: 5%;
	min-width: 90px;
	padding-top: 3px;
	/*	
	color: #2E3750;
	font-size: 12pt;
	font-weight: 600;
	transition: color 0.3s;
	*/
}

.menu > span
{
	color: #2E303E;
	font-size: 13pt;
	font-weight: 500;
	transition: color 0.3s;
}

.menu > span:hover
{
	color: #4287F8;
	cursor: pointer;
}

.submenu
{
	/* 기본 상태: 숨기기 */
    display: none; 
    
    position: absolute;
    top: 100%;    /* 부모 메뉴 바로 아래에 딱 붙음 */
    left: -1px;   /* 부모 테두리와 맞춤 */
    width: 160px;
/*    background-color: #ffffff;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);*/
    z-index: 10;
	
	background: rgba(255, 255, 255, 0.95);

    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 10px 0;
}

/* 상세 메뉴 내부 항목 스타일 */
.submenu div 
{
	padding: 12px 15px;
	font-size: 14px;
	font-weight: normal;
	color: #333;
	border-bottom: 1px solid #f0f0f0;
}

.submenu div:hover 
{
	background-color: #4287F8;
	color: #ffffff;
	cursor: pointer;
}

/* 4. ⭐ 핵심 로직: 부모(.menu)에 마우스 올리면 자식(.submenu) 보이기 */
.menu:hover .submenu 
{
	display: block;
}

#BtnAsk {
    position: fixed;
    right: 50px;
    bottom: 50px;

    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #4287F8;

    display: flex;
    justify-content: center;
    align-items: center;

    box-shadow: 0px 0px 10px #ABADBD;
    cursor: pointer;
    z-index: 9999;

    transition: box-shadow 0.3s, transform 0.1s linear;
}

#BtnAsk:hover {
    box-shadow: 0px 0px 20px #69B0FF;
}

/* 메시지 박스 */
#BtnAsk #AskBox {
	width: 150%;
	position: absolute;
	right: 75px; /* 버튼 옆 */
	top: 50%;
	padding-top: 5px;
	transform: translateY(-50%);

	white-space: nowrap;

	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

/* hover 시 표시 */
#BtnAsk:hover #AskBox {
	opacity: 0.95;
	transform: translateY(-50%) translateX(-5px);
}


/* ------------------------------------------------------ 2026-01-28 추가 */

.header
{
	display: flex; 
	justify-content: space-between; 
/*	background-color: #2A8EBF; */
/*	background-color: white; */
/*	padding: 20px 30px 15px 20px;*/
	padding: 30px 0px 15px 0px;
/*	box-shadow: 0px 5px 20px #F2F2F2; */
	
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999;
	
	background-color: rgba(255, 255, 255, 1);
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px); /* Safari */
	transition: background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
}

.header.scrolled 
{
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.3); 
}

.main
{
	display: flex; 
	justify-content: space-between; 
	/*
	height: auto;
	min-height: 100%;
	padding-bottom: 80px; 
	*/
	padding-top: 80px;
	padding-bottom: 130px;
	
	position: relative; 
}

.banner
{
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	padding-top: 80px;
	text-align: center;
	
    /* [그라데이션 핵심] 은은한 색상 조합 및 배경 크기 확대 */
    /* 색상 조합: 연한 보라 -> 연한 분홍 -> 연한 하늘색 */
    /*background: linear-gradient(-45deg, #a78bfa, #f472b6, #22d3ee, #818cf8);*/
	/* 푸른 계열의 연한 파스텔톤 조합으로 변경 */
	/*background: linear-gradient(-45deg, #E0F2FE, #ECF8FE, #D6F1FE, #FFFFFF);*/
	/* [수정] 훨씬 은은하고 밝은 푸른 계열 색상 조합 */
	/*background: linear-gradient(-45deg, #fcfdfd, #f0f9ff, #e0f2fe, #f8fafc);*/
    /*background-size: 400% 400%;*/ /* 애니메이션 공간 확보를 위해 배경을 4배 키움 */

    /* [애니메이션 핵심] 정의된 키프레임을 15초 동안 무한 반복 */
    /*animation: gradientFlow 15s ease infinite;*/

	background-color: #F8FAFC;
	overflow: hidden;
	
	box-shadow: 0px 5px 10px 3px rgba(171,173,189,0.1);
	
}

/* [수정] 블롭 레이어: 투명도를 높여서 움직임이 더 잘 보이게 함 */
.blob-layer {
	position: absolute;
	top: 0; left: 0; 
    width: 100%; height: 100%;
	filter: blur(120px);
	opacity: 0.7; 
	z-index: 0;
	pointer-events: none;
}

.blob {
	position: absolute;
	border-radius: 50%;
	mix-blend-mode: multiply;
	/* [핵심] 애니메이션 속도를 조금 더 빠르게, 범위를 크게 */
	animation: moveAroundLong 10s infinite alternate ease-in-out;
}

/* [색상 강화] 화이트 계열이지만 채도를 살짝 높인 블루/퍼플 */
.b1 { 
    width: 800px; height: 800px; /* 600 -> 800 */
    background: rgba(186, 230, 253, 0.6); 
    top: -10%; left: -20%; 
}

.b2 { 
    width: 900px; height: 900px; /* 700 -> 900 */
    background: rgba(224, 231, 255, 0.7); 
    bottom: -10%; right: -20%; 
    animation-delay: -5s; 
}

.b3 { 
    width: 700px; height: 700px; /* 500 -> 700 */
    background: rgba(207, 250, 254, 0.5); 
    top: 40%; left: 10%; /* 중간 영역을 채우도록 위치 조정 */
    animation-delay: -10s; 
}
.b4 {
    width: 600px; height: 600px;
    background: rgba(232, 240, 254, 0.6);
    bottom: 20%; left: 50%;
    animation-delay: -15s;
}

.banner > span, 
.banner > br, 
.banner > img, 
.bannerItemArea
.bannerBottomArea {
    position: relative; /* z-index를 먹이기 위해 필수 */
    z-index: 2; /* 배경(0)보다 높은 숫자 */
}

/* 기본 상태: 숨김 */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 활성화 상태: 나타남 */
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.load-reveal {
    animation: fadeInUp 1.2s ease-out forwards;
}

.SectionTitle::before {
  content: "";
  display: block;
  width: 50px; /* 선의 길이 */
  height: 4px; /* 선의 두께 */
  background-color: #4287F8;
  margin: 100px auto 10px auto; /* 중앙 정렬 및 아래 간격 */
}

#iframeContent {
    width: 60vw;
    position: relative;
    left: 50%;
    transform: translate(-50%);
}

.footer
{
	display: flex; 
	justify-content: space-between; 
/*	background-color: #2A8EBF; */
/*	background-color: #232A41; */
	background-color: #2E3750; 
/*	background-color: #474D69; */
	padding: 20px 20px 20px 20px;
	box-shadow: 0px -5px 20px #F2F2F2;
	height: 100px;
	/*
	height: 80px;
	position: relative;
	transform: translateY(- 100%);
	*/
/*	position: fixed; */
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 999;
}

.leftPart
{
	width: 40%;
}

.rightPart
{
	width: 40%; 
	display: flex; 
	justify-content: space-around;
}

.icon_list 
{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15%;
	
	/* ul 범위 설정 및 시작 위치 지정(= 첫번째 아이콘 시작 위치) */
	position: absolute; 
	width: 60%; 
	height: 100%; 
	top: 22%; 
	left: 58%;
}

.icon
{
	width : 16%;
	position : absolute;
	z-index : 1;
}

.icon_detail
{
	width: 35%; 
	position: absolute; 
	z-index: 2;
}

.msgBox
{
	background-color: #E7F2FF; 
	border: 1px solid #52B1EC; 
	position: absolute; 
	opacity: 0.7; 
	z-index: 3; 
	padding-left: 1%; 
	padding-right: 1%;
}

.msgBox > span
{
	font-size: 9pt; 
	color: gray;
}

.detail
{
	position: absolute;
}

.productLine
{
	width: 30%; 
/*	background-color: #2A8EBF; */
	background-color: #2E3750; 
/*	border: 2px solid white; */
	border: 2px solid #F0F0F4; 
	border-radius: 10px; 
	text-align: center; 
	padding: 5px 5px 5px 5px; 
	margin-right: 5px;
}

.productLine > span
{
	font-size: 10pt; 
/*	color: white; */
	color: #F0F0F4;
}

.productLine > span > span
{
	font-size: 12pt; 
	color: yellow; 
	font-weight: 600;
}

#detailContent
{
	margin-top: 15%;
	padding-left: 5%;
	padding-right: 5%;
	/*padding-bottom: 10px;*/
}

#detailProcess
{
	width: 60%; 
	margin-top: 80px; 
	text-align: center;
}

#detailImg
{
	position: relative; 
	height: 80%; 
	box-shadow: 0px 0px 5px rgba(82,179,235,1); 
	border-radius: 20px; 
	margin-top: 10px; 
	padding-top: 20px; 
	padding-bottom: 20px;
}

#loginForm
{
	width: 60%; 
	height: 55%; 
	box-shadow: 0px 0px 5px rgba(82,179,235,1); 
	border-radius: 20px; 
	margin-top: 20%; 
	padding-top: 10%; 
	/*padding-bottom: 30%;*/ 
	text-align: center;
}

#uid, #pwd
{
	width: 50%; 
	height: 35px; 
	background-color: #E7F2FF; 
	border: none; 
}

#loginBtn
{
	width: 52%; 
	height: 38px; 
	background-color: #52B1EC; 
	border: none; 
	border-radius: 5px; 
	color: white; 
	font-size: 12pt;
}
/*
#icon_1, #icon_1_detail
{
	left: 57%; 
	top: 23%;
}

#icon_2, #icon_2_detail
{
	left: 65%; 
	top: 36%;
}

#icon_3, #icon_3_detail
{
	left: 70%; 
	top: 52%;
}

#icon_4, #icon_4_detail
{
	left: 70%; 
	top: 69%;
}

#icon_5, #icon_5_detail
{
	left: 65%; 
	top: 84.5%;
}

#icon_6, #icon_6_detail
{
	left: 57%; 
	top: 100%;
}
*/
#user_name {
	display: inline-block;
	color: #FFF;
	padding: 0px 5px;
}

/* ----- 로딩 이미지 ----- */
.loading_img {
    width: 100px;
    height: 100px;
    left: calc(50% - 50px);
    top: calc(50% - 50px);
    position: absolute; 
    background: url(../images/loading.gif) no-repeat center center / contain;
}

@media (max-width: 900px) 
{
    .ProdRow 
	{
        flex-direction: column;
    }
}

  /* --- 배너 배경 애니메이션 --- */
@keyframes gradientFlow {
	0% {
	  background-position: 0% 50%; /* 시작 위치 */
	}
	50% {
	  background-position: 100% 50%; /* 중간에 가장 멀리 이동 */
	}
	100% {
	  background-position: 0% 50%; /* 다시 처음으로 돌아옴 */
	}
}

/* [핵심] 더 역동적인 움직임 정의 */
@keyframes moveAroundLong {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); }
    50% { transform: translate(300px, 200px) scale(1.3) rotate(15deg); } /* 이동 거리 확대 */
    100% { transform: translate(-150px, -100px) scale(1) rotate(-10deg); }
}

/* 페이지 로드 시 바로 실행될 애니메이션 (첫 span과 메인 img용) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}