[mn="footer"] {
    margin-top: auto;
    background-color: #000;
    color: #fff;

    .row {
        gap: 15px 0;
    }

    .main {
        position: relative;
    }

    .main>*~* {
        margin-top: 21px;
    }

    .ttl {
        line-height: 1;
        margin: -15px 0 15px -3px;
    }

    .sitemap p {
        margin: 6px 0 0 !important;
        padding: 0 !important;
    }

    .sitemap ul {
        margin: 6px 0 15px !important;
        padding: 0 !important;
        list-style-type: none;
        display: flex;
        flex-wrap: wrap;
    }

    .sitemap ul>li {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .desc img {
        vertical-align: inherit;
    }

    .footer-logo {
        max-height: 30px;
        margin: 0 0 15px;
    }

    .wrap-bottom {
        padding: 30px 0;
    }

    a {
        color: inherit
    }

    a.active {
        color: var(--clr03)
    }

    a:not(.btn-gen-line2):hover {
        text-decoration: underline;
    }

    .title {
        font-family: var(--ft-t1);
        margin: 0 0 15px;
        font-size: 130%;
        line-height: 1.2;
    }

    .med .scon {
        border: 2px solid var(--clr01);
        margin: 3px;
        border-radius: 6px;
        background-color: var(--clr01);
    }

    .med .scon a {
        display: block;
        width: 100%;
    }

    .med .scon:hover {
        background-color: var(--clr02);
        border: 2px solid var(--clr02);

    }

    .med .bimg {
        background-color: var(--clr01x, #fff);
    }

    .med .scon:hover .bimg {
        background-color: #fff;
    }

    .med .bimg-w {
        padding: 6px;
    }

    .med .itm {
        padding: 0 3px;
    }

    .signup {
        margin: 0 0 15px
    }

    .signup .btn-gen {
        padding: 0;
        position: absolute;
        right: 3px;
        top: 50%;
        border-radius: 50%;
        height: 40px;
        width: 40px;
        transform: translate(0, -50%);
    }

    .signup input {
        margin: 0;
        padding: 12px;
        border-radius: 50px
    }

    .signup input {
        margin: 0;
        padding: 12px;
        border-radius: 50px
    }

    .copyright {
        margin: 60px 0 0;
    }

    @media only screen and (max-width: 991px) {
        .main>* {
            align-items: flex-start;
        }

    }

    @media only screen and (max-width: 767px) {
        .sitemap ul>li {
            flex: 0 0 50%;
            max-width: 50%;
        }
    }
}
[mn="newsletter"]{
    padding: 30px 0;
    background-color: #fbf6f1;

    .divbx{
        --div: 45%;

        @media(width<=767px){
            .div-r,
            .div-l{
                flex: 0 0 100%;
                max-width: 100%;
            }
        }

        .title{
            font-size: 200%;
        }

        input{
            border: 0;
            border-bottom: 1px solid #000;
            background-color: transparent;
            padding-right: 90px;
        }

        button{
            position: absolute;
            top: 15px;
            right: 15px;
            border: 0;
            background-color: transparent;
            z-index: 12;
            cursor: pointer;
        }
    }
}
/* ================================ */
/* ================================ */
[mn] {
    background-repeat: no-repeat;
    background-size: cover;
}

.float.btnbx {
    position: absolute;
    top: 90px;
    right: 15px;
    z-index: 30;
    width: 120px;
    line-height: 0;

    @media(width<575px) {
        /* top: auto;
        right: auto;
        left: 15px;
        bottom: 60px;
        position: fixed; */
        width: 80px;
    }

    img {
        max-height: 60px;
    }
}

body {

    .langs-w {
        position: fixed;
        right: 18px;
        top: 245px;
        z-index: 50;
        width: auto;
        transform-origin: right top;
        rotate: 90deg;
        pointer-events: none;

        a {
            text-decoration: none;
        }

        .langs {
            translate: 100% 0;
            pointer-events: all;
        }

        .bimg {
            rotate: -90deg;
            max-height: 15px;
        }

        .lang-w {
            padding: 5px 12px 5px 6px;
            background-color: rgba(255 255 255 / 50);
            color: inherit;
            cursor: pointer;
            /* writing-mode: vertical-rl; */
            margin: 0 2px;
            transition: .4s all ease;
            line-height: 1.2;
            border: 1px solid var(--clr02);
            border-radius: 50px;
            text-transform: uppercase;
        }

        .lang-w:hover {
            background-color: var(--clr02);
            color: #fff
        }

        @media only screen and (max-width: 992px) {
            top: auto;
            bottom: 110px;

            .langs {
                translate: 0% 0;
            }
        }

        .lang-w .bimg-w {
            width: 18px;
            margin: 0 6px 0 0;
        }
    }

    /* ======================= */

    nav {
        line-height: 1;
    }

    nav :is(ul, li) {
        list-style: none;
        list-style-type: none;
        margin: 0;
        padding: 0;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }

    nav a {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        font-family: var(--ft-t1);
        text-transform: uppercase;
        text-decoration: none;
        color: inherit;
        cursor: pointer;
    }

    nav a:hover {
        background-color: var(--clr02);
    }

    nav a.active {
        /* color: var(--clr01) */
    }

    nav>ul>li {
        margin: 0 0 0 0;
        padding: 0 0 0 0;
        position: relative
    }

    @media (max-width: 767px) {
        nav>ul>li>ul {
            padding: 0 0 0 12px
        }

        nav>ul>li>ul li {
            width: 100%;
            font-size: 70%;
        }

        nav>ul>li>ul li~li {
            border-top: 1px solid #eee
        }

        nav>ul>li>ul a {
            text-transform: initial;
            width: 100%;
            justify-content: flex-start;
        }
    }

    @media (min-width: 767px) {
        nav>ul>li>ul {
            position: absolute;
            bottom: -15px;
            right: 50%;
            translate: 50% 100%;
            scale: 1 0;
            /* display: none; */
            min-width: 200px;
            background-color: #fff;
            border: 1px solid #eee;
            padding: 9px;
            transition: .6s all .3s ease;
            display: block;
            transform-origin: top;
        }

        nav>ul>li:hover>ul {
            transition: .6s all ease;
            scale: 1 1;
        }

        nav>ul>li>ul a {
            text-transform: initial;
            width: 100%;
            justify-content: flex-start;
        }

        nav>ul>li>ul li {
            width: 100%;
            justify-content: flex-start;
        }

        nav>ul>li>ul li~li {
            margin-top: 9px;
        }
    }

    @media (min-width: 767px) {
        /* nav > ul > li::after {
            content: '';
            display: block;
            right: 0;
            top: 50%;
            translate: 0 -50%;
            height: 12px;
            width: 2px;
            background-color: #999;
            position: absolute;
        }
        nav > ul > li:last-child::after {
            display: none;
        } */
    }

    .mobilenav .mediabx {
        --mediaborderradius: 50%;

        a {
            --bgclr: #fff;
            --iconclr: var(--clr01);
            --iconhovclr: #fff;
            --mediaborder: 2px solid #fff;
            --mediahovborder: 2px solid #fff;
        }
    }

    .mobilenav {
        position: fixed;
        height: 100vh;
        background-color: rgba(0 0 0 / 50%);
        z-index: 50;
        padding: 0 0 0 0;
        width: 100% !important;
        display: block;
        translate: -101% 0;
        opacity: 0;
        transition: .6s all .3s ease;
        color: #fff;
        top: 0;
        left: 0;

        .copyright {
            font-size: 80%;
            /* font-family: var(--ft-t1); */
        }

        .mediabx {
            margin: 30px 0 0;
            padding: 30px 0;
            border-bottom: 1px solid #fff;
            border-top: 1px solid #fff;
        }
    }

    .mobilestickbx {
        position: fixed;
        top: 0;
        left: 0;
        padding: 8px 15px;
        width: 100% !important;
        background-color: var(--clr01x, #fff);
        z-index: 50;
        border-top: 6px solid var(--clr01);
    }

    .mobilestickbx .logo {
        line-height: 1;
    }

    .mobilestickbx img {
        max-height: 45px
    }

    .mobilenav nav a {
        flex: 0 0 100%;
        width: 100%;
        justify-content: flex-start;
        color: inherit;
        text-decoration: none;
        padding: 15px 0;
        font-size: 150%;
        display: block;
    }

    .mobilenav.active {
        translate: 0 0;
        opacity: 1;
        transition: .3s all ease;
    }

    .mobilenavw {
        transition: .3s all cubic-bezier(0.075, 0.82, 0.165, 1);
        height: 100vh;
        background-color: var(--clr01);

        width: calc(100% - 0px) !important;
        display: block;
        overflow: hidden;
        overflow-y: auto;
        translate: 0 0;
        opacity: 0;
        margin-left: auto;
        transition: .9s all .3s cubic-bezier(0.075, 0.82, 0.165, 1);
    }

    .mobilenav:not(.active) {
        pointer-events: none;
    }

    .mobilenav.active .mobilenavw {

        translate: 0 0;
        opacity: 1;
    }

    .mobilenav .mobilenavwi {
        text-align: center;
        max-width: 500px;
        width: 100%;
        margin: 0 auto;
        text-align: center;
        padding: 120px 15px 21px;
    }

    .mobilenav nav {
        padding: 15px 0 0;
    }

    .mobilenav .infobx {
        padding: 0 24px 60px;
    }

    .mobilenav .infow {
        border-top: 1px solid #ccc;
        padding: 15px 0;
    }

    .mobilenav nav :is(ul, li) {
        margin: 0;
        text-align: center;
    }

    .mobilenav nav>ul>li {
        flex: 0 0 100%;
    }

    .mobilenav nav>ul>li~li {
        border-top: 0;
    }

    .mobilenav nav a {
        flex: 0 0 100%;
        width: 100%;
        justify-content: flex-start;
        color: #fff;
        text-decoration: none;
    }

    .mobilenav .mediabx .unit {
        margin: 3px 3px 3px 0
    }


    body:has(.menuburger.open) {
        .menusuchbx {
            color: #fff;
        }
    }

    .menusuchbx {
        position: fixed;
        right: 9px;
        top: 15px;
        aspect-ratio: 1;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        z-index: 55;
        cursor: pointer;
        color: #000;
        transition: .6s all ease;
        gap: 6px;
        pointer-events: none;

        @media(width<=767px){
        writing-mode: tb;
        }
        .btn {
            pointer-events: all;
            min-width: auto;
            border-radius: 6px;

            @media(width<=767px){
                padding: 9px;
                .text{
                    display: none;
                }
            }
        }

        
    }

    /* ===================== */
    .menuburger {
        --square: 60px;
        --height: 3px;
        --top: 9px;
        --vpadding: 1px;
        --bgclr: #000;
        --radius: 5px;
        --icon-width: 30px;
        position: fixed;
        width: var(--square) !important;
        height: var(--square);
        top: 6px;
        left: calc(var(--vpadding) + 9px);
        transition-duration: 0.5s;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 55;
        scale: 0.7;
        cursor: pointer;
        padding: 15px;
        background-color: transparent;
    }

    .menuburger.open {
        --top: 6px;
        --bgclr: var(--clr01x, #fff);
        background-color: transparent;
    }

    .menuburger .icon {
        transition-duration: 0.5s;
        position: relative;
        height: var(--height);
        width: var(--icon-width);
        top: 0;
        background-color: var(--bgclr);
        border-radius: var(--radius)
    }

    .menuburger .icon:before {
        transition-duration: 0.5s;
        position: absolute;
        width: var(--icon-width);
        height: var(--height);
        background-color: var(--bgclr);
        content: "";
        top: calc(-1 * var(--top));
        border-radius: var(--radius)
    }

    .menuburger .icon:after {
        transition-duration: 0.5s;
        position: absolute;
        width: var(--icon-width);
        height: var(--height);
        background-color: var(--bgclr);
        content: "";
        top: var(--top);
        border-radius: var(--radius)
    }

    .menuburger.open .icon {
        transition-duration: 0.5s;
        transform: rotateZ(180deg);
    }

    .menuburger.open .icon:before {
        transform: rotateZ(45deg) scaleX(0.75) translate(var(--top), -6px);
    }

    .menuburger.open .icon:after {
        width: var(--icon-width);
        transform: rotateZ(-45deg) scaleX(0.75) translate(var(--top), 6px);
    }

    .mobilestickbxp,
    .dekstickbx {
        width: 100% !important;
    }

    .dekstickbx {
        padding: 9px 0;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 10;
        background-color: #fff;
        border-bottom: 1px solid #eee;
        transition: 2s all cubic-bezier(0.075, 0.82, 0.165, 1);
        translate: 0 -101%;
    }

    body.scrolled .dekstickbx {
        translate: 0 0;
    }

    .dekstickbx .logo img {
        max-height: 45px;
    }


    /* @media (min-width: 767px) {  
        .menuburger,
        .mobilestickbxp,
        .mobilestickbx,
        .mobilenav {
            display: none !important;
        }
    } */


    .mobilenav .langbx {
        margin: 6px 0 0 0;
    }

    .mobilenav .langbx a {
        padding: 6px;
        display: block;
        color: #fff;
        background-color: #000;
    }


    @media (width >=575px) {
        /* .home .mobilestickbx {
            background-color: transparent;
            border-bottom: 0;
        }
        .home.scrolled .mobilestickbx {
            background-color: #fff;
        } */
    }

}

/* =========================================== */
/* =========================================== */

@-webkit-keyframes roundtxt_rotation

/* Safari and Chrome */
    {
    from {
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes roundtxt_rotation {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.roundtxt_rotation {
    --rotate: roundtxt_rotation 15s linear infinite;
    -webkit-animation: var(--rotate);
    -moz-animation: var(--rotate);
    -ms-animation: var(--rotate);
    -o-animation: var(--rotate);
    animation: var(--rotate);
}

.roundbx {
    position: absolute;
    left: 50%;
    bottom: 0;
    translate: -50% 50%;
    z-index: 100;
    pointer-events: none;

    .roundw {
        aspect-ratio: 1;
        width: 150px;
    }

    .round-w {
        position: absolute;
        height: 100%;
        width: 100%;

        &:has(.round-w) {
            clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
        }

        &:has(.round-b) {
            clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
        }
    }

    .round- {
        aspect-ratio: 1;
        width: 100%;

        &.round-w {
            background-image: url(../img/round-text-w.png);

        }

        &.round-b {
            background-image: url(../img/round-text-b.png);

        }
    }
}

/* =========================================== */
/* =========================================== */
/* =========================================== */

[mn="201"] {
    .formular {
        padding: 35px;
        border: 1px solid #ccc;
        border-radius: 30px;

        .imgbx {
            line-height: 0;
            margin: -90px 0 0;
        }
    }

    .form_text_decor {
        position: absolute;
        right: 15px;
        top: 50%;
        translate: 0 -50%;
        writing-mode: sideways-rl;
        font-size: 150%;
        font-family: var(--ft-t1);
        letter-spacing: 4px;
    }
}

[mn="202"] {
    .categorylistbx {
        --listset-count: 3;

        @media(width<=767px) {
            --listset-count: 1;
        }

        .categorylistw {}

        .categorybx {
            border-radius: 30px;
            padding: 35px;
            text-align: center;
            border: 1px solid #ccc;
        }

        .title {
            font-size: 200%;
        }

        .icon {
            img {
                max-height: 35px;
            }
        }

        .info {
            font-family: var(--ft-t1);
        }
    }
}

[mn="203"] {
    padding: calc(12% + 30px) 0;
    text-align: center;
    color: #fff;
    z-index: 3;

    h4 {
        color: inherit;
    }
}

[mn="300"] {


    .categorylistbx.itembx {
        --listset-gap: 45px;
        --listset-count: 3;
        text-align: center;

        @media(width<=991px) {
            --listset-count: 3;
        }

        @media(width<=767px) {
            --listset-count: 2;
        }

        @media(width<=575px) {
            --listset-gap: 6px;
        }

        .categorybx {
            cursor: pointer;

            .bimgw {
                border-radius: 21px;
            }
        }

        .title {
            margin: 0;

            &~& {
                margin: 6px 0 0;
            }

            &.title2 {
                font-size: 80%;
            }
        }

        .bimgbx {
            line-height: 0;
        }

        .categorybx .bimg {
            transition: all ease-in-out .4s;
        }

        .categorybx .bimg::after {
            content: '';
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            background-color: var(--clr01);
            mix-blend-mode: multiply;
            transition: all ease-in-out .4s;
            opacity: 0;
        }

        img.add {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            max-width: 25%;
            opacity: 0;
            transition: all ease-in-out .4s;
        }

        .categorybx:hover img.add {
            opacity: 1;
        }

        .categorybx:hover .bimg {
            scale: 1.15
        }

        .categorybx:hover .bimg::after {
            opacity: 1;
        }

        .topbx {
            padding: 15px;
            bottom: 0;
            left: 0;
            width: 100%;
            position: absolute;
            color: #fff;

            .btnbx {
                padding: 30px 0 0;

                @media(width<767px) {
                    padding: 9px 0 0;
                }

                .btn {
                    padding: 9px;
                    border-radius: 50px;
                    min-width: auto;
                }
            }
        }
    }
}

.lichtGallery {

    .h5 {
        margin: 0 0 30px;
    }

    .categorylistbx {
        --listset-count: 3;
    }
}

[mn="401"] {
    .categorylistbx {
        --listset-count: 3;
        --listset-gap: 45px;
        text-align: center;

        @media(width<=991px) {
            --listset-count: 3;
        }

        @media(width<=767px) {
            --listset-count: 2;
        }

        @media(width<=575px) {
            --listset-gap: 6px;
        }

        .categorylistw {}

        .categorybx {
            background-color: #faf5f0;
            border-radius: 21px;
        }

        .icon-magnify {
            position: absolute;
            right: 15px;
            top: 15px;
            z-index: 100;
            aspect-ratio: 1;
            width: 30px;
            background-image: url(../img/icon_magnifying.png);
            border: 0;
            background-color: 0;
            cursor: pointer;
        }

        a {
            padding: 21px;
        }

        .btnbx {
            .btn {
                min-width: auto;
                border-radius: 50px;
            }

            .ifont {
                --i-image: url(../img/icon_redeem.png);
                -webkit-mask-image: var(--i-image);
                mask-image: var(--i-image);
                width: 16px;
            }
        }
    }
}

[mn="500"] {
    padding-top: 90px;
}

[mn="501"] {
    .contentbx {
        width: 400px;
        margin: 0 auto;
        max-width: 100%;
    }

    .imgbx {
        img {
            margin: -230px 0 0;
        }
    }
}

[mn="502"] {
    .contentbx {
        width: 400px;
        margin: 0 auto;
        max-width: 100%;

        &::after {
            content: '';
            display: block;
            position: absolute;
            width: 50%;
            height: 130%;
            top: 50%;
            right: 0;
            translate: 0 -50%;
            background-color: #fbf6f1;
            z-index: -1;
        }

        &::before {
            content: '';
            display: block;
            position: absolute;
            width: 100svw;
            height: 130%;
            top: 50%;
            right: 0;
            translate: calc(100% - 3px) -50%;
            background-color: #fbf6f1;
            z-index: -1;
        }
    }
}

[mn="503"] {
    .contentbx {
        width: 400px;
        margin: 0 auto;
        max-width: 100%;

        &::after {
            content: '';
            display: block;
            position: absolute;
            width: 50%;
            height: 130%;
            top: 50%;
            left: 0;
            translate: 0 -50%;
            background-color: #fbf6f1;
            z-index: -1;
        }

        &::before {
            content: '';
            display: block;
            position: absolute;
            width: 100svw;
            height: 130%;
            top: 50%;
            left: 0;
            translate: calc(-100% + 3px) -50%;
            background-color: #fbf6f1;
            z-index: -1;
        }
    }
}

[mn="604"] {
    img {
        width: 100%;
    }
}

[mn="605"] {
    .bimgbx {
        img {
            margin: -45% 0 0;

            @media(width<=767px) {
                margin: 0;
            }
        }
    }
}

[mn="700"] {

    --div-l: 50%;
    --div-r: calc(100% - var(--div-l));
    background-color: #fff;


    @media (width <=767px) {
        --div-l: 100%;
        --div-r: 100%;
    }

    &:has(.notifybx.active) {
        z-index: 1000;
    }

    a {
        text-decoration: none;
    }

    .lrbx {
        gap: 21px 0;

        .lr-l {
            flex: 0 0 var(--div-l);
            max-width: var(--div-l);
        }

        .lr-r {
            flex: 0 0 var(--div-r);
            max-width: var(--div-r);

            @media(width>767px) {
                padding-left: 21px;
            }
        }
    }

    .btn_enlarge {
        position: absolute;
        top: 15px;
        right: 15px;
        aspect-ratio: 1;
        width: 45px;
        border: 0;
        background-color: #eee;
        border-radius: 3px;
        padding: 0;
        font-size: 120%;

        &:hover {
            background-color: #24af0d;
            color: #fff;
        }
    }

    .btnbx {
        input {
            margin: 0;
            width: 100px;
            text-align: center;
            background-color: transparent;
            border: 0;
            border-bottom: 1px solid #000;
        }

        .btn {
            border-radius: 50px;
        }

        .ifont {
            --i-image: url(../img/icon_bag.png);
            -webkit-mask-image: var(--i-image);
            mask-image: var(--i-image);
            width: 18px;
        }
    }

    .infobx {
        gap: 21px 0;
        padding: 45px;
        border-radius: 21px;
        background-color: #faf5f0;

        .infow {
            &>*~* {
                margin-top: 6px;
            }
        }

        .name {
            font-family: var(--ft-t1);
            font-size: 150%;
        }

        .primaryinfo {
            font-size: 140%;

            .volume {
                color: #999;
            }

            .price {
                color: var(--clr01);
                font-family: var(--ft-t2);
            }
        }

        .sharerbx {
            margin: 120px 0 0;
        }
    }

    .object_image {
        .bimg {
            padding-top: 70%;
        }
    }

    .accordionbx {
        margin: 60px auto 0;
        max-width: 100%;
        width: 900px;
        margin: 30px auto 0;

        &>h4 {
            margin: 0 0 30px !important;
        }

        .accordiontab {
            margin: 0 0 0;
            gap: 0;
            position: relative;
            z-index: 1;

            &::after {
                /* content: ''; */
                display: block;
                position: absolute;
                width: 100%;
                height: 1px;
                background-color: #ccc;
                z-index: -1;
                left: 0;
                bottom: 0;
            }
        }

        .accordiontxtbx {
            /* padding: 21px; */
            /* background-color: #efefef; */
            /* border: 1px solid #ccc; */
            min-height: 150px;
            padding: 35px;
            background-color: #faf5f0;
            border-radius: 25px;

            [tabcontent]:not(.active) {
                display: none;
            }
        }

        & [tablist] {
            display: inline-flex;
            padding: 12px 15px;
            /* background-color: #999; */
            border-bottom: 3px solid transparent;
            font-family: var(--ft-t2);
            cursor: pointer;
            line-height: 1;
            font-size: 120%;
            z-index: 1;

            &.active {
                color: #fff;
                border-bottom: 3px solid var(--clr01);
                background-color: var(--clr01);
                border-radius: 15px 15px 0 0;
            }

            &:not(.active):hover {
                color: var(--clr02);
                border-bottom: 3px solid var(--clr02);

            }

        }

        & table {
            width: 100% !important;
            background-color: #fff;
            line-height: 1.4;

            & tbody>tr:first-child {
                background-color: var(--clr01);
                font-family: var(--ft-t1);
                color: #fff;

                &>* {
                    background-color: transparent;
                }
            }
        }

    }

    .notifybx {
        position: fixed;
        z-index: 100;
        left: 50%;
        top: 50%;
        translate: -50% -50%;
        background-color: #fff;
        border: 2px solid #ccc;
        border-radius: 15px;
        width: 500px;
        max-width: calc(100% - 30px);

        &:not(.active) {
            display: none;
        }

        input,
        textarea {
            margin: 0;
        }

        .btn_close_notibx {
            position: absolute;
            top: 15px;
            right: 15px;
            aspect-ratio: 1;
            width: 30px;
            border: 0;
            background-color: rgb(164, 0, 0);
            color: #fff;
            border-radius: 3px;
            padding: 0;
            font-size: 120%;

            &:hover {
                background-color: red;
                color: #fff;
            }
        }

        .notifyw- {
            overflow: clip;
            overflow-y: auto;
            max-height: calc(100svh - 60px);

            .notifyw {
                padding: 45px;

                &>*~* {
                    margin-top: 21px;
                }

                &>*>*~* {
                    margin-top: 12px;
                }
            }
        }

        .primaryinfo {
            font-size: 140%;

            .name {
                font-size: 120%;
            }

            .volume {
                color: #999;
            }

            .price {
                font-size: 140%
            }
        }
    }



    .viewbx {
        text-align: left;
        color: #999;
        font-size: 80%;
    }

    .notice {
        font-size: 90%;
    }

    .btn_available {
        --btnbgclrhov: transparent;
        --btnclrhov: var(--btnclr);
        --btnborderclrhov: var(--btnclr);
        cursor: auto;
    }

    .tabbx {
        margin-top: 60px;

        .ttl {
            font-size: 130%;
        }

        .tab {
            font-weight: bold;
            padding: 15px;
            cursor: pointer;
            line-height: 1.2;
            position: relative;
        }

        .tab:after {
            content: '';
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translate(0, -50%) rotate(0);
            transform-origin: center center;
            height: 15px;
            width: 15px;
            -webkit-mask-image: url(src/arrow.svg);
            mask-image: url(src/arrow.svg);
            background-position: center center;
            background-size: contain;
            background-repeat: no-repeat;
            -webkit-transition: .4s all ease;
            transition: .4s all ease;
            background-color: #000;
            mask-size: contain;
            -webkit-mask-size: contain;
            mask-repeat: no-repeat;
            -webkit-mask-repeat: no-repeat;
        }

        .tab:hover:after {
            background-color: #000;
        }

        .tab.active:after {
            transform: translate(0, -50%) rotate(180deg);
            background-color: #000;
        }

        .liss {
            display: none;
            padding: 15px;
        }

        .tabbx {
            margin: 30px 0 15px
        }

        .tab {
            padding-right: 45px;
            padding-left: 0;
            font-weight: initial;
            transition: all ease .4s;
            font-family: var(--font-t1);
        }

        .tab+* .lis {
            /* background-color: #fff; */
            padding: 0 0 15px;
            transition: all ease .4s
        }

        .tab.active,
        .tab.active+* .lis {
            /* background-color: #fff; */
        }

        .ele {
            border-top: 1px solid #ccc;
        }

        .ele:last-child {
            border-bottom: 1px solid #ccc;
        }

        .liss {
            padding: 0 0 15px;
        }
    }

    .galbx.categorylistbx {
        --listset-count: 5;
        margin: 15px 0 0;

        @media(width<575px) {
            --listset-count: 3;
        }

        .categorybx {
            border: 1px solid #ccc;
            border-radius: 3px;
            padding: 9px;
            cursor: pointer;
        }
    }
}

.enlargebx {
    position: fixed;
    height: 100svh !important;
    width: 100% !important;
    background-color: #fff;
    padding: 15px;
    z-index: 100;
    top: 0;
    left: 0;

    img {
        object-fit: contain;
        object-position: center;
        width: 100%;
        height: 100% !important;
    }

    .btn_minimize {
        position: absolute;
        top: 15px;
        right: 15px;
        aspect-ratio: 1;
        width: 45px;
        border: 0;
        background-color: rgb(164, 0, 0);
        color: #fff;
        border-radius: 3px;
        padding: 0;
        font-size: 120%;

        &:hover {
            background-color: red;
            color: #fff;
        }
    }

    .btn-nav {
        min-width: initial;
        position: absolute;
        top: 50%;
        padding: 9px;

        &.btn-prev {
            left: 15px;
            translate: 0 -100%;
        }

        &.btn-next {
            right: 15px;
            translate: 0 -100%;
        }
    }
}

.enlargebx {
    .slidebx {
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 15px 0;
    }

    .swiper-slide {
        display: flex;
        flex-wrap: wrap;

        .bimgbx {
            border: 1px solid #ddd;
            border-radius: 3px;
            padding: 6px;
        }
    }

    .swiper-slide>* {
        cursor: pointer;
        width: 100%;
    }

    .swiper-pagination {
        position: relative;
        margin: 15px 0 0;
    }

    .mySwiper {
        width: 100%;
    }

    .swiper-scrollbar {
        opacity: 1 !important;
    }

    .swiper-button-next,
    .swiper-button-prev {
        aspect-ratio: 1 / 1 !important;
        background-color: var(--clr01);
        width: 21px;
        height: auto;
        border-radius: 3px;
    }

    .swiper-button-next:after,
    .swiper-button-prev:after {
        color: #fff;
        font-size: 9px;
    }

    .swiper-pagination-bullet-active {
        background-color: var(--clr01);
    }
}


[mn="100"] {
    --secpt: 0px;
    --secpb: 0px;
    text-align: center;
    z-index: 3;
    color: #fff;
    font-size: 120%;

    @media(width<=575px) {
        font-size: 100%;

        & h4 {
            font-size: 120%;
        }

        .textbx {
            font-size: 80%;
        }
    }

    & ol {
        list-style-type: none;
        padding: 0;
        display: flex;
        flex-wrap: wrap;

        & li {
            z-index: 1;
            position: relative;
            padding: 0 0 0 21px;
            flex: 0 0 50%;
            max-width: 50%;

            @media(width<767px) {
                flex: 0 0 100%;
                max-width: 100%;
            }
        }

        & li::after {
            content: '';
            background-image: url(_src/list_icon.png);
            aspect-ratio: 1;
            width: 19px;
            position: absolute;
            left: 0;
            top: 0;
            translate: -12% 4px;
            background-size: contain;
        }
    }

    .bglyr {
        width: 50%;

        &::after {
            content: '';
            left: auto;
            right: 0;
            bottom: 0;
            position: absolute;
            display: block;
            height: 100%;
            width: 150px;
            background: linear-gradient(90deg, #eee0 0%, #eee 100%);
        }

        @media(width<767px) {
            width: 100%;
            opacity: .15;

            &::after {
                display: none !important;
            }
        }
    }

    .contentbx {

        /* &::after{
        content: '';
        position: absolute;
        display: block;
        right: 0;
        top: 0;
        content: '';
        width: 100vw;
        height: 100%;
        background-color: var(--clr01, #999);
        margin: 15px 0 0 !important; 
        z-index: -1;
        opacity: .8;
        transform: skew(-15deg, 0); 
        } */
        @media(width < 575px) {
            padding: 0;

            &::after {
                margin: 0 !important;
                right: -15px;
            }

        }
    }

    & h4 {
        color: inherit;
    }

    .h_decor {
        --icon_div: 45px;
        position: relative;
        margin: 0 0 15px;
        padding: 0 0 15px;
        border-bottom: 3px solid #ccc;

        ._ittl {
            margin: 0;
            flex: 0 0 calc(100% - var(--icon_div));
            max-width: calc(100% - var(--icon_div));
        }

        .ttldecor- {
            display: none;
        }

        .h4 {
            line-height: 1;
            padding: 0 !important;
            margin: 0 !important;
            font-size: 150%;
            color: #000;

        }

        .h_icon {
            flex: 0 0 var(--icon_div);
            max-width: var(--icon_div);
        }

        /* &::before, */
        &::after {
            content: '';
            position: absolute;
            display: block;
            height: 9px;
            width: 45px;
            background-color: var(--clr01);
            min-width: 30px;
            left: 0;
            bottom: 0;
            translate: 0 calc(50% + 2px);
        }
    }


    ._video {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        z-index: -1;

        & video {
            width: 100%;
            height: 100%;
            border-radius: 0;
            object-fit: cover;
            object-position: center bottom;
        }
    }

    .decor_bar {
        width: 60px;
        aspect-ratio: 60 / 302;
        display: block;
        position: absolute;
        left: 60px;
        bottom: -60px;
        z-index: 10;
        pointer-events: none;

        @media(width<575px) {
            display: none;
        }
    }
}

[mn="100"] ._imgsec {
    margin: 0 0 15px;
}

[mn="100"] ._subttl {
    font-size: 150%;
}

[mn="100"] .swiper {
    display: flex;

    @media(width<1200px) {
        aspect-ratio: 16 / 9;
    }

    /* min-height: 100vh; */
    /* clip-path: ellipse(90% 100% at 50% 0%); */

    @media(width<575px) {
        .swiper-pagination {
            bottom: 0;
            display: none;
        }
    }
}

[mn="100"] .swiper-wrapper {
    display: flex;
    height: auto;
}

[mn="100"] .swiper-slide {
    padding: 30px;
    overflow: clip;
    background-color: #eee;


    &>* {
        filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, .85));
        /* text-shadow: 0px 2px 9px rgba(0,0,0,.85); */
    }

    &[video] {
        cursor: pointer;
    }

    .textbx {
        width: 800px;
        max-width: 100%;
        margin: 0 auto;

        & p {
            @media(width<575px) {
                display: none;
            }
        }
    }

    .taste {
        margin: 9px 0 0;
    }
}

[mn="100"] .swiper-button-next,
[mn="100"] .swiper-button-prev {
    --square: 35px;
    aspect-ratio: 1 / 1 !important;
    background-color: var(--clr01x, rgba(255 255 255 / 50%));
    width: var(--square);
    height: var(--square);
    height: auto;
    border-radius: 50%;
}

[mn="100"] .swiper-button-next:after,
[mn="100"] .swiper-button-prev:after {
    color: #fff;
    font-size: 12px;
    font-weight: bold;
}

[mn="100"] .swiper-pagination {
    gap: 30px;
    bottom: 45px;
}

[mn="100"] .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    padding: 0;
    margin: 0 !important;
    background-color: #fff;
    color: #fff;
    font-family: var(--ft-t1);
    border-radius: 0;
    opacity: 1;
    line-height: 1;
    text-align: center;
    font-weight: bold;
    border-radius: 50%;
    position: relative;

    &::after {
        --square: 30px;
        content: '';
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        height: var(--square);
        width: var(--square);
        background-color: rgba(255, 255, 255, .5);
        z-index: 1;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        cursor: pointer;
        transition: .3s all ease;
        opacity: 0;
    }
}

[mn="100"] .swiper-pagination-bullet-active {
    &::after {
        opacity: 1;
    }
}

@media only screen and (max-width: 767px) {
    [mn="100"] .swiper-slide {
        font-size: 110%;
        font-weight: bold;
    }

    [mn="100"] .bglyr:after {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        /* background-color: rgba(0,0,0,.3); */
    }
}

@media only screen and (min-width: 767px) {
    [mn="100"] .txtbx {
        width: 100%;
    }
}

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

    [mn="100"] .swiper-button-next,
    [mn="100"] .swiper-button-prev {
        --square: 25px;
    }
}

[mn="100"] .socialbtn {
    position: absolute;
    right: 30px;
    bottom: 30px;
    z-index: 2;
    color: #fff;
    font-family: var(--ft-t1);

    @media(width<575px) {
        right: 15px;
        bottom: 15px;
    }
}

[mn="105"] {
    overflow: clip;

    .text_decor {

        z-index: -1;
        height: 90px;

        img {
            max-width: unset;
            max-height: 65px;
            position: absolute;
            left: 0;
            translate: -50% 0;
        }
    }

    .btnbx {
        margin: 30px 0 0;
    }
}

[mn="108"] {
    .formular {
        padding: 35px;
        border: 1px solid #ccc;
        border-radius: 30px;

        .imgbx {
            line-height: 0;
            margin: 0 0 -90px;

            @media(width<=767px){
                margin: 0;
            }
        }
    }

    .form_text_decor {
        position: absolute;
        right: 15px;
        top: 50%;
        translate: 0 -50%;
        writing-mode: sideways-rl;
        font-size: 150%;
        font-family: var(--ft-t1);
        letter-spacing: 4px;

        @media(width<=767px){
            right: 0;
        }
    }

    .bimgw {
        width: 1000px;
        border-radius: 21px;
        overflow: clip;

        .bimg {
            padding-top: 130%;
        }
    }

    .infobx {
        padding: 0 15px;
    }

    .title {
        line-height: 1.1;
        margin: 0;
        font-family: var(--ft-t1);
        font-size: 200%;
        margin: 12px 0 0;
        padding: 0 0 15px;

        &::before{
            content: '';
            height: 3px;
            width: 60px;
            background-color: var(--clr01);
            display: block;
            margin: 12px 0;
        }
    }

    ._subttl {
        margin: 12px 0;
    }

    .btn_detail {
        padding: 12px;
        width: auto;
        font-size: 80%;
        border-radius: 3px;
        min-width: unset;
    }

    .itemlbl {
        top: auto;
        left: 15px;
        bottom: 0;
        translate: 0 50%;
        color: #fff;
        background-color: var(--clr02);
        border: 0;
        font-family: var(--ft-t1);
        font-size: 80%;
        padding: 9px 15px;
    }

    .desc {
        font-size: 80%;
    }

    .ellipsis {
        --line: 3;
    }

    .title i {
        color: var(--clr02);
        position: absolute;
        right: 9px;
        top: 15px;
        font-size: 150%;
    }

    .btm {
        margin-top: auto;
        padding: 0 0 15px;
    }

    .swiper-slide {
        flex-direction: column;
        border-radius: 15px;
        overflow: clip;

        &>* {
            /* cursor: pointer;  */
            /* box-shadow: 3px 3px 15px -6px rgba(0,0,0,.5); */
            /* height: 100%; */
        }
    }



    .swiper-pagination {
        position: relative;
        margin: 15px 0 0;
    }

    .mySwiper {
        width: 100%;
    }

    .swiper-button-next,
    .swiper-button-prev {
        --swiper-navigation-sides-offset: -15px;
        aspect-ratio: 1 / 1 !important;
        background-color: var(--clr01);
        width: 40px;
        height: auto;
        border-radius: 50%;

    }

    .swiper-button-next:after,
    .swiper-button-prev:after {
        color: #fff;
        font-size: 15px;
    }

    .swiper-pagination-bullet-active {
        background-color: var(--clr01);
    }


    .nav_ {
        width: 150px;
    }

    .nav-m {
        display: none;
    }

    .number_start,
    .number_end {
        font-size: 200%;
        font-family: var(--ft-t1);
    }
}


.productbx {
    .categorylistbx {
        --listset-count: 3;
        --listset-gap: 45px;
        text-align: center;

        @media(width<=991px) {
            --listset-count: 3;
        }

        @media(width<=767px) {
            --listset-count: 2;
        }

        @media(width<=575px) {
            --listset-gap: 6px;
        }

        .categorylistw {}
    }

    .categorybx {
        background-color: #faf5f0;
        border-radius: 21px;
        text-align: center;

        a {
            padding: 21px;
        }

        .btm {
            margin: auto 0 0;
        }

        .title {
            font-size: 150%;
        }

        .btnbx {
            padding: 0 15px 15px;

            .btn {
                --btnbgclr: transparent;
                --btnclr: #000;

                min-width: auto;
                padding: 0;
                aspect-ratio: 1;
                width: 45px;
                justify-content: center;
                align-items: center;
            }

            .ifont {

                width: 25px;

                &.icon-magnify {
                    --i-image: url(../img/icon_magnifying.png);

                    -webkit-mask-image: var(--i-image);
                    mask-image: var(--i-image);
                }

                &.icon-bag {
                    --i-image: url(../img/icon_bag.png);

                    -webkit-mask-image: var(--i-image);
                    mask-image: var(--i-image);
                }

                &.icon-like {
                    --i-image: url(../img/icon_like.png);

                    -webkit-mask-image: var(--i-image);
                    mask-image: var(--i-image);
                }

            }

        }
    }


}