/*===== BANNER =====*/
    .banner{
        width:100vw;
        height:100vh;
        height:100lvh; 
        position: relative;
    }
    .banner .container-fluid-m{
        min-height:100vh;    
        min-height:100lvh; 
        display:flex;
        align-content:flex-end;
        padding-bottom:120px;
    }

    /* Chrome（Android）用 svh */
    html.use-svh .banner{
        height:100svh;
    }
    html.use-svh .banner .container-fluid-m{
        min-height:100svh;
    }

    /* banner-image & banner-text */
    .banner-image,.banner-text{
        align-self:flex-end;
        pointer-events: none;
        -webkit-user-drag: none;
    }
    /* banner-image */
    .banner-image{
        pointer-events: none;
        width:50%;
        z-index:10;
        display:inline;
        overflow: hidden;
    }
    .banner-image img{
        width:36%;
    }

    /* banner-text */
    .banner-text{
        display:flex;
        flex-direction:column;
        width:50%;
        z-index:10;
    }
    .banner-text .slogn{
        max-width:700px;
    }
    /* banner-text -logo */
    .banner-text .logo img{
        width:7vw;
        min-width:60px;
        float:right;
        right:10%;
        margin-bottom:clamp(10px, 2.2vw, 60px);
    }
    /* banner-text -p */
    .slogn-cn{
        font-size: clamp(24px, 2.2vw, 50px);
        font-weight:400;
        font-family:var(--content-font);
        margin-bottom:10px;
    }
    .slogn-en{
        /* font-size: clamp(36px, 5vw, 66px); */
        /* line-height:clamp(44px, 5vw, 74px); */
        font-size: clamp(32px, 5vw, 66px);
        line-height:clamp(34px, 5vw, 74px);
        font-weight:600;
        font-family:var(--en-font);
    }
    .slogn-en span {
        display: inline-block;
        white-space: nowrap;
    }
    .slogn .text-inner span.char {
        display: inline-block;
    }



    /* press icon */
    .press-icon{
        width:clamp(40px, 6vw, 50px);
        position:absolute;
        top:20%;
        right:20%;
        transform:rotate(-25deg);
        animation: swing 2s ease forwards;
        display:none;
    }
    @media (pointer: coarse) and (hover: none){
        /* .press-icon{display: block;opacity:0;} */
        .press-icon{ display: block; opacity: 0; animation-play-state: paused; }
        .press-icon.swing-go{ opacity: 1; animation-play-state: running; }
    }
    @keyframes swing {
        0%{transform:rotate(-25deg); }
        35%{ transform:rotate(25deg);}
        70%{transform:rotate(-25deg);}
        90%{transform:rotate(0deg);}
        100%{ transform:rotate(0deg);display:none;}
    }

    /* banner-cursor */
    .banner svg{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        pointer-events:none;
    }
    .banner svg path{
        fill:none;
        stroke-width:120;
        stroke-linecap:round;
        stroke-linejoin:round;
    }

    .drawingCursor {
        position: absolute; 
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1;
    }

    .drawingCursor path {
        fill: none;
        stroke-width: 120;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    @media (min-width:2100px){
        .banner svg path,.about svg path{
            stroke-width:180;
        }
    }
    @media (max-width:649px){
        .banner .container-fluid-m{
            flex-wrap:wrap;
        }
        .banner-image{
            width:100%;
        }
        .banner-image img{
            width:24%;
        }
        .banner-text{
            width:100%;
        }
        .banner-text .slogn{
            /* max-width:60vw; */
            max-width:50vw;
            margin-top:30px;
            order:1;
        }
        .banner-text .logo{
            order:2;
        }
        /* banner-cursor */
        .banner svg path,.about svg path{
            stroke-width:80;
        }
    }
    @media (max-width:539px){
        .banner .container-fluid-m{padding-bottom:40px;}
        .press-icon{
            top:20%;
            right:16%;}
            
    }
    @media (max-width:450px){
        .banner-image img{
            width:22%;
        }
            
    }
   
    /*===== GALLERY =====*/
    .gallery-windows{
        width:100vw;
        height:100vh;
        background-color:transparent;
    }
    .sticky-inner {
        position:fixed;
        top:0;
        left:0;
        width: 100%;
        height:100vh;
        overflow: hidden;
        /* background-image: url(../images/sticky-bg.webp); */
        /* background-size: cover; */
    }
    .sticky-inner .sticky-bg{
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    .sticky-inner .sticky-words{
        position:absolute;
        top:0;
        left:50%;
        transform:translateX(-50%);
        width:auto;
        height:99%;
        opacity:0.8;
    }
    .sticky-inner .boy,
    .sticky-inner .girl {
        position: absolute;
        bottom:-10%;
        width: 50%;
        height: auto;
    }

    .sticky-inner .boy {
        left: -6%;
        z-index: 1;
    }

    .sticky-inner .girl {
        right: -6%;
    }

    /* 內層圖 */
    .sticky-inner .boy-img,
    .sticky-inner .girl-img {
        display: block;
        width: 100%;
        height: auto;
    }

    .sticky-inner .boy-img {
        /* transform-origin: right top; */
        transform-origin: right bottom;
    }

    .sticky-inner .girl-img {
        /* transform-origin: left top; */
        transform-origin: left bottom;
    }

    /* bird */
    .sticky-inner .boy .bird {
        position: absolute;
        top: 24%;
        left: 5%;
        z-index: 2;
        width: 45%;
        height: auto;
    }
    @media (orientation:landscape) and (max-width:1400px) and (min-height:820px){
        .sticky-inner .boy,
        .sticky-inner .girl{
            bottom:0;
            width: 60%;
        }
    }
    @media (orientation: portrait){
        .sticky-inner .sticky-words{
            width:auto;
            height:46%;
            top:10%;
        }
        .sticky-inner .boy,
        .sticky-inner .girl{
            width:70%;
        }
        .sticky-inner .boy .bird{opacity:0;}
    }

     @media (max-width:450px) and (orientation: portrait){
        .sticky-inner .sticky-words{
            width:auto;
            height:34%;
            top:10%;
        }
        .sticky-inner .boy,
        .sticky-inner .girl{
            width:100%;
            bottom:0;
        }
        .sticky-inner .boy .bird{opacity:0;}
        .sticky-inner .boy{
            left:-30%;
        }
        .sticky-inner .girl{
            right:-30%;
        }
    }


    /*===== SECTION =====*/
    /* reveal text  */
    .line-parent {
        display: block;
        overflow: hidden;
    }
    .split-line {
        display: inline-block;
    }

    /* rolling text */
    .r-inner {
        display: flex;
        flex-direction: column-reverse;
    }


    /*===== about =====*/
    .about{
        position: relative;
        padding-top:100px;
        padding-bottom:100px;
        min-height:100vh;
        display:flex;
        align-items:center;
    }
    .about .drawingCursor {
        z-index: 0; 
    }
    .about .container-fluid-m {
        position: relative;
        z-index: 1; 
    }
    .about .label{
        margin-bottom:60px;
    }
    .about .title .r-text{
        font-size: clamp(5rem, 8vw, 12rem);
        font-weight:700; 
        display:flex;
        overflow:hidden;
        height:clamp(5rem, 8vw, 12rem);   
    
    }
    .r-inner {
        display: inline-flex;
        flex-direction: column;
        height: 300%; /* repeatCount * 100% */
    }

    .r-letter {
        display: inline-block;
        line-height: 1;
        flex-shrink: 0;
        height: calc(100% / 3);  /* 100% / repeatCount */
    }

    .about-info{
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        margin-top:10rem;
    }
    .about-info .logo,.about-info .content{
        grid-column: span 4;
    }
    .about .logo{
        width:6vw;
        min-width:60px;
        pointer-events: none;
        -webkit-user-drag: none;
    }
    .about .content-tw{
        font-size: clamp(1.2rem, 1.4vw, 2rem);
        margin-bottom:1.5rem;
        line-height:1.55;
    }
    .about .content-en{
        font-size: clamp(1.1rem, 1vw, 1.5rem);
        color:var(--color-gray);
        font-family:var(--en-font);
    }

    @media (max-width:760px){
        .about-info{
            margin-top:8rem;
        }
        .about-info .logo,.about-info .content{
            grid-column: span 8;
        }
        .about-info .logo{
            margin-bottom:30px;
        }
    }
    @media (max-width:665px) {
        .about .title .r-text{
            font-size:10vw;
            height:10vw;
        }
    }


    @media (max-width:348px){
        .about .title .r-text{
            font-size:9.8vw;
            height:9.8vw;
        }

    }



    /*===== WORKS =====*/
    .home-works{
        position: relative;
        padding-bottom:100px;
    }
    .home-works .block-line{
        transform-origin: left center;
        display: block;
    }   
    .home-works .label{
        margin-top:100px;
        margin-bottom:60px;
    }
    .home-works .tle-inner{
        display:flex;
        justify-content:space-between;
        align-items:flex-end;
        flex-wrap:wrap;
        margin-bottom:60px;
    }
    .home-works .title{
        font-size: clamp(5rem, 8vw, 12rem);
        line-height:1;
        font-weight:600; 
    }

    .home-works .row {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        gap: 1.5vw;
    }
    .home-works .col{
        margin-bottom:10rem;
        will-change: transform, opacity;
    }
    .home-works .col:is(:nth-child(1), :nth-child(4), :nth-child(5)){
        grid-column: span 5;
    }
    .home-works .col:is(:nth-child(2), :nth-child(3), :nth-child(6)){
    grid-column: span 3;
    }

    .home-works .col a {
        overflow: hidden; 
    }

    .home-works .work-image{
        aspect-ratio: 1 / 0.61;
        overflow: hidden;
    }
    .home-works .work-image img,.home-works .work-image video{
        position: absolute;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
            object-fit: cover;
        transition:transform 0.5s ease-in-out;
    }

    .home-works .work-image:hover img,
    .home-works .work-image:hover video{
        transform:scale(1.05);
    }
    .home-works .work-tle{
        font-family:var(--content-font);
        font-weight:400;
        font-size:var(--font-size-lg);
        margin:12px 0;
    }
    .home-works .work-label{
        display:flex;
        flex-wrap:wrap;
        gap:10px;
    }
    .home-works .work-label li{
        border:1px solid var(--color-secondary);
        /* padding:1.5px 6px; */
        padding:2px 10px;
        border-radius:20px;
        transition:all 0.2s ease;
    }

    @media (max-width:767px) {
    .home-works .col:is(
        :nth-child(1),
        :nth-child(2),
        :nth-child(3),
        :nth-child(4),
        :nth-child(5), 
        :nth-child(6)){
            grid-column: span 8;
            margin-bottom:5rem;
        }
        
    }

    @media (max-width:665px) {
        .home-works .title{
            font-size:10vw;
        }
    }

    @media (max-width:348px){
        .home-works .title{
            font-size:9.8vw;
        }
        .home-works .underline-btn{
            font-size:1.65rem;
        }
    }

    /*===== SERVICES =====*/
    .services{
        position: relative;
        /* padding-bottom:12rem; */
    }

    /* services title */
    .services .title{
        padding-bottom:10rem;
    }

    .services .title .r-text {
        font-size: clamp(3.2rem, 12vw, 13rem);
        font-weight: 700;
        line-height: 1;
        display: flex;
        justify-content: center;
        overflow: hidden; 
        height:clamp(3.2rem, 12vw, 13rem);
    }

    /* services items */
    .services-items{
        display:flex;
        justify-content:flex-end;
    }
    .services-items ul{
        width:100%;
    }
    .services-items li{
        position: relative;
        padding-bottom:8px;
        overflow: hidden;
    }


    .services-items li:not(.first-li){
        margin-top:3rem;
    }
    .service-item{
        display:flex;
        justify-content:space-between;
        align-items:flex-end;
    }
    .service-name{
        font-size: clamp(1.5rem, 1.5vw, 2.2rem);
        font-family: var(--content-font);
        color:var(--color-secondary);
        font-weight:400;
        z-index: 1; 
    }
    .service-name-en{
        font-size: clamp(1.1rem, 1vw, 1.3rem);
        font-family:var(--en-font);
        margin-left:0.8rem;
        color:var(--color-gray);
        display:none;
    }
    .services-items li .more{
        font-size: clamp(1rem, 0.9vw, 1.6rem);
    }
    .services-items li .overlay,.services-items li .overlay-pin {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 1px;
        width: 100%;
        background: #6b6767;
        transform: scaleX(0);
        transform-origin: right center;
    }
    .services-items li .overlay-pin {
        background:#cecece;
    }

    .item-img-wrap {
        position: fixed;
        top: 0; left: 0;
        width: 19vw;
        height: auto;
        aspect-ratio: 4 / 2.5;
        pointer-events: none;
        opacity: 0;
        z-index: 20;
        overflow: hidden; 
    }

    .item-img-inner {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
    }

    @media (max-width:509px){
        .services-items li:not(.first-li){
            margin-top:2rem;
        }
    }
    @media (min-width:510px){
        /* services items */
        .service-name-en{
            display:inline;
        }
    }
    @media (min-width:700px){
        .services-items ul{
            width:72%;
        }
    }
    @media (min-width:1024px) {
        .services{
            padding-bottom:14rem;
        }
    }

    /*===== MARQUEE =====*/
    .marquee {
        padding-top:12rem;
        position: relative;
        padding-bottom:10rem;
        display: inline-block;
        white-space: nowrap;
        font-size: clamp(3rem, 7vw, 10rem);
        will-change: transform;
    }

    .marquee span:not(.rolling) {
        display: inline-block;
    }
    .rolling {
        display: inline-block;
        -webkit-animation: spin 8s linear infinite;
                animation: spin 8s linear infinite;
        transform-origin: 50% 50%;
    }
    @-webkit-keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }