/*공통*/
.inner {width:1500px;margin:0 auto;}
#container{background:#f7f7f7;}
@media (max-width:1500px){
	.inner {width:100%;padding:0 1rem;}
}



.visual {height:39rem;position:relative;margin-top:5rem;}
.visual .swiper-slide {position:relative;overflow:hidden;border-radius:1.5rem;}
.visual .swiper-slide .slide-bg{position:absolute;left:0;top:0;width:100%;height:100%;}
.visual .swiper-slide .slide-bg .bg {width:100%;height:100%;}
.visual .swiper-slide.swiper-slide-active .slide-bg .bg {animation: image-zoom-out 8s 0s forwards;}
.visual .swiper-slide {display:flex;align-items:center;}
.visual .swiper-slide  .slide-tit {position:relative;z-index:1;width:1600px;margin:0 auto;}
.visual .swiper-slide  .slide-tit h2{color:#fff;font-size:2.75rem;font-weight:700;line-height:1.3;text-shadow: 6px 6px 8px rgb(0 0 0 / 30%);}
.visual .swiper-slide  .slide-tit h2 b{font-size:3.4rem;display:block;}
.visual .swiper-slide  .slide-tit p {color:#fff;font-size:1.15rem;text-shadow: 6px 6px 8px rgb(0 0 0 / 30%);margin-top:1.25rem;opacity:0;
	transform:translateY(50px);transition-duration: 1.5s;}
.visual .swiper-slide.swiper-slide-active  .slide-tit p{
	opacity:1.0;
	transform:translateY(0);transition-duration: 1.5s;
}

.visual .swiper-slide .slide-tit h2 .char{opacity:0;}
.visual .swiper-slide.swiper-slide-active  .slide-tit h2 .char{-webkit-animation: text-active-animation-up 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation: text-active-animation-up 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: calc(0.1s + (var(--char-index) - 1) * 0.03s);}

@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(50px); 
		transform: translateY(50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
}

@keyframes text-active-animation-up {
    from {
        opacity:0;filter:Alpha(opacity=0);
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
    }
    to {
        opacity:1.0;filter:Alpha(opacity=100);
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}


/* 메인 비주얼 :: Animation */
@keyframes image-zoom-out {
	from {
		transform: scale(1.08,1.08)
	}
	to {
		transform: scale(1.0,1.0)
	}
}

.visual  .next-btn {width:1.4rem;height:0.5rem;z-index:1;border-radius:50%;background:url(/images/default/main/slide-next.png)no-repeat center center;cursor:pointer;background-size:cover;}
.visual  .prev-btn {width:1.4rem;height:0.5rem;z-index:1;left:0;border-radius:50%;background:url(/images/default/main/slide-prev.png)no-repeat center center;cursor:pointer;background-size:cover;}

.visual .btn-list {display:flex;}

.visual .btn-list .swiper-pagination {width:auto;position:relative;justify-content:center;align-items:center;display:flex;}
.visual .btn-list .swiper-pagination span {color:#fff;padding:0 1.3rem;position:relative;}
.visual .btn-list .swiper-pagination span:first-child:after{content:'';display:block;position:absolute;width:1px;height:0.6rem;background:#fff;right:0;top:0.3rem;}

.progress-bar-con {position: absolute;top:25%;left: 50%;margin-left:-800px;width: 1600px;height:2rem;}
.progress-bar-con .progress-bar {width:9.2rem;background-color: rgba(255,255,255,0.4);z-index:1;position:absolute;left:0;height:3px;bottom:0;}


.progress {height: 100%;width: 0;background-color: #fff;}
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap');
.visual  .scroll {font-size:12px;color:rgba(255,255,255,0.6);position:absolute;width:1600px;margin-left:-800px;font-weight:700;font-family: "Archivo";bottom:2.75rem;left:50%;z-index:1;    writing-mode: vertical-lr;}
.visual  .scroll span {width:0.9rem;height:1.25rem;border:1px solid #fff;border-radius:0.45rem;display:inline-block;margin-top:0.5rem;position:relative;}
.visual  .scroll span em{position:absolute;width:3px;height:3px;background:#fff;border-radius:50%;left:50%;bottom:0.25rem;margin-left:-1.5px;animation: scroll 1s ease-in-out infinite;}

@keyframes scroll {
    0% {
        top: 0.25rem; /* 초기 위치 */
    }
    50% {
        top: 0.75rem; /* 아래로 이동 */
    }
    100% {
        top: 0.25rem; /* 다시 원래 위치로 */
    }
}

@media (max-width:1860px){
	.visual .swiper-slide .slide-tit{width:100%;padding:0 2rem;}
	.progress-bar-con{width:100%;left:7.5%;margin-left:0;}
	.visual .scroll{width:100%;margin-left:0;left:0;bottom:1rem;left:5rem;}
	
}	
@media (max-width:1200px){
	.visual{padding:0 1rem;height:32rem;}
	.progress-bar-con{left:3rem;}
	.visual .swiper-slide .slide-tit h2{font-size:2.2rem;}
	.progress-bar-con{top:12%;}
	.visual .scroll{left:3rem;}
	.visual .swiper-slide .slide-tit p{font-size:1rem;}


}
@media (max-width:767px){
	.visual{margin-top:3.6rem;padding-top:1rem;}
	.visual .swiper-slide .slide-tit{padding-bottom:3rem;}
}

@media (max-width:500px){
	.visual .swiper-slide .slide-tit{padding:0 1rem;padding-bottom:3rem;}
	.visual .swiper-slide .slide-tit h2 br{display:none;}
	.visual .swiper-slide .slide-tit p br{display:none;}
	.progress-bar-con{left:2rem;}
	.visual .scroll{left:2rem;}

}

/*******************ctn01*******************/

.ctn {padding:11rem 0;background:#f7f7f7;position:relative;}
.ctn .bg-txt {font-size:11rem;color:#fff;font-weight:700;position:absolute;line-height:1;}
.ctn01 .bg-txt {left:0;top:7rem;opacity:0;transform: translateX(100%);transition-duration: 1.5s;}
.ctn01.active .bg-txt {opacity:1;transform: translateX(0);transition-duration: 1.5s;}

.ctn01{background:#f7f7f7 url(/images/default/main/ctn-1-bg.png)no-repeat center right+13rem;}
.ctn01 .inner{display:flex;position:relative;z-index:1;align-items: center;}
.ctn01 .inner > div {width:50%;}
.ctn01 .inner > div img{max-width:100%;}
.ctn01 .inner > div.left{text-align:center;}

.ctn01 .inner > div.right{padding-left:7.25rem;}
.ctn01 .inner > div.right h2{font-size:2.9rem;color:#000000;font-weight:700;line-height:1;letter-spacing:-0.04rem;}
.ctn01 .inner > div.right h2 b{font-size:3.5rem;font-weight:700;color:#004ea2;}
.ctn01 .inner > div.right > p {font-size:1.2rem;color:#333;font-weight:600;margin-top:1.25rem;}
.ctn01 .inner > div.right > a {display:inline-block;width:12.5rem;height:3.75rem;border-radius:1.875rem;border:2px solid #fff;background:#004ea2;color:#fff;font-weight:800;font-size:0.9rem;    line-height: calc(3.75rem - 4px);    padding: 0 1.6rem;position:relative;margin-top:1.5rem;}
.ctn01 .inner > div.right > a:before,
.ctn01 .inner > div.right > a:after{content:''; display:block; position:absolute; width:1.15rem; height:0.8rem; background:url(/images/default/main/arrow-right.svg)no-repeat center center;top:50%; transform:translateY(-50%); transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); will-change: transform;background-size:cover;}
.ctn01 .inner > div.right > a:before{left:0; opacity:0; transform: translate(0, -50%);}
.ctn01 .inner > div.right > a:after{right:1.6rem;}
.ctn01 .inner > div.right > a:hover{ }
.ctn01 .inner > div.right > a:hover em { padding-left:2rem;}
.ctn01 .inner > div.right > a:hover:before{opacity: 1; transform: translate(1.6rem, -50%);}
.ctn01 .inner > div.right > a:hover:after{opacity: 0; right:0;}
.ctn01 .inner > div.right ul {display:flex;margin:-0.3rem;margin-top:1.5rem;}
.ctn01 .inner > div.right ul li{width:calc(100% / 3 - 0.6rem);margin:0.3rem;background:#ffffff;text-align:center;min-height:8rem;border-radius:1rem;padding:0.9rem 1rem;color:#666666;    box-shadow: 0px 20px 20px -10px rgb(0 0 0 / 10%);}
.ctn01 .inner > div.right ul li img {height:1.25rem;}
.ctn01 .inner > div.right ul li p.tit{color:#333;font-size:0.9rem;font-weight:700;padding:0.5rem 0}


/*애니메이션*/

.ctn01 .inner > div.right h2 .char{opacity:0;}
.ctn01.active .inner > div.right h2  .char{-webkit-animation: text-active-animation-up 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation: text-active-animation-up 0.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: calc(0.1s + (var(--char-index) - 1) * 0.03s);transition-delay: 0.8s;}

.ctn01 .inner > div.right > p {opacity: 0;transform: translateY(50px);transition-duration: 0.8s;    transition-delay: 0.9s;}
.ctn01.active .inner > div.right > p{opacity:1;transform: translateY(0);transition-duration: 0.8s;    transition-delay: 0.9s;}
.ctn01 .inner > div.right > a {opacity: 0;transform: translateY(50px);}
.ctn01.active .inner > div.right > a{opacity:1;transform: translateY(0);   transition-duration: 0.8s;    transition-delay: 0.9s;}

.ctn01 .inner > div.right ul li {opacity: 0;transform: translateY(50px);transition-duration: 0.8s;    transition-delay: 1.1s;}
.ctn01.active  .inner > div.right ul li{opacity:1;transform: translateY(0);transition-duration: 0.8s;    transition-delay: 1.1s;}
.ctn01.active  .inner > div.right ul li:nth-child(2) { transition-delay: 1.3s;}
.ctn01.active  .inner > div.right ul li:nth-child(3) { transition-delay: 1.5s;}

.mob-img {display:none;}
@media (max-width:1400px){
	.ctn{padding:7.5rem 0;}
	.ctn01 .inner > div.right h2{font-size:2.5rem;}
	.ctn01 .inner > div.right h2 b{font-size:3rem;}
	.ctn01 .inner > div.right{padding-left:2rem;}
	.ctn01 .inner > div.right > p br{display:none;}
	.ctn01 .inner > div.right > p{font-size:1.1rem;}
	.ctn01 .inner > div.left{width:45%;}
	.ctn01 .inner > div.right{width:55%;}
}
@media (max-width:1030px){
	.ctn01 .inner{display:block;}
	.ctn01 .inner > div.left{width:100%;}
	.ctn01 .inner > div.right{width:100%;}
	.ctn01 .inner > div img{max-width:80%;}
	.web-img{display:none;}
	.mob-img{display:block;text-align:center;margin-top:2rem;}
	.ctn01 .inner > div.right{padding-left:0;}
	.ctn .bg-txt{font-size:5.5rem;}
	.ctn01 .bg-txt{top:1.5rem;} 
	.ctn01 .inner > div.left{ background: #f7f7f7 url(/images/default/main/ctn-1-bg.png) no-repeat center center;background-size:cover;}
	.ctn01{background: inherit}
	.ctn01 .inner > div.right h2{font-size:2rem;}
	.ctn01 .inner > div.right h2 b{font-size:2rem;display:block;margin-top:0.75rem;}
}
@media (max-width:500px){
	.ctn01 .inner > div.right ul{flex-wrap:wrap;}
	.ctn01 .inner > div.right ul li {width:100%;}
	.ctn01 .inner > div img{max-width:100%;}
}


/********ctn02***********/

.ctn02{padding-top:0;position:relative;}
.ctn02 .inner{position:relative;z-index:1;}
.ctn02 .tit-zone {display:flex;align-items:flex-end;}
.ctn02 .tit-zone p {font-size:1.2rem;color:#333;font-weight:600;margin-left:1.75rem;letter-spacing:-0.04rem;}
.ctn02 h2 {font-size:3.5rem;color:#000;font-weight:700;line-height:1;    letter-spacing: -0.04rem;}
.ctn02 h2 em{color:#004ea2;display:block;margin-top:0.4rem;}
.ctn02 .about-con{display:flex;justify-content:space-between;align-items:flex-end;}
.ctn02 .about-con ul {display:flex;}
.ctn02 .about-con ul li {padding:0 3.5rem;text-align:center;position:relative; }
.ctn02 .about-con ul li:not(:last-child):after{content:'';display:block;position:absolute;width:1px;height:3rem;background:#cccccc;top:50%;right:0;transform:translateY(-50%);}
.ctn02 .about-con ul li p{color:#2a9863;font-weight:bold;font-size:1rem;margin-bottom:1.5rem;line-height:1;}
.ctn02 .about-con ul li div {font-size:1.5rem;color:#666;font-weight:500;line-height:1;}
.ctn02 .about-con ul li div b{font-family: "Archivo";color:#333;font-weight:bold;font-size:2.75rem;}
.ctn02 .about-list{margin-top:3.5rem;display:flex;}
.ctn02 .about-list > div{width:22.2rem;}
.ctn02 .about-list > div a {padding:4.5rem 2rem 4.5rem 2.75rem ;display:inline-block;width:100%;height:100%;position:relative;z-index:1;}
.ctn02 .about-list > div a .tit img{   transition: transform 0.5s;}
.ctn02 .about-list > div:nth-child(1){border-radius:30px 0 0 30px;background:#004ea2;}
.ctn02 .about-list > div:nth-child(2){background:#3f3a39;}
.ctn02 .about-list > div:nth-child(3){width:calc(100% - 44.4rem);border-radius:0 30px 30px 0;overflow:hidden;}
.ctn02 .about-list > div .tit{display:flex;justify-content:space-between;align-items:center;font-size:1.5rem;color:#fff;font-weight:bold;position:relative;z-index:1;}
.ctn02 .about-list > div .tit p b{display:block;font-size:.9rem;color:rgba(255,255,255,0.25);}

.ctn02 .about-list > div .txt{font-size:1rem;color:rgba(255,255,255,0.7);font-size:1rem;margin-top:4.5rem;line-height:1.3;font-weight:500;position:relative;z-index:1;}
.ctn02 .about-list > div a:hover .tit img{transform: scaleX(-1);}

.ctn02 .about-list > div:nth-child(3) a{
    position: relative;
    overflow: hidden; /* 확대될 때 이미지가 부모 영역을 벗어나지 않도록 설정 */
}

.ctn02 .about-list > div:nth-child(3) a .bg{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(/images/default/main/about-bg.jpg) no-repeat center center;
    background-size: cover;
    transition: transform 0.7s ease; /* 부드럽게 확대 */
    transform: scale(1); /* 초기 배율 */
	position:absolute;
}

.ctn02 .about-list > div:nth-child(3):hover a .bg {
    transform: scale(1.1); /* 10% 확대 */
}
 

.ctn02 .bg-txt {left:auto;right:0;top:-3.5rem;bottom:auto;}
.ctn02 .bg-txt {opacity:0;transform: translateX(-100%);transition-duration: 1.5s;}
.ctn02.active .bg-txt {opacity:1;transform: translateX(0);transition-duration: 1.5s;}



@media (max-width:1500px){
	.ctn02 .about-list > div{width:calc(100% / 3 ) !important;}
	.ctn02 .about-list > div a{padding:2.5rem 1rem;}
	.ctn02 .about-list > div .txt{margin-top:2rem;}
	.ctn02 .about-list > div .txt br{display:none;}
	.ctn02 .about-list > div .tit img{height:2rem;}
}
@media (max-width:1400px){
	.ctn02 h2{font-size:2.5rem;}
	.ctn02 .tit-zone p{font-size:1.1rem;}
}

@media (max-width:1030px){
	.ctn02 .about-con{display:block;}
	.ctn02 .about-con ul{margin-top:1.5rem;}
	.ctn02 .about-con ul li{width:calc(100% / 3 );}
	.ctn02 .about-list{margin-top:1.5rem;}
	.ctn02 .tit-zone {display:block;}
	.ctn02 .tit-zone p{margin-left:0;margin-top:1rem;}
	.ctn02 h2{font-size:2rem;}
}
@media (max-width:767px){
	.ctn02 .about-list {flex-wrap:wrap;}
	.ctn02 .about-list > div{width:100% !important;}
	.ctn02 .about-con ul li{padding:0 1rem;}
	.ctn02 .about-con ul li div b{font-size:2rem;}
	.ctn02 .about-list > div:nth-child(1){border-radius:1.5rem 1.5rem 0 0}
	.ctn02 .about-list > div:nth-child(3){border-radius:0 0 1.5rem 1.5rem}
	
}
@media (max-width:500px){
	.ctn02 .about-con ul li p {margin-bottom:1rem;font-size:0.95rem;}
	.ctn02 .about-con ul li div{line-height:1;font-size:1.2rem;}
	.ctn02 .about-con ul li div b{font-size:1.75rem;}
	.ctn02 .tit-zone p br{display:none;}
}

/*애니메이션*/

.ctn02 h2 .char{opacity:0;}
.ctn02.active h2  .char{-webkit-animation: text-active-animation-up 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation: text-active-animation-up 0.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: calc(0.1s + (var(--char-index) - 1) * 0.03s);transition-delay: 0.8s;}


.ctn02 .tit-zone p {opacity: 0;transform: translateY(50px);transition-duration: 0.8s;    transition-delay: 0.9s;}
.ctn02.active .tit-zone p{opacity:1;transform: translateY(0);transition-duration: 0.8s;    transition-delay: 0.9s;}
.ctn02 .inner > div.right > a {opacity: 0;transform: translateY(50px);transition-duration: 0.8s;    transition-delay: 0.9s;}
.ctn02.active .inner > div.right > a{opacity:1;transform: translateY(0);transition-duration: 0.8s;    transition-delay: 0.9s;}



.ctn03 {padding-top:0;}
.ctn03 .inner{position:relative;z-index:1;display:flex;}
.ctn03 h2{}
.ctn03 h2{font-size:3.5rem;color:#000000;font-weight:700;line-height:1;letter-spacing:-0.04rem;}
.ctn03 h2 b{font-size:3.5rem;font-weight:700;color:#004ea2;display:block;}
.ctn03 .inner .left{width: 42.53%;}
.ctn03 .inner .left .tit {font-size:1.2rem;font-weight:600;color:#333;margin:1.45rem 0 0.95rem 0;letter-spacing:-0.04rem;}
.ctn03 .inner .left .txt {color:#666;font-size:0.9rem;}
.ctn03 .inner .left  a {width:12.5rem;height:3.75rem;border-radius:1.875rem;background:#004ea2;display:flex;justify-content:center;align-items:center;color:#fff;margin-top:3.4rem;}
.ctn03 .inner .left  a img {height:1.5rem;margin-right:0.5rem;}
.ctn03 .inner .right {width:calc(100% - 42.53%);}
.ctn03 .inner .right img {border-radius:30px;max-width:100%;}

.ctn03 .bg-txt {left:0;right:auto;top:-6rem;bottom:auto;}
.ctn03 .bg-txt {opacity:0;transform: translateX(100%);transition-duration: 1.5s;}
.ctn03.active .bg-txt {opacity:1;transform: translateX(0);transition-duration: 1.5s;}

/*애니메이션*/

.ctn03 h2 .char{opacity:0;}
.ctn03.active h2  .char{-webkit-animation: text-active-animation-up 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation: text-active-animation-up 0.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: calc(0.1s + (var(--char-index) - 1) * 0.03s);transition-delay: 0.8s;}


.ctn03 .inner .left .tit{opacity: 0;transform: translateY(50px);transition-duration: 0.8s;    transition-delay: 0.9s;}
.ctn03.active .inner .left .tit{opacity:1;transform: translateY(0);transition-duration: 0.8s;    transition-delay: 0.9s;}
.ctn03 .inner .left .txt{opacity: 0;transform: translateY(50px);transition-duration: 0.8s;    transition-delay: 0.9s;}
.ctn03.active  .inner .left .txt{opacity:1;transform: translateY(0);transition-duration: 0.8s;    transition-delay: 0.9s;}

.ctn03 .inner .left a {opacity: 0;transform: translateY(50px);transition-duration: 0.8s;    transition-delay: 1.1s;}
.ctn03.active  .inner .left a{opacity:1;transform: translateY(0);transition-duration: 0.8s;    transition-delay: 1.1s;}



 @media (max-width:1400px){
	.ctn03 h2{font-size:2.5rem;}
	.ctn03 .inner .left .tit{font-size:1.1rem;}
	.ctn03 .inner .left{padding-right:1rem;}
 }
 @media (max-width:1030px){
	.ctn03 h2{font-size:2rem;}
	.ctn03 h2 b{font-size:2rem;}
	.ctn03 .inner .left .tit br{display:none;}
}
 @media (max-width:767px){
	.ctn03 .inner{display:block;}
	.ctn03 .inner .left{width:100%;padding-right:0;}
	.ctn03 .inner .right{width:100%;margin-top:1rem;}
 }

 @media (max-width:1860px){
	.ctn .bg-txt{font-size:8rem;}
 }
 @media (max-width:1030px){
	.ctn .bg-txt{font-size:5.5rem;}
 }