@charset "utf-8";

/* ==================================================
	공통사항
================================================== */
.cont_inner {
	width: 100%;
	margin-top: 4rem;
}

.cont_inner2 {
	width: 100%;
	margin-top: 6rem;
}

/* 애니메이션 */
.cont_inner {
	opacity: 0;
	transform: translateY(50px)
}

.cont_inner.active {
	opacity: 1;
	transform: translateY(0);
	transition: all 0.7s 0.8s;
	-webkit-transition: all 0.7s 0.8s;
}

/* 모바일CSS */
@media screen and (max-width:1023px) {
	.cont_inner {
		margin-top: 0;
	}

	.cont_inner2 {
		margin-top: 4rem;
	}
}

/* ==================================================
	아이콘
================================================== */
.con_title {
	position: relative;
	font-size: 2.6rem;
	font-weight: var(--font-sb);
	padding-left: 1.8rem;
}

.con_title:before {
	content: "";
	position: absolute;
	top: 0.2rem;
	left: 0;
	width: 0.5rem;
	height: 2.4rem;
	background: var(--brand-color-main);
}

.dot_title {
	position: relative;
	font-size: 3.5rem;
	font-weight: var(--font-bd);
}

.dot_title:after {
	content: "";
	width: 0.8rem;
	height: 0.8rem;
	background: var(--brand-color-sub);
	border-radius: 50%;
	display: inline-block;
	margin-left: 0.5rem;
}

.dot_title2 {
	position: relative;
	font-size: 3.2rem;
	font-weight: var(--font-bd);
}

.dot_title2:after {
	content: "";
	width: 0.8rem;
	height: 0.8rem;
	background: var(--brand-color-sub);
	border-radius: 50%;
	display: inline-block;
	margin-left: 0.5rem;
}

.l-list01 {
	line-height: 1.2;
	font-size: 1.8rem;
}

.l-list01>li {
	position: relative;
	padding-left: 1.5rem;
	margin-top: 1rem;
	color: #606060;
}

.l-list01>li:first-child {
	margin-top: 0;
}

.l-list01>li:before {
	content: "";
	position: absolute;
	top: 0.9rem;
	left: 0;
	width: 0.5rem;
	height: 0.5rem;
	background: #b8b8b8;
}

.l-list01>li span {
	font-weight: var(--font-bd);
}

.width_line_list {
	margin-top: 0.5rem;
	font-size: 1.6rem;
}

.width_line_list>li:before {
	position: absolute;
	top: 0.9rem;
	left: 0;
	content: "";
	display: block;
	width: 0.5rem;
	height: 1px;
	background: #a0a0a0;
}

.width_line_list>li {
	position: relative;
	padding-left: 1.4rem;
	margin-bottom: 0.3rem;
}

.width_line_list>li:last-child {
	margin-bottom: 0;
}

.a-tit01 {
	font-size: 2.2rem;
	background: url('../images/icon/arrow_icon.svg') no-repeat 0 0.3rem;
	background-repeat: no-repeat;
	padding-left: 2.7rem;
	line-height: 1.4;
}

/* 모바일CSS */
@media screen and (max-width:1023px) {
	.con_title {
		font-size: 2.4rem;
		padding-left: 1.7rem;
	}

	.con_title:before {
		height: 2.2rem;
	}

	.l-list01 {
		font-size: 17px;
	}

	.l-list01>li:before {
		top: 9px;
		width: 5px;
		height: 5px;
	}

	.a-tit01 {
		font-size: 18px;
		padding-left: 3rem;
	}
}

/* ==================================================
	테이블
================================================== */
table.chart01 {
	width: 100%;
	border-top: solid 2px #c5cbcf;
	border-bottom: solid 2px #c5cbcf;
	font-size: 1.5rem;
	letter-spacing: -0.025em;
}

table.chart01 tr th {
	background-color: #e2e5e7;
	text-align: center;
	color: var(--color-black);
	font-weight: var(--font-bd);
}

/*table.chart01 td {
	padding-left: 2.5rem !important;
	line-height: 1.35;
}*/

table.chart01 tr th,
table.chart01 tr td {
	padding: 1rem 0.2rem;
	border-bottom: solid 1px #c5cbcf;
	border-left: 1px solid #c5cbcf;
	vertical-align: middle;
}

table.chart01 tr th:first-child,
table.chart01 tr td:first-child {
	border-left: 0;
}

table.chart01 tr td.ch_bl {
	border-left: 1px solid #c5cbcf;
}

table.chart01 tr td.ch_bg {
	background: #f8f8f8;
}

table.chart02 {
	width: 100%;
	border-top: solid 1px #262626;
	border-bottom: solid 1px #cdcdcd;
	text-align: center;
	font-size: 1.7rem;
}

table.chart02 tr th {
	background-color: #E5E5E5;
	color: var(--color-black);
	font-weight: var(--font-bd);
}

table.chart02 tr th:first-child {
	border-left: 0;
}

table.chart02 tr td {
	line-height: 1.35;
}

table.chart02 tr td:first-child {
	background: #F8F8F8;
	border-left: 0;
	font-weight: var(--font-sb);
}

table.chart02 tr th,
table.chart02 tr td {
	padding: 1.3rem 0.3rem;
	border-bottom: solid 1px #cdcdcd;
	vertical-align: middle;
	border-left: solid 1px #cdcdcd;
}

/* 테이블 사이즈 */
.chart01_width {
	width: 25%;
}

.chart02_width01 {
	width: 35%;
}

.chart02_width02 {
	width: 50%;
}

.chart02_width03 {
	width: 15%;
}

/* 모바일CSS */
@media screen and (max-width: 1023px) {
	table.chart01 {
		font-size: 1.6rem;
	}

	table.chart02 {
		font-size: 1.6rem;
	}
}

@media screen and (max-width: 640px) {

	table.chart02 tr th,
	table.chart02 tr td {
		padding: 1.3rem 1rem;
	}
}



/* ==================================================
	반응형 테이블 스크롤
================================================== */
.msg_touch_help {
	display: none;
}

/* 모바일CSS */
@media screen and (max-width:720px) {
	.con_table_wrap {
		overflow-x: auto;
	}

	.con_table_wrap {
		position: relative;
	}

	.table_scroll {
		width: 100%;
		
	}

	.msg_touch_help {
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -40px;
		margin-top: -40px;
		display: block;
	}

	.msg_touch_help img {
		width: 100px;
		height: 100px;
	}
}

/* ==================================================
	애니메이션
================================================== */
@-webkit-keyframes fadeUpAni {
	0% {
		opacity: 0;
		transform: translate3d(0, 54px, 0);
	}

	100% {
		opacity: 1;
		transform: translate3d(0, 0px, 0);
	}
}

.fadeUp.active {
	animation-name: fadeUpAni;
	animation-duration: 2s;
}

/* ==================================================
	이미지 움직이는 효과
================================================== */
.over-cover {
	overflow: hidden;
	position: relative;
	display: inline-block;
	line-height: 0;
	border-radius: 1rem;
}

.over-cover img {
	width: 100%;
	height: 100%;
	-webkit-transition: all 0.5s linear;
	transition: all 0.5s linear;
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
}

.over-cover:hover img {
	-webkit-transform: scale3d(1.2, 1.2, 1);
	transform: scale3d(1.2, 1.2, 1);
}

/* ==================================================
	영상
================================================== */
.movie_con {
	text-align: center;
}

.movie_con video {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	border: 1px solid #d7d7d7;
}

.promovie_con {
	text-align: center;
}

.promovie_con video {
	width: 100%;
	max-width: 1000px;
}

/* ==================================================
	유튜브 영상
================================================== */
.youtubeWrap {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 35px;
	height: 0;
	overflow: hidden
}

.youtubeWrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1
}

.youtubeWrap .btn_prev,
.youtubeWrap .btn_next {
	display: inline-block;
	position: absolute;
	top: 50%;
	margin-top: -45px;
	z-index: 100;
	background: rgba(0, 0, 0, 0.6);
	color: var(--color-white)
}

.youtubeWrap .btn_prev {
	left: 0
}

.youtubeWrap .btn_next {
	right: 0
}

.youtubeWrap .btn_prev>img {
	float: left
}

.youtubeWrap .btn_next>img {
	float: right
}

.youtubeWrap .btn_prev>span,
.youtubeWrap .btn_next>span {
	display: inline-block;
	float: left;
	height: 90px;
	padding: 0 15px;
	margin: 20px 0;
	max-height: 50px;
	max-width: 180px;
	font-size: 16px;
	display: block;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	display: none;
}

.youtubeWrap .btn_prev:hover>span,
.youtubeWrap .btn_prev:focus>span,
.youtubeWrap .btn_next:hover>span,
.youtubeWrap .btn_next:focus>span {
	display: inline-block
}

.overveiw-wrap {
	/* overflow: hidden; */
}

/* ==================================================
	탭메뉴1
================================================== */
#mlayer_menu {
	margin: -10rem auto 0 auto;
	padding: 3rem 13rem;
	width: 100%;
	background-color: var(--color-gray1);
    border-radius: 1.5rem;
}
#mlayer_menu ul{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10rem;
	align-items: center;
}

#mlayer_menu ul li {	
	position: relative;
	width: 100%;
}
#mlayer_menu ul li::after{
	content: "";
    width: 25px;
    height: 50px;
    background: url('../images/about/his_arrow01.png');
	background-repeat: no-repeat;
    position: absolute;
    right: -50px;
	top: 50%;
	transform: translateY(-50%);
}
#mlayer_menu ul li:last-child::after{
	content: none;
}
#mlayer_menu ul li button {
	padding: 2rem 0;
	width: 100%;
	text-decoration: none;
	font-size: var(--rem-22);
	text-align: center;
	cursor: pointer;
	background: var(--color-white);
    border-radius: 1rem;
}

#mlayer_menu ul li button.on {
	color: var(--color-white);
	font-weight: var(--font-bd);
	background-color: var(--brand-color-main);
}
#mlayer_menu ul li button p{
	font-size: var(--rem-30);
	font-weight: var(--font-sb);
}
#mlayer_menu ul li button p span{
	padding: 0.5rem 0 0 0;
	display: block;
	font-size: var(--rem-18);
	font-weight: normal;
}

/*** 모바일CSS ***/
@media all and (max-width:1024px){
	#mlayer_menu{
		padding: 3rem 5rem;
	}
}


@media all and (max-width:800px) {
	#mlayer_menu ul li button p{
		font-size: var(--rem-24);
	}
	#mlayer_menu ul li button p span{
	padding: 0 0 0 1rem;
}
}

@media all and (max-width:640px) {	
	#mlayer_menu {
		padding: 3rem 2rem;
	}
	#mlayer_menu ul{
		grid-template-columns: repeat(1, 3fr);
		gap: 1rem;
	}	
	#mlayer_menu ul li button p{
		font-size: var(--rem-20);
		line-height: 1.4;
	}
	#mlayer_menu ul li::after{
		content: none;
	}
}
/* ==================================================
	탭메뉴2
================================================== */
#mlayer2_menu {
	margin-bottom: 15px;
}
#mlayer2_menu ul{
	display: flex;
	padding: 2px 0;
	border-top: solid 1px var(--color-black);
	border-bottom: solid 1px var(--color-gray2);
}
#mlayer2_menu ul:after {
	content: '';
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

#mlayer2_menu ul li {
	position: relative;
	width: 50%;
	line-height: 1.1;
	font-size: var(--rem-30);
}
#mlayer2_menu ul li:nth-child(1){
	padding-right: 0.5rem;
}

#mlayer2_menu ul li button {
	position: relative;
	padding: 1.2rem 0;
	display: block;
	width: 100%;
	text-decoration: none;
	color: var(--color-gray3);
	text-align: center;
	cursor: pointer;
	font-size: var(--rem-22);
	background-color: var(--color-gray1);
}

#mlayer2_menu ul li button.on {
	font-weight: var(--font-sb);
	color: var(--color-white);
	background-color: #8098CC;
}

/*** 모바일CSS ***/
@media all and (max-width:900px) {
	#mlayer2_menu ul li {
		width: 50%;
		margin-top: -1px;
	}

	#mlayer2_menu ul li button {
		padding: 15px 3px;
		/* font-size: 1.8rem; */
	}
}

@media all and (max-width:640px) {

	#mlayer2_menu ul li button {
		font-size: 2rem;
	}
}

@media all and (max-width:450px) {
	#mlayer2_menu ul li {
		padding: 0;
	}

	#mlayer2_menu ul li button {
		/* font-size: 1.4rem; */
	}
}


/* ==================================================
	여백 및 정렬 등 세부 공통사항
================================================== */
.mgt01 {
	margin-top: 1rem;
}

.mgt02 {
	margin-top: 2rem;
}

.ta_r {
	text-align: right;
}
.ta_l{
	text-align: left;
}

.w100 {
	width: 100%;
}
.pt27{
	padding-top: 27rem;
}
.b_bot{
	padding-bottom: 1.5rem;
	border-bottom: solid 1px var(--color-gray2);
}
.fwb{
	font-weight: bold;
}
.t_red{
	color: var(--color-red);
}
/* ==================================================
	서브상단멘트 공통
================================================== */
.sub_txt01 {
	padding-bottom: 3rem;
	font-size: var(--rem-35);
	font-weight: var(--font-sb);
	color: var(--brand-color-main);
}

/* 모바일CSS */
@media screen and (max-width:800px) {
	.sub_txt01 {
		line-height: 1.3;
	}
}



/* ==================================================
	회사소개 - 인사말
================================================== */
.grtBox ul{
	display: flex;
	justify-content: space-between;
	gap: 5rem;
}
.grtBox ul li img{
	width: 100%;
	min-width: 420px;
	max-width: 500px;
	border-radius: 1.5rem;
}
.grt_cont{
	padding-top: 8rem;
}
.grt_txt01{
	position: relative;
	font-size: var(--rem-55);
	font-weight: var(--font-bd);
	color: var(--brand-color-main);
}
.grt_txt01 p:nth-child(1){
	position: absolute;
    left: -20rem;
    top: -6.5rem;
    background: rgba(255, 255, 255, 0.7);
    padding-left: 1.5rem;
	line-height: 1.3;
}
.grt_txt02 {
	padding-top: 2rem;
}
.grt_txt02 p{
	padding-bottom: 2rem;
}

/* 모바일CSS */
@media screen and (max-width:986px){
	.grtBox ul li img{
		min-width: 340px;
	}
	.grt_txt01 p:nth-child(2){
		line-height: 1.1;
	}
} 

@media screen and (max-width:800px){
	.grtBox ul{
		display: block;
	}
	.grt_cont {
		padding-top: 2rem;
	}
	.grt_txt01 {
		font-size: var(--rem-35);
	}
	.grtBox ul li img{
		    border-radius: 1rem;
	}
	.grtBox ul li:nth-child(1){
		text-align: center;
	}
	.grt_txt01 p:nth-child(1) {
		position: initial;
		padding-left: 0;
	}
}



/* ==================================================
	회사소개 - 개요
================================================== */
.ovBox{}
.ov_pic img{
	width: 100%;
	border-radius: 2rem;
}
.ov_cont01 ul{
	display: flex;
	justify-content: space-between;
	gap: 5rem;
}
.ov_cont01 ul > li {
	position: relative;
    flex: 1; /* 남은 공간을 균등하게 분배 */
}
.ov_cont01 ul> li h3{
	padding: 1rem 10rem 0 0.5rem;
	position: absolute;
    top: -8rem;
    border-radius: 0 2rem 0 0;    
	font-size: var(--rem-45);
	font-weight: var(--font-eb);
	background-color: var(--color-white);
}
.ov_cont01 ul> li p{
	font-size: var(--rem-24);
	padding: 2rem 0 0 0.5rem;
	font-weight: var(--font-sb);
	color: var(--brand-color-main);
}
.ov_cont01 ul> li p span{
	padding-top: 0.5rem;
	display: block;
	font-size: var(--rem-16);
	font-weight: normal;
	color: var(--color-black);
}
.ov_cont01 ul li ul{
	display: block;
} 
.ov_cont01 ul li ul li{
	padding: 1.5rem 0 1rem 0;
	border-bottom: dashed 1px var(--color-gray2);
}
.ov_cont02{
	margin-top: 5rem;
	padding-top: 5rem;
	border-top: solid 1px var(--color-black);
}
.ov_cont02 dl{
	display: flex;
	gap: 8rem;
}
.ov_cont02 dl dt{
	padding-left: 0.5rem;
	font-size: var(--rem-35);
	font-weight: var(--font-bd);
}
.ov_cont02 dl dd{
	width: 70%;
}
.ov_cs{
	margin-top: 5rem;
	padding: 4rem 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 2rem;
	background: url('../images/about/ov_img02.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}
.ov_csBox> p{
	padding-bottom: 2rem;
	font-size: var(--rem-34);
	font-weight: var(--font-bd);
	color: var(--color-white);
	text-align: center;
}
.ov_csBox ul{
	display: flex;
	gap: 5rem;
	align-items: center;
}
.ov_csBox ul li{
	display: flex;
    align-items: center;
    justify-content: center;
	text-align: center;
	color: var(--color-white);
	border-radius: 50%;
	border:solid 1px var(--color-white);
	width: 200px;
	height: 200px;
	opacity: 0;
  transform: scale(0.8); /* ❗ translateY는 빼고 scale만 사용 */
	animation: fadeInZoom 0.6s ease forwards;
}
.ov_csBox ul li div p br{
	display: none;
}
.ov_csBox ul li:nth-child(1) {
	animation-delay: 1.2s;
}
.ov_csBox ul li:nth-child(2) {
	animation-delay: 1.4s;
}
.ov_csBox ul li:nth-child(3) {
	animation-delay: 1.6s;
}
@keyframes fadeInZoom {
	to {
		opacity: 1;
		transform: scale(1); /* 여기서도 translateY는 없음 */
	}
}

/* 모바일CSS */
@media screen and (max-width:1024px){	
	.ov_cont01 ul> li h3{
		top: -6rem;
		font-size: var(--rem-28);
        letter-spacing: -0.1rem;
	}
}
@media screen and (max-width:800px){	
	.ov_pic img{
		border-radius: 1rem;
		min-height: 160px;
        object-fit: cover;
        object-position: right top;
	}
	.ov_cont01 ul{
		display: block;
	}
	.ov_cont01 ul> li h3{
		padding: 1rem 10rem 0 0;
		position: static;
	}
	.ov_cont01 ul> li p{
		padding: 0.5rem 0 1.5rem 0;
	}
	.ov_cont02 dl{
		display: block;
	}
	.ov_cont02 dl dt {
		padding-left: 0;
		padding-bottom: 1rem;
	}
	.ov_cont02 dl dd{
		width: 100%;
		word-break: keep-all;
	}
	.ov_csBox ul {
		gap: 2rem;
	}
	.ov_csBox ul li{
		width: 170px;
		height: 170px;
	}
}
@media screen and (max-width:650px){
	.ov_cs{
		border-radius: 1rem;
	}
	.ov_csBox ul {
		gap: 0.5rem;
	}
	.ov_csBox ul li{
		margin: 2rem 0;
		width: 105px;
		height: 105px;
	}
	.ov_csBox ul li div img{
		max-width: 50px;
	}
	.ov_csBox ul li div p{
		font-size: var(--rem-16);
		line-height: 1.2;
        margin-top: -0.5rem;
	}
	.ov_csBox ul li div p br{
		display: block;
	}
}


/* ==================================================
	회사소개 - 연혁
================================================== */
.hisBox{
	padding-top: 4rem;
}
.his_tit{
	padding-top: 3rem;
	position: relative;
	font-size: var(--rem-50);
	font-weight: var(--font-bd);
	color: var(--brand-color-main);
	text-align: center;
	
}
.his_tit::before{
	margin-top: -3rem;
	content: "";
	position: absolute;
	width: 1px;
	height: 28px;
	left: 50%;
	background-color: var(--color-black);
}
.his_cont{
	padding-top: 5rem;
	display: flex;
	gap: 5rem;
	opacity: 0; /* 초기 상태 */
  animation: fadeIn 1s forwards; /* 전체 컨텐츠 딜레이 후 나타남 */
}
.h_pic{
	width: 50%;
	opacity: 0; /* 초기 상태 */
  transform: translateX(-50px); /* 왼쪽에서 슬라이드 */
  animation: slideInLeft 1s forwards; /* 1초 후 애니메이션 시작 */
}
.his_cont img{
	width: 100%;
	border-radius: 2rem;
}
.h_pic li img.h_pic2{
	max-width: 180px;
}
.h_pic li img.h_pic3{
	max-width: 550px;
}
.his03{
	text-align: right;
}
.his_cont ul{
	position: relative;
}
.his_cont ul li:nth-child(2){
	position: absolute;
	bottom: -20%;
    right: 5%;
}
.h_item {
  opacity: 0; /* 초기 상태 */
  transform: translateY(50px); /* 아래에서 위로 이동 */
  animation: fadeInUp 1s 0.5s forwards; /* 1.5초 후 애니메이션 시작 */
}
.h_item dl{
	padding: 1rem 0;
	display: flex;
	gap: 5rem;
	border-bottom: dashed 1px var(--color-gray2);
}
.h_item dl dt{
	width: 20%;
}

.h_item dl dd{
	width: 80%;
}
/* 애니메이션 정의 */
@keyframes fadeIn {
	to {
		opacity: 1;
	}
}

@keyframes fadeInUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideInLeft {
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* 모바일CSS */
@media screen and (max-width:1345px){	
	.h_item dl dt{
		width: 25%;
	}
	.h_item dl dd{
		width: 75%;
	}
	
}
@media screen and (max-width:1024px){
	.his_cont ul li:nth-child(1) img{
		min-width: 250px;
	}
	.his_cont ul li:nth-child(2){
		bottom: -50%;
	}
}
@media screen and (max-width:800px){
	.his_cont  {
		display: block;
	}
	.his_cont img{
		border-radius: 1rem;
	}
	.h_pic {
		width: 100%;
	}
	.his_cont ul li:nth-child(2){
		bottom: -20%;
	}
	.h_item {
		padding-top: 5rem;
	}
}
@media screen and (max-width:500px){
	.his_tit{
		font-size: var(--rem-35);
		line-height: 1.2;
	}
	.his_cont {
		padding-top: 3rem;
		overflow: hidden;
	}
	.h_item dl{
		display: block;
	}
	.h_item dl dt{
		width: 100%;
		font-weight: var(--font-bd);
	}
	.h_item dl dd{
		width: 100%;
		line-height: 1.4;
	}
	.his_tit::before{
		margin-top: -4rem;
	}
	.his_cont ul li:nth-child(2){
		right: -10%;
	}
	.his_cont ul li:nth-child(2) img{
		width: 70%;
	}
}


/* ==================================================
	회사소개 - 복리후생
================================================== */
.bft_ment{
	margin-bottom: 7rem;
	padding: 3.5rem;
	text-align: center;
	background-color: #EDF2F7;
	border-radius: 2rem;
}

.bft_cont{
	display: flex;
	gap: 0;
}
.bft_cont img{
	width: 100%;
	border-radius: 2rem;
}
.bft_cont div{
	flex: 1;
}
.bf_txt{
	padding-top: 3rem;
}
.bf_txt p{
	font-size: var(--rem-24);
	font-weight: var(--font-sb);
}
.bf_txt li{
	padding-left: 1.5rem;
	position: relative;	
}
.bf_txt li::before{
	content: '· ';
    position: absolute;
    left: 0;
}
.bftBox .bft_cont:nth-child(odd) .bf_txt p,
.bftBox .bft_cont:nth-child(odd) .bf_txt ul{
	padding-left: 4rem;
}
.bftBox .bft_cont:nth-child(even) .bf_txt p,
.bftBox .bft_cont:nth-child(even) .bf_txt ul{
	padding-right: 4rem;
}
.bftBox .bft_cont:nth-child(even) .bf_txt p,
.bftBox .bft_cont:nth-child(even) .bf_txt li{
	text-align: right;	
}
.bftBox .bft_cont:nth-child(even) .bf_txt li{
	display:flex; 
	justify-content:flex-end; 
	align-items:center; 
	gap:.5rem; 
	padding:0;
}
.bftBox .bft_cont:nth-child(even) .bf_txt li::before{
	 position:static; /* left:5px 덮어쓰기 */

}

/* 모바일CSS */
@media (max-width: 800px) {
	.bft_ment{
		border-radius: 1rem;
	}
	.bft_cont {
		padding-bottom: 5rem;
		flex-direction: column;
	}
	/* 2번째, 4번째는 이미지가 위로 오게 */
	.bft_cont:nth-child(even) {
		flex-direction: column-reverse;
	}
	.bf_txt {
		padding-top: 1rem;
	}
	.bft_cont img {
		border-radius: 1rem;
	}
	.bftBox .bft_cont:nth-child(odd) .bf_txt p,
	.bftBox .bft_cont:nth-child(odd) .bf_txt ul,
	.bftBox .bft_cont:nth-child(even) .bf_txt p,
	.bftBox .bft_cont:nth-child(even) .bf_txt li{
		padding-left: 1rem;
	}
	.bftBox .bft_cont:nth-child(even) .bf_txt p,
	.bftBox .bft_cont:nth-child(even) .bf_txt li{
		text-align: left;	
	}
	.bftBox .bft_cont:nth-child(even) .bf_txt li{
		justify-content:flex-start;
	}
}


/* ==================================================
	회사소개 - 주요고객
================================================== */
.cst_pic img{
	width: 100%;
	border-radius: 2rem;
}
.cst_txt{
	padding-top: 4rem;
	text-align: center;
}
.cst_txt h3{
	font-size: var(--rem-45);
	font-weight: var(--font-bd);
	color: var(--brand-color-main);
}

/* 공통: 칼럼/간격 */
.cst_logo { 
	--cols: 3;
	--gap: 2rem;
}

.cst_logo ul{
	display:flex;
	justify-content:center;
	gap:var(--gap);
	list-style:none;
	padding:0; margin:0;
}

/* li: 고정 width 지우고, 칼럼 기준 유동 폭 + 높이는 일정 */
.cst_logo ul li{
	flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
	height: clamp(72px, 9vw, 100px);        /* 화면에 따라 부드럽게 */
	border-radius:.5rem;
	border:1px solid var(--color-gray2);
	display:flex; align-items:center; justify-content:center;
	box-sizing:border-box;
}

/* 이미지: 카드 안에서 비율 유지하며 꽉 차되 넘치지 않게 */
.cst_logo ul li img{
	max-width: 100%;
	max-height: 80%;
	height: auto;
	object-fit: contain;
	display:block;             /* 인라인 여백 제거 */
}

.cst_logo ul:nth-child(1){ padding-top:5rem; }
.cst_logo ul:nth-child(2){ padding-top:2rem; }

/* 모바일 */
@media (max-width: 800px){
	.cst_txt h3{
		font-size: var(--rem-35);
		line-height: 1.2;
	}
	.cst_txt p br{
		display: none;
	}
	.cst_txt p {
		padding-top: 1.5rem;
	}
	.cst_logo { --cols: 3; }   /* 3칸 유지(원하면 2로 바꿔도 됨) */
	.cst_logo ul{ gap:1rem; }
	.cst_logo ul:nth-child(1){ padding-top:3rem; }



	.cst_logo ul li img{ 
		max-width: 80%;
		max-height: 60%;
	}
}


/* ==================================================
	회사소개 - 오시는 길
================================================== */
.drcBox{
	
}
.drcBox:nth-child(1){
	padding-bottom: 5rem;
}
.drc_txt{
	/* display: flex;
	align-items: center;
	gap: 3rem; */
}
.drc_txt h3{
	font-size: var(--rem-32);
	font-weight: var(--font-sb);
}
.drc_txt p span{
	padding-left: 2rem;
}
.drc_cont div{
	margin-top: 1rem;
	border-radius: 2rem;
}
/* .drc_cont .wrap_map{
	height: 500px;
} */
.root_daum_roughmap .cont{
	display: none;
}

/* 모바일 */
@media (max-width: 800px){
	.drc_txt{
		display: block;
	}
	.drc_txt p span{
		padding-left: 0;
		display: block;
	}
}


/* ==================================================
	사업분야 - 공작기계, 항공, 방산, 건설
================================================== */
.biz{}
.biz_pic img{
	width: 100%;
	border-radius: 2rem;
}
.biz_cont{
	padding: 5rem 0;
	/* display: flex;
	justify-content: space-between;
	gap: 3rem; */
}
.biz_cont h3{
	padding-bottom: 1.5rem;
	line-height: 1.2;
	font-size: var(--rem-45);
	font-weight: var(--font-bd);
	color: var(--brand-color-main);

}
.biz_cont div{
	/* width: 85%; */
}
.biz_cont div p{
	padding-bottom: 1rem;
}
.biz_tit{
	font-size: var(--rem-28);
	font-weight: var(--font-sb);
	line-height: 1;
}
.biz_tit p{
	margin-left: 14rem;
	border-bottom: solid 1px var(--color-black);
}
.biz_prd ul{
	padding-top: 4rem;
	display: grid;
	grid-template-columns: repeat(4, 4fr) ;
	gap: 4rem;
}
.biz_prd ul li img{
	width: 100%;
	border: solid 1px var(--color-gray2);
	border-radius: 1.5rem;
}
.biz_prd ul li p{
	text-align: center;
}
@keyframes fadeUp {
	from { opacity: 0; transform: translateY(30px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* active가 붙은 뒤에만 애니메이션 시작 → 타이밍을 부모(1.5s)보다 늦게 */
.cont_inner.active .biz_cont{
	animation: fadeUp 1s ease-out forwards;
	animation-delay: 1.4s; /* 1.5s 이후에 시작 */
}
.cont_inner.active .biz_prd{
	animation: fadeUp 1s ease-out forwards;
	animation-delay: 1.9s; /* 텍스트 다음 */
}

/* 초기 상태 */
.biz_cont, .biz_prd{ opacity: 0; transform: translateY(30px); }

/* 모바일 */
@media (max-width: 800px){
	.biz_cont{
		padding: 3rem 0 5rem 0;
		display: block;
	}
	.biz_cont h3{
		padding-bottom: 1.5rem;
		font-size: var(--rem-30);
	}
	.biz_cont div {
		width: 100%;
	}
	.biz_prd ul {
		grid-template-columns: repeat(3, 5fr);
		gap: 2rem;
	}
	.biz_pic img{
		border-radius: 1rem;
		min-height: 160px;
		object-fit: cover;
		object-position: center top;
	}
	.biz_pic img.mc_img{
		object-position: left top;
	}
}

@media (max-width: 500px){
	.biz_prd ul {
		grid-template-columns: repeat(2, 6fr);
	}
}

/* 사업분야 기타 */
.biz_others{
	padding-top: 5rem;
	border-top: solid 1px var(--color-black);
}
.biz_othBox{
	display: flex;
	align-items: center;
	gap: 5rem;
}
.biz_others .biz_othBox:nth-child(2), .biz_others .biz_othBox:nth-child(3){
	padding-top: 5rem;
	margin-top: 5rem;
	border-top: solid 1px var(--color-gray2);
}
.biz_othBox ul{
	display: flex;
	gap: 1rem;
}
.biz_othBox ul img{
	border-radius: 2rem;
	border: solid 1px var(--color-gray2);
}
.biz_othcont h3{
	padding-bottom: 1.5rem;
	font-size: var(--rem-35);
	font-weight: var(--font-bd);
	color: var(--brand-color-main);
	line-height: 1.2;
}

/* 모바일 */
@media (max-width: 1024px){
	.biz_othBox ul img {
		width: 100%;
		min-width: 250px;
	}
}
@media (max-width: 800px){
	.biz_othBox{
		display: block;
	}
	.biz_othBox ul img {
		min-width: 100%;
	}
	.biz_othcont{
		padding-top: 2rem;
	}
}




/* ==================================================
	연구개발 - 연구소 소개
================================================== */
.rnd_cont01{
	display: flex;
	justify-content: space-between;
	gap: 7rem;
}
.rnd_cont01 .pic img{
	
	border-radius: 1.5rem;
}
.rnd_txt01 .tit p{
	font-size: var(--rem-30);
	color: var(--brand-color-dmain);
}
.rnd_txt01 .tit h3{
	font-size: var(--rem-45);
	font-weight: var(--font-bd);
	color: var(--brand-color-main);
	line-height: 1.1;
}
.rnd_txt01 .txt{
	padding-top: 2rem;
}
.rnd_txt01 .txt p:nth-child(1){
	padding-bottom: 1rem;
}
.rnd_cont02{
	padding-top: 5.5rem;
}
.rnd_cont02 .r_tit{
	padding-bottom: 0.5rem;
	margin-bottom: 3rem;
	font-size: var(--rem-24);
	font-weight: var(--font-sb);
	border-bottom: solid 1px var(--color-black);
}
.rnd_cont02> ul{
	display: grid;
	grid-template-columns: repeat(2, 2fr);
	gap: 6rem;
}
.rnd_cont02 ul li p{
	padding-top: 1.5rem;
	display: flex;
	gap: 1rem;
	align-items: center;
	font-size: var(--rem-24);
	font-weight: var(--font-sb);
}
.rnd_cont02 ul li p span{
	display: block;
	width: 40px;
	height: 40px;
	font-size: var(--rem-16);
	color: var(--color-white);
	text-align: center;
	line-height: 40px;
	background-color: var(--brand-color-main);
	border-radius: 50%;
}
.rnd_cont02 ul li img{
	border-radius: 1rem;
	width: 100%;	
}
.rnd_cont02 ul li ul{
	padding-top: 1.5rem;
}
.rnd_cont02 ul li ul li{
	position: relative;
    padding-left: 1rem;
    margin-left: 0.8rem;
	display: flex;        
    align-items: flex-start; 
}
.rnd_cont02 ul li ul li::before{
	content: "";
    width: 2px;
    height: 2px;
    background-color: var(--color-black);
    border-radius: 50%;
    margin-top: 0.7em;
    margin-right: 0.5rem;
    flex-shrink: 0;  
}

/* 모바일 */
@media (max-width: 1200px){
	.rnd_cont01 .pic img{
		width: 100%;
		min-width: 450px;
	}
}

@media (max-width: 800px){
	.rnd_cont01{
		display: block;
	}
	.rnd_txt01 .tit{
		padding-top: 2.5rem;
	}
	.rnd_txt01 .tit h3 {
		margin-top: -1rem;
	}
	.rnd_txt01 .txt{
		padding-top: 1.5rem;
	}
}

@media (max-width: 500px){
    .rnd_txt01 .tit h3{
		font-size: var(--rem-35);
		line-height: 1.2;
	}
	.rnd_txt01 .tit p{
		font-size: var(--rem-25);
		line-height: 1.3;
        padding-top: 0.8rem;
	}
	.rnd_cont01 .pic img{
		min-width: 100%;
	}
	.rnd_cont02> ul {
		grid-template-columns: repeat(1, 4fr);
		gap: 5rem;
	}
}

/* ==================================================
	연구개발 - 시험장비
================================================== */
.equip ul{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6rem;
	justify-content: space-between;
}
.equip ul li img{
	width: 100%;
	border-radius: 1.5rem;
}

/* 모바일 */
@media (max-width: 800px){
	.equip ul{
		gap: 3rem;
	}
	.equip ul li img{
		border-radius: 1rem;
	}
}

@media (max-width: 500px){
	.equip ul{
		grid-template-columns: repeat(1, 3fr);
	}
}


/* ==================================================
	설비현황 공통
================================================== */
/* 이미지 */
.facility_pic {
	overflow: hidden;
	display: block;
	border-radius: var(--rem-15);
	background: linear-gradient(180deg, #EDF2F7 0%, #D2DCE6 100%);
}

.facility_pic img{
	width: 100%;
	display: block;
}

/* 표 */
.facility_chart h4{
	margin-bottom: 10px;
	font-weight: var(--font-sb);
	font-size: var(--rem-24);
	color: #000000;
}
.facility_chart .chart01{
    border-top: 0;
    border-bottom: solid 1px #E0E0E0;
}
.facility_chart table.chart01 tr th, table.chart01 tr td {
    padding: 1rem 0.2rem;
    border-bottom: 0;
    border-left: 1px solid #E0E0E0;
	text-align: center;
	text-transform: uppercase;
}
.facility_chart table.chart01 thead th {
	font-weight: var(--font-md);
	font-size: var(--rem-16);
	color: #ffffff;
    border: 0;
	background: #6E8FB2;
}
.facility_chart table.chart01 thead th:first-child {
	overflow: hidden;
	border-radius: 2rem 0 0 0;
}
.facility_chart table.chart01 thead th:last-child {
	overflow: hidden;
	border-radius: 0 2rem 0 0;
}
.facility_chart table.chart01 tbody tr:nth-child(even) td {
	background: #F0F0F0;
}
.facility_chart table.chart01 tbody tr:last-child td {
    border-bottom: solid 1px #E0E0E0;
}
.facility_wd01{
	width: 49%;
}

.facility_wd02{
	width: 21%;
}

.facility_chart .block{display: inline;}

/* 모바일 */
@media (max-width: 1100px){

	.facility_chart h4 {
		margin-bottom: 6px;
		font-size: var(--rem-22);
	}
}
@media (max-width: 640px){
	.facility_pic{
		border-radius: 1rem;
	}
	.facility_wd01 {
		width: 40%;
	}
	.facility_chart .block{display: block;}
	.facility_chart table.chart01 thead th:first-child {
		border-radius: 1rem 0 0 0;
	}
	.facility_chart table.chart01 thead th:last-child {
		overflow: hidden;
		border-radius: 0 1rem 0 0;
	}
	.inspect_con .facility_wd01 {
		width: 30%;
	}
}
@media (max-width: 430px){

	.facility_chart table.chart01 thead th {
		font-size: 1.4rem;
	}
}


/* ==================================================
	설비현황 - 가공장비
================================================== */
.mcn_top{
    width: 100%;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
    gap: var(--rem-40);
}

.mcn_mid{
	margin-top: var(--rem-60);
    width: 100%;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
}

.mcn_mid .facility_chart{
	margin-top: var(--rem-60);
	padding-top: var(--rem-60);
	border-top: dashed 1px #BDBDBD;
}

.mcn_mid .facility_chart:first-child,
.mcn_mid .facility_chart:nth-child(2){
	margin-top: 0;
}

.mcn_mid .facility_chart:nth-child(odd){
	padding-right: var(--rem-20);
}

.mcn_mid .facility_chart:nth-child(even){
	padding-left: var(--rem-20);
}

/* 모바일 */
@media (max-width: 1100px){

	.mcn_top{
		gap: 1rem;
	}


	.mcn_mid{
		margin-top: var(--rem-60);
		-ms-grid-columns: (1fr)[1];
		grid-template-columns: repeat(1, 1fr);
	}

	.mcn_mid .facility_chart{
		margin-top: var(--rem-50);
		padding-top: var(--rem-50);
		border-top: dashed 1px #BDBDBD;
	}

	.mcn_mid .facility_chart:nth-child(2){
		margin-top: var(--rem-50);
	}

	.mcn_mid .facility_chart:nth-child(odd){
		padding-right: 0;
	}

	.mcn_mid .facility_chart:nth-child(even){
		padding-left: 0;
	}
}


/* ==================================================
	설비현황 - 가공장비
================================================== */
.inspect_con{
    margin-top: var(--rem-60);
    padding-top: var(--rem-60);
    width: 100%;
    border-top: dashed 1px #BDBDBD;
}
.inspect_con .facility_pic{
	flex-basis: calc(50% - 4rem);
}
.inspect_con .facility_chart{
	flex-basis: 50%;
}

/* 모바일 */
@media (max-width: 1100px){

	.inspect_con{
        flex-direction: column;
	}
	.inspect_con .facility_pic{
		flex-basis: 100%;
		width: 100%;
	}
	.inspect_con .facility_chart{
		flex-basis: 100%;
		width: 100%;
	}
}


/* ==================================================
	ESG 공통 - .esg_top .esg_tit .esg_mid
================================================== */
.block{
	display: block;
}

.esg_top{
	width: 100%;
	height: 28rem;
	border-radius: var(--rem-20);
	background-position: 50% 50%;
	background-size: cover;
}

/* 타이틀 */
.esg_tit{
	margin: var(--rem-60) auto;
	text-align: center;
}

.esg_tit .tit{
	font-weight: var(--font-bd);
	font-size: var(--rem-45);
	color: #003D7C;
	padding-bottom: var(--rem-13);
}


/* 내용 */
.esg_mid{
    display: grid;
    gap: 5px;
	padding-bottom: 5px;
    border-top: solid 1px #000000;
    border-bottom: dashed 1px #BDBDBD;
}
.esg_mid >div{
    display: flex;
    gap: var(--rem-30);
    align-items: center;
    padding: var(--rem-30);
}
.esg_mid >div:nth-child(1){
    border-bottom: dashed 1px #B4C7DB;
}
.esg_mid >div:nth-child(2){
	background-color: #EDF2F7;
}
.esg_mid >div:nth-child(3){
	border-top: dashed 1px #B4C7DB;
    border-bottom: dashed 1px #BDBDBD;
}
.esg_mid >div:nth-child(4){
	background-color: #F0F0F0;
}

.esg_mid >div:nth-child(even) {
	padding-left: 22rem;
}
.esg_mid .icon{
	width: 16rem;
	background-color: #ffffff;
	border-radius: 50%;
	border:solid 2px #6DA2D4
}

.esg_mid .icon img{
	display: block;
	width: 100%;
}


.esg_mid .tcon {
	width: calc(100% - 19rem);
}

.esg_mid .tcon .bold{
	font-weight: var(--font-bd);
	font-size: var(--rem-24);
	padding-bottom: var(--rem-13);
}

.esg_mid .tcon li{
	position: relative;
	padding-left: 10px;
}

.esg_mid .tcon li::before{
	content: '· ';
	position: absolute;
	left: 0;
}

/* 모바일 */
@media (max-width: 1100px){

	.esg_top {
		height: 24rem;
	}

	.esg_tit .tit {
		font-size: var(--rem-40);
		padding-bottom: 8px;
	}


	.esg_mid .icon {
		width: 14rem;
	}
	
	.esg_mid .tcon {
		width: calc(100% - 17rem);
	}

	.esg_mid .tcon .bold {
		font-size: var(--rem-22);
	}
}
@media (max-width: 1024px){

    .esg_top {
        height: 20rem;
    }


	.esg_mid >div:nth-child(even) {
		padding-left: 3rem;
	}


	.esg_mid .icon {
		width: 12rem;
	}
	
	.esg_mid .tcon {
		width: calc(100% - 15rem);
	}

	.esg_mid .tcon .bold {
		font-size: var(--rem-20);
		padding-bottom: 4px;
	}
}

@media (max-width: 640px){

	.block{
		display: inline;
	}

	.esg_top{
		border-radius: 1rem;
	}
	.esg_tit {
		margin: var(--rem-26) auto var(--rem-50) ;
	}
	
	.esg_tit .tit {
		font-size: var(--rem-30);
	}


	.esg_mid >div {
		gap: var(--rem-20);
		padding: var(--rem-30) var(--rem-20);
		flex-direction: column;
	    align-items: flex-start;
	}

	.esg_mid >div:nth-child(even) {
		padding-left: var(--rem-20);
	}
	
	.esg_mid .icon {
        width: 10rem;
    }
	
    .esg_mid .tcon {
        width: 100%;
    }
}

/* ==================================================
	ESG - 환경
================================================== */
.environment_bg{
	background-image: url('../images/esg/environment_bg.jpg');
}

/* ==================================================
	ESG - 사회
================================================== */
.social_bg{
	background-image: url('../images/esg/social_bg.jpg');
}

/* ==================================================
	ESG - 지배구조
================================================== */
.governance_bg{
	background-image: url('../images/esg/governance_bg.jpg');
}

.governance .esg_mid {
    border-bottom: 0px;
}


/* ==================================================
	고객지원 - contact
================================================== */
.contact{
	text-align: center;
}
.contact h3{
	padding-bottom: 1rem;
	font-size: var(--rem-45);
	color: var(--brand-color-main);
	font-weight: var(--font-bd);
}
.contact ul{
	margin: 3rem auto;
	max-width: 58rem;
	height: 6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5rem;
	color: var(--color-white);
	background-color: var(--brand-color-dmain);
	border-radius: 10rem;	
}
.contact ul li:nth-child(2){
	position: relative;
}
.contact ul li:nth-child(2)::after{
	content: "";
	position: absolute;
	width: 1px;
	height: 14px;
	background-color: var(--color-white);
	left: -9%;
    top: 20%;
}
.contact img{
	width: 100%;
	border-radius: 2rem;
}

/* 모바일 */
@media (max-width: 500px){
	.contact h3{
		font-size: var(--rem-35);
		line-height: 1.3;
	}
	.contact ul{
		padding: 1.5rem 0;
		display: block;
		height: auto;
		border-radius: 1rem
	}
	.contact img{
		border-radius: 1rem;
		min-height: 200px;
        object-fit: cover;
        object-position: center top;
	}
}