@keyframes sx-spinner{
    100%{
        transform:rotate(360deg);
    }
}
@-webkit-keyframes sx-spinner{
    100%{
        transform:rotate(360deg);
    }
}
body>.page-loader{
    font-size:max(2rem,min(10vw,10vh));
    display:flex;align-items:center;justify-content:center;text-align:center;
    position:fixed;width:200vw;height:200vh;box-sizing:border-box;padding:1rem;top:-50vh;left:-50vw;
    background:white;
    z-index:999999999;
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
}
body>.page-loader::after{
    content:'';
    display:block;
    width:1em;height:1em;
    background:url('data:image/svg+xml;charset=UTF-8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path style="rgba(0,0,0,1)" d="M100-0.25c-10.458,0-18.966,8.508-18.966,18.966S89.542,37.682,100,37.682s18.966-8.508,18.966-18.966S110.458-0.25,100-0.25z M42.524,45.113c0.691,0,1.342-0.27,1.831-0.758c0.489-0.489,0.759-1.14,0.759-1.832c0-0.691-0.27-1.342-0.759-1.831c-0.489-0.489-1.139-0.759-1.831-0.759c-0.692,0-1.342,0.27-1.832,0.759c-1.009,1.009-1.009,2.652,0,3.662C41.182,44.843,41.832,45.113,42.524,45.113z M18.716,95.07c-2.718,0-4.929,2.211-4.929,4.93c0,2.718,2.211,4.929,4.929,4.929c2.718,0,4.93-2.211,4.93-4.929C23.646,97.282,21.434,95.07,18.716,95.07z M42.523,150.208c-1.941,0-3.767,0.756-5.14,2.129c-2.833,2.833-2.833,7.444,0,10.279c1.373,1.373,3.198,2.129,5.14,2.129s3.767-0.756,5.14-2.129s2.129-3.199,2.129-5.141s-0.756-3.767-2.129-5.139C46.29,150.964,44.465,150.208,42.523,150.208z M100,171.676c-5.297,0-9.607,4.31-9.607,9.607s4.31,9.607,9.607,9.607c5.298,0,9.608-4.31,9.608-9.607S105.298,171.676,100,171.676z M157.477,145.528c-3.191,0-6.191,1.243-8.448,3.5c-4.658,4.658-4.658,12.238,0,16.896c2.257,2.256,5.257,3.498,8.448,3.498s6.191-1.242,8.448-3.498c4.658-4.658,4.658-12.238,0-16.896C163.668,146.771,160.668,145.528,157.477,145.528z M181.284,85.713c-7.878,0-14.287,6.409-14.287,14.287s6.409,14.287,14.287,14.287s14.287-6.409,14.287-14.287S189.162,85.713,181.284,85.713z M157.477,59.149c4.441,0,8.616-1.729,11.757-4.869c6.482-6.483,6.482-17.031,0-23.514c-3.141-3.141-7.315-4.87-11.757-4.87s-8.616,1.729-11.757,4.87c-6.482,6.483-6.482,17.031,0,23.514C148.86,57.42,153.035,59.149,157.477,59.149z"/></svg>');
    animation:0.8s steps(8) infinite sx-spinner;
    -webkit-animation:0.8s steps(8) infinite sx-spinner;
}
html.dark-mode body>.page-loader{
    background:black;
}
html.dark-mode body>.page-loader::after{
    filter:brightness(0) invert(1);
}

body{
    background:var(--bg_0-lv_1);
}
header{
    background:var(--clr_2-lv_1);position:relative;z-index:1;
}
header>div.top-nav{
    height:3rem;z-index:2;
    background:var(--bg_0-lv_3);
    box-shadow:0 0 10px var(--clr_0-lv_10);
}
header>div.top-nav a{
    color:inherit;text-decoration:none;
}
header>div.top-nav .top-nav-container{
    height:100%;padding:0 1rem;
    display:flex;align-items:stretch;
    justify-content:space-between;
}
header>div.top-nav ul.left,header>div.top-nav ul.right{
    display:flex;height:100%;align-items:stretch;margin:0;padding:0;
}
header>div.top-nav ul.left ul,header>div.top-nav ul.right ul{
    display:none;
}

header>div.top-nav ul.left li,header>div.top-nav ul.right li{
    display:flex;align-items:stretch;
}
header>div.top-nav ul.left li>*,header>div.top-nav ul.right li>*{
    display:flex;align-items:center;padding:0 1rem;
}
header>div.top-nav ul.left li .icon,header>div.top-nav ul.right li .icon{
    font-size:1.1rem;color:var(--el_0-lv_1);
}
header>div.top-nav ul.left li .icon+*,header>div.top-nav ul.right li .icon+*{
    padding-left:0.5rem;
}

header>div.top-nav ul.left li:hover .icon,header>div.top-nav ul.right li:hover .icon{
    color:var(--nm_0-lv_1);
}

header>div.top-nav ul li{
    border-left:1px solid var(--bg_0-lv_6);
    border-right:1px solid var(--bg_0-lv_2);
}
header>div.top-nav ul li:first-child{
    border-left:none;
}
header>div.top-nav ul li:last-child{
    border-right:none;
}

header .header-container{
    display:flex;width:100%;height:100%;box-sizing:border-box;
    align-items:stretch;justify-content:space-between;
    padding:1.5rem 1rem;
}

header .header-container>a.logo{
    user-select:none;
    text-decoration:none;height:5rem;
    display:flex;align-items:stretch;justify-content:left;
    flex-basis:250px;color:rgb(var(--theme-rgb));
}
header .header-container>a.logo>.text{
    display:flex;align-items:center;
    font-family:serif;
    font-weight:bold;
    font-size:3rem;flex-grow:1;
}

header .header-container>a.logo>.image{
    flex-grow:1;
}
header .header-container>a.logo>.image + .text{
    display:none;
}
header .header-container .frm-search{
    display:flex;align-items:center;
}
header .header-container .frm-search .textfield{
    display:flex;align-items:stretch;width:300px;
    height:2.5rem;box-sizing:border-box;
    overflow:hidden;
    border-radius:var(--border-radius);
    background:var(--bg_0-lv_1);
}
header .header-container .frm-search .textfield input[type=text]{
    flex-grow:1;width:0;padding:0 0.5rem;
    border:none;outline:none;font-size:max(1rem,16px);
    background:var(--bg_0-lv_3);
}
header .header-container .frm-search .textfield button{
    border:none;background:none;
    flex-basis:2.5rem;flex-shrink:0;margin:0;padding:0;
    background:var(--bg_0-lv_5);
}

nav.main-nav{
    height:3rem;z-index:2;
    background:var(--red-lv_1);position:relative;z-index:2;
    border-bottom:0.5rem solid var(--bg_0-lv_3);
}
nav.main-nav>.sx-layout{
    display:flex;align-items:stretch;
}
nav.main-nav>.sx-layout ul{
    display:flex;align-items:stretch;
    margin:0;padding:0 1rem;list-style:none;
}
nav.main-nav>.sx-layout ul .icon{
    display:inline-block;padding-right:0.5rem;
}
nav.main-nav>.sx-layout ul li{
    display:flex;align-items:stretch;
    color:var(--red-lv_1-nm-lv_3);
}
nav.main-nav>.sx-layout ul li a{
    display:flex;align-items:center;
    text-decoration:none;padding:0 1rem;
    color:inherit;
}
nav.main-nav>.sx-layout>ul>li>a{
    border-right:1px solid rgba(255,255,255,0.2);
    border-left:1px solid rgba(0,0,0,0.2);
}
nav.main-nav>.sx-layout>ul>li:first-child>a{border-left:none;}
nav.main-nav>.sx-layout>ul>li:last-child>a{border-right:none;}


section.main{
    padding:0.5rem 0;
}

section.main .main-container{
    display:flex;align-items:stretch;gap:0.5rem;padding:0 1rem;
}

section.main aside.left-side{
    background:var(--bg_0-lv_2);width:250px;flex-basis:250px;flex-shrink:0;
}

section.main aside.left-side ul.menu{
    margin:0;padding:0;list-style:none;
}

section.main aside.left-side ul.menu>li{
    margin:0;padding:0;
    height:3rem;display:flex;align-items:stretch;
}
section.main aside.left-side ul.menu>li>a{
    text-decoration:none;
    display:flex;align-items:center;flex-grow:1;
    padding:0 1rem;background:var(--bg_0-lv_2);
    border-bottom:1px solid var(--bg_0-lv_1);
    box-shadow:inset 0 0 10px var(--bg_0-lv_3);
}
section.main aside.left-side ul.menu>li>a .icon{
    display:inline-block;margin-right:0.5rem;font-size:1.5rem;
    transition:all 0.2s;
}
section.main aside.left-side ul.menu>li:hover>a .icon{
    margin-right:1rem;
}

section.main div.center-side{
    flex-grow:1;
}
section.main div.center-side>.container{
    
}

section.main div.center-side .list-sell-item .sell-item{
    border-radius:var(--border-radius);
    background:#fff;
    box-shadow:0 0 5px rgba(0,0,0,0.2);
    padding:0.5rem;
    margin-bottom:0.5rem;
}
section.main div.center-side .list-sell-item .sell-item>h1,section.main div.center-side .list-sell-item .sell-item>h2,section.main div.center-side .list-sell-item .sell-item>.title{
    font-weight:bold;
    font-size:1.5rem;
    display:block;
}
section.main div.center-side .list-sell-item .sell-item>h1 a,section.main div.center-side .list-sell-item .sell-item>h2 a,section.main div.center-side .list-sell-item .sell-item>.title a{
    text-decoration:none;
}
section.main div.center-side .list-sell-item .sell-item>.date{
    display:block;font-size:1rem;font-style:italic;
    color:var(--el_0-lv_1);
    padding-bottom:0.5rem;
}
section.main div.center-side .list-sell-item .sell-item:last-child{
    margin-bottom:0;
}

section.main div.center-side .list-sell-item .sell-item .list-detail{
    margin-bottom:0.5rem;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0.5rem;
}
section.main div.center-side .list-sell-item .sell-item .list-detail>.detail{
    box-sizing:border-box;
    display:flex;
    background:var(--bg_0-lv_2)
}
section.main div.center-side .list-sell-item .sell-item .list-detail>.detail:nth-child(2n-1):last-of-type{
    grid-column: 1 / -1;
}


section.main div.center-side .list-sell-item .sell-item .list-detail>.detail>.title{
    flex-basis:150px;width:150px;flex-shrink:0;
    padding:0.5rem;
    background:var(--bg_0-lv_3);
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
section.main div.center-side .list-sell-item .sell-item .list-detail>.detail>.content{
    flex-grow:1;min-width:0;width:0;
    padding:0.5rem;
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
section.main div.center-side .list-sell-item .sell-item .description{
    margin-bottom:0.5rem;
}

section.main div.center-side .list-sell-item .sell-item .list-image{
    position:relative;z-index:1;
}
section.main div.center-side .list-sell-item .sell-item .list-image::after{
    content:'';
    display:block;
    padding-top:60%;
}
section.main div.center-side .list-sell-item .sell-item .list-image>.container{
    position:absolute;z-index:1;width:100%;height:100%;
    border-radius:var(--border-radius);overflow:hidden;
}
section.main div.center-side .list-sell-item .sell-item .list-image>.container>a{
    display:none;position:absolute;overflow:hidden;
}
section.main div.center-side .list-sell-item .sell-item .list-image>.container>a::before{
    content:'';
    position:absolute;top:0;left:0;
    width:100%;height:100%;background:black;
    opacity:0.1;transition:opacity 0.3s;
}
section.main div.center-side .list-sell-item .sell-item .list-image>.container>a:hover::before{
    opacity:0;
}
section.main div.center-side .list-sell-item .sell-item .list-image>.container>a>img{
    display:block;width:100%;height:100%;object-fit:cover;
}
section.main div.center-side .list-sell-item .sell-item .list-image>.container.style-1>a:nth-child(1){
    display:block;
    top:0;left:0;
    width:100%;height:100%;
}

section.main div.center-side .list-sell-item .sell-item .list-image>.container.style-2>a:nth-child(1){
    display:block;
    top:0;left:0;
    width:calc(50% - 0.25rem);height:100%;
}
section.main div.center-side .list-sell-item .sell-item .list-image>.container.style-2>a:nth-child(2){
    display:block;
    top:0;right:0;
    width:calc(50% - 0.25rem);height:100%;
}

section.main div.center-side .list-sell-item .sell-item .list-image>.container.style-3>a:nth-child(1){
    display:block;
    top:0;left:0;
    width:calc(33.33% - 0.25rem);height:100%;
}
section.main div.center-side .list-sell-item .sell-item .list-image>.container.style-3>a:nth-child(2){
    display:block;
    top:0;left:calc(33.33% + 0.125rem);
    width:calc(33.33% - 0.25rem);height:100%;
}
section.main div.center-side .list-sell-item .sell-item .list-image>.container.style-3>a:nth-child(3){
    display:block;
    top:0;right:0;
    width:calc(33.33% - 0.25rem);height:100%;
}

section.main div.center-side .list-sell-item .sell-item .list-image>.container.style-4>a:nth-child(1){
    display:block;
    top:0;left:0;
    width:calc(50% - 0.25rem);height:calc(50% - 0.25rem);
}
section.main div.center-side .list-sell-item .sell-item .list-image>.container.style-4>a:nth-child(2){
    display:block;
    top:0;right:0;
    width:calc(50% - 0.25rem);height:calc(50% - 0.25rem);
}

section.main div.center-side .list-sell-item .sell-item .list-image>.container.style-4>a:nth-child(3){
    display:block;
    bottom:0;left:0;
    width:calc(50% - 0.25rem);height:calc(50% - 0.25rem);
}
section.main div.center-side .list-sell-item .sell-item .list-image>.container.style-4>a:nth-child(4){
    display:block;
    bottom:0;right:0;
    width:calc(50% - 0.25rem);height:calc(50% - 0.25rem);
}
section.main div.center-side .list-sell-item .sell-item .list-image>.container.style-4.style-more>a:nth-child(4)::after{
    content:attr(data-number);color:white;font-size:2rem;
    display:flex;align-items:center;justify-content:center;
    position:absolute;top:0;left:0;z-index:10;
    width:100%;height:100%;background:black;
    opacity:0.5;
}

section.main div.center-side .list-page{
    display:flex;align-items:center;justify-content:center;list-style:none;
    gap:0.1rem;
}
section.main div.center-side .list-page ul{display:none}
section.main div.center-side .list-page li{
    width:2.5rem;height:2.5rem;display:flex;align-items:stretch;
    border:1px solid var(--bg_0-lv_3);
    background:var(--bg_0-lv_3);
    transition:all 0.3s;
}
section.main div.center-side .list-page li:hover{
    border:1px solid var(--bg_0-lv_5);
    background:var(--bg_0-lv_5);
}

section.main div.center-side .list-page li.active{
    border:1px solid var(--bg_0-lv_3);
    background:var(--bg_0-lv_1);
}
section.main div.center-side .list-page li a{
    text-decoration:none;
    display:flex;flex-grow:1;align-items:center;justify-content:center;
}
section.main div.center-side .list-page li a>span{
    flex-grow:1;text-align:center;
    width:0;display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

section.main div.right-side{
    background:var(--bg_0-lv_2);width:250px;flex-basis:250px;flex-shrink:0;
}

section.main div.right-side .widget{
    
}

footer{
    background:var(--clr_2-lv_3);
    color:var(--clr_2-lv_3-nm-lv_3);
}

footer .footer-container{
    padding:2rem 0;
    display:flex;
    gap:2rem;
}
footer .footer-container .title{
    font-size:1.5rem;
    border-bottom:1px solid var(--bg_0-lv_10);
    margin-bottom:1rem;
}
footer .footer-container .left,footer .footer-container .center,footer .footer-container .right{
    flex-basis:33.33%;
}
.footer-container .center ul.keyword{
    margin:0;padding:0;list-style:none;display:flex;
    flex-wrap:wrap;gap:0.5rem;
}
.footer-container .center ul.keyword li a{
    text-decoration:none;
    display:flex;align-items:center;justify-content:left;
    padding:0.5rem;
    color:var(--bg_0-lv_3);
    border:1px solid var(--bg_0-lv_10);
    border-radius:var(--border-radius);

}
.footer-container .right ul.social{
    margin:0;padding:0;list-style:none;display:flex;
}
.footer-container .right ul.social li a{
    text-decoration:none;
    display:flex;align-items:center;justify-content:left;
    height:3rem;width:3rem;
    color:var(--bg_0-lv_3);font-size:1.5rem;
}

footer .copyright{
    background:var(--clr_2-lv_1);text-align:center;
    color:var(--clr_2-lv_1-nm-lv_3);
    padding:0.5rem 0;text-align:center;
}