.ib-page{
  background:#f3f3f3;
  padding-bottom:30px;
}

.ib-header{
  max-width:1280px;
  margin:0 auto 14px;
}

.ib-header img{
  width:100%;
  height:auto;
  display:block;
}

.ib-main-wrap{
  max-width:1280px;
  margin:0 auto;
  background:#fff0;
}

.ib-tabs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
  margin-bottom:14px;
}

.ib-tabs a{
  display:block;
  text-align:center;
  padding:12px 8px;
  font-weight:700;
  color:#222;
  text-decoration:none;
  background:linear-gradient(#f8f8f8,#dfdfdf);
  border:1px solid #cfcfcf;
  border-bottom:4px solid #0c6989;
}

.ib-tabs a.active{
  background:linear-gradient(#0f8bcf,#02608d);
  color:#fff;
}

.ib-layout{
  display:grid;
  grid-template-columns:180px 1fr 220px;
  gap:14px;
  align-items:start;
}

.ib-side-title,
.ib-rank-title{
  color:#fff;
  font-weight:700;
  padding:10px 12px;
}

.ib-side-title{
  background:linear-gradient(#494949,#181818);
}

.ib-cat-box{
  border:1px solid #b8c9d5;
  border-top:0;
  background:#d7e8f4;
}

.ib-cat-head{
  background:#c1d7e7;
  font-weight:700;
  padding:8px 10px;
}

.ib-cat-box ul{
  list-style:none;
  margin:0;
  padding:0;
}

.ib-cat-box li a{
  display:block;
  padding:10px 12px;
  text-decoration:none;
  color:#111;
  border-top:1px solid rgba(255,255,255,.45);
}

.ib-cat-box li a:hover{
  background:rgba(255,255,255,.45);
}

.ib-breadcrumb{
  background:#fff;
  border:1px solid #ddd;
  padding:14px;
  margin-bottom:12px;
}

.ib-panel{
  background:#fff;
  border:1px solid #d7d7d7;
  margin-bottom:14px;
}

.ib-panel-title{
  margin:0;
  padding:12px 14px;
  font-size:28px;
  font-weight:700;
  border-bottom:1px solid #d9d9d9;
  background:linear-gradient(#e6f2c8,#cadba6);
}

.ib-panel-title.blue{
  background:linear-gradient(#e7f4fb,#c8dfec);
}

.ib-mini-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  padding:14px;
}

.ib-mini-card{
  border:1px solid #d8d8d8;
  background:#fafafa;
}

.ib-mini-text{
  padding:10px;
  font-size:13px;
  line-height:1.5;
}

.ib-count{
  margin:0;
  padding:12px 14px 0;
  color:#001d6f;
  font-weight:700;
  font-size:18px;
}

.ib-product-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  padding:16px 14px 20px;
}

.ib-product-card{
  border:1px solid #cfd8df;
  background:#fff;
  padding:8px;
}

.ib-thumb{
  height:120px;
  background:#444;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  text-align:center;
}

.ib-thumb.large{
  height:150px;
  margin-bottom:8px;
}

.ib-product-title{
  display:block;
  min-height:4.5em;
  color:#003f8a;
  font-weight:700;
  line-height:1.6;
  text-decoration:none;
  margin-bottom:8px;
}

.ib-meta{
  font-size:13px;
  line-height:1.6;
  color:#444;
}

.ib-meta strong,
.ib-rank-meta strong{
  color:#cc0000;
}

.ib-right{
  background:#fff;
  border:1px solid #e1e1e1;
}

.ib-rank-title{
  text-align:center;
  font-size:18px;
  background:linear-gradient(#ff7a33,#d61f05);
}

.ib-rank-card{
  padding:10px;
  border-bottom:1px solid #efc3c3;
}

.ib-rank-no{
  color:#d80000;
  font-weight:700;
  font-size:28px;
  margin-bottom:6px;
}

.ib-rank-link{
  display:block;
  color:#003f8a;
  font-weight:700;
  line-height:1.6;
  text-decoration:none;
  margin-bottom:6px;
}

.ib-rank-meta{
  font-size:13px;
  line-height:1.6;
}

@media (max-width: 1100px){
  .ib-layout{
    grid-template-columns:1fr;
  }

  .ib-product-grid,
  .ib-mini-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .ib-right{
    order:3;
  }
}

@media (max-width: 700px){
  .ib-tabs{
    grid-template-columns:repeat(2,1fr);
  }

  .ib-product-grid,
  .ib-mini-grid{
    grid-template-columns:1fr;
  }

  .ib-panel-title{
    font-size:22px;
  }
}