.humber {
    position: fixed;
    top: 10%;
    left: unset;
    right: 5%;
}

.humber::before,
.humber::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;
}

.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;
}

section.wrapper .aboutlogo {
    position: fixed;
    bottom: 4%;
    right: 5%;
    width: 12.032vw;
    z-index: 1001;
}

h3.title {
    position: absolute;
    top: 10%;
    left: 5%;
    z-index: 3;
    color: #fff;
}

section.banner {
    width: 100%;
    height: 100vh;
    background-color: #0f2c41;
}

.banner .bannerImage {
    width: 100%;
    height: 166vh;
    -webkit-mask-image: url(../images/image/about/mask.png);
    mask-image: url(../images/image/about/mask.png);
    mask-repeat: no-repeat;
    mask-position: bottom;
    mask-size: cover;
    overflow: hidden;
}

.banner .bannerImage .innerImage {
    width: 100%;
    padding-top: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
}

.banner .aboutTxt {
    font-size: 8.25rem;
    font-family: "Roboto", sans-serif;
    letter-spacing: .75px;
    line-height: 100%;
    color: #fff;
    border-left: 6px solid #d7ec66;
    padding-left: 2%;
    position: absolute;
    left: 5%;
    bottom: 24%;
    z-index: 3;
}

.banner .plate {
    position: absolute;
    bottom: 0%;
    right: 0%;
    width: 24.323vw;
    z-index: 3;
    transition: all 1s ease-in-out;
}

/* page01 */
.page01 .contentArea {
    width: 63.49vw;
    margin: 0 auto;
    margin-left: 7.3499%;
    padding: 7.612% 0% 13.18% 0%;
}

.page01 .contentArea .titleArea {
    border-bottom: 1px solid #0f2c41;
}

.page01 .contentArea .titleArea p {
    font-size: 1.875rem;
    letter-spacing: 12px;
    margin-bottom: 2.3%;
}

.page01 .contentArea .titleArea h1.title {
    font-size: 4.0625rem;
    font-family: "Roboto", sans-serif;
    letter-spacing: 13px;
    font-weight: 400;
    margin-bottom: 2.626%;
}

.page01 .contentArea .content {
    width: 33.073vw;
    padding-top: 9.435%;
}

.page01 .contentArea .content p {
    font-weight: 500;
    letter-spacing: 3.2px;
    color: #0f2c41;
    margin-bottom: 6.144%;
}

.page01 .contentArea .content p:last-child {
    margin-bottom: 0%;
}

.page01 .pageImg {
    position: absolute;
    bottom: 0%;
    right: 0%;
    width: 58.282vw;
}

.page01 .plate {
    position: absolute;
    bottom: 0%;
    left: 0%;
    width: 62.032vw;
}

/* page02 */
.page02 .timelinArea {
    background-color: #0f2c41;
    padding: 7.612% 0% 8.872% 7.58%;
}

.page02 .timelinArea .timelintop {
    width: 85.886vw;
}

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

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

.page02 .timelinArea .timelintop .Swiper02 {
    overflow: hidden;
}

.page02 .timelinArea .timelintop .Swiper02::after {
    content: '';
    position: absolute;
    top: 3.5%;
    left: 0%;
    width: 100%;
    height: 1px;
    background-color: #c3d0d9;
    opacity: .4;
}

.page02 .timelinArea .timelintop .arrowBtnArea {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    -webkit-justify-content: flex-end;
    position: absolute;
    top: 0%;
    right: 0%;
}

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

.page02 .timelinArea .timelintop .arrowBtnArea .swiper-button-next {
    margin-right: 0%;
}

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

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

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

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

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

.page02 .timelinArea .timelintop .Swiper02 .swiper-slide {
    text-align: center;
}

.page02 .timelinArea .timelintop .Swiper02 .swiper-slide .dotte {
    display: block;
    width: 11px;
    height: 11px;
    margin: auto;
    margin-bottom: 9.178%;
    border-radius: 100%;
    background-color: #c3d0d9;
}

.page02 .timelinArea .timelintop .Swiper02 .swiper-slide-active .dotte {
    background-color: #d7ec66;
}

.page02 .timelinArea .timelintop .Swiper02 .swiper-slide p {
    font-size: 6.25rem;
    font-family: "Roboto", sans-serif;
    line-height: 100%;
    color: #c3d0d9;
    opacity: .4;
}

.page02 .timelinArea .timelintop .Swiper02 .swiper-slide-active p {
    font-size: 7.0625rem;
    color: #d7ec66;
    opacity: 1;
}

.page02 .timelinArea .underblock {
    position: absolute;
    bottom: 0%;
    left: 0%;
    width: 100%;
    height: 5.929vh;
    background: linear-gradient(to right, #c3d0d9 50%, #d7ec66 50%);
}

.page02 .timelinArea .underblock::before {
    content: "";
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translateX(-50%);
    border-top: 3.3875rem solid #0f2c41;
    border-left: 5.5625rem solid transparent;
    border-right: 5.5625rem solid transparent;
    border-bottom: 0rem solid transparent;
}

.page02 .timelinArea .trangle {
    position: absolute;
    bottom: 0%;
    right: 0%;
    width: 12.6049vw;
}

.page02 .swiperArea {
    background-color: #c3d0d9;
    padding: 3.36% 0% 18.688% 0%;
}

.page02 .swiperArea .timelinInfo {
    display: flex;
    align-items: flex-start;
    -webkit-align-items: flex-start;
    width: 43.438vw;
    margin: 0 auto;
}

.page02 .swiperArea .timelinInfo::after {
    content: "";
    position: absolute;
    bottom: 0%;
    right: 0%;
    width: 20vw;
    height: 1px;
    background-color: #e9e9e7;
}

.page02 .swiperArea .timelinInfo .icon {
    width: 10.157vw;
}

.page02 .swiperArea .timelinInfo .icon::after {
    content: "";
    position: absolute;
    top: 26%;
    right: -15%;
    width: 6px;
    height: 29px;
    background-color: #d7ec66;
}

.page02 .swiperArea .timelinInfo .infoTxt {
    font-size: 1.6875rem;
    letter-spacing: 12px;
    padding-left: 7%;
    margin-top: 5.4%;
    color: #0F2C41;
}

.page02 .swiperArea .timelinInfo .infoTxt p {
    font-weight: 600;
    font-size: 1.875rem;
    letter-spacing: 12px;
    line-height: 1.33;
    color: #0F2C41;
    padding-bottom: 5%;
}

.page02 .swiperArea .infoButtom {
    position: absolute;
    bottom: 0%;
    left: 0%;
    width: 100%;
}

.page02 .swiperArea .infoButtom .plate {
    width: 83.386vw;
    margin: 0 auto;
}

.page02 .swiperArea .infoButtom .pageBlock {
    width: 100%;
    height: 11.747vh;
    border-radius: 50px 50px 0px 0px;
    background-color: #e9e9e7;
}

/* page03 */
.page03 {
    background-color: #e9e9e7;
    padding: 0% 7.1399% 10.447% 7.402%;
}

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

.page03 .titleArea span.title {
    font-size: 4.0625rem;
    font-family: "Roboto", sans-serif;
    letter-spacing: 13px;
    font-weight: 400;
    margin-bottom: 2.626%;
    color: #0f2c41;
    padding-bottom: 1.2%;
    padding-right: 4%;
    border-bottom: 1px solid #0f2c41;
}

.page03 .pointsArea {
    padding-top: 7.3719%;
}

.page03 .pointsArea .points {
    margin-bottom: 11.61%;
}

.page03 .pointsArea .points:last-child {
    margin-bottom: 0%;
}

/* page04 */
.page04 {
    background-color: #283283;
    padding: 10.394% 0% 2.4% 0%;
}

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

.page04 .titleArea {
    display: flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    padding: 0% 7.192%;
}

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

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

.page04 .titleArea h1.title span {
    font-size: 4.0625rem;
    font-family: "Roboto", sans-serif;
    color: #d7ec66;
}

.page04 .titleArea .rtW {
    margin-top: 2.3%;
}

.page04 .titleArea .rtW h1.title {
    font-size: 10.25rem;
    font-family: "Roboto", sans-serif;
    letter-spacing: 13px;
    font-weight: 400;
    color: #fff;
    border-bottom: 6px solid #d7ec66;
}

.page04 .CSRinfoArea {
    margin-top: 1.785%;
    display: flex;
    flex-wrap: nowrap;
}

.page04 .CSRinfoArea .csrInfo {
    width: calc(100% / 3);
    margin-right: 3%;
    cursor: pointer;
    z-index: 3;
}

.page04 .CSRinfoArea .csrInfo {
    transform: skewX(-20deg);
    overflow: hidden;
}

.page04 .CSRinfoArea .csrInfo:first-child {
    border-radius: 25% 0px 0px 0px;
    transform: translateY(28.2%) skewX(-20deg);
    overflow: hidden;
}

.page04 .CSRinfoArea .csrInfo:nth-child(2) {
    transform: translateY(13.81%) skewX(-20deg);
}

.page04 .CSRinfoArea .csrInfo:last-child {
    border-radius: 0px 0px 25px 0px;
}


.page04 .CSRinfoArea .csrInfo .csrCard {
    height: 50vh;
}

.page04 .CSRinfoArea .csrInfo .csrCard .innerImg {
    position: absolute;
    width: 130%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) skewX(20deg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.page04 .CSRinfoArea .csrInfo .csrCard .innerImg .mask {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    text-align: center;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 44, 65, .6);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity .5s ease-in-out;
}

.page04 .CSRinfoArea .csrInfo .csrCard .innerImg:hover .mask {
    opacity: 1;
    transition: opacity .5s ease-in-out;
}

.page04 .CSRinfoArea .csrInfo .csrCard .innerImg .mask .icon {
    width: 5vw;
}

.page04 .CSRinfoArea .csrInfo .csrCard .innerImg .mask p.content,
.page04 .CSRinfoArea .csrInfo .csrCard .innerImg .mask span {
    color: #fff;
}

.page04 .CSRinfoArea .csrInfo .csrCard .innerImg .mask p.content {
    font-size: 1.875rem;
    letter-spacing: 12px;
}

.page04 .CSRinfoArea .csrInfo .csrCard .plate {
    position: absolute;
    bottom: 0%;
    left: 0%;
    width: 100%;
    height: 2vh;
    background-color: #0f2c41;
    z-index: 2;
    transition: all .5s ease-in-out;
}

.page04 .CSRinfoArea .csrInfo .csrCard:hover .plate {
    background-color: #d7ec66;
    transition: all .5s ease-in-out;
}

/* page05 */
.page05 {
    background-color: #e9e9e7;
    padding: 13.544% 0% 5.617% 7.192%;
}

.page05::after {
    content: "";
    position: absolute;
    bottom: 0%;
    right: 0%;
    width: 69.74vw;
    height: 82.7vh;
    background-image: url(../images/image/about/page05_plate.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

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

.page05 .titleArea h1.title {
    font-size: 4.0625rem;
    font-family: "Roboto", sans-serif;
    letter-spacing: 13px;
    font-weight: 400;
    margin-bottom: 2.626%;
    color: #0f2c41;
}

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

.page05 .arrowArea .arrowBtnArea {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    -webkit-justify-content: flex-end;
}

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

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


.page05 .arrowArea .arrowBtnArea .swiper-button-next,
.page05 .arrowArea .arrowBtnArea .swiper-button-prev {
    color: #0f2c41;
}

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

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

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

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


.page05 .Swiper04 .swiper-slide .slideBlock {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    -webkit-justify-content: space-between;
    -webkit-align-items: flex-end;
}

.page05 .Swiper04 .slideBlockTxt {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 25.938vw;
    letter-spacing: 3.2px;
    line-height: 1.6875;
    text-align: justify;
    color: #0f2c41;
}

.page05 .Swiper04 .swiper-slide .slideBlock .slideList li {
    display: flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid #0f2c41;
    margin-bottom: 6.027%;
}

.page05 .Swiper04 .swiper-slide .slideBlock .slideList li .listTxt {
    font-size: 1.25rem;
    color: #0f2c41;
    letter-spacing: 8px;
    margin-bottom: 5.424%;
    transition: all .5s ease-in-out;
}

.page05 .Swiper04 .swiper-slide .slideBlock .slideList li .listTxt.active {
    font-weight: bolder;
    font-size: 1.375rem;
    letter-spacing: 8px;
    transition: all .5s ease-in-out;
}

.page05 .Swiper04 .swiper-slide .slideBlock .slideList li .arrow {
    width: 1.563vw;
}

.page05 .Swiper04 .swiper-slide .slideBlock .slideTxt {
    width: 26vw;
}

.page05 .Swiper04 .swiper-slide .slideBlock .sildeImg {
    width: calc(100vw - 50vw);
    display: flex;
    align-items: center;
    -webkit-align-items: center;
}

.page05 .Swiper04 .swiper-slide .slideBlock .sildeImg .innerImg {
    width: calc(100% / 3 - 10px);
    padding-top: 45%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin: 0px 10px;
    transform: scale(1);
    transition: all .5s ease-in-out;
}

.page05 .Swiper04 .swiper-slide .slideBlock .sildeImg .innerImg:last-child {
    margin-right: 0%;
}

.page05 .Swiper04 .swiper-slide .slideBlock .sildeImg .innerImg.active {
    transform: scale(1.1);
    transition: all .5s ease-in-out;
}

/* page06 */
.page06 {
    background-color: #e9e9e7;
    padding: 2.9929% 5% 10.919% 7.2449%;
}

.page06 .trangle {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 29.6vw;
}

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

.pageArea {
    display: flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
}

.page06 .pageArea .paginationArea {
    width: 8.875vw;
    display: flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    text-align: right;
    margin-top: 3.597%;
}

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

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

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

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

.page06 .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 #0f2c41;
    margin-bottom: 2.626%;
    color: #0f2c41;
}

.page06 .titleArea h1.title::after {
    content: "";
    position: absolute;
    bottom: 0%;
    left: 0%;
    width: 20vw;
    height: 1px;
    background-color: #fff;
}

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

.page06 .Swiper05 {
    margin-top: 7.119%;
}

.page06 .swiper-slide {
    margin-right: -10% !important;
}

.page06 .swiper-slide .innerImgMask {
    width: 100%;
    height: 47vh;
    mask-image: url(../images/image/about/innerImgMask03.svg);
    -webkit-mask-image: url(../images/image/about/innerImgMask03.svg);
    mask-repeat: no-repeat;
    mask-position: center;
}

/* 第一張 */
.page06 .swiper-slide:first-child .innerImg {
    mask-image: url(../images/image/about/innerImgMask.svg);
    -webkit-mask-image: url(../images/image/about/innerImgMask.svg);
    mask-repeat: no-repeat;
    mask-position: center;
}

/* 最後一張 */
.page06 .swiper-slide:last-child .innerImg {
    mask-image: url(../images/image/about/innerImgMask02.svg);
    -webkit-mask-image: url(../images/image/about/innerImgMask02.svg);
    mask-repeat: no-repeat;
    mask-position: center;
}

.page06 .swiper-slide .innerImg {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
}

.page06 .pageArea .paginationArea {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    -webkit-align-items: flex-start;
    -webkit-justify-content: flex-start;
}

.page06 .pageArea .paginationArea .swiper-pagination {
    position: relative;
    bottom: unset;
    top: unset;
}

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

@media screen and (max-width:1537px) {
    .page05::after {
        height: 74.7vh;
    }

    .page02 .timelinArea .timelintop .arrowBtnArea .swiper-button-next,
    .page02 .timelinArea .timelintop .arrowBtnArea .swiper-button-prev {
        margin-right: 1.5%;
    }

    .page05 .Swiper04 .slideBlockTxt {
        width: 30vw;
    }

    .page05 .Swiper04 .swiper-slide .slideBlock .slideTxt {
        width: 30vw;
    }

    .page05 .Swiper04 .swiper-slide .slideBlock .slideList li {
        margin-bottom: 3%;
    }

    .page05 .Swiper04 .swiper-slide .slideBlock .slideList li .listTxt {
        margin-bottom: 3%;
    }
}

@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 .aboutlogo {
        width: 30vw;
    }

    section.banner {
        height: 58.4vh;
    }

    .banner .bannerImage {
        height: 58.5vh;
        -webkit-mask-image: url(../images/image/about/mask_m.png);
        mask-image: url(../images/image/about/mask_m.png);
    }

    .banner .bannerImage::after {
        content: "";
        position: absolute;
        bottom: 0%;
        left: 0%;
        width: 100%;
        height: 20vh;
        background: linear-gradient(to top, rgba(40, 50, 131, 1), rgba(40, 50, 131, 0));
        z-index: 2;
    }

    .banner .bannerImage .innerImage {
        padding-top: 58.4vh;
    }

    .banner h3.title {
        top: 23%;
        font-size: 0.9375rem;
    }

    .banner .aboutTxt {
        font-size: 2.3125rem;
        bottom: 12%;
    }

    .banner .plate {
        width: 26.323vw;
    }

    .page01 .contentArea {
        width: 100%;
        margin-left: 0%;
        padding: 10%;
        padding-top: 60%;
    }

    .page01 .contentArea .content {
        width: 100%;
    }

    .page01 .contentArea .titleArea p {
        font-size: 0.75rem;
    }

    .page01 .contentArea .titleArea h1.title {
        font-size: 1.25rem;
    }

    .page01 .contentArea .content p {
        font-size: 0.75rem;
    }

    .page01 .pageImg {
        width: 100%;
        bottom: unset;
        top: 0%;
        r: unset;
        left: 0%;
    }

    .page01 .pageImg::after {
        content: "";
        position: absolute;
        bottom: 0%;
        left: 0%;
        width: 100%;
        height: 2.4vh;
        background-color: #d7ec66;
        border-radius: 25px 25px 0px 0px;
    }

    .page01 .plate {
        display: none;
    }

    .page02 .timelinArea {
        padding-top: 14%;
        padding-bottom: 12%;
    }

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

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

    .page02 .timelinArea .timelintop .titleArea p {
        font-size: 0.75rem;
    }

    .page02 .timelinArea .timelintop .titleArea h1.title {
        font-size: 1.25rem;
    }

    .page02 .timelinArea .timelintop .Swiper02 .swiper-slide p {
        font-size: 1.25rem;
    }

    .page02 .timelinArea .timelintop .Swiper02 .swiper-slide-active p {
        font-size: 1.75rem;
    }

    .page02 .timelinArea .underblock {
        height: 2.929vh;
    }

    .page02 .timelinArea .underblock::before {
        border-top: 1.4875rem solid #0f2c41;
        border-left: 1.4875rem solid transparent;
        border-right: 1.4875rem solid transparent;
    }

    .page02 .swiperArea {
        padding-top: 14%;
        padding-bottom: 40%;
    }

    .page02 .swiperArea .timelinInfo {
        width: 80%;
    }

    .page02 .swiperArea .timelinInfo .infoTxt {
        font-size: 0.75rem;
        letter-spacing: 0.2em;
        line-height: 1.5;
        padding-bottom: 3%;
    }

    .page02 .swiperArea .timelinInfo .infoTxt p {
        font-size: 1rem;
        letter-spacing: 0.2em;
        line-height: 1.25;
    }

    .page02 .swiperArea .timelinInfo .icon::after {
        width: 2px;
        height: 11px;
        top: 48%;
        right: -27%;
    }

    .page02 .swiperArea .timelinInfo .icon {
        width: 10.857vw;
    }

    .page02 .swiperArea .infoButtom .pageBlock {
        height: 10vh;
        border-radius: 25px 25px 0px 0px;
    }

    .page03 {
        padding: 0% 5% 10% 5%;
    }

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

    .page03 .titleArea span.title {
        font-size: 1.25rem;
        letter-spacing: 0.2em;
        line-height: 0.932;
    }

    .page03 .titleArea span.title {
        display: inline;
    }

    .page03 .pointsArea {
        padding-top: 10%;
    }

    .page03 .pointsArea .points .pointsTxt {
        position: absolute;
        top: 1%;
        left: -16%;
        width: 115%;
        z-index: 2;
    }

    .page04 {
        padding-top: 20%;
        padding-bottom: 5%;
    }

    .page04::before {
        height: 3.877vh;
    }

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

    .page04 .titleArea h1.title,
    .page04 .titleArea h1.title span {
        font-size: 1.25rem;
        letter-spacing: 0.2em;
        line-height: 1.15;
    }

    .page04 .titleArea .rtW {
        margin-top: -1%;
    }

    .page04 .titleArea .rtW h1.title {
        font-size: 2.5rem;
        letter-spacing: 0.2em;
    }

    .page04 .CSRinfoArea {
        flex-direction: column;
        padding: 0% 15%;
        margin-top: 5%;
    }

    .page04 .CSRinfoArea .csrInfo {
        width: 100%;
        margin-right: 0%;
        margin-bottom: 10%;
    }

    .page04 .CSRinfoArea .csrInfo:first-child {
        transform: translateY(0%) skewX(-20deg);
    }

    .page04 .CSRinfoArea .csrInfo:nth-child(2) {
        transform: translateY(0%) skewX(-20deg);
    }

    .page04 .CSRinfoArea .csrInfo .csrCard {
        height: 25vh;
    }

    .page04 .CSRinfoArea .csrInfo .csrCard .innerImg .mask {
        padding: 0% 20%;
    }

    .page04 .CSRinfoArea .csrInfo .csrCard .innerImg .mask .icon {
        width: 40px;
        margin-bottom: 4.5%;
    }

    .page04 .CSRinfoArea .csrInfo .csrCard .innerImg .mask p.content {
        font-size: 0.75rem;
        letter-spacing: 0.2em;
    }

    .page04 .CSRinfoArea .csrInfo .csrCard .innerImg .mask span {
        font-size: 0.625rem;
        letter-spacing: 0.2em;
        line-height: 1.408;
    }

    .page05 {
        padding-bottom: 10%;
    }

    .page05::after {
        height: 31vh;
        background-image: url(../images/image/about/page05_plate_m.png);
    }

    .page05 .titleArea p {
        font-size: 0.75rem;
        letter-spacing: 0.4em;
        line-height: 1.688;
    }

    .page05 .titleArea h1.title {
        font-size: 1.25rem;
        letter-spacing: 0.2em;
        line-height: 1.15;
    }

    .page05 .arrowArea .slideTxt p {
        font-size: 0.75rem;
        letter-spacing: 0.2em;
        line-height: 2;
        color: #0f2c41;
        padding: 10% 0%;
    }

    .swiperArea {
        touch-action: none;
        /* 禁止手指拖動觸發滾動 */
    }

    .page05 .Swiper06 {
        margin-bottom: 10%;
        height: 30px;
        overflow: hidden;
    }

    .page05 .swiperArea .Swiper06 .swiper-slide {
        height: 30px !important;
    }

    .page05 .Swiper06 .swiper-slide .sliderTxt {
        height: auto;
        display: flex;
        justify-content: space-between;
        -webkit-justify-content: space-between;
        width: 60%;
        margin: 0 auto;
        margin-right: 5%;
        border-bottom: 1px solid #0f2c41;
    }

    .page05 .Swiper06 .swiper-slide .sliderTxt .listTxt {
        font-size: 0.625rem;
        letter-spacing: 0.2em;
        line-height: 1.5;
        color: #0f2c41;
        margin-bottom: 5.424%;
        transition: all .5s ease-in-out;
    }

    .page05 .Swiper06 .swiper-slide .listTxt.active {
        font-weight: bolder;
        font-size: 0.75rem;
        letter-spacing: 0.4em;
        transition: all .5s ease-in-out;
    }

    .page05 .Swiper06 .swiper-slide .sliderTxt .arrow {
        width: 8px;
    }

    .page05 .Swiper06 .arrow img {
        content: url("../images/image/about/list_arrow.svg");
    }

    .page05 .Swiper06 .arrow.active img {
        content: url("../images/image/about/list_arrow_b.svg");
    }

    .page05 .arrowArea {
        display: block;
        padding-right: 7.636%;
        margin-bottom: 8.541%;
    }

    .page05 .swiperArea .arrowBtnArea {
        width: 100%;
        position: absolute;
        top: 15%;
        left: 0%;
        display: flex;
        justify-content: flex-start;
        -webkit-justify-content: flex-start;
    }

    .page05 .swiperArea .arrowBtnArea .swiper-button-next,
    .page05 .swiperArea .arrowBtnArea .swiper-button-prev {
        position: relative;
        right: unset;
        left: unset;
        width: 24px;
        height: 24px;
        margin-right: 2%;
        border: 1px solid #0f2c41;
        border-radius: 100%;
    }

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


    .page05 .swiperArea .arrowBtnArea .swiper-button-next,
    .page05 .swiperArea .arrowBtnArea .swiper-button-prev {
        color: #0f2c41;
    }

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

    .page05 .swiperArea .arrowBtnArea .swiper-button-next .swiper-navigation-icon {
        right: -5%;
    }

    .page05 .swiperArea .arrowBtnArea .swiper-button-prev .swiper-navigation-icon {
        left: -5%;
    }

    .page05 .swiperArea .arrowBtnArea .swiper-button-next:hover,
    .page05 .swiperArea .arrowBtnArea .swiper-button-prev:hover {
        background-color: #0f2c41;
        border: 1px solid #0f2c41;
        color: #fff;
    }

    .page05 .Swiper04 {
        pointer-events: none;
    }

    .page05 .Swiper04 .swiper-slide {
        flex: 0 0 120px;
        /* 固定寬度，不被 Swiper 覆蓋 */
    }

    .page05 .swiperArea .Swiper04 .swiper-slide .innerImg {
        width: 100%;
        padding-top: 150%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        margin: 0;
        transform: scale(1);
        transition: all .5s ease-in-out;
    }

    .page05 .swiperArea .Swiper04 .swiper-slide-active .innerImg {
        transform: scale(1.1);
        transition: all .5s ease-in-out;
    }

    .page06 {
        padding-top: 10%;
        padding-bottom: 15%;
    }

    .page06 .titleArea p {
        font-size: 0.75rem;
        letter-spacing: 0.4em;
        line-height: 1.688;
    }

    .page06 .titleArea h1.title,
    .page06 .titleArea h1.title span {
        font-size: 1.25rem;
        letter-spacing: 0.2em;
        line-height: 1.15;
    }

    .page06 .Swiper05 .swiper-wrapper .swiper-slide {
        width: 90%;
        /* 整體放大 */
        margin-right: -26% !important;
        /* 可以縮小間距，避免留空白 */
        overflow: visible;
    }

    .page06 .Swiper05 .swiper-wrapper .swiper-slide:last-child {
        margin-right: 0 !important;
    }

    .page06 .swiper-slide .innerImgMask {
        height: 23vh;
        /* 增加圖片高度，讓比例更大 */
    }

    .page06 .swiper-slide .innerImg {
        background-size: cover;
        /* 保持圖片放大不變形 */
    }

    .page06 .pageArea .paginationArea .swiper-counter span {
        font-size: 0.5rem;
        letter-spacing: 0.2em;
        line-height: 1.886;
    }

    .page06 .pageArea .paginationArea {
        width: 22vw;
    }
}