@charset "utf-8";

/* main common */
.main {}
.main section {
    position: relative;
}

.main .section-head {}
.main .section-head .h2 {}
.main .section-head .desc {
    font-size: 2rem;
    color: var(--sec-black);
}




.main .home {}
.main .section-visual {
    background: #000;
    position: relative;
}
.main .section-visual .main-visual {
    height: 100dvh;
    width: 100%;
}
.main .section-visual .main-visual .mVideo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main .section-visual .visual-textset {
    position: absolute;
    z-index: 1;
    color: #fff;
    bottom: 8rem;
    /* display: flex; */
    /* justify-content: space-between; */
    left: 0;
    right: 0;
    align-items: flex-end;
}
.main .section-visual .visual-textset .inner {
    display:flex;
    justify-content:space-between;
    align-items: flex-end
}
.main .section-visual .visual-textset .copy {
    font-size: 7.2rem;
    overflow: hidden;
}
.main .section-visual .visual-textset .sub-element {
    font-size: 1.6rem;
}


.main .section-majorPrd {
    padding: 10rem 0 15rem;
    overflow:hidden
}
.main .section-majorPrd .main-prd {
    position: relative;
}
.main .section-majorPrd .main-prd .h2 {
    position: absolute;
    top: 10rem;
    z-index: 2;
    left: 16rem;
    max-width: 160rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 95%;
}
.main .section-majorPrd .main-prd .swiper {}
.main .section-majorPrd .main-prd .swiper .swiper-wrapper {}
.main .section-majorPrd .main-prd .swiper .swiper-wrapper .swiper-slide {
    overflow: hidden;
}
.main .section-majorPrd .main-prd .main-prd-slide {}
.main .section-majorPrd .main-prd .main-prd-slide .prdtext {
    position: absolute;
    top: 26rem;
    left: 16rem;
    z-index: 1;
    max-width: 160rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 95%;
}


.main .section-majorPrd .main-prd .main-prd-slide .prdtext .prdname {
    font-size: 3.6rem;
    font-weight: 600;
}
.main .section-majorPrd .main-prd .main-prd-slide .prdtext .desc {
    color: var(--sec-black);
    margin-top: 2rem;
    font-size: 1.8rem;
}
.main .section-majorPrd .main-prd .main-prd-slide .prdtext .viewbtn {
    /* font-size: 1.6rem;
    display: inline-block;
    padding: .8rem 4rem;
    border: 1px solid var(--sec-black);
    border-radius: .4rem;
    transition: all .3s; */
    margin-top: 4.8rem;
}
.main .section-majorPrd .main-prd .main-prd-slide .prdimg {width: 95%;margin: 0 auto;max-width: 192rem;}
.main .section-majorPrd .main-prd .main-prd-slide .swiper-slide[data-swiper-slide-index="5"] .prdimg {width: 100%;margin: 0 auto;}
.main .section-majorPrd .main-prd .main-prd-slide .prdimg > img {
    /* width: 95%; */
    /* margin: auto; */
}
.main .section-majorPrd .main-prd .main-prd-slide .swiper-btn-wrap { 
    display: inline-flex;
    position: absolute;
    bottom: 10rem;
    left: 16rem;
    z-index:1;
    gap: 10px;
    max-width: 160rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 95%;
}
.main .section-majorPrd .main-prd .main-prd-slide .swiper-btn-wrap .swiper-btn {
    border: 1px solid #333;
    border-radius: 50%;
    width: 6.8rem;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.25;
    transition: all .3s;
}
.main .section-majorPrd .main-prd .main-prd-slide .swiper-btn-wrap .swiper-btn .ic::before {
    width:24px;
    height:24px
}
.main .section-majorPrd .main-prd .main-prd-slide .swiper-btn-wrap .btn-prev {}
.main .section-majorPrd .main-prd .main-prd-slide .swiper-btn-wrap .btn-next .ic::before {
    transform:rotate(180deg)
}


.main .section-majorPrd .main-prd .main-prd-slide .prdtext > div {
    position:relative;
    transform: translate(0,10rem);
    transition-duration: .5s;
    transition-delay: 0.5s;
    transition-property: transform, opacity;
    opacity: 0;
}

.main .section-majorPrd .main-prd .main-prd-slide .prdtext .viewbtn {
    position:relative;
    transform: translate(0,10rem);
    transition-duration: .5s;
    transition-delay: .4s;
    transition-property: transform, opacity;
    opacity: 0;
}

.main .section-majorPrd .main-prd .main-prd-slide .swiper-slide-active .prdtext > div,
.main .section-majorPrd .main-prd .main-prd-slide .swiper-slide-active .prdtext .viewbtn {
    transform: translate(0,0);
    opacity: 1;
}


.main .section-category {}

.main .section-category .category-container {
    margin-top: 8rem;
}
.main .section-category .category-container .category-grid {
    display: flex;
    align-items: stretch;
}
.main .section-category .category-container .category-grid .category-column {
    width: 50%;
    position: relative;
}
.main .section-category .category-container .category-grid .category-column .category-copy-wrap {
    display: flex;
    height: 100vh;
    justify-content: flex-start;
    align-items: center;
}
.main .section-category .category-container .category-grid .category-column .category-copy-wrap .category-copy {
    flex-flow: column;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    max-width: 58rem;
    padding-right: 10%;
    line-height: 1.5;
}
.main .section-category .category-container .category-grid .category-column .category-copy-wrap .category-copy .h5 {}
.main .section-category .category-container .category-grid .category-column .category-copy-wrap .category-copy .desc {
    font-size: 1.8rem;
    color: var(--sec-black);
    margin: 2rem 0 4rem;
    /* max-width: 580px; */
    /* padding-right: 20%; */
}
.main .section-category .category-container .category-grid .category-column .category-copy-wrap .category-copy .viewbtn {}



.main .section-category .category-container .category-grid .category-column .category-img-wrap {
    height: 80vh;
    position: sticky;
    top: 14vh;
    overflow: hidden;
}
.main .section-category .category-container .category-grid .category-column .category-img-wrap > img {
    pointer-events: none;
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}

.main .section-category .category-container .category-grid .category-column .category-img-wrap .cat-img1 {
    display: inline-block;
    z-index: 4;
}
.main .section-category .category-container .category-grid .category-column .category-img-wrap .cat-img2 {z-index:3}
.main .section-category .category-container .category-grid .category-column .category-img-wrap .cat-img3 {z-index:2}
.main .section-category .category-container .category-grid .category-column .category-img-wrap .cat-img4 {z-index:1}


.category-img-wrap img {
  /* position: absolute;
  top: 0;
  left: 0; */
will-change: transform, opacity;
transform: translate3d(0px, 0px, 0px) scale3d(1.2, 1.2, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
transform-style: preserve-3d;
opacity: 0;
transition: opacity 0.5s ease, transform 0.5s ease;


}
.category-img-wrap img.active {
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    opacity: 1;
}



.section-rnd {
    padding-top: 180px;
    padding-bottom: 200px;
}
.section-rnd .section-head {}
.section-rnd .link-list {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
    margin-top: 6rem;
}
.section-rnd .link-list > li {}
.section-rnd .link-list > li > a {
    display: block;
    position: relative;
}
.section-rnd .link-list > li > a .img-wrap {
    position: relative;
}
.section-rnd .link-list > li > a .img-wrap > img {}
.section-rnd .link-list > li > a .img-wrap .overlay {
    position: absolute;
    inset: 0%;
    background: rgba(0,0,0,0.2);
    opacity: 0;
    transition: all .3s;
}
.section-rnd .link-list > li > a .text-wrap {
    position: absolute;
    display: flex;
    flex-direction: column;
    inset: 0;
    padding: 4rem;
    color: #fff;
    justify-content: space-between;
}
.section-rnd .link-list > li > a .text-wrap .tit  {
    font-size: 2.8rem;
    font-weight: 500;
}
.section-rnd .link-list > li > a .text-wrap .tit .num {
    font-size: 2rem;
    margin-right: 1rem;
    font-weight: 400;
}
.section-rnd .link-list > li > a .text-wrap .desc {
    font-size: 2rem;
    line-height: 1.45;
}


.section-global {
    overflow: hidden;
    color: #fff;
    background: #000;
    height: 100vh;
    padding: 180px 0;
}
.section-global .section-bg {
    position: absolute;
    inset: 0%;
    width: 100%;
    height: 100%;
}
.section-global .section-bg > img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.section-global .section-head .h2 {
    color: #fff;
}
.section-global .text {

font-size: 2.4rem;

margin-top: 80px;

line-height: 1.6;
}
.section-global .rolling {
    position: relative;
    margin-top: 140px;
}
.section-global .rolling .inner {
    z-index: 1;
}
.section-global .rolling::before,
.section-global .rolling::after {
    content: '';
    z-index: 2;
    position: absolute;
    top: 0;
    width: 13%;
    height: 100%;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 1) 46%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}
.section-global .rolling::before {
    left: 0;
}
.section-global .rolling::after {
    right: 0;
    transform: scaleX(-1);
}
.section-global .rolling .main-client-slider {
    overflow: visible;
}
.section-global .rolling .main-client-slider .swiper-wrapper {
    transition-timing-function: linear;
}
.section-global .rolling .main-client-slider .swiper-slide {
    width: 9.9vw;
    text-align: center;
}
.section-global .rolling .main-client-slider .swiper-slide > img {}


.section-contact {
    padding: 150px 0;
}
.section-contact .h3 {
    overflow:hidden;
}
.section-contact .contact-bg {
    text-align: center;
    opacity: 0.05;
}
.section-contact .textset {
    position: absolute;
    inset: 0%;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.section-contact .textset .h3 {}
.section-contact .textset .desc {
    font-size: 2rem;
    color: var(--sec-black);
    margin-top: 3rem;
    overflow: hidden;
}
.section-contact .textset .viewbtn {
    margin-top: 4.8rem;
}

/* ////////////// en ////////////// */

.en .main {
    font-weight:500
}

.en .main .section-majorPrd .main-prd .main-prd-slide .prdtext .desc {
    font-size:2rem;
    /* font-weight:400 */
}
.en .main .section-category .category-container .category-grid .category-column .category-copy-wrap .category-copy {
    line-height:1.3
}

.en .main .section-majorPrd .main-prd .main-prd-slide .prdtext .prdname {
    font-weight:500
}


@media (hover: hover) and (pointer: fine) {
    .main .section-majorPrd .main-prd .main-prd-slide .swiper-btn-wrap .swiper-btn:hover {
        opacity: 1;
    }
    .section-rnd .link-list > li > a:hover .img-wrap .overlay {
        opacity: 1;
    }
}

@media (min-width:1920px ) {
    .main .section-majorPrd .main-prd .main-prd-slide .prdimg {
        max-width:192rem
    }
}

@media (max-width : 1440px) {
    .main .section-majorPrd .main-prd .main-prd-slide .swiper-btn-wrap {
        bottom: 0
    }
    .main .section-majorPrd .main-prd .h2 {
        top:5rem
    }
    .main .section-majorPrd .main-prd .main-prd-slide .prdtext {
        top:21rem
    }
    .main .section-majorPrd .main-prd .main-prd-slide .prdimg {
        width:100%;
        margin-left:auto
    }
}

@media (max-width: 1200px)/* , (hover: none) and (pointer: coarse) */ {
    .main .section-visual .visual-textset {
        bottom:6rem
    }
    .main .section-visual .visual-textset .copy {
        font-size:6rem;
        line-height:1.1
    }
    .main .section-visual .visual-textset .sub-element {
        font-size:14px
    }

    .main .section-majorPrd .main-prd .main-prd-slide .prdtext .prdname {
        font-size:2.8rem
    }
    .main .section-majorPrd .main-prd .main-prd-slide .prdtext .desc {
        font-size:16px
    }
    .main .section-majorPrd .main-prd .main-prd-slide .prdtext {
        top:18rem
    }

    .main .section-majorPrd .main-prd .main-prd-slide .swiper-btn-wrap .swiper-btn {
        width:5.8rem;
    }
    .main .section-majorPrd .main-prd .main-prd-slide .swiper-btn-wrap .swiper-btn .ic::before {
        width:20px;
        height:20px
    }
    .main .section-head .desc {
        font-size:1.8rem
    }
    .main .section-category .category-container .category-grid .category-column .category-copy-wrap .category-copy .desc {
        font-size:1.6rem;
        margin: 1.2rem 0 2.4rem;
    }
    
    /* .section-rnd .link-list > li > a .text-wrap {
        padding:2.8rem
    } */
    .section-rnd .link-list > li > a .text-wrap .tit .num {
        font-size:1.8rem
    }
    .section-rnd .link-list > li > a .text-wrap .tit {
        font-size:2.4rem
    }
    .section-rnd .link-list > li > a .text-wrap .desc {
        font-size:1.8rem
    }

    .section-rnd .link-list {
        margin-top:4rem
    }

    .section-global .text {
        font-size:2rem
    }

    .section-contact .textset .desc {
        font-size: 1.8rem;
    }
}

@media (min-width:905px) {
    .main .section-category .category-container .category-grid .category-column .category-copy-wrap .mob-img {display:none}
}

@media (max-width:904px) {

    /* .header {
        border:1px solid red
    } */
    .main .section-visual .visual-textset .inner {
        flex-direction: column;
        align-items: stretch;
        gap: 2rem;
    }
    .main .section-visual .visual-textset .copy {
        font-size:4.8rem
    }
   .en .main .section-visual .visual-textset .copy {
        font-size:5.6rem
    }
    .main .section-visual .visual-textset .sub-element {
        /* text-align: right; */
    }


    .main .section-majorPrd .main-prd .h2 {
        position:static;
        /* font-size: 4.8rem; */
    }
    .main .section-majorPrd .main-prd .swiper .swiper-wrapper .swiper-slide {
    }
    .main .section-majorPrd .main-prd .main-prd-slide .prdimg {
        height: 48rem;
        width: auto;
        margin-right: auto;
        margin-left: unset;
    }
    .main .section-majorPrd .main-prd .main-prd-slide .prdtext {
        position: static;
        margin-top: 2rem;
}
    .main .section-majorPrd .main-prd .main-prd-slide .prdtext .prdname {
        font-size:2.2rem
    }
    .en .main .section-majorPrd .main-prd .main-prd-slide .prdtext .prdname {
        font-size:2.8rem
    }
    
    .main .section-majorPrd .main-prd .main-prd-slide .prdimg > img {
        object-fit: cover;
        height: 100%;
        object-position: right;
    }
    .main .section-majorPrd .main-prd .main-prd-slide .prdtext .desc {
        margin-top:1.2rem
    }

    .main .section-majorPrd .main-prd .main-prd-slide .prdtext .viewbtn {
        margin-top:2.8rem
    }
    .main .section-majorPrd .main-prd .main-prd-slide .swiper-btn-wrap .swiper-btn {
        width:4.8rem
    }
    .main .section-majorPrd .main-prd .main-prd-slide .swiper-btn-wrap {
        bottom: -2rem;
        justify-content: flex-end;
        gap: 8px;
        width: 80%;
    }

    .main .section-majorPrd {
        padding-bottom: 10rem;
    }

    .main .section-head .desc {
        font-size:16px
    }
    .main .section-category .category-container {
        margin-top:4rem
    }

    .main .section-category .category-container .category-grid {
        flex-direction: column;
    }
    .main .section-category .category-container .category-grid .category-column {
        width:100%
    }
    .main .section-category .category-container .category-grid .category-column .category-img-wrap {
        display:none
    }
    .main .section-category .category-container .category-grid .category-column .category-copy-wrap {
        flex-direction:column;
        height: unset;
        gap: 2.8rem;
        align-items: flex-start;
    }

    .main .section-category .category-container .category-grid .category-column .category-copy-wrap + .category-copy-wrap {
        margin-top:6rem
    }

    .main .section-category .category-container .category-grid .category-column .category-copy-wrap .category-copy {
        max-width:unset;
        padding: 0;
    }
    .main .section-category .category-container .category-grid .category-column .category-copy-wrap .category-copy .desc > br {
        display:none
    }

    .section-rnd {
        padding:100px 0
    }
    .section-rnd .link-list {
        grid-template-columns: repeat(1,1fr);
    }

    .section-global {
        height:auto;
        padding: 100px 0;
    }

    .section-global .text {
        font-size: 1.8rem;
        margin-top: 2rem;
    }
    .section-global .text br {
        display:none
    }

    .section-global .rolling {
        margin-top:10rem
    }
    .section-global .rolling .main-client-slider .swiper-slide {
        width:20vw
    }

    .section-contact {
        padding: 80px 0;
    }

    .section-contact .textset .desc {
        font-size:16px;
        margin-top: 2rem;
    }

    .en .main .section-majorPrd .main-prd .main-prd-slide .prdtext .desc {
        font-size:2rem
    }

}




@media (max-width:599px) {

    .main .section-majorPrd .main-prd .main-prd-slide .prdtext .prdname {
        font-size:1.8rem
    }
    .main .section-majorPrd .main-prd .main-prd-slide .prdtext .desc {
        font-size:1.4rem
    }
    .main .section-majorPrd .main-prd .main-prd-slide .prdimg {
        height: 65vw;
        margin-top: 20px;
    }

    .main .section-majorPrd .main-prd .main-prd-slide .swiper-btn-wrap {
        bottom: -4rem;
    }
    .main .section-majorPrd .main-prd .main-prd-slide .swiper-btn-wrap .swiper-btn {
        width:4rem
    }
    .main .section-majorPrd .main-prd .main-prd-slide .swiper-btn-wrap .swiper-btn .ic::before {
        width:16px;
        height:16px
    }
     .main .section-head .h2 {
         line-height:1.1
     }
    .main .section-head .desc {
        margin-top: 12px
    }
    .main .section-category .category-container .category-grid .category-column .category-copy-wrap {
        gap:2rem
    }
    .main .section-category .category-container .category-grid .category-column .category-copy-wrap .category-copy .desc {
        font-size:14px
    }
    .section-rnd .link-list > li > a .text-wrap {
        padding:2.4rem
    }
    .section-rnd .link-list > li > a .text-wrap .tit {
        font-size:2rem
    }
    .section-rnd .link-list > li > a .text-wrap .desc {
        font-size: 1.6rem;
        line-height:1.35
    }
    .section-rnd .link-list > li > a .text-wrap .tit .num {
        font-size:1.4rem
    }

    .section-global .text {
        font-size:1.6rem;
        margin-top: 2.8rem;
    }
    .section-global .rolling {
        margin-top:6rem
    }
    .section-global .rolling .main-client-slider .swiper-slide {
        width:44vw
    }
    .section-contact .h3 {
        line-height:1.3
    }

    .section-contact .textset .desc {
        font-size:1.4rem
    }
    .main .section-visual .visual-textset .copy {
        font-size:4rem
    }
    .main .section-visual .visual-textset .inner {
        gap:4rem
    }
    .main .section-visual .visual-textset {
        bottom:4rem
    }

    /* //////////////////// en //////////////////// */

    .en .main .section-majorPrd .main-prd .main-prd-slide .prdtext .prdname {
        font-size: 2.4rem;
    }


    .en .main .section-majorPrd .main-prd .main-prd-slide .prdtext .desc,
    .en .main .section-head .desc,
    .en .main .section-category .category-container .category-grid .category-column .category-copy-wrap .category-copy .desc,
    .en .section-rnd .link-list > li > a .text-wrap .desc,
    .en .section-global .text,
    .en .section-contact .textset .desc {
        font-size: 1.8rem;
        font-weight: 400;
        letter-spacing: 0.2px;
    }

    .en .main .section-category .category-container .category-grid .category-column .category-copy-wrap .category-copy .h5 {
        font-size:2.4rem
    }
    .en .main .section-category .category-container .category-grid .category-column .category-copy-wrap .category-copy .desc {
        line-height: 1.4;
    }

   .en .main .section-visual .visual-textset .copy {
        font-size:4.4rem
    }

    .en .section-rnd .link-list > li > a .text-wrap .tit {
        font-size:2.2rem
    }

    .en .section-global .text {
        line-height:1.45
    }


    .en .main .section-majorPrd .main-prd .main-prd-slide .prdtext .desc > br,
    .en .section-contact .textset .desc br,
    .en .main .section-head .desc br {
        display:none
    }
}


@media (max-width:360px) {
    br {
        display:none
    }
}