.banner-about {
    background-image: url(../img/about/banner.jpg);
    background-size: cover;
    background-position: center center;
    /* 使用漸變遮罩讓下方漸白 */
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

.wrapper-banner {
    margin-top: 0;
    max-height: 100%;
}

@media screen and (min-width: 1360px) {
    .wrapper-banner {
        padding: 5% 20% 20% 20%;
    }
}

.section-about {
    padding-bottom: 20%;
}

@media screen and (min-width: 576px) {
    .section-about {
        padding-bottom: 10%;
    }
}

@media screen and (min-width: 1360px) {
    .section-about {
        padding-bottom: 0%;
    }
}

.wrapper-banner__text {
    padding-bottom: 5%;
    border-bottom: 1px solid #ffffff;
}

.banner-about-tital {
    color: var(--bs-info);
}

.banner-about-text {
    color: var(--bs-primary);
    margin-top: 0;
}

.wrapper-banner-text {
    flex: 1 1 auto;
    padding-top: 28.5%;
    line-height: 1.15;
}

.banner-txet-title {

    font-size: 2.5rem;
    color: #222222;
}

@media screen and (min-width: 1024px) {
    .banner-txet-title {
        font-size: 4.375rem;
    }
}


/*about__1*/

.section-about__1 {
    clear: both;
    padding: 5% 0% 5% 0%;
    overflow: hidden;
    background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.75) 70%, rgba(255, 255, 255, 0) 100%);
    margin-top: -20%;
}


@media screen and (min-width: 1024px) {
    .section-about__1 {
        margin-top: -20%;
 
    }
}

.about1_title {
    font-size: clamp(16px, 5vw, 20px);
    background-color: var(--bs-info);
    color: #ffffff;
    padding: 5px 1rem;
    font-weight: bold;
    letter-spacing: 0.15rem;
}

.about-1_title-span {
    padding-top: 25px;
    font-size: clamp(20px, 5vw, 32px);
    line-height: 1.5;
    letter-spacing: 0.15rem;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 500;
}

.about1_title_span {
    color: var(--bs-primary);
}

.about-1__wrapper-R-text {
    padding: 5% 5% 0 5%;
    max-width: 845px;
    @media screen and (min-width: 1024px) {
        padding: 20% 5% 0 5%;
    }
}

.about-1__wrapper-L-text {
    padding: 5% 5% 0 5%;
    max-width: 880px;
    @media screen and (min-width: 1024px) {
        padding: 15% 5% 0 5%;
    }
}

.wrapper1-L__item {
    padding: 16px 0;
}

@media screen and (min-width: 1024px) {
    .about-1__wrapper-R-text {
        padding: 5% 9.5% 0 0;
        max-width: 845px;
    }

    .about-1__wrapper-L-text {
        padding: 0 0 5% 9.5%;
        max-width: 880px;
    }

    .wrapper1-L__item {
        padding-top: 5%;
    }
}

.about-1__wrapper1-L__item--title {
    font-size: 1.125rem;
    color: var(--bs-info);
    border-bottom: 1px solid var(--bs-info);
    font-weight: bold;
    flex: 0 0 auto;
}

.about-1__wrapper1-L__item--des {
    font-size: 1rem;
    color: #3C3C3C;
}

@media screen and (min-width: 1024px) {
    .about-1__wrapper1-L__item--title {
        font-size: 1.25rem;
    }

    .about-1__wrapper1-L__item--des {
        font-size: 1.125rem;
    }
}

.about-1__wrapper2-text {
    font-size: 1rem;
    color: #ffffff;
    background-color: var(--bs-info);
    padding: 1.5rem;
    text-align: justify;
}

.about-1__wrapper2-text_pd {
    padding: 3rem 1.5rem;
}

.about-1__wrapper1-img {
    position: relative;
    width: 100%;

}

.about-1__wrapper2-img {
    position: relative;
    width: 100%;

}

@media screen and (min-width: 950px) {
    .about-1__wrapper1-img {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 0;
    }

    .about-1__wrapper2-img {
        position: relative;
        top: 0;
        right: 0;
        width: 100%;
        z-index: 0;
    }
}



/*section-about__2*/
.section-about__2 {
    padding: 20% 10% 5% 10%;
    background-image: url(../img/about/about2-bg.svg);
    background-repeat: no-repeat;
    flex: 0 0 auto;
}

.about-2__wrapper {
    flex: 0 0 auto;
    position: relative;
}

.list-roll li {
    padding: 0 7% 10% 7%;
    max-width: 400px;
}

@media screen and (min-width: 567px) {
    .list-roll li {
        max-width: 500px;
    }
}

.box-list__img {
    width: 115px !important;
}

.box-roll__img {
    flex: 0 0 auto;
}

.col-about2__L {
    flex: 0 0 auto;
    position: relative;
}

.col-about2__L-bg {
    position: relative;
    top: 3.5%;
    left: 18%;
    width: 65%;
}

.col-about2__L--img {
    position: absolute;
    top: 0;
    width: 100%;
    max-width: 320px;
    flex: 0 0 auto;
}

.col-about2__R {
    padding-top: 5%;
}

.box-roll__T {
    padding-bottom: 2rem;
}

.box-roll__T span {
    color: var(--bs-info);
    border-radius: 50px;
    font-size: 1.75rem;
    font-weight: bold;
    text-wrap: nowrap;
}


@media screen and (min-width: 950px) {
    .box-roll__T span {
        font-size: 2.5rem;
    }


    .section-about__2 {
        margin-top: var(--rowpd);
    }
}





/*
*section-about__3
*/
.section-about__3 {
    background: linear-gradient(to bottom, #EFEFEF 0%, #FFFFFF 100%);
    border-radius: 50px 50px 0 0;
    clear: both;
    overflow: hidden;
    padding: 4% 8% 5% 8%;
}

.about-3__wrapper {
    overflow: hidden;
}

.about-3__title {
    color: var(--bs-info);
    font-size: 2.5rem;
    letter-spacing: 1px;
}

@media screen and (min-width: 1024px) {
    .about-3__title {
        font-size: 4.375rem;
    }
}

.about-3__subtext {
    color: var(--bs-primary);
    font-weight: 900;
    position: relative;
}

.about-3__subtext span {
    position: relative;
    background-image: url(../img/about/about-lin.svg);
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 0.75rem;
}


.timeline {
    position: relative;
    flex: 1 1 auto;
    left: -10%;
    margin-top: 10%;

}

.timeline-container {
    padding: 20px;
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-left: 50px;
    margin-bottom: 30px;
}

.timeline-container::after {
    content: '';
    position: absolute;
    z-index: 2;
    width: 26px;
    height: 26px;
    background-image: url(../img/about/dot.svg);
    background-position: center;
    background-repeat: no-repeat;
    left: 30px;
    transform: translateX(-50%);
    border-radius: 50%;
}

.timeline-container::before {
    content: '';
    position: absolute;
    width: 1px;
    background: repeating-linear-gradient(to bottom,
            var(--bs-primary) 0%,
            var(--bs-primary) 100%,
            transparent 100%);
    background-size: 1px;
    top: 55px;
    bottom: 0;
    left: 30px;
    margin-left: -0.5px;
}

.timeline-year {
    position: relative;
    width: 100%;
    text-align: left;
    padding-right: 0;
    margin-bottom: 10px;
    color: var(--bs-gray-800);
    font-weight: bold;
    font-size: 1.75rem;
    top: -0.5rem;

}

.timeline-content {
    width: 100%;
    padding-left: 0;
}

.timeline-month {
    font-weight: bold;
    margin-bottom: 5px;
    color: var(--bs-info);
    padding-right: 1rem;
    white-space: nowrap;
    min-width: 50px;
    text-wrap: auto;
}

.timeline-text {
    color: var(--bs-gray-700);
    text-wrap: wrap;
}

@media screen and (min-width: 768px) {
    .timeline-container::before {
        left: 50%;
    }

    .timeline-container {
        flex-direction: row;
        padding-left: 20px;
    }

    .timeline-container::after {
        left: 50%;
    }

    .timeline-year {
        width: 80%;
        text-align: right;
        padding-right: 40px;
        font-size: 2.5rem;
        margin-bottom: 0;
        top: -1rem;
    }

    .timeline-content {
        width: 80%;
        padding-left: 40px;
    }
}


.about-3__container {
    flex: 1 1 auto;
    padding-top: 5%;
}

.about-3__container--list li {
    padding-bottom: 10%;
}
@media screen and (min-width: 1024px) {
    .about-3__container--list li {
        padding-bottom: 2.5%;
    }
}
.about-3__list--img {
    width: 100%;
    flex: 0 0 auto;
    position: relative;
    
}

@media screen and (min-width: 768px) {
    .about-3__list--img {
        width: 40%;
        left: 0%;
    }
}


.about-3__list--text {
    color: var(--bs-gray-800);
}



.section-about__ESG {
    padding: 5% 8% 5% 8%;
    background-image: url(../img/about/about-esg-bg.jpg);
    background-size: 240%;
    background-repeat: no-repeat;
}

@media screen and (min-width: 950px) {
    .section-about__ESG {
        background-size: 130%;
    }
}

.about-ESG__title-box {
    flex: 0 0 auto;
}

.about-ESG__subtext span {
    filter: brightness(0) invert(1);
}

.about-ESG__in {
    padding: 5% 0;
}

@media screen and (min-width: 950px) {
    .about-ESG__in {
        padding-left: 10%;
    }
}

.about-ESG__info-2--title {
    color: #FFFFFF;
    font-size: 1.75rem;
    font-weight: bold;
}

@media screen and (min-width: 950px) {
    .about-ESG__info-2--title {
        font-size: 3rem;
    }
}

.about-ESG__info-2--img {
    width: 100%;
    flex: 0 0 auto;
}

.about-ESG__info-2--img img {
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #000000;
}

.about-ESG__wrapper2 {
    margin: 5% -9.5% 0 -9.5%;
}

.about-ESG__wrapper2--bg-in {
    position: relative;
    width: 150%;
    left: -25%;
}

.about-ESG__wrapper2-in {
    background-size: 160%;
    background-position: top center;
    padding: 2% 8% 10% 8%;
    position: relative;
}

.about-ESG__wrapper2-in1 {
    background-image: url(../img/about/about-esg-1.svg);

    background-repeat: no-repeat;
}

.ESG__wrapper2--title {
    color: #FFFFFF;
    font-size: 2rem;
    font-weight: bold;
    padding-bottom: 2.5%;
    text-align: center;
}

.ESG__img {
    width: 30px;
}

.ESG__text {
    color: var(--bs-info);
    flex: 0 0 auto;
    max-width: 320px;
    text-wrap: wrap;
    padding-bottom: 2%;
}

@media screen and (min-width: 950px) {
    .ESG__wrapper2--title {
        font-size: 3rem;
    }
}

.about-ESG__wrapper2-in2 {
    background-image: url(../img/about/about-esg-1.svg);
    margin-top: -10%;
    background-repeat: no-repeat;
}

.about-ESG__wrapper2-in3 {
    background-image: url(../img/about/about-esg-3.svg);
    background-size: 340%;
    margin-top: -10%;
    background-repeat: no-repeat;
}

.about-ESG__wrapper2-in4 {
    background-image: url(../img/about/about-esg-3.svg);
    background-size: 340%;
    margin-top: -10%;
    background-repeat: no-repeat;
}

.about-ESG__wrapper2-in5 {
    background-color: #77c2c5;
    margin-top: -10%;
    background-repeat: no-repeat;
    border-radius: 50% 50% 0 0;
    margin-top: -10%;
    margin-left: -40%;
    margin-right: -40%;
}

@media screen and (min-width: 950px) {
    .about-ESG__wrapper2-in {
        background-size: 170%;
    }

    .about-ESG__wrapper2-in2 {
        margin-top: -10%;

    }

    .about-ESG__wrapper2-in3 {
        margin-top: -10%;
        background-image: url(../img/about/about-esg-1.svg);
    }

    .about-ESG__wrapper2-in4 {
        margin-top: -10%;
        background-image: url(../img/about/about-esg-1.svg);
    }

    .about-ESG__wrapper2-in5 {
        background-color: transparent;
        background-image: url(../img/about/about-esg-4.svg);
        background-size: 105%;
        margin-top: -10%;
        margin-left: -5%;
        margin-right: -5%;
    }
}

.ESG__wrapper2--bottom {
    padding-bottom: 5%;
}

.ESG__text_T {
    padding-left: 1rem;
}

.ESG__text4 {
    background-image: url(../img/about/dotway.svg);
    background-size: 8px;
    background-repeat: no-repeat;
    background-position: left top 13px;
    padding-left: 1rem;

}

@media screen and (min-width: 950px) {
    .ESG__wrapper2--text-B {
        padding-top: 7.5%;
    }
}

.btn-more {
    background-color: var(--bs-gray-400) !important;
    color: var(--bs-info) !important;

}

.btn-more:hover {
    background-color: var(--bs-info) !important;
    color: #ffffff !important;
}

.btn-txt-arrow div {
    width: 100%;
    height: 100%;
    background-image: url(../img/about/btn-txt-arrow.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px auto;
    position: relative;
    color: var(--bs-info) !important;
}

.btn.btn-more:hover .btn-txt-arrow div {
    background-image: url(../img/about/btn-txt-arrow-h.svg);
    transition: all 0.5s ease;
    color: var(--bs-info) !important;
}

.btn-txt span {
    color: var(--bs-info) !important;
}

.btn.btn-more:hover .btn-txt span {
    color: #ffffff !important;
    transition: all 0.5s ease;
}