@charset "utf-8";

.main-page { background-color: #000; }
.visual-swiper { height: 100%; color: #fff; }
.visual-swiper .swiper-slide { transition-timing-function: ease-in; }
.visual-swiper .swiper-slide video { position: absolute; left: 50%; top: 50%; width: 100%; min-height: 100%; object-fit: cover; transform: translate(-50% ,-50%); pointer-events: none; }
.visual-swiper .swiper-slide .inner { position: absolute; left: 50%; bottom: 120px; padding-right: 140px; transform: translate(-50%,0); opacity: 1; transition: transform 1s 0.6s, opacity 1s 0.6s; }
/* .visual-swiper .swiper-slide.swiper-slide-active .inner { opacity: 1; } */
/* .visual-swiper .swiper-slide.swiper-slide-active.first .inner { transform: translate(-50%,0); opacity: 1; transition-delay: calc(var(--intro-T) + 0.6s); } */

.visual-title { font-size: 69px; }
.visual-text { margin-top: 1.3em; font-size: 23px; }
.progress-bar { position: absolute; left: 50%; bottom: 60px; width: calc(100% - 40px); max-width: 1600px; height: 2px; background-color: rgba(255, 255, 255, 0.2); transform: translateX(-50%); z-index: 10; }
.progress-bar .bar { position: absolute; left: 0; top: 0; width: var(--progress); height: 100%; background-color: #fff; }
.swiper-opt__area { position: relative; left: 50%; bottom: 120px; display: flex; justify-content: right; align-items: center; gap: 15px; width: calc(100% - 40px); max-width: 1600px; transform: translate(-50%,-100%); z-index: 10; }
.swiper-opt__area .swiper-pagination-bullet{ width: auto; height: auto; background-color: transparent; font-family: var(--font-Play); font-size: 18px; font-weight: 700; opacity: 0.3; }
.swiper-opt__area .swiper-pagination-bullet-active{ width: auto; height: auto; background-color: transparent; font-family: var(--font-Play); font-size: 18px; font-weight: 700; opacity: 1; }
.swiper-opt__area .swiper-pagination { position: static; width: fit-content; }
.visual-swiper .swiper-button-next, .visual-swiper .swiper-button-prev { width: 8px; height: 13px; background: no-repeat center center/contain; opacity: 1; }
.visual-swiper .swiper-button-prev { background-image: url("/img/common/arrow_prev_s.svg"); }
.visual-swiper .swiper-button-next { background-image: url("/img/common/arrow_next_s.svg"); }

.sec-m-company .cover { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #000; z-index: 10; }
.sec-m-company .cover .inner { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.sec-m-company .cover .inner p { font-size: 74px; font-weight: 600; color: #fff; text-align: center; }
.sec-m-company .cover .inner p + p { margin-top: 0.27em; }
.sec-m-company .cover-01 { opacity: 0; }
.sec-m-company .cover-01.none, .sec-m-company.active .cover-01.none { opacity: 0; animation: none; z-index: 0; }
.icon-scroll { position: absolute; right: 160px; bottom: 80px; z-index: 5; }
.icon-scroll svg > circle { animation: scrollCircle 1.5s infinite both; }
.icon-scroll svg > rect { animation: scrollRect 1.5s infinite both; }
.fp-slides .slide { position: absolute; opacity: 1; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; transition: 0.6s ease-in; }
.fp-slides .slide .inner { transform: translateY(20px); opacity: 0; }
.fp-slides .slide:nth-child(1) { z-index: 3; }
.fp-slides .slide:nth-child(2) { z-index: 2; }
.fp-slides .slide:nth-child(3) { z-index: 1; }
.fp-slides .slide:not(.slide:nth-child(3)).prev { opacity: 0; visibility: hidden;}
.fp-slides .slide.bg-ani .bg { transform: translate(-50%, -50%) scale(1); }
.sec-m-company .slide { overflow: hidden; }
.sec-m-company .slide .bg { position: absolute; left: 50%; top: 50%; width: 100%; min-height: 100%; object-fit: cover; transform: translate(-50%, -50%) scale(1);}
.sec-m-company .slide::after { content: ""; position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; background: linear-gradient(270deg, rgba(0, 0, 0, 0.00) 0%, #000 100%); z-index: 3; }
.sec-m-company .slide .inner { position: relative; color: #fff; z-index: 5; }
.sec-m-company .slide .title { font-size: 74px; font-weight: 600; }
.sec-m-company .slide .text-box { margin-top: 80px; font-size: 21px; }
.sec-m-company .slide .text-box p { font-weight: 500; }
.sec-m-company .slide .text-box p:nth-child(1) { font-size: 1.52em; line-height: 1.5; }
.sec-m-company .slide .text-box p + p { margin-top: 30px; }
.sec-m-company .slide .text-box p.sub { opacity: 0.8; }
.sec-m-company .slide.cover { opacity: 1; transform: translateY(100%); transition: transform 0.4s 0.1s; }
.fp-controlArrow { display: none; }
.fp-arrow { position: fixed; left: 40px; top: 50%; display: flex; flex-direction: column; align-items: center; gap: 30px; width: 24px; transform: translateY(-50%); }
.fp-arrow .arrow { width: 13px; height: 8px; border: none; background: no-repeat center center/contain;}
.fp-arrow .arrow.arrow-prev { background-image: url("/img/main/fp_prev_arrow.svg"); }
.fp-arrow .arrow.arrow-next { background-image: url("/img/main/fp_next_arrow.svg"); }
.fp-arrow .text { display: flex; font-size: 18px; font-weight: 700; color: #fff; writing-mode: vertical-rl;}
.fp-arrow .text > span { font-family: var(--font-Play); }
.fp-arrow .text > span + span { margin-top: 10px; }

.sec-m-about { overflow: hidden; position: relative; color: #fff; text-align: center; }
.sec-m-about .bg-box { overflow: hidden; position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); }
.sec-m-about .bg-box::after { content: ""; position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); }
.sec-m-about .bg { position: absolute; left: 50%; top: 50%; width: 100%; min-height: 100%; object-fit: cover; transform: translate(-50%, -50%); pointer-events: none; }
.sec-m-about .inner { position: relative; transform: translate3d(0, 40px, 0); opacity: 0; z-index: 5; }
.sec-m-about .text-top .year { font-family: var(--font-Play); font-size: 54px; }
.sec-m-about .text-top .text { display: inline-block; margin-top: 0.47em; font-size: 64px; font-weight: 700; }
.sec-m-about .text-bottom { margin-top: 100px; }
.sec-m-about .text-bottom > p { font-size: 23px; font-weight: 500; line-height: 1.8; }
.ani-counter { position: absolute; left: 0; bottom: 0; display: flex; justify-content: center; flex-wrap: wrap; width: 100%; color: #fff; opacity: 0; visibility: hidden; transform: translateY(137px); }
.ani-counter > li { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 25%; height: 240px; }
.ani-counter > li .title { font-family: var(--font-Play); font-size: 23px; font-weight: 700; color: #fff; }
.ani-counter > li .value { display: flex; justify-content: center; align-items: center; margin-top: 10px; }
.ani-counter > li .num { overflow: hidden; height: 1.3em; font-size: 100px; }
.ani-counter > li .num * { font-family: var(--font-Play); }
.ani-counter > li .num .box { position: relative; display: flex; flex-direction: column; } 
.ani-counter > li .hover-cover { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 20px 20px; background-color: #111; text-align: center; visibility: hidden; opacity: 0; transition: 0.2s ease-in; }
.ani-counter > li .hover-cover ul { margin-top: 40px; font-size: 18px; }
.ani-counter > li .hover-cover ul > li { width: fit-content; margin-left: auto; margin-right: auto; }
.ani-counter > li .hover-cover ul > li span { position: relative; padding-left: 0.72em; }
.ani-counter > li .hover-cover ul > li span::before { content: ""; position: absolute; left: 0; top: 0.47em; display: block; width: 3px; height: 3px; background-color: #fff; }
.ani-counter > li .hover-cover ul > li + li { margin-top: 10px; }
.ani-counter > li:hover .hover-cover { visibility: visible; opacity: 1; }
.sec-m-about .inner.aos-animate { transform: translateY(0); opacity: 1; transition: 0.4s 0.3s ease-in; }
.sec-m-about .inner.aos-animate .text-bottom { animation: opacity 0.3s 5.1s ease-in both; }
.sec-m-about .inner.aos-animate .ani-counter { opacity: 1; visibility: visible; transform: translateY(117px); transition: 0.3s 5.1s ease-in; }
.sec-m-about .inner.aos-animate .ani-counter > li .num .box { animation: counter 1.6s 5.6s cubic-bezier(.21,.11,.07,1) both; }

.sec-m-product { background-color: #000; }
.sec-m-product .inner-box { display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding-top: calc(var(--header-H) + 75px); }
.sec-m-title { font-family: var(--font-Play); font-size: 64px; font-weight: 700; color: #fff; }
.m-product__list { display: flex; height: 81.27%; }
.m-product__list > li { overflow: hidden; position: relative; display: flex; justify-content: center; align-items: flex-end; flex: 1; height: 100%; padding: 40px 20px; text-align: center; }
.m-product__list > li .box { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; z-index: 3; background-color: #000; transform: translateY(100%); transition: 0.4s; }
.m-product__list > li .box::before { content: ""; position: absolute; left: 0; bottom: calc(100% - 1px); display: block; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 50%, #000 100%); }
.m-product__list > li .bg { position: absolute; left: 50%; top: 50%; width: 100%; min-height: 100%; object-fit: cover; transform: translate(-50%, -50%) scale(1.096); transition: 0.4s; }
.m-product__list > li .text-box { position: relative; width: 100%; z-index: 5; } 
.m-product__list > li .title { position: absolute; left: 0; bottom: 0; width: 100%; font-family: var(--font-Play); font-size: 26px; font-weight: 700; color: #fff; transition: 0.4s; }
.m-product__list > li .btn-more { margin: 50px auto 0; opacity: 0; transition: 0.4s; }
.m-product__list > li:hover .bg { transform: translate(-50%, -50%) scale(1); }
.m-product__list > li:hover .box { transform: translateY(76.8%); }
.m-product__list > li:hover .title { bottom: 100%; font-size: 36px; }
.m-product__list > li:hover .btn-more { opacity: 1; }

.sec-m-contact { overflow: hidden; }
.sec-m-contact .inner-box { position: relative; display: flex; height: 100%; }
.sec-m-contact .bg { position: absolute; left: 50%; top: 50%; width: 100%; min-height: 100%; object-fit: cover; transform: translate(-50%, -50%) scale(1.06); transition: 0.4s; }
.sec-m-contact .bg:nth-child(2) { opacity: 0; }
.m-contact__box { position: relative; display: flex; justify-content: center; align-items: center; width: 50%; height: 100%; padding: 0 20px; text-align: center; color: #fff; z-index: 3; }
.m-contact__box:nth-child(1)::after { content: ""; position: absolute; right: 1px; top: 0; display: block; width: 1px; height: 100%; background-color: rgba(255, 255, 255, 0.1); }
.m-contact__box .text-box { position: relative; }
.m-contact__box .title { font-family: var(--font-Mix); font-size: 64px; font-weight: 700; transform: translateY(80px); opacity: 0.5; transition: 0.4s; }
.m-contact__box .text { margin-top: 1.9em; font-size: 21px; transform: translateY(80px); opacity: 0.5; transition: 0.4s; }
.m-contact__box .btn-more { opacity: 0; margin: 80px auto 0; transition: 0.4s; }
.m-contact__box.on .title, .m-contact__box.on .text { transform: translateY(0); opacity: 1; }
.m-contact__box.on .btn-more { opacity: 1; }
.sec-m-contact .bg.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.sec-m-partners { background: url("/img/main/m_partners_bg.jpg") no-repeat center center/cover; }
.m-partners__wrap{ overflow: hidden; padding-bottom: 125px; }
.marquee { overflow: hidden; display: flex; gap: 200px; width: max-content; }
.marquee + .marquee { margin-top: 90px; }
.marquee .marquee__list { display: flex; align-items: center; gap: 200px; }
.marquee:nth-child(1) .marquee__list { animation: marquee 30s linear infinite reverse forwards; }
.marquee:nth-child(2) .marquee__list { animation: marquee 30s linear infinite  forwards; }
.marquee .marquee__list > li img { max-height: 80px; }
.sec-m-partners .footer { position: absolute; width: 100%; left: 0; bottom: 0; }

/* intro */
.intro { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: #000; z-index: 1000; animation: introMotionClose 0.6s var(--intro-T) ease-in both; }
.intro .logo-box { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }
.intro .ani-item { animation: introMotion 0.3s calc(0.2s * var(--time)) cubic-bezier(.28,.22,.62,.96) both; }

@keyframes textClipUp {
    0%{ transform: translateY(100%); clip-path: inset(0 0 100% 0);  }
    100% { transform: translateY(0); clip-path: inset(0 0 0 0);  }
}
@keyframes cover01 {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-100%); opacity: 1; }
}
@keyframes bgScale {
    0% { transform: translate(-50%, -50%) scale(1); }
    100% { transform: translate(-50%, -50%) scale(1.3); }
}
@keyframes opacity {
    0% { opacity: 1; visibility: visible; }
    100% { opacity: 0; visibility: hidden; }
}
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-200%); }
}
@keyframes scrollCircle {
    0% { transform: translateY(0); opacity: 1; animation-timing-function: ease-in; }
    50% { transform: translateY(30px); opacity: 0; animation-timing-function: ease-out; }
    85% { transform: translateY(0); opacity: 1; animation-timing-function: ease-out; }
    100% { transform: translateY(0); opacity: 1; animation-timing-function: ease-out; }
}
@keyframes scrollRect {
    0% { height: 43px; animation-timing-function: ease-in; }
    50% { height: 38px; animation-timing-function: ease-out; }
    85% { height: 43px; animation-timing-function: ease-out; }
    100% { height: 43px; animation-timing-function: ease-out; }
}
@keyframes introMotion {
   0% { transform: translateX(40px); opacity: 0; } 
   100% { transform: translateX(0px); opacity: 1; } 
}
@keyframes introMotionClose {
   0% { opacity: 1; visibility: visible; } 
   100% { opacity: 0; visibility: hidden; } 
}
@keyframes sectionHide { 
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@media screen and (max-width:1700px) {
    .visual-title { font-size: clamp(28px,4.05vw,69px); }
    .visual-text { font-size: clamp(16px,1.35vw,23px); }
    .sec-m-company .cover .inner p { font-size: clamp(30px,4.35vw,74px); }
    .sec-m-company .slide .title { font-size: clamp(26px,4.35vw,74px); }
    .sec-m-company .slide .text-box { font-size: clamp(14px,1.23vw,21px); }
    .sec-m-about .text-top .text { font-size: clamp(24px,3.76vw,64px); }
    .sec-m-about .text-top .year { font-size: clamp(20px,3.17vw,54px); }
    .sec-m-about .text-bottom > p { font-size: clamp(16px,1.35vw,23px); }
    .ani-counter > li .num { font-size: 80px; }
    .sec-m-title { font-size: clamp(24px,3.76vw,64px); }
    .m-contact__box .title { font-size: clamp(24px,3.76vw,64px);  }
}
@media screen and (max-width:1640px) {
    .fp-arrow { left: 10px; width: 20px; }
    .fp-arrow .text { font-size: 15px; }
    .icon-scroll { right: 100px; }
}
@media screen and (max-width:1400px) {
    .marquee__list { gap: 100px; }
    .sec-m-about .text-bottom { margin-top: 60px; }
    .ani-counter > li .title { font-size: 20px; }
    .ani-counter > li .hover-cover ul { margin-top: 24px; font-size: 16px; }
    .ani-counter > li .num { font-size: 60px; }
}
@media (min-width:1201px) and (min-height:601px) {
    /* pc-ani */
    .sec-m-company { opacity: 0; animation: sectionHide 0.1s 0.6s both;  } /* 처음 로딩시 섹션 노출 방지 */
    .sec-m-company.active .cover-01 .inner p:nth-child(1)  { animation: textClipUp 0.4s 0.9s ease-out both; }
    .sec-m-company.active .cover-01 .inner p:nth-child(2)  { animation: textClipUp 0.4s 1.1s ease-out both; }
    .sec-m-company.active .cover-01 { animation: cover01 1s 2.4s both;}
    .sec-m-company .slide.active.cover-02 { transform: translateY(0%); z-index: 10; }
    .sec-m-company .slide.active.cover-02 .inner p  { animation: textClipUp 0.4s 0.9s ease-out both; }
    .fp-slides .slide.active:not(:nth-child(1)) .inner, .fp-slides .slide.active.ani .inner { opacity: 1; transform: translateY(0); transition: 0.4s 0.9s; }
    .sec-m-company .slide.bg-ani .bg { animation: bgScale 5s 0.6s ease-in both; }
}
@media (min-width:1201px) and (max-height:600px) {
    #fullpage .section { position: relative; min-height: 700px; height: auto; }
    #fullpage .main-visual { min-height: 300px; }
    #fullpage .sec-m-company { height: auto !important; }
    .fp-arrow { display: none; }
    .main-visual { height: 100vh; }
    @supports (height: 100svh) {
        .main-visual { height: 100svh; }
    }
    .fp-slidesContainer { width: 100% !important; float: none; }
    .sec-m-company .slide { position: relative; min-height: 250px; width: 100% !important; }
    .sec-m-company .slide::before { content: ""; display: block; width: 100%; padding-top: 30%; }
    .sec-m-company .slide .inner { position: absolute; left: 0; top: 50%; width: 100%; padding: 0 20px; transform: translateY(-50%); }
    .sec-m-company .slide .text-box { margin-top: 40px; }
    .sec-m-company .slide .text-box p:nth-child(1) { font-size: 1.2em; }
    .sec-m-company .slide .text-box p + p { margin-top: 1em; }
    .sec-m-company .cover { position: static; opacity: 1; height: 600px; }
    .sec-m-company .cover .inner { opacity: 1; }
    .sec-m-company .cover-01.none, .sec-m-company.active .cover-01.none { opacity: 1; z-index: 1; }
    .sec-m-company .slide.cover { transform: translateY(0); }
    .icon-scroll { display: none; }
    #fullpage .sec-m-about { min-height: initial; height: auto; padding: 60px 0; }
    .ani-counter { position: static; margin-top: 40px; }
    .sec-m-about .inner.aos-animate .text-bottom { animation: none; }
    .sec-m-about .inner.aos-animate .ani-counter { position: static; opacity: 1; visibility: visible; transform: none; transition: none; }
    .sec-m-about .inner.aos-animate .ani-counter > li .num .box { animation: counter 1.6s 1.6s cubic-bezier(.21, .11, .07, 1) both; }
    .ani-counter > li .num { font-size: 40px; }
    .sec-m-contact { height: 700px; margin-top: 60px; }
    .sec-m-partners { padding-top: 120px; }
    .sec-m-partners .footer { position: static; }

    /* mo-ani */
    .sec-m-company .cover .inner p { transform: translateY(100%); clip-path: inset(0 0 100% 0); }
    .sec-m-company .cover.aos-animate .inner p { animation: textClipUp 0.4s 0.1s ease-out both; }
    .sec-m-company .cover-01.aos-animate .inner p:nth-child(2) { animation: textClipUp 0.4s 0.3s ease-out both; }
    .sec-m-company .slide .inner[data-aos] { transform: translate(-40px, -50%); opacity: 0; transition: 0.6s; }
    .sec-m-company .slide .inner.aos-animate { transform: translate(0, -50%); opacity: 1; }
}
@media screen and (max-width:1200px) {
    #fullpage .section { position: relative; min-height: 700px; }
    #fullpage .main-visual { min-height: 300px; }
    .fp-arrow { display: none; }
    .main-visual { height: 100vh; }
    @supports (height: 100svh) {
        .main-visual { height: 100svh; }
    }
    .visual-swiper .swiper-slide .inner { padding-right: 0; }
    .swiper-opt__area { bottom: 20px; }
    .sec-m-company .slide { position: relative; min-height: 250px; }
    .sec-m-company .slide::before { content: ""; display: block; width: 100%; padding-top: 30%; }
    .sec-m-company .slide .inner { position: absolute; left: 0; top: 50%; width: 100%; padding: 0 20px; transform: translateY(-50%); }
    .sec-m-company .slide .text-box { margin-top: 40px; }
    .sec-m-company .slide .text-box p:nth-child(1) { font-size: 1.2em; }
    .sec-m-company .slide .text-box p + p { margin-top: 1em; }
    .sec-m-company .cover { position: static; opacity: 1; height: 400px; }
    .sec-m-company .cover .inner { opacity: 1; }
    .sec-m-company .cover-01.none, .sec-m-company.active .cover-01.none { opacity: 1; z-index: 1; }
    .sec-m-company .slide.cover { transform: translateY(0); }
    .icon-scroll { display: none; }
    #fullpage .sec-m-about { min-height: initial; height: auto; padding: 60px 0; }
    .ani-counter { position: static; margin-top: 40px; }
    .sec-m-about .inner.aos-animate .text-bottom { animation: none; }
    .sec-m-about .inner.aos-animate .ani-counter { position: static; opacity: 1; visibility: visible; transform: none; transition: none; }
    .sec-m-about .inner.aos-animate .ani-counter > li .num .box { animation: counter 1.6s 1.6s cubic-bezier(.21, .11, .07, 1) both; }
    .ani-counter > li .num { font-size: 40px; }
    #fullpage .sec-m-product { min-height: initial; }
    .sec-m-product .inner-box { padding-top: 60px; }
    .m-product__list { margin-top: 40px; }
    .m-product__list > li { height: 300px; }
    .m-product__list > li .title { font-size: 20px; }
    .m-product__list > li:hover .title { font-size: 24px; }
    .m-product__list > li .btn-more { margin: 30px auto 0; }
    .sec-m-contact { height: 700px; margin-top: 60px; }
    .m-contact__box .text { font-size: 18px; }
    .sec-m-partners { padding-top: 120px; }
    .marquee { gap: 100px; }
    .marquee + .marquee { margin-top: 60px; }
    .marquee .marquee__list { gap: 100px; }
    .marquee .marquee__list > li { transform: scale3d(0.8, 0.8, 0.8); }
    .sec-m-partners .footer { position: static; }

    /* mo-ani */
    .sec-m-company .cover .inner p { transform: translateY(100%); clip-path: inset(0 0 100% 0); }
    .sec-m-company .cover.aos-animate .inner p { animation: textClipUp 0.4s 0.1s ease-out both; }
    .sec-m-company .cover-01.aos-animate .inner p:nth-child(2) { animation: textClipUp 0.4s 0.3s ease-out both; }
    .sec-m-company .slide .inner[data-aos] { transform: translate(-40px, -50%); opacity: 0; transition: 0.6s; }
    .sec-m-company .slide .inner.aos-animate { transform: translate(0, -50%); opacity: 1; }

    /* intro */
    .intro .logo-box svg { width: 300px; }
}
@media screen and (max-width:1024px) {
    .sec-m-about .inner.aos-animate .text-bottom { margin-top: 40px; }
    .sec-m-company .slide .text-box { margin-top: 30px; }
    .ani-counter { gap: 20px 10px; }
    .ani-counter > li { width: calc(50% - 5px); height: auto; justify-content: flex-start; background-color: #111; padding: 25px 10px; }
    .ani-counter > li .hover-cover { position: static; height: auto; margin-top: 20px; padding: 0; opacity: 1; visibility: visible; background-color: transparent; }
    .ani-counter > li .hover-cover .title { display: none; }
    .ani-counter > li .hover-cover ul { margin-top: 0; }
    .ani-counter > li .title { min-height: 2.6em; }
    .ani-counter > li .num { font-size: 30px; }
    .sec-m-about .text-bottom > p > br:not(.fixed-br) { display: none; }
    .m-product__list { flex-wrap: wrap; }
    .m-product__list > li {flex: none; width: 50%; }
    .m-product__list > li .title { bottom: 100%; font-size: 24px; }
    .m-product__list > li:hover .title { font-size: 24px;}
    .m-product__list > li .btn-more { opacity: 1; }
    .m-product__list > li .box { transform: translateY(76.8%); }
    .sec-m-contact { height: 600px; }
    .sec-m-contact .bg__wrap {display: none; }
    .m-contact__box .title, .m-contact__box .text { transform: none; opacity: 1; }
    .m-contact__box .btn-more { opacity: 1; }
    .m-contact__box:nth-child(1) { background: url("/img/main/m_contact_bg_01.jpg") no-repeat center center/cover; }
    .m-contact__box:nth-child(2) { background: url("/img/main/m_contact_bg_02.jpg") no-repeat center center/cover; }
    .m-contact__box:nth-child(1)::after { display: none;}
    .sec-m-partners { padding-top: 60px; }
    .marquee { gap: 50px; }
    .marquee + .marquee { margin-top: 40px; }
    .marquee .marquee__list { gap: 50px; }
    .marquee .marquee__list > li { transform: scale3d(0.6, 0.6, 0.6); }
}
@media screen and (max-width:768px){
    .swiper-opt__area .swiper-pagination-bullet { font-size: 14px; }
    .ani-counter > li { width: 100%; }
    .ani-counter > li .title { min-height: initial; font-size: 18px; }
    .ani-counter > li .hover-cover ul { font-size: 14px; }
    .m-product__list > li .title,.m-product__list > li:hover .title { font-size: 20px; }
    .m-product__list > li .btn-more { margin: 20px auto 0; }
    #fullpage .sec-m-contact { height: auto; min-height: initial; }
    .sec-m-contact .inner-box { flex-direction: column; }
    .m-contact__box { width: 100%; height: 300px; justify-content: flex-start; text-align: left; }
    .m-contact__box .text-box { display: flex; flex-direction: column; align-items: flex-start; }
    .m-contact__box .text { margin-top: 1.3em; font-size: 16px; }
    .m-contact__box .btn-more { margin: 30px 0 0;}

    /* intro */
    .intro .logo-box svg { width: 230px; }
}

@media screen and (max-height: 400px) {
    .visual-swiper .swiper-slide .inner { bottom: 80px; }
    .progress-bar { bottom: 50px; }
}