/*@charset "UTF-8";*/


* {
	margin: 0;
	padding: 0;
	box-sizing: border-box; 
}

@import 'header.css';
@import 'footer.css';




/* 웹 */
@media all and (min-width:761px){
	
	/* ----------- 메인화면 ----------- */
	
	.main{
		height: calc(100vh - 100px);
		
		display: flex;
		padding: 24px 20px;
		justify-content: center;
		align-items: center;
		gap: 20px;
		flex: 1 0 0;
		align-self: stretch;
		background: var(--grey-0-white, #FFF);
	}
	
	
	/*1번째 박스*/
	.mainTitle{
		height: 100%;
		
		display: flex;
		justify-content: center;
		align-items: flex-start;
		
		/*	flex-wrap: wrap;*/
		flex: 1 0 0;
		align-self: stretch;
	}
	
	
	.mainTitle_frame{
		position: absolute;
		padding: 0 20px;
		top: 35%;	
		display: flex;
		height: 159px;
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;	
	}
	
	
	.mainTitle_frame div{
		mix-blend-mode: multiply;
	}
	
	
	.mainTitle_frame span:nth-child(1){
		
		color: var(--grey-700-black, #1D1D1D);
	
		/* h2 */
		font-family: Pretendard;
		font-size: 40px;
		font-style: normal;
		font-weight: 600;
		line-height: 140%; /* 56px */
		letter-spacing: -0.8px;
	}
	
	
	.mainTitle_frame span:nth-child(2){
		color: #EC920C;
		
		/* title3 */
		font-family: Pretendard;
		font-size: 20px;
		font-style: normal;
		font-weight: 600;
		line-height: 180%; /* 36px */
		letter-spacing: -0.4px;
	}
	
	
	/* 2~4번째 박스 */
	.mainBox_2,
	.mainBox_3,
	.mainBox_4{
		
		
		margin-top: 11.36%;
		margin-bottom: 11.36%;
		
		position: relative;
	
	/*	
		justify-content: center;
		align-items: center;
		*/
		
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		flex: 1 0 0;
		align-self: stretch;	

		max-width: 77.27%;
	}	
	
	
	.mainBox_2{
		flex: 1 0 0;
		align-self: stretch;
		background: url("../img/mainHome_s.png") no-repeat;
	}
	
	
	.mainBox_3{
		flex: 1 0 0;
		align-self: stretch;
		background: url("../img/mainOffice_s.png") no-repeat;
	}
	
	.mainBox_4{
		flex: 1 0 0;
		align-self: stretch;
		background: url("../img/mainCommercial_s.png") no-repeat;
	}
	
	
	.mainBox_2_txt,
	.mainBox_3_txt,
	.mainBox_4_txt {
		position: absolute;
		left: 34px;
		bottom: 24px;	
	}
	
	
	
	.mainBox_2_txt span,
	.mainBox_3_txt span,
	.mainBox_4_txt span{		
		color: var(--grey-100, #FAFAFA);
		
		/* title2 */
		font-family: Pretendard;
		font-size: 24px;
		font-style: normal;
		font-weight: 600;
		line-height: 140%; /* 33.6px */
		letter-spacing: -0.48px;
	}
	
	
	/*웹에서 햄버거 메뉴 숨기기*/
	.hamb{
		display: none;
	}
	
}



/* 모바일 */
@media all and (max-width: 760px){
	
	
	/* main */
	
	.main{
		display: flex;
		height: 584px;
		padding: 24px 20px;
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		align-self: stretch;
		
		background: var(--grey-0-white, #FFF);
	}
	
	
	.mainTitle{
		display: flex;
		padding: 5px 85px 5px 0px;
		align-items: center;
		align-self: stretch;
	}
	
	
	.mainTitle_frame{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		gap: 24px;
	}
	
	
	
	.mainTitle_frame span:nth-child(1){
		color: var(--grey-700-black, #1D1D1D);
		
		/* title2 */
		font-family: Pretendard;
		font-size: 24px;
		font-style: normal;
		font-weight: 600;
		line-height: 140%; /* 33.6px */
		letter-spacing: -0.48px;
		
		mix-blend-mode: multiply;
	}
	

	.mainTitle_frame span:nth-child(2){
		color: #EC920C;

		/* caption1 */
		font-family: Pretendard;
		font-size: 16px;
		font-style: normal;
		font-weight: 700;
		line-height: 140%; /* 22.4px */
		letter-spacing: -0.32px;
	}
	
	
	
	.mainBox_2,
	.mainBox_3,
	.mainBox_4{
		display: flex;
		max-height: 840px;
		justify-content: space-between;
		align-items: flex-start;
		flex: 1 0 0;
		align-self: stretch;
		
	}

	
	.mainBox_img_2{
		background: url('../img/mainHome_m.png');
	}


	.mainBox_img_3{
		background: url('../img/mainOffice_m.png');
	}

	
	.mainBox_img_4{
		background: url('../img/mainCommercial_m.png');
		background-position: bottom;
	}

	
	.mainBox_img_2,
	.mainBox_img_3,
	.mainBox_img_4{
		position: relative;
		
		flex: 1 0 0;
		align-self: stretch;
		background-size: cover;
		background-position: center; 
	}	
	


	.mainBox_2_txt span,
	.mainBox_3_txt span,	
	.mainBox_4_txt span{
		color: var(--grey-100, #FAFAFA);
		
		/* M_caption1 */
		font-family: Pretendard;
		font-size: 12px;
		font-style: normal;
		font-weight: 600;
		line-height: 140%; /* 16.8px */
		letter-spacing: -0.24px;
	}


	.mainBox_2_txt,
	.mainBox_4_txt{
		position: absolute;
		left: 12px;
		bottom: 6.333px;
	}

	
	.mainBox_3_txt{
		position: absolute;
		left: 12px;
		bottom: 6.667px;
	}
	
	
	
	/* 햄버거 메뉴 */
	
	.hide{
		display: none;
	}
	
	.hamberger_menu{
		z-index: 99;
		width: 100%;
		
		
		display: flex;
		padding: 0px 20px;
		flex-direction: column;
		justify-content: center;
		align-items: flex-end;
		gap: 24px;
		flex: 1 0 0;
		align-self: stretch;
	}
	
	
	.ham{
		display: flex;
		padding-bottom: 0px;
		justify-content: center;
		align-items: flex-end;
		gap: 10px;
		align-self: stretch;
		
		border-bottom: 1px solid var(--grey-200, #E5E5E5);
	}
	
	
	.ham span{
		flex: 1 0 0;
		
		color: var(--grey-400, #959595);
		text-align: right;
		font-family: Pretendard;
		font-size: 24px;
		font-style: normal;
		font-weight: 400;
		line-height: 140%; /* 33.6px */
		letter-spacing: -0.48px;
	}
	
	
}