@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700&display=swap');

:root {
	/* 1차 변수 START */

	/* 컬러 */
	--color-primary: #3EA7EC;			/* 메인 색상 기본 */
	--color-primary-effect: #009AFF;	/* 메인 색상 효과 (호버) */
	--color-primary-contrast: #fff;	/* 메인 색상 콘트라스트 색상 */

	--color-second: #FFCB00;			/* 서브 색상 기본 */
	--color-second-effect: #FCA000;	/* 서브 색상 효과 (호버) */
	--color-second-contrast: #fff;		/* 서브 색상 콘트라스트 색상 */

	--color-point: #FF8080;			/* 포인트 색상 기본 */
	--color-point-effect: #FF6E6E;		/* 포인트 색상 효과 (호버) */
	--color-point-contrast: #fff;		/* 포인트 색상 콘트라스트 색상 */

	--color-disabled: #bbb;			/* 비활성화 색상 */

	--color-font-basic: #222;			/* 기본 글자 색상 */
	--color-font-sub: #888;			/* 보조 글자 색상 */
	--color-font-placeholder: #ccc;	/* 플레이스홀더 글자 색상 */

	--color-border-light: #eee;		/* 라인 밝은 색상 */
	--color-border-mideum: #ddd;		/* 라인 중간 색상 */
	--color-border-dark: #222;			/* 라인 어두운 색상 */

	--color-border-input: #ddd;

	--color-bg-highlight : #fafafa;	/* 배경 색상 */
	--color-bg-light : #f5f5f5;		/* 배경 색상 */


	/* 사이즈 */
	--size-border: 0.1rem;				/* 라인 굵기 */

	--size-radius-small: .6rem;			/* 레디우스 크기 조정 (소) */
	--size-radius-mid: 1rem;			/* 레디우스 크기 조정 (중) */
	--size-radius-large: 2rem;			/* 레디우스 크기 조정 (대) */
	--size-radius-full: 100rem;			/* 레디우스 크기 조정 (100%) */


	/* 폰트 */
	--font-size-xx-small: 1.5rem;
	--font-size-x-small: 1.6rem;
	--font-size-small: 1.9rem;
	--font-size-mid: 2.1rem;
	--font-size-large: 2.5rem;
	--font-size-x-large: 3.2rem;
	--font-size-xx-large: 4rem;
	--font-size-xxx-large: 5rem;

	--font-w-thin: 100;
	--font-w-light: 300;
	--font-w-regular: 400;
	--font-w-mid: 500;
	--font-w-bold: 700;
	--font-w-black: 900;


	/* 여백 */
	--space-short: 1rem;
	--space-mid: 2rem;
	--space-big: 4rem;
	--space-section: 4rem 0 10rem;		/* 페이지내 섹션 여백 */


	/* 기타 */
	--line-height: 1.7;

	/* 1차 변수 END */


	/* 계산 목적 변수 목록 START */
    --header-height : 8rem;
    --min-width : 270px;
	/* 계산 목적 변수 목록 END */
}


/* 폰트 반응형 START */
html {
	font-size: 10px;
	font-family: 'Roboto', 'Noto Sans KR', sans-serif;
	font-weight: 400;
}
/* 폰트 반응형 END */

body {
	background: var(--color-bg-highlight);
}
body, input {
	font-size: 1.6rem;
	font-family: 'Roboto', 'Noto Sans KR', sans-serif;
	line-height: var(--line-height);
}
select, input, textarea, button {
	font-family: 'Roboto', 'Noto Sans KR', sans-serif;
}
img {
	max-width: 100%;
}
select {
	width:27rem;
    height:4rem;
    box-sizing:border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background:url("../images/common/icon_select.svg") center right 1rem / 1.4rem no-repeat;
}
input {
	width:-webkit-fill-available;
    height:4rem;
	font-family: 'Roboto', 'Noto Sans KR', sans-serif;
}
select, input, textarea {
	padding: 0 1rem;
	width: calc(100% - 2rem);
	font-size: var(--font-size-xx-small);
	border: none;
	border-radius: var(--size-radius-small);
	background-color: var(--color-bg-light);
	box-sizing: content-box;
}
textarea {
	padding: 1rem;
}
input:focus {
	outline: none;
}
input[type=text]:disabled {
	color: var(--color-disabled);
}
input[type=checkbox],
input[type=radio] {
	width: 2rem;
	height: 2rem;
	display: none;
}
input[type=checkbox] + label,
input[type=radio] + label {
    display: inline-block;
    cursor: pointer;
    line-height: 1;
    padding: 0.6rem 0 0.6rem 3rem;
	background: url("../images/common/icon_check_off.svg") left/2.4rem no-repeat;
	-webkit-user-drag: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
input[type=checkbox]:checked + label,
input[type=radio]:checked + label {
	background: url("../images/common/icon_check_on.svg") left/2.4rem no-repeat;
}
a:link, a:visited, a:hover {
	color: #222;
	text-decoration:none;
}
button {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: unset;
	background: none;
	outline: none;
	border: none;
	cursor: pointer;
	border-radius: var(--size-radius-small);
	letter-spacing: -0.1rem;
	line-height: 1;
}

.lock {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: fixed;
}
.layer_bg {
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 90;
	background: rgba(0, 0, 0, 0.7);
}
.title_box {
	margin-bottom: 3rem;
}
h2 {
	margin-bottom: 1rem;
	font-size: var(--font-size-large);
	font-weight: var(--font-w-mid);
}
h2 span {
	margin-left: 0.6rem;
	font-size: var(--font-size-x-small);
	font-weight: var(--font-w-regular);
	color: var(--color-font-sub);
}
h4 {
	color: var(--color-font-basic);
	font-size: var(--font-size-mid);
	font-weight: var(--font-w-mid);
}
h6 {
	color: var(--color-font-basic);
	font-size: var(--font-size-small);
	font-weight: var(--font-w-light);
}


/* 컨텐츠 START */
.content_container {
	padding: 1rem 0 1rem 0;
	width: 100%;
	background-color: #fff;
}
.content_container .content_wrapper.full {
    margin: 0 auto;
	padding:0;
	max-width: 100%;
}
.content_inner {
	padding: 0 var(--space-mid);
	margin: 0 auto;
	position: relative;
}
.flex_content_container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
/* 컨텐츠 END */

/* 버튼 스타일 START */
.btn_disabled {
	opacity: 0.5;
}
.btn_disabled:hover {
	background-color: unset;
}
.btn_primary_fill {
	color: #fff;
	background-color: var(--color-primary);
}
.btn_primary_fill:hover {
	background-color: var(--color-primary-effect);
}
.btn_point_fill {
	color: #fff;
	background-color: var(--color-point);
}
.btn_point_fill:hover {
	background-color: var(--color-point-effect);
}
.btn_gray_fill {
	color: #fff;
	background-color: #999;
}
.btn_gray_fill:hover {
	background-color: #888;
}
.btn_light_gray_fill {
	color: #fff;
	background-color: #bbb;
}
.btn_light_gray_fill:hover {
	background-color: #aaa;
}

.btn_auto {
	padding: 0 1rem;
    height: 3rem;
    font-size: var(--font-size-x-small);
}
.btn_small {
    width: 8rem;
    height: 3rem;
    font-size: var(--font-size-x-small);
}
.btn_back {
	width: 20rem;
	height: 5rem;
    font-size: var(--font-size-mid);
    font-weight: var(--font-w-mid);
}
/* 버튼 스타일 END */

/* 팝업 파일업로드 (공통) START */
.file_wrapper {
	display: flex;
    flex-direction: row;
    gap: 1rem;
}
.file_wrapper .btn_file_box_wrapper {
    width: calc(100% - 9rem);
    position: relative;
}
.file_wrapper .btn_file_box_wrapper input[type=text]:disabled {
	color: var(--color-font-basic);
}
.file_wrapper .btn_close_gray {
    width: 1.6rem;
    height: 1.6rem;
    position: absolute;
    top: 0;
    right: 0;
    top: 50%;
    right: 0%;
    transform: translate(-1rem,-50%);
}
.file_wrapper .btn_search {
    width: 8rem;
    height: 4rem;
    font-size: var(--font-size-x-small);
}
/* 팝업 파일업로드 (공통) END */

/* 서브밋 타입 버튼 START */
.bottom_btn_wrapper {
    margin: 2rem 0;
	width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.bottom_btn_wrapper>div {
    display: flex;
	gap: 1rem;
}
.bottom_btn_wrapper button {
	min-width: 20rem;
    height: 5rem;
    font-size: var(--font-size-mid);
    font-weight: var(--font-w-mid);
}
@media screen and (max-width: 768px) {
	.bottom_btn_wrapper button {
		min-width: unset;
		flex-basis: calc((100% - 1rem)/2);
	}
	.bottom_fix {
		margin-left: -2rem;
		padding: 2rem;
		width: calc(100% - 4rem);
		position: fixed;
		bottom: 0;
		border-top: 1px solid var(--color-border-mideum);
		background-color: #fff;
	}
	.bottom_fix .bottom_btn_wrapper {
		margin: unset;
	}
}
/* 서브밋 타입 버튼 END */

/* 파일 업로드 START */
.fileUpload input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip:rect(0,0,0,0);
    border: 0;
}
.form_container .fileUpload .btn_search {
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #fff;
	border-radius: var(--size-radius-small);
}
@media screen and (max-width: 599px) {
	.form_container .fileUpload .btn_search {
		margin-bottom: unset;
		flex-basis: unset;
	}
}
/* 파일 업로드 END */

/* 헤더 START */
.header_container {
	background-color: #fff;
	border-bottom: 1px solid var(--color-border-mideum);
	box-sizing: border-box;
}
header {
	padding: 0 5%;
	margin: 0 auto;
	height: var(--header-height);
	display: flex;
	align-items: center;
	justify-content: space-between;
}
header .logo {
    display: flex;
    align-items: center;
}
header .logo a {
    display: flex;
    align-items: center;
}
header .logo img {
    width: 10rem;
}
header .btn_menu {
	display: none;
	align-items: center;
	width: 3rem;
	height: 3rem;
}
header .gnb {
    display: flex;
    gap: 4rem;
}
header .gnb li {
    display: flex;
    font-size: var(--font-size-small);
    font-weight: var(--font-w-regular);

}
header .gnb li a {
	padding: 0.8rem 0;
	position: relative;
	transition: all ease 0.5s;
	overflow: hidden;
}
header .gnb li a::before {
	width: 100%;
	height: 2px;
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: var(--color-primary);
	transform: translateX(-100%);
	transition: all ease 0.3s;
}
header .gnb li a:hover {
	color: var(--color-primary);
}
header .gnb li a:hover::before {
	transform: translateX(0);
}
header .mobile_menu_container {
	display: none;
}
@media screen and (max-width: 960px) {
	header {
		padding: 0 var(--space-mid);
		max-width: 100%;
	}
	header .gnb {
		display: none;
	}
	header .btn_menu {
		display: flex;
	}
	header .mobile_menu_container {
		width: 100vw;
		height: 100vh;
		background: #fff;;
		position: fixed;
		top: 0;
		right: -120%;
		z-index: 100;
		display: block;
	}
	header .mobile_menu_container .wrapper {
		padding: 0 var(--space-mid);
		height: var(--header-height);
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 0.1rem solid var(--color-border-mideum);
	}
	header .mobile_menu_container .wrapper button {
		align-items: center;
		width: 3rem;
		height: 3rem;
	}
	header .mobile_gnb {
		padding: 3rem var(--space-mid);
		display: flex;
		flex-direction: column;
		gap: 4rem;
		overflow: scroll;
		height: 100%;
	}
	header .mobile_gnb li {
		font-size: var(--font-size-large);
		font-weight: var(--font-w-regular);

	}
	header .mobile_gnb li a {
		padding: 0.6rem 0;
		position: relative;
		transition: all ease 0.5s;
		overflow: hidden;
	}
}
/* 헤더 END */