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

    .row {
        gap: 15px 0;
    }

    .main {
        position: relative;
    }

    .contact_info{
        @media(width<=767px){
            justify-content: flex-start;
        }
    }

    .main>*~* {
        margin-top: 25px;
        padding-top: 25px;
        border-top: 1px solid #ccc;
    }

    .subscriptionbx{
        .btn{
            border-radius: 0;
            min-width: unset;
            width: 100%;
        }
    }

    .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-t2);
        margin: 0 0 9px;
        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-t2);
        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(--clr01, #fff);
        z-index: 50;
        border-bottom: 3px solid var(--clr02);
    }

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

    .mobilestickbx img {
        max-height: 45px;

        @media(width<=575px){
            max-height: 35px
        }
    }

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

        
    }

    .menusearchbx,
    .menusocialbx{
        position: fixed;
        z-index: 51;
        right: 15px;
        top: 15px;

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

        input, textarea, select {
            padding: 4px;
            margin: 0;
            min-height: 36px;
            background-color: transparent;
            color: #fff;
            border: 1px solid #ccc;

            option{
                background-color: var(--clr01, #fff);
            }
        }

        .suchbx{
            :is(input){
                margin: 0;
                width: 100%;
                padding-right: 30px;
                max-width: 135px;
            }
            button{
                position: absolute;
                right: 0;
                top: 0;
                display: flex;
                height: 100%;
                justify-content: center;
                align-items: center;
                padding: 0 9px;
                background-color: transparent;
                border: 0;
                cursor: pointer;
                font-size: 100%;
                color: #fff;
            }
        }
    }

    &:has(.mobilenav.navbx.active){
        .menusearchbx,
        .menusocialbx{
            display: none;
        }
    }

    /* ===================== */
    .menuburger {
        --square: 60px;
        --height: 3px;
        --top: 9px;
        --vpadding: 1px;
        --bgclr: #fff;
        --radius: 5px;
        --icon-width: 30px;
        position: fixed;
        width: var(--square) !important;
        height: var(--square);
        top: 3px;
        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;

        @media(width<=575px){
            top: -3px;
            left: 0;
        }
    }

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

        }
    }
}

.show_deks_only{
    @media(width<=767px){
        display: none;
    }
}
.show_mob_only{
    @media(width>767px){
        display: none;
    }
}

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

[mn="602"]{
    .categorylistbx{
        --listset-count:3;
        text-align: center;

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

        .categorybx{
            .bimgbx{
                .bimgw{
                    border-radius: 15px;
                }
                .bimg{
                    padding-top: 70%;
                }
            }

            .name{
                font-family: var(--ft-t2);
                line-height: 1.2;
                margin: 6px 0;
            }

            .date{
                font-family: var(--ft-t2);
                line-height: 1;
                margin: 0 0 6px;
                color: #888;
            }

            .top{
                flex: 1 0 0;
            }

            .btm{
                border-top: 3px solid var(--clr02);
                margin-top: 15px;
                padding-top: 15px; 
            }
        }
    }
}

[mn="106"]{
    color: #fff;

    .h4{
        color: inherit;
    }

    ._content{
        margin: 0 auto;
        max-width: 100%;
        width: 800px;
    }
}
[mn="502"]{  

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

    .showcasebx{
        border: 0;
        .bimgbx{
            .bimg{
                padding-top: 120%;
            }
        }
    }

    .categorylistbx{
        --listset-count: 4;
        margin-top: 60px;

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

        .categorybx{
            background-color: #7d7d7d;
            color: #fff;
            overflow: clip;
            border-radius: 15px;
        }
    }
    .sectiontitle{
        font-size: 120%;
        text-decoration: underline;
        text-underline-offset: 9px;
        margin: 0 0 30px;
    }
}

[mn="103"]{
    img{
        @media(width>991px){
            margin: -107px 0 0;
        }
    }
}

[mn="102"]{  
    --iconWidth: var(--iconWidth_default, 90px);
    --iconHeight: var(--iconHeight_default, 100%);
    --iconRadius: var(--iconRadius_default, 3px);
    --iconBorder: var(--iconBorder_default, 0);
    --iconPadding: var(--iconPadding_default, 0);
    --count: var(--count_default, 2);

    @media (width <= 991px) { 
        --count: var(--count_991, 2); 
    } 

    @media (width <= 767px) { 
        --count: var(--count_767, 1); 
    } 
    
    @media (width <= 575px) { 
        --count: var(--count_575, 1); 
    } 
}

[mn="102"]{
    counter-reset: count 0;

    .list-{
        counter-increment: count 1;

        .title::before{
            content: counter(count, decimal-leading-zero);
            display: block;
            margin: 0 0 12px;
            font-size: 90%;
            color: #555
        }
    }
}
[mn="102"]{

    .categorylistbx.listbx{

        --listset-count: var(--count);
        --listset-gap: 30px;
        line-height: 1.4;

        .categorybx { 
            --manual-div: var(--countu_default);
     
            .infobx { 
                background-color: transparent; 
                max-width: 100%;
                margin: 0 auto;  
                /* aspect-ratio: 3 / 2; */
            } 
            .bimgw { 
                width: var(--iconWidth); 
                border-radius: var(--iconRadius);
                border: var(--iconBorder);
                padding: var(--iconPadding);
                .bimg{
                    padding-top: var(--iconHeight);
                    transition: .6s all cubic-bezier(0.075, 0.82, 0.165, 1);
                }
            }
    
            & a{
                display: block;
                width: 100%;
    
                &:hover{
                    .bimg{
                        scale: 1.15;
                    }
                }
            }
    
    
        }
    }  

    .title {
        font-family: var(--ft-t2); 
        margin: 15px 0;
        line-height: 1.1;  
        width: 100%;  

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

    .waze{
        background-image: url(_src/waze.png);
    }
    .googlemap{
        background-image: url(_src/googlemap.png);
    }

    .mapcon{
        width: 30px;
        aspect-ratio: 1;
    }

    .bulletw{
        & > * ~ * {
            margin-top: 9px;
        }

        .bullet{
            --div-l: 30px;
            --div-r: calc(100% - var(--div-l));
            
            .bullet-l{
                flex: 0 0 var(--div-l);
                max-width: var(--div-l);
                color: #666;
                padding: 3px 0 0 0;
            }
            .bullet-r{
                flex: 0 0 var(--div-r);
                max-width: var(--div-r);
    
                a{
                    width: auto !important;
                }
            }
        }
    } 

    .quotebx{
        padding: 45px;
        font-size: 130%;
        width: 800px;
        max-width: 100%;
        margin: 0 auto 45px;

        @media(width<575px){
            padding: 45px 0;
        }

        .quote-{
            position: absolute;
            aspect-ratio: 1;
            width: 35px;

            &.quote-open{
                background-image: url(_src/102_quote_open.png);
                left: 0;
                top: 0;

                @media(width<575px){
                    left: 50%;
                    translate: -50% 0;
                }
            }
            &.quote-close{
                background-image: url(_src/102_quote_close.png);
                bottom: 0;
                right: 0;

                @media(width<575px){
                    right: 50%;
                    translate: 50% 0;
                }
            }


        }
    }
}
[mn="102"].dsg_2{
    .title{
        margin: 0 0 15px;
    }
    .infobx{
        max-width: 600px !important;
        margin: 0 auto !important;


        .info-l{
            flex: 0 0 90px;
            max-width: 90px;
        }
        .info-r{
            flex: 0 0 calc(100% - 90px);
            max-width: calc(100% - 90px);
            padding: 0 0 0 15px;
        }
    }
}
/* ============================ */
/* ============================ */ 

[mn="102"]{
    &.icon_title_color2{
        .title{
            color: var(--clr02);
        }
    }
}
[mn="101"]{

    .categorylistbx{

        .categorylistw{
            gap: 0;

            .categorybx{
                flex: 0 0 50%;
                max-width: 50%;
                line-height: 1.4;

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


        .bimgbx{
            line-height: 0;
        }
        .bimg{
            padding-top: 80%;

            @media(width<=767px){
                 
            }
        }

        .infobx{
            position: absolute;
            top: 50%;
            left: 50%;
            translate: -50% -50%;
            z-index: 100;
            color: #fff;
            text-align: center;
            padding: 21px;
            max-width: 100%;
            width: 450px;
        }

        .btnbx{
            text-align: center;
            padding: 15px 0;
        }

        .title{
            font-size: 180%;
        }
    }

} 



[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="302"]{
    .groupbx{
        font-size: 120%;
        .group-{
            & ~ &{
                margin-top: 60px;
            }
        }
    }
    .barbx{
        .barw{
            width: 100%;
            height: 15px;
            border-radius: 50px;
            background-color: var(--clr03); 
            display: block;
        }
        .bar-{
            background-color: var(--clr01);
            height: 100%;
            width: 0;
            top: 0;
            left: 0;
            transition: .6s all .9s ease;
            border-radius: 50px;
        }
        .percentbx{
            background-color: var(--clr01);
            color: #fff;
            position: absolute;
            right: 0;
            bottom: 100%;
            translate: 50% -9px;
            font-size: 70%;
            font-family: var(--ft1);

            line-height: 1;
            padding: 9px;
            border-radius: 3px;
            
            &::after{
                content: '';
                display: block;
                position: absolute;
                left: 50%;
                bottom: 0;
                translate: -50% 50%;
                aspect-ratio: 1;
                width: 9px;
                clip-path: polygon(100% 0, 0% 100%, 100% 100%);
                background-color: var(--clr01);
                rotate: 45deg;
            }
        }
    }

    .title{
        font-size: 130%;
        margin: 0 0 30px;
    }
        
    ._subttl {
        font-family: var(--ft-t2);
        color: #888
        /* font-size: 160%; */
    } 
    .btn {
        margin: 0 0 9px;
    } 
 
    .taste a:not(.btn) {
        font-family: var(--ft-t3);
        color: var(--clr03);
    }  

    ._imgobj{
        img{
            position: sticky;
            top: 90px; 
        }
    }

    /* .themebx{
        --div: 90px;

        .theme-{
            &.theme-l{
                flex: 0 0 var(--div);
                max-width: var(--div);
                padding-right: 21px;
            }
            &.theme-r{
                flex: 0 0 calc(100% - var(--div));
                max-width: calc(100% - var(--div));
            }
        }

        ._secttl{ 
            writing-mode: sideways-rl;
            margin: 0;
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            padding: 15px;
            line-height: 1;
            background-image: var(--cus-grad-to-down);
            color: #fff;
            font-size: 150%;
        }
    } */
}
/* =================== */
/* =================== */

[mn="302"] .iconlistbx {

    --flex: 50%;
    margin: 30px 0;
    /* border-top: 1px solid #eee; */
    /* border-left: 1px solid #eee; */
    line-height: 1;
    gap: 15px 0;

    @media(width<575px){
        --flex: 100%;
    }
    ._imgobj{
        margin: 0;
    } 
    

    .iconbx {
        --div: 65px; 
        flex: 0 0 var(--flex);
        max-width: var(--flex);
        background-color: transparent;
        padding: 0 15px 0 0;
        line-height: 1.3;
        font-family: var(--ft-t2);

        .icon-l{
            flex: 0 0 var(--div);
            max-width: var(--div);
        }
        .icon-r {
            flex: 0 0 calc(100% - var(--div));
            max-width: calc(100% - var(--div));
            text-align: left;
            padding-left: 15px;
        }
        .iconw {
            padding: 9px;
            border-radius: 9px;
            background-color: #fff;
            border: 1px solid #ccc;
        }

        & img {
            max-height: 45px;
        }  
        ._content{
            margin: 9px 0 0;
            font-size: 85%;
        }
        .num{
            line-height: 1; 
            font-variant-numeric: tabular-nums;
            font-size: 230%; 

            & span{ 
                font-variant-numeric: tabular-nums;
            }
        }
    }
}
/* =================== */
/* =================== */ 

[mn="302"]{
    ._ittl{
        .ttldecor-btm::after {
            content: '';
            display: inline-block;
            height: 6px;
            width: 90px;
            background-color: var(--clr03);
            margin: 15px 0 0;
        }
    }
}
[mn="302"].dsg_1 {
    .row{
        flex-direction: row-reverse;
    }
}



[mn="304"]{

    .contentbx{
        padding: 25px;
        border-radius: 15px;
        color: #fff;
        overflow: clip;
    }
    .categorylistbx{
        --listset-count: 3;

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

        .txtbx{
            min-height: 180px;
            padding-left: 35%;
            padding-top: 4%;
            padding-bottom: 4%;

            @media(width<=991px){
                min-height: 140px;
                padding-left: 120px;
            }
            @media(width<=991px){ 
                padding-left: 50px;
            }
        }
        img.num{
            width: 50%;
            aspect-ratio: 1;
            position: absolute;
            left: 0;
            top: 0;
            z-index: -1;
            mix-blend-mode: overlay;
            opacity: .35;
            object-fit: contain;

            @media(width<=991px){
                width: 120px;
            }
        }
    }
}
[mn="305"]{

    .contentbx{
        padding: 35px;
        border-radius: 15px;
        color: #fff;
        overflow: clip;
    } 
}



 [mn="303"] {
     --gradStart_default: var(--secbgclr);
     --gradEnd_default: rgba(255, 255, 255, 0);
     --min-height: 300px; 

     .itm {
         &.lr-w {
             flex: 0 0 100%;
             max-width: 100%;
             flex-direction: row-reverse;
             padding: 0;
         }

         .l,
         .r {
             flex: 0 0 50%;
             max-width: 50%;
             position: relative;

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

         .l {
             min-height: var(--min-height);

             &::after {
                 content: '';
                 left: 0;
                 bottom: 0;
                 position: absolute;
                 display: block;
                 height: 100%;
                 width: 250px;
                 background: rgb(236, 241, 243);
                 background: linear-gradient(90deg, var(--gradStart_default) 0%, var(--gradEnd_default) 100%);
             }

             @media(width<=575px) {
                 border-radius: 9px;
                margin-bottom: 15px;

                 &::after {
                     display: none
                 }
             }
         }

     }

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

         @media(width>575px){
            padding: 30px 0;
         }
     }

     ._content {
         border: 0;
     }


     .floatingbg {
         position: absolute;
         left: 0;
         top: 0;
         height: 100%
     }

     @media (max-width: 575px) {
         .textbx {
             padding: 0 0 0 0 !important
         }

         .floatingbg {
             position: inherit;
             border-radius: 15px;
         }
     }

     .rowbxlist {

        --ObjImgPadu: var(--ObjImgPadu_default, 15px 0);
        padding: var(--ObjImgPadu);

        @media (width <= 1200px) { 
            --ObjImgPadu: var(--ObjImgPadu_1200, 30px 0); 
        } 
        @media (width <= 991px) { 
            --ObjImgPadu: var(--ObjImgPadu_991, 30px 0); 
        } 

        @media (width <= 767px) { 
            --ObjImgPadu: var(--ObjImgPadu_767, 9px 0); 
        } 
        
        @media (width <= 575px) { 
            --ObjImgPadu: var(--ObjImgPadu_575, 9px 0); 
        }

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

        
        .rowbxlistw{
            padding: 35px;
            background-color: var(--gradStart_default);
            border-radius: 15px;
            overflow: clip;

            @media(width<767px){
                padding: 15px;
            }
            @media(width<575px){
                padding: 15px;
            }
        }

         .rowcont {
             min-height: var(--min-height);
         }

         .rowcont {
             @media(width<575px){
                min-height: unset;
             }
         }
     }

     &.dsg_1 {
         .rowbxlist:nth-child(even) {

             .rowcont {
                 .row {
                     flex-direction: row-reverse;
                 }
             }

             .lr-w {
                 flex-direction: initial;
             }

             .l {
                 &::after {
                     background: linear-gradient(90deg, var(--gradEnd_default) 0%, var(--gradStart_default) 100%);
                     left: auto;
                     right: 0; 
                 }
             }
         }
     }
     &.dsg_2 {
         .rowbxlist:nth-child(odd) {

             .rowcont {
                 .row {
                     flex-direction: row-reverse;
                 }
             }

             .lr-w {
                 flex-direction: initial;
             }

             .l {
                 &::after {
                     background: linear-gradient(90deg, var(--gradEnd_default) 0%, var(--gradStart_default) 100%);
                     left: auto;
                     right: 0; 
                 }
             }
         }
     }





 }


 /* =================================== */
 /* =================================== */
[mn="401"]{

    .showcasebx{
        border: 0;
        .bimgbx{
            .bimg{
                padding-top: 120%;
            }
        }
    }

    .categorylistbx{
        --listset-count: 4;

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

        .categorybx{
            background-color: #7d7d7d;
            color: #fff;
            overflow: clip;
            border-radius: 15px;
        }
    }
    .sectiontitle{
        font-size: 120%;
        text-decoration: underline;
        text-underline-offset: 9px;
        margin: 0 0 30px;
    }
}
 [mn="303"]{
    ._ittl{
        .ttldecor-btm::after {
            content: '';
            display: inline-block;
            height: 6px;
            width: 120px;
            background-color: var(--clr03);
            margin: 15px 0 0;
        }
    }
 }




[mn="204"] {

    --ttlClru_default: var(--secttlclr);

    &.btn_full {
       .taste .btn {
          width: 100%;
          border-radius: 50px;
       }
    }

    ._ittl {
       .h4 {
          color: var(--ttlClru_default);
       }
    }

    ._subttl {
       text-align: var(--ttlalign);
    }

    .txtbx~.txtbx {
       margin-top: 30px;
    }

    ._content {
       margin: 0;
    }

    ._imgobj {
       text-align: center;
       margin: 15px 0;
    }

    .taste {
       margin: 15px 0;
       display: flex;
       flex-wrap: wrap;
       gap: 15px;
       justify-content: var(--secalign);
    }

    .ttlbx {
       margin: 0 0 45px;
       border-left: 9px solid var(--clr01);
       padding-left: 21px;
       text-align: left;
       font-family: var(--ft-t1);

       .h4 {
          text-align: inherit;
       }
    }
 }


[mn="202"] {
    .decor-1 {
        left: 0;
        bottom: 0;
    }
    .decor-2 {
        right: 0;
        bottom: 0;
    }
    .itms{
        --div-info: 40%;
    }
    .itm .l {
        flex: 0 0 35px;
        max-width: 35px;
    }

    .itm .r {
        flex: 0 0 calc(100% - 35px);
        max-width: calc(100% - 35px);
        padding-left: 12px;
        overflow-wrap: break-word;
    } 

    .itm:nth-child(1) {
        flex: 0 0 calc(100% - var(--div-info));
        max-width: calc(100% - var(--div-info)); 
    }
    .itm:nth-child(2) {
        flex: 0 0 var(--div-info);
        max-width: var(--div-info); 
    } 

    /* .itm:nth-child(1),
    .itm:nth-child(2) {
        flex: 0 0 50%;
        max-width: 50%; 
    }  */


    .ttl {
        font-size: 120%;
        font-family: var(--ft-t2);
        line-height: 1;
        margin-bottom: 9px;
        color: #000;
    }

    .listbx {
        padding: 30px;
        border: 2px solid #ccc;
        background-color: #fff;
        position: relative;

        /* &:after {
            content: '';
            display: block;
            position: absolute;
            width: calc(100% - 150px);
            height: 9px;
            background-color: var(--clr01);
            left: 0;
            bottom: 0;
        } */
    }
    .itms {
        margin: 0 -15px
    }
    .itms+.itms {
        margin-top: 21px
    }

    .itm {
        padding: 0 15px
    }
    .itm iframe {
        width: 100%;
        height: 250px
    }

    .itm .l .bimg-w {
        margin-bottom: 15px;
        margin-top: -9px
    }
    ol {
        padding: 0;
        list-style: none;
        list-style-type: none;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    ol > li {
        flex: 0 0 50%;
        max-width: 50%;
    }
    ._link { 
        text-align: right;
        margin: 15px 0 0;
    } 
    ._content a { 
        display: inline-block;
    }
    @media only screen and (max-width: 767px) { 
        .itm:nth-child(1),
        .itm:nth-child(2) { 
            flex: 0 0 100%;
            max-width: 100%;
        }
        ol > li {
            flex: 0 0 100%;
            max-width: 100%;
        }

        .itm>div { 
            max-width: 100%;
            margin: 15px auto 0
        }
    }

    .iframebx{

        flex: 1 0 0;

        ._iframe{
            display: flex;
            flex-wrap: wrap;
            width: 100%;

            iframe{
                width: 100%;
                min-height: 300px;
                aspect-ratio: auto;
                height: auto;
            }
        }

    }

    
}


 
[mn="201"] { 
    .taste {
        margin: 21px 0 0;
    } 
    .follow-us{
        text-align: center;
        margin: 30px 0 0;

        .mediabx{
            &>*{
                justify-content: center;
            }
        }
    }

    .noticebx{
        font-size: 90%;
    }

    .contactinfobx {
        line-height: 1.1;
        .ttldecor- {
            display: none!important;
        }
        ._ittl {
            margin: 0 0 9px;
        }
        .title {
            font-size: 120%;
            font-family: var(--ft-t1);
            margin: 3px 0 9px
        }

        @media (width <= 767px) {
            text-align: center;

            .iconbx {
                ._imgobj {
                    margin: 0;
                }
                .bimgw {
                    max-width: 60px;
                }
                .icon-{
                    flex: 0 0 100%;
                    max-width: 100%;
                }
            }
        }
    }
} 

 [mn="200"]{
        z-index: 1;
        --secftclr: #fff;
        --secttlclr: #fff;
        --secpb: 1px;

        .contentbx:after {
            content: '';
            position: absolute;
            bottom: calc(-1 * var(--secpb));
            right: 0;
            width: 100vw;
            height: 9px;
            display: block;
            background-color: var(--clr02);
        }

        .h4 {
            margin: 0;
            position: relative;
            /* letter-spacing: 2px; */
        }

        ._ttlcontent {
            width: 700px;
            margin: 12px auto 0 !important;
            max-width: 100%;
        }

        ._content {
            max-width: 100%;
            width: 600px;
        }

    }

    [mn="200"] ._subttl {
        letter-spacing: 1px;
    }

    [mn="200"] .tst-w>* {
        width: 100%
    }

    [mn="200"] .main {
        padding: 60px 15px;
    }

    [mn="200"] .content {
        font-size: 150%
    }

    [mn="200"] .ttldecor-top {
        position: relative
    }


    [mn="200"] .bg-lay {
        background-position: top center
    }

    [mn="200"] .bg-lay,
    [mn="200"] .bg-layer {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        z-index: -2
    }

    [mn="200"] .bg-layer {
        z-index: -1;
        background-size: auto;
        background-repeat: repeat;
        display: none;
    }

    [mn="200"] .subttl {
        font-size: var(--font-xl);
    }

    [mn="200"] ._ittl,
    [mn="200"] ._secttlbx {
        margin: 0 0 9px;
    }

    [mn="200"] .ttldecor-btm:after {
        background-color: var(--secftclr);
    }

    @media (max-width: 1000px) {
        [mn="200"] .ttl {
            font-size: var(--font-xxl)
        }
    }

    @media (max-width: 767px) {
        [mn="200"] .main {
            padding: 0 15px;
        }

        [mn="200"] {
            min-height: auto
        }
    }

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

    [mn="200"] ._secttlbx {
        margin: 6% 0 !important;
    }

    [mn="200"] .ttldecor-btm {
        display: none;
    }

    [mn="200"] .contentbx {
        & h4 {
            color: inherit;
            padding: 0;
            margin: 0;

            &::after {
                display: none;
            }
        }

        ._subttl {
            font-size: 80%;
        }

        ._subttl::before {
            content: '';
            width: 30px;
            height: 3px;
            display: inline-block;
            background-color: #fff;
            vertical-align: middle;
            margin: 0 6px 0 0;
        }
    }


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

            }

        }
    }


}

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

    ._date{
        font-size: 80%;
        line-height: 1.2;
        margin: 6px 0;
        font-family: var(--ft-t2);
        color: #9b9b9b;
    }

    

    .mySwiper { 
        width: 100%;
        padding: 0 0 21px;

        .bimgbx{
            .bimgw{
                border-radius: 15px;
                .bimg{
                    padding-top: 70%;
                }
            }
        }
    }

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

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

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

    

    .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="105"]{ 
    overflow: clip;

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

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

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

    .mySwiper { 
        width: 100%;
        padding: 0 0 21px;
    }

    .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="702"] {

    --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 {
        display: none;
        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: 0;

            [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: 3;
        margin: 15px 0 0;
        background-color: transparent;

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

        .categorybx { 
            cursor: pointer;
        }

        .bimgw{
            border-radius: 15px;
        }
    }
}
 
[mn="801"]{
    min-height: 65vh
}
[mn="801"] .catbx { 
    margin: 0 0 15px; 

    .catw{
        margin: 0 -3px;
        &>*{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            padding: 3px;

            &:nth-child(1),
            &:nth-child(2){
                @media(width<575px){
                    flex: 0 0 50%;
                    max-width: 50%;
                }
            }
        }
    }
    & button.i{
        height: 100%;
        background-color: transparent;
        border: 0;
        color: var(--clr02);
        cursor: pointer;
    }
    & :is(select, input){
        margin: 0;
        padding: 9px;
        height: 48px;
    }
} 
[mn="801"] .rowitm .h4 { 
    padding: 0;
    margin: 0;
    border: 0;
} 
[mn="801"] .rowitm .h4:after { 
    display: none;
} 
@media (max-width: 991px) {
    [mn="801"] .tabbx  {
        display: none;
    }
}
[mn="801"] .divlrw {
    margin: 0 -15px
}
[mn="801"] .divlr- {
    --div: 300px; 
    padding: 0 15px;
}
[mn="801"] .divlr-.l,
[mn="801"] .divlr-.r {
    flex: 0 0 100%;
    max-width: 100%
}  
[mn="801"] .mediabx.sharer {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
}  
@media (max-width: 575px) {
    [mn="801"] .mediabx.sharer {
        position: relative;
        margin: 0 0 6px;
    }  
}
/* ============================== */
[mn="801"] .postbx.inner { 
    max-width: 100%; 
    margin: 0 auto;

    & h1 {
    font-size: 220%;
    color: inherit;
    }
    ._imgobj {
        max-width: 100%;
        text-align: center;
        position: relative;
        z-index: 1;
        padding: 0 30px 30px;
        &::after{
            content: '';
            position: absolute;
            width: 100%;
            height: calc(100% - 60px);
            left: 0;
            bottom: 0;
            display: block;
            background-color: var(--clr01);
            z-index: -3;
        }
        & img {
            max-height: 70vh;
            @media(width>767px){
                /* width: 800px; */
            }
        }
    }
    .ttldecor-btm {
        border-bottom: 3px solid var(--clr01);
        margin: 15px 0 0;
    }
    .backbtn {
        margin: 15px 0 0;
    }
    ._ittl {
        margin: 9px 0;
    }
    ._date {
        font-family: var(--ft-t1);
        color: var(--clr01);
    }
    .titlebx {
        margin: 0 0 21px;
    }
    .postbody {
        width: 100%; 
        /* padding: 0 15px; */  
        text-align: justify;
    }
}
.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);
    }
}








.showcasebx{
    flex-direction: column;
    text-align: center;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    line-height: 1.1; 

    .view_more{
        &:hover{
            text-decoration: underline;
        }
    }

    .bimgbx{
        .bimg{
            padding-top: 80%;
        }
    }

    .desc{
        font-size: 85%;
    }

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

    .top{
        padding: 0 0 9px;

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

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

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

        .volume{
            font-size: 90%;
            color: #999;
        }
        .bimgbx{
            line-height: 0;
            padding: 15px;
        }
    }
    .btm{
        margin-top: auto;

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

        .price{
            font-size: 120%;
        }
    }
}

.filterbx{

    border-bottom: 3px solid var(--clr03);
    padding: 0 0 15px;
    margin: 0 0 45px;

    :is(input, select){
        margin: 0!important;
    }

    .suchbx{
        :is(input){
            margin: 0;
            width: 100%;
            padding-right: 45px;
            border-radius: 50px;

        }
        button{
            position: absolute;
            right: 0;
            top: 0;
            display: flex;
            height: 100%;
            justify-content: center;
            align-items: center;
            padding: 0 15px;
            background-color: transparent;
            border: 0;
            cursor: pointer;
            font-size: 100%;
        }
    }
}