@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: "Futura Std Light";
    src: url(../fonts/Futura\ Std\ Light.otf);
}

@font-face {
    font-family: "Futura Std Book";
    src: url(../fonts/Futura\ Std\ Book.otf);
}

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

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

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

[data-aos="opacity-up"].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);
    /* 显示全部图片 */
}

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

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

[data-aos="custom-zoom"]>img {
    transform: scale(1.2);
    transition: transform 3s ease-in-out;
    transition-delay: .4s;
}

[data-aos="custom-zoom"].aos-animate>img {
    transform: scale(1);

}


body,
html {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #3e4444;
    scroll-behavior: smooth;
    --vw-base: calc(100vw / 1920);
}

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



ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

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

img,
video {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pic-txt {
    position: absolute;
    bottom: calc(15* var(--vw-base));
    right: calc(15* var(--vw-base));
    color: #fff;
    font-size: calc(20* var(--vw-base));
    font-family: "Noto Sans TC";
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: calc(20* var(--vw-base));
    z-index: 10;
}

.container {
    width: 100%;
    min-height: 100vh;
    position: relative;
    box-sizing: border-box;
    padding-bottom: 15vw;
}


/*全部*/

.circle {
    width: 50vw;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

.bottom-bg {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
}

.logo-shadow {
    position: fixed;
    width: calc(635* var(--vw-base));
    height: calc(199* var(--vw-base));
    z-index: 5;
    opacity: 1;
    transition: opacity .6s ease;
    pointer-events: none;
}

h1 {
    color: #83dae2;
    font-size: calc(30* var(--vw-base));
    font-family: "Noto Sans TC";
    font-weight: 400;
    letter-spacing: 0.3em;
}

h2 {
    color: #ffffff;
    font-size: calc(18* var(--vw-base));
    font-family: "Noto Sans TC";
    font-weight: 300;
}

.main1 {
    position: relative;
    width: 100%;
    height: calc(2060* var(--vw-base));
    overflow: hidden;
}

.main1 h1 {
    letter-spacing: 0.3em;
}

.main1 h2 {
    letter-spacing: 0.1em;
    line-height: calc(40* var(--vw-base));
}

.pic-scroll {
    position: relative;
    left: -20%;
    height: 100%;
    width: 130%;
}

.main1-pic1 {
    position: absolute;
    left: 0;
    top: calc(288* var(--vw-base));
    width: calc(768* var(--vw-base));
    height: calc(866* var(--vw-base));
    overflow: hidden;
}

.main1-pic2 {
    position: absolute;
    left: calc(717* var(--vw-base));
    top: calc(913* var(--vw-base));
    width: calc(358* var(--vw-base));
    height: calc(403* var(--vw-base));
    overflow: hidden;
}

.main1-pic3 {
    position: absolute;
    right: calc(-70* var(--vw-base));
    bottom: calc(315* var(--vw-base));
    width: calc(298* var(--vw-base));
    height: calc(263* var(--vw-base));
}

.main1-pic4 {
    position: absolute;
    left: calc(0* var(--vw-base));
    bottom: calc(0* var(--vw-base));
    width: calc(489* var(--vw-base));
    height: calc(263* var(--vw-base));
}

.main1-txt1 {
    position: absolute;
    left: calc(1125* var(--vw-base));
    top: calc(587* var(--vw-base));
    width: calc(643* var(--vw-base));
}

.main1-txt2 {
    position: absolute;
    left: calc(0* var(--vw-base));
    bottom: calc(317* var(--vw-base));
    width: 100%;
    text-align: center;
}

.main1-txt2 h1 {
    margin-bottom: calc(40* var(--vw-base));
}

.main1-txt2 h2 {
    margin-bottom: calc(40* var(--vw-base));
}

.main1-title-ab,
.main1-title-out {
    position: absolute;
    left: calc(1106* var(--vw-base));
    top: calc(215* var(--vw-base));
    width: calc(314* var(--vw-base));
    height: calc(168* var(--vw-base));
}

.main1-title-ab img,
.main1-title-out img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 0% 0%;
}

.redline-row {
    position: absolute;
    top: calc(314* var(--vw-base));
    left: 0;
    width: calc(1231* var(--vw-base));
    height: 1px;
}

.redline-col {
    position: absolute;
    top: calc(85* var(--vw-base));
    left: calc(1231* var(--vw-base));
    width: 1px;
    height: calc(490* var(--vw-base));
}

.redline-col>div {
    background-color: #ff6012;
}

.redline-row>div {
    background-color: #ff6012;
}

.line-scaleY {
    width: 100%;
    height: 100%;
    will-change: transform;
    transform: scaleY(0.7) !important;
    transition: transform .1s ease;
}

.line-scaleX {
    width: 100%;
    height: 100%;
    will-change: transform;
    transform: scaleX(0.7) !important;
    transition: transform .1s ease;
}

.main2 {
    position: relative;
    width: 100%;
}

.main2-first {
    position: relative;
    width: 100%;
    height: calc(705* var(--vw-base));
}

.main2-wall {
    position: absolute;
    right: calc(150* var(--vw-base));
    bottom: 0;
    width: calc(1043* var(--vw-base));
    height: calc(595* var(--vw-base));
}

.main2-wall img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 0% 100%;
}

.wall-txt {
    position: absolute;
    left: calc(314* var(--vw-base));
    top: calc(370* var(--vw-base));
    width: calc(638* var(--vw-base));
}

.main2-content {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: calc(227* var(--vw-base));
}

.main2-source {
    position: relative;
    width: 100%;
    height: calc(534* var(--vw-base));
    display: flex;
    gap: calc(75* var(--vw-base));
}

.source-re {
    flex-direction: row-reverse;
}

.main2-pic {
    position: relative;
    height: 100%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    gap: calc(9* var(--vw-base));
}

.main2-pic0 {
    position: relative;
    height: 100%;
    width: calc(1330* var(--vw-base));
}

.main2-pic1 {
    position: relative;
    height: 100%;
    width: calc(967* var(--vw-base));
    overflow: hidden;
}

.main2-pic2 {
    position: relative;
    height: 100%;
    width: calc(352* var(--vw-base));
    overflow: hidden;
}

.main2-pic3 {
    position: relative;
    height: 100%;
    width: calc(831* var(--vw-base));
    overflow: hidden;
}

.main2-pic4 {
    position: relative;
    height: 100%;
    width: calc(423* var(--vw-base));
    overflow: hidden;
}

.main2-txt {
    position: relative;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    padding-top: calc(140* var(--vw-base));
    width: calc(432* var(--vw-base));
}


.main2 h1 {
    font-size: calc(28* var(--vw-base));
    margin-bottom: calc(40* var(--vw-base));
    letter-spacing: 0.1em;
}

.main2 h2 {
    letter-spacing: 0.1em;
    line-height: calc(35* var(--vw-base));
}

.main2-redline1 {
    position: absolute;
    left: calc(222* var(--vw-base));
    top: 0;
    height: calc(443* var(--vw-base));
    width: 1px;
}

.main2-redline2 {
    position: absolute;
    left: calc(286* var(--vw-base));
    top: calc(295* var(--vw-base));
    height: calc(425* var(--vw-base));
    width: 1px;
}

.main2-redline1>div,
.main2-redline2>div {
    background-color: #ff6012;
}

.main2-title-1 {
    position: absolute;
    left: calc(169* var(--vw-base));
    top: calc(228* var(--vw-base));
    color: #83dae2;
    font-size: calc(28* var(--vw-base));
    font-family: "Noto Sans TC";
    font-weight: 400;
    letter-spacing: 0.3em;
    line-height: calc(36* var(--vw-base));
}

.main2-title-2 {
    position: absolute;
    left: calc(240* var(--vw-base));
    top: calc(288* var(--vw-base));
    color: #83dae2;
    font-size: calc(28* var(--vw-base));
    font-family: "Noto Sans TC";
    font-weight: 400;
    letter-spacing: 0.3em;
    line-height: calc(36* var(--vw-base));
}

.main2-title-up {
    display: block;
    margin-top: calc(-18* var(--vw-base));
}

.main3 {
    position: relative;
    width: 100%;
    height: calc(2480* var(--vw-base));
}

.main3-bg {
    position: absolute;
    left: 0;
    top: calc(323* var(--vw-base));
    width: 100%;
    height: calc(974* var(--vw-base));
}

.main3-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 0% 0%;
}

.main3-company {
    position: absolute;
    left: calc(410* var(--vw-base));
    top: calc(612* var(--vw-base));
    width: calc(1051.1* var(--vw-base));
    height: calc(549.8* var(--vw-base));
}

.main3-rope {
    position: absolute;
    left: 0;
    top: calc(-20* var(--vw-base));
    width: 100%;
    height: 100%;
}

.company-logo {
    left: calc(400* var(--vw-base));
    top: calc(0* var(--vw-base));
    position: absolute;
    width: calc(279* var(--vw-base));
    height: calc(218* var(--vw-base));
}

.mirror {
    position: absolute;
    width: calc(188* var(--vw-base));
    height: calc(187* var(--vw-base));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    mask-image: url(../img/01/main3-mirror.png);
    mask-repeat: no-repeat;
    mask-size: contain;
}

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

.mr-txt {
    color: #fff;
    font-size: calc(27* var(--vw-base));
    font-family: "Noto Sans TC";
    font-weight: 400;
    line-height: calc(35.85* var(--vw-base));
    letter-spacing: 0.025em;
    text-align: center;
    z-index: 10;
    text-shadow: #3e4444 calc(2* var(--vw-base)) calc(2* var(--vw-base)) calc(5* var(--vw-base));
}

.mirror1 {
    left: 0;
    bottom: calc(242* var(--vw-base));
}

.mirror2 {
    left: calc(165* var(--vw-base));
    bottom: calc(56* var(--vw-base));
}

.mirror3 {
    left: calc(423* var(--vw-base));
    bottom: calc(0* var(--vw-base));
}

.mirror4 {
    right: calc(180* var(--vw-base));
    bottom: calc(56* var(--vw-base));
}

.mirror5 {
    right: 0;
    bottom: calc(242* var(--vw-base));
}

.main3-content {
    position: absolute;
    left: 0;
    top: calc(1582* var(--vw-base));
    width: 100%;
    height: calc(573* var(--vw-base));
}

.cup-txt {
    position: absolute;
    left: calc(214* var(--vw-base));
    top: calc(7* var(--vw-base));
    width: calc(318* var(--vw-base));
}

.cup-txt h1 {
    font-size: calc(28* var(--vw-base));
    letter-spacing: 0.1em;
    margin-bottom: calc(46* var(--vw-base));
}

.cup-txt h2 {
    font-size: calc(18* var(--vw-base));
    letter-spacing: 0.1em;
    line-height: calc(35* var(--vw-base));
}

.cup {
    position: absolute;
    width: calc(270* var(--vw-base));
    height: calc(470* var(--vw-base));
}

.cup img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cup1 {
    left: calc(657* var(--vw-base));
    top: calc(0* var(--vw-base));
}

.cup2 {
    left: calc(1064* var(--vw-base));
    top: calc(0* var(--vw-base));
}

.cup3 {
    left: calc(1460* var(--vw-base));
    top: calc(0* var(--vw-base));
}

.awards {
    position: absolute;
    left: calc(214* var(--vw-base));
    bottom: calc(132* var(--vw-base));
    font-size: calc(60* var(--vw-base));
    font-family: "Futura Std Medium";
    letter-spacing: 0.18em;
    color: transparent;
    -webkit-text-stroke: calc(.4*var(--vw-base)) #fff;
}

.and {
    position: absolute;
    left: calc(214* var(--vw-base));
    bottom: calc(68* var(--vw-base));
    font-size: calc(60* var(--vw-base));
    font-family: "Futura Std Medium";
    letter-spacing: 0.18em;
    color: transparent;
    -webkit-text-stroke: calc(.55*var(--vw-base)) #ff6012;
}

.acomplishment {
    position: absolute;
    left: calc(212* var(--vw-base));
    bottom: calc(0* var(--vw-base));
    font-size: calc(60* var(--vw-base));
    font-family: "Futura Std Medium";
    letter-spacing: 0.18em;
    color: transparent;
    -webkit-text-stroke: calc(.4*var(--vw-base)) #fff;
}

.main3-redline1 {
    position: absolute;
    left: calc(202* var(--vw-base));
    top: 0;
    height: calc(422* var(--vw-base));
    width: 1px;
}

.main3-redline2 {
    position: absolute;
    left: calc(202* var(--vw-base));
    top: calc(488* var(--vw-base));
    height: calc(1137* var(--vw-base));
    width: 1px;
}


.main3-redline1>div,
.main3-redline2>div {
    background-color: #ff6012;
}

.affiliated {
    position: absolute;
    left: calc(145* var(--vw-base));
    top: calc(417* var(--vw-base));
    font-size: calc(60* var(--vw-base));
    font-family: "Futura Std Medium";
    letter-spacing: 0.18em;
    color: transparent;
    -webkit-text-stroke: calc(.4*var(--vw-base)) #fff;
}

.red-txt {
    -webkit-text-stroke: calc(.4*var(--vw-base)) #ff6012;
    display: inline-block;
}


[data-aos="light-sweep"].aos-animate::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 80%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    opacity: 0;
    /* 初始掃光效果為透明 */
    animation: lightSweep 2.2s forwards;
    animation-delay: 2.4s;
    /* 延遲開始掃光動畫 */
    opacity: 1;
    /* 掃光效果顯示 */
}

/* 掃光動畫的 keyframes */
@keyframes lightSweep {
    0% {
        left: -150%;
    }

    100% {
        left: 150%;
    }
}

[data-aos="light-sweep"] {
    opacity: 0;
    transform: translateY(50%);
}


[data-aos="light-sweep"].aos-animate {
    opacity: 1;
    /* 顯示元素 */
    transform: translateY(0%);
}

[data-aos="rope-fade-up"] {
    opacity: 0;
    transform: translateY(calc(100* var(--vw-base)));
}

[data-aos="rope-fade-up"].aos-animate {
    /* 顯示元素 */
    transform: translateY(calc(0* var(--vw-base)));
    animation: rope-opacity 1.2s forwards 1s;
}

@keyframes rope-opacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.star {
    position: absolute;
    left: calc(305* var(--vw-base));
    bottom: calc(78* var(--vw-base));
    width: calc(84* var(--vw-base));
    height: calc(84* var(--vw-base));
}

.red-line-bottom {
    position: absolute;
    right: 0;
    bottom: calc(340* var(--vw-base));
    width: calc(1100* var(--vw-base));
    height: 1px;
}

.red-line-bottom>div {
    background-color: #ff6012;
}