:root{
    --clr01: #0a0f15;
    --clr02: #222631;
    --clr03: #373e4e;
    --clr04: #4e5669;
    --clr05: #657084;
    --clr06: #bfc7d4;
    --clr07: #d2d6e1;
    --clr08: #e0e5eb;
    --clr09: #f0f1f5;
    --clr10: #ffffff;
 
    --bdclr: #0a0f15;

    --hclr: var(--secttlclr);
    --h-letspace: 0px;

    --containerWidthSet_1200: 1200px;
    --containerWidthSet_991: 960px;
    --containerWidthSet_767: 720px;
    --containerWidthSet_575: 540px;

    --secttlmarg: 0 0 45px;
 
    --body-lineheight: 1.8;
    --subttlsize: 110%; 
    --subttlfamily: var(--ft-t2);
    --subttl: 0;
    --secttlmarg_default: 0 0 30px; 
}

/* ::-moz-selection {
    color: var(--clr01); 
}
::selection {
    color: var(--clr01); 
} */
@media (max-width: 767px) {
    /* .container, .container-fluid {
        max-width: calc(100% - 30px);
    } */
} 

@media (min-width: 767px) {
    /* :root {
        --h4: calc(60 / 18 * 100%)
    } */
}
a.btn,
.btn{ 
    --btnbgclr: var(--clr02, #000);
    --btnbgclrhov: var(--clr01);
    --btnborderclr: var(--btnbgclr);
    --btnborderclrhov: var(--btnbgclrhov);
    --btnclr: var(--clr01x, #fff);
    --btnclrhov: var(--clr02x, #fff);
    --btnpad: 9px 12px;
    --btn-minwidth: 90px;
    --btnborderrad: 0;
    --btnfontsize: 70%;
    --btnborderwidth: 2px;
    --btnfont: var(--ft-t2);

    &.btn-line{
        --btnbgclr: var(--clr01x, transparent);
        --btnbgclrhov: var(--clr01);
        --btnborderclr: var(--btnbgclrx, var(--btnclr));
        --btnborderclrhov: var(--btnbgclrhov);
        --btnclr: var(--clr01, #fff);
        --btnclrhov: var(--clr01x, #fff);
    }
    &.btn-line-rev{
        --btnbgclr: var(--clr01x, transparent);
        --btnbgclrhov: var(--clr09);
        --btnborderclr: var(--btnbgclrx, var(--btnclr));
        --btnborderclrhov: var(--btnbgclrhov);
        --btnclr: var(--clr09, #fff);
        --btnclrhov: var(--clr01, var(--clr09));
    }
}

.btn{
    position: relative;
    z-index: 1; 
    line-height: 1; 
    letter-spacing: 3%;

    
    
    &::after,
    &::before{
        /* content: ''; */
        display: inline-block;
        transition: inherit;
        /* position: absolute;  */ 
    }
    &:hover::after,
    &.active::after{
        --mkclr: var(--btnclrhov);
    } 
    &::after{ 
        --mkclr: var(--btnclr);
        --square: 15px;
        margin: 0 0 0 9px;
        height: var(--square);
        width: var(--square);
        
        mask-size: contain;
        -webkit-mask-size: contain;
        mask-position: center;
        -webkit-mask-position: center;
        mask-repeat: no-repeat;
        -webkit-mask-repeat: no-repeat;
        background-color: var(--mkclr);
        -webkit-mask-image: url(src/arrow-up-right.png);
        mask-image: url(src/arrow-up-right.png);
    } 
}



.h4 img {
    vertical-align: middle;
    margin: -6px 6px 0;
}
section {
    --secttlclr: var(--clr01x, inherit); 
}
.btn i {
    /* font-size: 200%; */
    margin: 0 3px;
}
.btn.f > * {
    display: inline-flex;
    vertical-align: middle;
} 
label{
    --lblfont: var(--ft-t2);
} 
/* ============== */ 
a {
    text-decoration: none;
}
body{
    background-color: #fefefe;
} 
/* section:is([style*="--secbgclr"]) {
    --btnborderclr: #fff;
    --btnclr: #fff;

    .mediabx {
        --iconclr: var(--clr01x, #fff);
        --iconhovclr: var(--clr01, #fff);
        --bgclr: var(--clr02x, transparent);
        --bghovclr: var(--clr02, #fff);
        --mediaborder: 2px solid #fff;
        --mediahovborder: 2px solid var(--clr02, #fff);
        --mediaborderradius: 50%;
        --mg: 0;
    }
} */
section{
    &.bullet_ball {
        ul {
        list-style: none; /* Hide default bullets */
        padding-left: 30px;
        }

        li{
            position: relative;
        }
        li::before {
            content: "";
            display: inline-block;
            height: 15px;
            width: 15px;
            background-image: url(src/ballpoint.webp);
            background-size: contain;
            background-repeat: no-repeat;
            margin-right: 10px;
            vertical-align: middle;
            position: absolute;
            left: 0;
            top: 6px;
            translate: calc(-100% - 10px) 0;
            background-position: center;
        }
    } 
}
section.maintitle_style{
    ._secttlbx{
        padding-left: 30px;
        position: relative;

        &::after{
            content: '';
            display: block;
            position: absolute;
            height: 100%;
            width: 9px;
            background-color: var(--clr04);
            left: 0;
            top: 0;
            border: 1px solid #fff;
        }
    }
}
section:is([style*="--secttlclr"]) { 
    .ttldecor-top:after {
       background-color: var(--secttlclr);
    } 
}
.listobx.categorylistbx{
    font-family: var(--ft-t2);
}
.btn_noti {
    font-family: var(--ft-t2);
}




.searchbx { 
    position: relative;
    width: 150px;
    
    overflow: hidden;

    .searchw {
        position: relative;
    }
    & input {
        margin: 0;
        padding: 9px 30px 9px 9px;
        width: 100%;
        border-radius: 3px;
        border: 0;
        font-size: inherit;
    }
    & button.i {
        position: absolute;
        left: auto;
        right: 12px;
        top: 50%;
        translate: 0 -50%;
        color: #888;
        width: auto;
        border: 0;
        padding: 0;
        background-color: transparent;
    }
}

.dekstickbx .searchbx,
.nav .searchbx{
    border-radius: 50px;
    font-size: 80%;
    border: 1px solid #888;
    
    & input {
        padding: 9px 30px 9px 15px; 
        background-color: #fff;
    }
}

#mouse-circle {
    position: absolute;
    width: 15px !important;
    height: 15px !important;
    margin: -7px 0px 0px -7px;
    border: 1px solid var(--clr01);
    background-color: var(--clr02);
    border-radius: 50%;
    pointer-events: none !important;
    box-shadow: 0 0 16px rgba(255, 255, 255, 0);
    z-index: 1000; 
}

.galbxmain {
    .bimgw{
        background-color: #eee;
    }
}

.btn-neg .btn{
    --btnborderclr: #fff;
    --btnbgclr: transparent;
}

.ttldecor-btm{
    /* line-height: 1;

    &::after{
        content: '';
        width: 60px;
        height: 3px;
        display: inline-block;
        background-color: var(--secttlclr, var(--clr02));
    } */
}

._ittl ._subttl, ._topsubttl, ._btmsubttl, ._subttl{
    color: var(--clr02);
}

.swiper_cus_nav{
    --swiper-scrollbar-drag-bg-color: var(--clr01);
    line-height: 1;
    width: 600px;
    max-width: 100%;
    margin: 25px auto 15px;
    gap: 9px;
    z-index: 9;

    &:has(.swiper-scrollbar-lock){
        display: none;
    }

    .swiper-scrollbar{
        position: relative;
    }

   .nav-m{
        flex: 1 0 0;
   }
}
.nav_{
    aspect-ratio: 85 / 24;
    width: 85px;
    display: inline-block;
    cursor: pointer;

    &.nav_prev,
    &.nav_next{
        display: none;
    }
    &.nav_next{
        background-image: url(src/nav_next.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }

    &.nav_prev{
        background-image: url(src/nav_prev.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    
    @media(width<=575px){
        width: 50px;
    }


}