@charset "utf-8";

/*

	변수선언
	rem 사용

*/
:root {
	/* primary color */
	--primaryColor: #0072bc;
	--impactColor: #FAEB00;

	/* button color */
	--generalBtnBg: #333;
	--generalBtnFontColor: #fff;
	--cancelBtnBg: #fff;
	--cancelBtnOutline: #666;
	--cancelBtnFontColor: #333;

	/* input */
	--inputOutline: #ccc;
	--placeholderFontColor: #ccc;

	/* popup */
	--popupBgColor: #fff;
	--popupFontColor: #333;

	/* radius */
	--bdRadius: 2px;

	/* table */
	--thFontColor: #444;
	--tdFontColor: #444;

	/* pagination */
	--pagiNumBD: #ccc;
	--pagiFontColor: #666;
	--pagiNaviBD: #000;

	/* 10px을 기준으로 만듬 */
	font-size: 62.5%;
}

/*
	media query에서 rem단위 사용 시
	root에서 설정한 62.5%(10px)은 적용되지 않는다.
	따라서 원하는 픽셀에 나누기 16 해서 입력해야 함
	640 / 16 = 40

	단 safari에서는 root에 선언한대로 계산되므로 40rem으로 설정하면 오류가 난다.
	em 단위는 safari에서도 브라우저의 기본폰트 사이즈에 상대적으로 계산되므로
	em을 사용한다.

	max-width는 소수점의 문제가 있으므로 될 수 있는한 쓰지 않는다.
*/
/* @media only screen and (min-width: 40em) {
	.container {
		margin: 0 auto;
		max-width: 64rem;
	}
} */

/*

	필요한 파일 @import

*/
/* 본 고딕 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500&display=swap');
/* Lato */
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
/* font-family: 'Lato', sans-serif; */
/* Font awesome */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css');


/*

	reset css

*/
* {
	box-sizing: border-box;
	/* font-size를 16px로 적용 */
}

/* Default CSS */
html body {
	margin: 0;
	font-family: "Noto Sans KR", sans-serif;
	font-size: 1.6rem;
	box-sizing: border-box;
	/* height: calc(100vh - 10rem); */
	height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
	width: 100vw;
}

@media (max-width: 767px) {
	html body {
		height: 100%;
	}
}

a {
	text-decoration: none;
	color: #333;
}

input {
	border: 1px solid var(--inputOutline);
	border-radius: var(--bdRadius);
	height: 4.5rem;
	padding-left: 10px;
	font-size: 1.6rem;
	background-color: #fff;
	/* iOS에서 모서리가 둥글게 나오는 현상 해결 */
	-webkit-appearance: none;
	-webkit-border-radius: var(--bdRadius);
}

input:focus {
	border: 1px solid var(--primaryColor);
	outline: none;
}

input[type="button"] {
	background-color: var(--generalBtnBg);
	color: var(--generalBtnFontColor);
	border: 0px;
	font-size: 1.4rem;
	font-weight: bold;
	cursor: pointer;
}
input[value="취소"] {
	background-color: var(--cancelBtnBg);
	color: var(--cancelBtnFontColor);
	border: 1px solid var(--cancelBtnOutline);
	margin-right: 10px;
}
input::placeholder,
textarea::placeholder {
	font-family: "Noto Sans KR", sans-serif;
	font-size: 1.4rem;
	color: var(--placeholderFontColor);
	/* padding-left: 10px; */
}
textarea::placeholder {
	font-size: 1.6rem;
}

/* Select box css */
select {
	height: 45px;
	padding: 0 40px 0 10px;
	border-radius: 2px;
	border: 1px solid #ccc;
	color: #444;
	font-size: 1.6rem;
	-webkit-appearance: none;  /* 네이티브 외형 감추기 */
	-moz-appearance: none;
	appearance: none;
	background: url('../img/select_arrow_down.png') right 10px center no-repeat;
}
select::-ms-expand {
	display: none;
}
select:focus {
	border: 1px solid var(--primaryColor);
	outline: none;
	background: url('../img/select_arrow_up.png') right 10px center no-repeat;
	transition: .2s;
}
/* 
#selectbox select option {
	font-size: 1.6rem;
	padding: 5px;
} */

/* textarea */
textarea {
	border: 1px solid var(--inputOutline);
	padding: 10px;
	font-family: "Noto Sans KR", sans-serif;
	font-size: 1.6rem;
	color: var(--tdFontColor);
	resize: none;
	border-radius: var(--bdRadius);
}
textarea:focus {
	border: 1px solid var(--primaryColor);
	outline: none;
}

/* h tag */
h1,h2,h3,h4,h5,h6 {
	margin-top: 0;
	font-weight: normal;
}


/* table basic css */
table {
	width: 100%;
	/* border-collapse: collapse; */
	/* border: 1px solid red; */
}
table th {
	height: 55px;
	color: var(--thFontColor);
	font-weight: 500;
	padding: 10 0 10 0;
	text-align: left;
}
table td {
	height: 50px;
	color: var(--tdFontColor);
	padding: 10 0 10 0;
}

/************************** container *****************************/
#container {
	width: 100vw;
	min-height: 100%;
	/* height: auto; */
	padding-bottom: 150px;
	/* height: 100%; */
	/* border: 3px solid red; */
}

@media(max-width: 767px) {

}

/************************** header *****************************/
#header {
	height: 120px;
	width: 100vw;
	/* position: fixed; */
	background-color: #fff;
}

.quickbar {
	height: 68px;
	width: 100vw;
}

.quicklink {
	width: 768px;
	height: 100%;
	margin: auto;
	position: relative;
	text-align: right;
}

.unhcrlogo {
	width: 121px;
	height: 100px;
	border-radius: 10px;
	background-color: #fff;
	position: absolute;
	left: 19px;
	top: 12px;
	text-align: center;
}

.quick {
	height: 100%;
	width: 250x;
	display: inline-block;
	/* border: 1px solid red;	 */
}

.member,
.signout {
	display: inline-block;
	/* height: 100%; */
	margin-right: 2.0rem;
	margin-top: 2.5rem;
	/* border: 1px solid #000; */
}

.icon {
	vertical-align: middle;
	padding-right: 7px;
}

/**************************  GNB  *****************************/
#gnbFrame {
	height: 52px;
	width: 100vw;
	background-color: var(--primaryColor);
}

#gnbFrame>ul {
	list-style: none;
	/* border: 1px solid greenyellow; */
	margin: auto;
	width: 768px;
	height: 100%;
	text-align: center;
}

#gnbFrame>ul>li {
	/* border: 1px solid red; */
	display: inline-block;
	/* margin-left: 52px; */
	height: 100%;
	padding-top: 1.3rem;
	color: #fff;
	width: 77px;
}

/* 해상도 커버 */
@media all and (min-height: 768px) and (max-height: 1180px) {
	#gnbFrame>ul>li {
		padding-top: 1.8rem;
	}
}

#gnbFrame>ul>li:nth-child(2),
#gnbFrame>ul>li:last-child {
	margin-left: 40px;
}

#gnbFrame>ul>li>a {
	text-decoration: none;
	color: #fff;
	position: relative;
}

#gnbFrame>ul>li a::before {
	content: '';
	background-color: var(--impactColor);
	width: 0;
	height: 4px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	/* -webkit-transform: translate(-50%); */
	/* bottom: -1.7rem; */
	top: 29px;
	transition: 0.3s;
	/* border: 1px solid salmon; */
}

#gnbFrame>ul>li a:hover::before {
	width: 77px;
}

.gnbOver {
	background-color: var(--impactColor);
	height: 4px;
	width: 77px;
	color: #000;
	position: absolute;
	top: 115px;
	visibility: hidden;
}

/************************** contents *****************************/
#contentsArea {
	width: 100vw;
	height: 100%;
}

#contents {
	width: 730px;
	/* border: 1px solid yellowgreen; */
	margin: auto;
}

#pageTitle {
	font-size: 2.5rem;
	/* border: 1px solid #000; */
	margin: 30px 0 30px 0;
	font-weight: 500;
}

@media(max-width: 767px) {
	#pageTitle {
		padding-left: 10px;
	}
}

#pageContents {
	width: 100%;
	/* border: 1px solid yellowgreen; */
}

@media (max-width: 767px) {
	#pageContents {

	}
}

/************************** footer *****************************/
#footerOutline {
	width: 100vw;
	background-color: #333;
	color: #fff;
	font-size: 1rem;
	text-align: center;
	position: relative;
	transform: translateY(-10rem);
}

#footer {
	width: 76.8rem;
	height: 10rem;
	margin: auto;
	/* border: 1px solid red; */
	display: inline-block;
}

.footerLogo {
	width: 16.3rem;
	display: inline-block;
	/* border: 1px solid dodgerblue; */
	margin-top: 0.4rem;
}

.copyright {
	display: inline-block;
	/* border: 1px solid yellow; */
	width: 56.6rem;
	text-align: left;
	padding-left: 1rem;
	font-weight: lighter;
}

.copyright a {
	color: #fff;
}

/*********************************** popup *******************************/
.popBg {
	background-color: #000;
	opacity: 65%;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	/* visibility: visible; */
	display: none;
}

.popWrapper {
	background-color: var(--popupBgColor);
	padding: 20px;
	margin: auto;
	position: fixed;
	top: 50vh;
	left: 50vw;
	transform:translate(-50%, -50%);
	border-radius: var(--bdRadius);
	z-index: 999;
	/* display: none; */
}
.popWrapper .popcontent {
	color: var(--popupFontColor);
	font-size: 1.6rem;
	text-align: center;
}
.popWrapper .buttonarea {
	text-align: center;
	margin-top: 20px;
}
.popWrapper .buttonarea input {
	width: 82px !important;
	height: 42px !important;
}

#popConfirm,
#popAlert {
	max-width: 50rem;
	visibility: hidden;
}

/*********************************** loading *******************************/
#loading{
	width: 100vw;
	height: 100vh;
	background-color: #000;
	opacity: 65%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 0;
	top: 0;
	display: none;
}
#loading .wrapper{
	width: 200px;
	height: 60px;
	position: absolute;
	left:50%;
	top:50%;
	transform: translate(-50%, -50%);
	/* border: 1px solid red; */
}
.circle{
	width:20px;
	height:20px;
	position: absolute;
	border-radius: 50%;
	background-color: var(--primaryColor);
	left:15%;
	transform-origin: 50%;
	animation: circle .5s alternate infinite ease;
}

@keyframes circle{
	0%{
		top:60px;
		height:5px;
		border-radius: 50px 50px 25px 25px;
		transform: scaleX(1.7);
	}
	40%{
		height:20px;
		border-radius: 50%;
		transform: scaleX(1);
	}
	100%{
		top:0%;
	}
}
.circle:nth-child(2){
	left:45%;
	animation-delay: .2s;
}
.circle:nth-child(3){
	left:auto;
	right:15%;
	animation-delay: .3s;
}
.shadow{
	width:20px;
	height:4px;
	border-radius: 50%;
	background-color: #333;
	position: absolute;
	top:62px;
	transform-origin: 50%;
	z-index: -1;
	left:15%;
	filter: blur(1px);
	animation: shadow .5s alternate infinite ease;
}

@keyframes shadow{
	0%{
		transform: scaleX(1.5);
	}
	40%{
		transform: scaleX(1);
		opacity: .7;
	}
	100%{
		transform: scaleX(.2);
		opacity: .4;
	}
}
.shadow:nth-child(4){
	left: 45%;
	animation-delay: .2s
}
.shadow:nth-child(5){
	left:auto;
	right:15%;
	animation-delay: .3s;
}
#loading .wrapper span{
	position: absolute;
	top:75px;
	font-family: 'Lato', sans-serif;
	font-size: 2.0rem;
	letter-spacing: 12px;
	color: #fff;
	left:15%;
}