/*按钮的区域*/

.BtnArea {
    height: 50%;
    padding: 20px 0;
    transform: translateY(30px); /* 初始向下偏移 */
}

    .BtnArea button {
        margin-left : 40px;
        position: relative;
        font-size: 70px;
        color: white;
        background: transparent;
        border: none;
        cursor: pointer; 
        box-sizing: border-box;
        font-family: 'Minion Pro' ;
        width: 100%;
        height: 70%;       /*修改按钮大小*/
        overflow: visible; /* 允许伪元素溢出 */
        display: flex;
        align-items: flex-end; /* 垂直靠下 */
        justify-content: center; /* 水平居中 */
        padding-bottom: 10px; /* 可选：给点底部间距 */
    }

        /* 下边线动画 */
        .BtnArea button::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: -50%;
            height: 3px; /*线粗*/
            width: 150%;
            background: white;
            transform: scaleX(0);
            transform-origin: left; /*从哪边出来的*/
            opacity: 0; /*透明度*/
            transition: transform 0.4s ease, opacity 0.4s ease; /*出现时间*/
        }

        /* 悬浮时展开 */
        .BtnArea button:hover::after {
            opacity: 1; /* 变成不透明 */
            transform: scaleX(1); /* 缩回来形成动画感 */
        }





    /*按钮*/
    /*.BtnArea button {
        position: relative;*/ 
        /*z-index: 1;
        overflow: visible;
        width: 90%;
        height: 90%;
        font-size: 54px;
        color: white;
        background: rgba(0, 0, 0, 0);
        border: none;
        cursor: pointer;
        box-sizing: border-box;
        font-family: branch_zystoo;
        transition: color 0.3s;
    }*/

        /*按钮悬停效果*/
        /*.BtnArea button:hover {
            background: rgb(128, 128, 128,0);
        }*/

        /* 伪元素生成边框 */
        /*.BtnArea button::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 3px solid white;
            border-radius: 12px;
            opacity: 0;
            transform: scale(1.2);*/ /* 稍微放大一点开始 */
            /*transition: opacity 0.3s ease, transform 0.3s ease;
            z-index: -1;*/ /* 放在按钮后面 */ /*相当于图层*/
        /*}*/

        /* 悬停时动画触发 */
        /*.BtnArea button:hover::after {
            opacity: 1;
            transform: scale(1);*/ 
        /*}*/