/*
(주)파이브센스_FIVESENSES.Corp.
파이브프로_FIVEPro_웹솔루션.
본 라이브러리(소스코드 및 디자인 포함)는 (주)파이브센스의 자산이며, 저작권법 및 부정경쟁방지법에 의해 보호됩니다.
무단 사용, 외부 유출, 복제, 배포, 변형을 금지합니다.
위반 시 민·형사상 법적 책임 및 손해배상 청구 대상이 됩니다.
작성일: 2025-03-18 | 저작권자: (주)파이브센스(520-86-01244) | All Rights Reserved.
*/

/* 42.56 */
.BF3_4 {background: linear-gradient(to right, #000 44.27%, white 44.27%);}
.BF3_4 > .container_fix {padding:0;}
.BF3_4 .container_fix > li {display: flex; }

/* LEFT */
.BF3_4 .left_area {width: 50.8%;}
.BF3_4 .left_area h2 {width: 85%; font-size: 50px; font-weight: bold; color: #fff; margin-bottom: 20px; font-family: 'Orbitron', sans-serif;}
.BF3_4 .left_area .desc {width: 85%; font-size: 18px; font-weight: 500; line-height: 160%; color: #fff; margin-bottom: 75px;}
.BF3_4 .left_area figure {position: relative; border-radius: 0 150px 0 0; overflow: hidden;}
.BF3_4 .left_area figure a {display: block; width: 100%; height: auto;}
.BF3_4 .left_area figure img {display: block; width: 100%;}
.BF3_4 .left_area figure h4 {position: absolute; bottom: 25px; left: 33px; font-size: 27px; font-weight: bold; color: #fff; font-family :"Poppins", sans-serif;}

/* RIGHT */
.BF3_4 .right_area {width: 49.2%; padding-left: 8.7%; position: relative;}
.BF3_4 .right_area > ul {display: flex; flex-wrap: wrap; gap: 40px; position: relative;top: 38px;}
.BF3_4 .right_area > ul > li {width: calc((100% - 40px) / 2);}
.BF3_4 .right_area > ul > li:nth-child(2n) {position: relative; top: 145px;}
.BF3_4 .right_area > ul > li figure {position: relative; border-radius: 0px; overflow: hidden;}
.BF3_4 .right_area > ul > li figure a {display: block; width: 100%; height: 100%;}
.BF3_4 .right_area > ul > li figure img {display: block; width: 100%;}
.BF3_4 .right_area > ul > li figure h4 {position: absolute; bottom: 25px; left: 30px; font-size: 20px; font-weight: bold; color: #fff; font-family :"Poppins", sans-serif;}
.BF3_4 .slogun {position: absolute; bottom: -5px; right: 0;}
.BF3_4 .slogun img {display: block; margin-left: auto;}
.BF3_4 .slogun .subtext {font-size: 18px; line-height: 32px; color: #9b9b9b; font-weight: 400; display: inline-block; margin-top: 9px; font-family :"Poppins", sans-serif;}

/* 모바일 */
@media (max-width: 991px) {
	/* 42.56 */
	.BF3_4 {background: linear-gradient(to bottom, #000 33%, white 33%);}
	.BF3_4 > .container_fix {padding:0 15px;}
	.BF3_4 .container_fix > li {flex-direction: column; gap: 24px;}

	/* LEFT */
	.BF3_4 .left_area {width: 100%;}
	.BF3_4 .left_area h2 {width: 100%; font-size: 25px; margin-bottom: 7px; text-align: left;}
	.BF3_4 .left_area .desc {width: 100%; font-size: 15px; margin-bottom: 32px; text-align: left;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical; line-height:160%; opacity:0.7;}
	.BF3_4 .left_area figure {border-radius: 0 50px 0 0;}
	.BF3_4 .left_area figure h4 {bottom: 14px; left: 18px; font-size: 20px;}

	/* RIGHT */
	.BF3_4 .right_area {width: 100%; padding-left: 0;}
	.BF3_4 .right_area > ul {flex-direction: column; gap: 15px; top: 0;}
	.BF3_4 .right_area > ul > li {width: 100%;}
	.BF3_4 .right_area > ul > li:nth-child(2n) {position: relative; top: 0;}
	.BF3_4 .right_area > ul > li figure img {display: block; width: 100%;}
	.BF3_4 .right_area > ul > li figure h4 {bottom: 12px; left: 18px; font-size: 20px;}

	.BF3_4 .slogun {position:relative; text-align:right; margin-top:25px;}
	.BF3_4 .slogun img {}
	.BF3_4 .slogun .subtext {font-size:14px; margin-top:8px;}
}