.brand-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.search_brand_input {
width: 100%;
background: #EBEBEB;
padding-left: 50px;
position: relative;
}
.initial-list .initial, .initial-list .kashira {
margin: 15px auto;
display: flex;
flex-wrap:wrap;
}
.initial-list .initial div{
width:calc(100% / 26);
text-align: center;
}
.initial-list .kashira div{
width: calc(100% / 11);
text-align: center;
}
.initial-list .initial div:after ,.initial-list .kashira div:after{
content: "";
width: 1px;
height: 100%;
background: #707070;
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 0;
}
.initial-list .initial div:last-child:after ,.initial-list .kashira div:last-child:after{
content:none;
}
.initial-group {
padding: 40px 0;
border-bottom: 1px solid #E1E1E1;
}
.initial-brand-list {
margin-top: 25px;
display: flex;
flex-wrap: wrap;
gap: 30px;
}
.initial-brand-list .brand-item a {
color: #303030;
}
.search_result {
margin-top: 30px;
}
@media only screen and (max-width:760px){
.initial-list .initial{
gap: 5px 0;
}
.initial-list .initial div {
width: calc(100% / 13);
}
.initial-list .initial div:last-child:after{
content:"";
}
.initial-list .initial div:first-child:before,.initial-list .initial div:nth-child(14):before {
content: "";
width: 1px;
height: 100%;
background: #707070;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
}
}
@media only screen and (max-width:530px){
.initial-list .kashira {
gap: 5px 0;
}
.initial-list .kashira div {
width: calc(100% / 6);
}
.initial-list .kashira div:last-child:after{
content:"";
}
.initial-list .kashira div:first-child:before,.initial-list .kashira div:nth-child(7):before {
content: "";
width: 1px;
height: 100%;
background: #707070;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
}
}
@media only screen and (max-width:450px){
.initial-list .initial div {
width: calc(100% / 9);
}
.initial-list .initial div:nth-child(14):before{
content:none;
}
.initial-list .initial div:nth-child(9n+1):before {
content: "";
width: 1px;
height: 100%;
background: #707070;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
}
}
@media only screen and (max-width:320px){
.initial-list .initial div {
width: calc(100% / 7);
}
.initial-list .initial div:nth-child(9n+1):before,.initial-list .kashira div:nth-child(7):before{
content:none;
}
.initial-list .initial div:nth-child(7n+1):before,.initial-list .kashira div:nth-child(4n+1):before {
content: "";
width: 1px;
height: 100%;
background: #707070;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
}
.initial-list .kashira div {
width: calc(100% / 4);
}
} .brand_type_label {
display: flex;
gap: 10px;
margin-bottom: 30px;
border-bottom: 2px solid #E57893;
}
.brand_type_label a {
width: calc(50% - (10px / 2 * 1));
max-width: 200px;
height: 50px;
border: 2px solid #9D9D9D;
border-bottom-color:#E57893;
line-height: 50px;
font-size: var(--fs16px);
text-align: center;
color: #9D9D9D;
display: block;
text-align: center;
font-weight: bold;
transition: all 0.2s ease;
bottom: -2px;
z-index: 2;
}
.brand_type_label a.active {
color:#E57893;
border-color:#E57893;
border-bottom: 2px solid #FFF;
}
.sort_display_wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 15px;
margin-bottom: 15px;
}
.sort_display_title {
background: #4E4E4E;
color: #FFF;
font-size: var(--fs14px);
font-weight: 500;
padding: 5px;
width:80px;
text-align:center;
}
.sort_display_content {
display: flex;
flex-wrap: wrap;
align-items:center;
gap: 12px;
}
.sort_display_content a {
font-size: var(--fs14px);
color: #2B2B2B;
}
.sort_display_content a.active {
padding: 2px 5px;
background: #ECCFCF;
}
.display-styles {
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid;
font-size: 30px;
color:#707070;
cursor:pointer;
}
.display-styles.active{
color: #ECCFCF;
}
i.box-style-icon {
display: block;
width: 30px;
height: 30px;
background: #707070;
}
.display-styles.active i.box-style-icon{
background:#ECCFCF;
}
i.box-style-icon:before, i.box-style-icon:after {
content: "";
display: block;
background: #FFF;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
i.box-style-icon:before{
width:100%;
height:1px;
}
i.box-style-icon:after{
width:1px;
height:100%;
}
.tax-brand-list.box-style ,.program-list.box-style{
display: flex;
flex-wrap: wrap;
gap: 30px;
}
.tax-brand-list.box-style .product-item,.program-list.box-style .program-item{
width: calc(25% - (30px / 4 * 3));
}
.tax-brand-list.box-style .product_summary ,.program-list.box-style .program_summary{
display: none;
}
.tax-brand-list.list-style .product-item,.program-list.list-style .program-item{
padding:15px 0;
border-bottom:1px solid #D9D9D9;
}
.tax-brand-list.list-style .product-item a,.program-list.list-style .program-item {
display: flex;
gap: 30px;
}
.tax-brand-list.list-style .product-item a .item-img ,.program-list.list-style .program-item .item-img{
width: 25%;
}
.tax-brand-list.list-style .product-item a .item-meta,.program-list.list-style .program-item .item-meta{
width:calc(75% - 30px);
}
.tax-brand-list.list-style .product_summary ,.program-list.list-style .program_summary{
margin-top: 15px;
}
@media only screen and (max-width:1060px) and (min-width:805px){
.tax-brand-list.box-style .product-item ,.program-list.box-style .program-item{
width: calc(33.3% - (30px / 3 * 2));
}
}
@media only screen and (max-width:804px) and (min-width:601px){
.tax-brand-list.box-style .product-item ,.program-list.box-style .program-item{
width: calc(50% - (30px / 2 * 1));
}
}
@media only screen and (max-width:600px){
.tax-brand-list.box-style ,.program-list.box-style{
gap: 15px;
}
.tax-brand-list.box-style .product-item ,.program-list.box-style .program-item{
width: calc(33.3% - (15px / 3 * 2));
}
}
@media only screen and (max-width:510px){
.tax-brand-list.box-style .product-item ,.program-list.box-style .program-item{
width: calc(50% - (15px / 3 * 2));
}
}