@charset "utf-8";

.mo {display: none;}

/* m-visual */
.m-visual {padding: 0;}
.m-visual .visual {width: 100%; height: 100dvh; position: relative; }
.m-visual .visual .swiper-wrapper {transition-timing-function: linear;}
.m-visual .visual .swiper-wrapper .swiper-slide {overflow: hidden;} 
.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 .5s; transform: scale(1.1);}
.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);}
.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: 330px; left: 15px; font-size: 68px; line-height: 1.2; color: #fff; font-weight: 600;  width: 100%; opacity: 0; transition: all 1.2s ease .5s; letter-spacing: -2.04px; font-family: 'Poppins';}
.m-visual .visual .swiper-wrapper .swiper-slide .container p {position: absolute; top: 525px; left: 15px; font-size: 24px; line-height: 1.58; color: rgba(255, 255, 255, 0.8); font-weight: 400; width: 100%; opacity: 0; transition: all 1.2s ease 1s; font-family: 'Poppins'; letter-spacing: -.72px;}
.m-visual .visual .swiper-wrapper .swiper-slide-active .container h3 {top: 370px; opacity: 1;}
.m-visual .visual .swiper-wrapper .swiper-slide-active .container p {top: 565px; opacity: 1;}

.controls {position: absolute; width: 100%; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 5;}
.controls .visual-pagination {width: 100%;}
.controls .swiper-pagination-bullets {align-items: center; display: flex;}
.controls .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 !important;}
.controls .swiper-pagination-bullet {position: relative; width: 33.3333%; height: 8px; background-color: rgba(255, 255, 255, 0.60); opacity: 1; margin: 0; border-radius: 0;}
.controls .swiper-pagination-bullet::after {position: absolute; content: ''; width: 0%; height: 100%; top: 0; left: 0; background-color: #FEC302; }
.controls .swiper-pagination-bullet.swiper-pagination-bullet-active::after {animation: bar 6s ease-out forwards;}

.controls .progress-box {position: relative; width: 100%; height: 8px;}
.controls .progress-box .autoplay-progress {position: absolute; left: 0; top: 0; width: 100%; height: 8px; background-color: rgba(255, 255, 255, 0.60);}
.controls .progress-box .autoplay-progress svg {--progress:0; position: absolute; left: 0; top: 0; width: 100%; stroke-width: 8px; stroke: #FEC302; fill: none; stroke-dashoffset: calc(100 * (1 - var(--progress))); stroke-dasharray: 100;}

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

.scroll {position: absolute; z-index: 1; bottom: 88px; left: 75px; width: 20px; height: 110px; background: url(../images/main/scroll.png) 50% 50% no-repeat;background-size: auto; }
.scroll::after {position: absolute; content: ''; width: 10px; height: 10px; border-radius: 50%; background-color: #fff; bottom: 0; left: 50%; transform: translateX(-50%); animation: bounce 2s ease infinite;}
@keyframes bounce {
    0%{transform: translate(-50%, -25px); opacity: 0;}
    /* 50% {transform: translate(-50%, 0px);} */
    70% {opacity: 1;}
    100% {transform: translate(-50%, 0); opacity: 1;}
}


/* sec2 */
.sec2 {padding: 160px 0 40px; overflow: hidden;}
.section-header h4 {font-size: 64px; font-weight: 600; line-height: 1.21; letter-spacing: -1.92px; color: #111; font-family: 'Poppins';}
.section-header h4 > span {color: #FEC302;}
.section-header p {margin-top: 16px; font-size: 22px; font-weight: 400; line-height: 1.63; color: #666; letter-spacing: -.66px;}

.card {width: 100%; margin-top: 65px;}
.card ul {width: 100%; display: flex; gap: 20px 24px; flex-wrap: wrap;}
.card ul li {flex: 0 0 calc(33.3333% - 16px); height: 620px; perspective: 3000px; position: relative;}
.card ul li .item {position: relative; display: block; width: 100%; height: 100%; transition: all .4s linear; transform-style: preserve-3d; will-change: transform; transform: translateZ(0);}
.card ul li .item .front {position: absolute;  width: 100%; height: 100%; backface-visibility: hidden; display: flex; align-items: flex-end; justify-content: center; background: url() 50% 50% no-repeat; background-size: auto; border-radius: 20px; overflow: hidden; padding-bottom: 70px; transform: rotateY(0deg) translateZ(1px);}
.card ul li:nth-of-type(1) .item .front {background-image: url(../images/main/img_sec201.jpg);}
.card ul li:nth-of-type(2) .item .front {background-image: url(../images/main/img_sec202.jpg);}
.card ul li:nth-of-type(3) .item .front {background-image: url(../images/main/img_sec203.jpg);}
.card ul li:nth-of-type(4) .item .front {background-image: url(../images/main/img_sec204.jpg);}
.card ul li:nth-of-type(5) .item .front {background-image: url(../images/main/img_sec205.jpg);}
.card ul li:nth-of-type(6) .item .front {background-image: url(../images/main/img_sec206.jpg);}
.card ul li .item .front h5 {font-size: 40px; color: #fff; font-weight: 600; line-height: .95; letter-spacing: -1.2px; text-align: center;}
.card ul li .item .back {position: absolute; width: 100%; height: 100%; backface-visibility: hidden; transform: rotateY(180deg); background: url(../images/main/img_sec2_on.jpg) 50% 50% no-repeat; background-size: cover; display: flex; justify-content: space-between; flex-direction: column; padding: 40px 40px 60px 40px; border-radius: 20px;  transform: rotateY(180deg) translateZ(1px);}
.card ul li .item .back a {display: flex; gap: 10px; align-items: center; max-width: 185px; width: 100%; line-height: 44px; background-color: #111; font-size: 18px; color: #fff; font-weight: 600; letter-spacing: -.54px; font-family: 'Poppins'; padding: 0 22px 0 24px; border-radius: 50px; margin-left: auto; transition: all .2s linear;}
.card ul li .item .back a:hover {color: #FEC302;}
.card ul li .item .back .txt h5 {font-size: 40px; color: #111; font-weight: 600; line-height: .95; letter-spacing: -1.2px;}
.card ul li .item .back .txt p {margin-top: 24px; font-weight: 400; font-size: 22px; color: #333; line-height: 1.45; letter-spacing: -.66px;}
.card ul li:hover .item {transform: rotateY(180deg);}
.flow-wrap {margin-top: 108px; width: 100%; white-space: nowrap;}
.flow-wrap .flow {display: flex; animation: scroll-left 40s linear infinite; width: max-content;}
.flow-wrap h3 {display: inline-block; white-space: nowrap; font-family: 'Poppins'; font-size: 150px; font-weight: 700; color: #ddd; letter-spacing: -4.5px; line-height: 1.09; margin-right: 30px; opacity: .3;}

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

    100% {
        transform: translateX(-50%);
    }
}

/* sec3 */
.sec3 {padding: 167px 0 147px; background: url(../images/main/bg_sec3.jpg) 50% 50% no-repeat; background-size: cover;}
.sec3 h3 {font-size: 50px; font-weight: 600; color: #fff; line-height: 1.36; letter-spacing: -1.5px; text-align: center;}
.sec3 p {margin-top: 20px; font-size: 22px; font-weight: 400; color: rgba(255, 255, 255, 0.8); line-height: 1.63; letter-spacing: -.66px; text-align: center;}
.sec3 .contact {margin-top: 60px;}
.sec3 .contact > a {display: block; margin: 0 auto; max-width: 170px; line-height: 64px; background: url(../images/main/ico_arrow2.png) calc(100% - 32px) 50% no-repeat; background-size: auto; background-color: #FEC302; border-radius: 50px; padding: 0 32px 0 36px; transition: all .2s linear; font-size: 18px; font-weight: 600; color: #111; letter-spacing: -.54px;}
.sec3 .contact > a:hover {color: #fff; background-image: url(../images/main/ico_arrow2_on.png)}