@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap");


@font-face {
    font-family: "Lato-Light";
    src: url(../fonts/Lato-Light.ttf);
}

@font-face {
    font-family: "Lato-Regular";
    src: url(../fonts/Lato-Regular.ttf);
}

@font-face {
    font-family: "Lato-Bold";
    src: url(../fonts/Lato-Bold.ttf);
}


[data-aos="opacity-heightdown"] {
    opacity: 1;
    clip-path: inset(0% 0 100% 0);
    /* 初始状态下完全隐藏 */
}

[data-aos="opacity-heightdown"].aos-animate {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    /* 显示全部图片 */
}

[data-aos="opacity-left"] {
    opacity: 1;
    clip-path: inset(0% 100% 0 0);
    /* 初始状态下完全隐藏 */
}

[data-aos="opacity-left"].aos-animate {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    /* 显示全部图片 */
}

[data-aos="opacity-right"] {
    opacity: 1;
    clip-path: inset(0% 0 0 100%);
    /* 初始状态下完全隐藏 */
}

[data-aos="opacity-right"].aos-animate {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    /* 显示全部图片 */
}

.opacity {
    animation: opacity 2s ease 0s forwards;

}

@keyframes opacity-left {

    from {
        opacity: 0;
        clip-path: inset(0% 100% 0 0);
    }

    to {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
}

.opacity-left {
    animation: opacity-left 2s ease 0s forwards;
    animation-delay: 1s;
}

:root {}

body,
html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    --vw-base: calc(100vw / 1920);
    display: flex;
    flex-direction: column;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
}

a:link,
a:visited,
a:hover,
a:active {
    text-decoration: none;
}

button,
input,
textarea,
select,
option {
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    border-radius: 0;
    -moz-appearance: none;
    appearance: none;
    outline: none;
}


img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.swiper {
    width: 100%;
    height: 100%;
    position: relative;
}

.container {
    width: 100%;
    height: auto;
    position: relative;
    /* overflow: hidden; */
    background-color: #b8c5c5;
    flex-shrink: 0;
    opacity: 0;
}

.main1 {
    width: 100%;
    height: calc(950 * var(--vw-base));
    position: relative;
    background-color: #000;
}

.nav {
    position: fixed;
    right: calc(42* var(--vw-base));
    top: calc(370* var(--vw-base));
    display: flex;
    flex-direction: column;
    gap: calc(22* var(--vw-base));
    z-index: 99;
}

.nav-item {
    position: relative;
    width: calc(38* var(--vw-base));
    height: calc(40* var(--vw-base));
    border-radius: calc(16*var(--vw-base));
    background-color: #737373;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 5;

}

.nav-item:hover {
    background-color: #74912f;
    animation: bgColor .4s ease 0s forwards;
}

@keyframes bgColor {
    from {
        background-color: #737373;
    }

    to {
        background-color: #74912f;
    }
}

.nav-pic {
    width: calc(30* var(--vw-base));
    height: calc(22* var(--vw-base));
}

.nav-pic img {
    object-fit: contain;
}


.main1 .dark-bg,
.main1 .white-bg,
.main1 .green,
.main1 .donut {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}



.main1 .slide-o .white-bg {
    width: calc(1920* var(--vw-base));
    height: calc(950* var(--vw-base));
    background-image: url(../img/index/main1-o-dark2-filter.jpg);
    background-size: cover;
    background-position: 0;
    background-repeat: no-repeat;
    opacity: .8;
    animation: backgroundO 3s ease 0s forwards, backgroundScale 9s ease forwards;
}

@keyframes backgroundO {
    from {
        background-image: url(../img/index/main1-o-dark2-filter.jpg);
    }

    to {
        background-image: url(../img/index/main1-o-dark2.jpg);
    }
}

.main1 .slide-o .donut {
    width: calc(1920* var(--vw-base));
    height: calc(950* var(--vw-base));
    /* background-color: #7aaf007a; */
    background-image: url(../img/index/main1-o-white.jpg);
    /* background-blend-mode: overlay; */
    background-size: cover;
    background-position: 0;
    background-repeat: no-repeat;
    mask-image: url(../img/index/main1-o-green2.png);
    mask-size: calc(1920* var(--vw-base)) calc(950* var(--vw-base));
    mask-position: calc(1920* var(--vw-base)) 0;
    /* 初始位置在右側 */
    mask-repeat: no-repeat;
    animation: maskMove 2s ease 0.8s forwards, backgroundScale 9s ease forwards;
}

@keyframes maskMove {
    from {
        mask-position: calc(1920* var(--vw-base)) 0;
        /* 從右側開始 */
    }

    to {
        mask-position: 0 0;
        /* 移動到左側，重疊在中心 */
    }
}

@keyframes opacity {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes filterDark {
    from {
        filter: brightness(0.7);
        /* 一開始加深，變暗 */
        opacity: 1;
    }

    to {
        filter: brightness(1);
        /* 回到原色 */
        opacity: 1;
    }
}

@keyframes backgroundScale {
    from {
        background-size: 120%;
        /* 背景圖從120%開始 */
    }

    to {
        background-size: 100%;
        /* 最終縮放到100% */
    }
}

@keyframes translateX {
    from {
        left: calc(1920* var(--vw-base));
    }

    to {
        left: 0;
    }
}

.main1 .slide-o .green {
    width: calc(1920* var(--vw-base));
    height: calc(950* var(--vw-base));
    background-image: url(../img/index/main1-o-green.png);
    background-size: cover;
    background-position: 0;
    background-repeat: no-repeat;
    left: calc(1920* var(--vw-base));
    animation: translateX 2s ease .8s forwards;
}


.main1 .slide-o .content {
    position: absolute;
    left: calc(365* var(--vw-base));
    top: calc(387* var(--vw-base));
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    animation: opacity 2s ease 0s forwards;
}

.main1 .slide-o .content .txt1 {
    position: relative;
    margin-right: calc(-35* var(--vw-base));
    color: #ffffff;
    font-size: calc(72* var(--vw-base));
    font-family: "Lato-Bold";
    /* font-weight: bold; */
    letter-spacing: 0.5em;
    text-align: right;
    width: 100%;
}

.main1 .slide-o .content .txt2 {
    position: relative;
    margin-top: calc(29* var(--vw-base));
    color: #b3b3b3;
    font-size: calc(21* var(--vw-base));
    font-family: "Lato-Regular";
    letter-spacing: 0.25em;
}

.main1 .slide-o .content .redline {
    position: absolute;
    width: calc(231* var(--vw-base));
    height: 1px;
    bottom: calc(-58* var(--vw-base));
    left: calc(0* var(--vw-base));
    background-color: #ff4200;
    clip-path: inset(0% 100% 0 100%);
    animation: clip-path-x 2s ease 0s forwards;
}

.main1 .slide-o .content .cn {
    position: absolute;
    left: calc(252* var(--vw-base));
    bottom: calc(-70* var(--vw-base));
    color: #ffffff;
    font-size: calc(22* var(--vw-base));
    font-family: "Noto Sans TC";
    font-weight: 400;
    letter-spacing: 0.15em;
    opacity: 0;
    animation: opacity 2s ease 1s forwards;
}


@keyframes clip-path-x {
    from {
        clip-path: inset(0% 100% 0 100%);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

.main1 .slide-p .white-bg {
    width: calc(1920* var(--vw-base));
    height: calc(950* var(--vw-base));
    background-image: url(../img/index/main1-p-dark-filter.jpg);
    background-size: cover;
    background-position: 0;
    background-repeat: no-repeat;
    opacity: 1;
    /* filter: brightness(0.7); */
    animation: backgroundP 3s ease .0s forwards, backgroundScale 9s ease forwards;
}

@keyframes backgroundP {
    from {
        background-image: url(../img/index/main1-p-dark-filter.jpg);
    }

    to {
        background-image: url(../img/index/main1-p-dark.jpg);
    }
}

.main1 .slide-p .donut {
    width: calc(1920* var(--vw-base));
    height: calc(950* var(--vw-base));
    background-image: url(../img/index/main1-p-white.jpg);
    background-size: cover;
    background-position: 0;
    background-repeat: no-repeat;
    mask-image: url(../img/index/main1-p-green2.png);
    mask-size: calc(1920* var(--vw-base)) calc(950* var(--vw-base));
    mask-position: calc(1920* var(--vw-base)) 0;
    /* 初始位置在右側 */
    mask-repeat: no-repeat;
    animation: maskMoveUp 2s ease 0.8s forwards, backgroundScale 9s ease forwards;
}

.main1 .slide-p .green {
    width: calc(1920* var(--vw-base));
    height: calc(950* var(--vw-base));
    background-image: url(../img/index/main1-p-green.png);
    background-size: cover;
    background-position: 0;
    background-repeat: no-repeat;
    top: calc(1920* var(--vw-base));
    left: calc(0* var(--vw-base));
    animation: translateUp 2s ease .8s forwards;
}

@keyframes maskMoveUp {
    from {
        mask-position: 0 calc(1920* var(--vw-base));
    }

    to {
        mask-position: 0 0;

    }
}


@keyframes translateUp {
    from {
        top: calc(1920* var(--vw-base));
    }

    to {
        top: 0;
    }
}

.main1 .slide-p .content {
    position: absolute;
    left: calc(515* var(--vw-base));
    top: calc(363* var(--vw-base));
    display: flex;
    flex-direction: column;
    align-items: start;
    animation: opacity 2s ease 0s forwards;
}

.main1 .slide-p .content .txt1 {
    position: relative;
    margin-right: calc(-35* var(--vw-base));
    color: #ffffff;
    font-size: calc(72* var(--vw-base));
    font-family: "Lato-Bold";
    /* font-weight: bold; */
    letter-spacing: 0.5em;
    /* width: 100%; */
}

.main1 .slide-p .content .txt1 .txt-ani {
    display: inline-block;
    animation: txtJump 1s ease 1s forwards;
}

@keyframes txtJump {
    0% {
        transform: translateY(0);
        /* 初始狀態 */
    }


    30% {
        transform: translateY(calc(-30 * var(--vw-base)));
        /* Y 軸縮短，位置上移 */
    }


    100% {
        transform: translateY(0);
        /* 回到原位 */
    }
}

.main1 .slide-p .content .txt2 {
    position: relative;
    margin-left: calc(-92* var(--vw-base));
    margin-top: calc(29* var(--vw-base));
    color: #b3b3b3;
    font-size: calc(21* var(--vw-base));
    font-family: "Lato-Regular";
    letter-spacing: 0.25em;
}

.main1 .slide-p .content .redline {
    position: absolute;
    width: calc(228* var(--vw-base));
    height: 1px;
    bottom: calc(-57* var(--vw-base));
    margin-left: calc(-92* var(--vw-base));
    background-color: #ff4200;
    clip-path: inset(0% 100% 0 100%);
    animation: clip-path-right 2s ease 0.5s forwards;
}

@keyframes clip-path-right {
    from {
        clip-path: inset(0% 100% 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}


.main1 .slide-p .content .cn {
    position: absolute;
    left: calc(160* var(--vw-base));
    bottom: calc(-70* var(--vw-base));
    color: #ffffff;
    font-size: calc(22* var(--vw-base));
    font-family: "Noto Sans TC";
    font-weight: 400;
    letter-spacing: 0.15em;
    opacity: 0;
    animation: opacity 2s ease 1.3s forwards;
}

.main1 .slide-l .white-bg {
    width: calc(1920* var(--vw-base));
    height: calc(950* var(--vw-base));
    background-image: url(../img/index/main1-l-dark-filter.jpg);
    background-size: cover;
    background-position: 0;
    background-repeat: no-repeat;
    opacity: 1;
    /* filter: brightness(0.7); */
    animation: backgroundL 3s ease 0s forwards, backgroundScale 9s ease forwards;
}

@keyframes backgroundL {
    from {
        background-image: url(../img/index/main1-l-dark-filter.jpg);
    }

    to {
        background-image: url(../img/index/main1-l-dark.jpg);
    }
}

.main1 .slide-l .donut {
    width: calc(1920* var(--vw-base));
    height: calc(950* var(--vw-base));
    background-image: url(../img/index/main1-l-white.jpg);
    background-size: cover;
    background-position: 0;
    background-repeat: no-repeat;
    mask-image: url(../img/index/main1-l-green2.png);
    mask-size: calc(1920* var(--vw-base)) calc(950* var(--vw-base));
    mask-position: calc(-1920* var(--vw-base)) 0;
    /* 初始位置在右側 */
    mask-repeat: no-repeat;
    animation: maskMoveDown 2s ease 0.8s forwards, backgroundScale 9s ease forwards;
}

.main1 .slide-l .green {
    width: calc(1920* var(--vw-base));
    height: calc(950* var(--vw-base));
    background-image: url(../img/index/main1-l-green.png);
    background-size: cover;
    background-position: 0;
    background-repeat: no-repeat;
    top: calc(-1920* var(--vw-base));
    left: calc(0* var(--vw-base));
    animation: translateDown 2s ease .8s forwards;
}

@keyframes maskMoveDown {
    from {
        mask-position: 0 calc(-1920* var(--vw-base));
    }

    to {
        mask-position: 0 0;

    }
}


@keyframes translateDown {
    from {
        top: calc(-1920* var(--vw-base));
    }

    to {
        top: 0;
    }
}

.main1 .slide-l .content {
    position: absolute;
    left: calc(550* var(--vw-base));
    top: calc(343* var(--vw-base));
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    animation: opacity 2s ease 0s forwards;
}

.main1 .slide-l .content .txt1 {
    position: relative;
    /* width: calc(595* var(--vw-base)); */
    margin-right: calc(-35* var(--vw-base));
    color: #ffffff;
    font-size: calc(72* var(--vw-base));
    font-family: "Lato-Bold";
    letter-spacing: 0.5em;
    width: 100%;
    text-align: right;
    animation: moveRight 1.6s ease 0.3s forwards;
    transform: translateX(calc(100* var(--vw-base)));
}

@keyframes moveRight {
    from {
        transform: translateX(calc(100* var(--vw-base)));
    }

    to {
        transform: translateX(0);
    }
}

.main1 .slide-l .content .txt2 {
    position: relative;
    right: calc(-3* var(--vw-base));
    /* width: calc(595* var(--vw-base)); */
    margin-left: calc(-87* var(--vw-base));
    margin-top: calc(29* var(--vw-base));
    color: #b3b3b3;
    font-size: calc(21* var(--vw-base));
    font-family: "Lato-Regular";
    letter-spacing: 0.25em;
    text-align: right;
    animation: moveLeft 1.6s ease 0.3s forwards;
    transform: translateX(calc(-100* var(--vw-base)));
}

@keyframes moveLeft {
    from {
        transform: translateX(calc(-100* var(--vw-base)));
    }

    to {
        transform: translateX(0);
    }
}

.main1 .slide-l .content .redline {
    position: absolute;
    width: calc(228* var(--vw-base));
    height: 1px;
    bottom: calc(-57* var(--vw-base));
    left: calc(-82* var(--vw-base));
    background-color: #ff4200;
    clip-path: inset(0% 100% 0 100%);
    animation: clip-path-right 2s ease 0.5s forwards;
}

@keyframes clip-path-right {
    from {
        clip-path: inset(0% 100% 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

.main1 .slide-l .content .cn {
    position: absolute;
    left: calc(160* var(--vw-base));
    bottom: calc(-70* var(--vw-base));
    color: #ffffff;
    font-size: calc(22* var(--vw-base));
    font-family: "Noto Sans TC";
    font-weight: 400;
    letter-spacing: 0.15em;
    opacity: 0;
    animation: opacity 2s ease 1.8s forwards;
}

.main2 {
    width: 100%;
    height: calc(950 * var(--vw-base));
    position: relative;
    background-image: url(../img/index/bg2.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    box-sizing: border-box;
    padding-top: calc(153* var(--vw-base));
    overflow: hidden;
}

.swiper2 {
    width: 100%;

}

.main2-title {
    position: absolute;
    top: calc(calc(153* var(--vw-base)));
    left: calc(1058* var(--vw-base));
    z-index: 3;
}

.main2-title h1 {
    color: #313131;
    font-family: "Noto Sans TC";
    font-weight: 400;
    font-size: calc(30* var(--vw-base));
    letter-spacing: 0.05em;
}

.main2-title h1 .en {
    color: #ff4200;
    font-family: "Lato-Regular";
    font-weight: bold;
    font-size: calc(40* var(--vw-base));
    letter-spacing: 0.2em;
}

.main2-title h2 {
    color: #b3b3b3;
    font-family: "Lato-Light";
    font-size: calc(20* var(--vw-base));
    letter-spacing: 0.05em;
    margin-top: calc(20* var(--vw-base));
}

.main2 .btns {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: calc(220* var(--vw-base));
    margin-top: calc(20* var(--vw-base));
}


.main2 .btns .hot-btn,
.main2 .btns .cls-btn {
    position: relative;
    /* 需要定位才能讓 ::after 有效 */
    color: #313131;
    font-family: "Noto Sans TC";
    font-weight: 400;
    font-size: calc(20* var(--vw-base));
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: color .8s ease;
    /* 只為 color 轉場 */
}

.main2 .btns .hot-btn.active,
.main2 .btns .cls-btn.active {
    color: #74912f;
}

.main2 .btns .hot-btn::after,
.main2 .btns .cls-btn::after {
    content: "";
    position: absolute;
    bottom: calc(-3* var(--vw-base));
    left: 0;
    width: 100%;
    height: calc(1* var(--vw-base));
    background-color: #74912f;
    transition: all .8s ease;
    clip-path: inset(0 100% 0 100%);
    ;
}

.main2 .btns .hot-btn.active::after,
.main2 .btns .cls-btn.active::after {
    width: 100%;
    left: 0;
    clip-path: inset(0 0 0 0);
    ;
}

.main2 .btns .redline {
    position: absolute;
    width: calc(181* var(--vw-base));
    height: 1px;
    top: calc(15* var(--vw-base));
    right: calc(-365* var(--vw-base));
    background-color: #ff4200;
}

.main2 .btns .grayline {
    position: absolute;
    width: 1px;
    height: 85%;
    top: 10%;
    left: 50%;
    background-color: #000000;
}


.main2 .swiper-wrapper {
    height: calc(540* var(--vw-base));
}

.main2 .swiper-slide {
    display: flex;
    gap: calc(95* var(--vw-base));
}

.main2 .sw-img {
    position: relative;
    width: calc(958* var(--vw-base));
    height: calc(540* var(--vw-base));
    flex-shrink: 0;
}

.main2 .pic-txt {
    position: absolute;
    bottom: calc(5* var(--vw-base));
    right: calc(5* var(--vw-base));
    color: #fff;
    font-size: calc(15* var(--vw-base));
    font-family: "Noto Sans TC";
    font-weight: 400;
    letter-spacing: 0.1em;
}

.main2 .sw-txt {
    position: relative;
    height: calc(540* var(--vw-base));
}

.main2 .sw-txt h3 {
    position: relative;
    margin-top: calc(223* var(--vw-base));
    color: #000;
    font-size: calc(25* var(--vw-base));
    font-family: "Noto Sans TC";
    font-weight: 400;
    letter-spacing: 0.05em;
}

.main2 .sw-txt h3 .h3-city {
    font-size: calc(20* var(--vw-base));
}

.main2 .sw-txt h3 {
    color: #000;
    font-size: calc(25* var(--vw-base));
    font-family: "Noto Sans TC";
    font-weight: 400;
    letter-spacing: 0.05em;
}

.main2 .sw-txt h4 {
    color: #313131;
    width: calc(540* var(--vw-base));
    font-size: calc(20* var(--vw-base));
    font-family: "Noto Sans TC";
    font-weight: 400;
    letter-spacing: 0.2em;
    line-height: calc(37* var(--vw-base));
}

.main2 .more {
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(160* var(--vw-base));
    height: calc(37* var(--vw-base));
    border: #313131 calc(1* var(--vw-base)) solid;
    color: #313131;
    font-family: "Noto Sans TC";
    font-weight: 400;
    font-size: calc(20* var(--vw-base));
    letter-spacing: 0.05em;
    text-align: center;
    cursor: pointer;
    line-height: calc(38* var(--vw-base));
    transition: all .8s ease;
}

.main2 .more:hover {
    border: #74912f calc(1* var(--vw-base)) solid;
    color: #74912f;
    transition: all 0.6s;
}

.main2 .swiepr-btn {
    position: relative;
    width: calc(958* var(--vw-base));
    height: calc(38* var(--vw-base));
    display: flex;
    justify-content: end;
    align-items: end;
}

.main2 .btn-line {
    position: relative;
    margin-right: calc(5* var(--vw-base));
    width: calc(342* var(--vw-base));
    height: calc(2* var(--vw-base));
    background-color: #313131;
}

.main2 .btn-line .progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #74912f;
    width: 50%;
    transition: width 0.6s ease-in-out;
}

.main2 .pjtindex {
    position: relative;
    margin-right: calc(20* var(--vw-base));
    top: calc(2* var(--vw-base));
    color: #000000;
    font-family: "Lato-Light";
    font-size: calc(20* var(--vw-base));
    letter-spacing: 0.05em;
    line-height: calc(20* var(--vw-base));
}

.sw2-prev {
    position: relative;
    margin-right: calc(38* var(--vw-base));
    width: calc(20* var(--vw-base));
    height: calc(20* var(--vw-base));
    cursor: pointer;
    background-color: #000;
    mask-image: url(../img/index/main2-prev.png);
    mask-repeat: no-repeat;
    mask-size: 80% 100%;
    mask-position: center;
}

.sw2-next {
    position: relative;
    margin-right: calc(5* var(--vw-base));
    width: calc(20* var(--vw-base));
    height: calc(20* var(--vw-base));
    cursor: pointer;
    background-color: #000;
    mask-image: url(../img/index/main2-next.png);
    mask-repeat: no-repeat;
    mask-size: 80% 100%;
    mask-position: center;
}

.sw2-prev:active,
.sw2-next:active {
    background-color: #74912f;
}


.sw2-prev img,
.sw2-next img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.swiper-hot,
.swiper-classic {
    display: none;
}

.swiper-hot.active,
.swiper-classic.active {
    display: block;
}

.main2-error-txt{
    display: none;
    position: absolute;
    top: 50%;
    left: 30%;
    transform: translate(-50%, -50%);
    color: #313131;
    font-family: "Noto Sans TC";
    font-weight: 400;
    font-size: calc(40* var(--vw-base));
    letter-spacing: 0.05em;
}

.main3 {
    position: relative;
    width: 100%;
    height: calc(1018* var(--vw-base));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding-top: calc(100* var(--vw-base));
}

.main3-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.main3-bg img {
    width: 130%;
    /* 設定寬度比容器大，保證圖片有橫向空間 */
    height: auto;
    position: absolute;
    left: -10%;
}

.main3 .content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main3 h1 {
    color: #ffffff;
    font-size: calc(30* var(--vw-base));
    font-family: "Noto Sans TC";
    font-weight: 400;
    letter-spacing: 0.05em;
    /* line-height: calc(37* var(--vw-base)); */
}

.main3 h1 .en {
    display: inline-block;
    position: relative;
    top: calc(4* var(--vw-base));
    color: #ffffff;
    font-family: "Lato-Regular";
    font-size: calc(40* var(--vw-base));
    font-weight: bold;
    letter-spacing: 0.2em;
}

.main3 h2 {
    position: relative;
    margin-top: calc(25* var(--vw-base));
    color: #b3b3b3;
    font-size: calc(20* var(--vw-base));
    font-family: "Lato-Light";
    letter-spacing: 0.05em;
}

.main3 .h3 {
    position: relative;
    margin-top: calc(22* var(--vw-base));
    color: #ffffff;
    font-size: calc(30* var(--vw-base));
    font-family: "Noto Sans TC";
    font-weight: 400;
    letter-spacing: 0.05em;
}

.main3 h4 {
    position: relative;
    margin-top: calc(38* var(--vw-base));
    color: #ffffff;
    font-size: calc(20* var(--vw-base));
    font-family: "Noto Sans TC";
    font-weight: 300;
    letter-spacing: 0.05em;
    line-height: calc(36* var(--vw-base));
    text-align: center;
}

.main3 .more {
    position: relative;
    margin-top: calc(32* var(--vw-base));
    width: calc(159* var(--vw-base));
    height: calc(37* var(--vw-base));
    color: #ffffff;
    font-size: calc(20* var(--vw-base));
    font-family: "Noto Sans TC";
    font-weight: 300;
    letter-spacing: 0.05em;
    background-color: #ffffff41;
    border: #ffffff calc(1* var(--vw-base)) solid;
    text-align: center;
    line-height: calc(37* var(--vw-base));
    cursor: pointer;
    transition: all 0.6s;
}

.main3 .more:hover {
    border: #74912f calc(1* var(--vw-base)) solid;
    background-color: #b1d45e59;
    transition: all 0.6s;

}

.main3-redline-l {
    position: absolute;
    top: 50%;
    left: calc(-175* var(--vw-base));
    width: calc(160* var(--vw-base));
    height: 1px;
    background-color: #ff4200;
}

.main3-redline-r {
    position: absolute;
    top: 50%;
    right: calc(-175* var(--vw-base));
    width: calc(160* var(--vw-base));
    height: 1px;
    background-color: #ff4200;
}

.main3-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(1920* var(--vw-base));
}

.main3-bottom-conetnt {
    position: relative;
}

.main3 .bot-txt {
    position: relative;
    width: 100%;
}

.main3 .bot-txt {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.main3 .circle {
    position: absolute;
    width: calc(1* var(--vw-base));
    height: calc(1* var(--vw-base));
}

.main3 .circle-center {
    position: relative;
    width: calc(140* var(--vw-base));
    height: calc(140* var(--vw-base));
    border-radius: 50%;
    background-color: #ffffff;
    /* transform: translate(-50%, -50%); */

    display: flex;
    justify-content: center;
    align-items: center;
}

.main3 .circle-txt {
    position: relative;
    color: #313131;
    font-size: calc(25* var(--vw-base));
    font-family: "Noto Sans TC";
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: calc(36* var(--vw-base));
}

.circle-br1 {
    position: absolute;
    width: calc(140* var(--vw-base));
    height: calc(140* var(--vw-base));
    border-radius: 50%;
    border: #ffffff calc(1* var(--vw-base)) solid;
    animation: expandFade 3s infinite;
    /* 3秒動畫，無限循環 */
    transform-origin: center;
}

.circle-br2 {
    position: absolute;
    width: calc(140* var(--vw-base));
    height: calc(140* var(--vw-base));
    border-radius: 50%;
    border: #ffffff calc(1* var(--vw-base)) solid;
    animation: expandFade 3s infinite;
    /* 3秒動畫，無限循環 */
    animation-delay: 2s;
    transform-origin: center;
}

@keyframes expandFade {
    0% {
        transform: scale(.8);
        opacity: 1;
    }

    /* 50% {
        transform: scale(1);
        opacity: 1;
    } */
    100% {
        transform: scale(1.5);
        /* 可以調整最終大小 */
        opacity: 0;
    }
}


.main3 .circle-1 {
    position: absolute;
    left: calc(470* var(--vw-base));
    bottom: calc(390* var(--vw-base));
}

.main3 .circle-2 {
    position: absolute;
    left: calc(885* var(--vw-base));
    bottom: calc(460* var(--vw-base));
}

.main3 .circle-3 {
    position: absolute;
    left: calc(1292* var(--vw-base));
    bottom: calc(390* var(--vw-base));
}

.main4 {
    position: relative;
    width: 100%;
    height: calc(678* var(--vw-base));
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(110* var(--vw-base));
}

.main4 .main4-txt {
    position: relative;
}

.main4 .main4-txt h1 {
    position: relative;
    color: #313131;
    font-size: calc(30* var(--vw-base));
    font-family: "Noto Sans TC";
    font-weight: 400;
    letter-spacing: 0.05em;
}

.main4 .main4-txt h1 .en {
    color: #ff4200;
    font-size: calc(40* var(--vw-base));
    font-family: "Lato-Bold";
    letter-spacing: 0.2em;
}

.main4-txt h2 {
    position: relative;
    margin-top: calc(20* var(--vw-base));
    color: #b3b3b3;
    font-size: calc(20* var(--vw-base));
    font-family: "Lato-Light";
    letter-spacing: 0.05em;
}

.main4-redline {
    position: absolute;
    width: calc(178* var(--vw-base));
    height: 1px;
    background-color: #ff4200;
    bottom: calc(-36* var(--vw-base));
    right: calc(50* var(--vw-base));
}

.main4-btns {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: calc(68* var(--vw-base));
}

.btn-work,
.btn-pen {
    position: relative;
    width: calc(237* var(--vw-base));
    height: calc(237* var(--vw-base));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    gap: calc(15* var(--vw-base));
    border-radius: 50%;
    border: #000000 calc(3* var(--vw-base)) solid;
    color: #313131;
    font-size: calc(20* var(--vw-base));
    font-family: "Noto Sans TC";
    font-weight: 300;
    letter-spacing: 0.05em;
    opacity: 0;
}

.btn-work:hover,
.btn-pen:hover {
    /* 放大比例 */
    border-color: #74912f;
    /* 更改邊框顏色 */
    color: #74912f;
    /* 更改字體顏色 */
}

.work-pic {
    width: calc(90* var(--vw-base));
    height: calc(82* var(--vw-base));
    background-color: #000;
    mask-image: url(../img/index/work.png);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.pen-pic {
    width: calc(95* var(--vw-base));
    height: calc(82* var(--vw-base));
    background-color: #000;
    mask-image: url(../img/index/pen.png);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.btn-work.hover-enabled:hover .work-pic,
.btn-pen.hover-enabled:hover .pen-pic {
    background-color: #74912f;
    transition: all 0.6s;
}

.btn-work.hover-enabled:hover,
.btn-pen.hover-enabled:hover {
    transform: scale(1.1);
    border-color: #74912f;
    color: #74912f;
    transition: all 0.6s;
    /* 只在 hover-enabled 狀態下添加 transition */
}