@charset "utf-8";

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

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

/* 애니메이션 */
.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: 6rem;
	}

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

/* ==================================================
	아이콘
================================================== */
.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(--color-red);
}

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

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

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

.l-list01>li:before {
	content: "";
	position: absolute;
	top: 0.8rem;
	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.5rem;
}

.width_line_list>li:before {
	position: absolute;
	top: 0.9rem;
	left: 0;
	content: "";
	display: block;
	width: 0.4rem;
	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;
}

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

	.con_title:before {
		height: 2.2rem;
	}
}

/* ==================================================
	반응형 테이블 스크롤
================================================== */
.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: 200%;
	}

	.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;
	}
}

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

.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: #fff
}

.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
}

/* ==================================================
	상단이미지 01
================================================== */
.content_topcon {
	position: relative;
	margin-bottom: 4rem;
}

.customer_bg {
	background: url('../images/about/customer_bg.jpg') no-repeat 50% 50%;
	background-size: cover;
}

.inquiry_bg {
	background: url('../images/community/inquiry_bg.jpg') no-repeat 50% 50%;
	background-size: cover;
}

.content_topcon:before,
.content_topcon:after {
	position: absolute;
	top: 50%;
	width: 3.5rem;
	height: 25.8rem;
	margin-top: -12.9rem;
	content: "";
}

.content_topcon:before {
	left: 5rem;
	background: url('../images/common/cont_tleft.png') no-repeat;
	background-size: cover;
}

.content_topcon:after {
	right: 50px;
	background: url('../images/common/cont_tright.png') no-repeat;
	background-size: cover;
}

.content_topcon p {
	color: #fff;
	text-align: center;
	font-size: 3.4rem;
	letter-spacing: -0.3px;
	font-weight: 400;
	line-height: 1.35;
	padding: 12.4rem 0;
	word-break: keep-all;
}

.content_topcon p b {
	font-weight: var(--font-bd);
}

.ct_dl {
	display: block;
}

/* 모바일CSS */
@media screen and (max-width:1023px) {
	.content_topcon {
		margin-bottom: 4rem;
	}

	.content_topcon p {
		font-size: 2.4rem;
	}
}

@media screen and (max-width:800px) {
	.content_topcon p {
		font-size: 2rem;
	}

	.ct_dl {
		display: inline;
	}
}

@media screen and (max-width:640px) {
	.content_topcon {
		margin-bottom: 2.5rem;
	}

	.content_topcon:before,
	.content_topcon:after {
		display: none
	}

	.content_topcon p {
		padding: 15% 1.5rem
	}
}

/* ==================================================
	상단이미지 02
================================================== */
.section_top {
	position: relative;
	padding-bottom: 7rem;
	text-align: center;
}

.section_esgtop {
	padding-bottom: 7rem;
}

.section_top .pht {
	position: relative;
}

.section_top .pht .img img {
	width: 100%;
	border-radius: 10rem;
}

.section_top .txtarea {
	position: absolute;
	width: 95rem;
	height: 30rem;
	padding: 6rem 1rem 0 6rem;
	border-radius: 8rem 0 0 0;
	bottom: 0;
	right: -1px;
	z-index: 10;
	text-align: left;
	background: var(--color-white);
}

.section_top .txtarea_ship {
	height: 35rem;
}

.section_esgtop .txtarea {
	height: 25rem;
}

.section_top .txtarea2 {
	padding: 5rem 1rem 0 5rem;
}

.section_top .txtarea h4 {
	font-family: var(--font-TheJamsil);
	font-size: 3.6rem;
	font-weight: var(--font-md);
	color: var(--color-black);
	line-height: 1;
	margin-bottom: 3.2rem;
}

.section_top .txtarea h4.sectxt_ft {
	font-size: 3rem;
}

.section_top .txtarea h4.sectxt_mt {
	margin-bottom: 2.5rem;
}

.section_top .txtarea .sec_stit {
	font-family: var(--font-Poppins);
	font-size: 2rem;
	font-weight: var(--font-md);
	color: #afafaf;
	margin-top: 2rem;
	margin-bottom: 3.2rem;
}

.section_top .txtarea .sec_stit2 {
	font-family: var(--font-Poppins);
	font-size: 2rem;
	font-weight: var(--font-md);
	color: #afafaf;
	padding-left: 1rem;
}

.section_top p {
	font-size: 1.6rem;
	line-height: 1.45;
	color: var(--color-black);
	word-break: keep-all;
	margin-top: 1rem;
}

.section_esgtop p {
	font-size: 1.7rem;
	line-height: 1.5;
}

.section_top p:first-child {
	margin-top: 0;
}

/* 주요제품 */
.txtarea dl {
	display: flex;
	/*align-items: flex-start;*/
	align-items: center;
	width: 100%;
	margin-top: 3rem;
}

.txtarea dl>dt {
	flex-basis: 30%;
	max-width: 16rem;
	font-size: 1.6rem;
	font-weight: 600;
	background: var(--color-red);
	color: var(--color-white);
	text-align: var(--text-ag-center);
	padding: 1rem 2.2rem;
	border-radius: 5rem;
}

.txtarea dl>dd {
	padding-left: 1.5rem;
	font-size: 1.6rem;
	line-height: 1.5;
	text-align: var(--text-ag-left);
}

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

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

/* 모바일CSS */
@media screen and (max-width:900px) {
	.section_top {
		padding-bottom: 3.5rem;
	}

	.section_esgtop {
		padding-bottom: 5rem;
	}

	.section_top .pht .img img {
		border-radius: 7rem 7rem 0 0;
	}

	.section_top .txtarea {
		position: relative;
		width: 94%;
		height: auto;
		margin-right: auto;
		margin-left: auto;
		margin-top: -15rem;
		padding: 4rem 2rem 0 2rem;
		border-radius: 4rem 4rem 0 0;
		text-align: center;
		background: var(--color-white);
	}

	.section_top .txtarea2 {
		padding: 3rem 2rem 0 2rem;
	}

	.section_top .txtarea h4 {
		font-size: 3rem;
	}

	.section_top .txtarea h4.sectxt_ft {
		font-size: 2.4rem;
	}

	.section_top .txtarea h4.sectxt_mt {
		margin-bottom: 1.8rem;
	}

	.section_top .txtarea .sec_stit {
		font-size: 1.8rem;
		margin-top: 1.8rem;
		margin-bottom: 3rem;
	}

	.section_top .txtarea .sec_stit2 {
		display: block;
		font-size: 1.8rem;
		padding-left: 0;
		margin-top: 1rem;
	}
}

@media screen and (max-width:640px) {
	.section_top .pht .img img {
		border-radius: 4rem 4rem 0 0;
	}

	.section_top .txtarea {
		margin-top: -5rem;
	}

	.section_top .txtarea2 p {
		text-align: left;
	}

	/* 주요제품 */
	.txtarea dl {
		display: block;
		margin-top: 2rem;
	}

	.txtarea dl>dt {
		max-width: 20rem;
		margin: 0 auto;
	}

	.txtarea dl>dd {
		padding-left: 0;
		margin-top: 1.2rem;
	}
}

/* ==================================================
	회사소개 - 회사개요
================================================== */
.overview {}

.overview .ov_top h1 {
	font-size: 2.3rem;
	font-weight: var(--font-sb);
	text-align: var(--text-ag-center);
	line-height: 1.5;
}

.overview .ov_top h1 span {
	display: block;
}

.ovtop_info {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: (1fr)[4];
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	margin-top: 4rem;
}

.ovtop_info li .box {
	width: 100%;
	height: 35rem;
	background: #EDF1F4;
	border-radius: 2rem;
	padding: 1.5rem 2rem 2rem 2rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.ovtop_info li .box span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 11rem;
	height: 11rem;
	border-radius: 50%;
	background: var(--color-white);
}

.ovtop_info li .box span img {
	max-width: 4.5rem;
	width: 100%;
}

.ovtop_info li .box dl {
	margin-top: 2.6rem;
}

.ovtop_info li .box dl dd {
	font-size: 2rem;
	color: #6F6E6E;
}

.ovtop_info li .box dl dt {
	font-size: 2rem;
	font-weight: var(--font-sb);
	margin-top: 0.7rem;
	line-height: 1.35;
}

/* 사업장소개 */
.ov_middle {
	width: 100%;
	margin: 6rem 0;
	padding: 6rem 0;
	background: #f7f7f7;
}

.ov_middle ul {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: (1fr)[3];
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem;
	margin-top: 3rem;
}

.ov_middle ul>li a {
	position: relative;
	display: block;
}

.ov_middle ul>li a .img {
	padding-bottom: 39.38%;
}

.ov_middle ul>li a .img_tit2 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.ov_middle ul>li a .img h1 {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--color-white);
	font-size: 2.1rem;
	font-weight: var(--font-bd);
	line-height: 1.2;
}

.ov_middle ul>li a:hover .img h1 {
	opacity: 0;
}

.ov_middle ul>li a .img_tit {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.45) 100%);
	opacity: 0;
	transition: 0.2s all ease-in;
}

.ov_middle ul>li a .img_tit .img_txt {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--color-white);
	line-height: 1.2;
}

.ov_middle ul>li a .img_tit .img_txt h1 {
	font-size: 2rem;
	font-weight: var(--font-bd);
}

.ov_middle ul>li a .img_tit .img_txt p {
	font-size: 1.6rem;
	line-height: 1.3;
	margin-top: 0.5rem;
}

.ov_middle ul>li a .img_tit .img_txt p span {
	font-size: 1.5rem;
	display: block;
}

.ov_middle ul>li a:hover .img_tit {
	opacity: 1;
}

/* 메인비주얼 사업군 서브 이미지 */
.ov_middle ul>li:nth-child(1) {
	background: url('../images/about/ov_loc01.jpg?v=1015') 50% 50% no-repeat;
	background-size: cover;
}

.ov_middle ul>li:nth-child(2) {
	background: url('../images/about/ov_loc02.jpg?v=1015') 50% 50% no-repeat;
	background-size: cover;
}

.ov_middle ul>li:nth-child(3) {
	background: url('../images/about/ov_loc03.jpg?v=1015') 50% 50% no-repeat;
	background-size: cover;
}

.ov_middle ul>li:nth-child(4) {
	background: url('../images/about/ov_loc04.jpg?v=1015') 50% 50% no-repeat;
	background-size: cover;
}

.ov_middle ul>li:nth-child(5) {
	background: url('../images/about/ov_loc05.jpg?v=1015') 50% 50% no-repeat;
	background-size: cover;
}

.ov_middle ul>li:nth-child(6) {
	background: url('../images/about/ov_loc06.jpg?v=1015') 50% 50% no-repeat;
	background-size: cover;
}

/* 주요 생산품 */
.ov_bottom {}

.ov_bottom ul {
	position: relative;
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: (1fr)[4];
	grid-template-columns: repeat(4, 1fr);
	gap: 2.5rem;
	margin-top: 3.5rem;
}

.ov_bottom ul li img {
	width: 100%;
	border: 1px solid #e7e7e7;
	border-radius: 1.5rem;
}

.ovb_txt h3 {
	padding-top: 1.5rem;
	color: var(--color-black);
	font-weight: var(--font-md);
	font-size: 1.9rem;
	line-height: 1.3;
	text-align: var(--text-ag-center);
}

/* 애니메이션 */
.overview .ov_top h1 {
	opacity: 0;
	transform: translateY(30px);
	-webkit-transform: translateY(30px);
}

.overview .ov_top.active h1 {
	opacity: 1;
	transform: translateY(0);
	transition: all 0.6s 0.5s;
	-webkit-transition: all 0.6s 0.5s;
}

.overview .ov_top .ovtop_info {
	opacity: 0;
	transform: translateY(30px);
	-webkit-transform: translateY(30px);
}

.overview .ov_top.active .ovtop_info {
	opacity: 1;
	transform: translateY(0);
	-webkit-transform: translateY(0);
	transition: all 0.6s 0.9s;
	-webkit-transition: all 0.6s 0.9s;
}

.ov_middle .inner {
	opacity: 0;
	transform: translateX(-50px);
	-webkit-transform: translateX(-50px);
	transition: all 1s cubic-bezier(0.42, 0.0, 0.58, 1.0);
	-webkit-transition: all 1s cubic-bezier(0.42, 0.0, 0.58, 1.0);
}

.ov_middle.active .inner {
	opacity: 1;
	transform: translateX(0);
	-webkit-transform: translateX(0);
}

.ov_bottom {
	opacity: 0;
	transform: translateX(50px);
	-webkit-transform: translateX(50px);
	transition: all 1s cubic-bezier(0.42, 0.0, 0.58, 1.0);
	-webkit-transition: all 1s cubic-bezier(0.42, 0.0, 0.58, 1.0);
}

.ov_bottom.active {
	opacity: 1;
	transform: translateX(0);
	-webkit-transform: translateX(0);
}

/* 모바일CSS */
@media screen and (max-width: 1023px) {
	.ovtop_info {
		-ms-grid-columns: (1fr)[2];
		grid-template-columns: repeat(2, 1fr);
	}

	/* 사업장소개 */
	.ov_middle ul {
		-ms-grid-columns: (1fr)[2];
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem;
	}

	/* 주요 생산품 */
	.ov_bottom ul {
		-ms-grid-columns: (1fr)[3];
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;
		margin-top: 3rem;
	}
}

@media screen and (max-width: 640px) {
	.overview .ov_top h1 {
		font-size: 2rem;
	}

	.overview .ov_top h1 span {
		display: inline;
	}


	/* 사업장소개 */
	.ov_middle ul {
		-ms-grid-columns: (1fr)[1];
		grid-template-columns: repeat(1, 1fr);
		gap: 2rem;
	}

	.ov_middle ul>li a .img h1 {
		font-size: 18px;
	}


	.ov_middle ul>li a .img_tit .img_txt h1 {
		font-size: 17px;
	}

	.ov_middle ul>li a .img_tit .img_txt p {
		font-size: 15px;
	}

	.ov_middle ul>li a .img_tit .img_txt p span {
		font-size: 14px;
	}

	/* 주요 생산품 */
	.ov_bottom ul {
		-ms-grid-columns: (1fr)[2];
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 450px) {
	.overview .ov_top h1 {
		font-size: 1.8rem;
	}

	.ovtop_info li .box dl dt {
		font-size: 1.8rem;
		letter-spacing: -0.25px;
	}

	/* 주요 생산품 */
	.ov_bottom ul {
		-ms-grid-columns: (1fr)[1];
		grid-template-columns: repeat(1, 1fr);
	}
}

/* ==================================================
	회사소개 - 인사말
================================================== */
.grt_con {
	display: flex;
	align-items: center;
}

.grt_img {
	position: relative;
	width: 52%;
	padding-right: 8%
}

.grt_img .main-img {
	position: relative;
	z-index: 2;
	border-radius: 3rem;
	overflow: hidden;
	display: block;
	box-shadow: 1.5rem 4rem 5rem 0 rgba(0, 0, 0, 0.1);
	width: 100%;
}

.grt_img .main-img img {
	width: 100%;
}

.grt_img .deco-img {
	position: absolute;
	left: -10rem;
	top: -10rem;
	z-index: 3;
	animation: circleSpin 15s infinite linear
}

@keyframes circleSpin {
	0% {
		transform: rotate(0)
	}

	100% {
		transform: rotate(360deg)
	}
}

.grt_txt {
	width: 48%;
}

.grt_txt .cm_tit {
	font-family: var(--font-TheJamsil);
	font-size: 3rem;
	font-weight: var(-font-md);
	line-height: 1.33;
	color: var(--color-blue);
	letter-spacing: -0.1rem;
}

.grt_txt .cm_tit span {
	display: block;
}

.grt_txt .cm_txt {
	font-size: var(--rem-16);
	line-height: 1.65;
	margin-top: 3.5rem;
}

.grt_txt .cm_txt p+p {
	margin-top: 2rem;
}

.grt_txt .cm_txt p span {
	display: block;
}

.grt_txt .cm_txt .ceo {
	display: flex;
	align-items: center;
	margin-top: 3rem;
	color: var(--color-esan);
	font-size: var(--rem-18);
}

.grt_txt .cm_txt .ceo b {
	font-size: var(--rem-20);
	font-weight: var(--font-sb);
}

.grt_txt .cm_txt .ceo img {
	width: 100%;
	max-width: 6.5rem;
	margin-left: 1.5rem;
}

/* 모바일CSS */
@media screen and (max-width: 800px) {
	.grt_con {
		display: block;
	}

	.grt_img {
		width: 100%;
		padding-right: 0
	}

	.grt_img .main-img {
		border-radius: 2rem;
		width: 90%;
	}

	.grt_img .deco-img {
		left: auto;
		right: 0;
		top: -3rem;
		height: 12rem;
	}

	.grt_txt {
		width: 100%;
		margin-top: 3rem;
	}

	.grt_txt .cm_tit {
		font-size: 3.5rem;
	}

	.grt_txt .cm_tit span {
		display: inline;
	}

	.grt_txt .cm_txt {
		line-height: 1.6;
		margin-top: 4rem;
	}

	.grt_txt .cm_txt p {
		word-break: keep-all;
	}
}

@media screen and (max-width: 640px) {
	.grt_txt .cm_tit {
		font-size: 2.5rem;
	}

	.grt_txt .cm_txt {
		line-height: 1.55;
		margin-top: 2.5rem;
	}

	.grt_txt .cm_txt .ceo {
		margin-top: 1rem;
	}
}

/* ==================================================
	회사소개 - 연혁
================================================== */
.history_tabs {
	overflow: hidden;
	position: relative;
	border-radius: 1rem;
	width: 100%;
	height: 50rem;
}

.history_tabs .bg ul li {
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	transition: all 1s;
	opacity: 0;
}

.history_tabs .bg ul li.on {
	opacity: 1;
	z-index: 1;
}

.history_tabs .bg ul li:nth-child(1) {
	background: url('../images/about/his_tab_bg1.jpg') no-repeat center;
	background-size: cover;
}

.history_tabs .bg ul li:nth-child(2) {
	background: url('../images/about/his_tab_bg2.jpg') no-repeat center;
	background-size: cover;
}

.history_tabs .year ul li {
	position: absolute;
	left: 10rem;
	top: 7rem;
	z-index: 10;
	font-family: var(--font-Poppins);
	font-size: 8rem;
	color: var(--color-white);
	font-weight: var(--font-sb);
	line-height: 1em;
	opacity: 0;
	transition: all 1s;
}

.history_tabs .year ul li.on {
	opacity: 1;
}

.history_tabs .tabs {
	position: absolute;
	left: 10rem;
	bottom: 6rem;
	z-index: 10;
	width: calc(100% - 20rem);
}

.history_tabs .tabs ul {
	display: flex;
	justify-content: space-between;
}

.history_tabs .tabs ul li {
	width: 49.5%;
}

.history_tabs .tabs ul li a {
	display: block;
	overflow: hidden;
	position: relative;
	width: 100%;
	padding: 0 0 1.5rem;
	font-family: var(--font-Poppins);
	font-size: 2.3rem;
	font-weight: var(--font-md);
	color: rgba(255, 255, 255, 0.6);
	box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.6) inset;
	cursor: pointer;
}

.history_tabs .tabs ul li a:after {
	display: block;
	content: "";
	width: 100%;
	height: 0.4rem;
	background: var(--color-white);
	position: absolute;
	left: 0;
	bottom: -0.4rem;
	transition: all 1s;
}

.history_tabs .tabs ul li.on a {
	color: var(--color-white);
}

.history_tabs .tabs ul li.on a:after {
	bottom: 0;
}

.history_tabs .his_prev {
	width: 2.5rem;
	height: 5rem;
	background: url('../images/about/his_prev.svg') no-repeat;
	background-size: cover;
	position: absolute;
	left: 4rem;
	top: 50%;
	z-index: 10;
	transform: translateY(-50%);
	cursor: pointer;
}

.history_tabs .his_next {
	width: 2.5rem;
	height: 5rem;
	background: url('../images/about/his_next.svg') no-repeat;
	background-size: cover;
	position: absolute;
	right: 4rem;
	top: 50%;
	z-index: 10;
	transform: translateY(-50%);
	cursor: pointer;
}

.history_conwrap {
	padding: 7rem 10rem 0 10rem;
}

.history_conwrap .tabcon {
	display: none;
}

.history_conwrap .tabcon.on {
	display: block;
}

.history_conwrap .tabcon ul>li {
	display: flex;
	margin-bottom: 1.5rem;
}

.history_conwrap .tabcon ul>li .year {
	width: 13rem;
	font-size: 3rem;
	color: var(--color-red);
	font-weight: var(--font-sb);
}

.history_conwrap .tabcon ul>li .con {
	width: calc(100% - 13rem);
	padding: 0.8rem 0 0;
}

.history_conwrap .tabcon ul>li .con dl {
	display: flex;
	margin-bottom: 3rem;
}

.history_conwrap .tabcon ul>li .con dl dt {
	width: 4.5rem;
	font-size: 1.8rem;
	font-weight: var(--font-md);
}

.history_conwrap .tabcon ul>li .con dl dd {
	width: calc(100% - 4.5rem);
}

.history_conwrap .tabcon ul>li .con dl dd .br {
	display: block;
	padding: 1.4rem 0;
}

/* 모바일CSS */
@media screen and (max-width: 1023px) {
	.history_tabs .tabs {
		left: 5rem;
		width: calc(100% - 10rem);
	}
}

@media screen and (max-width: 640px) {
	.history_tabs .year ul li {
		left: 3rem;
		top: 5rem;
		font-size: 4rem;
	}

	.history_tabs .bg ul li:nth-child(1) {
		background: url('../images/about/his_tab_mbg1.jpg') no-repeat center;
		background-size: cover;
	}

	.history_tabs .tabs {
		left: 3rem;
		bottom: 3rem;
		width: calc(100% - 6rem);
	}

	.history_tabs .tabs ul li a {
		font-size: 14px;
	}

	.history_tabs .m13_prev {
		left: 3rem;
	}

	.history_tabs .m13_next {
		right: 3rem;
	}

	.history_conwrap {
		padding: 4rem 0 0;
	}

	.history_conwrap .tabcon ul>li .year {
		width: 10rem;
		font-size: 2.8rem;
	}

	.history_conwrap .tabcon ul>li .con {
		width: calc(100% - 10rem);
		padding: 0.5rem 0 0;
	}

	.history_conwrap .tabcon ul>li .con dl dt {
		width: 4rem;
		font-size: 16px;
	}

	.history_conwrap .tabcon ul>li .con dl dd {
		width: calc(100% - 4rem);
		line-height: 1.45;
	}
}

/* ==================================================
	회사소개 - 경영이념
================================================== */
.ma_tcon {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ma_tcon_logo {
	width: 48rem;
}

.ma_tcon_logo img {
	width: 100%;
}

.ma_tcon_inner {
	position: relative;
}

.ma_tcon_inner:before {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: -24rem;
	width: 24rem;
	height: 1px;
	background: #d0d0d0;
}

.ma_tcon_inner ul {
	display: flex;
}

.ma_tcon_inner ul li {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 25rem;
	height: 25rem;
	border: 1px solid #d0d0d0;
	border-radius: 50%;
	position: relative;
	z-index: 3;
	text-align: center;
	color: var(--color-black);
	font-size: 2rem;
	padding: 0 2rem;
	line-height: 1.16;
}

.ma_tcon_inner ul li span {
	font-size: 2.2rem;
	color: var(--color-red);
	font-weight: var(--font-bd);
}

.ma_tcon_inner .ma_tcon_mdd {
	border: 1px dashed #d0d0d0;
	margin: 0 -3.5rem;
	z-index: 2;
}

/* 하단 내용 */
.ma_bcon {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: (1fr)[3];
	grid-template-columns: repeat(3, 1fr);
	gap: 4rem;
	margin-top: 8rem;
}

.ma_bcon .img_wrap img {
	width: 100%;
}

.ma_bcon .txt_wrap {
	text-align: center;
	margin-top: 3rem;
}

.ma_bcon .txt_wrap dt {
	color: var(--color-black);
	font-size: 2rem;
	line-height: 1.2;
	font-weight: var(--font-sb);
}

.ma_bcon .txt_wrap dd {
	color: #606060;
	font-size: 1.7rem;
	line-height: 1.5;
	margin-top: 1.2rem;
	word-break: keep-all;
	padding: 0 1rem;
}

/* 애니메이션 */
.ma_tcon .ma_tcon_logo {
	opacity: 0;
	transform: translateX(-50px);
	-webkit-transform: translateX(-50px);
	transition: all 1s cubic-bezier(0.42, 0.0, 0.58, 1.0);
	-webkit-transition: all 1s cubic-bezier(0.42, 0.0, 0.58, 1.0);
}

.ma_tcon.active .ma_tcon_logo {
	opacity: 1;
	transform: translateX(0);
	-webkit-transform: translateX(0);
}

.ma_tcon .ma_tcon_inner {
	opacity: 0;
	transform: translateX(50px);
	-webkit-transform: translateX(50px);
	transition: all 1s cubic-bezier(0.42, 0.0, 0.58, 1.0);
	-webkit-transition: all 1s cubic-bezier(0.42, 0.0, 0.58, 1.0);
}

.ma_tcon.active .ma_tcon_inner {
	opacity: 1;
	transform: translateX(0);
	-webkit-transform: translateX(0);
}

.ma_bcon .ma_bcon_inner {
	opacity: 0;
	transform: translateY(50px);
	-webkit-transform: translateY(50px);
	transition: all 1s 0.3s;
	-webkit-transition: all 1s 0.3s;
}

.ma_bcon.active .ma_bcon_inner {
	opacity: 1;
	transform: translateY(0);
	-webkit-transform: translateY(0);
}

.ma_bcon.active .ma_bcon_inner:nth-child(1) {
	transition-delay: 0.3s;
}

.ma_bcon.active .ma_bcon_inner:nth-child(2) {
	transition-delay: 0.5s;
}

.ma_bcon.active .ma_bcon_inner:nth-child(3) {
	transition-delay: 0.7s;
}

/* 모바일CSS */
@media screen and (max-width:1400px) {
	.ma_tcon {
		flex-wrap: wrap;
		justify-content: center;
	}

	.ma_tcon_logo {
		width: 100%;
		text-align: var(--text-ag-center);
	}

	.ma_tcon_logo img {
		width: 100%;
		max-width: 40rem;
	}

	.ma_tcon_inner {
		margin-top: 8rem;
	}

	.ma_tcon_inner:before {
		top: -8rem;
		left: 50%;
		transform: translateX(-50%);
		width: 1px;
		height: 8rem;
	}
}

@media screen and (max-width:800px) {
	.ma_tcon_logo img {
		max-width: 30rem;
	}

	.ma_tcon_inner ul li {
		width: 20rem;
		height: 20rem;
		font-size: 1.7rem;
	}
}

@media screen and (max-width:640px) {
	.ma_tcon_logo img {
		max-width: 25rem;
	}

	.ma_tcon_inner ul li {
		font-size: 1.6rem;
	}

	/* 하단내용 */
	.ma_bcon {
		-ms-grid-columns: (1fr)[1];
		grid-template-columns: repeat(1, 1fr);
		gap: 3rem;
		margin-top: 5rem;
	}
}

/* ==================================================
	회사소개 - 주요 고객사
================================================== */
.customer_logo {
	width: 100%;
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: (1fr)[5];
	grid-template-columns: repeat(5, 1fr);
	gap: 2rem 4rem;
}

.customer_logo>li img {
	width: 100%;
	border: 1px solid #e7e7e7;
	border-radius: 3rem 0rem;
	border: 1px solid #ddd;
	background: var(--color-white);
}

/* 모바일CSS */
@media screen and (max-width:1023px) {
	.customer_logo {
		-ms-grid-columns: (1fr)[4];
		grid-template-columns: repeat(4, 1fr);
	}
}

@media screen and (max-width:800px) {
	.customer_logo {
		-ms-grid-columns: (1fr)[3];
		grid-template-columns: repeat(3, 1fr);
	}
}

@media screen and (max-width:640px) {
	.customer_logo {
		-ms-grid-columns: (1fr)[2];
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem 3rem;
	}
}

/* ==================================================
	회사소개 - 사업장소개
================================================== */
.loc_detail {
	width: 100%;
	max-width: var(--px-base);
	margin-right: auto;
	margin-left: auto;
	margin-top: 6rem;
}

/* 상단내용 */
.loc_top {
	position: relative;
}

.loc_top:before {
	display: block;
	content: "";
	position: absolute;
	left: 0;
	bottom: 7rem;
	width: 100%;
	height: 52%;
	background: url('../images/about/loc_bg.png')#0058a2;
	background-position: 76% 50%;
	background-repeat: no-repeat;
}

.loc_tcon {
	width: 100%;
	max-width: var(--px-base);
	margin: 0 auto;
}

.loc_tcon .img img {
	width: 100%;
}

.loc_tcon .txtarea {
	width: 60%;
	padding: 0 0 14rem 6rem;
}

.loc_tcon .txtarea>div {
	margin: 0;
	padding: 0;
	text-align: left;
}

.loc_tcon .txtarea>div a span {
	position: absolute;
	top: 14px;
	right: 25px;
}

.loc_tcon .txtarea>div a span img {
	width: 100%;
	max-width: 2.2rem;
}

.loc_tcon .txtarea>ul {
	margin-top: 4.5rem;
}

.loc_tcon .txtarea>ul>li {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	margin-top: 1.5rem;
}

.loc_tcon .txtarea>ul>li:first-child {
	margin-top: 0;
}

.loc_tcon .txtarea>ul>li .icon i {
	color: var(--color-red);
	font-size: 2.3rem;
}

.loc_tcon .txtarea>ul>li .icon {
	width: 4rem;
	height: 4rem;
	-ms-flex-negative: 0;
	flex-shrink: 0;
	background: #f5f5f5;
	border-radius: 50%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.loc_tcon .txtarea>ul>li b,
.loc_tcon .txtarea>ul>li p {
	color: var(--color-white);
}

.loc_tcon .txtarea>ul>li b {
	display: inline-block;
	font-size: 1.7rem;
	font-weight: var(--font-bd);
	margin: 0 2.5rem 0 1.5rem;
}

.loc_tcon .txtarea>ul>li p {
	font-size: 1.6rem;
}

/* 로고사이즈 */
.loc_tcon .txtarea>div img {
	display: inline-block;
	width: 100%;
}

.loc_tcon .txtarea>div img.loc01_logo {
	max-width: 45rem;
}

.loc_tcon .txtarea>div img.loc02_logo {
	max-width: 70rem;
}

.loc_tcon .txtarea>div img.loc03_logo {
	max-width: 74rem;
}

.loc_tcon .txtarea>div img.loc04_logo {
	max-width: 45rem;
}

.loc_tcon .txtarea>div img.loc05_logo {
	max-width: 45rem;
}

.loc_tcon .txtarea>div img.loc06_logo {
	max-width: 48rem;
}

/* 모바일CSS */
@media screen and (max-width:1600px) {
	.loc_detail {
		width: 96%;
	}

	/* 상단내용 */
	.loc_top {
		width: 96%;
		margin: 0 auto;
	}
}

@media screen and (max-width:1400px) {
	.loc_detail {
		width: 94%;
	}

	/* 상단내용 */
	.loc_tcon .txtarea {
		padding: 0 3rem 11rem 6rem;
	}

	.loc_tcon .txtarea>ul {
		margin-top: 7.5rem;
	}
}

@media screen and (min-width:1201px) {

	/* 상단내용 */
	.loc_tcon {
		display: flex;
		justify-content: space-between;
		/*align-items: flex-end;*/
		position: relative;
		z-index: 80;
	}

	.loc_tcon .img {
		width: 40%;
		text-align: center;
	}

	.loc_tcon .img img {
		-webkit-box-shadow: 1.2rem 1.2rem 0 0 rgba(183, 183, 183, 0.6);
		box-shadow: 1.2rem 1.2rem 0 0 rgba(183, 183, 183, 0.6);
	}

	.loc_tcon .txtarea>div {
		position: relative;
		padding: 4rem 0;
	}
}

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

	/* 상단내용 */
	.loc_tcon {
		position: relative;
	}

	.loc_top:before {
		display: none;
	}

	.loc_tcon .img {
		width: 100%;
	}

	.loc_tcon .txtarea {
		width: 100%;
		padding: 5rem 3rem;
		background: url('../images/about/loc_bg.png')#0058a2;
		background-position: bottom right;
		background-repeat: no-repeat;
		border-radius: 0 0 3rem 3rem;
	}

	.loc_tcon .txtarea>div {
		display: none;
	}

	.loc_tcon .txtarea>ul {
		margin-top: 0;
	}
}

@media screen and (max-width:1023px) {
	.loc_detail {
		width: 94%;
		margin-top: 3.5rem;
		margin-bottom: 3.5rem;
	}

	/* 상단내용 */
	.loc_top {
		width: 94%;
	}
}

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

	/* 상단내용 */
	.loc_tcon .txtarea>div {
		font-size: 2rem;
	}

	.loc_tcon .txtarea>p {
		font-size: 1.5rem;
	}

	.loc_tcon .txtarea>ul>li {
		flex-wrap: wrap;
	}

	.loc_tcon .txtarea>ul>li p {
		width: 100%;
		margin-top: 2rem;
	}
}

/* ==================================================
	사업영역
================================================== */
.biz_list>ul {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: (1fr)[3];
	grid-template-columns: repeat(3, 1fr);
	gap: 3rem;
}

.biz_list>ul>li .biz_img {
	border-radius: 4rem;
	border: 1px solid #ddd;
}

.biz_list>ul>li .biz_img img {
	width: 100%;
}

.biz_list>ul>li .biz_img2 img {
	width: 100%;
	border-radius: 4rem;
	border: 1px solid #ddd;
}

.biz_list>ul>li p {
	font-size: 1.8rem;
	font-weight: var(--font-md);
	text-align: var(--text-ag-center);
	margin-top: 2rem;
}

.biz_mt30 {
	margin-top: 3rem;
}

.biz_mt60 {
	margin-top: 6rem;
}

/* 애니메이션 */
.biz_list {
	opacity: 0;
	transform: translateY(50px);
	-webkit-transform: translateY(50px);
	transition: all 1s 0.4s;
	-webkit-transition: all 1s 0.4s;
}

.biz_list.active {
	opacity: 1;
	transform: translateY(0);
	-webkit-transform: translateY(0);
}

/* 모바일CSS */
@media screen and (max-width: 1023px) {
	.biz_list>ul {
		-ms-grid-columns: (1fr)[2];
		grid-template-columns: repeat(2, 1fr);
		gap: 3rem 2.5rem;
	}

	.biz_mt30 {
		margin-top: 2.5rem;
	}

	.biz_mt60 {
		margin-top: 5rem;
	}
}

@media screen and (max-width: 640px) {
	.biz_list>ul>li .biz_img {
		border-radius: 2rem;
	}

	.biz_list>ul>li .biz_img2 img {
		border-radius: 2rem;
	}

	.biz_mt30 {
		margin-top: 2rem;
	}

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

/* ==================================================
	사업영역 - 조선사업 - 생산설계
================================================== */
.splan_txt {
	width: 100%;
	background: #efefef;
	border: 1px solid #d6d6d6;
	padding: 4rem;
}

.splan_txt>ul {
	margin-top: 3.5rem;
}

.splan_txt>ul>li {
	display: flex;
	align-items: center;
	font-size: 1.8rem;
	padding-top: 3.5rem;
	word-break: keep-all;
}

.splan_txt>ul>li:first-child {
	padding-top: 0;
}

.cnum {
	display: inline-block;
	width: 30px;
	padding: 0.5rem 1rem;
	background-color: var(--color-red);
	border-radius: 0.5rem;
	text-align: center;
	color: #fff;
	font-size: 1.6rem;
	font-weight: 600;
	margin-right: 1.5rem;
}

.splan_img {
	margin-top: 4rem;
}

.splan_img>ul {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: (1fr)[4];
	grid-template-columns: repeat(4, 1fr);
	gap: 1.6rem;
}

.splan_img>ul>li img {
	width: 100%;
	border: 1px solid #ededed;
}

/* 애니메이션 */
.splan_con .splan_txt {
	opacity: 0;
	transform: translateX(-50px);
	-webkit-transform: translateX(-50px);
	transition: all 1s 0.6s;
	-webkit-transition: all 1s 0.6s;
}

.splan_con.active .splan_txt {
	opacity: 1;
	transform: translateX(0);
	-webkit-transform: translateX(0);
}

.splan_con .splan_img {
	opacity: 0;
	transform: translateX(50px);
	-webkit-transform: translateX(50px);
	transition: all 1s 0.9s;
	-webkit-transition: all 1s 0.9s;
}

.splan_con.active .splan_img {
	opacity: 1;
	transform: translateX(0);
	-webkit-transform: translateX(0);
}

/* 모바일CSS */
@media screen and (max-width: 1023px) {
	.splan_txt {
		padding: 3rem;
	}

	.splan_txt>ul {
		margin-top: 3rem;
	}

	.splan_txt>ul>li {
		font-size: 1.6rem;
		padding-top: 3rem;
		line-height: 1.35;
	}

	.cnum {
		font-size: 1.5rem;
	}

	.splan_img>ul {
		-ms-grid-columns: (1fr)[2];
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==================================================
	사업영역 -  수리조선사업 - Retrofit 사업
================================================== */
/* 표면처리순서 */
.proc_con {
	margin-top: 4rem;
	text-align: center;
}

.proc_con .proc_process-list {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: (1fr)[3];
	grid-template-columns: repeat(3, 1fr);
	gap: 4.5rem;
}

.proc_con .proc_process-list>li {
	position: relative;
	vertical-align: top;
}

.proc_con .proc_process-list>li:after {
	position: absolute;
	display: block;
	content: "";
	width: 1.9rem;
	height: 0.9rem;
	right: -3.2rem;
	top: 50%;
	background: url('../images/icon/c_arr01.png') no-repeat;
	background-size: cover;
}

.proc_con .proc_process-list>li:nth-child(3n) {
	margin-right: 0;
}

.proc_con .proc_process-list>li:nth-child(3n):after {
	display: none;
}

.proc_con .proc_process-list>li:last-child:after {
	display: none;
}

.proc_con .proc_process-list>li .txt {
	line-height: 1.3;
}

.proc_con .proc_process-list>li .txt strong {
	display: block;
	font-size: 2rem;
	font-weight: var(--font-bd);
}

.proc_con .proc_process-list>li .proc_top {
	background: var(--color-red);
	color: var(--color-white);
	padding: 1.5rem 0.9rem;
	border-radius: 2rem 2rem 0 0;
	min-height: 10rem;
}

.proc_con .proc_process-list>li .proc_bot {
	min-height: 28rem;
	background: var(--color-white);
	color: #646464;
	border: 1px solid #ccc;
	padding: 2rem 1.5rem;
	border-radius: 0 0 2rem 2rem;
	text-align: center;
}

.proc_con .proc_process-list>li .proc_bot .l-list01 {
	display: inline-block;
}

.proc_con .proc_process-list>li .proc_bot .l-list01>li {
	text-align: left;
}

.proc_con .proc_process-list>li:first-child .tit,
.proc_con .proc_process-list>li:last-child .tit {
	color: var(--color-white);
	border-bottom: 1px solid var(--color-white);
}

.proc_con .proc_process-list>li .l-list02 {
	text-align: left;
}

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

	.proc_con .proc_process-list {
		-ms-grid-columns: (1fr)[1];
		grid-template-columns: repeat(1, 1fr);
		gap: 4rem 3.5rem;
	}

	.proc_con .proc_process-list>li:after {
		width: 1.1rem;
		height: 2.3rem;
		right: auto;
		top: auto;
		left: 50%;
		bottom: -3rem;
		margin-left: -0.6rem;
		background: url('../images/icon/c_arr02.png') no-repeat;
		background-size: cover;
	}

	.proc_con .proc_process-list>li:nth-child(3n):after {
		display: block;
	}

	.proc_con .proc_process-list>li:last-child:after {
		display: none;
	}

	.proc_con .proc_process-list>li:last-child {
		margin-bottom: 0;
	}

	.proc_con .proc_process-list>li .proc_top {
		min-height: auto;
	}

	.proc_con .proc_process-list>li .proc_bot {
		min-height: auto;
		background: var(--color-white);
	}
}

@media screen and (max-width:800px) {
	.proc_con .proc_process-list>li .txt strong {
		font-size: 2.2rem;
	}
}

@media screen and (max-width:450px) {
	.proc_con {
		margin-top: 1rem;
	}

	.proc_con .proc_process-list>li .txt strong {
		font-size: 2rem;
	}
}

/* ==================================================
	연구개발 - 기술연구소
================================================== */
.rd_con {
	width: 100%;
	background: #efefef;
	border: 1px solid #d6d6d6;
	padding: 4.5rem;
}

.rd_bcon {
	margin-top: 3rem;
	padding-top: 3rem;
	border-top: 1px solid #d6d6d6;
}

.rd_bcon>ul {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: (1fr)[2];
	grid-template-columns: repeat(2, 1fr);
	gap: 4.5rem;
}

.rdin_tit {
	display: flex;
	align-items: center;
	font-size: 2.3rem;
	font-weight: var(-font-sb);
}

.rdin_tit span.num {
	display: inline-block;
	position: relative;
	width: 3.5rem;
	height: 3.5rem;
	background-color: var(--color-blue);
	color: var(--color-white);
	border-radius: 3.5rem;
	line-height: 3.5rem;
	font-size: 1.5rem;
	text-align: center;
	vertical-align: baseline;
}

.rdin_txt {
	font-size: 1.8rem;
	margin-top: 2rem;
	line-height: 1.35;
	word-break: keep-all;
}

.rdin_img {
	margin-top: 2.5rem;
}

.rdin_img>ul {
	display: flex;
	justify-content: space-between;
	gap: 2rem;
}

.rdin_img>ul>li img {
	width: 100%;
	border: 1px solid #dcdcdc;
}

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

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

/* 모바일CSS */
@media screen and (max-width: 1023px) {
	.rd_con {
		padding: 4rem;
	}

	.rd_bcon>ul {
		-ms-grid-columns: (1fr)[1];
		grid-template-columns: repeat(1, 1fr);
		gap: 3.5rem;
	}
}

/* ==================================================
	연구개발 - 연구분야
================================================== */
.fl_con+.fl_con {
	margin-top: 4.5rem;
}

.fl_box {
	width: 100%;
	background: #f5f5f5;
	border: 1px solid #e5e5e5;
	padding: 4.5rem;
	border-radius: 2.5rem;
	margin-top: 3rem;
}

.fl_box>ul {
	display: -ms-grid;
	display: grid;
	gap: 2.5rem;
}

.fl_box.flbox_2>ul {
	-ms-grid-columns: (1fr)[2];
	grid-template-columns: repeat(2, 1fr);
}

.fl_box.flbox_3>ul {
	-ms-grid-columns: (1fr)[3];
	grid-template-columns: repeat(3, 1fr);
}

.fl_box.flbox_4>ul {
	-ms-grid-columns: (1fr)[4];
	grid-template-columns: repeat(4, 1fr);
}

.fl_box>ul>li img {
	width: 100%;
	border: 1px solid #dcdcdc;
}

.fl_box>ul>li p {
	font-size: 1.6rem;
	font-weight: var(--font-md);
	letter-spacing: -0.3px;
	text-align: center;
	background: #dcdcdc;
	padding: 1.2rem 0.5rem;
	margin-top: -0.3rem;
}

/* 애니메이션 */
.fl_allcon .fl_con {
	opacity: 0;
	transform: translateY(50px);
	-webkit-transform: translateY(50px);
	transition: all 1s 0.3s;
	-webkit-transition: all 1s 0.3s;
}

.fl_allcon.active .fl_con {
	opacity: 1;
	transform: translateY(0);
	-webkit-transform: translateY(0);
}

.fl_allcon.active .fl_con:nth-child(1) {
	transition-delay: 0.3s;
}

.fl_allcon.active .fl_con:nth-child(2) {
	transition-delay: 0.7s;
}

.fl_allcon.active .fl_con:nth-child(3) {
	transition-delay: 1.1s;
}

/* 모바일CSS */
@media screen and (max-width: 800px) {
	.fl_box {
		padding: 3rem;
		border-radius: 2rem;
	}

	.fl_box.flbox_2>ul {
		-ms-grid-columns: (1fr)[1];
		grid-template-columns: repeat(1, 1fr);
	}

	.fl_box.flbox_3>ul {
		-ms-grid-columns: (1fr)[1];
		grid-template-columns: repeat(1, 1fr);
	}

	.fl_box.flbox_4>ul {
		-ms-grid-columns: (1fr)[2];
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==================================================
	연구개발 - 연구실적
================================================== */
.perf_table {
	border: 0;
	border-spacing: 0;
	background: var(--color-white);
	border-top: var(--color-black) 2px solid;
	text-align: center;
}

.perf_table caption {
	visibility: hidden;
	overflow: hidden;
	width: 1px;
	height: 1px;
	font-size: 0;
	line-height: 0;
}

.perf_table tr th,
.perf_table tr td {
	vertical-align: middle;
}

.perf_table tr th {
	padding: 1.8rem 0.4rem;
	background-color: #f3f3f3;
	border-right: #ddd 1px solid;
	border-bottom: #ddd 1px solid;
	color: #333;
	font-size: var(--rem-18);
	font-weight: var(--font-sb);
}

.perf_table thead tr:first-child th:last-child {
	border-right: none;
}

.perf_table tr td {
	border-left: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	padding: 1.5rem 1rem;
	color: #595959;
	line-height: 1.4;
	word-break: keep-all;
	font-size: var(--rem-17);
}

.perf_table tr td:nth-child(2) {
	text-align: left;
}

.perf_table tr td:first-child {
	border-left: 0;
}

/* 테이블 가로사이즈 */
.perftb_width01 {
	width: 7%;
}

.perftb_width02 {
	width: 55%;
}

.perftb_width03 {
	width: 27%;
}

.perftb_width04 {
	width: 10%;
}

/* 모바일CSS */
@media screen and (max-width: 768px) {
	.perf_table tr th {
		padding: 1.5rem 0.4rem;
		font-size: var(--rem-17);
	}

	.perf_table tr td {
		padding: 1.2rem 0.8rem;
		font-size: var(--rem-16);
	}
}

/* ==================================================
	ESG 경영
================================================== */
.img_list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-right: -8.4rem;
}

.img_list li {
	width: calc(33.3% - 8.4rem);
	margin-right: 8.4rem;
}

.img_list .img img {
	max-width: 100%;
}

.img_list li .txt_box {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	margin-top: 4.2rem;
}

.img_list li .txt_box span {
	padding-right: 5rem;
	letter-spacing: -0.05em;
	color: rgba(0, 166, 81, 0.5);
	font-size: 1.8rem;
	font-weight: var(--font-bd);
	line-height: 1.58;
}

.img_list li .txt_box .txt h4 {
	font-size: 2.2rem;
	font-weight: var(--font-sb);
	line-height: 1.2;
	letter-spacing: -0.05em;
}

.img_list li .txt_box .txt p {
	margin-top: 2rem;
	font-size: 1.6rem;
	line-height: 1.45;
	letter-spacing: -0.05em;
	color: #505050
}

/* 애니메이션 */
.img_list li {
	opacity: 0;
	transform: translateY(50px);
	-webkit-transform: translateY(50px);
	transition: all 1s 0.3s;
	-webkit-transition: all 1s 0.3s;
}

.img_list.active li {
	opacity: 1;
	transform: translateY(0);
	-webkit-transform: translateY(0);
}

.img_list.active li:nth-child(1) {
	transition-delay: 0.3s;
}

.img_list.active li:nth-child(2) {
	transition-delay: 0.5s;
}

.img_list.active li:nth-child(3) {
	transition-delay: 0.7s;
}

/* 모바일CSS */
@media screen and (max-width:1023px) {
	.img_list {
		margin-right: -3rem;
	}

	.img_list li {
		width: calc(33.3% - 3rem);
		margin-right: 3rem;
	}

	.img_list li .txt_box {
		margin-top: 2.5rem;
	}

	.img_list li .txt_box span {
		padding-right: 2rem;
	}

	.img_list li .txt_box .txt p {
		line-height: 1.5;
	}
}

@media screen and (max-width:800px) {
	.img_list {
		margin-right: 0;
	}

	.img_list li {
		width: 100%;
		margin-right: 0;
		margin-top: 3rem;
	}

	.img_list li:first-child {
		margin-top: 0;
	}

	.img_list li .txt_box .txt p {
		font-size: 16px;
	}
}


/* ==================================================
	커뮤니티 - 카탈로그
================================================== */
.prsection {
	position: relative;
	width: 100%;
	padding-top: 5rem;
}

.prsection:after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: #eeeff0;
}

.prbox {
	position: relative;
	max-width: 115rem;
	width: 100%;
	margin: 0 auto;
	padding-bottom: 5rem;
}

.prbox .img {
	width: 32rem;
}

.prbox .img img {
	width: 100%;
	border: 1px solid #c7bebe;
	-webkit-box-shadow: 15px 15px 20px 0px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 15px 15px 20px 0px rgba(0, 0, 0, 0.2);
	box-shadow: 15px 15px 20px 0px rgba(0, 0, 0, 0.2);
}

.prbox .txt {
	padding-left: 11rem;
	padding-top: 6rem;
	line-height: 1.5;
}

.prbox .txt .eng {
	position: relative;
	font-size: 2rem;
	color: #002C6A;
	font-weight: 500;
	margin-bottom: 1.5rem;
	padding-left: 4rem;
}

.prbox .txt .eng:before {
	content: "";
	display: block;
	width: 3rem;
	height: 0.3rem;
	background: #002C6A;
	position: absolute;
	left: 0;
	top: 1.1rem;
}

.prbox .txt h4 {
	font-size: 2.8rem;
	color: #282d39;
}

.prbox .txt p {
	font-size: 1.8rem;
	margin-top: 1rem;
	margin-bottom: 3.5rem;
}

.prbox .txt p span {
	display: block;
}

.btn_wrap {
	width: 100%;
}

.btn_wrap a {
	display: inline-block;
	font-size: 1.7rem;
	color: #fff;
	position: relative;
	background: var(--color-red);
	line-height: 5.6rem;
	text-align: center;
	margin-right: 2%;
	width: 49%;
	float: left;
}

.btn_wrap a:last-child {
	background: var(--color-blue) !important;
}

.btn_wrap a:last-child {
	margin-right: 0;
}

.btn_wrap a:after {
	content: "";
	display: inline-block;
	width: 1.9rem;
	height: 1.8rem;
	background: url("../images/icon/link_ico.png") no-repeat center;
	background-size: cover;
	margin: 0 0 -0.2rem 1rem;
}

.btn_wrap a:last-child:after {
	background-image: url("../images/icon/download_ico.png");
}

.btn_wrap a:before {
	content: "";
	display: block;
	width: 0%;
	height: 0.4rem;
	background: var(--color-dred);
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	transition: width 0.4s;
}

.btn_wrap a:last-child::before {
	background: #004680 !important;
}

.btn_wrap a:hover:before {
	width: 100%;
}

/* 모바일CSS */
@media screen and (min-width:901px) {
	.prbox {
		display: table;
		z-index: 1;
	}

	.prbox .img {
		display: table-cell;
		vertical-align: top;
	}

	.prbox .txt {
		display: table-cell;
		vertical-align: top;
	}
}

@media screen and (max-width:900px) {
	.prbox {
		padding-bottom: 0;
	}

	.prsection {
		padding-top: 0;
	}

	.prsection:after {
		display: none;
	}

	.prbox .img {
		width: 100%;
		max-width: 28rem;
		margin: 0 auto;
	}

	.prbox .img img {
		max-width: 28rem;
	}

	.prbox .txt {
		padding-left: 0;
		padding-top: 3rem;
	}
}

@media screen and (max-width:700px) {
	.prbox .txt h4 {
		font-size: 2.5rem;
	}

	.prbox .txt p {
		font-size: 1.7rem;
		margin-bottom: 2.5rem;
	}
}

@media screen and (max-width:640px) {
	.prsection {
		margin-bottom: 0;
	}

	.prbox .txt .eng {
		font-size: 1.8rem;
	}

	.prbox .txt h4 {
		font-size: 2.3rem;
		line-height: 1.1;
	}

	.prbox .txt p span {
		display: inline;
	}

	.btn_wrap a {
		float: none;
		width: 100%;
		margin-right: 0;
	}

	.btn_wrap a:last-child {
		margin-top: 1rem;
	}
}

/* ==================================================
	커뮤니티 - 문의하기
================================================== */
.inquiry_bg {
	margin-bottom: 0;
}

/*.content_topcon p {
	font-size: 4.5rem;
	font-weight: var(--font-sb);
}*/

.content_topcon .inq_txt {
	font-size: 2.6rem;
	font-weight: var(--font-rg);
}

.inq_con {
	position: relative;
	height: 15rem;
	background: var(--color-blue);
	border-radius: 0 0 6rem 6rem;
	display: flex;
	align-items: center;
	padding: 0 3rem;
	position: relative;
	justify-content: center;
}

.inq_logo {
	width: 17.7rem;
	height: 5rem;
	background: url("../images/gnb/logo_white.svg") center no-repeat;
	background-size: 100%;
}

.inq_con ul {
	position: relative;
	margin-left: 10.8rem;
}

.inq_con ul:before {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: -5.3rem;
	width: 1px;
	height: 2.5rem;
	background: rgba(255, 255, 255, 0.6);
}

.inq_con ul li {
	display: flex;
	align-items: center;
}

.inq_con ul li span {
	color: var(--color-white);
	font-size: 2rem;
	line-height: 1;
	display: flex;
	align-items: center;
	margin-right: 3.5rem;
}

.inq_con ul li span:last-child {
	margin-right: 0;
}

.inq_con ul li strong {
	font-family: var(--font-Poppins);
	color: var(--color-white);
	font-size: 2rem;
	font-weight: var(--font-bd);
	margin-right: 2.5rem;
}

.inq_con ul li a {
	color: var(--color-white);
}

.iqu_flex {
	display: flex;
	align-items: center;
}

/* 모바일CSS */
@media screen and (max-width:1023px) {
	.inq_con {
		height: auto;
		padding: 4rem 5rem;
		flex-wrap: wrap;
	}

	.iqu_flex {
		flex-wrap: wrap;
	}

	.inq_logo {
		margin: 0 auto;
	}

	.inq_con ul {
		width: 100%;
		margin-left: 0;
		margin-top: 3.5rem;
	}

	.inq_con ul:before {
		display: none;
	}

	.inq_con ul li {
		flex-wrap: wrap;
		justify-content: center;
	}

	.inq_con ul li span {
		font-size: 18px;
		flex-wrap: wrap;
		line-height: 1.2;
	}

	.inq_con ul li span:last-child {
		margin-right: 0;
	}
}

@media screen and (max-width:640px) {
	.content_topcon p {
		font-size: 3.5rem;
	}

	.content_topcon .inq_txt {
		display: block;
		font-size: 2.2rem;
	}

	.inq_con ul {
		margin-top: 3rem;
	}

	.inq_con ul li {
		display: block;
	}

	.inq_con ul li span {
		font-size: 17px;
		margin-top: 0.5rem;
		margin-right: 0;
		justify-content: center;
	}

	.inq_con ul li span:first-child {
		margin-top: 0;
	}
}