@charset "UTF-8";
body {
    background-image: url(../images/progress/bg.jpg);
    -webkit-background-size: 100%;
    background-size: 100%;
    background-color: #d0d1cd;
    background-repeat: no-repeat;
    padding-top: 10%;
}

.ProgressBox {
    /*min-height: 90vh;*/
}

.ProgresContentBox {
    padding-top: 8%;
    padding-bottom: 30%;
}

.ProgresContentBox .titleBox {
    height: 100%;
    padding: 10% 15%;
}

.ProgresContentBox .titleBox h2 {
    padding-bottom: 30%;
}

.titleBox p {
    padding-top: 30%;
}

.titleBox p i {
    display: block;
    font-style: normal;
}

.ProgresContentBox .titleBox:before {
    content: '';
    border: 10px solid #dbc287;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0%;
    width: 150%;
    padding-top: 40%;

}

.CaseList {
    transform: translateX(-10%) translateY(50%);
}

.CaseList .item {
    text-align: center;
    padding: 10px;
    transform: translateY(0%);
    transition: all 0.3s;

}

.CaseList .item a {
    background-color: #fff;
    display: block;
    padding: 10px;

}
.CaseList .item:hover{
    transform: translateY(-30px);
    transition: all 0.3s;
}
.CaseTxt .caseName {
    padding: 10px 0;
}

.CaseTxt .caseName:before {
    content: '工程進度';
    text-align: center;
    display: block;
    font-size: 14px;
}

.CaseTxt .time {
    font-size: 10px;
}


@media(max-width: 767px) {
    .ProgressBox {
        padding-top: 10%;
    }

    .ProgresContentBox .titleBox:before {
        width: 100%;
        padding-top: 0;
        bottom: -50%;
    }

    .titleBox p {
        padding-top: 0%;
    }

    .ProgresContentBox .titleBox h2 {
        padding-bottom: 10%;
    }

    .CaseList {
        transform: none;
    }

    .CaseList .item {
        text-align: center;
        padding: 10px 15%;
    }
}

@media(max-width: 480px) {
    .ProgressBox {
        padding-top: 20%;
    }

    .CaseList .item {
        padding: 10px 10%;
    }
}