.archive-matoi-title-en {
text-align: center;
font-family: "ARBONNIE";
font-size: var(--fs24px);
color: #E57893;
margin-top: 60px;
}
.archive-matoi-title {
text-align: center;
font-size: var(--fs24px);
margin-bottom: 60px;
}
[class*="-list-block"] {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin-bottom: 30px;
}
[class*="-list-item"] {
width: calc(25% - (30px / 4 * 3));
}
@media only screen and (max-width:950px){
[class*="-list-block"]{
gap:15px;
}
[class*="-list-item"] {
width: calc(25% - (15px / 4 * 3));
}
}
@media only screen and (max-width:540px){
[class*="-list-item"] {
width: calc(33.3% - (15px / 3 * 2));
}
}
@media only screen and (max-width:320px){
[class*="-list-item"] {
width: calc(50% - (15px / 2 * 1));
}
} .archive-list-item.people {
border: 1px solid #707070;
}
.performer_meta {
display: flex;
align-items: center;
gap: 5px;
border-top: 1px solid #707070;
padding: 5px;
}
.performer_thumb img {
width: 100%;
height: auto;
object-fit: cover;
}
.performer_icon {
width: 25%;
border-radius: 50%;
overflow: hidden;
}
.performer_icon:before {
content: "";
display: block;
padding-top: 100%;
}
.performer_icon img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.performer_name {
font-weight: 500;
} .archive-content-flex {
display: flex;
gap: 50px;
flex-flow: row-reverse;
}
.archive-main-content {
width: calc(100% - 350px);
}
.archive-sideber-content{
width: 300px;
}
.archive-side-title {
background: #4E4E4E;
color: #FFF;
text-align: center;
margin-top:30px;
padding: 10px;
}
p.archive-side-title:first-of-type {
margin-top: 0;
}
ul.sideber-menu {
margin-bottom: 10px;
}
ul.sideber-menu li{
background: #F5F5F5;
border-bottom: 2px solid #FFF;
}
ul.sideber-menu li a {
display: block;
padding: 10px;
padding-left: 20px;
color:#000;
}
ul.sideber-menu li.active a{
background: #e5e5e5;
}
ul.sideber-menu li.sideber-has-child {
background: #F5F5F5;
padding: 10px 10px 0;
padding-left: 20px;
}
ul.sideber-menu li.sideber-has-child ul.sideber-child-menu {
margin: 10px -10px 0 -20px;
}
ul.sideber-menu li.sideber-has-child ul.sideber-child-menu li a {
padding-left: 50px;
color:#000;
}
ul.sideber-menu li.sideber-has-child ul.sideber-child-menu li a:before {
content: "\f105";
font-family: 'FontAwesome';
position: absolute;
top: 0;
bottom: 0;
left: 30px;
margin: auto;
width: fit-content;
height: fit-content;
}
ul.sideber-menu li .sideber-select-color a {
display: inline-block;
border: none;
padding: 0;
}
.sideber-select-color {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 10px 0;
}
.sideber-select-color span.search_color_item {
display: block;
width: 30px;
height: 30px;
border: 2px solid transparent;
border-radius: 4px;
}
ul.sideber-menu li .sideber-select-color .active span.search_color_item{
border: 2px solid #c51b85;
}
span.select_clear {
position: absolute;
top: 0;
right: 15px;
font-size: var(--fs14px);
}
span.item_select_box {
position: absolute;
top: 10px;
bottom: 10px;
right: 10px;
margin: auto;
width: 25px;
height: 25px;
background: #FFF;
border: 2px solid #CDD6DD;
border-radius: 4px;
}
span.item_select_box.active:after {
content: "\f00c";
font-family: 'FontAwesome';
font-size: var(--fs18px);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: fit-content;
height: fit-content;
}
.item-search-box:before {
content: "\f002";
font-family: 'FontAwesome';
position: absolute;
top: 0;
bottom: 0px;
left: 20px;
margin: auto;
z-index: 2;
display: flex;
align-items: center;
font-size: 18px;
color: #98A6B5;
}
input.item_search_input {
width: 100%;
background: #f5f5f5;
padding-left: 50px;
position: relative;
}
@media only screen and (max-width:999px){
.archive-content-flex {
gap: 30px;
}
.archive-main-content {
width: calc(100% - 280px);
}
.archive-sideber-content {
width: 250px;
}
}
@media only screen and (max-width:750px){
.archive-content-flex {
gap: 15px;
padding:0 15px;
}
.archive-main-content {
width: calc(100% - 265px);
}
.archive-sideber-content {
width: 250px;
}
}
@media only screen and (max-width:680px){
.archive-main-content {
width: calc(100% - 215px);
}
.archive-sideber-content {
width: 200px;
}
}
@media only screen and (max-width:600px){
.archive-content-flex{
flex-wrap:wrap;
padding:15px;
}
.archive-main-content, .archive-sideber-content {
width: 100%;
}
} .pager {
font-size: 0;
display: flex;
justify-content: center;
align-items: center;
gap:10px;
margin: 70px 0;
font-weight: 400;
}
.pager span, .pager a {
font-size: var(--fs18px);
font-weight: 500;
background: #ffffff;
border: #4e4e4e 1px solid;
display: inline-flex;
justify-content: center;
align-items: center;
width:40px;
height: 40px;
color: #4e4e4e;
}
.pager .current {
background: #4e4e4e;
color: #fff;
}
@media screen and (max-width:540px) {
.pager {
margin: 50px 0;
}
} .short_video iframe {
width: 100%;
height: auto;
object-fit: cover;
}