@charset "UTF-8";

/* ----------- footer -----------*/

/******************** WEB********************/


/*761*/
@media all and (min-width:1167px) {
	
	footer {
		display: flex;
		padding: 80px 20px 56px 20px;
		flex-direction: column;
		align-items: flex-start;
		gap: 56px;
		align-self: stretch;

		background: var(--grey-100, #FAFAFA);
	}


	.footer_il {
		display: flex;
		align-items: flex-start;
		align-content: flex-start;
		gap: 40px;
		align-self: stretch;
		flex-wrap: wrap;
	}


	.il_1,
	.il_2,
	.il_3,
	.il_4 {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		flex: 1 0 0;
	}

	.il_1_1,
	.il_3_1,
	.il_4_1 {
		display: flex;
		width: 132px;
		height: 1px;
		align-items: flex-start;
		gap: 10px;
	}


	.il_2_1 {
		display: flex;
		align-items: flex-start;
		gap: 10px;
	}


	.il_2_1 span {
		color: var(--brown-800, #2E1403);
		font-family: Pretendard;
		font-size: 40px;
		font-style: normal;
		font-weight: 900;
		line-height: 140%;
		/* 56px */
		letter-spacing: -0.8px;
	}


	/* 대표 주소 이메일 전화번호 */
	.footerInfo {
		display: flex;
		align-items: flex-start;
		align-content: flex-start;
		gap: 20px;
		align-self: stretch;
		flex-wrap: wrap;
	}


	.footerInfo_left {
		display: flex;
		align-items: flex-start;
		align-content: flex-start;
		gap: 20px;
		flex: 1 0 0;
		flex-wrap: wrap;
	}


	.footerInfo_leftInfo1{
/*		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 24px;
		flex: 1 0 0;*/
		display: flex;
		height: 56px;
		padding-top: 56px;
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
		flex: 1 0 0;
	}

	.footerInfo_leftInfo2{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
		flex: 1 0 0;
	}


	.ceoBox,
	.mailBox,
	.adrBox,
	.phoneBox {
		display: flex;
		align-items: center;
		gap: 16px;
		align-self: stretch;
	}


	.ceo1,
	.mail1,
	.phone1,
	.adr1 {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10px;
	}


	.ceo1 span,
	.mail1 span,
	.phone1 span,
	.adr1 span {
		color: var(--grey-600, #454545);

		font-family: Pretendard;
		font-size: 20px;
		font-style: normal;
		font-weight: 600;
		line-height: 180%;
		/*  36px */
		letter-spacing: -0.4px;
	}



	.ceo2,
	.mail2,
	.phone2,
	.adr2 {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10px;
		flex: 1 0 0;
	}



	.ceo2 span,
	.mail2 span,
	.phone2 span,
	.adr2 span {
		flex: 1 0 0;

		color: var(--grey-500, #6D6D6D);
		font-family: Pretendard;
		font-size: 20px;
		font-style: normal;
		font-weight: 400;
		line-height: 140%;
		/* 28px */
		letter-spacing: -0.4px;
	}


	.footerInfo_right {
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
		align-content: flex-end;
		gap: 20px;
		flex: 1 0 0;
		flex-wrap: wrap;
	}


	.footerInfo_rightInfo1 {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
		flex: 1 0 0;
	}



	/*	 카피라이트*/
	.footerInfo_rightInfo2 {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-end;
		gap: 24px;
		flex: 1 0 0;
	}


	.footerInfo_rightInfo2 copy {
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
		gap: 10px;
		align-self: stretch;
	}

	
	.copy span {

		flex: 1 0 0;

		color: var(--grey-400, #959595);
		text-align: right;
		font-family: Pretendard;
		font-size: 16px;
		font-style: normal;
		font-weight: 400;
		line-height: 140%;
		/* 22.4px */
		letter-spacing: -0.32px;
	}
}






/******************** MIDDLE ********************/
@media all and (max-width: 1179px){
	
}


@media all and (min-width:761px) and (max-width: 1166px){
		
footer {
		display: flex;
		padding: 80px 20px 56px 20px;
		flex-direction: column;
		align-items: flex-start;
		gap: 56px;
		align-self: stretch;

		background: var(--grey-100, #FAFAFA);
	}


	.footer_il {
		display: flex;
		align-items: flex-start;
		align-content: flex-start;
		gap: 40px;
		align-self: stretch;
		flex-wrap: wrap;
	}


	.il_1,
	.il_2,
	.il_3,
	.il_4 {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		flex: 1 0 0;
	}

	.il_1_1,
	.il_3_1,
	.il_4_1 {
		display: flex;
		width: 132px;
		height: 1px;
		align-items: flex-start;
		gap: 10px;
	}


	/**/
	.il_2 {
		
		margin-left: -10%;
/*		position: absolute;
		left: 20%;
		padding-bottom: 56px;*/
	}


	.il_2_1 {
		display: flex;
		align-items: flex-start;
		gap: 10px;
	}


	.il_2_1 span {
		color: var(--brown-800, #2E1403);
		font-family: Pretendard;
		font-size: 40px;
		font-style: normal;
		font-weight: 900;
		line-height: 140%;
		/* 56px */
		letter-spacing: -0.8px;
	}


	
	
	
	
	
		/* 대표 주소 이메일 전화번호 */
	.footerInfo {
		display: flex;
		align-items: flex-start;
		align-content: flex-start;
		gap: 20px;
		align-self: stretch;
		flex-wrap: wrap;
	}


	.footerInfo_left {
		display: flex;
		align-items: flex-start;
		align-content: flex-start;
		gap: 20px;
		flex: 1 0 0;
		flex-wrap: wrap;
	}


	.footerInfo_leftInfo1{
/*		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 24px;
		flex: 1 0 0;*/
		display: flex;
		height: 56px;
		padding-top: 56px;
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
		flex: 1 0 0;
	}

	.footerInfo_leftInfo2{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
		/*flex: 1 0 0;*/
	}


	.ceoBox,
	.mailBox,
	.adrBox,
	.phoneBox {
		display: flex;
		align-items: center;
		gap: 16px;
		align-self: stretch;
	}


	.ceo1,
	.mail1,
	.phone1,
	.adr1 {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10px;
	}


	.ceo1 span,
	.mail1 span,
	.phone1 span,
	.adr1 span {
		color: var(--grey-600, #454545);

		font-family: Pretendard;
		font-size: 20px;
		font-style: normal;
		font-weight: 600;
		line-height: 180%;
		/*  36px */
		letter-spacing: -0.4px;
	}



	.ceo2,
	.mail2,
	.phone2,
	.adr2 {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10px;
		flex: 1 0 0;
	}


	.ceo2 span,
	.mail2 span,
	.phone2 span,
	.adr2 span {
		flex: 1 0 0;

		color: var(--grey-500, #6D6D6D);
		font-family: Pretendard;
		font-size: 20px;
		font-style: normal;
		font-weight: 400;
		line-height: 140%;
		/* 28px */
		letter-spacing: -0.4px;
	}


	.footerInfo_right {
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
		align-content: flex-end;
		gap: 20px;
		flex: 1 0 0;
		flex-wrap: wrap;
	}


	.footerInfo_rightInfo1 {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
		/*flex: 1 0 0;*/
	}



	/*	 카피라이트*/
	.footerInfo_rightInfo2 {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-end;
		gap: 24px;
		flex: 1 0 0;
	}


	.footerInfo_rightInfo2 copy {
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
		gap: 10px;
		align-self: stretch;
	}

	
	.copy span {

		flex: 1 0 0;

		color: var(--grey-400, #959595);
		text-align: right;
		font-family: Pretendard;
		font-size: 16px;
		font-style: normal;
		font-weight: 400;
		line-height: 140%;
		/* 22.4px */
		letter-spacing: -0.32px;
	}
	
	
	

}



/* 푸터 문자 길이가 길어서 css 깨짐 현상이 여러 곳에서 발생해서 
이렇게 하고 있는데 이게 맞는 건가 */
@media all and (max-width: 815px) {
	
	.footerInfo_left {
   		margin-top: 20px;
	}
}


@media all and (max-width: 774px) {
	
	.footerInfo_right {
    	margin-top: 20px;
    }
}





/******************** MOBILE ********************/
@media all /*and (min-width: 360px)*/ and (max-width: 760px) {


	/* 푸터 */
	footer {
		/*padding-top: 240px;*/
		display: flex;
		padding: 80px 20px 56px 20px;
		flex-direction: column;
		align-items: flex-start;
		gap: 40px;
		align-self: stretch;

		background: var(--grey-100, #FAFAFA);
	}



	.il_2_1 {
		display: flex;
		padding-right: 0px;
		align-items: center;
		align-self: stretch;
	}
	
	
		img {
		width: 76.364px;
		height: 20px;
	}


	.il_2_1 span {
		color: var(--brown-800, #2E1403);
		font-family: Pretendard;
		font-size: 24px;
		font-style: normal;
		font-weight: 900;
		line-height: 140%;
		/* 33.6px */
		letter-spacing: -0.48px;
	}



	.footerInfo {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		align-self: stretch;
	}


	.footerInfo_left {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		align-self: stretch;
	}


	.footerInfo_leftInfo1 {
		display: none;
	}


	.footerInfo_leftInfo2,
	.footerInfo_rightInfo1 {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		align-self: stretch;
	}


	.ceoBox,
	.mailBox,
	.phoneBox,
	.adrBox {
		display: flex;
		align-items: center;
		gap: 8px;
		align-self: stretch;
	}

	.ceo1,
	.mail1,
	.phone1,
	.adr1 {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10px;
	}


	.ceo1 span,
	.phone1 span,
	.mail1 span,
	.adr1 span {
		color: var(--grey-600, #454545);
		font-family: Pretendard;
		font-size: 14px;
		font-style: normal;
		font-weight: 600;
		line-height: 180%;
		/* 25.2px */
		letter-spacing: -0.28px;
	}


	.ceo2,
	.adr2 {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10px;
		flex: 1 0 0;
	}


	.ceo2 span,
	.adr2 span {
		flex: 1 0 0;
		color: var(--grey-500, #6D6D6D);
		font-family: Pretendard;
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: 140%;
		/* 19.6px */
		letter-spacing: -0.28px;
	}



	.mail1 span,
	.phone1 span {
		color: var(--grey-600, #454545);
		font-family: Pretendard;
		font-size: 14px;
		font-style: normal;
		font-weight: 600;
		line-height: 180%;
		/* 25.2px */
		letter-spacing: -0.28px;
	}


	.mail2,
	.phone2 {
		flex: 1 0 0;
	}


	.mail2 span,
	.phone2 span {
		color: var(--grey-500, #6D6D6D);
		font-family: Pretendard;
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: 140%;
		/* 19.6px */
		letter-spacing: -0.28px;
	}


	.footerInfo_right {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-end;
		gap: 20px;
		align-self: stretch;
	}


	.phone2 {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		flex: 1 0 0;
	}



	.footerInfo_rightInfo2 {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-end;
		gap: 24px;
		align-self: stretch;
	}


	.copy {
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
		gap: 10px;
		align-self: stretch;
	}


	.copy span {
		flex: 1 0 0;

		color: var(--grey-400, #959595);
		text-align: right;
		font-family: Pretendard;
		font-size: 12px;
		font-style: normal;
		font-weight: 400;
		line-height: 140%;
		/* 16.8px */
		letter-spacing: -0.24px;
	}










}