@import (once) "../../css/font.less";
@import (once) "../../css/default.less";

/* caregory_title ///////////////////////*/
.category_title{
background: url(../../image/05.jpg) no-repeat center 50%;
background-size:cover;
}


/* graphics ///////////////////////*/
.graphics{
padding:10vh 0;

dl{
border-bottom:1px @c3 solid;
border-right:1px @c3 solid;
}
dl:nth-child(1){
dd{
width:50%;
}
dd:nth-child(1), dd:nth-child(4){
background:@c2;
}
}
dl:nth-child(2){
dd{
width:33.333%;
}
dd:nth-child(odd){
background:@c2;
}
}

dd{
.dib;
border-top:1px @c3 solid;
border-left:1px @c3 solid;
.tac;
.vat;
padding:30px 0 0 0;

img{
width:60%;
}
}

p{
.db;
height:90px;
}

}


/* graphics ///////////////////////*/
@media (max-width:500px), (max-height:500px){
.graphics{
padding:5vh 0;

dl:nth-child(1){
dd{
width:100%;
}
dd:nth-child(1), dd:nth-child(3){
background:@c2;
}
dd:nth-child(4){
background:#FFFFFF;
}
}

dd{
padding:20px 0;
img{
width:80%;
}
}
dl:nth-child(2){
dd{
width:100%;
}
}

p{
height:auto;
}

}
}