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

/* 왼쪽 배경영역 */
.BF3_3 .sec {display: flex;}
.BF3_3 .sec > div {width: 50%;}

.BF3_3 .sec > .right_area {display: flex; flex-direction: column;}
/* 상단 텍스트영역 */
.BF3_3 .sec > .right_area .rt_top_area {background-color: #fff; height: 50%; display: flex;flex-direction: column;justify-content: center; padding-left: 9.825%;}
.BF3_3 .sec > .right_area .rt_top_area .cate {font-size: 20px; font-weight: 500; color:#7f69bc; letter-spacing: 6px;}
.BF3_3 .sec > .right_area .rt_top_area h2 {font-size: 40px; font-weight: 700; margin-top: 22px; color:#111111;}
.BF3_3 .sec > .right_area .rt_top_area .desc {font-size: 20px; font-weight: 500; color: #777777; line-height: 30px; margin-top: 30px;}

/* 하단 아이콘영역 */
.BF3_3 .sec > .right_area .rt_bot_area {position: relative; height: 50%; z-index:2}
.BF3_3 .sec > .right_area .rt_bot_area > ul {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; gap: 25px; padding-top:40px;}
.BF3_3 .sec > .right_area .rt_bot_area > ul > li .icon_inner {display: flex; width: 100%; height: 100%; flex-direction: column; align-items: center;}
.BF3_3 .sec > .right_area .rt_bot_area > ul > li .icon_inner .icon_box {display: flex; justify-content: center; align-items: center; width: 120px; height: 120px; border-radius: 100%; background-color: rgba(255, 255, 255, .1); transition: .2s;}
.BF3_3 .sec > .right_area .rt_bot_area > ul > li:hover .icon_inner .icon_box {background-color: rgba(255, 255, 255, .22);}
.BF3_3 .sec > .right_area .rt_bot_area > ul > li .icon_inner .icon_box img {width: 100%; height: 100%; object-fit: scale-down;}
.BF3_3 .sec > .right_area .rt_bot_area > ul > li .icon_inner h4 {text-align: center; color: #fff; margin-top: 24px; font-size: 20px; font-weight: 600; text-wrap:nowrap;}

/* 최적화 반응형 */
@media (max-width: 1440px) {
	.BF3_3 .sec > .right_area .rt_top_area .cate {font-size: 16px;}
	.BF3_3 .sec > .right_area .rt_top_area h2 {font-size: 43px; margin-top: 20px;}
	.BF3_3 .sec > .right_area .rt_top_area .desc {font-size: 14px; margin-top: 35px;}
	
	.BF3_3 .sec > .right_area .rt_bot_area > ul {gap: 40px;}
	.BF3_3 .sec > .right_area .rt_bot_area > ul > li .icon_inner .icon_box {width: 96px; height: 96px;}
	.BF3_3 .sec > .right_area .rt_bot_area > ul > li .icon_inner .icon_box img {transform: scale(0.8);}
	.BF3_3 .sec > .right_area .rt_bot_area > ul > li .icon_inner h4 {margin-top: 24px; font-size: 16px;}
}

/* 모바일 */
@media (max-width: 991px) {
	.BF3_3 .sec {flex-direction: column;}
	.BF3_3 .sec > div {width: 100%;}

	.BF3_3 .sec > .right_area {display: flex; flex-direction: column;}
	/* 상단 텍스트영역 */
	.BF3_3 .sec > .right_area .rt_top_area {height: auto; padding-left: 0; text-align: center; padding: 48px 0 48px;}
	.BF3_3 .sec > .right_area .rt_top_area .cate {font-size: 15px; letter-spacing: 4px;}
	.BF3_3 .sec > .right_area .rt_top_area h2 {font-size: 31.5px; line-height:41px; margin-top:8px;}
	.BF3_3 .sec > .right_area .rt_top_area .desc {font-size: 15px; line-height: 23px; margin-top: 22px;}

	/* 하단 아이콘영역 */
	.BF3_3 .sec > .right_area .rt_bot_area {height: auto;}
	.BF3_3 .sec > .right_area .rt_bot_area > ul {gap: 24px; padding-top: 13px;}
	.BF3_3 .sec > .right_area .rt_bot_area > ul > li .icon_inner .icon_box {width: 77px; height: 77px;}
	.BF3_3 .sec > .right_area .rt_bot_area > ul > li .icon_inner .icon_box img {transform: scale(0.6);}
	.BF3_3 .sec > .right_area .rt_bot_area > ul > li .icon_inner h4 {margin-top: 8px; font-size: 15px; line-height: 20px;}

}