@charset "utf-8";

#wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(251, 224, 224, 0.5);
	overflow: hidden;
}

#container {
	position : relative;
	width: 500px;
	height: 100%;
	margin: 0 auto;
	background: #fff;
}

#content {
	position : absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(100% - 150px);
	margin-top: 75px;
	padding-bottom: 30px;
	overflow-Y: auto;
	box-sizing: border-box;
}

#content2 {
	position : absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(100% - 75px);
	margin-top: 75px;
	padding-bottom: 30px;
	overflow-Y: auto;
	box-sizing: border-box;
}

.sector {
	margin: 0 30px;
}

@media screen and (max-width: 500px) {
	#container {
		width: 100%;
	}
	
	#content {
		height: calc(100% - 30vw);
		margin-top: 15vw;
		padding-bottom: 6vw;
	}
	
	#content2 {
		height: calc(100% - 15vw);
		margin-top: 15vw;
		padding-bottom: 6vw;
	}

	.sector {
		margin: 0 6vw;
	}
}

/************** 헤더 **************/
#hd {
	position: relative;
	height: 75px;
	box-shadow: 0px 2.5px 5px rgba(216, 201, 205, 0.2);
}

#hd .logo {
	margin-top: 20px;
	width: 100px;
}

#hd .back_btn {
	position: absolute;
	top: 25px;
	left: 30px;
	width: 25px;
}

#hd .back_btn > img {}

#hd .page_title {
	padding-top: 25px;
	font-size: 22px;
	font-weight: 600;
	text-align: center;
}

@media screen and (max-width: 500px) {
	#hd {
		height: 15vw;
		box-shadow: 0px 0.5vw 1vw rgba(216, 201, 205, 0.2);
	}

	#hd .logo {
		margin-top: 4vw;
		width: 20vw;
	}
	
	#hd .back_btn {
		top: 5vw;
		left: 6vw;
		width: 5vw;
	}

	#hd .page_title {
		padding-top: 5vw;
		font-size: 4.4vw;
	}
}


/************** 푸터 **************/
#ft {
	display: flex;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 75px;
	box-shadow: 0px -2.5px 5px rgba(216, 201, 205, 0.2);
}

#ft button {
	display: flex;
	flex: 1;
	height: inherit;
	padding-bottom: 12px;
	justify-content: center;
	align-items: flex-end;
	background-size: 40px;
	background-position: center top 12px;
	background-repeat: no-repeat;
	font-size: 9px;
	color: #1B2C56;
}

#ft button.home { background-image: url('/images/bottom_menu_icon01.png'); }
#ft button.home.on { background-image: url('/images/bottom_menu_icon01-1.png'); }

#ft button.estimate { background-image: url('/images/bottom_menu_icon02.png'); }
#ft button.estimate.on { background-image: url('/images/bottom_menu_icon02-1.png'); }

#ft button.review { background-image: url('/images/bottom_menu_icon03.png'); }
#ft button.review.on { background-image: url('/images/bottom_menu_icon03-1.png'); }

#ft button.mypage { background-image: url('/images/bottom_menu_icon04.png'); }
#ft button.mypage.on { background-image: url('/images/bottom_menu_icon04-1.png'); }

@media screen and (max-width: 500px) {
	#ft {
		height: 15vw;
		box-shadow: 0px -2.5px 5px rgba(216, 201, 205, 0.2);
	}

	#ft button {
		padding-bottom: 2.4vw;
		background-size: 8vw;
		background-position: center top 2.4vw;
		font-size: 1.8vw;
	}
}