@charset "utf-8";

body {
    font-family: 'Noto Serif TC', sans-serif;
    overflow-x: hidden;
}

.baskvill {
    font-family: 'Baskerville Old Face', serif;
}

.container {
    max-width: 1800px !important;
    margin: 0 auto;
}

.container2 {
    max-width: 1200px;
    margin: 0 auto;
}

.wrap {
    /* margin-top: 75px; */
    background-color: #ffffff;
    border-color: transparent;
}

/*bg*/
.text-d1c0a5 {
    color: #d1c0a5;
}

.bg-d1c0a5 {
    background-color: #d1c0a5;
}

.border-d1c0a5 {
    border-color: #d1c0a5;
}

/*line*/
.text-77664F {
    color: #77664f;
}

.bg-77664F {
    background-color: #77664f;
}

.border-77664F {
    border-color: #77664f;
}

/*wrd*/
.text-23170F {
    color: #23170f;
}

.bg-23170F {
    background-color: #23170f;
}

.border-23170F {
    border-color: #23170f;
}

ul:after,
section:after,
div:after,
li:after {
    content: '';
    display: block;
    clear: both;
}

/*headroom*/



.headroom--unpinned {
    display: none;
}

.headroom--pinned {
    display: block !important;
}

.headerbox {
    position: fixed;
    width: 100%;
    top: 0;
    padding: 30px 0;
    box-sizing: border-box;
    z-index: 10;
    transition: opacity 0.6s, padding 0.6s, background 0.6s, top 0.6s;
    /* background-color: transparent; */
    /* right: 0; */
    /* height: 130px; */
}

.headroom--not-top {
    background-color: #ffffff;
    box-shadow: 0 3px 10px 1px rgb(0 0 0 / 0.2);
    padding: 10px 0;
    /* height: 100px; */
}

.headroom--top {
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.55) 0%,
            rgba(255, 255, 255, 0) 100%);
    padding: 30px 0;
    transition: opacity 0.6s, padding 0.6s, background 0.6s, top 0.6s;
    /* background-color: transparent; */
    /* height: 120px; */
}

.headroom--unpinned .dropdown-content,
.headroom--pinned .dropdown-content {
    background-color: #bbbbbbb7;
}

.headroom--top .dropdown-content {
    background-color: #bbbbbbb7;
}

.weblogo2 {
    display: none;
}

.headroom--unpinned .weblogo1,
.headroom--pinned .weblogo1 {
    display: none;
}

.headroom--top .weblogo1 {
    display: block;
}

.headroom--unpinned .weblogo2,
.headroom--pinned .weblogo2 {
    display: block;
}

.headroom--top .weblogo2 {
    display: none;
}

.headroom--unpinned .open2,
.headroom--pinned .open2 {
    display: none;
}

.headroom--top .open2 {
    display: block;
}

.headroom--unpinned .open3,
.headroom--pinned .open3 {
    display: block;
}

.headroom--top .open3 {
    display: none;
}

.headroom--unpinned .close2,
.headroom--pinned .close2 {
    display: none;
}

.headroom--top .close2 {
    display: block;
}

.headroom--unpinned .close2,
.headroom--pinned .close2 {
    display: block;
}

.headroom--top .close2 {
    display: block;
}

.headroom--unpinned .menu .menuchange,
.headroom--pinned .menu .menuchange {
    color: #23170f;
}

.headroom--top .menu .menuchange {
    color: #ffffff;
}

.headroom--unpinned .menuwrd,
.headroom--pinned .menuwrd {
    color: #23170f;
}

.headroom--top .menuwrd {
    color: #ffffff;
}

.headroom--unpinned .dropdown-content a,
.headroom--pinned .dropdown-content a {
    color: #23170f;
}

.headroom--top .dropdown-content a {
    color: #ffffff;
}

.headroom--unpinned .lanline,
.headroom--pinned .lanline {
    border-color: #23170f;
}

.headroom--top .lanline {
    border-color: #77664f;
}

.headroom--unpinned .lan,
.headroom--pinned .lan {
    color: #23170f;
}

.headroom--top .lan {
    color: #ffffff;
}

.headroom--unpinned .menu li:hover::before,
.headroom--pinned .menu li:hover::before {
    background-color: #23170f;
}

.headroom--top .menu li:hover::before {
    background-color: #77664f;
}

.lanbtn2 {
    display: none;
}

.headroom--unpinned .lanbtn1,
.headroom--pinned .lanbtn1 {
    display: none;
}

.headroom--unpinned .lanbtn2,
.headroom--pinned .lanbtn2 {
    display: block;
}

.headroom--top .lanbtn1 {
    display: block;
}

.headroom--top .lanbtn2 {
    display: none;
}

.menu {
    display: flex;
}

.menubtn {
    display: none;
}

.rwdmenu {
    display: none;
}

.rwdmenulist {
    display: none;
}

.menu li {
    position: relative;

    padding: 5px 16px;
    /* width: 6rem;
    height: 2rem; */
}

.menu a,
.menu .menuwrd {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu>li>a {
    border-color: transparent;
    border-radius: 25px;
    border-width: 2px;
}

.rwdmenulist li {
    position: relative;
    /* width: 16.4rem;
    padding-left: 10px; */
}

.rwdmenubtn {
    display: none;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    /* display: none; */
    position: absolute;
    background-color: #bbbbbbb7;
    width: 225px;
    top: 60px;
    left: -70px;
    border-radius: 15px;
    /* margin: 4px 0px; */
    padding: 10px 0;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 9;
    /* left: calc((100% - 100px) / 2); */
    opacity: 0;
    transition: opacity 0.5s ease-in-out, visibility 0s 0.5s;
    visibility: hidden;
}

.dropdown:hover .dropdown-content {
    /* display: block; */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease-in-out, visibility 0.5s;
}

.dropdown-content::before {
    content: '';
    position: absolute;
    top: -27px;
    left: 0;
    width: 100%;
    height: 100px;
    background-color: transparent;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dropdown-content a {
    color: #ffffff;
    padding: 2px 0px;
    text-decoration: none;
    display: block;
    /* font-size: 14px; */
}

/* Optional: Add hover effect on menu text to improve interaction */
.dropdown:hover .menuwrd2 {
    display: block;
}

.dropdown:hover .menuwrd1 {
    display: none;
}

.wrdwidth {
    letter-spacing: 0.3rem;
}

.menu li {
    position: relative;
}

/* .menu li:hover::before {
    content: '';
    position: absolute;
    width: 50%;
    height: 2px;
    bottom: 0;
    left: 24%;
    background-color: #77664f;
} */

.menu li.active {
    content: '';
    position: absolute;
    width: 50%;
    height: 2px;
    bottom: 0;
    left: 22%;
    background-color: #ffffff;
}

.menubox .menuli::before {
    content: '';
    position: absolute;
    background-color: #1a2980;
    width: 2px;
    height: 100%;
    left: -15px;
    top: 0;
}

.change:hover .language {
    display: block;
}

.language {
    position: absolute;
    top: 15px;
    left: -5px;
}

.language {
    /* display: none; */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0s 0.3s;
}

.change:hover .language {
    /* display: block; */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-in-out, visibility 0.3s;
}

.menuchange:hover .menuwrd1 {
    display: none;
}

.menuwrd2 {
    display: none;
}

.wrdwidth:hover .menuwrd2 {
    display: block;
}

/*banner*/
.bannerbox {
    background-image: url('https://elegant.imgix.net/assets/img/index/banner-01.jpg');
    /* background-image: url(../img/index/banner-01.jpg); */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    width: 100%;
    height: 100vh;
}

/* .expbannerbox {
    background-image: url(../img/explore/banner.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    width: 100%;
    height: 100vh;
} */

/* .exabannerbox {
    background-image: url(../img/excavate/banner.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    width: 100%;
    height: 100vh;
}

.creabannerbox {
    background-image: url(../img/creation/banner.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    width: 100%;
    height: 100vh;
}

.serbannerbox {
    background-image: url(../img/serve/banner.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    width: 100%;
    height: 100vh;
}

.coonbannerbox {
    background-image: url(../img/connect/banner.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    width: 100%;
    height: 100vh;
} */

.bg {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 0;
}

.bannerwrd {
    position: absolute;
    top: 24vw;
    left: 23%;
    font-size: 40pt;
}

/*index-banner*/
@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        display: none;
    }
}

.animated {
    animation-duration: 1s;
}

.abscontent {
    position: relative;
    margin-top: 100vh;
    z-index: 3;
}

.arrow {
    animation: bounce 1.2s ease-in-out infinite;
}

@keyframes bounce {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}


.bannerscroll {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: block;
    z-index: 9;
}

.bannerscroll.hide {
    display: none;
}

/*linebox1*/
.topline {
    position: absolute;
    top: 0;
    left: 63%;
    width: 1px;
    height: 100%;
    display: block;
    z-index: 1;
}

.active .line {
    background-color: #77664f;
    width: 1px;
    height: 100%;
    position: absolute;
    animation: line 6s linear;
    display: block;
    z-index: 1;
}

@keyframes line {
    0% {
        height: 0%;
    }

    100% {
        height: 100%;
    }
}

.active .line-l {
    background-color: #77664f;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0%;
    height: 1px;
    animation: line-l 2s ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: 6s;
    /* top: 102vh; */
}

@keyframes line-l {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

.active .line-r {
    background-color: #77664f;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 1px;
    animation: line-r 3s ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: 6s;
}

@keyframes line-r {
    0% {
        width: 0%;
    }

    100% {
        width: 200%;
    }
}

/*linebox2*/
.active .line2 {
    background-color: #77664f;
    width: 100%;
    height: 1px;
    position: absolute;
    animation: line2 2s linear;
}

@keyframes line2 {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

/*linebox3-7*/
.active .line3 {
    background-color: #77664f;
    width: 100%;
    height: 1px;
    position: absolute;
    animation: line3 2s linear;
}

@keyframes line3 {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

.active .line4 {
    background-color: #77664f;
    width: 100%;
    height: 1px;
    position: absolute;
    animation: line4 2s linear;
}

@keyframes line4 {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

.active .line5 {
    background-color: #77664f;
    width: 100%;
    height: 1px;
    position: absolute;
    animation: line5 2s linear;
}

@keyframes line5 {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

.active .line6 {
    background-color: #77664f;
    width: 100%;
    height: 1px;
    position: absolute;
    animation: line6 2s linear;
}

@keyframes line6 {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

.active .line7 {
    background-color: #77664f;
    width: 100%;
    height: 1px;
    position: absolute;
    animation: line7 2s linear;
}

@keyframes line7 {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

/*linebox8*/
.active.pointlineindex {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 0;
    background-color: #774f4f;
    animation: pointlineindex 15s linear;
    animation-fill-mode: forwards;
}

@keyframes pointlineindex {
    0% {
        height: 0%;
    }

    100% {
        height: 100%;
    }
}

/*linebox8*/
.active.pointline {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 0;
    background-color: #77664f;
    animation: pointline 15s linear;
    animation-fill-mode: forwards;
}

@keyframes pointline {
    0% {
        height: 0%;
    }

    100% {
        height: 100%;
    }
}

/*公司優勢*/
.pointwrd {
    font-size: 10rem;
}

.abswrd {
    position: absolute;
    top: 112px;
    left: 80px;
}

/*gallery*/
.gallery-grid {
    height: 400vh;
}

.gallery-grid-wrap {
    position: sticky;
    top: 0;
    height: 100vh;
}

.gallery {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    width: 100em;
    height: 100em;
}

.gallery-item {
    position: absolute;
    overflow: hidden;
}

.gallery-item.mid {
    width: 43em;
    height: 28em;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.gallery-item.mid img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.5);
}

.gallery-item.top {
    width: 49em;
    height: 20em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -179%);
}

.gallery-item.left {
    width: 27em;
    height: 27em;
    top: 50%;
    left: 50%;
    transform: translate(-186%, -50%);
}

.gallery-item.right {
    width: 27em;
    height: 27em;
    top: 50%;
    left: 50%;
    transform: translate(86%, -50%);
}

.gallery-item.bot {
    width: 25em;
    height: 32em;
    top: 50%;
    left: 50%;
    transform: translate(-118%, 49%);
}

.gallery-item.bot2 {
    width: 33em;
    height: 27em;
    top: 50%;
    left: 50%;
    transform: translate(-9%, 58%);
}

/*map*/
.map .top {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translate(-70%, 0) !important;
}

.map .left {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-95%, -48%) !important;
}

.map .right {
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(98%, -62%) !important;
}

.map .bot {
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(-20%, -190%) !important;
}

/*odm.oem*/
.odm {
    position: relative;
    overflow: hidden;
}

.odm::before {
    content: '';
    position: absolute;
    background-color: #d1c0a5d8;
    width: 100%;
    height: 100%;
    top: 0;
    /* border-color: #77664f; */
    /* border-width: 1px; */
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

:hover.odm::before {
    opacity: 0;
}

.oem {
    position: relative;
    overflow: hidden;
}

.oem::before {
    content: '';
    position: absolute;
    background-color: #ffffffd8;
    width: 100%;
    height: 100%;
    top: 0;
    /* border-color: #77664f; */
    /* border-width: 1px; */
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

:hover.oem::before {
    opacity: 0;
}

.odmwrd {
    position: absolute;
    top: 37%;
    left: 41%;
    letter-spacing: 0.1em;
}

.odmline {
    background-color: #ffffff;
    width: 100%;
    height: 1px;
}

.oemline {
    background-color: #ffffff;
    width: 100%;
    height: 1px;
}

:hover.oem .odmwrd {
    color: #ffffff;
}

:hover.oem .oemline {
    background-color: #ffffff;
}

/*explore*/
.exblock1 {
    width: 48%;
}

.exblock2 {
    width: 53%;
}

.exblock3 {
    width: 65%;
}

.exblock4 {
    width: 35%;
}

.exblock5 {
    width: 40%;
}

.exblock6 {
    width: 60%;
}

.exmove1 {
    transform: translate3d(-150px, 230px, 0);
    z-index: 1;
}

.exmove2 {
    transform: translate3d(-150px, 230px, 0);
    z-index: 1;
}

.exmove3 {
    transform: translate3d(-25px, 170px, 0);
    z-index: 1;
}

/*exbox1*/
.exlinebox {
    position: absolute;
    top: 33%;
    left: 49%;
    width: 1px;
    height: 900px;
    display: block;
    /* z-index: -1; */
}

.active .exline {
    background-color: #77664f;
    width: 1px;
    height: 900px;
    position: absolute;
    animation: exline 3s linear;
    display: block;
    /* z-index: -1; */
}

@keyframes exline {
    0% {
        height: 0%;
    }

    100% {
        height: 900px;
    }
}

/*exbox2*/
.active .exline2 {
    background-color: #77664f;
    top: 230px;
    left: 0;
    width: 65%;
    height: 1px;
    position: absolute;
    animation: exline2 2s linear;
}

@keyframes exline2 {
    0% {
        width: 0%;
    }

    100% {
        width: 65%;
    }
}

/*exbox3*/
.active .exline3 {
    background-color: #77664f;
    bottom: 230px;
    right: 0;
    width: 65%;
    height: 1px;
    position: absolute;
    animation: exline3 2s linear;
}

@keyframes exline3 {
    0% {
        width: 0%;
    }

    100% {
        width: 65%;
    }
}

/*pointline2*/
.pointline2 {
    position: absolute;
    top: -231px;
    left: 49%;
    width: 1px;
    height: 900px;
    display: block;
    /* z-index: -1; */
}

.active .pointline {
    background-color: #77664f;
    width: 1px;
    height: 2200px;
    position: absolute;
    animation: pointline 3s linear;
    animation-fill-mode: forwards;
    display: block;
    /* z-index: -1; */
}

@keyframes pointline {
    0% {
        height: 0%;
    }

    100% {
        height: 2200px;
    }
}

.licencewrd {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-98px, -10px, 0px);
}

.licencewrd::before {
    content: '';
    position: absolute;
    bottom: -9px;
    left: 32%;
    width: 35%;
    height: 1px;
    background-color: #ffffff;
}

.licence {
    position: relative;
    overflow: hidden;
}

.licence::before {
    content: '';
    position: absolute;
    background-color: #0000003f;
    width: 100%;
    height: 100%;
    top: 0;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

:hover.licence::before {
    opacity: 0;
}

/*excavate*/
.exwrd {
    /* writing-mode: vertical-rl; */
    -webkit-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
    letter-spacing: 0.3em;
}

/* .pro1splide .splide__track {
    width: 80vw !important;
    padding-left: 0rem !important;
    padding-right: 20rem !important;
} */

/*pro1splide*/
.pro1splide .left {
    width: 400px;
}

.pro1splide .right {
    width: calc(100% - 400px);
}

.pro1splide .right::before {
    content: '';
    position: absolute;
    background-color: #ffffff;
    width: 400px;
    height: 100%;
    top: 0;
    left: 0;
    transform: translate3d(0px, 0px, 0px);
    z-index: 1;
}

.pro1splide .splide__list li::before {
    content: '';
    position: absolute;
    background-color: #23170f;
    width: 0.5px;
    height: 100%;
    top: 0;
    right: -15%;
}

.pro1splide .splide {
    width: 100%;
    position: relative;
}

.pro1splide .splide__track {
    overflow: hidden;
}

.pro1splide .splide__list {
    display: flex;
    padding: 0;
    margin: 0;
}

.pro1splide .splide__slide {
    position: relative;
    flex-shrink: 0;
    width: 50%;
    /* 設定每個圖片的寬度為 50% */
    margin-right: 15%;
    /* 遮擋圖片的右邊一部分 */
}

.pro1splide .splide__slide .propic {
    width: 90%;
    display: block;
    object-fit: cover;
    /* 圖片拉伸以填滿容器 */
}

/*probox1*/
.active .proline1 {
    background-color: #77664f;
    top: 240px;
    left: 0;
    width: 500px;
    height: 1px;
    position: absolute;
    animation: proline1 2s linear;
    z-index: 2;
}

@keyframes proline1 {
    0% {
        width: 0%;
    }

    100% {
        width: 500px;
    }
}

/*probox2*/
.probox2 {
    position: absolute;
    top: 0%;
    left: 515px;
    width: 1px;
    height: 100%;
    display: block;
    z-index: 2;
}

.active .proline2 {
    background-color: #77664f;
    width: 1px;
    height: 100%;
    position: absolute;
    animation: proline2 3s linear;
    display: block;
    /* z-index: -1; */
}

@keyframes proline2 {
    0% {
        height: 0%;
    }

    100% {
        height: 100%;
    }
}

/*pro2splide*/
.pro2splide .left {
    width: 400px;
}

.pro2splide .right {
    width: calc(100% - 400px);
}

.pro2splide .right::before {
    content: '';
    position: absolute;
    background-color: #ffffff;
    width: 400px;
    height: 100%;
    top: 0;
    right: 0;
    transform: translate3d(0px, 0px, 0px);
    z-index: 1;
}

.pro2splide .splide__list li::before {
    content: '';
    position: absolute;
    background-color: #23170f;
    width: 0.5px;
    height: 100%;
    top: 0;
    right: -15%;
}

.pro2splide .splide {
    width: 100%;
    position: relative;
}

.pro2splide .splide__track {
    overflow: hidden;
}

.pro2splide .splide__list {
    display: flex;
    padding: 0;
    margin: 0;
}

.pro2splide .splide__slide {
    position: relative;
    flex-shrink: 0;
    width: 50%;
    /* 設定每個圖片的寬度為 50% */
    margin-right: 15%;
    /* 遮擋圖片的右邊一部分 */
}

.pro2splide .splide__slide .propic {
    width: 90%;
    display: block;
    object-fit: cover;
    /* 圖片拉伸以填滿容器 */
}

/*probox3*/
.active .proline3 {
    background-color: #77664f;
    top: 240px;
    right: 0;
    width: 500px;
    height: 1px;
    position: absolute;
    animation: proline3 2s linear;
    z-index: 2;
}

@keyframes proline3 {
    0% {
        width: 0%;
    }

    100% {
        width: 500px;
    }
}

/*probox4*/
.probox4 {
    position: absolute;
    top: 0%;
    right: 515px;
    width: 1px;
    height: 100%;
    display: block;
    z-index: 2;
}

.active .proline4 {
    background-color: #77664f;
    width: 1px;
    height: 100%;
    position: absolute;
    animation: proline4 3s linear;
    display: block;
    /* z-index: -1; */
}

@keyframes proline4 {
    0% {
        height: 0%;
    }

    100% {
        height: 100%;
    }
}

/*pro3splide*/
.pro3splide .left {
    width: 400px;
}

.pro3splide .right {
    width: calc(100% - 400px);
}

.pro3splide .right::before {
    content: '';
    position: absolute;
    background-color: #ffffff;
    width: 400px;
    height: 100%;
    top: 0;
    left: 0;
    transform: translate3d(0px, 0px, 0px);
    z-index: 1;
}

.pro3splide .splide__list li::before {
    content: '';
    position: absolute;
    background-color: #23170f;
    width: 0.5px;
    height: 100%;
    top: 0;
    right: -15%;
}

.pro3splide .splide {
    width: 100%;
    position: relative;
}

.pro3splide .splide__track {
    overflow: hidden;
}

.pro3splide .splide__list {
    display: flex;
    padding: 0;
    margin: 0;
}

.pro3splide .splide__slide {
    position: relative;
    flex-shrink: 0;
    width: 50%;
    /* 設定每個圖片的寬度為 50% */
    margin-right: 15%;
    /* 遮擋圖片的右邊一部分 */
}

.pro3splide .splide__slide .propic {
    width: 90%;
    display: block;
    object-fit: cover;
    /* 圖片拉伸以填滿容器 */
}

/*probox5*/
.active .proline5 {
    background-color: #77664f;
    top: 280px;
    left: 0;
    width: 500px;
    height: 1px;
    position: absolute;
    animation: proline5 2s linear;
    z-index: 2;
}

@keyframes proline5 {
    0% {
        width: 0%;
    }

    100% {
        width: 500px;
    }
}

/*probox6*/
.probox6 {
    position: absolute;
    top: 0%;
    left: 515px;
    width: 1px;
    height: 100%;
    display: block;
    z-index: 2;
}

.active .proline6 {
    background-color: #77664f;
    width: 1px;
    height: 100%;
    position: absolute;
    animation: proline6 3s linear;
    display: block;
    /* z-index: -1; */
}

@keyframes proline6 {
    0% {
        height: 0%;
    }

    100% {
        height: 100%;
    }
}

/*pro4splide*/
.pro4splide .left {
    width: 400px;
}

.pro4splide .right {
    width: calc(100% - 400px);
}

.pro4splide .right::before {
    content: '';
    position: absolute;
    background-color: #ffffff;
    width: 400px;
    height: 100%;
    top: 0;
    right: 0;
    transform: translate3d(0px, 0px, 0px);
    z-index: 1;
}

.pro4splide .splide__list li::before {
    content: '';
    position: absolute;
    background-color: #23170f;
    width: 0.5px;
    height: 100%;
    top: 0;
    right: -15%;
}

.pro4splide .splide {
    width: 100%;
    position: relative;
}

.pro4splide .splide__track {
    overflow: hidden;
}

.pro4splide .splide__list {
    display: flex;
    padding: 0;
    margin: 0;
}

.pro4splide .splide__slide {
    position: relative;
    flex-shrink: 0;
    width: 50%;
    /* 設定每個圖片的寬度為 50% */
    margin-right: 15%;
    /* 遮擋圖片的右邊一部分 */
}

.pro4splide .splide__slide .propic {
    width: 90%;
    display: block;
    object-fit: cover;
    /* 圖片拉伸以填滿容器 */
}

/*probox7*/
.active .proline7 {
    background-color: #77664f;
    top: 240px;
    right: 0;
    width: 500px;
    height: 1px;
    position: absolute;
    animation: proline7 2s linear;
    z-index: 2;
}

@keyframes proline7 {
    0% {
        width: 0%;
    }

    100% {
        width: 500px;
    }
}

/*probox8*/
.probox8 {
    position: absolute;
    top: 0%;
    right: 515px;
    width: 1px;
    height: 100%;
    display: block;
    z-index: 2;
}

.active .proline8 {
    background-color: #77664f;
    width: 1px;
    height: 100%;
    position: absolute;
    animation: proline8 3s linear;
    display: block;
    /* z-index: -1; */
}

@keyframes proline8 {
    0% {
        height: 0%;
    }

    100% {
        height: 100%;
    }
}

/*proline*/
/*probox9*/
.active .proline9 {
    background-color: #77664f;
    top: 0;
    left: 0;
    width: 100%;
    height: 1.6px;
    position: absolute;
    animation: proline9 2s linear;
    z-index: 2;
}

@keyframes proline9 {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

/*probox10*/
.active .proline10 {
    background-color: #77664f;
    top: 0;
    left: 0;
    width: 100%;
    height: 1.6px;
    position: absolute;
    animation: proline10 2s linear;
    z-index: 2;
}

@keyframes proline10 {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

/*probox11*/
.active .proline11 {
    background-color: #77664f;
    top: 0;
    left: 0;
    width: 100%;
    height: 1.6px;
    position: absolute;
    animation: proline11 2s linear;
    z-index: 2;
}

@keyframes proline11 {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

/*creation*/

.credropdown {
    position: relative;
    display: inline-block;
}

.credropdown-content {
    position: absolute;
    background-color: #e4e4e4;
    width: 90px;
    top: 30px;
    left: -5px;
    border-radius: 15px;
    padding: 10px 0;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 3;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0s 0.5s;
}

.credropdown-content.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease-in-out, visibility 0.5s;
}

.credropdown-content a {
    color: #23170f;
    padding: 8px 12px;
    text-decoration: none;
    display: block;
    font-size: 14px;
    border-radius: 10px;
}

.credropdown-content li:hover a {
    background-color: #838383;
    color: white;
}

/*crebox1*/
.active .creline1 {
    background-color: #77664f;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    position: absolute;
    animation: creline1 2s linear;
    z-index: 2;
}

@keyframes creline1 {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

.crewrd {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.cretitle {
    position: absolute;
    top: 50%;
    width: 100%;
}

.creleft {
    width: 100%;
}

.creright {
    width: 50%;
}

.creatli {
    position: relative;
    overflow: hidden;
}

.creatli::before {
    content: '';
    position: absolute;
    background-color: #d1c0a5d8;
    width: 100%;
    height: 100%;
    top: 0;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

:hover.creatli::before {
    opacity: 0;
}

.creapic {
    position: relative;
    overflow: hidden;
}

a:hover .creapic img {
    transform: scale(1.1);
}

:hover.loadbtn div {
    color: #ffffff;
    background-color: #23170f;
}

.crepicli {
    position: relative;
}

.crepicli:hover::before,
.crepicli.active::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #23170f;
    width: 100%;
    height: 1px;
    animation: crepicli 0.3s linear;
}

@keyframes crepicli {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

.creatsplide .is-active .creatli::before {
    opacity: 0;
}

/*serve*/
.serveleft {
    width: 40%;
}

.serveright {
    width: 60%;
}

.servenum1 {
    position: absolute;
    right: 160px;
    bottom: 63px;
    width: 10rem;
}

.servenum1-1 {
    position: absolute;
    right: 50px;
    bottom: 63px;
    width: 10rem;
}

.servenum1-2 {
    position: absolute;
    left: 50px;
    bottom: 63px;
    width: 10rem;
}

.servenum1-4 {
    position: absolute;
    left: 50px;
    bottom: 145px;
    width: 10rem;
}

.servenum2 {
    position: absolute;
    left: 160px;
    bottom: 63px;
    width: 10rem;
}

.servenum3 {
    position: relative;
    left: 0;
    bottom: 63px;
    width: 15rem;
}

.servenum4 {
    position: absolute;
    right: 50px;
    bottom: 145px;
    width: 10rem;
}

/*lineblock*/
.lineblock,
.lineblock2 {
    position: relative;
}

.lineblock::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;
    background-color: #fff;
    z-index: 5;
}

.lineblock2::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 0;
    width: 100%;
    height: 10px;
    background-color: #fff;
    z-index: 5;
}

/*servebox1*/
.active .serveline1 {
    background-color: #77664f;
    width: 100%;
    height: 1px;
    left: 0;
    position: absolute;
    animation: serveline1 2s linear;
}

@keyframes serveline1 {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

/*servebox2*/
.active .serveline2 {
    background-color: #77664f;
    width: 100%;
    height: 1px;
    left: 0;
    position: absolute;
    animation: serveline2 2s linear;
}

@keyframes serveline2 {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

/*servebox3*/
.servebox3 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    display: block;
    z-index: 1;
    transform: translate3d(0px, -293px, 0px);
}

.active .serveline3 {
    background-color: #77664f;
    width: 1px;
    height: 584px;
    position: absolute;
    animation: serveline3 3s linear;
    display: block;
    z-index: 1;
}

@keyframes serveline3 {
    0% {
        height: 0%;
    }

    100% {
        height: 584px;
    }
}

/*servebox6*/
.servebox6 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    display: block;
    z-index: 1;
    transform: translate3d(0px, -293px, 0px);
}

/*servebox9*/
.servebox9 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    display: block;
    z-index: 1;
    transform: translate3d(0px, -293px, 0px);
}

/*servebox11*/
.servebox11 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    display: block;
    z-index: 1;
    transform: translate3d(0px, -540px, 0px);
}

.active .serveline11 {
    background-color: #77664f;
    width: 1px;
    height: 1042px;
    position: absolute;
    animation: serveline11 3s linear;
    display: block;
    z-index: 1;
}

@keyframes serveline11 {
    0% {
        height: 0%;
    }

    100% {
        height: 1042px;
    }
}

.engwrd1 {
    padding-right: 60px;
}

.engwrd2 {
    padding-left: 140px;
}

.engwrd3 {
    padding-right: 130px;
}

.engwrd4 {
    padding-left: 10px;
}

.engwrd5 {
    padding-right: 120px;
}

.engwrd7 {
    padding-right: 145px;
}

.coopengwrd1 {
    padding-right: 60px;
}

.coopengwrd2 {
    padding-left: 45px;
}

.coopengwrd3 {
    padding-right: 40px;
}

.coopengwrd4 {
    padding-left: 70px;
}

.coopengwrd5 {
    padding-right: 50px;
}

.coopengwrd6 {
    padding-left: 60px;
}


/*cooperate*/
.coop1 {
    margin-top: -100px;
}

.active .coopline1 {
    background-color: #77664f;
    width: 140%;
    height: 1px;
    right: 0;
    position: absolute;
    animation: coopline1 2s linear;
}

@keyframes coopline1 {
    0% {
        width: 0%;
    }

    100% {
        width: 140%;
    }
}

.active .coopline2 {
    background-color: #77664f;
    width: 140%;
    height: 1px;
    left: 0;
    position: absolute;
    animation: coopline2 2s linear;
}

@keyframes coopline2 {
    0% {
        width: 0%;
    }

    100% {
        width: 140%;
    }
}

.coopsvg {
    height: 210px;
}

.cooptext {
    transform: translateY(200px);
}



/*connect*/
.connectmap iframe {
    width: 800px;
    height: 450px;
}

/*footer*/
.foot {
    position: relative;
    z-index: 2;
}

.gotop {
    position: fixed;
    bottom: 10px;
    right: 10px;
}

.gotop {
    display: none;
    position: fixed;
}

.gotop.active {
    display: block;
    z-index: 12;
}

.footerbox {
    background-image: url('https://walker4img.imgix.net/assets/img/index/footerpic.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    width: 100%;
    height: 100vh;
}

.footinform {
    height: 100vh;
}

.footerbg {
    background-color: #d1c0a5e7;
}

.rwdmenuli2 a {
    padding: 5px !important;
}

.panel {
    max-height: 0;
    overflow: hidden;
    transition: all 0.33333s ease-in-out;
}

.active+.panel {
    max-height: 1000px;
}

.downbtn {
    position: absolute;
    top: 50%;
    right: -20px;
}

/*articlebox*/
.articlebox {
    word-break: break-word;
}

.articlebox iframe {
    max-width: 100%;
}

.articlebox img {
    max-width: 100%;
    display: inline-block;
}

.articlebox .youtube-embed-wrapper {
    padding-top: 0 !important;
}

.articlebox iframe,
.articlebox object,
.articlebox embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/** 
* parsley
*/
input.parsley-error,
select.parsley-error,
textarea.parsley-error {
    border: 1px solid #ff0000;
}

.parsley-errors-list {
    /* position: absolute; */
    margin: 2px 0 3px;
    list-style-type: none;
    font-size: 0.9em;
    line-height: 0.9em;
    opacity: 0;
    color: #ff0000;
    transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
}

.parsley-errors-list.filled {
    opacity: 1;
}

/** 
* magnific-popup
*/
.white-popup {
    position: relative;
    background: #fff;
    padding: 40px;
    width: auto;
    max-width: 500px;
    margin: 20px auto;
    border-radius: 6px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
    /* border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
    border-radius: var(--bs-modal-border-radius);
    outline: 0; */
}

/* .mfp-bg {
    background: #fff;
} */

/* overlay at start */
.mfp-fade.mfp-bg {
    opacity: 0;
    -webkit-transition: all 0.15s ease-out;
    -moz-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
}

/* overlay animate in */
.mfp-fade.mfp-bg.mfp-ready {
    opacity: 0.8;
}

/* overlay animate out */
.mfp-fade.mfp-bg.mfp-removing {
    opacity: 0;
}

/* content at start */
.mfp-fade.mfp-wrap .mfp-content {
    opacity: 0;

    -webkit-transition: all 0.15s ease-out;
    -moz-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
}

/* content animate it */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
    opacity: 1;
}

/* content animate out */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
    opacity: 0;
}

/* 
* scrollbar
*/
::-webkit-scrollbar {
    height: 5px;
    width: 5px;
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #928692;
}

/* vue */
[v-cloak] {
    display: none;
}

@media screen and (max-width: 1930px) {

    /*explore*/
    .exblock3 {
        width: 60%;
    }

    .exblock4 {
        width: 40%;
    }

    /*excavate*/
    .pro1splide .right::before {
        content: '';
        position: absolute;
        background-color: #ffffff;
        width: 270px;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1;
    }

    .pro2splide .right::before {
        content: '';
        position: absolute;
        background-color: #ffffff;
        width: 300px;
        height: 100%;
        top: 0;
        right: 0;
        z-index: 1;
    }

    .pro3splide .right::before {
        content: '';
        position: absolute;
        background-color: #ffffff;
        width: 270px;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1;
    }

    .pro4splide .right::before {
        content: '';
        position: absolute;
        background-color: #ffffff;
        width: 300px;
        height: 100%;
        top: 0;
        right: 0;
        z-index: 1;
    }

    .exmove3 {
        transform: translate3d(-73px, 170px, 0);
        z-index: 1;
    }
}

@media screen and (max-width: 1440px) {

    /*index*/
    .odmwrd {
        position: absolute;
        top: 37%;
        left: 39%;
    }

    /*explore*/
    .exmove2 {
        transform: translate3d(-110px, 230px, 0);
        z-index: 1;
    }


    /*map*/
    .map .top {
        position: absolute;
        top: 24px;
        left: 50%;
        transform: translate(-70%, 180%) !important;
    }

    .map .left {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-95%, -48%) !important;
    }

    .map .right {
        position: absolute;
        top: 50%;
        right: 50%;
        transform: translate(98%, -62%) !important;
    }

    .map .bot {
        position: absolute;
        bottom: 0;
        right: 0;
        transform: translate(-20%, -300%) !important;
    }

    /*excavate*/

    .pro2splide .right::before {
        content: '';
        position: absolute;
        background-color: #ffffff;
        width: 250px;
        height: 100%;
        top: 0;
        right: 0;
        z-index: 1;
    }

    .pro4splide .right::before {
        content: '';
        position: absolute;
        background-color: #ffffff;
        width: 250px;
        height: 100%;
        top: 0;
        right: 0;
        z-index: 1;
    }

    /*servebox3*/
    .servebox3 {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1px;
        display: block;
        z-index: 1;
        transform: translate3d(0px, -283px, 0px);
    }

    .active .serveline3 {
        background-color: #77664f;
        width: 1px;
        height: 566px;
        position: absolute;
        animation: serveline3 3s linear;
        display: block;
        z-index: 1;
    }

    @keyframes serveline3 {
        0% {
            height: 0%;
        }

        100% {
            height: 566px;
        }
    }

    /*servebox6*/
    .servebox6 {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1px;
        display: block;
        z-index: 1;
        transform: translate3d(0px, -283px, 0px);
    }

    /*servebox9*/
    .servebox9 {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1px;
        display: block;
        z-index: 1;
        transform: translate3d(0px, -283px, 0px);
    }

    /*servebox11*/
    .servebox11 {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1px;
        display: block;
        z-index: 1;
        transform: translate3d(0px, -519px, 0px);
    }

    .active .serveline11 {
        background-color: #77664f;
        width: 1px;
        height: 990px;
        position: absolute;
        animation: serveline11 3s linear;
        display: block;
        z-index: 1;
    }

    @keyframes serveline11 {
        0% {
            height: 0%;
        }

        100% {
            height: 990px;
        }
    }

    .servenum2 {
        position: absolute;
        left: 0px;
        bottom: 63px;
        width: 10rem;
    }

    .servenum1 {
        position: absolute;
        right: 0px;
        bottom: 63px;
        width: 10rem;
    }

    .engwrd1 {
        padding-right: 0px;
        padding-left: 90px;
    }

    .engwrd2 {
        padding-left: 0px;
    }

    .engwrd3 {
        padding-right: 0px;
        padding-left: 50px;
    }

    .engwrd4 {
        padding-right: 150px;
        padding-left: 0px;
    }

    .engwrd5 {
        padding-right: 0px;
        padding-left: 20px;
    }

    .engwrd7 {
        padding-right: 0px;
    }

    .coopengwrd1 {
        padding-right: 60px;
    }

    .coopengwrd2 {
        padding-left: 55px;
    }

    .coopengwrd3 {
        padding-right: 55px;
    }



}

@media screen and (max-width: 1368px) {

    /*map*/
    .map .top {
        position: absolute;
        top: 24px;
        left: 50%;
        transform: translate(-70%, 10%) !important;
    }

    .map .left {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-95%, -48%) !important;
    }

    .map .right {
        position: absolute;
        top: 50%;
        right: 50%;
        transform: translate(98%, -62%) !important;
    }

    .map .bot {
        position: absolute;
        bottom: 0;
        right: 0;
        transform: translate(-20%, -180%) !important;
    }

    /*excavate*/
    .pro1splide .right::before {
        content: '';
        position: absolute;
        background-color: #ffffff;
        width: 180px;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1;
    }

    .pro3splide .right::before {
        content: '';
        position: absolute;
        background-color: #ffffff;
        width: 180px;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1;
    }

    /*servebox3*/
    .servebox3 {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1px;
        display: block;
        z-index: 1;
        transform: translate3d(0px, -265px, 0px);
    }

    .active .serveline3 {
        background-color: #77664f;
        width: 1px;
        height: 527px;
        position: absolute;
        animation: serveline3 3s linear;
        display: block;
        z-index: 1;
    }

    @keyframes serveline3 {
        0% {
            height: 0%;
        }

        100% {
            height: 527px;
        }
    }

    /*servebox6*/
    .servebox6 {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1px;
        display: block;
        z-index: 1;
        transform: translate3d(0px, -264px, 0px);
    }

    /*servebox9*/
    .servebox9 {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1px;
        display: block;
        z-index: 1;
        transform: translate3d(0px, -265px, 0px);
    }

    /*servebox11*/
    .servebox11 {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1px;
        display: block;
        z-index: 1;
        transform: translate3d(0px, -501px, 0px);
    }

    .active .serveline11 {
        background-color: #77664f;
        width: 1px;
        height: 934px;
        position: absolute;
        animation: serveline11 3s linear;
        display: block;
        z-index: 1;
    }

    @keyframes serveline11 {
        0% {
            height: 0%;
        }

        100% {
            height: 934px;
        }
    }

    .engwrd3 {
        padding-right: 0px;
        padding-left: 30px;
    }

    .engwrd4 {
        padding-right: 135px;
    }

}

@media screen and (max-width: 1040px) {

    /*index*/
    .odmwrd {
        position: absolute;
        top: 37%;
        left: 34.5%;
    }

    /*explore*/
    .exmove1 {
        transform: translate3d(-115px, 135px, 0);
        z-index: 1;
    }

    .exmove2 {
        transform: translate3d(-60px, 170px, 0);
        z-index: 1;
    }

    .exmove3 {
        transform: translate3d(-80px, 100px, 0);
        z-index: 1;
    }

    /*exbox2*/
    .active .exline2 {
        background-color: #77664f;
        top: 200px;
        left: 0;
        width: 65%;
        height: 1px;
        position: absolute;
        animation: exline2 2s linear;
    }

    /*map*/
    /*map*/
    .map .top {
        position: absolute;
        top: 24px;
        left: 50%;
        transform: translate(-70%, 215%) !important;
    }

    .map .left {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-105%, -48%) !important;
    }

    .map .right {
        position: absolute;
        top: 50%;
        right: 50%;
        transform: translate(98%, -62%) !important;
    }

    .map .bot {
        position: absolute;
        bottom: 0;
        right: 0;
        transform: translate(28%, -325%) !important;
    }

    .abscontent {
        position: relative;
        margin-top: 100vh;
        z-index: 3;
    }

    /*excavate*/
    .pro1splide .left {
        width: 250px;
    }

    .pro1splide .right {
        width: calc(100% - 250px);
    }

    .pro1splide .right::before {
        content: '';
        position: absolute;
        background-color: #ffffff;
        width: 145px;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1;
    }

    .probox2 {
        position: absolute;
        top: 0%;
        left: 350px;
        width: 1px;
        height: 100%;
        display: block;
        z-index: 2;
    }

    .active .proline1 {
        background-color: #77664f;
        top: 245px;
        left: 0;
        width: 335px;
        height: 1px;
        position: absolute;
        animation: proline1 2s linear;
        z-index: 2;
    }

    @keyframes proline1 {
        0% {
            width: 0%;
        }

        100% {
            width: 335px;
        }
    }

    /*2*/

    .pro2splide .left {
        width: 250px;
    }

    .pro2splide .right {
        width: calc(100% - 250px);
    }

    .pro2splide .right::before {
        content: '';
        position: absolute;
        background-color: #ffffff;
        width: 145px;
        height: 100%;
        top: 0;
        right: 0;
        z-index: 1;
        transform: translate3d(2px, 0px, 0px);
    }

    .probox4 {
        position: absolute;
        top: 0%;
        right: 350px;
        width: 1px;
        height: 100%;
        display: block;
        z-index: 2;
    }

    .active .proline3 {
        background-color: #77664f;
        top: 245px;
        right: 0;
        width: 335px;
        height: 1px;
        position: absolute;
        animation: proline3 2s linear;
        z-index: 2;
    }

    @keyframes proline3 {
        0% {
            width: 0%;
        }

        100% {
            width: 335px;
        }
    }

    /*3*/

    .pro3splide .left {
        width: 250px;
    }

    .pro3splide .right {
        width: calc(100% - 250px);
    }

    .pro3splide .right::before {
        content: '';
        position: absolute;
        background-color: #ffffff;
        width: 145px;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1;
    }

    .probox6 {
        position: absolute;
        top: 0%;
        left: 350px;
        width: 1px;
        height: 100%;
        display: block;
        z-index: 2;
    }

    .active .proline5 {
        background-color: #77664f;
        top: 245px;
        left: 0;
        width: 335px;
        height: 1px;
        position: absolute;
        animation: proline5 2s linear;
        z-index: 2;
    }

    @keyframes proline5 {
        0% {
            width: 0%;
        }

        100% {
            width: 335px;
        }
    }

    /*4*/

    .pro4splide .left {
        width: 250px;
    }

    .pro4splide .right {
        width: calc(100% - 250px);
    }

    .pro4splide .right::before {
        content: '';
        position: absolute;
        background-color: #ffffff;
        width: 145px;
        height: 100%;
        top: 0;
        right: 0;
        z-index: 1;
        transform: translate3d(2px, 0px, 0px);
    }

    .probox8 {
        position: absolute;
        top: 0%;
        right: 350px;
        width: 1px;
        height: 100%;
        display: block;
        z-index: 2;
    }

    .active .proline7 {
        background-color: #77664f;
        top: 245px;
        right: 0;
        width: 335px;
        height: 1px;
        position: absolute;
        animation: proline7 2s linear;
        z-index: 2;
    }

    @keyframes proline7 {
        0% {
            width: 0%;
        }

        100% {
            width: 335px;
        }
    }

    /*servebox3*/
    .servebox3 {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1px;
        display: block;
        z-index: 1;
        transform: translate3d(0px, -200px, 0px);
    }

    .active .serveline3 {
        background-color: #77664f;
        width: 1px;
        height: 399px;
        position: absolute;
        animation: serveline3 3s linear;
        display: block;
        z-index: 1;
    }

    @keyframes serveline3 {
        0% {
            height: 0%;
        }

        100% {
            height: 399px;
        }
    }

    /*servebox6*/
    .servebox6 {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1px;
        display: block;
        z-index: 1;
        transform: translate3d(0px, -200px, 0px);
    }

    /*servebox9*/
    .servebox9 {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1px;
        display: block;
        z-index: 1;
        transform: translate3d(0px, -200px, 0px);
    }

    /*servebox11*/
    .servebox11 {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1px;
        display: block;
        z-index: 1;
        transform: translate3d(0px, -433px, 0px);
    }

    .active .serveline11 {
        background-color: #77664f;
        width: 1px;
        height: 735px;
        position: absolute;
        animation: serveline11 3s linear;
        display: block;
        z-index: 1;
    }

    @keyframes serveline11 {
        0% {
            height: 0%;
        }

        100% {
            height: 735px;
        }
    }

    /*creation*/
    .creright {
        width: 100%;
    }

    /*pointline2*/
    .pointline2 {
        position: absolute;
        top: -231px;
        left: 50%;
        width: 1px;
        height: 900px;
        display: block;
        /* z-index: -1; */
    }

    .active .pointline {
        background-color: #77664f;
        width: 1px;
        height: 2000px;
        position: absolute;
        animation: pointline 3s linear;
        animation-fill-mode: forwards;
        display: block;
        /* z-index: -1; */
    }

    @keyframes pointline {
        0% {
            height: 0%;
        }

        100% {
            height: 2000px;
        }
    }

    .engwrd4 {
        padding-right: 0px;
    }

    .engwrd5 {
        padding-right: 0px;
        padding-left: 10px;
    }




}

@media screen and (max-width: 900px) {
    /* .expbannerbox {
        background-image: url(../img/explore/rwdbanner.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom;
        width: 100%;
        height: 100vh;
    } */

    /* .exabannerbox {
        background-image: url(../img/excavate/rwdbanner.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom;
        width: 100%;
        height: 100vh;
    }

    .creabannerbox {
        background-image: url(../img/creation/rwdbanner.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom;
        width: 100%;
        height: 100vh;
    }

    .serbannerbox {
        background-image: url(../img/serve/rwdbanner.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom;
        width: 100%;
        height: 100vh;
    }

    .coonbannerbox {
        background-image: url(../img/connect/rwdbanner.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom;
        width: 100%;
        height: 100vh;
    } */

}

@media screen and (max-width: 850px) {

    /*header*/
    .rwdmenubtn {
        display: block;
    }

    .menubtn {
        display: block;
        float: right;
        z-index: 999;
    }

    .menu {
        display: none;
    }

    .rwdmenulist {
        display: block;
    }

    .rwdmenu {
        display: block;
        background-color: #d1c0a5;
        top: 0;
        left: 0;
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 990;
        transform: translate(0%, -150%);
        transition: all 0.8s ease;
        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
            0 4px 6px -4px rgb(0 0 0 / 0.1);
    }

    .rwdmenu.active {
        transform: translate(0%, 0%);
    }

    .menubtn.active .close {
        display: block;
    }

    .menubtn.active .open {
        display: none;
    }

    .headerbox {
        background-color: #ffffff;
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        z-index: 15;
    }

    .headroom--not-top {
        background-color: #ffffff;
        box-shadow: 0 3px 10px 1px rgb(0 0 0 / 0.2);
        height: 115px;
        padding: 30px 0;
        /* animation: head 0.8s ease-in-out; */
    }

    .headroom--unpinned,
    .headroom--pinned {
        background-color: #ffffff;
    }

    .headroom--top {
        background-color: transparent;
    }

    .menubox {
        display: none !important;
    }

    /*index*/
    .odmwrd {
        position: absolute;
        top: 37%;
        left: 40.2%;
    }

    /*linebox1*/
    .topline {
        position: absolute;
        top: 0;
        left: 50%;
        width: 1px;
        height: 100%;
    }

    /*explore*/
    .active .exline3 {
        background-color: #77664f;
        bottom: 100px;
        right: 0;
        width: 65%;
        height: 1px;
        position: absolute;
        animation: exline3 2s linear;
    }

    .exmove3 {
        transform: translate3d(-40px, 90px, 0);
        z-index: 1;
    }

    .abscontent {
        position: relative;
        margin-top: 100vh;
        z-index: 3;
    }

    /*excavate*/

    .probox2 {
        display: none;
    }

    .probox4 {
        display: none;
    }

    .probox6 {
        display: none;
    }

    .probox8 {
        display: none;
    }

    .exbtpad {
        padding-bottom: 1rem;
    }

    .exwrd {
        writing-mode: unset;
        letter-spacing: 0em;
    }

    .pro1splide .left {
        width: 100%;
    }

    .pro1splide .right {
        width: 100%;
    }

    .pro1splide .right::before {
        content: '';
        position: absolute;
        background-color: transparent;
        width: 0px;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1;
    }

    .pro1splide .splide__list li::before {
        content: '';
        position: absolute;
        background-color: transparent;
        width: 0px;
        height: 100%;
        top: 0;
        right: -15%;
    }

    .pro1splide .splide {
        width: 100%;
        position: relative;
    }

    .pro1splide .splide__track {
        overflow: hidden;
    }

    .pro1splide .splide__list {
        display: flex;
        padding: 0;
        margin: 0;
    }

    .pro1splide .splide__slide {
        position: relative;
        flex-shrink: 0;
        width: 100%;
        /* 設定每個圖片的寬度為 50% */
        margin-right: 0%;
        /* 遮擋圖片的右邊一部分 */
    }

    .pro1splide .splide__slide .propic {
        width: 100%;
        display: block;
        object-fit: cover;
        /* 圖片拉伸以填滿容器 */
    }

    .active .proline1 {
        background-color: #77664f;
        top: 100px;
        left: 0px;
        width: 100%;
        height: 1px;
        position: absolute;
        animation: proline1 2s linear;
        z-index: 2;
    }

    @keyframes proline1 {
        0% {
            width: 0%;
        }

        100% {
            width: 100%;
        }
    }

    /*2*/
    .pro2splide .left {
        width: 100%;
    }

    .pro2splide .right {
        width: 100%;
    }

    .pro2splide .right::before {
        content: '';
        position: absolute;
        background-color: transparent;
        width: 0px;
        height: 100%;
        top: 0;
        right: 0;
        z-index: 1;
    }

    .pro2splide .splide__list li::before {
        content: '';
        position: absolute;
        background-color: transparent;
        width: 0px;
        height: 100%;
        top: 0;
        right: -15%;
    }

    .pro2splide .splide {
        width: 100%;
        position: relative;
    }

    .pro2splide .splide__track {
        overflow: hidden;
    }

    .pro2splide .splide__list {
        display: flex;
        padding: 0;
        margin: 0;
    }

    .pro2splide .splide__slide {
        position: relative;
        flex-shrink: 0;
        width: 100%;
        /* 設定每個圖片的寬度為 50% */
        margin-right: 0%;
        /* 遮擋圖片的右邊一部分 */
    }

    .pro2splide .splide__slide .propic {
        width: 100%;
        display: block;
        object-fit: cover;
        /* 圖片拉伸以填滿容器 */
    }

    .active .proline3 {
        background-color: #77664f;
        top: 100px;
        left: 0px;
        width: 100%;
        height: 1px;
        position: absolute;
        animation: proline3 2s linear;
        z-index: 2;
    }

    @keyframes proline3 {
        0% {
            width: 0%;
        }

        100% {
            width: 100%;
        }
    }

    /*3*/
    .pro3splide .left {
        width: 100%;
    }

    .pro3splide .right {
        width: 100%;
    }

    .pro3splide .right::before {
        content: '';
        position: absolute;
        background-color: transparent;
        width: 0px;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1;
    }

    .pro3splide .splide__list li::before {
        content: '';
        position: absolute;
        background-color: transparent;
        width: 0px;
        height: 100%;
        top: 0;
        right: -15%;
    }

    .pro3splide .splide {
        width: 100%;
        position: relative;
    }

    .pro3splide .splide__track {
        overflow: hidden;
    }

    .pro3splide .splide__list {
        display: flex;
        padding: 0;
        margin: 0;
    }

    .pro3splide .splide__slide {
        position: relative;
        flex-shrink: 0;
        width: 100%;
        /* 設定每個圖片的寬度為 50% */
        margin-right: 0%;
        /* 遮擋圖片的右邊一部分 */
    }

    .pro3splide .splide__slide .propic {
        width: 100%;
        display: block;
        object-fit: cover;
        /* 圖片拉伸以填滿容器 */
    }

    .active .proline5 {
        background-color: #77664f;
        top: 100px;
        left: 0px;
        width: 100%;
        height: 1px;
        position: absolute;
        animation: proline5 2s linear;
        z-index: 2;
    }

    @keyframes proline5 {
        0% {
            width: 0%;
        }

        100% {
            width: 100%;
        }
    }

    /*4*/
    .pro4splide .left {
        width: 100%;
    }

    .pro4splide .right {
        width: 100%;
    }

    .pro4splide .right::before {
        content: '';
        position: absolute;
        background-color: transparent;
        width: 0px;
        height: 100%;
        top: 0;
        right: 0;
        z-index: 1;
    }

    .pro4splide .splide__list li::before {
        content: '';
        position: absolute;
        background-color: transparent;
        width: 0px;
        height: 100%;
        top: 0;
        right: -15%;
    }

    .pro4splide .splide {
        width: 100%;
        position: relative;
    }

    .pro4splide .splide__track {
        overflow: hidden;
    }

    .pro4splide .splide__list {
        display: flex;
        padding: 0;
        margin: 0;
    }

    .pro4splide .splide__slide {
        position: relative;
        flex-shrink: 0;
        width: 100%;
        /* 設定每個圖片的寬度為 50% */
        margin-right: 0%;
        /* 遮擋圖片的右邊一部分 */
    }

    .pro4splide .splide__slide .propic {
        width: 100%;
        display: block;
        object-fit: cover;
        /* 圖片拉伸以填滿容器 */
    }

    .active .proline7 {
        background-color: #77664f;
        top: 100px;
        left: 0px;
        width: 100%;
        height: 1px;
        position: absolute;
        animation: proline3 2s linear;
        z-index: 2;
    }

    @keyframes proline7 {
        0% {
            width: 0%;
        }

        100% {
            width: 100%;
        }
    }



    /*serve*/
    .serveleft {
        width: 100%;
    }

    .serveright {
        width: 100%;
    }

    .servenum1 {
        position: absolute;
        right: 0;
        bottom: 0px;
        width: 10rem;
    }

    .servenum1-1 {
        position: absolute;
        right: 0;
        bottom: 0px;
        width: 10rem;
    }

    .servenum1-2 {
        position: absolute;
        left: unset;
        right: 0;
        bottom: 0px;
        width: 10rem;
    }

    .servenum1-4 {
        position: absolute;
        left: unset;
        right: 0;
        bottom: 0px;
        width: 10rem;
    }

    .servenum2 {
        position: absolute;
        left: 50vw;
        bottom: 0px;
        width: 10rem;
    }

    .servenum3 {
        position: relative;
        left: 0;
        bottom: 30px;
        width: 15rem;
    }

    .servenum4 {
        position: absolute;
        right: 0;
        bottom: 15px;
        width: 10rem;
    }

    .engwrd3 {
        padding-right: 0px;
        padding-left: 0px;
    }

    .engwrd5 {
        padding-right: 0px;
        padding-left: 0px;
    }

    .coopengwrd1 {
        padding-right: 0px;
    }

    .coopengwrd2 {
        padding-left: 0px;
        padding-right: 0px;
    }

    .coopengwrd3 {
        padding-right: 0px;
    }

    .coopengwrd4 {
        padding-left: 0px;
    }

    .coopengwrd5 {
        padding-right: 0px;
    }

    .coopengwrd6 {
        padding-right: 0px;
    }

    /*cooperate*/
    .coop1 {
        margin-top: 0px;
    }

    /*pointline2*/

    .pointline2 {
        position: absolute;
        top: -231px;
        left: 50%;
        width: 1px;
        height: 900px;
        display: block;
        /* z-index: -1; */
    }

    .active .pointline {
        background-color: #77664f;
        width: 1px;
        height: 1700px;
        position: absolute;
        animation: pointline 3s linear;
        animation-fill-mode: forwards;
        display: block;
        /* z-index: -1; */
    }

    @keyframes pointline {
        0% {
            height: 0%;
        }

        100% {
            height: 1700px;
        }
    }
}


@media screen and (max-width: 780px) {

    /*index*/
    .odmwrd {
        position: absolute;
        top: 37%;
        left: 39.5%;
    }

    /*connect*/
    .connectmap iframe {
        width: 600px;
        height: 600px;
    }
}

@media screen and (max-width: 480px) {
    /*banner*/

    .bannerwrd {
        position: absolute;
        top: 100vw;
        left: 35%;
        font-size: 25pt;
    }

    /*index*/

    .abscontent {
        position: relative;
        margin-top: 100vh;
        z-index: 3;
    }

    .mapscroll {
        max-width: 500px;
        height: 1080px;
        overflow-x: auto;
    }

    .mappic {
        width: 1921px;
        height: 100%;
        overflow: hidden;
    }

    .mapscroll::-webkit-scrollbar {
        width: 2px;
        /* 垂直滾動條的寬度 */
        height: 3px;
        /* 水平滾動條的高度 */
    }

    /* 設定滾動條的背景顏色 */
    .mapscroll::-webkit-scrollbar-track {
        background-color: #774f4f93;
        /* 滾動條的軌道顏色 */
    }

    /* 設定滾動條的滑塊顏色 */
    .mapscroll::-webkit-scrollbar-thumb {
        background-color: #774f4f;
        /* 滾動條滑塊的顏色 */
        border-radius: 10px;
        /* 滾動條滑塊的圓角 */
    }

    /* 滑塊在被滑動時的顏色 */
    .mapscroll::-webkit-scrollbar-thumb:hover {
        background-color: #774f4f;
    }

    /*公司優勢*/
    .pointwrd {
        font-size: 8rem;
    }

    .abswrd {
        position: absolute;
        top: 125px;
        left: 65px;
    }

    /*odm.oem*/
    .odmwrd {
        position: absolute;
        top: 32%;
        left: 34.7%;
        letter-spacing: 0em;
    }

    /*explore*/
    .exblock1 {
        width: 100%;
    }

    .exblock2 {
        width: 100%;
    }

    .exblock3 {
        width: 100%;
    }

    .exblock4 {
        width: 100%;
    }

    .exblock5 {
        width: 100%;
    }

    .exblock6 {
        width: 100%;
    }

    .exmove1 {
        transform: translate3d(10px, -105px, 0);
        z-index: 1;
    }

    .exmove2 {
        transform: translate3d(-10px, -95px, 0);
        z-index: 1;
    }

    .exmove3 {
        transform: translate3d(-11px, -80px, 0);
        z-index: 1;
    }

    .licencewrd {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-55px, -70px, 0px);
    }



    /*creation*/
    .crescroll {
        max-width: 500px;
        height: 100%;
        overflow-x: auto;
    }

    .crepic {
        width: 600px !important;
        height: 100%;
        overflow: hidden;
    }

    .crescroll::-webkit-scrollbar {
        width: 2px;
        /* 垂直滾動條的寬度 */
        height: 3px;
        /* 水平滾動條的高度 */
    }

    /* 設定滾動條的背景顏色 */
    .crescroll::-webkit-scrollbar-track {
        background-color: transparent;
        /* 滾動條的軌道顏色 */
    }

    /* 設定滾動條的滑塊顏色 */
    .crescroll::-webkit-scrollbar-thumb {
        background-color: transparent;
        /* 滾動條滑塊的顏色 */
        border-radius: 10px;
        /* 滾動條滑塊的圓角 */
    }

    /* 滑塊在被滑動時的顏色 */
    .crescroll::-webkit-scrollbar-thumb:hover {
        background-color: transparent;
    }

    /*serve*/
    .servenum1 {
        position: relative;
        right: 0;
        bottom: 0px;
        width: 10rem;
    }

    .servenum1-1 {
        position: relative;
        right: 0;
        bottom: 0px;
        width: 10rem;
    }

    .servenum1-2 {
        position: relative;
        left: unset;
        right: 0;
        bottom: 0px;
        width: 10rem;
    }

    .servenum1-4 {
        position: relative;
        left: unset;
        right: 0;
        bottom: 0px;
        width: 10rem;
    }

    .coopengwrd6 {
        padding-left: 0px;
    }

    .servenum01 {
        position: relative;
        right: 0;
        bottom: 0px;
        width: 10rem;
    }

    .servenum2 {
        position: relative;
        left: 0;
        bottom: 0px;
        width: 10rem;
    }

    .servenum3 {
        position: relative;
        left: 0;
        bottom: 30px;
        width: 22rem;
    }

    .engwrd1 {
        padding-right: 0px;
        padding-left: 0px;
    }

    /*coop*/

    .coopsvg {
        height: 100px;
    }

    .cooptext {
        transform: translateY(95px);
    }

    /*connect*/
    .connectmap iframe {
        width: 400px;
        height: 400px;
    }

    .servenum4 {
        position: relative;
        right: 0;
        bottom: 15px;
        width: 10rem;
    }
}

@media screen and (max-width: 425px) {}

@media screen and (max-width: 414px) {

    /*index*/
    .odmwrd {
        position: absolute;
        top: 32%;
        left: 34.1%;
    }
}

@media screen and (max-width: 390px) {

    /*index*/
    .odmwrd {
        position: absolute;
        top: 32%;
        left: 32.9%;
    }

    /*connect*/
    .connectmap iframe {
        width: 300px;
        height: 300px;
    }
}

@media screen and (max-width: 375px) {

    /*banner*/
    .bannerwrd {
        position: absolute;
        top: 90vw;
        left: 35%;
        font-size: 20pt;
    }

    /*index*/
    .odmwrd {
        position: absolute;
        top: 32%;
        left: 32.2%;
    }

    /*serve*/
    .servenum2 {
        position: absolute;
        left: 45vw;
        bottom: 0px;
        width: 10rem;
    }
}

@media screen and (max-width: 320px) {

    /*serve*/
    .servenum3 {
        position: relative;
        left: 0;
        bottom: 30px;
        width: 13rem;
    }
}