@charset "utf-8";

/* ==================================================
	공통틀
================================================== */
.area-box {
	width: 100%;
	max-width: var(--px-base);
	margin: 0px auto;
}

.area-box2 {
	width: 100%;
	max-width: var(--px-base2);
	margin: 0px auto;
}

.area-box3 {
	width: 100%;
	max-width: 1050px;
	margin: 0px auto;
}

.main_con {
	width: 100%;
	position: relative;
	padding: 10rem 0;
	overflow: hidden;
}

.main_con2 {
	width: 100%;
	padding: 10rem 0 0 0;
	overflow: hidden;
}

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

	.area-box2 {
		width: 96%;
	}

	.area-box3 {
		width: 96%;
	}

	.main_con {
		padding: 8rem 0;
	}

	.main_con2 {
		padding: 8rem 0 0 0;
	}
}

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

	.area-box2 {
		width: 94%;
	}

	.area-box3 {
		width: 94%;
	}

	.main_con {
		padding: 7rem 0;
	}

	.main_con2 {
		padding: 7rem 0 0 0;
	}
}

@media screen and (max-width:1023px) {
	.main_con {
		padding: 6rem 0;
	}

	.main_con2 {
		padding: 6rem 0 0 0;
	}
}

@media screen and (max-width:640px) {
	.main_con {
		padding: 5rem 0;
	}

	.main_con2 {
		padding: 5rem 0 0 0;
	}
}

/* ==================================================
	공통사항
================================================== */
/* 타이틀 */
.main_tit {
	position: relative;
	text-align: var(--text-ag-center);
}

.main_tit h1 {
	font-size: 5rem;
	font-weight: 700;
}

.main_tit p {
	font-size: 2rem;
	margin-top: 1.5rem;
}

/* 버튼 */
.marrow {
	margin: 3rem 0;
}

.marrow img {
	max-width: 3.3rem;
}

a.mbtn {
	position: relative;
	display: inline-block;
	font-size: 2rem;
	font-weight: 500;
	vertical-align: middle;
	transition: all .25s ease;
	line-height: 1;
	color: var(--color-white);
	border: 1px solid var(--color-white);
	border-radius: 5rem;
	transition: all 0.3s;
}

a.mbtn:hover {
	color: var(--color-white);
	background: var(--brand-color-dmain);
	border: 1px solid var(--brand-color-dmain);
}

a.mbtn span {
	display: block;
	padding: 1.5rem 6.5rem 1.5rem 3.5rem;
	line-height: 1;
}

a.mbtn span.mbtn_icon {
	position: absolute;
	right: 30px;
	top: 50%;
	padding: 0;
	-webkit-transition: right .25s ease;
	transition: right .25s ease-out
}

a.mbtn:hover span.mbtn_icon {
	right: 25px;
}

a.mbtn span.mbtn_link {
	width: 1.8rem;
	height: 1.2rem;
	margin-top: -7px;
	background: url('../images/icon/white_arrow.svg') no-repeat 0 0;
	background-size: cover;
}

a.mbtn:hover span.mbtn_link {
	background: url('../images/icon/white_arrow.svg') no-repeat 0 0;
}

.btn_box {
	text-align: center;
	margin-top: 5rem;
}

/* 모바일CSS */
@media screen and (max-width: 1279px) {
	.main_tit h1 {
		font-size: 4rem;
	}
}

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

	/* 타이틀 */
	.main_tit h1 {
		font-size: 3.6rem;
	}

	.main_tit p {
		font-size: 1.8rem;
		line-height: 1.35;
	}
}

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

	/* 타이틀 */
	.main_tit h1 {
		font-size: 3rem;
	}
}

/* ==================================================
	메인 영상 비주얼
================================================== */
.top_visual {
	position: relative;
	height: 100vh;
}

.top_visual::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(34, 89, 154, .24)
}

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

.top_visual .bg>div {
	height: 100%;
}

.top_visual .bg video,
.top_visual .bg img {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	object-fit: cover;
}

.top_visual .bg .mo {
	display: none;
}

.top_visual .hgroup {
	position: absolute;
	left: 50%;
	top: 40%;
	width: 100%;
	max-width: 1400px;
	transform: translate(-50%, -50%);
	z-index: 2;
}

.top_visual .hgroup h2 {
	font-family: var(--font-Elice);
	color: var(--color-white);
	line-height: 1.1;
	font-size: 6rem;
	font-weight: 600;
/*	animation: visualTitle 3s ease-out 0.1s both;*/
}
.top_visual .hgroup p {
	margin-top: var(--rem-30);
	font-family: var(--font-Elice);
	color: var(--color-white);
	line-height: 1.6;
	font-size: 2rem;
	font-weight: 500;
/*	animation: visualTitle 3s ease-out 0.1s both;*/
}

.top_visual .scroll {
	display: block;
	position: absolute;
	bottom: 5.6rem;
	left: 50%;
	transform: translateX(-50%);
	width: 2.4rem;
	height: 4rem;
	border: 2px solid #fff;
	border-radius: 4rem;
	background: rgba(255, 255, 255, 0.20);
	z-index: 10;
}

.top_visual .scroll .wheel {
	position: absolute;
	left: 50%;
	top: 20%;
	width: 4px;
	height: 4px;
	background: #fff;
	border-radius: 2px;
	transition: all .3s;
	transform: translateX(-50%);
	animation: scrollWheel 2.5s linear infinite;
}

.sub_content .top_visual .hgroup h2:not(.sub_content.about .top_visual .hgroup h2, .main .top_visual .hgroup h2, .moreapps .top_visual .hgroup h2) {
	line-height: 1;
	font-size: 7.2rem;
	font-weight: 700;
	animation: none;
}

@keyframes visualTitle {
	0% {
		letter-spacing: 0;
	}

	30% {
		letter-spacing: 0;
	}

	100% {
		letter-spacing: 5px;
	}
}

@keyframes scrollWheel {
	68% {
		top: 20%;
		height: 4px;
	}

	76% {
		top: 20%;
		height: 8px;
	}

	84%,
	92% {
		top: 70%;
		height: 4px;
	}
}

/* only pc 1181 ~ */
@media (min-width: 1181px) and (max-width: 1919px) {

	/* .top_visual {
        height: calc(100vw * (980 / 1919));
    } */
	.top_visual .hgroup {
		padding: 0 30px;
	}
	.top_visual .hgroup h2 {
		font-size: calc(100vw * (60 / 1919));
	}
	.top_visual .hgroup p {
		font-size: calc(100vw * (35 / 1919));
	}

	.top_visual .scroll {
		bottom: calc(100vw * (56 / 1919));
		width: calc(100vw * (24 / 1919));
		height: calc(100vw * (40 / 1919));
		border-radius: calc(100vw * (40 / 1919));
		border-width: calc(100vw * (2 / 1919));
	}

	.top_visual .scroll .wheel {
		width: calc(100vw * (4 / 1919));
		height: calc(100vw * (4 / 1919));
		border-radius: calc(100vw * (2 / 1919));
	}

	.sub_content .top_visual .hgroup h2:not(.sub_content.about .top_visual .hgroup h2, .main .top_visual .hgroup h2, .moreapps .top_visual .hgroup h2) {
		font-size: calc(100vw * (72 / 1919));
	}
}

@media (max-width: 1180px) {
	.top_visual {
		height: calc(100vw * (980 / 1180));
	}

	.top_visual .hgroup {
		padding: 0 25px;
	}

	.top_visual .hgroup h2 {
		font-size: calc(100vw * (50 / 1180));
	}

	.top_visual .hgroup p {
		margin-top: var(--rem-20);
		font-size: calc(100vw * (22 / 1180));
	}

	.top_visual .scroll {
		display: none;
	}

	.sub_content .top_visual .hgroup h2:not(.sub_content.about .top_visual .hgroup h2, .main .top_visual .hgroup h2, .moreapps .top_visual .hgroup h2) {
		line-height: 1.3;
		font-size: calc(100vw * (72 / 1180));
	}

	@keyframes visualTitle {
		0% {
			letter-spacing: 0;
		}

		100% {
			letter-spacing: calc(100vw * (8 / 1180));
		}
	}
}

@media (max-width: 767px) {
	/*.top_visual {
		height: 100vh;
	}*/

	.top_visual .hgroup {
		top: 43%;
	}

	.top_visual .hgroup h2 {
		font-size: calc(100vw * (40 / 767));
	}

	.top_visual .scroll {
		display: none;
	}

	.sub_content .top_visual .hgroup h2:not(.sub_content.about .top_visual .hgroup h2, .main .top_visual .hgroup h2, .moreapps .top_visual .hgroup h2) {
		font-size: calc(100vw * (72 / 767));
	}

	@keyframes visualTitle {
		0% {
			letter-spacing: 0;
		}

		100% {
			letter-spacing: calc(100vw * (7 / 767));
		}
	}
}


/* ==================================================
	Business
================================================== */
.mbiz_con {
	display: flex;
	height: 100%;
	overflow: hidden;
}

.mbiz_con>div {
	display: flex;
	width: 25%;
}

.mbiz_con .defense-box {
	position: relative;
	background: url('../images/main/main_defense_bg.jpg')no-repeat;
	background-position: 80% 50%;
	background-size: cover;
}

.mbiz_con .aerospace-box {
	position: relative;
	background: url('../images/main/main_aerospace_bg.jpg')no-repeat;
	background-size: cover;
	background-position: 80% 50%;
}

.mbiz_con .semiconductor-box {
	position: relative;
	background: url('../images/main/main_semiconductor_bg.jpg')no-repeat;
	background-size: cover;
	background-position: 80% 50%;
}

.mbiz_con .vehicle-box {
	position: relative;
	background: url('../images/main/main_vehicle_bg.jpg')no-repeat;
	background-size: cover;
	background-position: 80% 50%;
}
.mbiz_con .defense-box:before,
.mbiz_con .aerospace-box:before,
.mbiz_con .semiconductor-box:before,
.mbiz_con .vehicle-box:before {
	display: block;
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.25);
}

.mbiz_con>div .inner-box {
	width: 100%;
	padding: 6rem 14.58% 40rem;
}

.main-tit-box {
	position: relative;
	z-index: 1;
}
.main-tit-box span{
	display: block;
}

.main-tit-box .main-mini-tit {
	font-size: var(--rem-24);
	font-weight: var(--font-rg);
	color: var(--color-white);
}

.main-tit-box .main-tit {
	margin-top: var(--rem-16);
	color: var(--color-white);
	font-family: var(---font-Elice);
	font-size: 4.5rem;
	font-weight: var(--font-bd);
	line-height: 1.2;
}

.main-tit-box .main-sub-tit {
	display: block;
	margin-top: var(--rem-30);
	color: rgba(255, 255, 255, 0.9);
	font-size: var(--rem-17);
	line-height: 1.5;
}

.main-tit-box .main-mini-tit,
.main-tit-box .main-tit,
.main-tit-box .main-sub-tit {
	letter-spacing: 0.05em;
	filter: blur(20px);
	transition: var(--transition-custom);
}

/* btn */
#mainBusiness .main-view-btn {
    filter: blur(10px);
    transition: var(--transition-custom);
    position: absolute;
    bottom: 10rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 16rem;
	height: 5rem;
	border: 2px solid var(--color-white);
	border-radius: 3rem;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	background: rgba(255, 255, 255, 0.1);
	padding: 0 2rem;
	overflow: hidden;
}

#mainBusiness .main-view-btn em {
	font-size: var(--rem-14);
	font-weight: var(--font-lg);
	color: var(--color-white);
	position: relative;
	z-index: 1;
}

#mainBusiness .main-view-btn:hover .cm-fill {
	width: 60rem;
	height: 60rem;
}

#mainBusiness .btn-effect .cm-fill {
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--color-white);
	transition: width 0.7s, height 0.7s;
	z-index: 0;
}

#mainBusiness .btn-effect:hover .cm-fill {
	width: 40rem;
	height: 40rem;
}

#mainBusiness .btn-effect:hover em {
	color: #333;
}

#mainBusiness .btn-effect:hover:not(.main-visual-more-btn) .arrow-wrap em {
	background: #333;
}

#mainBusiness .btn-effect:hover:not(.main-visual-more-btn) .arrow-wrap .arrow-head {
	border-left: 5.5px solid #333;
}

/* 메인 공통 화살표 */
.arrow-wrap {
	display: flex;
	align-items: center;
}

.arrow-right-wrap .arrow-head {
	position: relative;
	display: inline-block;
	width: 0px;
	height: 0px;
	border-left: 5.5px solid var(--color-white);
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	z-index: 1;
}

.arrow-left-wrap {
	flex-direction: row-reverse;
}

.arrow-left-wrap .arrow-head {
	display: inline-block;
	width: 0px;
	height: 0px;
	border-right: 5.5px solid var(--color-white);
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
}

.arrow-wrap em {
	display: inline-block;
	width: 15px;
	height: 2px;
	background: var(--color-white);
}

#mainBusiness.active .main-view-btn {
	filter: blur(0);
}

/* 반응형CSS */
@media screen and (min-width:1401px) {
	.main-sub-tit {
		white-space: nowrap;
	}

	#mainBusiness.active .main-mini-tit {
		letter-spacing: -0.4px;
		filter: blur(0px);
	}

	#mainBusiness.active .main-tit {
		letter-spacing: -0.025em;
		filter: blur(0px);
	}

	#mainBusiness.active .main-sub-tit {
		letter-spacing: -0.9px;
		filter: blur(0px);
	}
}

@media screen and (max-width:1400px) {
	.mbiz_con>div .inner-box {
		padding: 6rem 11% 30rem;
	}

	.main-tit-box .main-tit {
		font-size:  var(--rem-40);
	}

	#mainBusiness .main-mini-tit {
		filter: blur(0px);
	}

	#mainBusiness .main-tit {
		filter: blur(0px);
	}

	#mainBusiness .main-sub-tit {
		filter: blur(0px);
	}
}

@media screen and (max-width:1200px) {
	#mainBusiness.section {
		height: auto !important;
	}

	#mainBusiness.fp-section .fp-tableCell {
		height: auto !important;
	}

	.mbiz_con {
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: (1fr) [2];
		grid-template-columns: repeat(2, 1fr);
	}

	.mbiz_con .left-box,
	.mbiz_con .right-box {
		background-position: 80% 80%;
	}

	.mbiz_con>div {
		width: 100%;
		/*padding-top: 20rem;*/
	}

	.mbiz_con>div .inner-box {
		padding: 8rem 5rem 10rem;
	}

	.main-tit-box .main-sub-tit {
		margin-top: 1.8rem;
		margin-bottom: 4rem;
	}

	.mbiz_con .main-view-btn {
		position: relative !important;
		bottom: initial !important;
	}
}

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

    .mbiz_con {
        -ms-grid-columns: (1fr) [1];
        grid-template-columns: repeat(1, 1fr);
    }

	.mbiz_con .defense-box,
	.mbiz_con .aerospace-box,
	.mbiz_con .semiconductor-box,
	.mbiz_con .vehicle-box  {
		background-position: 80% 50%;
	}

	.mbiz_con>div .inner-box {
		padding: 12rem 5rem 6rem;
	}

	.main-tit-box .main-tit br {display: none;
	}

	.main-tit-box .main-sub-tit {
		font-size: 1.8rem;
		line-height: 1.45;
	}
}


/* ==================================================
	About us + News Room
================================================== */
#mainAbout .main-tit-box {
	position: relative;
}

#mainAbout .main-tit-box .main-sub-tit {
	margin-top: 2rem;
}

#mainAbout ul {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: (1fr)[3];
	grid-template-columns: repeat(3, 1fr);
	gap: var(--rem-40);
	margin-top: 6rem;
}

#mainAbout ul li{
	display: block;
	width: 100%;
	text-align: left;
}
/* 모바일CSS */
@media screen and (max-width:1200px) {
	#mainAbout ul {
		gap: var(--rem-26);
		margin-top: 5rem;
	}
}
@media screen and (max-width:800px) {
	#mainAbout ul {
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: (1fr)[1];
		grid-template-columns: repeat(1, 1fr);
		gap: var(--rem-25);
		margin-top: var(--rem-40);
	}
}

/* ==================================================
	About us
================================================== */
#mainAbout .main_about li a {
	display: block;
	width: 100%;
	border-radius: 1rem;
	background: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(2px);
	padding: 6rem 4rem;
}

#mainAbout .main_about li:nth-child(1) a {
	background: url('../images/main/mabout_cer.jpg') center no-repeat ;
	background-size: cover;
}
#mainAbout .main_about li:nth-child(2) a {
	background: url('../images/main/mabout_eqmt.jpg') center no-repeat;
	background-size: cover;
}
#mainAbout .main_about li:nth-child(3) a {
	background: url('../images/main/mabout_dc.jpg') center no-repeat;
	background-size: cover;
}

#mainAbout .main_about li a .fig img {
	width: auto;
	width: 100%;
	max-width: 5.8rem;
	max-height: 5.8rem;
}

#mainAbout .main_about li a .mabout_txt {
	margin-top: var(--rem-30);
	color: var(--color-white);
}

#mainAbout .main_about li a .mabout_txt h2 {
	font-size: var(--rem-26);
	font-weight: var(--font-bd);
}

#mainAbout .main_about li a .mabout_txt p {
	color: rgba(255, 255, 255, 0.80);
	font-size: var(--rem-16);
	line-height: 1.35;
	margin-top: 1rem;
}

/* 애니메이션 */
@media screen and (min-width: 801px) {
	#mainAbout .main_about li a {
		transition: 1s all;
	}

	#mainAbout .main_about li a:hover {
		transform: translateY(-35px);
	}
}

/* 모바일CSS */
@media screen and (max-width: 1200px) {
	#mainAbout .main_about li a {
		padding: 6rem 2.5rem 5rem;
	}
}

@media screen and (max-width: 600px) {
	#mainAbout ul {
		margin-top: 5rem;
	}
	   #mainAbout .main_about ul>li a {
        padding: 5rem 2rem 4rem;
    }
}

/* ==================================================
	News Room
================================================== */
#mainAbout .main_news ul{
	margin-top: var(--rem-50);
	width: 100%;
}

#mainAbout .main_news li{
	position: relative;
}

#mainAbout .main_news li a{
	display: block;
	width: 100%;
}

#mainAbout .main_news .news_img{
    width: 100%;
    height: 26rem;
	border-radius: 10px 10px 0 0;
	overflow: hidden;
}

#mainAbout .main_news .news_img .img {
    position: relative;
    text-align: center;
    width: 100%;
    height: 100%;
    display: block;
}

#mainAbout .main_news span{
	display: inline;
}

#mainAbout .main_news .date{
	position: absolute;
	top: 20rem;
	padding: 1rem;
	font-family: var(--font-Outfit);
	font-size: 1.3rem;
	line-height: 1.2;
	text-align: center;
	background-color: #fff;
	border-radius: 0 10px 0 0;
}

#mainAbout  .main_news .date .day{
	display: block;
	font-weight: 800;
	font-size: 2.4rem;
}

#mainAbout .main_news .news_tcon{
	margin-top: var(--rem-30);
}

#mainAbout .main_news .news_tcon .dep{
	font-family: var(--font-Elice);
	font-weight: 800;
	font-size: 2rem;
	color: var(--color-black);
}

#mainAbout .main_news .news_tcon .tit{
	margin-top: var(--rem-13);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* 모바일CSS */
@media screen and (max-width:1200px) {
	#mainAbout .main_news ul {
		margin-top: var(--rem-40);
	}

	#mainAbout .main_news .news_img {
		height: 24rem;
	}
	
	#mainAbout .main_news .date {
		top: 18rem;
	}
}

@media screen and (max-width:800px) {
	#mainAbout .main_news ul {
        gap: var(--rem-40);
        margin-top: var(--rem-40);
    }
}

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

	#mainAbout .main_news .news_img {
		height: 18rem;
	}
	
	#mainAbout .main_news .date {
		top: 12rem;
	}
}