@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-red-dark);
    font-size: var(--fsize);
    font-weight: 600;
    letter-spacing: 0.05em;
}

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

a {
    color: var(--color-red-dark);
    font-weight: 600;
}

/*------------------------------------------------------*/
/*------------------------------------------------------*/
.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)); */
    top:50%;
    right: var(--header-right);
    width: var(--hamber-w);

    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 {
    -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: var(--color-red-dark);
    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(--fsize) * 1.5);
}

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

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

.header_include .nav {
    --hamber-w: 30px;
    --span-cross-ty: 9px;

    --logo-size: calc(var(--fsize) * 6);
    --nav-space: calc(var(--fsize) * 1.5);
    --header-top-space: calc(var(--fsize));

    /* fixed 可以防止 超出範圍 產生 左右的 scroll */
    position: fixed;
    top: 0;
    width: 100%;
}

.header_include .nav .nav__bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-yellow-light);
    display: block;
}

/* .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)); */
    top: 50%;
    /* 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__bg {
    pointer-events: auto;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    background-color: var(--color-red-dark2);
    opacity: 0.90;
    display: block;

    transform: translateX(100%);
    -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;
}

.header_include .nav .nav__inner .inner__con {
    position: relative;
    width: 100%;

    top: calc(var(--header-top-space));
    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 {
    pointer-events: auto;
    --cube-size: calc(var(--fsize));
    position: relative;
    width: initial;
    height: auto;
    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-white-light); */
    background-color: rgba(252, 247, 242, 0.5);
    border-top: 4px solid var(--color-red-dark);
    border-left: 4px solid var(--color-red-dark);
    border-bottom: 12px solid var(--color-red-dark);
    box-sizing: border-box;

    box-shadow: var(--box-shadows);
}

/* .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;

    box-shadow: 0px 3px 3px 2px rgba(0, 0, 0, 0.05);
} */

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

    display: flex;
    justify-content: center;
}

.header_include .nav .nav__inner .inner__con .con__list .list__item .box__line {
    position: relative;
    width: 1px;
    height: 50%;
    background-color: var(--color-red-dark);
}

.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 .list__item .item__text.is-notwork {
    pointer-events: none;
    cursor: default;
    opacity: 0.5;
    filter: grayscale(1);
}

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


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

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


/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */
/* 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-hamber-switch:checked~ .nav__inner .inner__bg {
    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) {
    .header_include .nav > #nav-hamber-switch:checked~ .nav__inner .inner__bg {
        transform: translateX(0%);
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
    }

    .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(--fsize) * 8);
    }

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

    .header_include .nav .nav__logo {
        /* top: calc(var(--header-top-space)); */
        top: 50%;
        transform: translate(0%, -50%);
        -webkit-transform: translate(0%, -50%);
        -moz-transform: translate(0%, -50%);
        -ms-transform: translate(0%, -50%);
        -o-transform: translate(0%, -50%);
    }

    .header_include .nav .nav__inner .inner__con .con__list {
        background-color: rgba(252, 247, 242, 1);
        transform: translateX(100%);
        width: 80%;
        height: auto;
        flex-direction: column;
        justify-content: flex-start;
        align-items: initial;
        padding: calc(var(--fsize) * 2) calc(var(--fsize) * 1) calc(var(--fsize) * 1) calc(var(--fsize) * 1);
        border-bottom: 12px solid var(--color-red-dark);
    }

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

    .header_include .nav .nav__inner .inner__con .con__list .list__item .item__text {
        padding-right: calc(var(--hamber-w) * 0.5);
    }
}
@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) {
    .header_include .nav > #nav-hamber-switch:checked~ .nav__inner .inner__bg {
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
    }

    #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__bg {
        display: none;
    }

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

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

    .header_include .nav .nav__logo {
        top: calc(var(--header-top-space));
        transform: translate(0%, 0%);
        -webkit-transform: translate(0%, 0%);
        -moz-transform: translate(0%, 0%);
        -ms-transform: translate(0%, 0%);
        -o-transform: translate(0%, 0%);
    }

    .header_include .nav .nav__inner .inner__con .con__list {
        background-color: rgba(252, 247, 242, 0.5);
        transform: translateX(0%);
        width: initial;
        height: auto;
        flex-direction: row;
        justify-content: flex-end;

        padding: calc(var(--fsize) * 0) calc(var(--header-right) * 2);
        /* padding-top: 0; */
        border-bottom: 7px solid var(--color-red-dark);
    }

    .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-right: 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) {}