@charset "UTF-8";
/**
 *
/*------------------------------------------------------*/
/*------------------------------------------------------*/
/* 字級文字-設定 */
.nav-text-normal {
    /* --fsize-rate: calc(16 / 80); */
    /* --fsize: max(min(calc(var(--fsize-rate) * var(--header-h)), 20px), 16px); */
    /* 1024 - 1920 */
    --fsize: 16px;
    color: var(--color-blue);
    font-size: var(--fsize);
    font-weight: 500;
    letter-spacing: 0.05em;
}

#nav-hamber-switch {
    display: none;
}

#demo-status {
    position: absolute;
    width: 100%;
    height: var(--header-top-space);
    display: flex;
    justify-content: flex-end;
    align-items: center;

    /* padding: 0 var(--header-right); */
    padding: 0 calc(var(--header-right) + var(--nav-space) * 0.5);
}

#demo-status > a {
    color: #fff;
    font-size: 12px;
    letter-spacing: 0.05em;
    opacity: 0.75;
}

#demo-status > a:last-child {
    margin-left: calc(var(--fsize));
}
/*------------------------------------------------------*/
/*------------------------------------------------------*/
.header_include .nav .nav__hamber {
    pointer-events: auto;
    cursor: pointer;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 9999;
    position: absolute;
    /* h:16px */    
    top: calc(var(--header-top-space));
    right: var(--header-right);
    width: 28px;

    display: block;

    /* transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%); */

    -webkit-transition: all .2s ease-in-out 0s;
    -o-transition: all .2s ease-in-out 0s;
    -moz-transition: all .2s ease-in-out 0s;
    transition: all .2s ease-in-out 0s;
}

.header_include .nav .nav__hamber span {
    --span-cross-ty: 9px;
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
    -moz-transition: all .2s ease;
    transition: all .2s ease;
    position: relative;
    display: block;
    width: 100%;
    height: 3px;
    background-color: #fff;
    border-radius: var(--border-radius-l);

    overflow: hidden;
}

.header_include .nav .nav__hamber span:not(:last-child) {
    margin-bottom: 6px
}

@keyframes hamber-effect {
    0% {
        width: 0%;
        left: 0%;
    }

    25% {
        width: 100%;
        left: 0%;
    }

    75% {
        width: 100%;
        left: 0%;
    } 

    100% {
        width: 100%;
        left: 100%;
    }
}

.header_include .nav .nav__hamber span::after {
    content: "";
    position: absolute;
    display: block;
    width: 0%;
    height: 2px;
    left: 0%;
    background-color: #cccccc;
}

.header_include .nav .nav__hamber.is-effected span:nth-child(1)::after {
    animation: hamber-effect 1s ease-out 0s 1 normal;
}

.header_include .nav .nav__hamber.is-effected span:nth-child(2)::after {
    animation: hamber-effect 1s ease-out 0.2s 1 normal;
}

.header_include .nav .nav__hamber.is-effected span:nth-child(3)::after {
    animation: hamber-effect 1s ease-out 0.3s 1 normal;
}

/* nav__hamber checked */
.header_include .nav #nav-hamber-switch:checked~.nav__hamber span:nth-child(1) {
    width: 100%;
    -webkit-transform: translate(0, var(--span-cross-ty)) rotate(45deg);
    -moz-transform: translate(0, var(--span-cross-ty)) rotate(45deg);
    -ms-transform: translate(0, var(--span-cross-ty)) rotate(45deg);
    -o-transform: translate(0, var(--span-cross-ty)) rotate(45deg);
    transform: translate(0, var(--span-cross-ty)) rotate(45deg);
    -webkit-transform-origin: center;
    -moz-transform-origin: center;
    -ms-transform-origin: center;
    -o-transform-origin: center;
    transform-origin: center
}

.header_include .nav #nav-hamber-switch:checked~.nav__hamber span:nth-child(2) {
    opacity: 0;
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
    margin-top: 0;
    -webkit-transform-origin: center;
    -moz-transform-origin: center;
    -ms-transform-origin: center;
    -o-transform-origin: center;
    transform-origin: center
}

.header_include .nav #nav-hamber-switch:checked~.nav__hamber span:nth-child(3) {
    width: 100%;
    -webkit-transform: translate(0, calc(-1 * var(--span-cross-ty))) rotate(-45deg);
    -moz-transform: translate(0, calc(-1 * var(--span-cross-ty))) rotate(-45deg);
    -ms-transform: translate(0, calc(-1 * var(--span-cross-ty))) rotate(-45deg);
    -o-transform: translate(0, calc(-1 * var(--span-cross-ty))) rotate(-45deg);
    transform: translate(0, calc(-1 * var(--span-cross-ty))) rotate(-45deg);
    margin-top: 0;
    -webkit-transform-origin: center;
    -moz-transform-origin: center;
    -ms-transform-origin: center;
    -o-transform-origin: center;
    transform-origin: center
}

/* checked */
.header_include .nav #nav-hamber-switch:checked~ .nav__hamber {
    top: calc(var(--header-top-space) + (var(--logo-size) / var(--logo-rate)) * 0.5 - 10.5px);
}

.header_include .nav #nav-hamber-switch:checked~ .nav__hamber span {
    background-color: #fff;
}

/*------------------------------------------------------*/
/*------------------------------------------------------*/
.header_include {
    position: relative;
    display: block;
    z-index: 10000;
}

.header_include .nav {
    /* --header-max-width: min(100%, 1920px);
    --side-padding: calc((100% - var(--header-max-width)) * 0.5); */
    --logo-rate: calc(266 / 146);
    --logo-size: calc(var(--logo-rate) * var(--fsize) * 6);
    --nav-space: calc(var(--fsize) * 1.5);
    --header-top-space: calc(var(--fsize));
    /* --fsize: max(min(2.5vmin, 28px), 22px); */
    /* fixed 可以防止 超出範圍 產生 左右的 scroll */
    position: fixed;
    top: 0;
    width: 100%;
    /* transform: translateY(0%); */

    /* -webkit-transition: all .2s ease-in-out 0s;
    -o-transition: all .2s ease-in-out 0s;
    -moz-transition: all .2s ease-in-out 0s;
    transition: all .2s ease-in-out 0s; */

}

/* .header_include .nav .nav__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color:var(--color-purple-dark);
    opacity: 0;
} */

/* .header_include, */
.header_include .nav,
.header_include .nav .nav__bg {
    height: var(--header-h);
}

.header_include .nav .nav__logo {
    position: absolute;
    display: block;
    width: var(--logo-size);
    top: calc(var(--header-top-space));
    /* left: calc(var(--header-left) + var(--side-padding)); */
    left: calc(var(--header-left));
    /* transform: translate(0%, -50%);
    -webkit-transform: translate(0%, -50%);
    -moz-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    -o-transform: translate(0%, -50%); */

    -webkit-transition: all .2s ease-in-out 0s;
    -o-transition: all .2s ease-in-out 0s;
    -moz-transition: all .2s ease-in-out 0s;
    transition: all .2s ease-in-out 0s;
}

.header_include .nav .nav__inner {
    pointer-events: none;
    position: absolute;
    width: 100%;
    /* height: 100%; */
    top: calc(var(--header-top-space));
    display: flex;
}


.header_include .nav .nav__inner .inner__con {
    position: relative;
    width: 100%;
    
    /* height: calc(var(--logo-size) / var(--logo-rate)); */
    /* padding-right: calc(var(--header-left) + var(--side-padding)); */

    display: flex;
    flex-direction: column;
    align-items: flex-end;   
    justify-content: flex-start;
    align-self: flex-start;
}

.header_include .nav .nav__inner .inner__con .con__list {
    --cube-size: calc(var(--fsize));
    position: relative;
    width: calc(var(--fsize) * 15.5);
    height: calc(var(--fsize) * 2.5);
    display: flex;
    flex-direction: row;
    justify-content: center;
    /* align-items: flex-start; */

    transform: translateX(0%);
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);

    -webkit-transition: all .2 ease-in-out 0s;
    -o-transition: all .2s ease-in-out 0s;
    -moz-transition: all .2s ease-in-out 0s;
    transition: all .2s ease-in-out 0s;

    background-color: var(--color-green);
    /* padding: calc(var(--fsize) * 0.35) calc(var(--fsize) * 1); */
}

.header_include .nav .nav__inner .inner__con .con__list .list__bg {
    position: absolute;
    width: 87%;
    height: calc(var(--fsize) * 0.5);
    background-color: var(--color-green);
    top: 100%;
    right: 0;

    -webkit-transition: all .1s ease-in-out 0s;
    -o-transition: all .1s ease-in-out 0s;
    -moz-transition: all .1s ease-in-out 0s;
    transition: all .1s ease-in-out 0s;
}

.header_include .nav .nav__inner .inner__con .con__list::before {
    content: "";
    position: absolute;
    width: var(--cube-size);
    height: var(--cube-size);
    background-color: var(--color-green);
    bottom: calc(var(--cube-size) * -1);
    left: calc(var(--cube-size) * -1);

    -webkit-transition: all .1s ease-in-out 0s;
    -o-transition: all .1s ease-in-out 0s;
    -moz-transition: all .1s ease-in-out 0s;
    transition: all .1s ease-in-out 0s;
}

.header_include .nav .nav__inner .inner__con .con__list::after {
    content: "";
    position: absolute;
    width: var(--cube-size);
    height: var(--cube-size);
    background-color: var(--color-green);
    bottom: 0;
    left: calc(var(--cube-size) * -2);

    -webkit-transition: all .1s ease-in-out 0s;
    -o-transition: all .1s ease-in-out 0s;
    -moz-transition: all .1s ease-in-out 0s;
    transition: all .1s ease-in-out 0s;
}

.header_include .nav .nav__inner .inner__con .con__list .list__item {
    --cube-size: calc(var(--fsize) * 0.4);
    position: relative;
    /* width: 100%;
    height: 100%; */
    flex: 0 0 auto;
    display: flex;
    align-items: center;

    -webkit-transition: all .1s ease-in-out 0s;
    -o-transition: all .1s ease-in-out 0s;
    -moz-transition: all .1s ease-in-out 0s;
    transition: all .1s ease-in-out 0s;
}

/* .header_include .nav .nav__inner .inner__con .con__list .list__item::after,
.header_include .nav .nav__inner .inner__con .con__list .list__item::before {
    content: "";
    position: absolute;
    width: var(--cube-size);
    height: var(--cube-size);
    background-color: var(--color-green);
    opacity: 0;
}

.header_include .nav .nav__inner .inner__con .con__list .list__item::before {
    top: calc(var(--cube-size));
    left: 0;
}

.header_include .nav .nav__inner .inner__con .con__list .list__item::after {
    bottom: calc(var(--cube-size));
    right: 0;
} */

.header_include .nav .nav__inner .inner__con .con__list .list__item .box__line {
    position: relative;
    width: 1px;
    height: 50%;
    background-color: var(--color-blue);
}
/* .header_include .nav .nav__inner .inner__con .con__list .list__item:not(:first-child) {
    border-left: 1px solid var(--color-blue);
    box-sizing: border-box;
} */

.header_include .nav .nav__inner .inner__con .con__list .list__item .item__text {
    pointer-events: auto;
    position: relative;
    /* width: 100%;
    height: 100%; */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 calc(var(--nav-space) * 0.5);
    color: var(--color-blue);

    -webkit-transition: all .1s ease-in-out 0s;
    -o-transition: all .1s ease-in-out 0s;
    -moz-transition: all .1s ease-in-out 0s;
    transition: all .1s ease-in-out 0s;
}

.header_include .nav .nav__inner .inner__con .con__list:has(.list__item:hover) {
    background-color: var(--color-blue);
}

.header_include .nav .nav__inner .inner__con .con__list:has(.list__item:hover)::before,
.header_include .nav .nav__inner .inner__con .con__list:has(.list__item:hover)::after {
    background-color: var(--color-blue);
    bottom: 0;
    left: 0;
}

.header_include .nav .nav__inner .inner__con .con__list:has(.list__item:hover) .list__bg {
    background-color: var(--color-blue);
    height: 0;
}

.header_include .nav .nav__inner .inner__con .con__list .list__item:hover .item__text {
    color: var(--color-green);
}

/* .header_include .nav .nav__inner .inner__con .con__list .list__item:hover::after,
.header_include .nav .nav__inner .inner__con .con__list .list__item:hover::before {
    opacity: 1;
} */

#back-to-stage.is-notwork {
    pointer-events: none;
    cursor: default;
    /* opacity: 0.5; */
}

/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */
/* checked */
/* .header_include .nav > #nav-hamber-switch:checked~ .nav__inner .inner__inbg,
.header_include .nav > #nav-hamber-switch:checked~ .nav__inner .inner__con .con__list {
    transform: translateX(0%);
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
}

.header_include .nav > #nav-hamber-switch:checked~ .nav__inner .inner__inbg {
    box-shadow: 2px 0px 4px 1px rgba(0, 0, 0, 0.15);
} */


.header_include .nav > #nav-hamber-switch:checked~ .nav__inner .inner__con .con__list {
    transform: translateX(0%);
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
}

.header_include .nav .nav__logo.is-notwork > a {
    pointer-events: none;
}


@media only screen and (min-width:320px) {
    #demo-status {
        padding: 0 var(--header-right);
    }

    .nav-text-normal {
        --fsize: 22px;
    }

    .header_include .nav {
        --header-top-space: calc(var(--fsize) * 1);
    }

    .header_include .nav .nav__hamber {
        display: block;
    }

    .header_include .nav {
        --logo-size: calc(var(--logo-rate) * var(--fsize) * 2.9);
    }

    .header_include .nav .nav__inner .inner__con .con__list {
        transform: translateX(calc(100% + var(--fsize) * 2));
        width: calc(var(--fsize) * 9.5);
        height: calc(var(--fsize) * 9.5);
        flex-direction: column;
        justify-content: flex-start;
        align-items: initial;
        padding: 0 calc(var(--fsize) * 1);
        padding-top: calc(var(--logo-size) / var(--logo-rate) + var(--fsize) * 0.5);
    }

    .header_include .nav .nav__inner .inner__con .con__list .list__item .box__line {
        width: 100%;
        height: 1px;
        margin: calc(var(--fsize) * 0.75) 0;
    }

    .header_include .nav .nav__inner .inner__con .con__list .list__item .item__text {
        padding: 0 calc(var(--nav-space) * 0.15);
    }
}
@media screen and (min-width:360px) {}
@media screen and (min-width:390px) {}
@media screen and (min-width:414px) {}
@media screen and (min-width:500px) {}
@media screen and (min-width:600px) {
    .header_include .nav {
        --logo-size: calc(var(--logo-rate) * var(--fsize) * 4);
    }
}
@media screen and (min-width:768px) {}
@media screen and (min-width:1024px) {
    #demo-status {
        padding: 0 calc(var(--header-right));
    }

    .nav-text-normal {
        --fsize: 18px;
    }

    .header_include .nav {
        --header-top-space: calc(var(--fsize));
    }

    .header_include .nav .nav__hamber {
        display: none;
    }

    .header_include .nav {
        --logo-size: calc(var(--logo-rate) * var(--fsize) * 8);
    }

    .header_include .nav .nav__inner .inner__con .con__list {
        transform: translateX(0%);

        width: calc(var(--fsize) * 15.5);
        /* width: calc(var(--fsize) * 26); */
        height: calc(var(--fsize) * 2.2);
        flex-direction: row;
        justify-content: flex-end;

        padding: 0 calc(var(--header-right)) 0 0;
        padding-top: 0;
    }

    .header_include .nav .nav__inner .inner__con .con__list .list__item .box__line {
        width: 1px;
        height: 50%;
        margin: 0 calc(var(--nav-space) * 0.5);
    }

    .header_include .nav .nav__inner .inner__con .con__list .list__item .item__text {
        /* padding: 0 calc(var(--nav-space) * 0.5); */
        padding: 0 calc(var(--nav-space) * 0);
    }
}

@media screen and (min-width:1200px) {
}
@media screen and (min-width: 1400px) {}
@media screen and (min-width: 1600px) {}
@media screen and (min-width: 1900px) {}