@charset "utf-8";

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

/* m-visual */
.m-visual {padding: 0;}
.m-visual .visual {width: 100%; height: 970px; 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 .swiper-slide .backdrop {width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; background: none;}
.m-visual .visual .swiper-wrapper .swiper-slide .backdrop video {width: 100%; height: 100%; object-fit: cover;}

.scroll {position: absolute; z-index: 1; bottom: 40px; right: 40px; width: 80px; height: 80px; border-radius: 50%; background: url(../images/main/bg_scroll.png) 50% 50% no-repeat;background-size: auto; display: flex; align-items: center; justify-content: center;}
.scroll::before {position: absolute; content: ''; width: 100%; height: 100%; border-radius: 50%; background: url(../images/main/scroll.png) 50% 50% no-repeat; background-size: auto; top: 0; right: 0; animation: roll 10s linear infinite;}
.scroll img {display: block; max-width: 100%; margin: 0 auto;}

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

.sec2 {padding: 110px 0 120px; background-color: #000;}
.sec2 .item {display: flex; justify-content: left; align-items: center;}
.sec2 .item ~ .item {margin-top: 60px;}
.sec2 .item .space {min-width: 0; flex: 1;}
.sec2 .item .wrap {max-width: 910px; width: 100%; display: flex; align-items: center; gap: 45px;}
.sec2 .item .txt {width: 1%; flex: 1 1 auto; text-align: right;}
.sec2 .item .txt h4 {position: relative; display: inline-block; padding-left: 22px; font-size: 48px; color: #fff; font-weight: 500; line-height: 1.29; letter-spacing: -1.44px; font-family: 'Artega';}
.sec2 .item .txt h4::before {position: absolute; content: ''; width: 12px; height: 12px; background: url(../images/main/ico_dot.png) 50% 50% no-repeat; background-size: auto; top: 7px; left: 0;}
.sec2 .item .txt p {margin-top: 20px; font-size: 16px; font-weight: 400; line-height: 1.75; letter-spacing: -.48px; color: rgba(255,255,255, .6);}
.sec2 .item figure {position: relative; max-width: 388px; width: 100%; will-change: transform, opacity;}
.sec2 .item figure img {max-width: 100%; display: block; margin: 0 auto;}
.sec2 .item:nth-of-type(2n) {flex-direction: row-reverse; justify-content: right;}
.sec2 .item:nth-of-type(2n) .wrap {flex-direction: row-reverse;}
.sec2 .item:nth-of-type(2n) .txt {text-align: left;}
.sec2 .item:nth-of-type(2n) .txt h4 {padding-left: 0; padding-right: 22px;}
.sec2 .item:nth-of-type(2n) .txt h4::before {left: initial; right: 0;}

.section-header h3 {font-family: 'Artega'; font-size: 76px; color: #111; font-weight: 500; line-height: 1.5; letter-spacing: -4.56px;}
.section-header p {margin-top: 48px; font-size: 20px; font-weight: 500; color: #333; line-height: 1.6; letter-spacing: -.6px; display: flex; justify-content: right;}

.sec3 {padding: 70px 0 170px;}
.sec3 ul.banner {width: 100%; display: flex; gap: 34px;}
.sec3 ul.banner li {width: 1%; flex: 1 1 auto; min-height: 294px;}
.sec3 ul.banner li .item {display: flex; width: 100%; height: 100%; align-items: flex-start; justify-content: flex-end; padding: 30px; position: relative; background: url() 50% 50% no-repeat; background-size: cover; z-index: 2; flex-direction: column;}
.sec3 ul.banner li:nth-of-type(1) .item {background-image: url(../images/main/img_01.jpg);}
.sec3 ul.banner li:nth-of-type(2) .item {background-image: url(../images/main/img_02.jpg);}
.sec3 ul.banner li:nth-of-type(3) .item {background-image: url(../images/main/img_03.jpg);}
.sec3 ul.banner li .item::after {position: absolute; content: ''; width: 100%; height: 100%; background-color: #000; top: 0; left: 0; opacity: 0; transition: all .2s linear; z-index: -1;}
.sec3 ul.banner li .item:hover::after {opacity: .4;}
.sec3 ul.banner li .item figure {max-width: 64px; width: 100%; opacity: 0; transition: all .2s linear;}
.sec3 ul.banner li .item figure img {display: block; max-width: 100%; margin: 0 auto;}
.sec3 ul.banner li .item h5 {font-size: 24px; color: #fff; font-weight: 600; line-height: 1.5; letter-spacing: -.72px; margin-top: 20px;}
.sec3 ul.banner li .item:hover figure {opacity: 1;}

.sec3 .works {margin-top: 170px;}
.sec3 .works .work-list {margin-top: 65px;}
.sec3 .works .work-list ul {width: calc(100% + 34px); display: flex; flex-wrap: wrap; margin: 0 -17px;}
.sec3 .works .work-list ul li {width: 33.333%; padding: 0 17px;}
.sec3 .works .work-list ul li:nth-of-type(3) ~ li {margin-top: 40px;}
.sec3 .works .work-list ul li a {display: block; width: 100%;}
.sec3 .works .work-list ul li a .pic {position: relative; height: 0; padding-bottom: 59.41%; overflow: hidden;}
.sec3 .works .work-list ul li a .pic img {position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100% !important; height: 100% !important; max-width: 100%; min-height: 100%; object-fit: cover; transition: all .3s linear;}
.sec3 .works .work-list ul li a .txt {margin-top: 20px;}
.sec3 .works .work-list ul li a .txt h5 {position: relative; font-size: 26px; font-weight: 600; line-height: 1.46; letter-spacing: -.78px; color: #000; transition: all .3s linear; display: inline-block;}
.sec3 .works .work-list ul li a .txt h5::before {position: absolute; content: ''; width: 0%; height: 100%; background-color: #000; top: 0; left: 0; z-index: -1; transition: all .3s linear;}
.sec3 .works .work-list ul li a .txt p {font-size: 16px; font-weight: 400; line-height: 1.75; letter-spacing: -.48px; color: #666;}
.sec3 .works .work-list ul li a:hover .txt h5 {color: #fff;}
.sec3 .works .work-list ul li a:hover .txt h5::before {width: 100%;}
.sec3 .works .work-list ul li a:hover .pic img {transform:translateY(-50%) scale(1.1);}
.sec3 .works .work-list a.more {margin: 65px auto 0; max-width: 173px; width: 100%; height: 50px; border-radius: 4px; border: 1px solid #666; display: block; padding: 0 25px; line-height: 48px; font-size: 14px; color: #000; font-weight: 600; letter-spacing: -.42px; background: url(../images/main/ico_dot2.png) calc(100% - 25px) 50% no-repeat; background-size: auto; transition: all .2s linear;}
.sec3 .works .work-list a.more:hover {background-color: #000; color: #fff; background-image: url(../images/main/ico_dot_on.png); border-color: #000;}

.sec4 {overflow: hidden;}
.sec4 .flow-wrap {margin-top: 130px; width: 100%; white-space: nowrap;}
.sec4 .flow-wrap.ty2 .flow {animation:scroll-right 50s linear infinite;}
.sec4 .flow-wrap ~ .flow-wrap {margin-top: 50px;}
.sec4 .flow-wrap .flow {display: flex; animation: scroll-left 50s linear infinite; width: max-content; align-items: center;}
.sec4 .flow-wrap .flow figure {position: relative; display: inline-block; margin-right: 56px; width: auto; white-space:nowrap;}
.sec4 .flow-wrap .flow figure img {display: block; max-width: 100%; margin: 0 auto;}
.sec4 .flow-wrap .flow figure img:nth-of-type(2) {position: absolute; top: 0; left: 0; opacity: 0; transition: all .2s linear;}
.sec4 .flow-wrap:hover .flow {animation-play-state: paused;}
.sec4 .flow-wrap .flow figure:hover img:nth-of-type(2) {opacity: 1;}

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

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

.sec5 {margin-top: 170px;}
.sec5 .roll-wrap {width: 100%; margin: 0 auto; display: flex; gap: 80px; align-items: center; justify-content: center; overflow: hidden;}
.sec5 .roll-wrap .tit { max-width: 415px; width: 100%; font-family: 'Artega'; padding-bottom: 70px;}
.sec5 .roll-wrap .tit h3 {position: relative; font-size: 54px; font-weight: 500; line-height: 1.25; letter-spacing: -3.24px; color: #000; display: inline-block;}
.sec5 .roll-wrap .tit h3 > i {font-style: normal; position: absolute; bottom: 13px; right: -30px;}
.sec5 .roll-wrap .tit h3 > i > img {display: block; max-width: 100%; margin: 0 auto;}
.sec5 .roll-wrap .txt-roll {min-width: 0; flex: 1; height: 770px; overflow: visible;}
.sec5 .roll-wrap .txt-roll .swiper {overflow: visible; width: 100%; height: 100%;}
.sec5 .roll-wrap .txt-roll .swiper h4 {font-size: 52px; line-height: 2.03; letter-spacing: -1.62px; font-weight: 500; font-family: 'Artega'; -webkit-text-stroke: 1px #dbdbdb; color: transparent; transition: all .3s linear; white-space: nowrap;}
.sec5 .roll-wrap .txt-roll .swiper .swiper-slide {display: flex; align-items: center; width: 100%; height: 110px;}
.sec5 .roll-wrap .txt-roll .swiper .swiper-slide-active h4 {color: #000; -webkit-text-stroke-color: #000;}

.sec6 {padding-top: 65px; background-color: #000; height: 340px; max-width: 1840px; width: 100%; margin: 80px auto 0;}
.sec6 > .container {max-width: 1810px !important; width: 100%; margin: 0 auto; position: relative;}
.sec6 h3 {font-size: 48px; font-weight: 500; color: #fff; font-family: 'Artega'; line-height: 1.25; letter-spacing: -2.88px; padding-top: 15px;}
.sec6 a {display: inline-block;}
.sec6 figure img {display: block; max-width: 100%;}
.sec6 a:hover figure img {animation: icon-hover-float 0.75s ease-in-out infinite alternate;}
@keyframes icon-hover-float {
    from {
        transform: translateY(0) rotate(0deg) scale(1);
    }

    to {
        transform: translateY(-14px) rotate(3deg) scale(1.04);
    }
}


/* quick-top */
.sec6 .quick-top {position: absolute; bottom: 0; right: 15px; z-index: 10; transition: all .15s linear; }
.sec6 .quick-top .btn-top {position: relative; overflow: hidden; display: block; width: 50px; height: 50px; background: url(../images/go_top.png) 50% 50% no-repeat; background-size: auto; background-color: transparent; border:1px solid #fff; border-radius: 4px;}