@charset "utf-8";

/*** 공통 ***/
.main .pd150 {padding:150px 0;}
.main .titWrap {margin-bottom:70px;}
.main .titWrap p {position:relative; font-size:var(--fs24); font-weight:700; padding-top:20px;}
.main .titWrap p:before {content:""; position:absolute; width:1px; height:150px; background:#ccc; top:-150px; left:0;}
.main .titWrap h3 {font-size:var(--fs45); line-height: 1.2;}
.main .titWrap div {display:flex; align-items: flex-end; justify-content: space-between; gap:30px;}
.main .titWrap div a {position:relative; padding-bottom:10px;}
.main .titWrap div a:before {content:""; position:absolute; }

.main .titWrap div a {position:relative;display:inline-block; padding:0 40px 10px 0; transition:color .3s ease;}
.main .titWrap div a:hover {color:var(--base1);}

.main .titWrap div a:after {
	content: "";
    position: absolute;
    left: 0;
    bottom: 1px;
    width: 100%;
    border-top: 2px solid #ccc;
    transition: all .3s ease !important;
    -webkit-transition: all .3s ease !important;
    -moz-transition: all .3s ease !important;
}

.main .titWrap div a:before {
	content: "";
    position: absolute;
    right: 3px;
    bottom: -1px;
    width: 15px;
    border-top: 2px solid #ccc;
    transform: rotate(45deg) translateY(-9px);
    transition: all .3s ease !important;
    -webkit-transition: all .3s ease !important;
    -moz-transition: all .3s ease !important;
} 

.main .titWrap div a:hover:after {
	content: "";
    position: absolute;
    left: 0;
    bottom: 1px;
    width: 110%;
    border-top: 2px solid var(--base1);
    transition: .3s;
}

.main .titWrap div a:hover:before {
	content: "";
    position: absolute;
	right: -5px;
    bottom: 0px;
    width: 15px;
    border-top: 2px solid var(--base1);
    transform: rotate(45deg) translateY(-9px);
    transition: .3s;
}


/*** 비주얼 ***/
.main .visual {position:relative; height:100vh; background:#eee;}

.main .visual .scrollAni {display:flex; gap:10px; flex-direction: column; align-items: center; bottom:150px; right:5vw; position:absolute; color:#fff; z-index:99;}
.main .visual .scrollAni p {writing-mode: vertical-lr;  letter-spacing:5px; font-size:var(--fs12); line-height: 1;}
.main .visual .scrollAni .scrollBar {width:13px; display:flex; justify-content: center; padding:10px 0; height:80px; border:1px solid #fff; border-radius:100px; background:rgba(0,0,0,30%); }
.main .visual .scrollAni .scrollBar span {display:inline-block; width:3px; height:18px; background:#fff; border-radius:100px;  position:relative; animation: scrollDown 3s infinite ease-in-out;}

@keyframes scrollDown {
	0% {transform: translateY(-5px) scaleY(1); opacity:0;}
	20% {opacity:1;}
	70% {transform: translateY(60px) scaleY(0.6); opacity:1;}
	100% {transform: translateY(80px) scaleY(0.3); opacity:0;}
}

.mySwiper .swiper-slide .slide-txt {position:absolute; left:5vw; bottom:150px; color:#fff; z-index:999;}
.mySwiper .swiper-slide .slide-txt span {font-size:var(--fs24);}
.mySwiper .swiper-slide .slide-txt h3 {font-size:var(--fs70);  line-height:1.1;}

.visual{position:relative;overflow:hidden}
.mySwiper{position:relative}
.mySwiper .swiper-slide{position:relative;overflow:hidden;}
.swiper-container-horizontal > .swiper-pagination-bullets
.swiper-pagination-bullet {width:5px; height:80px; border-radius:100px; margin-right:5.3vw;}
.swiper-pagination-bullet-active {background:#fff !important;}
.swiper-pagination-bullet {background:#fff !important;}
.swiper-pagination{display:flex; flex-direction:column;     align-items: flex-end; gap:5px; top:30%;}

.mySwiper .swiper-slide .bg{
  opacity:0;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:120%;height:120%;background:center no-repeat;background-size:cover;
  transition:all 1.2s cubic-bezier(0.165,0.840,0.440,1);
}
.mySwiper .swiper-slide.on .bg{opacity:1;width:101%;height:101%}



/*** 사업소개 ***/
.main .businessWrap {padding:150px 0 200px 0;}
.main .businessWrap ul {display:grid; grid-template-columns:repeat(2,1fr); height:510px; color:#fff; position:relative; overflow:hidden; box-shadow:var(--shadow3);}

.main .businessWrap ul::before {content:"";position:absolute;height:10px;width:100%;background:var(--base1);top:0; left:0; z-index:1;}

.main .businessWrap ul>li {transition:background-size .5s ease,background-position .5s ease;will-change:background-size,background-position;}
.main .businessWrap ul>li:nth-child(1) {background:url(/images/main/businessImg01.webp) no-repeat center / cover;}
.main .businessWrap ul>li:nth-child(2) {background:url(/images/main/businessImg02.webp) no-repeat center / cover;}


.main .businessWrap ul>li a {position:relative; padding:80px; height: 100%; display: flex; flex-direction: column; justify-content: space-between;}
.main .businessWrap ul>li a:before {position:absolute; content:""; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.6);}
.main .businessWrap ul>li h3 {font-size:var(--fs32); padding-bottom:20px; position:relative; z-index:1;}
.main .businessWrap ul>li>a>ol {transition:.3s;}
.main .businessWrap ul>li:hover>a>ol {transform:translateY(-15px);}
.main .businessWrap ul>li>a>ol>li {position:relative; padding-left:14px; font-size:var(--fs20);}
.main .businessWrap ul>li>a>ol>li:before {content:""; position:absolute; left:0; top:14px; width:4px; height:4px; border-radius:100px; background:rgba(255,255,255,50%);}


/*** PR ***/
.main .prWrap {background:#F7F7F7;}
.main .prWrap ul {display:grid;grid-template-columns:repeat(4,1fr);gap:40px;}
.main .prWrap ul li {position:relative;}
.main .prWrap ul li a {display:block;}
.main .prWrap ul li a .img {height:320px;overflow:hidden;box-shadow:var(--shadow2);}
.main .prWrap ul li a .img img {width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.main .prWrap ul li a:hover .img img {transform:scale(1.1);}

.main .prWrap ul li::before {content:"";position:absolute;top:0;left:0;height:10px;width:100%;background:var(--base1);transform:scaleX(0);transform-origin:left center;transition:transform .5s ease;z-index:1;pointer-events:none;}
.main .prWrap ul li:hover::before {transform:scaleX(1);}

.main .prWrap ul li:hover a {color:var(--base1);}
.main .prWrap ul li:hover a span {color:#000;}
.main .prWrap ul li a p {overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:30px 0;line-height:1.3;font-size:var(--fs20);word-break:break-all;}
.main .prWrap ul li a span {font-size:var(--fs14);color:#666;transition:.3s;}



/*** quick ***/
.main .quickWrap .quickTit {text-align:center;}
.main .quickWrap .quickTit h3 {font-size:var(--fs60);}
.main .quickWrap .quickTit p {font-size:var(--fs20); color:#666; margin-top:30px;}
.main .quickWrap ul {height:300px; display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:70px;}
.main .quickWrap ul li {transition:.5s;}
.main .quickWrap ul li:hover {transform:translateY(-15px);}
.main .quickWrap ul li a span {margin-top:120px; color:#fff;}
.main .quickWrap ul li a {width:100%; height:100%; display:flex; justify-content: center;align-items: center; box-shadow:var(--shadow2);}
.main .quickWrap ul li:nth-child(1) {background: url(/images/main/quickImg01.webp) no-repeat center / cover;}
.main .quickWrap ul li:nth-child(2) {background: url(/images/main/quickImg02.webp) no-repeat right center / cover;}
.main .quickWrap ul li:nth-child(3) {background:url(/images/main/quickImg03.webp) no-repeat center / cover;}




/* ************************ 태블릿 (~1249) ************************ */
@media screen and (max-width:1249px) {

	/*** 공통 ***/
	.main .businessWrap, .main .quickWrap {padding:150px 80px;}
	
	/*** pr ***/
	.main .prWrap {padding:0px 80px;}
	.main .prWrap ul {gap:20px;}
	.main .prWrap ul li a .img {height:240px;}
	
	/*** quick ***/
	.main .quickWrap ul {gap:20px;}
	
	
	
}




/* ************************ 태블릿 (~991) ************************ */
@media screen and (max-width:991px) {

	/*** 공통 ***/
	.main .businessWrap, .main .quickWrap {padding:150px 40px;}
	
	/*** 비주얼 ***/
	.main .visual {height:80vh;}
	.main .visual .scrollAni {bottom:50px;}
	.swiper-pagination {top:20%;}
	.mySwiper .swiper-slide .slide-txt {margin-right:50px;}
	
	/*** pr ***/
	.main .prWrap {padding:0px 40px;}
	
}



/* ************************ 모바일 (~767) ************************ */
@media screen and (max-width:767px) { 
	
	/*** 공통 ***/
	.main .pd150 {padding:60px 0;}
	.main .businessWrap, .main .quickWrap {padding:60px 20px;}
	.main .titWrap {margin-bottom:40px;}
	.main .titWrap p:before {height:60px; top:-60px;}
	.main .titWrap div {flex-direction: column; align-items: flex-start; gap: 20px;}
	.main .titWrap div>div {flex-direction: row;}
	
	/*** 비주얼 ***/
	.main .visual {height:80vh;}
	.main .visual .scrollAni {bottom:40px;}
	.main .visual .scrollAni .scrollBar {height:50px;}
	
@keyframes scrollDown {
	0% {transform: translateY(-5px) scaleY(1); opacity:0;}
	20% {opacity:1;}
	70% {transform: translateY(35px) scaleY(0.6); opacity:1;}
	100% {transform: translateY(45px) scaleY(0.3); opacity:0;}
}
	
	.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {height:50px;}
	.mySwiper .swiper-slide .slide-txt {top:20%; bottom:auto;}
	
	/*** 사업소개 ***/
	.main .businessWrap ul {height:300px;}
	.main .businessWrap ul>li a {padding:40px;}
	
	/*** pr ***/
	.main .prWrap {padding:0px 20px;}
	.main .prWrap ul {grid-template-columns: repeat(2, 1fr);}
	
	/*** quick ***/
	.main .quickWrap ul {height:200px; margin-top:40px;}

}


/* ************************ 모바일 (~500) ************************ */
@media screen and (max-width:500px) {
	/*** 비주얼 ***/
	.main .visual {height:80vh;}
	.main .titWrap div a {line-height:1;}
	.mySwiper .swiper-slide .slide-txt span {line-height:1.2;}
	.mySwiper .swiper-slide .slide-txt h3 {margin-top:10px;}
	

	/*** 사업소개 ***/
	.main .businessWrap ul {grid-template-columns: repeat(1, 1fr); height:auto;}
	.main .businessWrap ul>li>a>ol>li {line-height:1.5;}
	.main .businessWrap ul>li>a>ol>li:before {top:9px;}
	
	
	/*** pr ***/
	.main .prWrap ul li a .img {height:150px;}
	.main .prWrap ul li a p {margin:15px 0;}
	
	/*** quick ***/
	.main .quickWrap ul {grid-template-columns: repeat(1, 1fr);         height: auto;}
	.main .quickWrap ul li a span {margin-top:0; padding:40px 0;}
}