@charset "utf-8";


#banner-container {
    width:1200px;
    margin:0 auto;
    margin-top:5px;
}


#banner-container.w-1248 {
    width:1248px;
}

#banner-container.w-xv {
    width:100%;
}


#banner-container .btn-banner-extend {
    margin-top:0px;
    background: #f1f1f1;
    color:#000;
    text-align:center;
    width:100%;
    padding:10px 10px;
    border:1px solid #222;
}

#banner-container .btn-banner-extend:hover {
    background: #222;
    color:#fff;

}


#banner-wrapper {
    width:100%;
    height: 237px;
    overflow:hidden;
}

#banner-container.w-1248 #banner-wrapper {
    height:285px;
}

#banner-container.w-xv #banner-wrapper {
    height:355px;
}


#banner-container.extend  #banner-wrapper {
    height:auto;
}

#banner-container.extend  .btn-banner-extend {
    margin-top:5px;
}



#banner-list {
    padding:0;
    margin:0;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 5px;
}

#banner-container.w-xv #banner-list {
    grid-template-columns: repeat(2, 1fr);
}


#banner-list > li {
  width: 100%;
  height: auto;
  overflow:hidden;
}

#banner-list > li.middle {
  width: 100%;
  display:flex;
}

#banner-list > li.short {
  width: 100%;
  display:flex;
  gap:5px;
}

#banner-list > li.middle .banner {
    width:100%;
}

#banner-list > li.short .banner {
    width:50%;
}

#banner-list .banner {
  display: block;
  background: #222;
  height: auto;
  padding:0;
}

#banner-list .banner a {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

#banner-list .banner a img {
  z-index: 10;
  max-width: 100%;
}



@media all and (max-width:767px) {

#banner-container {
    width:100%;
    margin:0 auto;
}

#banner-container.w-1248 {
    width:100%;
}

#banner-wrapper {
    height: 360px;
}


#banner-container.w-1248 #banner-wrapper {
    height: 360px;
}

#banner-container.w-xv #banner-wrapper {
    height: 339px;
}




#banner-list {
  display:block;
  margin-bottom: 5px;
}

#banner-list:after {
    clear:both;
    content: '';
    display:block;
}

#banner-list > li{
    float:left;
    width: calc(50% - 5px);
    margin-top:5px;
}

#banner-list > li.short:nth-child(0) {
  margin-left:0px;
}

#banner-list > li.middle {
  width: calc(100%);
}

#banner-list .banner {
  background: #222;
  width: 100%;
  height: auto;
  padding:0;
}

#banner-list .banner a {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}

#banner-list .banner a .blank {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #222;
  border: 1px solid #333;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#banner-list .banner a .blank:after {
  content: ' ';
}

#banner-list .banner a img {
  z-index: 10;
  max-width: 100%;
}

#banner-container.extend  .btn-banner-extend {
    margin-top:0px;
}


}