section.wrapper {
    margin-top: 110px;
    overflow: hidden;
}

.banner {
    margin-bottom: 17.061%;
}

/* banner */
.banner .innerImg {
    width: 100%;
    padding-top: 123%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.caseInfArea {
    margin-left: 2.5%;
}

.caseInfArea>.row {
    flex-direction: column;
    flex-wrap: nowrap;
    transform: translateY(2.1%);
}

.caseInfArea .caseTitleArea {
    margin-bottom: 87%;
}

.caseInfArea h1.caseTitle {
    margin-bottom: 12%;
}

.caseInfArea h1.caseTitle p {
    font-size: 2.1875rem;
    font-weight: 500;
    letter-spacing: 9.6px;
    line-height: 1.23;
    color: #5A5854;
}

.caseInfArea h1.caseTitle .EN {
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 400;
    font-size: 1.5625rem;
    letter-spacing: 7.2px;
    line-height: 1.64;
}

.caseInfArea .caseCotent {
    font-family: "Noto Serif TC", serif;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 5.6px;
    line-height: 2.11;
}

.caseInfArea .caseInfo h6.infoTitle {
    display: flex;
    border-bottom: 1px solid #d93630;
}

.caseInfArea .caseInfo h6.infoTitle p {
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 500;
    font-size: 1.5rem;
    letter-spacing: 4.8px;
    line-height: 2.46;
    color: #5A5854;
}


.caseInfArea .caseInfo h6.infoTitle span {
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 500;
    font-size: 1.5rem;
    letter-spacing: 4.8px;
    line-height: 2.46;
    color: #d93630;
}

.caseInfArea .caseInfo h6.infoTitle .info {
    margin-right: 5%;
}

.caseInfArea .caseInfo .infoList {
    display: flex;
    border-bottom: 1px solid #d93630;
}

.caseInfArea .caseInfo .infoList p {
    font-weight: 500;
    font-size: 1.5rem;
    letter-spacing: 4.8px;
    line-height: 2.46;
}

.caseInfo .infoList:last-child {
    border-bottom: 0px;
}

.caseInfArea .caseInfo .infoList .info {
    margin-right: 5%;
}

/* page01 */
.page01 {
    padding: 0% 2%;
    margin-bottom: 17.061%;
}

.page01 .topArea .row {
    justify-content: center;
    align-items: stretch;
    -webkit-justify-content: center;
    -webkit-align-items: stretch;
}

.page01 .topArea .imgArea {
    display: flex;
    /* 讓 col 以 flex 包裹 innerImg（可選）*/
    align-items: stretch;
}

.page01 .topArea .innerImg {
    width: 100%;
    padding-top: 62%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    flex: 0 0 auto;
}

.page01 .topArea .textArea {
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    padding-right: 2.1%;
}

.page01 .topArea .textArea h6,
.page01 .topArea .textArea p {
    margin: 0;
}

.page01 .topArea .textArea h6.infoTitle {
    flex: 0 0 auto;
    font-family: toppan-bunkyu-midashi-min-st, serif;
    font-weight: 900;
    font-style: normal;
    font-size: 1.75rem;
    letter-spacing: 5.6px;
    line-height: 2.57;
    color: #5A5854;
}

.page01 .topArea .textArea h6.infoTitle span {
    flex: 0 0 auto;
    font-family: toppan-bunkyu-midashi-min-st, serif;
    font-weight: 900;
    font-style: normal;
    font-size: 1.75rem;
    letter-spacing: 5.6px;
    line-height: 2.57;
    color: #d93630;
}

.page01 .topArea p.content {
    font-size: var(--fs);
    /* 24px */
    letter-spacing: 4.8px;
    /* ≈ 4.8px */
    line-height: var(--lh-mult);
    --fs: 1.5rem;
    --lh-mult: 2.46;
    --line-height: calc(var(--fs) * var(--lh-mult));
    --leading: calc(var(--line-height) - var(--fs));
    transform: translateY(calc(1 * (var(--leading) / 2)));
}

.page01 .bottomArea {
    margin-top: 17.061%;
}

.page01 .bottomArea .innerImg {
    width: 100%;
    padding-top: 66%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.swiper-button-next,
.swiper-button-prev {
    width: 3%;
}

/* page02 */
.page02 {
    padding: 0% 2%;
    margin-bottom: 17.061%;
}

.page02 h1.pageTitle {
    text-align: center;
    font-family: toppan-bunkyu-midashi-min-st, serif;
    font-weight: 900;
    font-style: normal;
    font-size: 1.75rem;
    letter-spacing: 5.6px;
    line-height: 2.57;
    margin-bottom: 3%;
}

.page02 h1.pageTitle span {
    font-family: toppan-bunkyu-midashi-min-st, serif;
    font-weight: 900;
    font-style: normal;
    font-size: 1.75rem;
    letter-spacing: 5.6px;
    line-height: 2.57;
    color: #d93630;
}

.page02 .lactionImg iframe {
    width: 100%;
    height: 88.3vh;
}

.casePervBtn {
    width: 100%;
    margin-top: 3%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    -webkit-justify-content: space-between;
    -webkit-align-items: center;
}

.casePervBtn .PrevBtn,
.casePervBtn .NextBtn {
    position: absolute;
    top: 0%;
    cursor: pointer;
}

.casePervBtn .prev,
.casePervBtn .next {
    width: 170px;
    padding: 5%;
    display: flex;
    align-items: center;
    -webkit-align-items: center;
    cursor: pointer;
}

.casePervBtn .PrevBtn {
    left: 0%;
}

.casePervBtn .NextBtn {
    right: 0%;
}

.casePervBtn .prev:hover,
.casePervBtn .next:hover {
    background-color: #5A5854;
}

.casePervBtn .prev.focus,
.casePervBtn .next.focus {
    background-color: #D5B7A2;
}

.casePervBtn .prev .arrow {
    transform: translateX(750%) translateY(-11%);
    transition: transform .5s ease-in-out;
}

.casePervBtn .prev:hover .arrow {
    transform: translateX(0%) translateY(-11%);
    transition: transform .5s ease-in-out;
}

.casePervBtn .next .arrow {
    transform: translateX(96%) translateY(-14%);
    ;
    transition: transform .5s ease-in-out;
}

.casePervBtn .next:hover .arrow {
    transform: translateX(855%) translateY(-14%);
    transition: transform .5s ease-in-out;
}

.casePervBtn .prev p,
.casePervBtn .next p {
    font-weight: 400;
    letter-spacing: 3.6px;
    font-size: 1.125rem;
    color: #5A5854;
}

.casePervBtn .prev .caseName,
.casePervBtn .next .caseName {
    opacity: 0;
    color: #fff;
    transition: all .5s ease-in-out;
}

.casePervBtn .prev .caseName,
.casePervBtn .prev .Btntxt {
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);

}

.casePervBtn .next .caseName {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
}

.casePervBtn .prev:hover .caseName,
.casePervBtn .next:hover .caseName {
    opacity: 1;
    transition: all .5s ease-in-out;
}

.casePervBtn .Btntxt,
.casePervBtn .Btntxt {
    opacity: 1;
    transition: all .5s ease-in-out;
}

.casePervBtn .prev:hover .Btntxt,
.casePervBtn .next:hover .Btntxt {
    opacity: 0;
    transition: all .5s ease-in-out;
}

@media screen and (max-width:1537px) {
    .caseInfArea h1.caseTitle p {
        font-size: 1.875rem;
    }

    .caseInfArea h1.caseTitle .EN {
        font-size: 1.5rem;
    }

    .caseInfArea .caseCotent {
        font-size: 1.5rem;
    }

    .caseInfArea .caseInfo h6.infoTitle p,
    .caseInfArea .caseInfo h6.infoTitle span {
        font-size: 1.25rem;
    }

    .page01 .topArea .textArea h6.infoTitle,
    .page01 .topArea .textArea h6.infoTitle span {
        font-size: 1.5rem;
    }

    .caseInfArea .caseInfo .infoList p {
        font-size: 1.25rem;
    }

    .page01 .topArea p.content {
        font-size: 1.25rem;
        margin-top: 19.3%;
    }

    .page02 h1.pageTitle,
    .page02 h1.pageTitle span {
        font-size: 1.5rem;
    }
}

@media screen and (max-width:1400px) {
    .caseInfArea h1.caseTitle p {
        font-size: 1.75rem;
    }

    .caseInfArea h1.caseTitle .EN {
        font-size: 1.5rem;
    }

    .caseInfArea .caseCotent {
        font-size: 1.25rem;
    }

    .caseInfArea .caseInfo h6.infoTitle p,
    .caseInfArea .caseInfo h6.infoTitle span {
        font-size: 1rem;
    }

    .caseInfArea .caseInfo .infoList p {
        font-size: 1rem;
    }

    .page01 .topArea .textArea h6.infoTitle,
    .page01 .topArea .textArea h6.infoTitle span {
        font-size: 1.25rem;
    }

    .page01 .topArea p.content {
        font-size: 1rem;
        margin-top: 23.6%;
    }

    .page02 h1.pageTitle,
    .page02 h1.pageTitle span {
        font-size: 1.25rem;
    }
}

@media screen and (max-width: 768px) {
    section.wrapper {
        margin-top: 60px;
    }

    .banner .col-lg-7 {
        padding-right: 0%;
    }

    .banner .innerImg {
        padding-top: 100vh;
    }

    .caseInfArea {
        margin-left: 0%;
        padding: 0% 4.5%;
        padding-top: 7%;
    }

    .caseInfArea .caseTitleArea {
        margin-bottom: 7%;
    }

    .caseInfArea h1.caseTitle {
        margin-bottom: 5%;
    }

    .caseInfArea h1.caseTitle p {
        font-size: 1.0625rem;
        letter-spacing: 3.4px;
        line-height: 1.882;
    }

    .caseInfArea h1.caseTitle .EN {
        font-size: 0.875rem;
        letter-spacing: 2.8px;
        line-height: 2.14;
    }

    .caseInfArea .caseCotent {
        font-size: 0.875rem;
        letter-spacing: 2.8px;
        line-height: 1.86;
    }

    .caseInfArea .caseInfo h6.infoTitle,
    .caseInfArea .caseInfo .infoList {
        margin-bottom: 0%;
    }

    .caseInfArea .caseInfo h6.infoTitle p,
    .caseInfArea .caseInfo h6.infoTitle span,
    .caseInfArea .caseInfo .infoList p {
        font-size: 0.875rem;
        letter-spacing: 2.8px;
        line-height: 2.2;
    }

    .caseInfArea>.row {
        transform: translateY(0%);
        margin: 0;
    }

    /* page01 */
    .page01 {
        padding: 0% 4.5%;
    }

    .page01 .topArea .textArea {
        padding: 0% 3%;
    }

    .page01 .topArea .row {
        flex-direction: column-reverse;
    }

    .page01 .topArea .row .imgArea {
        padding-left: 0;
        padding-right: 0;
    }

    .page01 .topArea .innerImg {
        padding-top: 56.3%;
    }

    .page01 .topArea .textArea h6.infoTitle,
    .page01 .topArea .textArea h6.infoTitle span {
        font-size: 0.875rem;
        letter-spacing: 2.8px;
        line-height: 1.857;
        margin: 17% 0%;
        margin-bottom: 4%;
    }

    .page01 .topArea p.content {
        font-size: 0.875rem;
        letter-spacing: 2.8px;
        line-height: 1.857;
        margin-top: 0%;
    }

    .page01 .bottomArea {
        margin-top: 25%;
    }

    .page01 .bottomArea .swiper-slide {
        width: 90.4% !important;
        flex-shrink: 0;
    }

    .swiper-button-next,
    .swiper-button-prev {
        width: 11%;
    }

    /* page02 */
    .page02 {
        padding: 0%;
        margin-bottom: 25%;
    }

    .page02 h1.pageTitle,
    .page02 h1.pageTitle span {
        font-size: 0.875rem;
        letter-spacing: 2.8px;
        line-height: 1.857;
        margin-bottom: 7%;
    }

    .page02 .lactionImg iframe {
        height: 36vh;
    }

    .casePervBtn {
        padding: 0% 4.5%;
        padding-top: 7%;
    }

    .casePervBtn .prev .caseName,
    .casePervBtn .prev .Btntxt {
        right: 3%;
    }

    .casePervBtn .next .caseName {
        left: 3%;
    }

    .casePervBtn .prev,
    .casePervBtn .next {
        width: 116px;
        padding: 1.3% 0%;
    }

    .casePervBtn .prev p,
    .casePervBtn .next p {
        font-size: 1.125rem;
        /* 18px */
        letter-spacing: 3.6px;
        line-height: 4px;
        /* 或 4 */

    }

    .casePervBtn .prev .arrow {
        transform: translateX(277%) translateY(-1.6%);
    }

    .casePervBtn .next .arrow {
        transform: translateX(96%) translateY(-6%);
    }

    .casePervBtn .prev:hover .arrow {
        transform: translateX(71%) translateY(0%);
    }

    .casePervBtn .next:hover .arrow {
        transform: translateX(384%) translateY(-6%);
    }
}