/**************************************************
* 버전관리
* version : v=1
* Last Update : 
**************************************************/

/********************************************************
■ 공통
********************************************************/
.inn{max-width:75rem; margin:0 auto}
.fs48{font-size:2.4rem; color:#000; line-height:1.2; overflow:hidden;}
.fs48 > span{display:inline-block;}
.fs22{font-size:1.1rem; color:#000; font-weight:600;}

.moreBtn{display:inline-block; color:#c92830; line-height:2.05rem; border:1px solid #c92830; padding:0 1.1rem;  border-radius:1.15rem; font-size:0.9rem; font-weight:500; transition: all 0.2s ease-out 0s;}
.moreBtn:hover{background:#c92830; color:#fff;}
.notice .no_post{height:100%; width:100%;}
.notice .no_post > div{padding: 1rem; display: flex; align-items: center;  justify-content: center;flex-direction: column; background:#FAFAFA; border:1px solid rgba(53,53,53,0.1); font-size:1.1rem; width:100%; height: 100%;}
.notice .no_post > div span{display: flex; align-items: center;  justify-content: center; width:10rem; height:10rem; background:#fff; border:2px solid #eee; border-radius:50%; margin-bottom:1rem; }
.notice .no_post > div span img {width:3.5rem;}



@media (max-width:1560px){
	.inn{padding:0 2rem;}
}
@media (max-width:768px){
	.inn{padding:0 1.5rem;}
	.fs48{font-size:1.47rem;}
	.fs22{font-size:1rem; font-weight:500;}
	.moreBtn{line-height:1.6rem; font-size:0.88rem; padding:0 0.8rem; }
}
@media (max-width:320px){
	.fs22{font-size:0.8rem; }
}

/********************************************************
■ 애니메이션
  wow.js
  - data-wow-duration: 애니메이션이 실행(지속)되는 시간 설정
  - data-wow-delay: 페이지 로딩 후 애니메이션이 실행되기까지 간격 설정
  - data-wow-offset: 요소가 어느 정도 올라왔을 때 애니메이션이 실행될지 지정
  - data-wow-iteration: 애니메이션 반복 횟수 설정
********************************************************/

.text-ani{animation: fadeInUp 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes fadeInLift {
    0% {
		opacity: 0;
		-webkit-transform: translateX(100px);
		transform: translateX(100px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}

@keyframes fadeInRight {
    0% {
		opacity: 0;
		-webkit-transform: translateX(-100px);
		transform: translateX(-100px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}

/********************************************************
■ 컨텐츠
********************************************************/
/*비쥬얼*/
#visual{height:100vh; position:relative; background:url('/images/default/main/visual_bg.jpg')no-repeat left 50%; background-size:cover;}
#visual .img{position:absolute; right:0px; top:0px; width:51.1rem;  aspect-ratio: 1022/959; background:url('/images/default/main/visual_img.png')no-repeat left 50%; background-size:contain; animation: fadeInLift 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s both; }
#visual .inn{ display: flex; align-items: center; height: 100%; }
#visual h2 {margin-bottom:4.5rem; z-index: 1; overflow:hidden;}
#visual h2 span{display:block; overflow:hidden; line-height:1.4;}

@media (max-width:1560px){
	#visual .img{right:auto; left:35%;}
}
@media (max-width:1024px){
	#visual .inn{align-items: normal; padding-top:10rem; }
	#visual{background-image:url('/images/default/main/visual_bg_mob.jpg')}
	#visual .img{ left:45%; width:55%; background-image:url('/images/default/main/visual_img_mob.png'); aspect-ratio: 591/961; }
}
@media (max-width:768px){
	#visual .img{left:40%; width:60%;}
}
@media (max-width:600px){
	#visual{height:95vh;}
	#visual .inn{padding-top:7rem; }
	#visual .img{left:30%; width:70%;}
}
@media (max-width:320px){
	#visual{height:100vh;}
}

/*코릭스 소개*/
.cts1{position:relative; }
.cts1 h3{margin-bottom:0.9rem;}
.cts1 .img{width:39.6rem; aspect-ratio: 792/749; background-repeat:no-repeat; background-position: left 50%; background-size:contain; z-index: -1;}
.cts1.item1{padding-top:11.5rem; padding-bottom:3rem;}
.cts1.item1 .inn{ padding-left:23rem;} 
.cts1.item1 p{margin-bottom:1.7rem; }
.cts1.item1 .img{position:absolute; left:-12rem; top:0px; background-image:url('/images/default/main/cts_img1.png'); animation: fadeInRight 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s both;}
.cts1.item2{padding-top:11.5rem; padding-bottom:20rem;}
.cts1.item2 .inn{ padding-right:29.5rem; text-align:right;} 
.cts1.item2 p{margin-bottom:3rem; }
.cts1.item2 .img{position:absolute; right:-5.4rem; top:0px;  background-image:url('/images/default/main/cts_img2.png'); animation: fadeInLift 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s both;}

@media (max-width:1560px){
	.cts1 .img{width:50%;}
	.cts1.item1 .inn{ padding-left:30%;} 
	.cts1.item1 .img{left:-24%}
	.cts1.item2 .inn{ padding-right:40%;} 
	.cts1.item2 .img{right:-15%; }
}
@media (max-width:1024px){
	.cts1.item1{padding-top: 6.5rem; z-index: 1;}
	.cts1.item1 .inn{ padding-left:20%;} 
	.cts1.item1 .img{top:-70%}
	.cts1.item2{ padding-bottom: 10rem;}
	.cts1.item2 .inn{ padding-right:2rem; padding-left:20%; text-align:left;} 
	.cts1.item2 .img{top:-20%}
}
@media (max-width:768px){
	.cts1 .img{width:60%}
	.cts1.item1{padding-bottom:0; padding-top: 3.5rem;}
	.cts1.item1 .inn{ padding-left:20%; }
	.cts1.item1 .img{top:-100%; left: -30%;}
	.cts1.item2{padding-bottom: 8rem; padding-top: 21rem;}
	.cts1.item2 .img{top:-5rem}
	
}
@media (max-width:600px){
	.cts1 .img{width:88%}
	.cts1.item1 .inn,
	.cts1.item2 .inn{ padding-left:1.5rem; }
	.cts1.item1 .img{left: -40%;}
	.cts1.item2 .img{top:0}
}
@media (max-width:320px){
	.cts1.item1{padding-top:5.5rem;}
	.cts1.item1 .img{top:-65%; }
	.cts1.item2{padding-bottom: 5.5rem; padding-top: 18.5rem;}
}
/*사업영역*/
.cts2{}
.half_div{display:flex;}
.half_div .img{width:50%; position:relative; overflow:hidden; height:33.7rem; background-repeat:no-repeat; background-position: 50% 50%; background-size:cover; transition: all 0.5s ease-in;}
.half_div .text{display: flex; align-items: center; width:50%; background:#F7F7F7;}
.half_div .text h3{margin-bottom:2rem;}
.half_div .text p{margin-bottom:2rem;}
.half_div:nth-child(1) .text{padding-left:6.75rem}
.half_div:nth-child(2) .img{order:2;}
.half_div:nth-child(2) .text{padding-right:6.5rem; text-align:right; order:1; justify-content: flex-end;}

@media (max-width:1560px){
	.half_div:nth-child(1) .text{padding:0 2rem;}
	.half_div:nth-child(2) .text{padding:0 2rem; text-align:left; justify-content: flex-start}
}
@media (max-width:1300px){
	.half_div .text p br{display:none;}
}
@media (max-width:768px){
	.half_div{display:block;}
	.half_div .img{width:100%; padding-top:77.7%; height:auto;}
	.half_div .text{width:100%;}
	.half_div .text p {font-size:1rem;}
	
	.half_div:nth-child(1) .text,
	.half_div:nth-child(2) .text{ padding:4.5rem 2rem  4.5rem 20%;}
	
}
@media (max-width:600px){
	.half_div:nth-child(1) .text,
	.half_div:nth-child(2) .text{padding:2.25rem 1.5rem  4.5rem;}
}

/*게시판*/
.cts3{padding-top:11.5rem;}
.cts3 .inn{display:flex; gap:3.75rem;}
.cts3 h3{position:relative; margin-bottom:2.5rem;}
.cts3 h3 .moreBtn{position:absolute; right:0px; top:0.4rem;}
.video-wrap{width:50%;}
.video-wrap .vod{position:relative; width: 100%; height:auto; aspect-ratio: 16 / 9;}
.video-wrap .vod iframe{position:absolute; left:0px; top:0px; width:100%; height:100%;}

.notice-wrap{display: flex; flex-direction: column; flex-shrink: 0; width:calc(50% - 3.75rem);}
.notice-wrap .notice {flex:1;}
.notice-wrap .notice .swiper-container {height:100%;}
.noti_item{display:block;}
.noti_item .noti_img{display:block; position:relative; padding-top: 85.4%; border:1px solid #dedede; overflow:hidden;}
.noti_item .noti_img img{position:absolute; left:50%; top:50%; width:100%;  transform:translate(-50%,-50%);}
.noti_item .noti_txt{display:block; margin-top:1.5rem; padding:0 1.3rem;}
.noti_item .noti_txt > span{display:block;}
.noti_item .noti_txt .tit{font-size:1.2rem; color:#000; font-weight:600; overflow: hidden;text-overflow: ellipsis;display: -webkit-box;	-webkit-line-clamp: 1; -webkit-box-orient: vertical;word-wrap:break-word; line-height: 1.3em;height: 1.3em;}
.noti_item .noti_txt .date{font-size:0.9rem; color:#828282; font-weight:500;}

@media (max-width:1560px){
	.noti_item{padding:1px;}
	.noti_item .noti_txt{padding:0 0.3rem;}
	.noti_item .noti_txt .tit{font-size:1rem;}
}
@media (max-width:1024px){
	.cts3{padding-top:4.5rem;}
	.cts3 .inn{flex-direction: column}
	.video-wrap{width:100%;}
	.notice-wrap{width:100%;}
}
@media (max-width:600px){
	.cts3 h3{margin-bottom:1.4rem;}
	.cts3 h3 .moreBtn{top:0;}
	.noti_item .noti_txt{padding:0 1rem;}
	.noti_item .noti_txt .tit{font-size:1.2rem;}
}

/* 페이지 링크 */
.cts4{padding:11.5rem 0 8.75rem; text-align:center;}
.cts4 p{font-size:1.2rem; font-weight:600; color:#828282; margin:1.1rem 0 2.5rem;}
.cts4 ul{max-width:60rem; margin:0 auto; padding:0 5.5rem; display:flex; justify-content: space-between; align-items: center;}
.cts4 ul a{position:relative; display: flex; align-items: center;  justify-content: center;  aspect-ratio: 1 / 1; border-radius:50%; font-weight:600;  text-align:center; z-index:0;}

.cts4 ul a.line{width:7.3rem; color:#828282;  font-size:1.2rem; border:2px dashed #828282;}
.cts4 ul a.line:before{content:""; position:absolute; left:50%; top:50%; width:50%; height:50%; border-radius:50%; opacity:0; transform:translate(-50%,-50%); transition: all 0.3s ease-out 0s; background:#828282; }
.cts4 ul a.line:hover:before{width:100%; height:100%; opacity:0.1;}
.cts4 ul a.one{width:8.55rem; font-size:1.4rem; background:#C92830; color:#fff; transition: background 0.3s ease-out 0s;}
.cts4 ul a.one:hover{background:#bd232b; box-shadow:0 0 1rem rgba(0,0,0,0.1);}
.cts4 ul .bar{position:relative; width:6.5rem; height:1px; border-top:2px dashed #828282; }
.cts4 ul .bar:before{content:""; position:absolute; left:0px; bottom:0px; width:100%; height:1px; background:#fff;}

@media (max-width:1560px){
	.cts4 ul{padding:0; }
}
@media (max-width:1024px){
	.cts4 p{font-size:0.95rem;}
	.cts4 ul{gap:2rem;}
	.cts4 ul .bar{width:100%;}
}
@media (max-width:768px){
	.cts4{padding:5rem 0 4.5rem;}
	.cts4 ul{gap:1rem;}
	.cts4 ul a.line{width:18vw; color:#828282;  font-size:0.88rem; }
	.cts4 ul a.one{width:25vw; font-size:1rem; }
}