.mainWrap{position:relative;width:100%;background:#fff;min-height:94rem;}

/*-----------------------------------------
# 메인 비주얼
-------------------------------------------*/
.mainV_Wrap{position:relative;width:100%;height:100vh;box-sizing: border-box;}
/*메인 비주얼 h1*/
.maTitleInner {left: 0;bottom: 38%;width: 100%;position: absolute;z-index: 11;}
.maTitle {display: flex;position: relative;box-sizing: border-box;max-width: 164rem;padding: 0 2rem;margin: 0 auto;width: 100%;align-items: flex-start;justify-content: flex-start;flex-direction: column;}
.maTitle dl{text-align:left;margin:0 0 2rem 0;color: #FFF;font-family: 'Outfit', sans-serif;font-size: 2.8rem;font-style: normal;font-weight: 500;line-height: 3.4rem;letter-spacing: 0.56px;}
.maTitle h1{margin:0;overflow:hidden;}
.maTitle h1 span {opacity: 1;top: 0rem;position: relative;color: #FFF;font-family: pretendard-600;font-size: 6rem;font-style: normal;font-weight: 600;line-height: 8rem;}

/*메인 비주얼 써클 로딩*/
.maspBox {
height: 1.3rem;
position: absolute;
left: 0;
bottom: 30%;
width: 100%;
z-index: 11;
}
.maspInner {
height: 1.3rem;
display: flex;
position: relative;
box-sizing: border-box;
max-width: 164rem;
padding: 0 2rem;
margin: 0 auto;
width: 100%;
align-items: center;
justify-content: flex-start;
}

.maspInner .pager{display:flex;justify-content:center;gap:2rem}
.maspInner .pager button{opacity:1;position:relative;display:flex;justify-content:center;align-items:center;width:auto;height:auto;border-radius:50%;color:#fff;cursor:pointer;background:transparent;transition:.2s}
.maspInner .pager button:after{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:5px;height:5px;border-radius:50%;background-color:#fff;content:"";transition:all .2s}
.maspInner .pager button.on:after{opacity:0}
.maspInner .pager .progress{transform:rotate(-90deg)}
.maspInner .pager .circle-origin{fill:transparent;stroke:rgb(255, 255, 255);stroke-width:3;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:all .2s}
.maspInner .pager button.on .circle-origin {animation: progress 15s linear forwards;}
@keyframes progress {from { stroke-dashoffset: -38; }to { stroke-dashoffset: 0; }}
svg.progress.mo_circle{display:none;}
@media screen and (max-width: 767px) {
	svg.progress.pc_circle{display:none;}
	svg.progress.mo_circle{display:inline-block;width:12px;height:12px;}
	.maspInner .pager button:after{width:3px;height:3px;}
	.maspInner .pager button.on .circle-origin {animation: progress 15s linear forwards;}
	@keyframes progress {from { stroke-dashoffset: -20; }to { stroke-dashoffset: 0; }}
}




.mainvSlide.swiper{
	z-index:10;
	position:relative;
	height:100%;
	box-sizing: border-box;
}
.mainvSlide .swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    box-sizing: content-box;
}
.mainvSlide .swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
}

.mainVbox{
	box-sizing: border-box;
	position:relative;
	width:100%;
	overflow: hidden;
	height:100%;
	    background-color: #000;
}
.mainVbox::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%);
    pointer-events: none;
}

/* background: linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%), url(<path-to-image>) lightgray 50% / cover no-repeat, url(<path-to-image>) lightgray 0px -340.078px / 100% 136.187% no-repeat; */

.oci_video {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100vh;
    -o-object-fit: cover;
    object-fit: cover;
}

/* .mainvSlide .swiper-slide-active .bg01{ */
	/* transition:all 4.2s ease-in-out; */
    /* transform: scale(1); */
/* } */
/* .mainvSlide .swiper-slide-active .bg02{ */
	/* transition:all 4.2s ease-in-out; */
    /* transform: scale(1); */
/* } */
/* .mainvSlide .swiper-slide-active .bg03{ */
	/* transition:all 4.2s ease-in-out; */
    /* transform: scale(1); */
/* } */

/* .bg01 { */
	/* transition:all 4.2s ease-in-out; */
    /* transform: scale(1.1); */
    /* position: absolute; */
    /* left: 0; */
    /* top: 0; */
    /* z-index: 1; */
    /* width: 100%; */
    /* height: 100%; */
    /* background-image: url(/public/img/oci/main/mainV_00.webp); */
    /* background-size: cover; */
    /* background-repeat: no-repeat; */
    /* background-position: center center; */
/* } */
.bg02 {
	transition:all 4.2s ease-in-out;
    transform: scale(1.1);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-image: url(/public/img/oci/main/mainV_01.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.bg03 {
	transition:all 4.2s ease-in-out;
    transform: scale(1.1);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-image: url(/public/img/oci/main/mainV_01.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}




/*스크롤info*/
.scrollBox {transform: translateY(-50%);top: 54%;display: flex;position: absolute;right: 10rem;z-index: 13;flex-direction: column;align-items: center;}
.scrollLine {display: flex;width: 2px;height: 7rem;justify-content: center;position: relative;border-radius: 99px;background: rgba(255, 255, 255, 0.20);overflow: hidden;}
.scrollLine span {width: 2px;height: 2rem;position: absolute;left: 50%;top: 0;transform: translateX(-50%);background: #FFF;border-radius: 50%;animation-name: scroll;animation-duration: 1.5s;animation-iteration-count: infinite;animation-timing-function: linear;}
@keyframes scroll {0% {top:0; opacity:1;}70% {opacity:1;}100% {top:100%; opacity:0;}}
.scrollTxt {transform: rotate(-90deg);margin-bottom: 5.4rem!important;color: #FFF;font-family: pretendard-700;font-size: 1.4rem;font-style: normal;font-weight: 700;line-height: 1.2rem;letter-spacing: 1.68px;}

@media screen and (max-width: 1600px) {
	.maTitle h1 b{
		font-size: 5.4rem;
		line-height: 7rem;
	}
	.maTitle h2 b{
		font-size: 5.4rem;
		line-height: 7rem;
	}
}
@media screen and (max-width: 991px) {
	.maTitle dl {
		margin: 0 0 2rem 0;
		font-size: 2rem;
		line-height: 3rem;
		letter-spacing: 0.46px;
	}
	.maTitle h1 span{
		font-size: 4rem;
		line-height: 6rem;
	}
	.maTitle h2 span{
		font-size: 4rem;
		line-height: 6rem;
	}
	.maspInner {
		padding: 0 3rem;
	}
	.scrollBox {
		right: 0rem;
		bottom: 0;
	}
}
@media screen and (max-width: 767px) {
	/* .mainV_Wrap{ */
		/* height: calc(100vh - 60px); */
	/* } */
	.mainV_Wrap{
		height:58rem;
	}
	.maTitleInner {
		left: 0;
		bottom: 13rem;
		width: 100%;
		position: absolute;
		z-index: 11;
	}
	.maTitle {
		padding: 0 3rem;
	}
	.maTitle dl {
		margin: 0 0 1rem 0;
		font-size: 1.4rem;
		line-height: 2rem;
		letter-spacing: 0;
	}
	.maTitle h1 span{
		font-size: 2.6rem;
		line-height: 3.6rem;
	}
	.maTitle h2 span{
		font-size: 2.6rem;
		line-height: 3.6rem;
	}
	
	.maspBox {
		height: 1rem;
		bottom: 10rem;
	}
	.maspInner .pager {
		gap: 0.6rem;
	}
	
	
	.scrollBox {
		transform: inherit;
		top: inherit;
		right: 0rem;
		bottom: 10rem;
	}
	.scrollTxt {
		margin-bottom: 3.4rem!important;
		font-size: 0.8rem;
		line-height: 0.8rem;
		letter-spacing: 0.96px;
	}
	.scrollLine {
		width: 2px;
		height: 4rem;
	}
	.scrollLine span {
		height: 1rem;
	}
	
	
}

/*-----------------------------------------
# 메인 비주얼 하단 뉴스 슬라이드
-------------------------------------------*/
.mavnewSlideBox{
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:9rem;
	z-index:10;
	border-top: 1px solid rgba(255, 255, 255, 0.20);
	background: rgba(0, 0, 0, 0.20);
	backdrop-filter: blur(5px);
}
.mavnewSlideInner {
    width: 100%;
    height: 100%;
    z-index: 3;
    max-width: 164rem;
    padding: 0 2rem;
    margin: 0 auto;
    position: relative;
}
.mavnewBar{
	overflow:hidden;
	width:100%;
	position:relative;
	height:100%;
	padding: 0;
}
.updown.swiper{
	height:100%;
	padding:0 13.1rem 0 0;
}
.updown .swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    box-sizing: content-box;
    flex-direction: column;
}
.updown .swiper-slide{height:100%!important;}


.updbtnGroup {
    position: absolute;
    right: 0;
    top: 2rem;
}
.upd_btnInner {
    display: flex;
    width: 10.1rem;
    height: 5rem;
	position:relative;
}
.upd_btnInner:before {
    top: 1.5rem;
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: 1px;
    height: 2rem;
    opacity: 0.2;
    background: #FFF;
}
.upd_btnInner .swiper-button-prev {
	margin: 0;
    position: relative;
    right: 0;
    top: 0;
    width: 5rem;
    height: 5rem;
    left: 0;
}
.upd_btnInner .swiper-button-prev:after {
    width: 5rem;
    height: 5rem;
    content: '';
    background-image: url(/public/img/oci/common/upd_prev.webp);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}

.upd_btnInner .swiper-button-next{
	margin: 0;
    position: relative;
	width: 5rem;
    height: 5rem;
	right:0;
	top: 0;
	left: 0;
}
.upd_btnInner .swiper-button-next:after {
    width: 5rem;
    height: 5rem;
    content: '';
    background-image: url(/public/img/oci/common/upd_next.webp);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}



.mavnew {
    width: 100%;
    height: 100%;
    position: relative;
	padding:0 19rem 0 0;
}
.mavnewTitle {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 0 0 0 9.4rem;
    align-items: center;
    justify-content: flex-start;
}
.mavnewTitle span{
	position:absolute;
	left:0;
	display: flex;
	padding: 1.2rem 1.6rem;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 99px;
	background: #F4020C;
	color: #FFF;
	text-align: center;
	font-family: pretendard-800;
	font-size: 1.4rem;
	font-style: normal;
	font-weight: 800;
	line-height: 1.2rem;
	text-transform: uppercase;
}
.mavnewTitle a{
	display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
	margin:0;
	text-align:left;
	color: #FFF;
	font-family: pretendard-600;
	font-size: 1.6rem;
	font-style: normal;
	font-weight: 600;
	line-height: 3.6rem;
}
.mavnewImg{
	position:absolute;
	right:0;
	top:0;
	overflow:hidden;
	width:16rem;
	height:9rem;
}

@media screen and (max-width: 767px) {
	.mavnewSlideBox {
		height: 6rem;
	}
	.mavnewSlideInner {
		padding: 0 0 0 2rem;
	}
	.mavnewTitle span {
		padding: 0.8rem 1rem;
		font-size: 1.1rem;
		line-height: 0.8rem;
	}
	.mavnewTitle {
		padding: 0 0 0 6.2rem;
	}
	.mavnewTitle a {
		font-size: 1.2rem;
		line-height: 1.8rem;
	}
	.updown.swiper {
		height: 100%;
		padding: 0;
	}
	.mavnew {
		padding: 0 6.2rem 0 0;
	}
	.mavnewImg {
		position: absolute;
		right: 0;
		top: 0;
		overflow: hidden;
		width: 10.7rem;
		height: 6rem;
	}
	
	
	.updbtnGroup {
		position: absolute;
		right: 0;
		top: 1.5rem;
	}
	.upd_btnInner {
		width: 6.1rem;
		height: 3rem;
	}
	.upd_btnInner .swiper-button-prev,
	.upd_btnInner .swiper-button-next{
		width: 3rem;
		height: 3rem;
	}
	.upd_btnInner:before {
		top: 0.75rem;
		width: 1px;
		height: 1.5rem;
	}
}

/*-----------------------------------------
# 메인 제품소개
-------------------------------------------*/
.maProductWrap{
	width:100%;
	position:relative;
	background: #fff;
	padding:14rem 0; 
	overflow:hidden;
	
	/* background-image: url(/public/img/oci/main/maProductWrap_bg.webp); */
    /* background-size: cover; */
    /* background-repeat: no-repeat; */
    /* background-position: center center; */
}
.mapLeftTopBg{
	width:64.7rem;
	height:49.6rem;
	/* display:none; */
	mix-blend-mode: multiply;
	position:absolute;
	left:0;
	top:0;
	z-index:6;
	background-image: url(/public/img/oci/main/mapLeftBg.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	
	/* -webkit-mask-image: linear-gradient(-45deg, transparent 20%, transparent 20%, black 20%, black 100%, transparent 80%, transparent 100%); */
    /* mask-image: linear-gradient(-45deg, transparent 20%, transparent 20%, black 20%, black 100%, transparent 80%, transparent 100%); */
}
.mapRightBottomBg{
	/* display:none; */
	position:absolute;
	right:0;
	bottom:0;
	z-index:6;
}
.mapRightBottomBg svg.pcsvg{display: flex;}
.mapRightBottomBg svg.mosvg{display:none;}
.mapRightBottomBg svg{
	width:59.7rem;
	height:44.6rem;
}

.maProductSideBox{
	z-index:5;
	max-width:164rem;
	padding:0 2rem;
	margin:0 auto;
	position:relative;
}
.maProductCont{
	width:100%;
	position:relative;
}
.mapBtnGroup {
    z-index: 10;
    position: absolute;
    left: 0;
    bottom: 4rem;
}
.maP_gallBox{
	position:relative;
	margin:6rem 0 0 0;
	width:100%;
	display:flex;
}


.mapNavBox{
	position:absolute;
	right:0;
	top:-12.2rem;
	z-index:10;
}
.mapNavBox .prodBtn{
	margin:0;
	display: flex;
	padding: 1.7rem 0;
	justify-content: center;
	align-items: center;
	border-bottom: 1px solid #F4020C;
}
.mapNavBox .prod_Btn {
	display: flex;
	align-items: center;
    justify-content: flex-start;
    gap: 2rem;
    color: #F4020C;
    font-family: pretendard-500;
    font-size: 2rem;
    font-weight: 500;
    line-height: 2.7rem;
}
.mapNavBox .prodBtn .prod_Btn span {
	display: inline-block;
	width: 1.7rem;
	height: 1.7rem;
	background-image: url(/public/img/oci/common/red_arrow_big.png)!important;
	background-size: 1.7rem;
	background-repeat: no-repeat;
	background-position: center center;
}

.mapNavinner {
    gap: 5rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.mapNav{
	cursor:pointer;
	position:relative;
	padding:0 0 1rem 0;
	color: #AAA;
	font-family: 'Outfit', sans-serif;
	font-size: 2.8rem;
	font-style: normal;
	font-weight: 400;
	line-height: 3.6rem;
}
.mapNav:before{
	content:none;
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:2px;
	background:#F4020C;
}
.mapNav.on{
	font-weight: 500;
	color: #F4020C;
}
.mapNav.on:before{
	content:'';
}


.maP_gallTextBox {
	background:#fff;
    z-index: 5;
    width: 36.25%;
	position:relative;
}
.maP_gallTextBox:before {
    content: '';
    position: absolute;
    left: -2000%;
    top: 0;
    background: #fff;
    z-index: 4;
    width: 2000%;
    height: 100%;
}

.maP_gallTextBox .swiper-container{
	overflow:hidden;
}
.maP_gallTextBox .swiper-slide{
	z-index:1;
}
.maP_gallTextBox .swiper-slide-active{
	z-index:2;
}
.maP_TextBox {
    display: flex;
    padding: 4rem 0 0 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.maP_TextBox p{
	color: #F4020C;
	font-family: 'Outfit', sans-serif;
	font-size: 2rem;
	font-style: normal;
	font-weight: 600;
	line-height: 2rem;
	margin:0 0 1rem 0;
}
.maP_TextBox h2 {
	gap:2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.maP_TextBox h2 span{
	color: #000;
	font-family: 'Outfit', sans-serif;
	font-size: 6rem;
	font-style: normal;
	font-weight: 500;
	line-height: 7rem;
}
.maP_TextBox h2 dl {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 0;
    color: #000;
    font-family: pretendard-300;
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 300;
    line-height: 3.4rem;
}
.maPBtn{
	display:block;
	margin:4rem 0 0 0;
}
.maPBtn .mabuL_Btn span{
	background-image: url(/public/img/oci/common/black_arrow.png);
    background-size: 11px;
    background-repeat: no-repeat;
    background-position: center center;
}
.maPBtn .mabuL_Btn:hover{
	    color: #F4020C;
	font-family: pretendard-500;
	font-weight: 500; 
}
.maPBtn:hover .mabuL_Btn span{
	background-image: url(/public/img/oci/common/red_arrow.png);
    background-size: 11px;
    background-repeat: no-repeat;
    background-position: center center;
}





.maP_gallImgBox{
	/* position:relative; */
	width:63.75%;
}
.hg_Mini_imgBox{
	position:relative;
	width:100%;
}
.hg_Mini_imgBox figure {
    background: #f8f8f8;
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-bottom: 85.208%;
    z-index: 2;
}
.hg_Mini_imgBox img {
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    mix-blend-mode: multiply;
    /* width: 100%; */
}

@media screen and (max-width: 1600px) {
	.mapLeftTopBg {
		width: 55.7rem;
		height: 44.6rem;
	}
	.mapRightBottomBg svg {
		width: 54.7rem;
		height: 39.6rem;
	}
	
	
	.mapNavinner {
		gap: 3rem;
	}
	.mapNav {
		padding: 0 0 1rem 0;
		font-size: 2.4rem;
		line-height: 3.6rem;
	}
	
	
	.maP_TextBox {
		padding: 0;
	}
	.maP_TextBox h2 span {
		font-size: 5.4rem;
		line-height: 6.4rem;
	}
	.maPBtn {
		margin: 3rem 0 0 0;
	}
	
	
	.mapBtnGroup {
		position: absolute;
		left: 0;
		bottom: 0rem;
	}
}
@media (max-width:1200px) {
	.maP_gallTextBox {
		padding: 0 2rem 0 0;
		width: 36.25%;
	}
	.maP_TextBox h2 {
		gap: 1rem;
	}
	.maP_TextBox h2 span {
		font-size: 5rem;
		line-height: 6rem;
	}
	
	.maPBtn {
		margin: 2rem 0 0 0;
	}
}
@media screen and (max-width: 991px) {
	.maProductWrap {
		padding: 10rem 0;
	}
	
	.mapLeftTopBg {
		width: 45.7rem;
		height: 34.6rem;
	}
	.mapRightBottomBg svg {
		width: 49.7rem;
		height: 34.6rem;
	}
	
	.maP_gallBox {
		margin: 4rem 0 0 0;
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	
	
	.mapNavBox {
		top: -10.2rem;
		/* margin: 0 0 4rem 0; */
		/* position: relative; */
		/* right: 0; */
		/* top: 0; */
	}
	.mapNavinner {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 3rem;
	}
	
	
	.maP_gallTextBox {
		padding: 0 0 3rem 0;
		width: 100%;
	}
	.maP_TextBox h2 span {
		font-size: 4rem;
		line-height: 5rem;
	}
	.maP_TextBox h2 dl {
		font-size: 1.7rem;
		line-height: 3rem;
	}
	
	
	.maP_gallImgBox {
		width: 100%;
	}
	
	
	.mapBtnGroup {
		margin: 2rem 0 0 0px;
		position: relative;
		display:inline-block;
		left: 0;
		bottom: 0rem;
	}
	.maP_gallImgBox .pnBtnGroupInner {
		display: flex;
		/* width: 100%; */
		/* height: 6.7rem; */
		justify-content: space-between;
	}
}
@media screen and (max-width: 767px) {
	.maProductWrap {
		padding: 5rem 0;
	}
	
	.mapLeftTopBg {
		width: 19.7rem;
		height: 14.6rem;
	}
	.mapRightBottomBg svg.pcsvg{display:none}
	.mapRightBottomBg svg.mosvg {
		display: flex;
	}
	.mapRightBottomBg svg {
		width: 19.3rem;
		height: 15.1rem;
	}
	
	.mapNavBox {
		top: -8.2rem;
	}
	.mapNavBox .prodBtn {
		padding: 1rem 0;
	}
	.mapNavBox .prod_Btn {
		gap: 1rem;
		font-size: 1.6rem;
		line-height: 2rem;
	}
	.mapNavBox .prodBtn .prod_Btn span {
		width: 1.4rem;
		height: 1.4rem;
		background-image: url(/public/img/oci/common/red_arrow_big.png)!important;
		background-size: 1.4rem;
	}
	
	
	.mapNavinner {
		gap: 1.9rem;
	}
	.mapNav {
		padding: 0 0 1rem 0;
		font-size: 1.5rem;
		line-height: 2.2rem;
	}
	
	
	.maP_gallTextBox {
		padding: 0 0 4rem 0;
	}
	.maP_TextBox p {
		font-size: 1.4rem;
		line-height: 1.4rem;
		margin: 0 0 0.6rem 0;
	}
	.maP_TextBox h2 span {
		font-size: 2.8rem;
		line-height: 4rem;
	}
	.maP_TextBox h2 dl {
		display: block;
		display: -webkit-box;
		overflow: hidden;
		white-space: normal;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 1.6rem;
		line-height: 2.6rem;
	}
	.maP_TextBox h2 dl br{display:none;}
	
	
	.maPBtn {
		margin: 1.6rem 0 0 0;
	}
}

/*-----------------------------------------
# 메인 사업소개
-------------------------------------------*/
.mabuWrap{
	width:100%;
	position:relative;
	background: #F8F8F8;
	padding:14rem 0;
}

.mabiuSvg_pc {
    position: absolute;
    bottom: 0;
    left: 0rem;
    z-index: 3;
	width:50rem;
	height:56.3rem;
	background-image: url(/public/img/oci/main/mabiuSvg_bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.mabuSideBox{
	z-index:3;
	max-width:164rem;
	padding:0 2rem;
	margin:0 auto;
	position:relative;
}
.mabuInner {
    z-index: 4;
    position: relative;
    display: flex;
    gap: 10rem;
}
.mabu_pc_person{
	position:absolute;
	left:0;
	bottom:0;
	z-index:2;
}
.mabu_pc_person.pc{display:inline-block;}
.mabu_pc_person.mo{display:none;}
.mabu_pc_person img {
    width: 50%;
}

.ociTitle{
	position:relative;
}
.ociTitle h2 {
	margin:0;
    gap: 2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.ociTitle h2 p{
	color: #F4020C;
	font-family: 'Outfit', sans-serif;
	font-size: 2rem;
	font-style: normal;
	font-weight: 600;
	line-height: 2.4rem;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}
.ociTitle h2 span {
    gap: 1rem;
    display: flex;
    color: #000;
    font-family: pretendard-600;
    font-size: 6rem;
    font-style: normal;
    font-weight: 400;
    line-height: 6.8rem;
}
.ociTitle h2 span svg {
	width:2rem; 
	height:3rem;
    top: -1rem;
    position: relative;
}
.ociTitle h3{
	margin:6rem 0 0 0;
	text-align:left;
	color: #000;
	font-family: pretendard-300;
	font-size: 1.8rem;
	font-style: normal;
	font-weight: 300;
	line-height: 3.4rem;
}

.mabuLeft{
	position:relative;
	width:36%;
}
.mabuRight{
	position:relative;
	width:64%;
}
.mabuList{
	position:relative;
	width:100%;
}
.mabuList ul{
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	position:relative;
	width:100%;
	margin:0;
	padding:0;
}
.mabuList ul li{
	list-style:none;
	position:relative;
	width:100%;
	margin:0;
	padding:5rem 35rem 5rem 0;
	min-height:18.2rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.mabuL_text{
	position:relative;
	max-width:54rem;
}
.mabuL_text h3{
	margin:0;
	color: #000;
	font-family: pretendard-500;
	font-size: 3rem;
	font-style: normal;
	font-weight: 500;
	line-height: 3.8rem;
}
.mabuL_text h4{
	margin:2rem 0 2rem 0;
	color: #666;
	font-family: pretendard-300;
	font-size: 1.6rem;
	font-style: normal;
	font-weight: 300;
	line-height: 3rem;
}
.mabuL_img {
    top: 5rem;
    position: absolute;
    right: 0rem;
    width: 32.8rem;
}
.mabuL_img img{
	max-width:100%;
}
.mabuL_Btn{
	position:relative;
}
.mabuL_Btn{
    gap: 1rem;
    display: flex;
    color: #000;
    font-family: pretendard-400;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2.2rem;
    align-items: center;
    justify-content: flex-start;
}
.mabuL_Btn span {
    display: inline-block;
    width: 1.1rem;
    height: 1.1rem;
    /* background: #FFF; */
	background-image: url(/public/img/oci/common/black_arrow.png);
    background-size: 11px;
    background-repeat: no-repeat;
    background-position: center center;
}
.mabuList ul li a:hover .mabuL_text h3{
	color: #F4020C;
	font-family: pretendard-600;
	font-weight: 600;
}
.mabuList ul li a:hover .mabuL_Btn{
	color:#F4020C;
	font-family: pretendard-600;
	font-weight: 600;
}
.mabuList ul li a:hover .mabuL_Btn span{
	/* background: #F4020C; */
	background-image: url(/public/img/oci/common/red_arrow.png);
    background-size: 11px;
    background-repeat: no-repeat;
    background-position: center center;
}
@media screen and (max-width: 1600px) {
	.mabiuSvg_pc {
		width: 45rem;
		height: 51.3rem;
		background-image: url(/public/img/oci/main/mabiuSvg_bg.png);
	}
}
@media screen and (max-width: 991px) {
	.mabuWrap {
		padding: 10rem 0 30rem 0;
	}
	.mabiuSvg_pc {
		bottom: inherit;
		top: 0;
		width: 36.2rem;
		height: 28.8rem;
		background-image: url(/public/img/oci/main/mabiuSvg_bg_mo.png);
	}
	.mabuInner {
		display: flex;
		gap: 6rem;
		flex-direction: column;
	}
	
	
	.ociTitle h2 {
		gap: 1.4rem;
	}
	.ociTitle h2 p {
		font-size: 1.8rem;
		line-height: 2rem;
		letter-spacing: 1px;
		text-transform: uppercase;
	}
	.ociTitle h2 span {
		font-size: 5rem;
		line-height: 6rem;
	}
	.ociTitle h3 {
		margin: 4rem 0 0 0;
		font-size: 1.7rem;
		line-height: 3rem;
	}
	
	.mabuLeft {
		position: relative;
		width: 100%;
	}
	.mabuRight {
		position: relative;
		width: 100%;
	}
}
@media screen and (max-width: 767px) {
	.mabuWrap {
		padding: 5rem 0 2rem 0;
	}
	
	.mabiuSvg_pc {
		width: 18.1rem;
		height: 14.4rem;
	}
	
	.mabuSideBox {
		padding: 0;
	}
	.mabuInner {
		display: flex;
		gap: 0rem;
		flex-direction: column;
	}
	.mabuLeft .ociTitle{
		padding:0 2rem;
	}
	
	.ociTitle h2 {
		gap: 1rem;
	}
	.ociTitle h2 p {
		font-size: 1.2rem;
		line-height: 1.4rem;
		letter-spacing: 0.72px;
		text-transform: uppercase;
	}
	.ociTitle h2 span {
		gap: 0.6rem;
		font-size: 2.8rem;
		line-height: 3.8rem;
	}
	.ociTitle h2 span svg {
		width: 1.4rem;
		height: 2rem;
		top: -0.6rem;
		position: relative;
	}
	.ociTitle h3 {
		margin: 2rem 0 0 0;
		font-size: 1.6rem;
		line-height: 2.6rem;
	}
	.ociTitle h3 br{display:none;}
	
	
	.mabu_pc_person{
		position:relative;
		width:100%;
		left:0;
		bottom:0;
		z-index:2;
	}
	.mabu_pc_person.pc{display:none;}
	.mabu_pc_person.mo{display:flex;}
	.mabu_pc_person img {
		width: 100%;
	}
	
	
	.mabuRight{
		padding:0 2rem;
	}
	
	.mabuList ul{
		border-top:none;
	}
	.mabuList ul li {
		padding: 3rem 0rem 3rem 0;
		min-height: auto;
		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	}
	.mabuList ul li:last-child{
		border-bottom: none;
	}
	.mabuL_img {
		margin: 3.6rem 0 0 0;
		top: 0;
		position: relative;
		right: 0rem;
		width: 100%;
	}
	.mabuL_text {
		position: relative;
		max-width: 100%;
	}
	.mabuL_text h3 {
		font-size: 2.2rem;
		line-height: 2.8rem;
	}
	.mabuL_text h4 {
		margin: 1rem 0 1.6rem 0;
		font-size: 1.4rem;
		line-height: 2.4rem;
	}
	
	
	.mabuL_Btn {
		gap: 0.7rem;
		font-size: 1.4rem;
		line-height: 1.8rem;
	}
	.mabuL_Btn span {
		/* width: 3rem; */
		/* height: 3rem; */
		background-size: 9px;
	}
}

/*-----------------------------------------
# 메인 미디어센터
-------------------------------------------*/
.maMediaWrap{
	width:100%;
	position:relative;
	background: #fff;
	padding:14rem 0;
	overflow:hidden;
}
.maMediaSideBox{
	z-index:3;
	max-width:164rem;
	padding:0 2rem;
	margin:0 auto;
	position:relative;
}

ul.mainNewsTablist{
	display:flex;
	margin:6rem 0 4rem 0;
	gap:5rem;
}
ul.mainNewsTablist li{
	padding:0;
	margin:0;
	list-style:none;
}
ul.mainNewsTablist li p{
	cursor:pointer;
	color: #AAA;
	font-family: pretendard-400;
	font-size: 2.8rem;
	font-style: normal;
	font-weight: 400;
	line-height: 3.6rem;
	position:relative;
	padding:0 0 1rem 0;
	border-bottom: 2px solid #fff;
}
ul.mainNewsTablist li.active p{
	color: #F4020C;
	font-family: pretendard-600;
	font-weight: 600;
	border-bottom: 2px solid #F4020C;
}
.mThumnail {
	margin:0;
    width: 100%;
    padding-bottom: 55.25%;
    overflow: hidden;
    position: relative;
    height: 0;
    width: 100%;
    overflow: hidden;
    padding-bottom: 56.277%;
    z-index: 3;
}
.mThumnail:after {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 0;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-top-color: rgba(0, 0, 0, 0.06);
    border-top-style: solid;
    border-top-width: 1px;
    border-right-color: rgba(0, 0, 0, 0.06);
    border-right-style: solid;
    border-right-width: 1px;
    border-bottom-color: rgba(0, 0, 0, 0.06);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color: rgba(0, 0, 0, 0.06);
    border-left-style: solid;
    border-left-width: 1px;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    pointer-events: none;
    content: "";
    z-index: 4;
}
.mThumnail img {
    position: absolute;
    width: auto;
    /* height: 100%; */
    z-index: 3;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.mt_text{
	margin-top: 4rem;
	position:relative;
	width:100%;
}
.mt_text dl{
	margin:0;
	color: #F4020C;
	font-family: pretendard-700;
	font-size: 2rem;
	text-align:left;
	font-style: normal;
	font-weight: 700;
	line-height: 2.4rem;
}
.mt_text h3{
	margin:1.6rem 0 1.4rem 0;
	display: -webkit-box;
	overflow: hidden;
	white-space: normal;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	color: #000;
	text-align:left;
	font-family: pretendard-500;
	font-size: 2.6rem;
	font-style: normal;
	font-weight: 500;
	line-height: 3.8rem;
}
.mt_text p{
	margin:0 0 3rem 0;
	display: -webkit-box;
	overflow: hidden;
	white-space: normal;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	color: #666;
	text-align:left;
	font-family: pretendard-300;
	font-size: 1.6rem;
	font-style: normal;
	font-weight: 300;
	line-height: 3rem;
}

/* 기존 .hide가 display:none; 이라면 아래처럼 수정 */
.mainNewsSwiper.hide {
    visibility: hidden;
    position: absolute;
    left: 0; top: 0; width: 100%;
    pointer-events: none;
    height: auto; /* 필요시 명시 */
}

.mainNewsSwiper .swiper-slide a:hover .mt_text h3{
	font-family: pretendard-700;
	font-weight: 700;
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-skip-ink: none;
	text-decoration-thickness: auto;
	text-underline-offset: auto;
	text-underline-position: from-font;
}
.mainNewsSwiper .swiper-slide a:hover .mabuL_Btn{
	    color: #F4020C;
	font-family: pretendard-600;
	font-weight: 600;
}
.mainNewsSwiper .swiper-slide a:hover .mabuL_Btn span{
	/* background: #F4020C; */
	background-image: url(/public/img/oci/common/red_arrow.png);
    background-size: 11px;
    background-repeat: no-repeat;
    background-position: center center;
}

.swiper.mainNewsSwiper{
	overflow: unset !important;
}
.swiper.mainNewsSwiper .swiper-slide{
    overflow: hidden;
}
.hide {
    display: none!important;
}
.pnBtnGroup {
    position: absolute;
    right: 0;
    top: -19.3rem;
}
.pnBtnGroupInner {
    gap: 1rem;
    position: relative;
    display: flex;
    height: 4.5rem;
    align-items: center;
}
.pnvoid{
	position:relative;
	width: 1px;
	height: 1.8rem;
	background: #EEE;
}
.pnBtnGroupInner .swiper-button-prev {
	margin: 0;
    position: relative;
    right: 0;
    top: 0;
    width: 4.5rem;
    height: 4.5rem;
    left: 0;
	background: #fff;
}
.pnBtnGroupInner .swiper-button-prev:after {
    height: 17px;
    width: 17px;
    content: '';
    background-image: url(/public/img/oci/common/silmainsl_prev.webp);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}
.pnBtnGroupInner .swiper-button-prev:hover{
	background: #FFF;
}
.pnBtnGroupInner .swiper-button-prev:hover:after{
	background-image: url(/public/img/oci/common/silmainsl_prev_ho.webp);
}
.pnBtnGroupInner .swiper-button-next{
	margin: 0;
    position: relative;
	width: 4.5rem;
    height: 4.5rem;
	right:0;
	top: 0;
	left: 0;
	background: #fff;
}
.pnBtnGroupInner .swiper-button-next:after {
    height: 17px;
    width: 17px;
    content: '';
    background-image: url(/public/img/oci/common/silmainsl_next.webp);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}
.pnBtnGroupInner .swiper-button-next:hover{
	background: #FFF;
}
.pnBtnGroupInner .swiper-button-next:hover:after{
	background-image: url(/public/img/oci/common/silmainsl_next_ho.webp);
}

@media screen and (max-width: 1600px) {
	.mt_text {
		margin-top: 3rem;
	}
	.mt_text h3 {
		margin: 1.2rem 0 1rem 0;
		font-size: 2.2rem;
		line-height: 3.4rem;
	}
	
	
	/* .pnBtnGroupInner .swiper-button-prev, */
	/* .pnBtnGroupInner .swiper-button-next{ */
		/* width: 6.7rem; */
		/* height: 6.7rem; */
	/* } */
	.pnBtnGroupInner .swiper-button-prev:after,
	.pnBtnGroupInner .swiper-button-next:after{
		/* height: 13px; */
		/* width: 13px; */
	}
}
@media screen and (max-width: 991px) {
	.maMediaWrap {
		padding: 10rem 0;
	}
}
@media screen and (max-width: 767px) {
	.maMediaWrap {
		padding: 5rem 0;
	}
	
	
	ul.mainNewsTablist {
		display: flex;
		margin: 4rem 0 2rem 0;
		gap: 2rem;
	}
	ul.mainNewsTablist li p {
		font-size: 1.5rem;
		line-height: 2.2rem;
		padding: 0 0 1rem 0;
		border-bottom: 2px solid #fff;
	}
	
	
	.mt_text {
		padding: 0 1.6rem;
		margin-top: 2.4rem;
	}
	.mt_text dl {
		font-size: 1.3rem;
		line-height: 1.5rem;
	}
	.mt_text h3 {
		margin: 1.2rem 0 1rem 0;
		font-size: 1.8rem;
		line-height: 2.6rem;
	}
	.mt_text p {
		margin: 0 0 1.6rem 0;
		font-size: 1.4rem;
		line-height: 2.4rem;
	}
	.mainNewsSwiper .swiper-slide a:hover .mabuL_Btn span {
		background-size: 9px;
	}
	
	
	.pnBtnGroup {
		display: inline-block;
		margin: 2rem 0 0 0;
		position: relative;
		right: 0;
		top: 0;
	}
	.pnBtnGroupInner {
		display: flex;
		/* width: 100%; */
		/* height: 5.3rem; */
		justify-content: space-between;
		align-items: center;
	}
	/* .pnBtnGroupInner .swiper-button-prev, */
	/* .pnBtnGroupInner .swiper-button-next{ */
		/* width: 5.3rem; */
		/* height: 5.3rem; */
	/* } */
	/* .pnBtnGroupInner .swiper-button-prev:after, */
	/* .pnBtnGroupInner .swiper-button-next:after{ */
		/* height: 13px; */
		/* width: 13px; */
	/* } */
}