@charset "UTF-8";
/**
 *
 /* 字級文字-設定 */
.nav-text-normal {
    color: #fff;
    font-size: var(--fsize);
    
    font-weight: 500;

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

.nav-subtext-normal {
    color: #fff;
    --subfsize: min(calc(var(--fsize) - 6px), 18px);
    font-size: var(--subfsize);
    line-height: calc(var(--subfsize) + 4px);
    font-weight: 400;

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

.nav-text-s {
    --fsize: 16px;
    color: #000;
    font-size: var(--fsize);
    font-weight: 400;

    -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;
}
/*------------------------------------------------------*/
/* input[type='text']:valid {
    border:2px solid green!important;
}

input[type='text']:invalid {
    border:2px solid red!important;;
} */

/* #searchFormPC::after {
    content: '請輸入關鍵字';
    position: absolute;
    width: auto;
    height: auto;
    left: 18px;
    top: calc(100% + 3px);
    display: flex;
    color: red;
    font-size: 13px;
} */

#searchFormMobile .errorMessage,
#searchFormPC .errorMessage {
    position: absolute;
    width: auto;
    height: auto;
    left: 18px;
    top: calc(100% + 3px);
    display: flex;
    color: #df0000;
    font-size: 13px;
}


.header_include .nav .nav__inner-pc .list__item.func-search {
    /* position: absolute; */
    z-index: 50;
}

.header_include .nav .nav__inner-pc .list__item.func-search .item__search {
    position: relative;
    width: 32px;

    display: flex;
    justify-content: flex-end;
}

.header_include .nav .nav__inner-pc .list__item.func-search .item__search > input[type='text'] {
    display: block;
    font-size: calc(var(--fsize) - 1px);
    max-width: 200px;

    width: 0px;
    border: 0px solid var(--color-line-gray3);
    padding: 0;
    background-color: rgba(255, 255, 255, 0);

    -webkit-transition: width .2s ease-out 0s, border .2s ease-out 0s, background-color .2s ease-out 0s;
    -o-transition: width .2s ease-out 0s, border .2s ease-out 0s, background-color .2s ease-out 0s;
    -moz-transition: width .2s ease-out 0s, border .2s ease-out 0s, background-color .2s ease-out 0s;
    transition: width .2s ease-out 0s, border .2s ease-out 0s, background-color .2s ease-out 0s;
}

.header_include .nav .nav__inner-pc .list__item.func-search .item__search .search__btns {
    position: absolute;
    right: 15px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);

    display: flex;
    flex-direction: row;
    align-items: center;
}

.header_include .nav .nav__inner-pc .list__item.func-search .item__search .search__btns > button {
    pointer-events: none;

    -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-pc .list__item.func-search .item__search .search__btns.is-work > button {
    pointer-events: all;
}

.header_include .nav .nav__inner-pc .list__item.func-search .item__search .search__btns > button:hover {
    filter: invert(71%) sepia(3%) saturate(5723%) hue-rotate(357deg) brightness(70%) contrast(87%);
}

.header_include .nav .nav__inner-pc .list__item.func-search .item__search .search__btns > button.btn__close:hover {
    transform: rotate(90deg);
}


.header_include .nav .nav__inner-pc .list__item.func-search .item__search .search__btns > button > img {
    width: 18px;
    -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-pc .list__item.func-search .item__search .search__btns .btn__close {
    margin-left: 8px;
    display: none;
}

/* is-search-open */
.header_include .nav .nav__inner-pc.is-search-open .list__item.func-version {
    opacity: 0;
}

.header_include .nav .nav__inner-pc.is-search-open .list__item.func-search {
    position: absolute;
}

.header_include .nav .nav__inner-pc.is-search-open .list__item.func-search .item__search {
    width: initial;
}

.header_include .nav .nav__inner-pc.is-search-open .list__item.func-search .item__search > input[type='text'] {
    width: 100%;
    border: 1px solid var(--color-line-gray3);
    padding: 9px 60px 9px 18px;
    background-color: rgba(255, 255, 255, 1);
}

.header_include .nav .nav__inner-pc.is-search-open .list__item.func-search .item__search .search__btns .btn__close {
    display: flex;
}

.header_include .nav .nav__inner-pc.is-search-open .list__item.func-search .item__search .search__btns .btn__search > img {
    width: 16px;
}

.header_include .nav .nav__inner-pc.is-search-open .list__item.func-search .item__search .search__btns .btn__close > img {
    width: 14px;
}



/*------------------------------------------------------*/
.header_include .nav .nav__inner-pc .list__item.func-version {
    -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-pc .list__item.func-version .item__version {
    position: relative;
    width: max-content;
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid var(--color-line-gray3);
    border-radius: var(--crowds-status-radius);
    padding: 4px 0px;
    background-color: rgba(255, 255, 255, 0.8);
}

.header_include .nav .nav__inner-pc .list__item.func-version .item__version::before {
    --space-val: 2px;
    --actived-w: calc(52% - var(--space-val) * 2);
    content: '';
    position: absolute;
    width: var(--actived-w);
    height: calc(100% - var(--space-val) * 2);
    left: var(--space-val);
    top: var(--space-val);
    /* background-color:rgba(0, 0, 0, 0.3); */
    background-color: var(--color-brown);
    border-radius: var(--crowds-status-radius);

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

.header_include .nav .nav__inner-pc .list__item.func-version .item__version > a {
    position: relative;
    border-radius: var(--crowds-status-radius);
    padding: 6px 12px;

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

.header_include .nav .nav__inner-pc .list__item.func-version .item__version > a.version__ch {
    color: #fff;
    left: 2px;
}

.header_include .nav .nav__inner-pc .list__item.func-version .item__version > a.version__en {
    right: 0px;
}

.header_include .nav .nav__inner-pc .list__item.func-version .item__version > a.version__en.btn-no-work {
    pointer-events: none;
    color:#ccc !important;
}


.header_include .nav .nav__inner-pc .list__item.func-version.is-en .item__version::before {
    left: calc(var(--space-val) + var(--actived-w));
}

.header_include .nav .nav__inner-pc .list__item.func-version.is-en .item__version > a.version__ch {
    color: #000;
}

.header_include .nav .nav__inner-pc .list__item.func-version.is-en .item__version > a.version__en {
    color: #fff;
}

/* hover effect */
/* is-hover-ch */
.header_include .nav .nav__inner-pc .list__item.func-version .item__version.is-hover-ch::before {
    left: var(--space-val);
}

.header_include .nav .nav__inner-pc .list__item.func-version .item__version.is-hover-ch > a.version__ch {
    color: #fff;
}

.header_include .nav .nav__inner-pc .list__item.func-version .item__version.is-hover-ch > a.version__en {
    color: #000;
}


/* is-hover-en */
.header_include .nav .nav__inner-pc .list__item.func-version .item__version.is-hover-en::before {
    left: calc(var(--space-val) + var(--actived-w));
}

.header_include .nav .nav__inner-pc .list__item.func-version .item__version.is-hover-en > a.version__ch {
    color: #000;
}

.header_include .nav .nav__inner-pc .list__item.func-version .item__version.is-hover-en > a.version__en {
    color: #fff;
}


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

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

    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: 7px;
    -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: 2px;
    background-color: #000000;

    overflow: hidden;
}

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

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

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


/*------------------------------------------------------*/
.header_include {
    --fsize: max(min(2.5vmin, 28px), 22px);
    position: relative;
    display: block;
    z-index: 10000;
}

.header_include .nav {
    /* 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.is-out {
    /* transform: translateY(calc(-1 * var(--header-h))); */
    transform: translateY(-100%);
}

.header_include .nav::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 1);
    transform: translateY(-100%);

    -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.is-bg-in::before {
    transform: translateY(0%);
}


.header_include .nav .nav__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    z-index: -1;
}

.header_include .nav .nav__bg::before {
    content: "";
    position: absolute;
    display: block;
    width: 100vw;
    height: 100vh;
    top: 0px;
    left: 0px;
    background-color: rgba(0, 0, 0, 0);
    z-index: -1;

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

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

.header_include,
.header_include .nav,
.header_include .nav .nav__bg {
    height: var(--header-h);
    -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__logo {
    position: absolute;
    display: block;
    top: 50%;
    left: var(--header-left);
    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;

    z-index: 5;
}

.header_include .nav .nav__logo a {
    position: relative;
    display: block;

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

.header_include .nav .nav__logo a img {
    /* width: 84px; */
    width: 120px;
    -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-pc {
    position: absolute;
    /* height: 100%; */
    /* right: calc(var(--header-right) + 26px + 15px); */
    right: calc(var(--header-right) + 26px);
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);

    display: flex;
    flex-direction: row;
    justify-content: flex-end;

    -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-pc.is-search-open .list__item.func-version {
    margin-right: calc(max(2.5vw, 20px) + 32px);
} */

.header_include .nav .nav__inner-pc .list__item {
    position: relative;
    flex: 0 0 auto;
    /* height: 100%; */
    display: flex;
    align-items: center;

    -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-pc .list__item .item__text::after {
    position: absolute;
    display: block;
    content: "";
    width: 100%;
    height: 2px;
    top: 20px;
    left: 0;
    background-color: #000;
    transition: transform 0.25s;
    transform: scaleX(0);
    transform-origin: right; 
}

.header_include .nav .nav__inner-pc .list__item:hover .item__text::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* .header_include .nav .nav__inner-pc .list__item:not(:first-child) {
    margin-left: max(2.5vw, 20px);
    
} */

.header_include .nav .nav__inner-pc .list__item {
    margin-right: max(2.5vw, 20px);
}

.header_include .nav .nav__inner-pc .list__item.func-search {
    margin-right: max(1.5vw, 20px);
}

.header_include .nav .nav__inner-pc .list__item > a {
    position: relative;
    display: block;
    bottom: 1px;
    z-index: 1;
}

.header_include .nav .nav__inner-pc .list__item .item__body {
    --off-side: calc(30px + 10px);
    --text-h: 38px;
    --space-w: 64px;
    --space-h: 14px;
    position: absolute;
    top: 30px;
    left: calc(-1 * var(--off-side));
    display: block;
    padding-top: 0;
}

.header_include .nav .nav__inner-pc .list__item .item__body::before {
    content: "";
    position: absolute;
    width: var(--space-w);
    height: var(--space-h);
    left: var(--off-side);
    top: calc(-1 * var(--space-h));
    /* border: 1px solid #000;
    box-sizing: border-box; */
}

.header_include .nav .nav__inner-pc .list__item .item__body .body__subwrap {
    position: relative;
    display: flex;
    /* padding: 20px var(--off-side) 20px var(--off-side); */
    padding: 30px calc(var(--off-side) + 0px) 30px calc(var(--off-side) + 0px);

    background-color: #fff;
    border-radius: var(--panel-radius-l);
    overflow: hidden;

    /* box-shadow: 0px 5px 6px 1px rgba(0, 0, 0, 0.1); */
    box-shadow: 0px 14px 18px -2px rgba(0, 0, 0, 0.1)
}

.header_include .nav .nav__inner-pc .list__item .item__body .body__subwrap.display-row {
    width: 450px;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

.header_include .nav .nav__inner-pc .list__item .item__body .body__subwrap.display-col {
    width: 225px;
    flex-direction: column;
    justify-content: initial;
    flex-wrap: nowrap;
}

.header_include .nav .nav__inner-pc .list__item .item__body .body__subwrap .subwrap__text {
    position: relative;
    flex: 0 0 auto;
    height: var(--text-h);

    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    display: flex;
    align-items: center;
}

.header_include .nav .nav__inner-pc .list__item .item__body .body__subwrap.display-row .subwrap__text {
    width: 48%;
}

.header_include .nav .nav__inner-pc .list__item .item__body .body__subwrap.display-col .subwrap__text {
    width: 100%;
}

.header_include .nav .nav__inner-pc .list__item .item__body .body__subwrap .subwrap__text > p {
    position: relative;
}

.header_include .nav .nav__inner-pc .list__item .item__body .body__subwrap .subwrap__text > p::after,
.header_include .nav .nav__inner-pc .list__item .item__body .body__subwrap .subwrap__text > p::after {
    position: absolute;
    display: block;
    content: "";
    width: 100%;
    height: 1px;
    top: 21px;
    left: 0;
    background-color: #000;
    transition: transform 0.25s;
    transform: scaleX(0);
    transform-origin: right; 
}

.header_include .nav .nav__inner-pc .list__item .item__body .body__subwrap .subwrap__text:hover > p::after {
    transform: scaleX(1);
    transform-origin: left;
}

.header_include .nav .nav__inner {
    --inbg-w: min(33vw, 500px);
    --bg-cut-w: calc((100vw - var(--inbg-w)) + 20px);
    pointer-events: none;
    position: absolute;
    width: 100%;
    display: block;
    z-index: 1;
}

.header_include .nav .nav__inner::before {
    pointer-events: none;
    content: "";
    position: absolute;
    height: 100vh;
    width: 100%;
    right: 0%;

    background-color: rgba(0, 0, 0, 0);
    
    -webkit-transition: all .3s var(--nav-transition-ease) 0s;
    -o-transition: all .3s var(--nav-transition-ease) 0s;
    -moz-transition: all .3s var(--nav-transition-ease) 0s;
    transition: all .3s var(--nav-transition-ease) 0s;
}

.header_include .nav .nav__inner.bg-in::before {
    background-color: rgba(0, 0, 0, 0.3);
    width: 100vw;
    right: 0%;
    z-index: -1;
}

.header_include .nav .nav__inner.bg-cut::before {
    width: var(--bg-cut-w);
    right: calc(100vw - var(--bg-cut-w));
}


.header_include .nav .nav__inner .nav__inbg {
    pointer-events: none;
    position: absolute;
    width: var(--inbg-w);
    height: 100vh;
    background-color: var(--color-main-system);
    right: 0;
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);

    -webkit-transition: all .3s var(--nav-transition-ease) 0s;
    -o-transition: all .3s var(--nav-transition-ease) 0s;
    -moz-transition: all .3s var(--nav-transition-ease) 0s;
    transition: all .3s var(--nav-transition-ease) 0s;

    z-index: -1;
}

.header_include .nav .nav__inner .nav__list {
    pointer-events: auto;

    position: absolute;
    width: var(--inbg-w);
    height: 100vh;
    right: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    /* align-items: stretch; */

    -webkit-transition: all .4s var(--nav-transition-ease) 0.05s;
    -o-transition: all .4s var(--nav-transition-ease) 0.05s;
    -moz-transition: all .4s var(--nav-transition-ease) 0.05s;
    transition: all .4s var(--nav-transition-ease) 0.05s;

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

    padding: 120px 0px 20px 60px;
    opacity: 0;

    overflow: auto;
}

.header_include .nav .nav__inner .nav__list > ul {
    --social-w: 60px;
    position: relative;
    flex: 0 0 auto;
}

.header_include .nav .nav__inner .nav__list .nav__list__left {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    width: calc(100% - var(--social-w));
}

.header_include .nav .nav__inner .nav__list .nav__list__right {
    width: var(--social-w);
}

.header_include .nav .nav__inner .nav__list .nav__list__left .list__item {
    position: relative;
    flex: 0 0 auto;
}

.header_include .nav .nav__inner .nav__list .nav__list__left .list__item {
    width: 49%;
}

.header_include .nav .nav__inner .nav__list .nav__list__left .list__item.toggle {
    width: 100%;
}


/* 包含第三個 之後所有 */
/* .header_include .nav .nav__inner .nav__list .nav__list__left .list__item:nth-child(2) ~ .list__item {
    width: 49%;
} */


.header_include .nav .nav__inner .nav__list .nav__list__left .list__item:not(:first-child) {
    margin-top: calc(var(--fsize) * 1.5);
}

/* .header_include .nav .nav__inner .nav__list .nav__list__left .list__item:nth-child(1) .item__title,
.header_include .nav .nav__inner .nav__list .nav__list__left .list__item:nth-child(2) .item__title {
    margin-bottom: 15px;
} */

.header_include .nav .nav__inner .nav__list .nav__list__left .list__item:nth-child(5) .item__title .item__text,
.header_include .nav .nav__inner .nav__list .nav__list__left .list__item:nth-child(4) .item__title .item__text,
.header_include .nav .nav__inner .nav__list .nav__list__left .list__item:nth-child(3) .item__title .item__text {
    pointer-events: auto;
    cursor: pointer;
}



.header_include .nav .nav__inner .nav__list .nav__list__left .list__item .item__sublist .item__text {
    pointer-events: auto;
    cursor: pointer;
}

.header_include .nav .nav__inner .nav__list .nav__list__left .list__item .item__sublist {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.header_include .nav .nav__inner .nav__list .nav__list__left .list__item .item__sublist .item__text {
    flex: 0 0 auto;
    width: 49%;
    margin-top: 15px;
}

.header_include .nav .nav__inner .nav__list .nav__list__right {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* justify-content: flex-end; */

    /* align-self: flex-end; */
    margin-top: max(38vh, 360px);

    -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 .nav__list .nav__list__right .list__item {
    pointer-events: auto;
    cursor: pointer;
    position: relative;
}

.header_include .nav .nav__inner .nav__list .nav__list__right .list__item:last-child {
    margin-top: 10px;
}

.header_include .nav .nav__inner .nav__list .nav__list__right .list__item > img {
    width: 28px;
}

.header_include .nav .nav__inner .nav__list .nav__list__left .list__item .item__title > a {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    /* padding-right: 20px; */
    padding-right: calc(20px - 6px);
}

/* ------------------------ */
/* cross-right */
.header_include .nav .nav__inner .nav__list .nav__list__left .list__item.toggle .item__title > a .cross-right {
    --cross-size: 12px;
    position: relative;
    display: flex;
    margin-left: 20px;
}


.header_include .nav .nav__inner .nav__list .nav__list__left .list__item.toggle .item__title > a .cross-right::before {
    content: "";
    position: absolute;
    width: var(--cross-size);
    height: 2px;
    left: calc(-1 * var(--cross-size)/2 + 1px);
    background-color: #fff;
}

.header_include .nav .nav__inner .nav__list .nav__list__left .list__item.toggle .item__title > a .cross-right::after {
    content: "";
    position: absolute;
    width: 2px;
    height: var(--cross-size);
    background-color: #fff;
    top: calc(-1 * var(--cross-size)/2 + 1px);

    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease;
}

.header_include .nav .nav__inner .nav__list .nav__list__left .list__item.toggle .item__title > a.is-open .cross-right::after {
    height: 0;
    top: 0;
}


/* .header_include .nav .nav__inner .nav__list .nav__list__down-mobile {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 80px;
    padding: 0 var(--header-side);
    display: flex;
} */

.header_include .nav .nav__inner .nav__list .nav__list__down-mobile {
    margin-top: 50px;
}

.header_include .nav .nav__inner .nav__list .nav__list__down-mobile .list__item {
    position: relative;
    width: 100%;
    display: flex;
}

.header_include .nav .nav__inner .nav__list .nav__list__down-mobile .list__item > input[type='text'] {
    font-size: calc(var(--fsize) - 1px);
    border: 1px solid var(--color-line-gray3);
    padding: 12px 45px 12px 18px;
    background-color: #fff !important;
}


.header_include .nav .nav__inner .nav__list .nav__list__down-mobile .list__item .down__btn__search {
    position: absolute;
    right: 15px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    display: flex;
}

.header_include .nav .nav__inner .nav__list .nav__list__down-mobile .list__item .down__btn__search > img {
    width: 16px;
}




/* ------------------------ */

/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */
/* checked */
.header_include .nav > #nav-hamber-switch:checked~ .nav__inner::before {
    pointer-events: auto;
    /* width: 52%;
    right: 48%;
    background-color: rgba(0, 0, 0, 0.3); */
}

.header_include .nav > #nav-hamber-switch:checked~ .nav__bg::before {
    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__bg {
    opacity: 1;
}

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

.header_include .nav > #nav-hamber-switch:checked~ .nav__inner .nav__inbg {
    background-color: var(--color-main-system);
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
}


@media only screen and (min-width:360px) {
    /* .header_include .nav .nav__inner-pc {
        display: none;
    } */

    /* .header_include .nav .nav__inner-pc {
        right: calc(var(--header-right) + 26px + 25px);
    } */

    .header_include .nav .nav__inner .nav__list .nav__list__down-mobile {
        display: flex;
    }

    .header_include .nav .nav__inner-pc .list__item:last-child,
    .header_include .nav .nav__inner-pc .list__item:nth-child(-n+5) {
        display: none;
    }


    /* .header_include .nav .nav__inner-pc.is-search-open .list__item.func-version {
        margin-right: 0;
    } */
    
    .header_include .nav .nav__inner-pc .list__item.func-version {
        margin-right: 25px;
    }

    .header_include .nav .nav__inner-pc .list__item.func-version .item__version {
        padding: 2px 0px;
    }

    .header_include .nav .nav__inner-pc .list__item.func-version .item__version.nav-text-s {
        --fsize2: calc(var(--fsize) - 2px);
        font-size: var(--fsize2);
    }

    .header_include .nav .nav__inner-pc.is-search-open .list__item.func-version {
        opacity: 1;
    }


    .header_include .nav .nav__inner {
        --inbg-w: 100vw;
        pointer-events: auto;
    }

    .header_include .nav .nav__inner::before {
        display: none;
    }

    /* ---------------------------------------------------------------------------- */
    .header_include .nav .nav__bg::before {
        display: block;
    }

    .header_include .nav .nav__inner .nav__list {
        width: 100%;
        height: calc(100vh);

        flex-direction: column;
        justify-content: initial;
        align-items: initial;

        /* height: calc(100vh - var(--header-h)); */
        padding: calc(var(--header-h) * 1.5) var(--header-side) 150px calc(var(--header-side) + 0px);
    }

    .header_include .nav .nav__inner .nav__list > ul {
        --social-w: 40px;
        width: 100%;
    }

    .header_include .nav .nav__inner .nav__list .nav__list__left {
        width: 100%;
    }

    .header_include .nav .nav__inner .nav__list .nav__list__left .list__item .item__sublist .item__text {
        width: 100%;
        padding-left: 20px;
    }

    /* 包含第三個 之後所有 */
    .header_include .nav .nav__inner .nav__list .nav__list__left .list__item {
        width: 100%;
    }
    
    .header_include .nav .nav__inner .nav__list .nav__list__left .list__item.toggle {
        width: 100%;
    }

    .header_include .nav .nav__inner .nav__list .nav__list__right {
        flex: 1 0 auto;
        flex-direction: row;
        align-items: initial;
        margin-top: 40px;
    }

    .header_include .nav .nav__inner .nav__list .nav__list__right .list__item:last-child {
        margin-left: 20px;
        margin-top: 0px;
    }

    .header_include .nav .nav__inner .nav__list .nav__list__left .list__item.toggle .item__title > a .cross-right {
        display: flex;
    }

    .header_include .nav .nav__inner .nav__list .nav__list__left .list__item:not(:first-child) {
        margin-top: calc(var(--fsize) * 1.5);
    }
}

@media only screen and (min-width:768px) {}
@media only screen and (min-width:1024px) {
    /* .header_include .nav .nav__inner-pc {
        display: flex;
    } */

    /* 更新需切換 */
    /* .header_include .nav .nav__inner-pc { */
        /* right: calc(var(--header-right) + 26px + max(2.5vw, 20px) + 10px); */
        /* right: calc(var(--header-right) + 26px + max(2.5vw, 20px) - 15px); */
    /* } */

    .header_include .nav .nav__inner .nav__list .nav__list__down-mobile {
        display: none;
    }

    .header_include .nav .nav__inner-pc .list__item:last-child,
    .header_include .nav .nav__inner-pc .list__item:nth-child(-n+5) {
        display: flex;
    }

    /* .header_include .nav .nav__inner-pc.is-search-open .list__item.func-version {
        margin-right: calc(max(2.5vw, 20px) + 32px);
    } */
    
    .header_include .nav .nav__inner-pc .list__item.func-version {
        margin-right: max(2.5vw, 20px);
    }

    .header_include .nav .nav__inner-pc .list__item.func-version .item__version {
        padding: 4px 0px;
    }

    .header_include .nav .nav__inner-pc .list__item.func-version .item__version.nav-text-s {
        --fsize2: calc(var(--fsize) - 1px);
        font-size: var(--fsize2);
    }

    .header_include .nav .nav__inner-pc.is-search-open .list__item.func-version {
        opacity: 0;
    }

    .header_include .nav .nav__inner {
        --inbg-w: min(52vw, 650px);
        pointer-events: none;
    }

    .header_include .nav .nav__inner::before {
        display: block;
    }
    /* ---------------------------------------------------------------------------- */
    .header_include .nav .nav__bg::before {
        display: none;
    }

    .header_include .nav .nav__inner .nav__list {
        width: var( --inbg-w);
        height: 100vh;
        
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;

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

        padding: calc(var(--header-h) * 1 + 17px) var(--header-side)
    }

    .header_include .nav .nav__inner .nav__list > ul {
        --social-w: 40px;
        width: auto;
    }


    .header_include .nav .nav__inner .nav__list .nav__list__left {
        width: calc(100% - var(--social-w));
    }

    .header_include .nav .nav__inner .nav__list .nav__list__left .list__item .item__sublist .item__text {
        width: 49%;
        padding-left: 0px;
    }

    .header_include .nav .nav__inner .nav__list .nav__list__left .list__item {
        width: 49%;
    }
    
    .header_include .nav .nav__inner .nav__list .nav__list__left .list__item.toggle {
        width: 100%;
    }

    .header_include .nav .nav__inner .nav__list .nav__list__right {
        flex: initial;
        flex-direction: column;
        align-items: flex-end;
        margin-top: max(38vh, 360px);
    }

    .header_include .nav .nav__inner .nav__list .nav__list__right .list__item:last-child {
        margin-left: 0px;
        margin-top: 15px;
    }

    .header_include .nav .nav__inner .nav__list .nav__list__left .list__item.toggle .item__title > a .cross-right {
        display: none;
    }

    .header_include .nav .nav__inner .nav__list .nav__list__left .list__item:not(:first-child) {
        margin-top: calc(var(--fsize) * 1.5);
    }
}

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