@charset "utf-8";

.play {font-family: 'Play';}
.mo {display: none;}

/* splitting *//* 
.section-header.motion h3.chars .char {animation:textAni 1.5s both; animation-delay:calc(0.08s * var(--char-index));}
.section-header.motion p.chars .char {animation:textAni 1.5s both; animation-delay:calc(0.05s * var(--char-index));}

@keyframes textAni {
    0% {opacity: 0;}
    30% {opacity: 0;}
}
 */
 
.section-header.motion h3 {overflow: hidden;} 
.section-header.motion h3 > span {display: block; animation-name: textAni2; animation-duration: 1.8s;}

.section-header.motion p {overflow: hidden;}
.section-header.motion p > span {display: block; animation-name: textAni2; animation-duration: 1.8s; animation-delay: 0.1s;}

@keyframes textAni2 {
    0% {opacity:0;}
    30% {opacity:0;transform:translate3d(0,90px,0) skewY(5deg);transform-origin:top left;}
}


/* m-visual */
.m-visual {padding: 0;}
.m-visual .visual {width: 100%; height: 970px; position: relative;}
.m-visual .visual .swiper-wrapper {transition-timing-function: ease;}
.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.png);}
.m-visual .visual .swiper-wrapper .slide02 .backdrop {background-image: url(../images/main/m-visual02.png);}
.m-visual .visual .swiper-wrapper .slide03 .backdrop {background-image: url(../images/main/m-visual03.png);} 
.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: 290px; left: 15px; font-size: 75px; line-height: 1.2; color: #fff; font-weight: 700;  width: 100%; opacity: 0; transition: all 1.2s ease .2s; font-family: 'Play';}
.m-visual .visual .swiper-wrapper .swiper-slide .container p {position: absolute; top: 510px; left: 15px; font-size: 26px; line-height: 1.154; 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: 330px; opacity: 1;}
.m-visual .visual .swiper-wrapper .swiper-slide-active .container p {top: 555px; opacity: 1;}

.controls {position: absolute; top: 665px; left: 0; width: 100%; z-index: 5;}
.controls .btn-area {position: relative; width: 300px; height: 100%;}
.controls .btn-area .visual-pagination {width: 195px; gap: 33px; display: flex;}
.swiper-pagination-bullet {margin: 0 !important; position: relative; background-color: transparent !important; opacity: 1 !important; height: 11px !important; width: 15px !important; transition: all .3s linear;}
.swiper-pagination-bullet-active {width: 95px !important;}
.swiper-pagination-bullet::before {position: absolute; content: ''; font-size: 14px; font-weight: 700; font-family: 'Play'; opacity: .5; color: #fff; top: 0; left: 0;}
.swiper-pagination-bullet:nth-of-type(1)::before {content: '01';}
.swiper-pagination-bullet:nth-of-type(2)::before {content: '02';}
.swiper-pagination-bullet:nth-of-type(3)::before {content: '03';}
.swiper-pagination-bullet-active::before {opacity: 1;}
.controls .btn-area .progress-bar {position: absolute; width: 60px; height: 1px; background-color: transparent; left: 35px; top: 50%; transform: translateY(-50%); transition: all .15s linear;}
.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.s1 .btn-area .progress-bar {left: 35px;}
.controls.s2 .btn-area .progress-bar {left: 83px;}
.controls.s3 .btn-area .progress-bar {left: 130px;}

.scroll {position: absolute; z-index: 1; bottom: 115px; right: 52px; width: 95px; height: 95px; background: url(../images/main/scroll.png) 50% 50% no-repeat;background-size: auto;}
.scroll::before {position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background: url(../images/main/scroll_txt.png) 50% 50% no-repeat; background-size: auto; animation: loop 5s linear infinite;}

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

.section-header {overflow: hidden;}
.section-header h3 {font-family: 'Play'; font-size: 75px; color: #fff; font-weight: 700; line-height: 1;}
.section-header p {font-size: 26px; font-weight: 400; color: #fff; padding-top: 45px;	}

/* sec2 */
.sec2 {padding-top: 250px;}
.sec2 .inner {width: 100%; display: flex; align-items: flex-start; gap: 200px; justify-content: space-between;}
.sec2 .inner .tab-box {max-width: 460px; width: 100%;}
.sec2 .inner .tab {width: 100%; margin-top: 70px;}
.sec2 .inner .tab ul {width: 100%;}
.sec2 .inner .tab ul li {width: 100%;}
.sec2 .inner .tab ul li a {width: 100%; display: block; padding: 30px 0; font-size: 24px; font-weight: 600; color: #777; background: url(../images/main/ico_tab.png) 100% 50% no-repeat; background-size: auto; transition: all .3s linear;  border-bottom: 1px solid rgba(255,255,255, .2);}
.sec2 .inner .tab ul li.on a {color: #fff; background-image: url(../images/main/ico_tab_on.png); border-color: #fff;}
.sec2 .inner .tab ul li a:hover {color: #fff;}

.sec2 .inner .img-box {max-width: 960px; width: 100%; position: relative; min-height: 660px; display: none; overflow: hidden;}
.sec2 .inner .img-box .img {width: 100%; height: 500px; position: relative; display: block;}
.sec2 .inner .img-box .img::after {position: absolute; content:''; width: 100%; height: 100%; background-color: #02121e; top: 0; right: 0; transition: all .6s ease-in .2s;}
.sec2 .inner .img-box.show .img::after {width: 0%;}
.sec2 .inner .img-box.motion .img::after {width: 0%; transition-delay: .8s;}
.sec2 .inner .img-box .img img {display: block; max-width: 100%; margin: 0 auto; height: 100%;}
.sec2 .inner .img-box .txt {position: absolute; width: 100%; padding:0 45px; top: 470px; left: 0; z-index: 2; opacity: 0; transform:translateY(60px); transition: all .8s ease-in-out; transition-property: opacity, transform;}
.sec2 .inner .img-box.show .txt {opacity: 1; transition-delay: .3s; transform: translateY(0);}
.sec2 .inner .img-box .txt h4 {font-size: 54px; font-weight: 700; color: #fff; line-height: 1;}
.sec2 .inner .img-box .txt p {font-size: 22px; color: #888d90; line-height: 1.545; padding-top: 35px;}

.sec2 .inner #box1 {display: block;}

.sec3 {padding-top: 300px; width: 100%; background: url(../images/main/bg_sec3.png) 50% 0% no-repeat; background-size: auto;}
.sec3 .company {margin-top: 95px; padding: 0 50px; width: 100%;}
.sec3 .company ul {width: calc(100% + 100px); margin: 0 -50px; display: flex;}
.sec3 .company ul li {width: 33.3333%; padding: 0 50px; min-height: 540px;}
/* .sec3 .company ul li:nth-of-type(1) {transform: translateY(120px);}
.sec3 .company ul li:nth-of-type(3) {transform: translateY(90px);} */
.sec3 .company ul li:nth-of-type(2) {transform: translateY(50px);}
.sec3 .company ul li a {position: relative; display: block; width: 100%; height: 100%; background: url() 50% 50% no-repeat; background-size: cover;}
.sec3 .company ul li a::after {position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,161,233, .9); opacity: 0; transition: all .3s linear;}
.sec3 .company ul li:nth-of-type(1) a {background-image: url(../images/main/img_sec301.jpg);}
.sec3 .company ul li:nth-of-type(2) a {background-image: url(../images/main/img_sec302.jpg);}
.sec3 .company ul li:nth-of-type(3) a {background-image: url(../images/main/img_sec303.jpg);}
.sec3 .company ul li a p {position: absolute; top: 90px; left: 0; width: 100%; padding: 0 50px; font-size: 40px; font-weight: 700; color: #fff; background: url(../images/main/ico_tab.png) calc(100% - 50px) 50% no-repeat; background-size: auto; transition: all .3s ease-out; z-index: 2;}
.sec3 .company ul li a:hover::after {opacity: 1;}
.sec3 .company ul li a:hover p {top: 410px; background-image: url(../images/main/ico_tab_on2.png);}

.sec3 .office {margin-top: 390px; width: 100%;}
.sec3 .office ul {width: 100%; gap: 22px; display: flex; overflow: hidden;}
.sec3 .office ul li {position: relative; flex: 1; min-height: 640px; transition: all .4s linear; background: url() 50% 50% no-repeat; background-size: cover; filter: brightness(60%);}
.sec3 .office ul li:nth-of-type(1) {background-image: url(../images/main/img_sec304.jpg);}
.sec3 .office ul li:nth-of-type(2) {background-image: url(../images/main/img_sec305.jpg);}
.sec3 .office ul li:nth-of-type(3) {background-image: url(../images/main/img_sec306.jpg);}
.sec3 .office ul li:nth-of-type(4) {background-image: url(../images/main/img_sec307.jpg);}
.sec3 .office ul li:nth-of-type(5) {background-image: url(../images/main/img_sec308.jpg);}
.sec3 .office ul li:nth-of-type(6) {background-image: url(../images/main/img_sec309.jpg);}
.sec3 .office ul li.active {flex: 7.8; filter: brightness(1);}
.sec3 .office ul li h5 {font-size: 40px; font-weight: 600; color: #fff; position: absolute; bottom: 70px; left: 60px; z-index: 2; opacity: 0; transition: all .3s linear;}
.sec3 .office ul li.active h5 {opacity: 1;}

.sec4 {padding: 260px 0 160px;}
.sec4 .inquiry {width: 100%; display: flex; align-items: center; justify-content: space-between;}
.sec4 .inquiry .inquiry-btn {position: relative; display: block; width: 100%; max-width: 240px; height: 240px; border-radius: 50%; background: url(../images/main/inquiry.png) 50% 50% no-repeat; background-size: auto; background-color: #00a1e9;}
.sec4 .inquiry .inquiry-btn::before {position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; border-radius: 50%; background: url(../images/main/btn_txt.png) 50% 50% no-repeat; background-size: auto; animation: loop 10s linear infinite;}