section.homemain{
    height: calc(100vh - 110px);
    min-height: 900px;

    centerwrap{
        padding-top: 220px;
    }


    /* svg */
    svg.home-main-pic{
        width: 55%;
        position: absolute;
        right: 40px;
        top: 70px;
        max-width: 870px;
        z-index: 1;

        g{
            /* outline: 1px solid red; */
        }

        /* 初始狀態：透明 + 下移 */
        .ani-map,
        .ani-tags,
        .ani-number,
        .ani-girl {
            opacity: 0;
            transform: translateY(40px);
            animation: fadeUp 0.6s ease-out forwards;
        }

        /* 各自延遲時間，控制進場順序 */
        .ani-map    { animation-delay: 0.1s; }
        .ani-girl   { animation-delay: 0.4s; }
        .ani-tags   { animation-delay: 0.7s; }
        .ani-number { animation-delay: 1s; }
       

    }

    .content{
        font-size: 19px;
        z-index: 2;
        text-align: left;
        margin-left: 50px;
        width: 42%;

        h2{
            color: #444444;
            font-size: 38px;
            letter-spacing: 2px;
            font-weight: 500;
        }
        h3{
            margin-block-start: 0em;
            margin-block-end: 0.4em;
            font-weight: 400;

            &.t1{
                color: #939393;
            }
            &.t2{
                color: #af9c4a;
            }
        }
        btn{
            border: 2px solid #000;
            padding: 10px;
            padding-left: 30px;
            padding-right: 30px;
            border-radius: 50px;
            margin-top: 30px;
            display: inline-block;
            cursor: pointer;
        }
    }

    .grid{
        background-image: url('/images/home/grid.png');
        height: 200px;
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 0;
        background-size: auto 350px;
    }

}


/* 定義動畫 */
@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}




@media screen and (max-width: 1240px) {

    /* homemain */
    section.homemain {
        centerwrap {
            padding-top: 65px;
        }
    }

    section.homemain {
        svg.home-main-pic {
            width: 90%;
            position: relative;
            right: 0px;
            top: 0px;
            max-width: 90%;
            z-index: 1;
        }
    }

    section.homemain {
        & .content {
            font-size: 14px;
            z-index: 2;
            text-align: left;
            width: auto;
            width: 90%;
            margin: auto;
            text-align: center;
            padding-bottom: 50px;

            h2 {
                font-size: 22px;
            }

            btn {
                border: 2px solid #000;
                padding: 10px;
                padding-left: 30px;
                padding-right: 30px;
                border-radius: 50px;
                margin-top: 10px;
                display: inline-block;
                cursor: pointer;
            }
        }

        
    }

    section.homemain {
        .grid {
            height: 123px;
            background-size: auto 277px;
        }
    }

    section.homemain {
        height: auto;
        min-height: auto;
    }

    

}