@charset "UTF-8";
/**
 *
 /* 字級文字-設定 */
.header_include .test__bar.is-none {
    display: none;
}

.header_include .test__bar {
    pointer-events: none;
    position: fixed;
    width: 100%;
    padding: 2px var(--header-left);
    top: var(--header-h);
    font-size: 12px;
    color: var(--color-aqua);

    z-index: 1000;

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

.header_include .test__bar .bar__icon {
    pointer-events: auto;
    cursor: pointer;
    position: relative;
    padding: 4px 5px;
    background-color: var(--color-purple-dark);
    border-radius: 3px;
    overflow: hidden;
}

.header_include .test__bar .bar__list {
    margin-left: 10px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.header_include .test__bar .bar__list > a {
    /* --color: rgba(0, 0, 0, 0.5);
    text-shadow:    -1px 0 var(--color), 0 1px var(--color),
                    1px 0 var(--color), 0 -1px var(--color); */
    /* text-shadow: 1px 1px rgba(83, 38, 128, 0.5); */
    position: relative;
    padding: 4px 5px;
    background-color: var(--color-purple-dark);
    border-radius: 3px;
    overflow: hidden;
}

.header_include .test__bar .bar__list > a:not(:first-child) {
    margin-left: 10px;
}

/*------------------------------------------------------*/
/*------------------------------------------------------*/
.nav-text-normal {
    /* --fsize-rate: calc(16 / 80); */
    /* --fsize: max(min(calc(var(--fsize-rate) * var(--header-h)), 20px), 16px); */
    /* 1024 - 1920 */
    --fsize: clamp(1rem, 0.714rem + 0.45vw, 1.25rem);
    color: #fff;
    font-size: var(--fsize);
    font-weight: 400;
    letter-spacing: 0.05em;
}
/*------------------------------------------------------*/
/*------------------------------------------------------*/
#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%;
    left: var(--header-left);
    width: 26px;

    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: 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: #fff;

    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 {
    position: relative;
    display: block;
    z-index: 10000;
}

.header_include .nav {
    --logo-rate: calc(180 / 20);
    --logo-size: calc(var(--logo-rate) * var(--fsize) * 0.8);
    --nav-space: calc(var(--fsize) * 1.5);

    --login-pic-rate: calc(50 / 20);
    --login-pic-size: calc(var(--fsize) * var(--login-pic-rate) * 0.85);
    /* --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: 1;
}

.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;
    width: var(--logo-size);
    top: 50%;
    left: 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__member, */
.header_include .nav .nav__inner {
    pointer-events: none;
    --inner-left-con-w: 75%;
    --inner-right-con-w: 75%;
    --inner-right-h: calc(100dvh - var(--header-h));
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
}

.header_include .nav .nav__inner .inner__inbg {
    pointer-events: none;
    position: absolute;
    width: var(--inner-left-con-w);
    height: 100dvh;
    background-image: linear-gradient(169deg, #17EAB7 4%, #33B2C1 35%, #664BD2 69%, #8C00DF 100%);

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

    -webkit-transition: all .15 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;

    box-shadow: 2px 0px 4px 1px rgba(0, 0, 0, 0);
}

.header_include .nav .nav__inner .inner__inbg::before {
    --top: max(65dvh, 400px);
    --size: min(100%, 300px);
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../images/common/header-bg-a.png) no-repeat;
    background-position: top var(--top) left -40px;
    background-size: calc(var(--size) * 0.7);
}

.header_include .nav .nav__inner .inner__con {
    position: relative;
    width: var(--inner-left-con-w);
    height: 100%;
    left: calc(var(--header-left) + var(--logo-size) + var(--nav-space) * 2);

    display: flex;
    flex-direction: column;
    
}


.header_include .nav .nav__inner .inner__con .con__list {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;

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

.header_include .nav .nav__inner .inner__con .con__list .list__item:not(:first-child) {
    position: relative;
    margin-left: var(--nav-space);
}

.header_include .nav .nav__inner .inner__con .con__list .list__item {
    position: relative;
    width: 100%;
    height: 100%;
    flex: 0 0 auto;
    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 .inner__con .con__list .list__item a.is-actived {
    color: var(--color-aqua);
}

/* .header_include .nav .nav__inner .inner__con .con__list .list__item::before {
    content: "";
    position: absolute;
    width: 52.5%;
    height: 5px;
    left: 0;
    bottom: 0;
    background: #17EAB7;

    transform-origin: left;
    transform: rotate(-15deg);
}

.header_include .nav .nav__inner .inner__con .con__list .list__item::after {
    content: "";
    position: absolute;
    width: 52.5%;
    height: 5px;
    right: 0;
    bottom: 0;
    background: #17EAB7;

    transform-origin: right;
    transform: rotate(15deg);
} */

.header_include .nav .nav__inner .inner__con .con__list .list__item.is-logout {
    display: none;
}

.header_include .nav.is-logined .nav__inner .inner__con .con__list .list__item.is-logout {
    display: flex;
}

.header_include .nav .nav__inner .inner__con .con__list .list__item .item__text {
    pointer-events: auto;
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header_include .nav .nav__inner .inner__con .con__list .list__item .item__text::after {
    position: absolute;
    display: block;
    content: "";
    width: 100%;
    height: 1px;
    top: calc(var(--fsize) * 1.2);
    left: 0;
    background-color: #fff;
    transition: transform 0.1s;
    transform: scaleX(0);
    transform-origin: right; 
}

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

.header_include .nav .nav__inner .inner__con .con__bottom {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100dvh;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    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;

    flex-direction: column;
    justify-content: flex-end;
}


.header_include .nav .nav__inner .inner__con .con__bottom .bottom__logout,
.header_include .nav .nav__inner .inner__con .con__bottom .bottom__link {
    pointer-events: all;
    position: relative;
    width: 75%;
    bottom: max(calc(5dvh), 30px);

    display: flex;
    justify-content: center;
    align-items: center;
    padding: calc(var(--fsize) * 0.8) 0;

    /* border: 1px solid #000;
    box-sizing: border-box; */
    border-radius: var(--border-radius-ll);
    overflow: hidden;

    background-color: var(--color-aqua);
}

.header_include .nav .nav__inner .inner__con .con__bottom .bottom__logout {
    margin-top: calc(var(--fsize));
    display: none;
}


.header_include .nav.is-logined .nav__inner .inner__con .con__bottom .bottom__logout {
    display: flex;
}

.header_include .nav .nav__func {
    position: absolute;
    height: 100%;
    right: var(--header-right);
    display: flex;
}

/* .header_include .nav .nav__func .func__con.is-test {
    position: absolute;
} */


.header_include .nav .nav__func .func__con {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    color: #fff;
} 

/* input[type='checkbox'], input[type='radio'] {
    display: block;
    position: absolute;
    z-index: 1000;
} */

.header_include .nav .nav__func .func__con .con__login {
    pointer-events: all;

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

.header_include .nav .nav__func .func__con .con__login::after {
    content: "登入";
    position: relative;
    display: flex;
}

.header_include .nav .nav__func .func__con .con__login .login__pic {
    position: relative;
    width: var(--login-pic-size);
    aspect-ratio: 1 / 1;
    border-radius: var(--border-radius-ss);
    overflow: hidden;

    display: none;
}

.header_include .nav.is-logined .nav__func .func__con .con__login .login__pic {
    display: flex;
}

.header_include .nav.is-logined .nav__func .func__con .con__login::after {
    display: none;
}

.header_include .nav .nav__func .func__con .con__login {
    outline: 1px solid #fff;
    border-radius: var( --border-radius-sl);
    padding: calc(var(--fsize) * 0.5) calc(var(--fsize) * 1.85);
}

.header_include .nav.is-logined .nav__func .func__con .con__login {
    outline: initial;
    padding: 0;
}

.header_include .nav.is-logined .nav__func .func__con .con__login > img {
    display: none;
}

.header_include .nav .nav__func .func__con .con__link > img,
.header_include .nav .nav__func .func__con .con__login > img {
    width: calc(var(--fsize) * 1.25);
    display: block;
}

.header_include .nav .nav__func .func__con .con__link {
    display: flex;
    flex-direction: row;
    align-items: center;

    outline: 1px solid #fff;
    border-radius: var( --border-radius-sl);
    padding: calc(var(--fsize) * 0.5) calc(var(--fsize) * 1.5);
    margin-left: calc(var(--fsize) * 0.75);
}

.header_include .nav .nav__func .func__con .con__link > img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(2%) hue-rotate(350deg) brightness(112%) contrast(101%);
}

.header_include .nav .nav__func .func__con .con__link > p {
    margin-left: calc(var(--fsize) * 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__bottom,
.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__inner .inner__con .con__bottom .bottom__link.is-notwork,
.header_include .nav .nav__inner .inner__con .con__bottom .bottom__logout.is-notwork,
.header_include .nav .nav__func .func__con .con__login.is-notwork,
.header_include .nav .nav__func .func__con .con__link.is-notwork,
.header_include .nav .nav__inner .inner__con .con__list .list__item .item__text.is-notwork {
    pointer-events: none;
    opacity: 0.3;
}

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


@media only screen and (min-width:320px) {
    .header_include .nav .nav__inner .inner__con .con__list .list__item a.is-actived {
        color: var(--color-purple);
    }
    .nav-text-normal {
        --fsize: 16px;
        color: #000;
    }

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

    .header_include .nav {
        /* 需要調整 */
        --logo-rate: calc(90 / 16);
        --logo-size: calc(var(--logo-rate) * var(--fsize) * 1.2);
        --login-pic-rate: calc(25 / 16);
        --login-pic-size: calc(var(--fsize) * var(--login-pic-rate) * 1.2);
    }
    
    .header_include .nav .nav__bg {
        z-index: 1;
    }

    .header_include .nav .nav__inner {
        --inner-left-con-w: 75%;
        z-index: 0;
    }

    .header_include .nav .nav__logo {
        z-index: 2;
    }

    .header_include .nav .nav__func {
        z-index: 3;
    }

    .header_include .nav .nav__logo {
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
    }


    /* .header_include .nav .nav__inner__member .inner__list {
        width: var(--inner-right-con-w);
        height: var(--inner-right-h);

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

    .header_include .nav .nav__inner .inner__inbg {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
    }

    .header_include .nav .nav__inner .inner__con {
        left: 0;
    }

    .header_include .nav .nav__inner .inner__con .con__list {
        height: fit-content;
        flex-direction: column;
        /* padding-top: calc(var(--header-h) + var(--nav-space) * 1.5); */
        padding-top: calc(var(--header-h));

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

    .header_include .nav .nav__inner .inner__con .con__bottom {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
    }

    .header_include .nav .nav__inner .inner__con .con__list .list__item {
        width: 100%;
        height: initial;
        background-color: rgba(251, 251, 251, 0.5);
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        box-sizing: border-box;
    }

    .header_include .nav.is-logined .nav__inner .inner__con .con__list .list__item.is-logout {
        display: none;
    }

    .header_include .nav .nav__inner .inner__con .con__list .list__item .item__text {
        position: relative;
        width: 100%;
        padding: max(min(calc(18dvh / 7), 24px), 16px) 0;
    }

    .header_include .nav .nav__inner .inner__con .con__list .list__item:not(:first-child) {
        margin-left: 0;

    }

    .header_include .nav .nav__inner .inner__con .con__bottom {
        display: flex;
    }

    .header_include .nav .nav__func .func__con .con__login {
        outline: initial;
        padding: 0;
    }

    .header_include .nav .nav__func .func__con .con__link {
        outline: initial;
        padding: 0 0;

        width: calc(var(--login-pic-size));
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        overflow: hidden;
        background: #fff;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    .header_include .nav .nav__func .func__con .con__link > img {
        filter: initial;
        width: calc(var(--fsize) * 1);
    }

    .header_include .nav .nav__func .func__con .con__link > p {
        display: none
    }
    
}
@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:768px) {}
@media screen and (min-width:1024px) {
    .header_include .nav .nav__inner .inner__con .con__list .list__item a.is-actived {
        color: var(--color-aqua);
    }

    .nav-text-normal {
        /* --fsize: clamp(1rem, 0.714rem + 0.45vw, 1.25rem); */
        /* 14 - 16  1024 - 1920 */
        /* --fsize: clamp(0.875rem, 0.732rem + 0.22vw, 1rem); */
        --fsize: 14px;
        color: #fff;
    }

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

    .header_include .nav {
        --logo-rate: calc(180 / 20);
        --logo-size: calc(var(--logo-rate) * var(--fsize) * 1.25);
        --login-pic-rate: calc(50 / 20);
        --login-pic-size: calc(var(--fsize) * var(--login-pic-rate) * 0.85);
    }

    .header_include .nav .nav__bg {
        z-index: 0;
    }

    .header_include .nav .nav__inner {
        --inner-left-con-w: 100%;
        z-index: 1;
    }

    .header_include .nav .nav__logo {
        z-index: 2;
    }

    .header_include .nav .nav__func {
        z-index: 3;
    }

    /* .header_include .nav .nav__inner__member {
        z-index: 4;
    } */

    .header_include .nav .nav__logo {
        left: 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%);
    }

    .header_include .nav .nav__inner__member .inner__list {
        width: min(20%, 250px);
        height: fit-content;

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

    .header_include .nav .nav__inner .inner__inbg {
        transform: translateX(-100%) !important;
        -webkit-transform: translateX(-100%) !important;
        -moz-transform: translateX(-100%) !important;
        -ms-transform: translateX(-100%) !important;
        -o-transform: translateX(-100%) !important;
    }

    .header_include .nav .nav__inner .inner__con {
        left: calc(var(--header-left) + var(--logo-size) + var(--nav-space) * 1.6);
    }

    .header_include .nav .nav__inner .inner__con .con__list {
        height: 100%;
        flex-direction: row;
        padding-top: 0;

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

    .header_include .nav .nav__inner .inner__con .con__bottom {
        transform: translateX(0%);
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
    }

    .header_include .nav .nav__inner .inner__con .con__list .list__item {
        width: initial;
        height: 100%;
        background-color: initial;
        border-bottom: 0px solid rgba(255, 255, 255, 0.5);
    }

    .header_include .nav.is-logined .nav__inner .inner__con .con__list .list__item.is-logout {
        display: flex;
    }

    .header_include .nav .nav__inner .inner__con .con__list .list__item .item__text {
        padding: 0 0;
    }


    .header_include .nav .nav__inner .inner__con .con__list .list__item:not(:first-child) {
        margin-left: var(--nav-space);
    }

    .header_include .nav .nav__inner .inner__con .con__bottom {
        display: none;
    }

}

@media screen and (min-width:1280px) {
    .nav-text-normal {
        --fsize: 16px;
    }

    .header_include .nav .nav__func .func__con .con__login {
        outline: 1px solid #fff;
        padding: calc(var(--fsize) * 0.5) calc(var(--fsize) * 1.85);
    }

    .header_include .nav .nav__func .func__con .con__link {
        width: initial;
        aspect-ratio: initial;
        background-color: initial;
        outline: 1px solid #fff;
        border-radius: var( --border-radius-sl);
        padding: calc(var(--fsize) * 0.5) calc(var(--fsize) * 1.5);
        margin-left: calc(var(--fsize) * 0.75);
    }

    .header_include .nav .nav__func .func__con .con__link > img {
        width: calc(var(--fsize) * 1.25);
        filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(2%) hue-rotate(350deg) brightness(112%) contrast(101%);
    }

    .header_include .nav .nav__func .func__con .con__link > p {
        display: block;
    }
}
@media screen and (min-width: 1440px) {}
@media 
screen and (min-width:1024px) and (max-height: 650px), 
screen and (min-width: 1280px) and (max-height: 650px), 
screen and (min-width: 1366px) and (max-height: 650px), 
screen and (min-width: 1440px) and (max-height: 650px) {}
@media screen and (min-width: 1680px) {}
@media screen and (min-width: 1920px) {}