/* mv */
.mv .slide-wrap .item{position: relative; overflow: hidden;}
.mv .slide-wrap .item::after{content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000000; background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%)}
.mv .slide-wrap .item .video-box{position: relative; height: 100svh;}
.mv .slide-wrap .item .video-box video{position: absolute; top: 50%; left: 50%; min-width: 102%; min-height: 102%; transform: translate(-50%, -50%);}
.mv .slide-wrap .item .tit{position: absolute; top: 50%; left: 50%; width: 100%; max-width: 1720px; margin: 0 auto; color: var(--color-fff); transform: translate(-50%, -35%); z-index: 10; opacity: 0; transition: 0.8s;}
.mv .slide-wrap .item .tit h2{font-weight: 600; font-size: 84px; text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);}
.mv .slide-wrap .item .tit p{margin-top: 45px; font-weight: 500; font-size: 20px; line-height: 1.8; text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);}
.mv .slide-wrap .item.slick_now .tit{transform: translate(-50%, -50%); opacity: 1;}
.mv .svg-box{position: absolute; bottom: clamp(40px,4.17vw,80px); right: clamp(60px,5.21vw,100px); cursor: pointer;}
.mv .svg-box g{animation: opacity 2.4s infinite;}
.mv .svg-box g:nth-of-type(1){animation-delay: 0s;}
.mv .svg-box g:nth-of-type(2){animation-delay: 0.3s;}
.mv .svg-box g:nth-of-type(3){animation-delay: 0.6s;}

/* sec02 */
.sec02{padding: var(--main-padding) 0;}
.sec02 .flex-box{justify-content: space-between;}
.sec02 h2{font-weight: 700; font-size: clamp(120px, 8.24vw, 150px);}
.sec02 h2 span{font-style: italic; font-weight: 500;-webkit-background-clip: text; background-clip: text; background-size: 200% 100%; background-position: 0% 0%; background-image: linear-gradient(90deg,var(--color-111) 0%, var(--color-111) 50%, var(--point-color) 50%, var(--point-color) 100%); -webkit-text-fill-color: transparent; transition: 0.8s 0.7s;}
.sec02 .txt-box{margin-top: clamp(150px,13.74vw,250px);}
.sec02 .txt-box h3{font-size: var(--font32); font-weight: 700; }
.sec02 .txt-box p{margin: clamp(24px,2.2vw,40px) 0 clamp(34px, 3.3vw,60px); font-weight: 300; font-size: var(--font20); line-height: 1.7;}
.sec02 h2.aos-animate span{ background-position: 100% 0%;}

/* sec03 */
.sec03{padding-bottom: var(--main-padding);}
.sec03 h2{padding-left: clamp(60px,5.21vw,100px); font-weight: 600; font-size: var(--font72);}
.sec03 .slide-wrap{width: 100%; margin-top: 60px;}
.sec03 .slide-wrap .slick-track{left: clamp(60px,5.21vw,100px);}
.sec03 .slide-wrap .item{position: relative; width: 415px; aspect-ratio: 415 / 415; border-radius:20px; overflow: hidden; margin-right: 20px; transition: border-radius 0.3s;}
.sec03 .slide-wrap .item:not(.more) a{display: block; position: relative; z-index: 10;}
.sec03 .slide-wrap .item:not(.more) a::before{content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0.1); background-color: var(--point-color); width: 100%; height: 100%; border-radius:50%; opacity: 0; transition: 0.4s}
.sec03 .slide-wrap .item:not(.more) a .txt{position: absolute; bottom: 0; left: 0; width: 100%; padding: 0 30px; transform: translateY(calc(100% - 72px)); transition: 0.4s;}
.sec03 .slide-wrap .item:not(.more) a .txt h3{font-weight: 600; font-size: var(--font32); color: var(--color-fff);} 
.sec03 .slide-wrap .item:not(.more) a .txt p{left: 0; font-weight: 500; font-size: var(--font18); line-height: 1.5em; margin-top: 20px; color: var(--color-fff); padding: 0 0 30px; opacity: 0; transition: 0.4s;}
.sec03 .slide-wrap .more{display:flex; width: 415px; aspect-ratio: 415 / 415; align-items: center; justify-content: center;}
.sec03 .slide-wrap .more .box{text-align: center; color: #ddd;}
.sec03 .slide-wrap .more .box p{font-weight: 600; font-size: 48px; margin-bottom: 20px; transition: 0.3s}
.sec03 .slide-wrap .more .box .common-btn{margin: 0 auto;}
.sec03 .progress-box{padding-left: clamp(60px,5.21vw,100px);}
.sec03 .progress{position: relative; width: 100%; max-width: 1720px; margin-top: 40px;}
.sec03 .progress *{display: block;}
.sec03 .progress .time{position: absolute; top: 0; left: 0; width: 10%; height: 5px; background: var(--point-color); border-radius:5px; transition: 0.4s;}
.sec03 .progress .bg{background: #eee; width: 100%; height: 5px; border-radius:5px}


.sec04{position: relative; padding: var(--main-padding) 0;}
.sec04::before{content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #F8F8F8; max-width: 1870px; border-radius:0 200px 20px 200px; z-index: -1;}
.sec04 .tit-box{ padding-inline: 20px; }
.sec04 .tit-box h2{font-weight: 600; font-size: var(--font72); margin-bottom: 20px;}
.sec04 .tit-box p{font-weight: 300; font-size: 22px; line-height: 1.7;}
.sec04 .prod-wrap .tit-box{text-align: center; margin-bottom: 120px;}
.sec04 .prod-wrap .prod-list{display:flex; gap:20px; align-items: center; padding-bottom: var(--main-padding);}
.sec04 .prod-wrap .prod-list .item{background: #fff; text-align: center; border-radius:20px;}
.sec04 .prod-wrap .prod-list .item a{display: block; padding: 30px 50px;}
.sec04 .prod-wrap .prod-list .item:first-of-type{border-radius: 0 20px 20px 0}
.sec04 .prod-wrap .prod-list .item:last-of-type{border-radius: 20px 0 0 20px}
.sec04 .prod-wrap .prod-list .item a .txt-box{margin-top: 30px;}
.sec04 .prod-wrap .prod-list .item a .txt-box p{font-weight: 600; font-size: 26px; margin-bottom: 10px;}
.sec04 .prod-wrap .prod-list .item a .txt-box span{font-size: var(--font20); color: var(--point-color);}
.sec04 .bg-wrap{position: relative;}
.sec04 .bg-wrap .tit-box{position: absolute; top: 0; left: calc(50% + 25px); z-index: 10;}
.sec04 .bg-wrap .tit-box h3{font-weight: 600; font-size: 62px; margin-bottom: 20px;}
.sec04 .bg-wrap .tit-box h3 span{font-style: italic; font-weight: 500;}
.sec04 .svg-box{position: relative; width: 100%; aspect-ratio: 1870 / 998; max-width: 1870px; margin-right: auto;}
.sec04 .svg-box img{width: 100%;}
.sec04 .svg-box svg{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.sec04 .svg-box svg g circle{transform: scale(0); transform-origin: center; transform-box: content-box; animation: scale02 3s infinite;}
.sec04 .svg-box svg g circle:last-of-type{animation: scale 3s infinite;}
.sec04 .rolling-wrap{width: 100%; max-width: 1870px; overflow: hidden;}
.sec04 .rolling-wrap figure{display:flex; align-items: center; width: max-content; mix-blend-mode: multiply;}
.sec04 .rolling-wrap figure img{padding-right: 120px;}
.sec04 .rolling-wrap figure img:last-of-type{padding-right: 0;}
.sec04 .rolling-wrap figure:first-of-type{animation: rollingLeft 34s infinite linear;}
.sec04 .rolling-wrap figure:last-of-type{animation: rollingRight 34s infinite linear; margin-top: 60px;}

.sec05{padding: var(--main-padding) 0;}
.sec05 .flex-box{justify-content: space-between;}
.sec05 .tit-box h2{font-weight: 600; font-size: var(--font72);}
.sec05 .tit-box p{font-weight: 300; font-size: 22px; margin-top: 20px;}
.sec05 .project-list{display:flex; gap:20px; margin-top: 60px;}
.sec05 .project-list .item{width: calc((100% - 60px) / 4);}
.sec05 .project-list .item figure{ width:100%; border-radius:20px; overflow: hidden; aspect-ratio: 465 / 279;}
.sec05 .project-list .item figure img{transform-origin: center;width: 100%; height: 100%; object-fit: cover; transition: 0.3s;}
.sec05 .project-list .item p{ height: 3.2em; margin-top: 30px; font-weight: 500; font-size: var(--font20); line-height: 1.6; white-space: normal; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; display: -webkit-box;  -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;}
.sec05 .project-list .item p span{background-image: linear-gradient(to right, #111, #111); background-size: 0% 2px; background-repeat: no-repeat; background-position: 0% 100%; transition: 0.4s;}


.sec06 .flex-box{justify-content: space-between;}
.sec06 .tit-box h2{font-weight: 600; font-size: var(--font72);}
.sec06 .tit-box p{font-weight: 300; font-size: 22px; margin-top: 20px;}
.sec06 .board-list{display:flex; justify-content: space-between; margin-top: 60px;}
.sec06 .board-list .item a figure{border-radius:20px; overflow: hidden;}
.sec06 .board-list .item a figure img{width: 100%; height: 100%; object-fit: cover; transform-origin: center; transition: 0.3s;}
.sec06 .board-list .item a .txt{margin-top: 20px;}
.sec06 .board-list .item a .txt p{max-height: 3.2em; font-weight: 500; font-size: var(--font20); line-height: 1.6; white-space: normal; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; display: -webkit-box;  -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;}
.sec06 .board-list .item a .txt p span{background-image: linear-gradient(to right, #111, #111); background-size: 0% 2px; background-repeat: no-repeat; background-position: 0% 100%; transition: 0.4s;}
.sec06 .board-list .item a .txt .date{display: block; margin-top: 20px; font-weight: 500; font-size: var(--font18); color: var(--color-ccc);}
.sec06 .board-list .main-news{width: 50%;}
.sec06 .board-list .main-news .item a .txt p{font-size: 26px;}
.sec06 .board-list .list{display:flex; gap:40px; flex-wrap:wrap; width: calc(50% - 40px);}
.sec06 .board-list .list .item{width: calc(50% - 20px);}
.sec06 .board-list .list .item a figure { aspect-ratio: 400 / 210;}
.sec06 .link-box{padding: var(--main-padding) 0 193px;}
.sec06 .link-box .item{width: calc(50% - 10px); background: #F8F8F8; border-radius:20px; overflow: hidden;}
.sec06 .link-box .item a{position: relative; display:flex; align-items: center; justify-content: space-between; padding: 71px 60px; z-index: 1;}
.sec06 .link-box .item a::before{content:""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0); background-color: var(--point-color); width: 100px; height: 100px; border-radius:50%; transition: 0.5s; z-index: -1; opacity: 0;}
.sec06 .link-box .item a .txt strong{font-weight: 700; font-size: 26px; transition: 0.2s;}
.sec06 .link-box .item a .txt p{font-weight: 500; font-size: 18px; margin-top: 20px; color: var(--color-888); line-height: 1.5; transition: 0.3s;}



@keyframes opacity{ 
    0% {opacity: 0.3;}
    50% {opacity: 1;}
    100% {opacity: 0.3;}
}
@keyframes scale{
    0% {transform: scale(0); opacity: 0;}
    33%{opacity: 0.1;}
    66%{opacity: 0;}
    100% {transform: scale(1); opacity: 0;}
}
@keyframes scale02{
    0% {transform: scale(0); opacity: 0;}
    33%{opacity: 0.05;}
    66%{opacity: 0;}
    100% {transform: scale(1); opacity: 0;}
}
@keyframes rollingLeft{
    0% {transform: translateX(0);}
    100% {transform: translateX(calc(-50% - 60px));}
}
@keyframes rollingRight{
    0% {transform: translateX(calc(-50% - 60px));}
    100% {transform: translateX(0);}
}
@media screen and (max-width:1720px) {
    /* mv */
    .mv .slide-wrap .item .tit{padding: 0 clamp(16px,3.49vw,60px);}
    .mv .slide-wrap .item .tit h2{font-size: clamp(62px,4.88vw,84px);}
    .mv .slide-wrap .item .tit p{font-size: clamp(18px, 1.16vw, 20px); margin-top: clamp(20px, 2.62vw,45px);}
    .mv .svg-box{width: clamp(50px,4.65vw,80px); height: clamp(50px,4.65vw,80px); right:clamp(16px,3.49vw,60px); bottom: clamp(16px, 2.33vw,40px);}
    .mv .svg-box svg{width: 100%; height: 100%;}   
    /* sec03 */
    .sec03 h2{padding-left: clamp(16px,3.49vw,60px);}
    .sec03 .slide-wrap{margin-top: clamp(20px,3.49vw,60px);}
    .sec03 .slide-wrap .slick-track{left: clamp(16px,3.49vw,60px);}
    .sec03 .slide-wrap .item,
    .sec03 .slide-wrap .more{width: clamp(320px, 24.13vw,415px);}
    .sec03 .slide-wrap .item:not(.more) a .txt{padding: 0 clamp(16px,1.74vw,30px); transform: translateY(calc(100% - 62px));}
    .sec03 .slide-wrap .item:not(.more) a .txt p{margin-top: 10px; padding: 0 0 clamp(16px,1.74vw,30px);}
    .sec03 .slide-wrap .item:not(.more) a .txt p br{display: none;}
    .sec03 .slide-wrap .more .box p{font-size: clamp(32px,2.79vw,48px);}
    .sec03 .progress-box{padding-left: clamp(16px,3.49vw,60px);}
    .sec03 .progress{width: calc(100% - clamp(16px,3.49vw,60px)); margin-top: clamp(20px,2.33vw,40px);}
    /* sec04 */
    .sec04::before{border-radius: 0 clamp(100px,11.63vw, 200px) 20px clamp(100px,11.63vw, 200px);}
    .sec04 .prod-wrap .tit-box{margin-bottom: clamp(60px,6.98vw,120px);}
    .sec06 .tit-box p,
    .sec05 .tit-box p,
    .sec04 .tit-box p{font-size: clamp(18px, 1.28vw, 22px);}
    .sec04 .prod-wrap .prod-list .item a{padding: clamp(16px,1.74vw, 30px) clamp(20px,2.91vw,50px);}
    .sec04 .prod-wrap .prod-list .item a .txt-box{margin-top: clamp(16px,1.74vw,30px);}
    .sec04 .prod-wrap .prod-list .item a .txt-box p{font-size: clamp(22px, 1.51vw, 26px); margin-bottom: 6px;}
    .sec04 .bg-wrap .tit-box h3{font-size: clamp(44px, 3.6vw, 62px);}
    /* sec05 */
    .sec05 .project-list .item figure{border-radius:clamp(10px,1.16vw,20px)}
    .sec05 .project-list .item p{margin-top: clamp(14px,1.74vw,30px);}
    /* sec06 */
    .sec06 .board-list .list{gap:20px; width: calc(50% - 40px);}
    .sec06 .board-list .list .item{width: calc(50% - 10px);}
    .sec06 .board-list .item a .txt .date{margin-top: clamp(10px, 1.16vw,20px);}
    .sec06 .board-list .item a figure{border-radius:clamp(10px,1.16vw,20px)}
    .sec06 .link-box{padding: var(--main-padding) 0 clamp(100px, 11.22vw, 193px);}
    .sec06 .link-box .item{border-radius: clamp(10px, 1.16vw, 20px);}
    .sec06 .link-box .item a{padding: clamp(40px,4.13vw,71px) clamp(20px, 3.49vw, 60px);}
    .sec06 .link-box .item a .txt strong{font-size: clamp(22px,1.51vw,26px);}
    .sec06 .link-box .item a .txt p{font-size: clamp(16px, 1.05vw,18px); margin-top: clamp(14px, 1.16vw,20px);}
}

@media screen and (max-width:1500px) {
    /* sec02 */
    .sec02 h2{font-size: clamp(80px, 8vw,120px);}
    .sec02 .flex-box{flex-wrap:wrap;}
    .sec02 .flex-box .txt-box{width: 100%; text-align: right; margin-top: -25px;}
    .sec02 .flex-box .txt-box .common-btn{margin-left: auto;}
    /* sec04 */
    .sec04 .rolling-wrap figure img{padding-right: 60px;}

    @keyframes rollingLeft{
        0% {transform: translateX(0);}
        100% {transform: translateX(calc(-50% - 30px));}
    }
    @keyframes rollingRight{
        0% {transform: translateX(calc(-50% - 30px));}
        100% {transform: translateX(0);}
    }
}
@media screen and (max-width:1024px) {
    /* mv */
    .mv .slide-wrap .item .tit h2{font-size: clamp(42px,6.05vw,62px);}
    /* sec02 */
    .sec02 .flex-box .txt-box{margin-top: 20px;}
    /* sec03 */
    .sec03 .slide-wrap .item:not(.more) a .txt{transform: translateY(calc(100% - 52px));}
    .sec03 .slide-wrap .item:not(.more) a .txt h3{font-size: 20px;}
    .sec03 .slide-wrap .item:not(.more) a .txt p{font-size: 15px;}
    /* .sec04 */
    .sec04::before{border-radius: 0 clamp(40px,9.77vw, 100px) 20px clamp(40px,9.77vw, 100px);}
    .sec04 .tit-box h2{margin-bottom: 14px;}
    .sec06 .tit-box p,
    .sec05 .tit-box p,
    .sec04 .tit-box p{font-size: clamp(16px, 1.76vw, 18px);}
    .sec04 .prod-wrap .prod-list{flex-wrap:wrap;}
    .sec04 .prod-wrap .prod-list .item{width: calc(50% - 10px); border-radius: 14px;}
    .sec04 .prod-wrap .prod-list .item:nth-of-type(3),
    .sec04 .prod-wrap .prod-list .item:first-of-type{border-radius:0 14px 14px 0}
    .sec04 .prod-wrap .prod-list .item:nth-of-type(2),
    .sec04 .prod-wrap .prod-list .item:last-of-type{ border-radius: 14px 0 0 14px;}
    .sec04 .prod-wrap .prod-list .item a .txt-box p{font-size: 19px;}
    .sec04 .bg-wrap .tit-box{position: relative; left: auto; text-align:right; padding-right: 16px; margin-bottom: -20px;}
    .sec04 .bg-wrap .tit-box h3{font-size: clamp(32px, 4.3vw, 44px); margin-bottom: 10px;}
    /* sec05 */
    .sec06 .tit-box p,
    .sec05 .tit-box p{margin-top: 14px;}
    .sec05 .project-list{flex-wrap:wrap;}
    .sec05 .project-list .item{width: calc(50% - 10px);}
    .sec05 .project-list .item p{height: 100%; max-height: 3.2em;}
    /* sec06 */
    .sec06 .board-list{flex-wrap:wrap; gap:30px 0}
    .sec06 .board-list .list,
    .sec06 .board-list .main-news{width: 100%;}
    .sec06 .board-list .item a .txt{margin-top: 12px;}
    .sec06 .board-list .main-news .item a .txt p{font-size: clamp(20px,2.54vw,26px);}
    
    .sec06 .link-box{flex-wrap:wrap; gap:20px}
    .sec06 .link-box .item{width: 100%;}
}
@media screen and (max-width:768px) {
    /* mv */
    .mv .slide-wrap .item .tit p{font-size: 15px; margin-top: 15px;}
    /* sec02 */
    .sec02 h2{font-size: clamp(56px, 10.42vw, 80px);}
    .sec02 .flex-box .txt-box{text-align: left;}
    .sec02 .flex-box .txt-box p{margin: 16px 0 20px;}
    .sec02 .flex-box .txt-box p br{display: none;}
    .sec02 .flex-box .txt-box .common-btn{margin-left: 0;}
    /* sec03 */
    .sec03 .slide-wrap .item{margin-right: 10px; border-radius: 10px !important;}
    .sec03 .slide-wrap .item,
    .sec03 .slide-wrap .more{width: clamp(290px, 41.67vw,320px);}
    .sec03 .slide-wrap .item:not(.more) a::before{top: 0; left: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%); border-radius:0; opacity: 1; transform: translate(0) scale(1) !important;}
    .sec03 .slide-wrap .item:not(.more) a .txt{transform: translateY(0); width: 100%;}
    .sec03 .slide-wrap .item:not(.more) a .txt p{opacity: 1;}
    /* sec04 */
    .sec04 .prod-wrap .tit-box{margin-bottom: 40px;}
    /* sec05 */
    .sec05 .flex-box{flex-wrap:wrap}
    .sec05 .flex-box .btn-box{width: 100%;}
    .sec05 .flex-box .common-btn{margin-left: auto; margin-top: 10px;}
    .sec05 .project-list{margin-top: 40px;}
    /* sec06 */
    .sec06 .board-list{margin-top: 40px;}
}

@media (hover: hover){
    .sec03 .slide-wrap .item:hover:not(.more){border-radius: 40px}
    .sec03 .slide-wrap .item:hover:not(.more) a::before{opacity: 1; transform: translate(-50%,-50%) scale(1.8)}
    .sec03 .slide-wrap .item:hover:not(.more) a .txt{transform: translateY(0);}
    .sec03 .slide-wrap .item:hover:not(.more) a .txt p{opacity: 1;}
    .sec03 .slide-wrap .more:hover .box .common-btn::before{border-color: transparent; border-width: 2px; transform: translate(-50%,-50%) scale(1.6);}
    .sec03 .slide-wrap .more:hover .box .common-btn::after{background-color: var(--point-color); transform: translate(-50%,-50%) scale(1);}
    .sec03 .slide-wrap .more:hover .box .common-btn svg rect{fill:var(--color-fff)}
    .sec03 .slide-wrap .more:hover .box .common-btn{border:1px solid transparent}
    .sec03 .slide-wrap .more:hover .box .common-btn::before{opacity: 1;}
    .sec03 .slide-wrap .more:hover .box{color: var(--point-color);}
    .sec06 .board-list .item:hover a figure img,
    .sec05 .project-list .item:hover figure img{transform: scale(1.15);}
    .sec06 .board-list .item:hover a .txt p span,
    .sec05 .project-list .item:hover p span{background-size: 100% 2px;}
    .sec06 .link-box .item:hover a::before{transform: translate(-50%,-50%) scale(10); opacity: 1;}
    .sec06 .link-box .item:hover a .txt p,
    .sec06 .link-box .item:hover a .txt strong{color: var(--color-fff); transition-delay: 0.2s;}
}
@media screen and (min-width:1924px) {
    .sec04 .rolling-wrap,
    .sec04 .svg-box,
    .sec04::before{width: calc(100% - 50px); max-width: none;}
    .sec04 .prod-wrap .prod-list{justify-content: center;}
}