@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-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);
    /* 显示全部图片 */
}


body,
html {
    width: 100%;
    margin: 0;
    padding: 0;
    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;
}

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;
    background-color: #3e4444;
    box-sizing: border-box;
    padding-bottom: 15vw;
    opacity: 0;
    pointer-events: none;
}

.desktop {
    opacity: 1;
    pointer-events: auto;
}



/*全部*/

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

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

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

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

.main1 {
    position: relative;
    width: 100%;
    height: calc(950* var(--vw-base));
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main1-banner1 {
    position: relative;
    width: calc(1164* var(--vw-base));
    height: calc(534* var(--vw-base));
}

.scroll {
    width: 2.7vw;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    bottom: 5vw;
    z-index: 1;
    overflow: visible;
}

.scroll-li {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow: visible;
}

.scroll {
    animation: scroll 0.6s infinite alternate;
    transition-timing-function: ease-out;
}

@keyframes scroll {
    0% {
        bottom: 4vw;
    }

    100% {
        bottom: 5vw;
    }
}

.scroll1 {
    animation: scroll1 0.6s ease;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes scroll1 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.scroll2 {
    animation: scroll2 0.6s ease;
    animation-fill-mode: forwards;
    animation-delay: 0.6s;
    opacity: 0;
}

@keyframes scroll2 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.scroll3 {
    animation: scroll3 0.6s ease;
    animation-fill-mode: forwards;
    animation-delay: 1.2s;
    opacity: 0;
}

@keyframes scroll3 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

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

.main2-contain {
    position: absolute;
    left: calc(212* var(--vw-base));
    top: calc(334* var(--vw-base));
    width: calc(445* var(--vw-base));
}

.main2-txt1 {
    position: relative;
    color: #fff;
    font-size: calc(28* var(--vw-base));
    font-family: "Noto Sans TC";
    font-weight: 400;
    letter-spacing: 0.3em;
    line-height: calc(45* var(--vw-base));
    width: 100%;
}

.main2-txt2 {
    position: relative;
    margin-top: calc(15* var(--vw-base));
    color: #fff;
    font-size: calc(18* var(--vw-base));
    font-family: "Noto Sans TC";
    font-weight: 300;
    letter-spacing: 0.1em;
    line-height: calc(35* var(--vw-base));
    text-align: justify;
}

.main2-redline {
    position: absolute;
    top: calc(-10 * var(--vw-base));
    right: 0;
    width: calc(480 * var(--vw-base));
    height: 0px;
    border-top: #ff6012 1px solid;
    transform: scaleY(0.7);
    /* 縮小到 0.25px 的效果 */
    transform-origin: top;
    /* 保持縮放效果從邊框的頂部起作用 */
}


.main2-about {
    position: absolute;
    left: calc(-97* var(--vw-base));
    top: calc(-63* var(--vw-base));
    font-size: calc(55* var(--vw-base));
    font-family: "Futura Std Book";
    letter-spacing: 0.18em;
    color: transparent;
    -webkit-text-stroke: calc(.4*var(--vw-base)) #fff;
}

.main2-red {
    -webkit-text-stroke: calc(.55*var(--vw-base)) #ff6012;
}

.main2-us {
    position: absolute;
    left: calc(-102* var(--vw-base));
    top: calc(-10* var(--vw-base));
    font-size: calc(55* var(--vw-base));
    font-family: "Futura Std Book";
    letter-spacing: 0.18em;
    color: transparent;
    -webkit-text-stroke: calc(.4*var(--vw-base)) #fff;
}

.main2-contain .more {
    position: absolute;
    top: calc(-48 * var(--vw-base));
    right: calc(-7* var(--vw-base));
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    width: calc(118* var(--vw-base));
    justify-content: space-between;
    border-bottom: #1a1a1a calc(1 * var(--vw-base)) solid;
    cursor: pointer;

}

.main2-contain .more .txtl {
    position: relative;
    font-size: calc(15 * var(--vw-base));
    font-family: "Futura Std Light";
    letter-spacing: 0.25em;
    transition: all 0.5s linear;
}

.main2-contain:hover .more .txtl {
    color: #ff6012;
}

.main2-contain .more .txtr2 {
    position: relative;
    font-size: calc(15 * var(--vw-base));
}

.main2-contain .more .txtr {
    overflow: hidden;

}

.main2-contain:hover .more .txtr2 {
    animation: mask-arrow-ani 1.5s ease-in-out;
    animation-fill-mode: forwards;

}

.main3 {
    position: relative;
    width: 100%;
    height: calc(1226* var(--vw-base));
    box-sizing: border-box;
    padding: calc(374* var(--vw-base)) 0 0 0;
    display: flex;
    overflow: hidden;
}

.main3-doll1 {
    position: relative;
    width: 100%;
    height: calc(528* var(--vw-base));
    display: flex;
    flex-direction: row-reverse;
    gap: calc(12* var(--vw-base));
}

.main3-swiper1 {
    position: relative;
    width: calc(1626* var(--vw-base));
    height: 100%;
    flex-shrink: 0;
    overflow: visible;
}

.main3-sw-glass {
    position: absolute;
    left: calc(294* var(--vw-base));
    top: 0;
    height: 100%;
    background-color: crimson;
    z-index: 10;
    width: calc(938* var(--vw-base));
}

.main3-swiper1 .swiper-slide {
    position: relative;
    display: flex;
    align-items: center;
    gap: calc(144* var(--vw-base));
}

.main3-swiper1 .swiper-slide-active {
    animation: opacity-ani .6s ease-in-out 0s forwards;
}

.main3-swiper1 .swiper-slide-prev,
.main3-swiper1 .swiper-slide-next {
    animation: opacity-ani-out 0.6s ease-in-out 0s forwards;
}

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

    100% {
        opacity: 1;
    }

}

@keyframes opacity-ani-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.main3-swiper1 .sw-pic {
    position: relative;
    display: block;
    height: 100%;
    width: calc(938* var(--vw-base));
    box-shadow: rgba(0, 0, 0, 0.322) 0px 0px 7px 4px;
    pointer-events: auto;
}

.main3-arrow-l {
    position: absolute;
    left: 0;
    bottom: calc(-60* var(--vw-base));
    width: calc(17* var(--vw-base));
    height: calc(32* var(--vw-base));
    background-color: #fff;
    mask-image: url(../img/index/arrow-l.png);
    mask-repeat: no-repeat;
    mask-size: contain;
    cursor: pointer;
    transition: all 0.3s ease;
}

.main3-arrow-r {
    position: absolute;
    left: calc(50* var(--vw-base));
    bottom: calc(-60* var(--vw-base));
    width: calc(17* var(--vw-base));
    height: calc(32* var(--vw-base));
    background-color: #fff;
    mask-image: url(../img/index/arrow-r.png);
    mask-repeat: no-repeat;
    mask-size: contain;
    cursor: pointer;
    transition: all 0.3s ease;
}

.main3-arrow-l:hover,
.main3-arrow-r:hover {
    background-color: #ff6012;
}

.sw-title {
    position: absolute;
    left: 0;
    top: calc(-48* var(--vw-base));
    display: flex;
    align-items: center;
    gap: calc(15* var(--vw-base));
}

.hot-name {
    position: relative;
    color: #fff;
    font-size: calc(30* var(--vw-base));
    font-family: "Noto Sans TC";
    font-weight: 400;
    letter-spacing: 0.3em;
}

.hot-city {
    position: relative;
    top: calc(5* var(--vw-base));
    color: #cccccc;
    font-size: calc(15* var(--vw-base));
    font-family: "Futura Std Book";
    letter-spacing: 0.18em;
}

.main3-doll2 {
    position: relative;
    width: calc(364 * var(--vw-base));
    display: flex;
    flex-direction: column;
    justify-content: end;

}


.main3-swiper2,
.main3-swiper3 {
    position: relative;
    width: 100%;
    height: calc(204 * var(--vw-base));
    box-shadow: rgba(0, 0, 0, 0.329) 0px 0px 6px 1px;
    overflow-y: visible;
    /* 避免圖片放大溢出容器 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* 平滑過渡 */
}

.main3-swiper2 img,
.main3-swiper3 img {
    width: 100%;
    height: 100%;
    filter: brightness(80%) saturate(30%);
    transition: all 0.3s ease;
    /* 平滑過渡濾鏡效果 */
    object-fit: cover;
}

.main3-swiper2:hover,
.main3-swiper3:hover {
    transform: scale(1.02);
    /* 放大 5% */
    box-shadow: rgba(0, 0, 0, 0.5) 0px 10px 15px;
    /* 陰影加深 */
}

.main3-swiper2:hover img,
.main3-swiper3:hover img {
    filter: none;
    /* 恢復原色 */
}

.main3-swiper2 {
    margin-bottom: calc(12* var(--vw-base));
    direction: rtl;
}

.main3-swiper2 .sw-pic,
.main3-swiper3 .sw-pic,
.main3-swiper2 .swiper-slide,
.main3-swiper3 .swiper-slide {
    position: relative;
    width: 100%;
    height: 100%;
}

.main3-swiper2 .swiper-slide-active,
.main3-swiper3 .swiper-slide-active {
    position: relative;
    width: 100%;
    height: 100%;
    animation: opacity-ani .6s ease-in-out 0s forwards;
}


.main3-swiper2 .swiper-slide-prev,
.main3-swiper2 .swiper-slide-next,
.main3-swiper3 .swiper-slide-prev,
.main3-swiper3 .swiper-slide-next {
    animation: opacity-ani-out 0.6s ease-in-out 0s forwards;
}


.main3-swiper2-two {
    margin-top: calc(5* var(--vw-base));
}

.main3-swiper2-two img {
    object-fit: cover;
    object-position: 100% 100%;
}

.sw-pic {
    background-color: #434343;
}


.main3-content {
    position: relative;
    width: calc(411* var(--vw-base));
    height: calc(415* var(--vw-base));
    box-sizing: border-box;
    border-bottom: #5a8184 calc(1* var(--vw-base)) solid;
    border-top: #5a8184 calc(1* var(--vw-base)) solid;
}

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

.main3-txt2 {
    position: relative;
    margin-top: calc(28* var(--vw-base));
    color: #fff;
    font-size: calc(18* var(--vw-base));
    font-family: "Noto Sans TC";
    font-weight: 300;
    letter-spacing: 0.15em;
    line-height: calc(30* var(--vw-base));
    text-align: justify;
}

.main3-nav {
    position: absolute;
    left: 0;
    bottom: calc(78* var(--vw-base));
    display: flex;
    align-items: center;
    gap: calc(26* var(--vw-base));
}

.main3-fb {
    position: relative;
    width: calc(12* var(--vw-base));
    height: calc(24* var(--vw-base));
    background-color: #fff;
    mask-image: url('../img/index/main3-fb.png');
    mask-repeat: no-repeat;
    mask-size: contain;
    cursor: pointer;
    transition: all 0.3s ease;
}

.main3-fb:hover {
    background-color: #ff6012;
}

.main3-link {
    position: relative;
    top: calc(-2* var(--vw-base));
    display: flex;
    align-items: center;
    gap: calc(8* var(--vw-base));
}

.main3-link-icon {
    position: relative;
    display: inline-block;
    width: calc(21* var(--vw-base));
    height: calc(21* var(--vw-base));
    background-color: #fff;
    mask-image: url('../img/index/main3-link.png');
    mask-repeat: no-repeat;
    mask-size: contain;
    cursor: pointer;
    transition: all 0.3s ease;
}

.main3-link:hover .main3-link-icon {
    background-color: #ff6012;
}

.main3-link-txt {
    position: relative;
    display: inline-block;
    color: #fff;
    font-size: calc(18* var(--vw-base));
    line-height: calc(18* var(--vw-base));
    font-family: "Noto Sans TC";
    font-weight: 300;
    letter-spacing: 0.3em;
}

.main3-more {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: calc(36* var(--vw-base));
    box-sizing: border-box;
    padding: calc(0* var(--vw-base)) calc(30* var(--vw-base)) 0 0;
    color: #fff;
    font-size: calc(15* var(--vw-base));
    font-family: "Futura Std Book";
    font-weight: 400;
    letter-spacing: 0.25em;
    display: flex;
    justify-content: space-between;
    transition: all 0.3s ease;
}

.more-txt {
    transition: all 0.3s ease;
}

.main3-more:hover .more-txt {
    color: #ff6012;
}

.main3-arrow {
    position: relative;
    width: calc(76* var(--vw-base));
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.main3-arrow2 {
    position: relative;
}

.main3-more:hover .main3-arrow2 {
    transition: all 0.3s ease;
    animation: mask-arrow-ani 1.5s ease-in-out;
    animation-fill-mode: forwards;
}

.main3-swiper .swiper-wrapper {
    pointer-events: auto;
}


.hot-logo {
    position: relative;
    align-self: flex-end;
    color: transparent;
    -webkit-text-stroke: calc(.4*var(--vw-base)) #fff;
    font-size: calc(60* var(--vw-base));
    line-height: calc(42* var(--vw-base));
    font-family: "Futura Std Book";
    letter-spacing: 0.18em;
    z-index: 1;
    box-sizing: border-box;
    padding: calc(0* var(--vw-base)) calc(70* var(--vw-base)) 0 0;
}

.hot-logo-green {
    -webkit-text-stroke: calc(.55*var(--vw-base)) #83dae2;

}

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

.main4-swiper {
    position: relative;
    height: 100%;
    width: calc(1481*2* var(--vw-base));
}

.main4-swiper .swiper-wrapper {
    transition-timing-function: linear;
}

.main4-grid1 {
    display: grid;
    grid-template-columns: calc(468* var(--vw-base)) calc(390* var(--vw-base)) calc(190* var(--vw-base)) 1fr;
    grid-template-rows: calc(390* var(--vw-base)) 1fr;
    height: 100%;
    gap: calc(8* var(--vw-base));
    width: calc(1481* var(--vw-base));
    box-sizing: border-box;
    padding-right: calc(8* var(--vw-base));
    /* 設定整體高度 */
}


.grid-item1-1 {
    position: relative;
    grid-row: span 2;
    grid-column: span 1;
    z-index: 5;
}

.grid-item1-2,
.grid-item1-3,
.grid-item1-4,
.grid-item1-6 {
    position: relative;
    grid-row: span 1;
    grid-column: span 1;
}

.grid-item1-3 {
    background-image: url(../img/index/main4-classic-bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-sizing: border-box;
    padding: calc(48* var(--vw-base)) 0 0 calc(161* var(--vw-base));
}


.classic-txt-cn {
    position: absolute;
    left: calc(35* var(--vw-base));
    top: calc(123* var(--vw-base));
    color: #fff;
    font-size: calc(24* var(--vw-base));
    font-family: "Noto Sans TC";
    font-weight: 400;
    line-height: calc(40* var(--vw-base));
}

.classic-txt-en {
    position: relative;
    transform: rotate(90deg);
    transform-origin: top left;
    color: transparent;
    -webkit-text-stroke: calc(.4*var(--vw-base)) #fff;
    font-size: calc(60* var(--vw-base));
    letter-spacing: 0.18em;
    line-height: calc(60 var(--vw-base));
    font-family: "Futura Std Book";
}

.classic-green-line {
    position: absolute;
    left: calc(16* var(--vw-base));
    top: 0;
    width: calc(1* var(--vw-base));
    height: 100%;
    background-color: #83dae2;
}

.grid-item1-5 {
    position: relative;
    grid-row: span 1;
    grid-column: span 2;
}

.green-stick {
    position: absolute;
    z-index: -1;
    left: calc(-15* var(--vw-base));
    top: 0;
    width: calc(20* var(--vw-base));
    height: 100%;
    background-color: #83dae2;
}

.main4-grid2 {
    display: grid;
    grid-template-columns: calc(468* var(--vw-base)) calc(390* var(--vw-base)) calc(190* var(--vw-base)) 1fr;
    grid-template-rows: calc(390* var(--vw-base)) 1fr;
    height: 100%;
    gap: calc(8* var(--vw-base));
    width: calc(1481* var(--vw-base));
    box-sizing: border-box;
    padding-right: calc(8* var(--vw-base));
}

.main4-pic {
    z-index: 2;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #0000006b;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s linear;
    opacity: 0;
}

.main4-pic:hover {
    opacity: 1;
}

.main4-pic-txt {
    color: #fff;
    font-size: calc(25* var(--vw-base));
    font-family: "Noto Sans TC";
    font-weight: 400;
    letter-spacing: 0.3em;
    text-align: center;
}


.grid-item2-1 {
    position: relative;
    grid-row: span 2;
    grid-column: span 1;
    z-index: 5;
}

.grid-item2-3,
.grid-item2-4,
.grid-item2-5,
.grid-item2-6 {
    position: relative;
    grid-row: span 1;
    grid-column: span 1;
}

.grid-item2-2 {
    position: relative;
    grid-row: span 1;
    grid-column: span 2;
}

.grid-item2-5 {
    background-image: url(../img/index/main4-classic-bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-sizing: border-box;
    padding: calc(48* var(--vw-base)) 0 0 calc(161* var(--vw-base));
}

.main4-grid1>div,
.main4-grid2>div {
    background-color: #434343;
}


.main5 {
    position: relative;
    width: 100%;
    height: calc(1172* var(--vw-base));
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding: calc(280* var(--vw-base)) 0 0 0;
}

.main5-title {
    position: relative;
    font-size: calc(60* var(--vw-base));
    font-family: "Futura Std Book";
    letter-spacing: 0.18em;
    color: transparent;
    -webkit-text-stroke: calc(.4*var(--vw-base)) #fff;
}

.main5-title-red {
    -webkit-text-stroke: calc(.55*var(--vw-base)) #ff6012;
}

.main5-red-line {
    position: relative;
    margin-top: calc(51* var(--vw-base));
    width: calc(1415* var(--vw-base));
    height: 1px;
    background-color: #ff6012;
}

.main5-content {
    position: relative;
    width: calc(1415* var(--vw-base));
    margin-top: calc(107* var(--vw-base));
    display: flex;
    justify-content: space-between;
}

.main5-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.item-title {
    position: relative;
    color: #fff;
    font-size: calc(30* var(--vw-base));
    font-family: "Futura Std Book";
    letter-spacing: 0.2em;
}

.item-title-red {
    position: relative;
    color: #ff6012;
}

.item-btn {
    position: relative;
    margin-top: calc(20* var(--vw-base));
    width: calc(622* var(--vw-base));
    height: calc(320* var(--vw-base));
    background-color: #fff;
    border-radius: calc(160* var(--vw-base)) 0 calc(160* var(--vw-base)) calc(160* var(--vw-base));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: calc(73* var(--vw-base)) 0 calc(85* var(--vw-base)) 0;
    transition: all 0.4s linear;
    overflow: hidden;
    /* border: 1.5px solid transparent; */
}

.item-btn:hover {
    border-radius: calc(160* var(--vw-base));
    border: 1.5px solid #ff6012;
    overflow: hidden;
}

.item-btn .more {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #1a1a1a;
    width: calc(118* var(--vw-base));
    justify-content: space-between;
    border-bottom: #1a1a1a calc(1 * var(--vw-base)) solid;
    cursor: pointer;

}

.item-btn .more .txtl {
    position: relative;
    font-size: calc(15 * var(--vw-base));
    font-family: "Futura Std Light";
    letter-spacing: 0.25em;
    transition: all 0.5s linear;
}

.item-btn:hover .more .txtl {
    color: #ff6012;
}

.item-btn .more .txtr2 {
    position: relative;
    font-size: calc(15 * var(--vw-base));
}

.item-btn .more .txtr {
    overflow: hidden;

}

.item-btn:hover .more .txtr2 {
    animation: mask-arrow-ani 1.5s ease-in-out;
    animation-fill-mode: forwards;

}

@keyframes mask-arrow-ani {
    0% {
        right: 0;
    }

    50% {
        right: -100%;
    }

    51% {
        right: 100%;
    }

    100% {
        right: 0;
    }
}

.item-pic-1 {
    position: relative;
    width: calc(115* var(--vw-base));
    height: calc(115* var(--vw-base));
}

.item-pic-2 {
    position: relative;
    width: calc(95* var(--vw-base));
    height: calc(64* var(--vw-base));
}

.item-pic-1 img,
.item-pic-2 img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: all 0.4s ease;
}

.item-btn:hover .item-pic-1 img,
.item-btn:hover .item-pic-2 img {
    transform: scale(1.1);
}

.main5-triangle {
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 1.3vw 1.3vw 0;
    border-color: transparent #ff6012 transparent transparent;
    transition: all 0.5s ease;
}

.bottom-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* height: calc(1769* var(--vw-base)); */
}