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

/* 타이틀 */
.BF3_5 .main_cont_title {margin-bottom: 55px; text-align: center; position: relative;}
.BF3_5 .main_cont_title h2 {font-size: 72px;font-weight: bold;color: #0c0c0c; line-height: 1.45; text-align: left;}
.BF3_5 .main_cont_title .desc {font-size: 20px;font-weight: 500;color: #5d5d5d; line-height: 1.5; margin-top: 3px; text-align: left;}
.BF3_5 .main_cont_title .main_cont_title_link {position: absolute; bottom: 0; right: 0; z-index:2;}
.BF3_5 .main_cont_title .main_cont_title_link a {display: flex;align-items: center;justify-content: center; font-size: 17px; font-weight: bold; line-height: 28px; gap: 14px; color: #1c2028;}

.BF3_5 > .container_fix {padding:0;}
.BF3_5 .container_fix > li {display: flex; }

/* LEFT */
.BF3_5 .left_area {width: 43.58%;}
.BF3_5 .left_area figure {position: relative; border-radius: 20px; overflow: hidden;}
.BF3_5 .left_area figure img {display: block; width: 100%;}
.BF3_5 .left_area figure .left_img_txt {position: absolute; top: 44px; left: 50px; color: #fff;}
.BF3_5 .left_area figure .left_img_txt h2 {font-size: 27px; font-weight: bold; margin-bottom: 14px;}
.BF3_5 .left_area figure .left_img_txt .desc {font-size: 18px; font-weight: 400; line-height: 28px;}

/* RIGHT */
.BF3_5 .right_area {width: calc((100% - 43.58%) - 20px);position: relative; display: flex; flex-direction: column; justify-content: space-between; margin-left: 20px;}
.BF3_5 .right_area > ul {display: flex; flex-wrap: wrap; gap: 18px 20px; position: relative; flex: 1;}
.BF3_5 .right_area > ul > li {width: calc((100% - 20px) / 2);}
.BF3_5 .right_area > ul > li .icon_box {position: relative; border-radius: 20px; overflow: hidden; background-color: #fff; height: 100%; transition: all 400ms; border:1px solid #e1e1e1;}
.BF3_5 .right_area > ul > li .icon_box .icon_box_txt {padding: 46px 35px 46px 38px;}
.BF3_5 .right_area > ul > li .icon_box .icon_box_txt h4 {font-size: 27px; font-weight: bold; margin-bottom: 13px; color: #1c2028; transition: all 400ms;}
.BF3_5 .right_area > ul > li .icon_box .icon_box_txt .desc {font-size: 18px; font-weight: 400; line-height: 28px; color: #5d5d5d; transition: all 400ms;}
.BF3_5 .right_area > ul > li .icon_box .icon_box_link {position: absolute; bottom: 30px; right: 30px; }

/* HOVER */
.BF3_5 .right_area > ul > li:hover .icon_box {background-color: #003669;}
.BF3_5 .right_area > ul > li:hover .icon_box .icon_box_txt h4 {color: #fff;}
.BF3_5 .right_area > ul > li:hover .icon_box .icon_box_txt .desc {color: #fff;}

/* 모바일 */
@media (max-width: 991px) {
	.BF3_5 > .container_fix {padding:0 15px;}
	/* 타이틀 */
	.BF3_5 .main_cont_title {margin-bottom: 40px;}
	.BF3_5 .main_cont_title h2 {font-size: 31.5px; line-height: 1.704; text-align: center;}
	.BF3_5 .main_cont_title .desc {font-size: 15px;line-height: 23px; margin-top: 3px; text-align: center;}

	.BF3_5 .container_fix > li {flex-direction: column; gap: 15px;}

	/* LEFT */
	.BF3_5 .left_area {width: 100%;}
	.BF3_5 .left_area figure {border-radius: 14.5px;}
	.BF3_5 .left_area figure .left_img_txt {top: 30px; left: 30px;}
	.BF3_5 .left_area figure .left_img_txt h2 {font-size: 20px; margin-bottom: 10px;}
	.BF3_5 .left_area figure .left_img_txt .desc {font-size: 15px; line-height: 23px;}

	/* RIGHT */
	.BF3_5 .right_area {width: 100%; margin-left: 0;}
	.BF3_5 .right_area > ul {display: flex; flex-wrap: wrap; gap: 15px; position: relative; flex: 1;}
	.BF3_5 .right_area > ul > li {width: calc((100% - 15px) / 2);}
	.BF3_5 .right_area > ul > li .icon_box {border-radius: 12.5px; min-height: 202px;}
	.BF3_5 .right_area > ul > li .icon_box .icon_box_txt {padding: 30px;}
	.BF3_5 .right_area > ul > li .icon_box .icon_box_txt h4 {font-size: 20px; margin-bottom: 8px; word-break:keep-all; line-height:28px;}
	.BF3_5 .right_area > ul > li .icon_box .icon_box_txt .desc {font-size: 15px; line-height: 23px; word-break: keep-all;}
	.BF3_5 .right_area > ul > li .icon_box .icon_box_link {position: absolute; bottom: 18px; right: 18px; transform: scale(0.8);}
	
	.BF3_5 .bottom_link {margin-top: 56px;}
	.BF3_5 .bottom_link a {display: flex; justify-content: center; align-items: center; font-size: 15px; font-weight:700; gap:10px;}
	.BF3_5 .bottom_link a span img {transform: scale(0.9);}
}