@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.banner-extend-button-missav {
    background: #FE648E;
    padding:3px 10px;
    color:#fff;
}

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

}

.banner-container .btn-banner-extend.banner-extend-button-missav:hover {
    background: #D6557A;
    padding:3px 10px;
}


.banner-wrapper {
    width:100%;
    height: 474px;
    overflow:hidden;
}

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


.banner-container.w-1248.view .banner-wrapper {
    height:auto;
}

.banner-container.w-1248.view.extend .banner-wrapper {
    height:410px;
}



.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(3, 1fr);
}


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

.site-banner-long {
  width: 1200px;
  margin: 0 auto 5px;
}

.banner-container.w-1248 + .site-banner-long,
.site-banner-long.w-1248 {
  width: 1248px;
}

.site-banner-long > div {
  margin-bottom: 5px;
}

.site-banner-long .banner {
  display: block;
  background: #222;
}

.site-banner-long .banner a {
  display: block;
  width: 100%;
}

.site-banner-long .banner a img {
  display: block;
  max-width: 100%;
  width: 100%;
}

.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.view .banner-wrapper {
    height: 524px;
}

.banner-container.w-1248.view.extend .banner-wrapper {
    height: auto!important;
}

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

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


.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%);
}

.site-banner-long {
  width: 100%;
  margin: 0 auto 5px;
}

.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;
}

.banner-container.w-1248.view.extend  .btn-banner-extend {
    margin-top:5px;
}


}