/* header 的漢堡按鈕（外框需求保留） */
.humber {
    position: fixed;
    top: 6%;
    left: unset;
    right: 5%;
    z-index: 9999;
}

.humber::before,
.humber::after {
    background-color: #fff;
}

.humber.active::before,
.humber.active::after {
    background-color: #fff;
}

/* 右下角回頂端 */
.scrollTop {
    position: fixed;
    bottom: 30%;
    right: 6%;
    z-index: 1001;
    cursor: pointer;
    text-align: center;
    display: none;
}

.scrollTop .circle {
    width: 86px;
    height: 86px;
    border: 1px solid #0f2c41;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
}

.scrollTop .circle::before {
    content: '';
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 2.9vh;
    background-color: #fff;
    opacity: 0;
    z-index: 4;
    transition-delay: .2s;
    transition: all .5s ease-in-out;
}

.scrollTop:hover .circle::before {
    top: 0%;
    opacity: 1;
    transition-delay: .3s;
    transition: all .5s ease-in-out;
}

.scrollTop .circle::after {
    content: "";
    position: absolute;
    top: 200%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #0f2c41;
    transform: translate(-50%, -50%);
    z-index: 2;
    transition: all .5s ease-in-out;
}

.scrollTop:hover .circle::after {
    top: 50%;
    transition: all .5s ease-in-out;
}

.scrollTop .arrow {
    position: absolute;
    top: -40%;
    left: 50%;
    width: 9px;
    height: 78px;
    transform: translateX(-50%);
    z-index: 1;
}

.scrollTop p {
    color: #0f2c41;
    font-size: 1rem;
    letter-spacing: 2px;
    font-family: "Roboto", sans-serif;
    padding-top: 5%;
    transform: translateY(0%);
    transition: all .5s ease-in-out;
    z-index: 5;
}

.scrollTop:hover p {
    color: #fff;
    transform: translateY(-200%);
    transition: all .5s ease-in-out;
}

/* 右下角 logo */
section.wrapper .enterpriselogo {
    position: fixed;
    bottom: 4%;
    right: 5%;
    width: 12.032vw;
    z-index: 1001;
}

section.banner {
    width: 100%;
    height: 118.551vh;
    background-image: url(../images/image/enterprise/banner.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

/* overlay 標題（左上角文字） */
.banner h3.title {
    position: absolute;
    top: 5%;
    left: 4%;
    z-index: 30;
    color: #0f2c41;
    font-size: 1.875rem;
    letter-spacing: 0.4em;
    line-height: 2.216;
    font-weight: 400;
}

/* overlay 大字（PROJECT） */
.banner .enterpriseTxt {
    font-size: 8.25rem;
    font-family: "Roboto", sans-serif;
    letter-spacing: 24px;
    line-height: 100%;
    color: #fff;
    border-left: 6px solid #d7ec66;
    padding-left: 2%;
    position: absolute;
    left: 4.5%;
    bottom: 43.3%;
    z-index: 30;
}

/* page01 */
.page01 {
    height: 118.551vh;
    padding: 10% 0%;
    padding-top: 20%;
    background-image: url(../images/image/enterprise/page01_bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
}

.page01 .titleplate {
    display: none;
}

.page01 .pagepagination {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    -webkit-justify-content: flex-end;
    margin-bottom: 5%;
    padding-right: 5%;
}

.page01 .paginationArea {
    width: 15vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    text-align: right;
}

.page01 .paginationArea .swiper-counter span {
    font-size: 1.5rem;
    letter-spacing: 4.8px;
    font-family: "Roboto", sans-serif;
}

.page01 .paginationArea .swiper-counter .total {
    color: #c3d0d9;
}

.page01 .paginationArea .swiper-counter .current {
    color: #0f2c41;
}

.page01 .paginationArea .swiper-pagination {
    position: relative;
    bottom: unset;
    top: unset;
    text-align: right;
}

.page01 .paginationArea .swiper-pagination-bullet-active {
    background-color: #0f2c41;
}

.page01 .swiperArea {
    width: 95vw;
    margin: 0 auto;
}

.page01 .swiper-slide .typeCard {
    overflow: hidden;
}

.page01 .swiper-slide .typeCard .typeImg {
    width: 100%;
    height: 60vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    -webkit-justify-content: flex-end;
    -webkit-align-items: flex-start;
}

.page01 .swiper-slide .typeCard .typeImg .typeTextArea {
    width: 100%;
    padding: 5%;
    padding-top: 10%;
    padding-left: 20%;
}

.page01 .swiper-slide .typeCard .typeImg .typeTextArea .typeNum {
    font-size: 6.5rem;
    letter-spacing: 0.01em;
    line-height: 1;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    color: #d7ec66;
}

.page01 .swiper-slide .typeCard .typeImg .typeTextArea .typeTxt {
    border-top: 1px solid #fff;
    padding-top: 3%;
}

.page01 .swiper-slide .typeCard .typeImg .typeTextArea .typeTxt p,
.page01 .swiper-slide .typeCard .typeImg .typeTextArea .typeTxt p span {
    color: #fff;
}

.page01 .swiper-slide .typeCard .typeImg .typeTextArea .typeTxt .subtitle {
    font-size: 1.9375rem;
    letter-spacing: 0.4em;
    line-height: 2.239;
    font-weight: 600;
    text-align: right;
}

.page01 .swiper-slide .typeCard .typeImg .typeTextArea .typeTxt p.content,
.page01 .swiper-slide .typeCard .typeImg .typeTextArea .typeTxt p span {
    font-size: 1.25rem;
    letter-spacing: 0.2em;
    line-height: 1.65;
    font-weight: 500;
    text-align: right;
}

.page01 .swiper-slide .typeCard .typeImg .typeTextArea .typeTxt p span {
    display: block;
}

.page01 .swiper-slide .typeCard .typeicon {
    position: absolute;
    bottom: -0.1%;
    left: -0.1%;
    width: 100%;
    height: 40vh;
    background-color: #c3d0d9;
    clip-path: polygon(0 0, 0% 100%, 100% 100%);
    transition: all .5s ease-in-out;
}

.page01 .swiper-slide .typeCard:hover .typeicon {
    background-color: #d7ec66;
    transition: all .5s ease-in-out;
}

.page01 .swiper-slide .typeCard .typeicon .icon {
    width: 5vw;
    position: absolute;
    bottom: 10%;
    left: 10%;
}

/* page02 */
.page02 {
    padding: 10% 5%;
    padding-bottom: 20%;
    --step-height: 8vh;
    background-color: #283283;
}

.page02::before {
    content: "";
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 5vh;
    background-color: #d7ec66;
    border-radius: 0px 0px 50px 50px;
}

.page02 .plate {
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translateX(-50%);
    width: 85.9vw;
}

.page02 .arrowArea {
    display: flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    padding-right: 7.636%;
    margin-bottom: 8.541%;
}

.page02 .arrowArea .arrowBtnArea {
    width: 72vw;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    -webkit-justify-content: flex-end;
    -webkit-align-items: flex-end;
}

.page02 .arrowArea .arrowBtnArea p {
    font-size: 1.5rem;
    letter-spacing: 0.2em;
    margin-right: 1.5%;
    margin-bottom: 0.8%;
    color: #c3d0d9;
}

.page02 .arrowArea .arrowBtnArea .swiper-button-next,
.page02 .arrowArea .arrowBtnArea .swiper-button-prev {
    position: relative;
    right: unset;
    left: unset;
    width: 51px;
    height: 51px;
    border: 1px solid #fff;
    border-radius: 100%;
}

.swiper-button-next,
.swiper-button-prev {
    margin-top: 0;
    margin-right: 2%;
    top: unset;
}

.swiper-button-next {
    margin-right: 0%;
}

.page02 .arrowArea .arrowBtnArea .swiper-button-next,
.page02 .arrowArea .arrowBtnArea .swiper-button-prev {
    color: #fff;
}

.page02 .arrowArea .arrowBtnArea .swiper-button-next .swiper-navigation-icon,
.page02 .arrowArea .arrowBtnArea .swiper-button-prev .swiper-navigation-icon {
    height: 20px;
    width: 13px;
}

.page02 .arrowArea .arrowBtnArea .swiper-button-next .swiper-navigation-icon {
    right: -5%;
}

.page02 .arrowArea .arrowBtnArea .swiper-button-prev .swiper-navigation-icon {
    left: -5%;
}


.page02 .arrowArea .arrowBtnArea .swiper-button-next:hover,
.page02 .arrowArea .arrowBtnArea .swiper-button-prev:hover {
    background-color: #d7ec66;
    border: 1px solid #d7ec66;
    color: #0f2c41;
}

.page02 .Swiper02 {
    overflow: hidden;
}

.page02 .titleArea p {
    font-size: 1.875rem;
    letter-spacing: 12px;
    margin-bottom: 2.3%;
    color: #fff;
}

.page02 .titleArea h1.title {
    font-size: 4.0625rem;
    font-family: "Roboto", sans-serif;
    letter-spacing: 13px;
    font-weight: 400;
    padding-bottom: 5.316%;
    border-bottom: 1px solid #d7ec66;
    margin-bottom: 2.626%;
    color: #fff;
}

.page02 .titleArea h1.title span {
    font-size: 4.0625rem;
    font-family: "Roboto", sans-serif;
    letter-spacing: 13px;
    font-weight: 400;
    color: #fff;
}

.page02 .caseCard {
    width: 80%;
    height: 60vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin-bottom: 25%;
    transform: translateY(calc(var(--step) * var(--step-height)));
}

.page02 .caseCard .caseInfo {
    position: absolute;
    bottom: -0.1%;
    right: -0.1%;
    width: 100%;
    height: 25vh;
    background-color: #283283;
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
    overflow: hidden;
    text-align: right;
    padding-top: 20%;
    padding-right: 5%;
    transition: all .5s ease-in-out;
}

.page02 .caseCard .caseInfo::after {
    content: "";
    position: absolute;
    bottom: 0.1%;
    right: 5%;
    width: 10vw;
    height: 5px;
    background-color: #d7ec66;
}

.page02 .caseCard:hover .caseInfo {
    background-color: #d7ec66;
    transition: all .5s ease-in-out;
}

.page02 .caseCard .caseInfo .caseNum {
    font-size: 5.3125rem;
    letter-spacing: 0.01em;
    line-height: 1;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    color: #fff;
    transition: all .5s ease-in-out;
}

.page02 .caseCard .caseInfo .caseName {
    font-size: 1.5625rem;
    letter-spacing: 0.4em;
    line-height: 1.38;
    font-weight: 500;
    color: #fff;
    transition: all .5s ease-in-out;
}

.page02 .caseCard:hover .caseInfo .caseNum,
.page02 .caseCard:hover .caseInfo .caseName {
    color: #283283;
    transition: all .5s ease-in-out;
}

.scaleImg {
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 44, 65, .8);
    padding: 10% 0%;
    z-index: 999999;
    display: none;
}

.scaleImg .closeBtn {
    position: absolute;
    top: 0%;
    right: -7%;
    width: 2.5vw;
    cursor: pointer;
}

.scaleImg .imgArea {
    width: 50%;
    margin: 0 auto;
}

.scaleImg .imgArea .scaleimg{
    width: 100%;
    height: 49vh;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

@media screen and (max-width: 1920px) and (max-height: 945px) {
    section.banner {
        height: 116.587vh;
    }

    .page01 {
        height: 114.287vh;
    }

    .page01 .titleplate {
        width: 27.032vw;
    }

}

@media screen and (max-width: 1920px) and (max-height: 912px) {
    section.banner {
        height: 118.551vh;
    }

    .page01 {
        height: 118.551vh;
    }

    .page01 .titleplate {
        width: 27.032vw;
    }
}

@media screen and (max-width:1537px) {
    section.banner {
        height: 123.451vh;
    }

    .banner h3.title {
        left: 2%;
    }

    .page01 {
        height: 120.951vh;
    }

    .banner .enterpriseTxt {
        font-size: 5.95rem;
    }

    .page01 .swiper-slide .typeCard .typeImg .typeTextArea .typeNum {
        font-size: 4.5rem;
    }

    .page01 .swiper-slide .typeCard .typeImg .typeTextArea .typeTxt .subtitle {
        font-size: 1.5375rem;
    }

    .page01 .swiper-slide .typeCard .typeImg .typeTextArea .typeTxt p.content,
    .page01 .swiper-slide .typeCard .typeImg .typeTextArea .typeTxt p span {
        font-size: 1.125rem;
    }

    .page02 .arrowArea .arrowBtnArea p {
        margin-bottom: 1.3%;
    }

    .page02 .caseCard .caseInfo {
        padding-top: 17%;
    }

    .page02 .caseCard .caseInfo .caseNum {
        font-size: 4.3125rem;
    }

    .page02 .caseCard .caseInfo .caseName {
        font-size: 1.3625rem;
    }
}

@media screen and (max-width: 768px) {
    .humber {
        right: unset;
        left: 5%;
        top: 5%;
    }

    .scrollTop .circle {
        width: 28px;
        height: 28px;
    }

    .scrollTop p {
        font-size: 0.375rem;
        letter-spacing: 0.2em;
        line-height: 3.612;
    }

    .scrollTop:hover p {
        transform: translateY(-110%);
    }

    .scrollTop .circle::before {
        height: 1vh;
    }

    .scrollTop .arrow {
        width: 5px;
        height: 42px;
    }

    section.wrapper .enterpriselogo{
        width: 30vw;
    }

    section.banner {
        height: 100vh;
        background-image: url(../images/image/enterprise/banner_m.png);
    }

    .banner h3.title {
        top: 17%;
        left: 5%;
        font-size: 0.9375rem;
        letter-spacing: 0.4em;
        line-height: 2.361;
    }

    .banner .enterpriseTxt {
        bottom: 60%;
        font-size: 2.3125rem;
        letter-spacing: 0.075em;
        line-height: 1.01;
    }

    .page01 {
        height: auto;
        padding: 15% 0%;
        padding-top: 32%;
        background-image: unset;
    }

    .page01 .titleplate{
        display: block;
        position: absolute;
        top: 0%;
        left: 0%;
        width: 90%;
        z-index: 1;
    }

    .page01 .swiper-slide .typeCard .typeImg {
        height: 40vh;
    }

    .page01 .swiper-slide .typeCard .typeImg .typeTextArea .typeNum {
        font-size: 2.375rem;
        letter-spacing: 0.01em;
    }

    .page01 .swiper-slide .typeCard .typeImg .typeTextArea .typeTxt .subtitle {
        font-size: 0.75rem;
        letter-spacing: 0.4em;
        line-height: 2.173;
    }

    .page01 .swiper-slide .typeCard .typeImg .typeTextArea .typeTxt p.content,
    .page01 .swiper-slide .typeCard .typeImg .typeTextArea .typeTxt p span {
        font-size: 0.625rem;
        letter-spacing: 0.2em;
        line-height: 1.5;
    }

    .page01 .swiper-slide .typeCard .typeicon {
        height: 20vh;
    }

    .page01 .swiper-slide .typeCard .typeicon .icon {
        width: 25%;
    }

    .page02 {
        padding-top: 25%;
    }

    .page02 .arrowArea {
        padding-right: 0%;
    }

    .page02 .arrowArea .arrowBtnArea {
        width: 100%;
        position: absolute;
        top: 0%;
        right: 0%;
    }

    .page02 .arrowArea .arrowBtnArea p {
        font-size: 1.125rem;
        line-height: 100%;
        margin-bottom: 1%;
    }

    .page02 .caseCard {
        width: 100%;
        height: 35vh;
        transform: translateY(0);
    }

    .page02 .caseCard .caseInfo {
        height: 10vh;
    }

    .page02 .titleArea {
        width: 100%;
    }

    .page02 .titleArea p {
        font-size: 0.75rem;
        letter-spacing: 0.4em;
    }

    .page02 .titleArea h1.title {
        font-size: 1.25rem;
        letter-spacing: 0.2em;
    }

    .page02 .arrowArea .arrowBtnArea .swiper-button-next,
    .page02 .arrowArea .arrowBtnArea .swiper-button-prev {
        width: 24px;
        height: 24px;
    }

    .page02 .arrowArea .arrowBtnArea .swiper-button-next .swiper-navigation-icon,
    .page02 .arrowArea .arrowBtnArea .swiper-button-prev .swiper-navigation-icon {
        height: 10px;
        width: 10px;
    }

    .page02 .caseCard .caseInfo .caseNum {
        font-size: 1.5rem;
        letter-spacing: 0.01em;
    }

    .page02 .caseCard .caseInfo .caseName {
        font-size: 0.4375rem;
        letter-spacing: 0.4em;
        line-height: 1.399;
    }

    .scaleImg {
        justify-content: center;
        align-items: center;
        -webkit-justify-content: center;
        -webkit-align-items: center;
    }

    .scaleImg .imgArea {
        width: 70%;
    }

    .scaleImg .closeBtn {
        top: -2%;
        right: -11%;
        width: 7%;
    }
}