@charset "utf-8";

.m-ba-230112s {line-height:0; font-size:0; position:relative;}
.m-ba-230112s .skin-header {display: flex;}

.m-ba-230112s .title {width: 100%; margin-bottom: 12px;}
.m-ba-230112s .title p {font-weight: 400; line-height: 1.2; color: #000000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; word-break:break-all;}
.m-ba-230112s .title img {width: 100%;}

.m-ba-230112s .wrap {overflow:hidden;}

.m-ba-230112s ul {position:relative; width: 100%;}

.m-ba-230112s li {width: 100%; position:relative; display: flex; flex-direction: column; align-items: center;}
.m-ba-230112s li:last-child {margin-right: 0px !important;}

.m-ba-230112s li .link {width: 100%; height: 100%; position: absolute; z-index: 2;}

.m-ba-230112s li .banner-caption {position: absolute; width: 80%; bottom: 90px;}

.m-ba-230112s li .image-wrap {position: relative; width: 100%; background-color: #000000;}
.m-ba-230112s li .image-wrap img {width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover; opacity: 0.7;}
.m-ba-230112s .swiper-slide.not .image-wrap {display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.2); opacity: 0.5;}
.m-ba-230112s li .image-wrap .no-image {width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: #CCCCCC;}

.m-ba-230112s li .banner-title {width: 100%;}
.m-ba-230112s li .banner-title p {font-weight: 700; font-size: 27px; line-height: 30px; color: #FFFFFF; letter-spacing: -0.05em;}
.m-ba-230112s li .banner-title p {overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.m-ba-230112s li .banner-caption.short-type .banner-title p {-webkit-line-clamp: 1;}

.m-ba-230112s li .banner-content {width: 100%;}
.m-ba-230112s li .banner-content {margin-top: 8px;}
.m-ba-230112s li .banner-content p {font-weight: 400; font-size: 19px; line-height: 25px; color: #FFFFFF; letter-spacing: -0.05em;}
.m-ba-230112s li .banner-content p {overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.m-ba-230112s li .banner-caption.short-type .banner-content p {-webkit-line-clamp: 1;}

.m-ba-230112s .banner-subimg {width: 80%; height: 50%; position: absolute; bottom: 90px; display: flex; align-items: flex-end;}
.m-ba-230112s .banner-subimg img {max-width: 100%; max-height: 100%;}

.m-ba-230112s .swiper-pagination {width: 160px; height: 2px; position: relative;}
.m-ba-230112s .swiper-pagination.hide {opacity: 0;}
.m-ba-230112s .swiper-pagination-progressbar {background-color: #FFFFFF;}
.m-ba-230112s .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background-color: #000000;}

.m-ba-230112s .banner-tools {position: absolute; display: flex; justify-content: space-between; align-items: center; width: 85%; height: 40px; bottom: 20px; left: 10%;}
.m-ba-230112s .banner-tools__btn {display: flex; z-index: 2;}
.m-ba-230112s .banner-tools__stop-btn {width: 40px; height: 40px; justify-content: center; align-items: center; display: none; cursor: pointer;}
.m-ba-230112s .banner-tools__stop-btn.active {display: flex;}
.m-ba-230112s .banner-tools__play-btn {width: 40px; height: 40px; justify-content: center; align-items: center; display: none; cursor: pointer;}
.m-ba-230112s .banner-tools__play-btn.active {display: flex;}
.m-ba-230112s .banner-tools__layer-btn {width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; cursor: pointer;}

.m-ba-230112s.side-layer {width: 100%; height: calc(100% - 30px); position: fixed; top: 0; background-color: #FFFFFF; z-index: 1000; padding-bottom: 30px;}
.m-ba-230112s.side-layer {transform: translate3d(100%,0,0); transition: transform .3s; animation-timing-function: linear;}
.m-ba-230112s.side-layer__show {transform: translate3d(0,0,0);}

.m-ba-230112s.side-layer .side-layer__header {width: 100%; height: 40px; display: flex; justify-content: space-between;}
.m-ba-230112s.side-layer .side-layer__title {width: calc(100% - 56px); display: flex; align-items: center; margin-left: 16px;}
.m-ba-230112s.side-layer .side-layer__title p {font-weight: 700; font-size: 20px; line-height: 29px; color: #000000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; word-break:break-all;}
.m-ba-230112s.side-layer .side-layer__close {width: 40px; height: 40px; display: flex; justify-content: center; align-items: center;}

.m-ba-230112s.side-layer .side-layer__body {width: calc(100% - 32px); max-height: calc(100% - 56px); display: flex; justify-content: space-between; flex-wrap: wrap; padding: 0 16px 8px 16px; overflow: auto;}
.m-ba-230112s.side-layer .side-layer__body .item-wrap {position: relative; width: calc((100% - 12px) / 2); margin: 8px 0;}

.m-ba-230112s.side-layer .side-layer__body .item-wrap__image {position: relative; width: 100%;}
.m-ba-230112s.side-layer .side-layer__body .item-wrap__image img {width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover; border-radius: 5px;}
.m-ba-230112s.side-layer .side-layer__body .item-wrap__image .no-image {position: absolute; width: 100%; height: 100%; top: 0; display: flex; justify-content: center; align-items: center; background: #ccc;}

.m-ba-230112s.side-layer .side-layer__body .item-wrap__title {margin-top: 8px;}
.m-ba-230112s.side-layer .side-layer__body .item-wrap__title p {font-weight: 700; font-size: 15px; line-height: 22px; letter-spacing: -0.05em; color: #000000;}
.m-ba-230112s.side-layer .side-layer__body .item-wrap__title p {overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.m-ba-230112s.side-layer .side-layer__body .item-wrap__title p br {display: none;}

.m-ba-230112s.side-layer .side-layer__body .item-wrap__content {margin-top: 4px;}
.m-ba-230112s.side-layer .side-layer__body .item-wrap__content p {font-weight: 400; font-size: 14px; line-height: 20px; letter-spacing: -0.05em; color: #666666;}
.m-ba-230112s.side-layer .side-layer__body .item-wrap__content p {overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.m-ba-230112s.side-layer .side-layer__body .item-wrap__content p br {display: none;}

.m-ba-230112s.side-layer .side-layer__body .link {width: 100%; height: 100%; position: absolute; z-index: 2;}