@charset "utf-8";

:root {
  --head-con-w: 1300px;
  --site-con-w: 1280px;

  --color-blk: #000;
  --color-bk-10: #33363D;
  --color-bk-ft: #1E2124;
  --color-wht:#fff;
  --color-1: #2c2c2c;
  --color-2: #333333;
  --color-3: #666666;
  --color-4: #3b3b3b;
  --color-6: #dbdbdb;
  --color-line2: #E6E6E6;
  --color-point: #0473cd;

  --pd-base-pc: 40px;
  --pd-base-mo: 20px;

  --line-h: 150%;

  --fs-base-pc: 15px;
  --fs-base-mo: 14px;

  --round-base:24px;
  --round-md:12px;
  --round-sm:8px;
  --round-xs:4px;

  --w100: 100%;
  --w50: 50%;

  --w3: 3rem;
  --w5: 5rem;
  --w6: 6rem;
  --w7: 7rem;
  --w8: 8rem;
  --w9: 9rem;
  --w10: 10rem;
  --w15: 15rem;
  --w20: 20rem;
  --w30: 30rem;

  --h17:1.7rem;
  --h20:2rem;
  --h24:2.4rem;
  --h30:3rem;

  /* 서브공통요소 */
  --blue-0:#000b9e;
  --blue-1:#0473CD;
  --blue-2:#2282c5;
  --blue-3:#667bac;
  --blue-4:#83a9d0;
  --blue-5:#e2e6ea;
  --blue-6:#f0f5f9;
  --blue-8:#85acda;

  --gray-1:#3D3D3D;
  --gray-2:#777777;
  --gray-3:#9a9a9a;
  --gray-4:#a5a5a5;
  --gray-5:#DDDDDD;
  --gray-6:#f5f5f5;
  --gray-7:#FAFAFA;


  --red-1:#ff0000;
  --red-2:#a71919;
  --red-3:#ffb7b7;
  --orange-1:#ff7e00;
  --yellow-1:#FF0;

  --white:#ffffff;
  --border-0:1px solid var(--gray-3);
  --border-1:1px solid var(--gray-5);
  --border-dot-1:1px dotted var(--gray-1);
  --border-2:2px solid var(--gray-5);
  --border-3:3px solid var(--gray-4);
  --border-2-blue:2px solid var(--blue-4);
  --border-3-blue:3px solid var(--blue-1);

  --bd_inner-1-gray:inset 0 0 0 1px var(--gray-2);
  --bd_inner-2-gray:inset 0 0 0 2px var(--gray-2);
  --bd_inner-3-gray:inset 0 0 0 2px var(--gray-3);

  --bd_inner-1-blue:inset 0 0 0 1px var(--blue-1);
  --bd_inner-2-blue:inset 0 0 0 2px var(--blue-1);
}

button, a{transition: all ease-in .2s;}
a {color:var(--color-1)}
.scroll-hidden{overflow:hidden;}
.computersetak, .slogan{font-family: "computersetak", "Pretendard Variable", Pretendard, sans-serif;}
.flex{display:flex;}
.main_wrap{background-color:#F6F7F9;}

.anchor {cursor: pointer;color:var(--color-1);}

.w100 {width:var(--w100)}
.w50 {width:var(--w50)}

.w3 {width:var(--w3)}
.w5 {width:var(--w5)}
.w6 {width:var(--w6)}
.w7 {width:var(--w7)}
.w8 {width:var(--w8)}
.w9 {width:var(--w9)}
.w10 {width:var(--w10)}
.w15 {width:var(--w15)}
.w20 {width:var(--w20)}
.w30 {width:var(--w30)}
.h17 {width:var(--h17)}
.h20 {width:var(--h20)}
.h24 {width:var(--h24)}
.h30 {width:var(--h30)}


@media screen and (max-width: 1200px){
  .main_wrap{box-shadow: 0 -6px 19px 0 rgba(102, 102, 102, 0.14);}
}

/*
로딩바 관련 시작
*/

/* 로딩 화면 */
#loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.2); /* 반투명 흰색 */
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999999999999;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

/* 로딩 스피너 */
.loader {
	width: 60px;
	height: 60px;
	border: 4px solid #f3f3f3;
	border-top: 4px solid #3498db;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* 콘텐츠 박스 (예시) */
.content {
	padding: 20px;
	max-width: 800px;
	margin: 50px auto;
	background: white;
	border-radius: 10px;
	box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/*
로딩바 관련 종료
*/

/* 오류 메시지 스타일 */
label.error {
    color: red; /* 텍스트 색상을 빨간색으로 */
    font-size: 0.8em; /* 폰트 크기 줄이기 */
    font-weight: bold; /* 폰트를 굵게 */
    display: block; /* 메시지를 새 줄에 표시 (블록 요소로 만듦) */
    margin-top: 5px; /* 필드와의 간격 */
}