.casebigbox{ width:100%; height:auto; display:flex; flex-direction:column; background-color:#1b1b1b; background-repeat:no-repeat; background-position:top center; background-size:cover; }
.boxinfo{display:flex; flex-wrap:wrap; padding:20px 0px 70px;}
.casetop{ margin-top:180px; }
.inmain{width:100%; display:flex;flex-direction:column;flex-wrap:wrap;justify-content:flex-start;padding:20px 0px;}
.case-main{ width:100%; display:flex; flex-direction:row; }
.four-l{ width:285px; height:570px; display:flex; flex-direction:column;background-color:#858585; background-repeat:no-repeat; background-size:auto; background-position:left top; padding:40px; border-radius:60px 0px 0px; justify-content:space-between; }
.four-l h1{ color:#e7c38c; font-weight:600; font-size:2.3rem; }
.four-l p{ color:#dfdfdf; font-size:1rem; line-height:1.6; padding:15px 0px; }
.four-l ul { list-style: none; padding-left: 0;margin:30px 0 15px; margin-bottom: auto;}
.four-l li {font-size: 1.4rem;line-height:1.5;color: #FFF; position: relative; padding:5px 0px 5px 15px;}
.four-l li::before {content: "·";position: absolute;left: 0;color: #ffffff;font-weight: bold;}
.btn{ width: 100%; height:auto; position:relative; z-index:1; padding:15px 0px; display: flex;flex-direction: row;}
.btn .case-swiper-button-prev{ width:50px; height:50px; background:url(../../uploads/svg-loaders/left.svg) center center no-repeat #dadada; background-size:45%; z-index: 10; margin-right: 20px;
-moz-border-radius: 360px;-webkit-border-radius: 360px;border-radius: 360px;}
.btn .case-swiper-button-next{ width:50px; height:50px; background:url(../../uploads/svg-loaders/right.svg) center center no-repeat #dadada; background-size:45%; z-index: 10;-moz-border-radius: 360px;-webkit-border-radius: 360px;border-radius: 360px;}
.btn .case-swiper-button-prev:hover,.btn .case-swiper-button-next:hover{ opacity:0.9; cursor:pointer; background-color:#e7c38c; }

.four-r{ width:calc(100% - 285px); height:600px; padding-left: 30px;  overflow:hidden;}
.swiper {width: 100%;height:100%;margin-left: auto;margin-right: auto; }
.swiper-slide {width:520px;height:calc(100% / 2);display: flex;justify-content: center;align-items: center; padding:0px 15px 30px;}
.case-item{ width:100%; height: 100%;display:flex; position:relative; border-radius: 60px 0px 0px; overflow:hidden; cursor:pointer; }
.case-item img{width:100%;}
.case-item:hover img{-webkit-transform: scale(1.05);-moz-transform: scale(1.05);transform: scale(1.05);}

.case-info{position:absolute;left: 0;bottom: 0; z-index: 1; width: 100%; overflow: hidden;}
.case-info h3{width:220px;color: #000; line-height: 1.5; font-size: 1.05rem;background-image:linear-gradient(to right,#e7c38c 45%, rgba(231,195,140, 0)); font-weight: normal; padding:10px 20px;}

.infobox{ width:100%; display:flex; flex-direction:row;}

/*ipad*/
@media (min-width: 768px) and (max-width: 991px) {

}

/* xs */
@media (max-width: 767px) {
.casebigbox{ background-position:center right 30%;}
.boxinfo{ padding:10px 0px 50px;}
.casetop{ margin-top:70px; }
.inmain{padding:20px 0px;}
.case-main{flex-direction:column-reverse;}
.four-l{ width:100%; height:auto; padding:25px; border-radius:0px; justify-content:flex-start; }
.four-l h1{font-size:1.5rem; }
.four-l p{line-height:1.5; padding:0px; }
.four-l ul {margin:10px 0;}
.four-l li {font-size: 1.2rem;padding:0px 0px 0px 10px;}
.btn{ padding:10px 0px;}
.btn .case-swiper-button-prev{ width:40px; height:40px;}
.btn .case-swiper-button-next{ width:40px; height:40px;}
.four-r{ width:100%; height:auto; padding-left:0px;}
.swiper {height:auto;margin-left: auto;margin-right: auto; }
.swiper-wrapper{ width:100%!important; }
.swiper-slide {width:100%; height:auto; padding:0px;}
.case-item{ height:auto; border-radius:0px;  }
.case-item img{ width:100%; }
.case-info h3{width:100%; padding:10px 15px;}

}

@media (max-width: 480px) {
}