@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;
}


*
{
	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: 330px;
	min-height: 400px;
	max-width: 330px;
	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: 150px;
/*    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;
}

.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;
}

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