@charset "utf-8";

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

/* scrolla animate */
@keyframes text-up {
	0% {transform: translateY(-50px); opacity: 0;}
	100% {transform: translateY(0px); opacity: 1;}
}

@keyframes text-down {
	0% {transform: translateY(50px); opacity: 0;}
	100% {transform: translateY(0px); opacity: 1;}
}

@keyframes text-right {
	0% {transform: translateX(-50px); opacity: 0;}
	100% {transform: translateX(0px); opacity: 1;}
}

@keyframes text-right2 {
	0% {transform: translateX(-80px); opacity: 0;}
	100% {transform: translateX(0px); opacity: 1;}
}

@keyframes text-left {
	0% {transform: translateX(50px); opacity: 0;}
	100% {transform: translateX(0px); opacity: 1;}
}


@keyframes text-down2 {
	0% {transform: translateY(100px); opacity: 0;}
	100% {transform: translateY(50px); opacity: 1;}
}

@keyframes text-down3 {
	0% {transform: translateY(80px); opacity: 0;}
	100% {transform: translateY(0px); opacity: 1;}
}


/* m-visual */
.m-visual {padding: 0;}
.m-visual .visual {width: 100%; height: 940px; position: relative; }
.m-visual .visual .swiper-wrapper {transition-timing-function: linear;}
.m-visual .visual .swiper-wrapper .swiper-slide.slide02 .backdrop,
.m-visual .visual .swiper-wrapper .swiper-slide.slide03 .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 .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.slide01 .backdrop {width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1;}
.m-visual .visual .swiper-wrapper .swiper-slide-active.slide01 .backdrop {transform: none;}
.m-visual .visual .swiper-wrapper .swiper-slide.slide01 .backdrop video {width: 100%; height: 100%; object-fit: cover;}
.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: 210px; left: 15px; font-size: 100px; line-height: normal; color: #fff; font-weight: 400;  width: 100%; opacity: 0; transition: all 1.2s ease .2s; font-family: "Anton", sans-serif;}
.m-visual .visual .swiper-wrapper .swiper-slide .container p {position: absolute; top: 560px; left: 15px; font-size: 20px; line-height: 1.5; color: #fff; font-weight: 600; width: 100%; opacity: 0; transition: all 1.2s ease .5s;}
.m-visual .visual .swiper-wrapper .swiper-slide-active .container h3 {top: 250px; opacity: 1;}
.m-visual .visual .swiper-wrapper .swiper-slide-active .container p {top: 600px; opacity: 1;}

.controls {max-width: 1470px; width: 100%; position: absolute; bottom: 220.5px; left: 50%; transform: translateX(-50%); z-index: 5; padding: 0 15px; display: flex; gap: 22px; align-items: center;}
.controls .visual-pagination {width: 100%; max-width: 245px; display: flex; justify-content: space-between;}
.swiper-pagination-bullets {align-items: center; display: flex; justify-content: space-between;}
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 !important;}
.controls .swiper-pagination-bullet {position: relative; width: 72px; height: 7px; border-radius: 6px; border: 1px solid #fff; opacity: 1; margin: 0; background-color: transparent;}
.controls .swiper-pagination-bullet::after {position: absolute; content:''; width: 0%; height: 100%; top: 0; left: 0; background-color: #fff; border-radius: 6px;}
.controls .swiper-pagination-bullet.swiper-pagination-bullet-active::after {animation: bar 5s ease-out forwards;}
.controls .total {font-size: 15px; font-weight: 600; color: #fff; display: flex; align-items: center; letter-spacing: 1.3px;}
.controls .total span {display: block; position: relative; color: transparent; margin-right: 2px;}
.controls.s1 .total span {margin-right: 0;}
.controls .total span::after {position: absolute; content: ''; top: 0; left: 0; font-size: 15px; font-weight: 600; color: #fff; transition: all .2s linear;}
.controls.s1 .total span::after {content: '1';}
.controls.s2 .total span::after {content: '2';}
.controls.s3 .total span::after {content: '3';}

@keyframes bar {
	0% {width: 0%;}
	100% {width: 100%;}
}

/* 공통 */
.section-header h3 {font-size: 70px; color: #fff; font-family: "Anton", sans-serif; letter-spacing: 1.4px; font-weight: 400;}
.section-header.ty2 h3 {color: #1d2088;}
.section-header p {font-size: 20px; line-height: 1.5; font-weight: 600; color: #fff; margin-top: 20px;}
.section-header.ty2 p {color: #1d2088;}


/* sec2 */
.sec2 {padding: 90px 0 220px; width: 100%; background: url(../images/main/bg_sec2.png) 50% 50% no-repeat; background-size: cover;}
.sec2 .banner {width: 100%; padding: 0 100px;}
.sec2 .banner ul {width: calc(100% + 25px); display: flex; margin: 0 -12.5px;}
.sec2 .banner ul li {padding: 0 12.5px; width: 25%; min-height: 712px;}
.sec2 .banner ul li:nth-of-type(2n) {transform: translateY(50px);}
.sec2 .banner ul li a {display: block; width: 100%; border-radius: 20px; background: url() 50% 50% no-repeat; background-size: cover; overflow: hidden; padding-top: 350px; height: 100%; transition: all .3s linear;}
.sec2 .banner ul li:nth-of-type(1) a {background-image: url(../images/main/img_sec201.jpg);}
.sec2 .banner ul li:nth-of-type(2) a {background-image: url(../images/main/img_sec202.jpg);}
.sec2 .banner ul li:nth-of-type(3) a {background-image: url(../images/main/img_sec203.jpg);}
.sec2 .banner ul li:nth-of-type(4) a {background-image: url(../images/main/img_sec204.jpg);}

.sec2 .banner ul li a h5 {font-size: 30px; font-weight: 400; color: #fff; text-align: center; line-height: 34px; font-family: "Anton", sans-serif; letter-spacing: .96px;}
.sec2 .banner ul li a small {position: relative; display: block; text-align: center; margin-top: 25px; font-size: 14px; font-weight: 700; color: #fff; padding-top: 40px; transition: all .3s linear;}
.sec2 .banner ul li a small::before {position: absolute; content: ''; width: 1px; height: 28px; background-color: #fff; top: 0; left: 50%; transform: translateX(-50%);}

.sec2 .banner ul li a:hover {padding-top: 305px;}
.sec2 .banner ul li a:hover small {margin-top: 160px;}

.sec2 .banner ul.animated li:nth-of-type(1) {animation:text-up 1.2s both .2s;}
.sec2 .banner ul.animated li:nth-of-type(2) {animation:text-down2 1.2s both .2s;}
.sec2 .banner ul.animated li:nth-of-type(3) {animation:text-up 1.2s both .2s;}
.sec2 .banner ul.animated li:nth-of-type(4) {animation:text-down2 1.2s both .2s;}

.sec2 .section-header {margin-top: 235px; text-align: center;}
.sec2 .about {margin-top: 150px; width: 100%;}
.sec2 .about ul {width: calc(100% + 20px); margin: 0 -10px; display: flex;}
.sec2 .about ul li {width: 16.6666%;padding: 0 10px;;}
.sec2 .about ul li a {display: block; border-radius: 20px; background-color: rgba(255,255,255, .5); width: 100%; padding: 55px 0;}
.sec2 .about ul li * {transition: all .3s linear;}
.sec2 .about ul li a dl dt {max-width: 76px; width: 100%; height: 74px; margin: 0 auto; background: url() 50% 50% no-repeat; background-size: auto;}
.sec2 .about ul li:nth-of-type(1) a dl dt {background-image: url(../images/main/ico_sec201.png);}
.sec2 .about ul li:nth-of-type(2) a dl dt {background-image: url(../images/main/ico_sec202.png);}
.sec2 .about ul li:nth-of-type(3) a dl dt {background-image: url(../images/main/ico_sec203.png);}
.sec2 .about ul li:nth-of-type(4) a dl dt {background-image: url(../images/main/ico_sec204.png);}
.sec2 .about ul li:nth-of-type(5) a dl dt {background-image: url(../images/main/ico_sec205.png);}
.sec2 .about ul li:nth-of-type(6) a dl dt {background-image: url(../images/main/ico_sec206.png);}
.sec2 .about ul li a dl dd {margin-top: 19px; font-size: 14px; font-weight: 700; color: #303030; text-align: center;}

.sec2 .about ul li a:hover {background-color: #1d2088;}
.sec2 .about ul li:nth-of-type(1) a:hover dl dt {background-image: url(../images/main/ico_sec201_on.png);}
.sec2 .about ul li:nth-of-type(2) a:hover dl dt {background-image: url(../images/main/ico_sec202_on.png);}
.sec2 .about ul li:nth-of-type(3) a:hover dl dt {background-image: url(../images/main/ico_sec203_on.png);}
.sec2 .about ul li:nth-of-type(4) a:hover dl dt {background-image: url(../images/main/ico_sec204_on.png);}
.sec2 .about ul li:nth-of-type(5) a:hover dl dt {background-image: url(../images/main/ico_sec205_on.png);}
.sec2 .about ul li:nth-of-type(6) a:hover dl dt {background-image: url(../images/main/ico_sec206_on.png);}
.sec2 .about ul li a:hover dl dd {color: #fff;}

.sec2 .section-header.animated h3 {animation:text-down3 1.2s both .2s;}
.sec2 .section-header.animated p {animation:text-down 1.2s both .5s;}

.sec2 .about ul.animated li:nth-of-type(1) {animation:text-right 1.2s both .2s}
.sec2 .about ul.animated li:nth-of-type(2) {animation:text-right 1.2s both .4s}
.sec2 .about ul.animated li:nth-of-type(3) {animation:text-right 1.2s both .6s}
.sec2 .about ul.animated li:nth-of-type(4) {animation:text-right 1.2s both .8s}
.sec2 .about ul.animated li:nth-of-type(5) {animation:text-right 1.2s both 1s}
.sec2 .about ul.animated li:nth-of-type(6) {animation:text-right 1.2s both 1.2s}

/* sec3 */
.sec3 {width: 100%; padding:150px 0 0; background: url(../images/main/bg_sec3.jpg) 50% 50% no-repeat; background-size: cover;}
.sec3 .inner {width: 100%; display: flex; gap: 125px; align-items: center; position:relative;}
.sec3 .inner .section-header {max-width: 585px; width: 100%; /* position: sticky; top: 435px; */}
.sec3 .inner .tab {max-width: 300px; width: 100%; margin-top: 75px;}
.sec3 .inner .tab ul {width: 100%;}
.sec3 .inner .tab ul li {width: 100%;}
.sec3 .inner .tab ul li ~ li {margin-top: 10px;}
.sec3 .inner .tab ul li dl {width: 100%; border: 1px solid #ddd; background-color: transparent; display: flex; align-items: center; justify-content: space-between; padding: 12px 36px; transition: all .3s linear; cursor: pointer;}
.sec3 .inner .tab ul li dt {font-size: 18px; font-weight: 600; color: #fff; line-height: 1.66;}
.sec3 .inner .tab ul li dd {width: 7px;}
.sec3 .inner .tab ul li dd a {display: block; width: 100%;}
.sec3 .inner .tab ul li dd a img {max-width: 100%; display: block; margin: 0 auto;}
.sec3 .inner .tab ul li.active dl {background-color: #1d2088; border-color: #1d2088;}

.sec3 .inner .scroll-wrap {width: 1%; flex: 1 1 auto;}
.sec3 .inner .scroll-box { display: flex; gap: 44px; overflow-y: auto; height: 80dvh;}
.sec3 .inner .scroll-box::-webkit-scrollbar {display: none;}
.sec3 .inner .scroll-box .scroll-cnt {width: 100%; display: flex; gap: 44px; flex-wrap:wrap}
.sec3 .inner .scroll-box .scroll-cnt a {max-width: 343px;  width: 100%;  overflow: hidden;}
.sec3 .inner .scroll-box .scroll-cnt a .box {position: relative; display: block; ; width: 100%; background-color: #f3f3f3; padding: 46px 43px; border-radius: 20px;} 
.sec3 .inner .scroll-box .scroll-cnt a:nth-of-type(2n) {transform: translateY(125px);}
/* .sec3 .inner .scroll-box .cnt a ~ a {margin-top: 60px;} */
.sec3 .inner .scroll-box .scroll-cnt a .txt {width: 100%; height: 100%; }
.sec3 .inner .scroll-box .scroll-cnt a .txt h5 {font-size: 20px; font-weight: 600; line-height: 1.5; color: #222; display: -webkit-box; word-wrap:break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; height: 60px; word-break: break-all;}
.sec3 .inner .scroll-box .scroll-cnt a .txt p {font-size: 18px; font-weight: 400; line-height: 1.72; margin-top: 25px; letter-spacing: -.54px; color: #303030;  display: -webkit-box; word-wrap:break-word; -webkit-line-clamp: 6; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; height: 190px; word-break: break-all;}
.sec3 .inner .scroll-box .scroll-cnt a .box .txt_over {position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(29,32,136, .9); display: flex; align-items: center; justify-content: center; transition: all .2s linear; opacity: 0; border-radius: 20px;}
.sec3 .inner .scroll-box .scroll-cnt a .box .txt_over span {display: block; text-align: center; font-size: 18px; font-weight: 600; color: #fff; line-height: 1.72; letter-spacing: -.54px;}
.sec3 .inner .scroll-box .scroll-cnt a:hover .box .txt_over {opacity: 1; transform:scale(1.0015);}

.sec3 .inner .scroll-box .scroll-cnt {display: none;}
.sec3 .inner .scroll-box .scroll-cnt#cnt1 {display: flex;}

.sec3 .inner .scroll-box .none {width: 100%; min-height: 300px; height: 100%; display: flex; align-items: center; justify-content: center;}
.sec3 .inner .scroll-box .none p {font-size: 20px; text-align: center; color: #fff; font-weight: 500;}

.sec3 .inquiry {width: 100%; display: flex; align-items: center; gap: 160px; margin-top: 205px; margin-bottom: 210px;}
.sec3 .inquiry .section-header {position: relative; width: 1%; flex: 1 1 auto; display: flex; align-items: center; gap: 73px;}
.sec3 .inquiry .section-header .line {width: 595px; height: 1px; background-color: #fff;}
/* .sec3 .inquiry .section-header::after {position: absolute; content: ''; width: 595px; height: 1px; background-color: #fff; top: 50%; right: 0; transform: translateY(-50%);} */
.sec3 .inquiry .more a {position: relative; display: block; width: 208px; height: 208px; border-radius: 50%; background: url(../images/main/ico_arrow2.png) 50% 50% no-repeat; background-size: auto; background-color: #9f7249;}
.sec3 .inquiry .more a::after {position: absolute; content: ''; width: 100%; height: 100%; border-radius: 50%; top: 0; left: 0; background: url(../images/main/view_more.png) 50% 50% no-repeat; background-size: auto; animation: loop 10s linear infinite}

@keyframes loop {
    100% {
        transform: rotate(360deg);
    }
}

.sec3 .inner .section-header.animated h3 {animation: text-right2 1.2s both .2s;}
.sec3 .inner .section-header.animated p {animation: text-right 1.2s both .5s;}
.sec3 .inner .section-header.animated .tab ul li:nth-of-type(1) {animation: text-right 1.2s both .8s}
.sec3 .inner .section-header.animated .tab ul li:nth-of-type(2) {animation: text-right 1.2s both 1.1s}
.sec3 .inner .section-header.animated .tab ul li:nth-of-type(3) {animation: text-right 1.2s both 1.4s}

.sec3 .inner .scroll-wrap.animated .scroll-box {animation: text-right 1.2s both 1.6s;}


.sec3 .inquiry .section-header.animated h3 {animation: text-right2 1.2s both .4s;}
.sec3 .inquiry .section-header.animated .line {animation: line 1.2s both 1s;}
.sec3 .inquiry .more.animated a {animation: text-right 1.2s both 2s;}

@keyframes line {
	0% {clip-path:inset(0 100% 0 0);}
	100% {clip-path:inset(0 0% 0 0);}

}