@charset "utf-8";

.main {overflow: hidden;}
.mo {display: none;}

/* 공통 */
section {padding: 150px 0 170px;}
.section-header h3 {position: relative; font-size: 63px; font-weight: 700; color: #000; padding-right: 20px; line-height: 1; display: inline-block; font-family: 'Montserrat';}
.section-header h3::after {position: absolute; content: ''; width: 9px; height: 9px; border-radius: 50%; background-color: #68bfdf; top: 9px; right: 0;}
.section-header p {font-size: 22px; line-height: 32px; padding-top: 25px; color: #666;}


/* m-visual */
.m-visual {padding: 0;}
.m-visual .visual {width: 100%; height: 980px; position: relative; }
.m-visual .visual .swiper-wrapper .swiper-slide .backdrop {width: 100%; height: 100%; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; transition: all 2s ease;}
.m-visual .visual .swiper-wrapper .slide01 .backdrop {background-image: url(../images/main/m-visual01.jpg);}
.m-visual .visual .swiper-wrapper .slide02 .backdrop {background-image: url(../images/main/m-visual02.jpg);}
.m-visual .visual .swiper-wrapper .slide03 .backdrop {background-image: url(../images/main/m-visual03.jpg);} 
.m-visual .visual .swiper-wrapper .swiper-slide-active .backdrop {transform: scale(1.1);}
.m-visual .visual .swiper-wrapper .swiper-slide .container {width: 100%; height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.m-visual .visual .swiper-wrapper .swiper-slide .container h3 {position: absolute; top: 400px; left: 15px; font-size: 68px; line-height: 1; color: #fff; font-weight: 600;  width: 100%; opacity: 0; transition: all 1.2s ease .1s;}
.m-visual .visual .swiper-wrapper .swiper-slide .container p {position: absolute; top: 500px; left: 15px; font-size: 22px; line-height: 40px; color: #fff; font-weight: 400; width: 100%; opacity: 0; transition: all 1.2s ease .5s;}
.m-visual .visual .swiper-wrapper .swiper-slide-active .container h3 {top: 450px; opacity: 1;}
.m-visual .visual .swiper-wrapper .swiper-slide-active .container p {top: 540px; opacity: .7;}

.controls {position: absolute;  bottom: 330px; left: 0; width: 100%; height: 12px; z-index: 5;}
.controls > .container {display: flex; align-items: center; width: 100%; gap: 12px;}
.controls .paging {width: 56px; display: flex; align-items: center;}
.controls .paging .visual-pagination {text-align: center; color: rgba(255,255,255, .3);font-family: 'Pretendard', sans-serif; font-size: 14px; letter-spacing: 1px;}
.controls .paging .visual-pagination .swiper-pagination-current {color: #fff;}
.controls .paging .btns {width: 8px; height: 12px; background: url() 50% 50% no-repeat; background-size: auto;}
.controls .paging .btns.visual-prev {background-image: url(../images/main/ico_prev.png);}
.controls .paging .btns.visual-next {background-image: url(../images/main/ico_next.png);} 
.controls .btn-area {width: 120px; height: 100%; display: flex; align-items: center; justify-content: space-between;}
.controls .btn-area .progress-bar {position: relative; width: 80px; height: 2px; background-color: rgba(255,255,255, .3); position: relative;}
.controls .btn-area .progress-bar svg {position: absolute; --progress: 0; top: 0; left: 0; width: 100%; stroke-width: 4px; stroke: #fff; fill: none; stroke-dashoffset: calc(100 * (1 - var(--progress))); stroke-dasharray: 100;}

.controls .btn-area .btn-controls {width: 7px; height: 10px; background: url(../images/main/ico_pause.png) 50% 50% no-repeat; background-size: auto;}
.controls .btn-area .btn-controls.play {background-image: url(../images/main/ico_play.png);}

.scroll {position: absolute; z-index: 1; bottom: 60px; right: 92px; width: 12px; height: 123px; background: url(../images/main/scroll.png) 50% 50% no-repeat;background-size: auto; animation: bounce 1.3s ease infinite;}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0);
    }
  
    40% {
      transform: translateY(-10px);
    }
  
    60% {
      transform: translateY(-5px);
    }
}

/* sec2 */
.sec2 .business {margin-top: 75px; width: 100%;}
.sec2 .business ul {width: calc(100% + 40px); margin: 0 -20px; display: flex; flex-wrap: wrap;}
.sec2 .business ul li {width: 25%; padding: 0 20px; min-height: 340px;}
.sec2 .business ul li:nth-of-type(4) ~ li {margin-top: 40px;}
.sec2 .business ul li a {position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; align-items: center; justify-content: center; border-radius: 20px; overflow: hidden; background: url() 50% 50% no-repeat; background-size: cover;}
.sec2 .business ul li:not(:last-child) a::before {position: absolute; content:''; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; transition: all .2s linear; z-index: 0;}
.sec2 .business ul li:nth-of-type(1) a {background-image: url(../images/main/img_sec201.jpg);}
.sec2 .business ul li:nth-of-type(2) a {background-image: url(../images/main/img_sec202.jpg);}
.sec2 .business ul li:nth-of-type(3) a {background-image: url(../images/main/img_sec203.jpg);}
.sec2 .business ul li:nth-of-type(4) a {background-image: url(../images/main/img_sec204.jpg);}
.sec2 .business ul li:nth-of-type(5) a {background-image: url(../images/main/img_sec205.jpg);}
.sec2 .business ul li:nth-of-type(6) a {background-image: url(../images/main/img_sec206.jpg);}
.sec2 .business ul li:nth-of-type(7) a {background-image: url(../images/main/img_sec207.jpg);}
.sec2 .business ul li:nth-of-type(8) a {background-image: url(../images/main/img_sec208.jpg); pointer-events: none; cursor: default;}
.sec2 .business ul li a h5 {font-size: 32px; font-weight: 600; color: #fff; text-align: center; transition: all .2s linear; opacity: 1; position: relative; z-index: 1;}
.sec2 .business ul li a span {opacity: 0; height: 0; transition: all .3s linear; position: relative; z-index: 1;}
/* .sec2 .business ul li a .over {opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 30px; backdrop-filter: blur(4px); transition: all .3s linear;}
.sec2 .business ul li a:hover .over {opacity: 1;} */
.sec2 .business ul li a:hover::before {backdrop-filter: blur(3px); opacity: 1;}
.sec2 .business ul li a:hover > span {opacity: 1; height: auto; margin-top: 30px;}

/* sec3 */
.sec3 {padding-top: 0;}
.sec3 .section-header {position: relative; margin-bottom: 100px;}
.sec3 .section-header > a {position: absolute; display: inline-block; font-size: 18px; font-weight: 500; color: #000; padding-right: 25px; background: url(../images/main/ico_arrow.png) 100% 80% no-repeat; background-size: auto; bottom: 5px; right: 0; transition: all .2s linear;}
.sec3 .section-header > a:hover {color: #68bfdf;}

.sec3 .box {width: 100%; height: 44px; overflow: hidden; white-space:nowrap;}
.partner01 {display: flex; animation: scroll-left 35s linear infinite; width: max-content; height: 100%;}
.partner02 {display: flex; animation: scroll-right 38s linear infinite; width: max-content; height: 100%;}
.box ~ .box {margin-top: 65px;}
.partner .partner-slide {display: inline-block; flex: 0 0 auto; white-space:nowrap; margin-right: 86px;}
.partner .partner-slide:hover ~ .partner-slide, .partner-slide:hover, .partner:hover {animation-play-state: paused;}
.partner .partner-slide img {max-width: 100%; margin: 0 auto; display: block; width: 100%; height: 100%;}

@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes scroll-right {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}


/* sec4 */
.sec4 {background-color: #f0f8fc; width: 100%;}
.sec4 .banner {width: 100%;}
.sec4 .banner ul {width: calc(100% + 40px); margin: 0 -20px; display: flex;}
.sec4 .banner ul li {width: 20%; padding: 0 20px; min-height: 240px;}
.sec4 .banner ul li a {display: block; width: 100%; height: 100%; border-radius: 20px; overflow: hidden; transition: all .3s ease-in-out; padding: 45px 40px 0; background: url() 50% 50% no-repeat; background-size: cover;}
.sec4 .banner ul li a h5 {font-size: 28px; font-weight: 600; color: #fff; line-height: 38px;}
.sec4 .banner ul li:nth-of-type(1) a {background-image: url(../images/main/bg_sec401.jpg);}
.sec4 .banner ul li:nth-of-type(2) a {background-image: url(../images/main/bg_sec402.jpg);}
.sec4 .banner ul li:nth-of-type(3) a {background-image: url(../images/main/bg_sec403.jpg);}
.sec4 .banner ul li:nth-of-type(4) a {background-image: url(../images/main/bg_sec404.jpg);}
.sec4 .banner ul li:nth-of-type(5) a {background-image: url(../images/main/bg_sec405.jpg);}
.sec4 .banner ul li a:hover {transform: translateY(-20px);}

/* sec5 */
.sec5 {width: 100%; background: url(../images/main/bg_sec5.jpg) 50% 50% no-repeat; background-size: cover;}
.sec5 .section-header {text-align: center;}
.sec5 .section-header h3 {font-family: 'Wanted Sans'; font-size: 48px; font-weight: 600; padding-right: 0;}
.sec5 .section-header h3::after {display: none;}
.sec5 .section-header p {font-size: 20px; padding-top: 20px; line-height: 30px;}
.sec5 .certi-box {width: calc(100% + 40px); margin: 75px -20px 0; display: flex;}
.sec5 .certi-box .certi {width: 50%; padding: 0 20px; min-height: 340px;}
.sec5 .certi-box .certi a {position: relative; display: block; width: 100%; height: 100%; border-radius: 20px; overflow: hidden; background-color: #fff; padding: 65px 60px 0;}
.sec5 .certi-box .certi a h5 {font-size: 36px; color: #333; font-weight: 500; line-height: 40px;}
.sec5 .certi-box .certi a span {display: block; margin-top: 105px; width: 66px; height: 66px; background: url(../images/main/ico_go2.png) 50% 50% no-repeat; background-size: auto; transition: all .3s linear;}
.sec5 .certi-box .certi a:hover span {background-image: url(../images/main/ico_go.png);}
.sec5 .certi-box .certi a::after {position: absolute; content: ''; width: 95px; height: 82px; background: url() 50% 50% no-repeat; background-size: auto; bottom: 60px; right: 60px;}
.sec5 .certi-box .certi:nth-of-type(1) a::after {background-image: url(../images/main/ico_sec501.png);}
.sec5 .certi-box .certi:nth-of-type(2) a::after {background-image: url(../images/main/ico_sec502.png);}

/* sec6 */
.sec6 {padding: 150px 0 180px;}
.sec6 .facility {display: block; width: 100%; overflow: hidden;border-radius: 20px; position: relative;}
.sec6 .facility .inner {position: relative; display: block; width: 100%; background: url(../images/main/bg_sec6.jpg) 50% 50% no-repeat; background-size: cover; height: 460px;  overflow: hidden; padding: 65px 70px 70px 60px; transition: all .3s linear; z-index: 2;}
.sec6 .facility h3 { font-size: 48px; font-weight: 600; color: #fff; padding-right: 0; line-height: 1;}
.sec6 .facility p {font-size: 20px; color: rgba(255,255,255, .7); padding-top: 20px; line-height: 30px;}
.sec6 .facility .inner > span {position: absolute; bottom: 70px; right: 70px; display: inline-block; padding-right: 25px; font-size: 18px; font-weight: 500; color: #fff; background: url(../images/main/ico_arrow.png) 100% 80% no-repeat; background-size: auto; transition: all .3s linear;}
.sec6 .facility:hover .inner {transform:scale(1.02);}
.sec6 .facility:hover .inner > span {color: #68bfdf;}