@charset "UTF-8";

.officeWrap {}
.officeWrap .inner{display:flex;margin-left: calc((100% - 1600px) / 2);}
.officeWrap .left-title{padding-right:35px;padding-top:25px;width: 330px; flex-shrink: 0;}
.officeWrap .left-title > strong{font-size:50px;font-family: 'S-CoreDream-6Bold';display:block;letter-spacing:-1px;margin-bottom:25px;line-height: 1.5;}
.officeWrap .left-title > p{font-size:18px;color:#555;font-family: 'S-CoreDream-4Reulgar';line-height: 1.5;}
.officeWrap .left-title > p i{display:block;line-height:1.6;}

.officeWrap .right-list{position: relative;padding-left: 50px;}
.officeWrap .right-list .office-list{}
.officeWrap .right-list .slick-list{padding-left: 50px;}
.officeWrap .right-list .office-list .item{}
.officeWrap .right-list > ul{}
.officeWrap .right-list > ul > li{display:inline-block;}

.officeWrap .right-list .swiper-slide{width:450px;}
.officeWrap .right-list .wrap{width:450px;border-radius:25px;overflow:hidden;position:relative;}
.officeWrap .right-list .wrap .img{position:absolute;left:0;top:0;height: 370px;}
.officeWrap .right-list .wrap .img img{width:100%;height:100%;object-fit:cover;object-position:center top;filter:brightness(0.4);}
.officeWrap .right-list .wrap .text{position:relative;z-index:1;padding:40px;height: 370px;display: flex;flex-direction: column;justify-content: center;align-items: center;transition:all ease .5s;}
.officeWrap .right-list .wrap .text > strong{font-size: 36px;color:#fff;font-family: 'S-CoreDream-6Bold';display: block;transition:all ease .5s;}
.officeWrap .right-list .wrap .text > ul > li{font-size:17px;color:#fff;font-family: 'S-CoreDream-4Reulgar';height:0;overflow:hidden;transition:all ease .5s;opacity:0;}
.officeWrap .right-list .wrap .text > ul > li + li{margin-top:3px;}
.officeWrap .right-list .wrap .text a{color:#fff;width:150px;border:2px solid #fff;font-size:15px;display:flex;border-radius:100px;align-items: center;justify-content: center;position: absolute;left: 40px;bottom: 40px;height:0;overflow:hidden;transition:all ease .5s;opacity:0;}
.officeWrap .right-list .wrap .text a.map-btn{display:none;}
.officeWrap .right-list .arrows button{width:70px;height:70px;border-radius:50%;z-index:1;text-indent:-9999px;top:50%;margin-top:-15px;transition:all ease .5s;}
.officeWrap .right-list .prev{position:absolute;left:0;top:0;background:#aeaeae url('./../images/office-prev.png') no-repeat center;}
.officeWrap .right-list .next{position:absolute;left:570px;top:0;background:#aeaeae url('./../images/office-next.png') no-repeat center;}
.officeWrap .right-list .prev:hover{background:#005bac url('./../images/office-prev.png') no-repeat center;}
.officeWrap .right-list .next:hover{background:#005bac url('./../images/office-next.png') no-repeat center;}

.officeWrap .right-list .swiper-slide-prev{opacity:0;}

.officeWrap .right-list .slick-current  .wrap .text{display:flex;justify-content: flex-start;align-items: flex-start;}
.officeWrap .right-list .slick-current  .wrap .text > strong{font-size:30px;}
.officeWrap .right-list .slick-current  .wrap .text > ul{padding-top: 15px;border-top:1px solid #fff;margin-top: 20px;}
.officeWrap .right-list .slick-current  .wrap .text > ul > li{opacity:1;height:25px;}
.officeWrap .right-list .slick-current  .wrap .text > a{height:50px;opacity:1;}
.officeWrap .right-list .slick-current  .wrap .text > a:hover{background:#fff;color:#000;}
.officeWrap .right-list > ul .slick-slide {margin-right: 50px;transition: margin 0.15s ease;}
.officeWrap .right-list > ul .slick-current {margin-right: 145px;}
.officeWrap .right-list .slick-track{padding-top:50px;transition: all ease .25s;}
.officeWrap .right-list > ul .slick-current + li{position:relative;top:-50px}

@media (min-width: 1921px) {
  .office .right-list{max-width: 1600px;overflow: visible;}
  .office .right-list .swiper-slide-duplicate-active,
  .office .right-list .swiper-slide-duplicate-next{opacity:0;}
}

@media (max-width: 1600px) {
  .office{padding-left:20px;}
  .officeWrap .inner{margin-left:25px;}
}
@media (max-width: 1280px) {
  #multipleDiv_temp-shop02_95{padding:80px 0;}
  .officeWrap .right-list .wrap .text > strong{font-size:24px;}
  .officeWrap .left-title > strong{font-size:34px;margin-bottom:10px;}
  .officeWrap .left-title > p{font-size: 16px;}
  .officeWrap .left-title > p i{display:inline-block;}
  .officeWrap .left-title{padding-top:10px;width: 230px;}
  .officeWrap .right-list{width: calc(100% - 230px);padding-top: 45px;padding-left: 25px;}
  .officeWrap .right-list .wrap{width:300px;height:240px;border-radius:20px;}
  .officeWrap .right-list .arrows button{width:50px;height:50px;background-size:20px !important;margin-top: -5px;}
  .officeWrap .right-list .next{left:400px;}
  .officeWrap .right-list .slick-slide{width:300px;}
  .officeWrap .right-list .wrap .text{padding: 30px 25px;border-radius:20px;height: 240px;}
  .officeWrap .right-list .slick-active .wrap .text > strong{font-size:18px;}
  .officeWrap .right-list .slick-active .wrap .text > ul{padding-top:10px;margin-top:10px;}
  .officeWrap .right-list .wrap .text > ul > li{font-size:12px;}
  .officeWrap .right-list .slick-active .wrap .text > ul > li{height:18px;}
  .officeWrap .right-list .wrap .text a{width:100px;left:20px;font-size:12px;bottom:20px;}
  .officeWrap .right-list .slick-active .wrap .text > a{height:35px;}
  .officeWrap .right-list > ul .slick-current{margin-right:100px;}
}
@media (max-width: 767px) {
  .officeWrap{padding-right:20px;}
  .officeWrap .inner{flex-wrap:wrap;}
  .officeWrap .left-title{width:100%;text-align:center;}
  .officeWrap .left-title > strong{font-size:36px;}
  .officeWrap .left-title > p{font-size: 16px;color: #222;}
  .officeWrap .right-list{width: 320px;padding-left:0;overflow: visible;}
  .officeWrap .right-list .slick-slide{width:320px;}
  .officeWrap .right-list .wrap{width:320px;}
  .officeWrap .right-list .prev{left:-60px;}
  .officeWrap .right-list .next{left:unset;right:-60px;}
  .officeWrap .right-list .slick-active .wrap .text > strong{font-size:21px;}
  .officeWrap .right-list .slick-active .wrap .text > ul > li{font-size:15px;height:22px;}
  .officeWrap .right-list > ul .slick-current{margin-right: 50px;}
  .officeWrap .right-list .slick-list{padding-left:0;}
  .officeWrap .right-list .slick-track{padding-top:0;}
}
