.top-banner .wrapper img {
position: relative;
height: 550px;
object-fit: cover;
width: 100%;
}
.section.section-banner {
overflow: hidden;
}
.section.section-banner .top-banner {
position: relative;
}
.section.section-banner .top-banner--mobile {
display: none;
}
.section.section-banner .banner-carousel-wrap {
position: relative;
overflow: hidden;
}
.section.section-banner .top-banner .swiper,
.section.section-banner .top-banner .swiper-wrapper,
.section.section-banner .top-banner .swiper-slide,
.section.section-banner .top-banner .image {
height: 100%;
}
.section.section-banner .top-banner .swiper-slide {
overflow: hidden;
}
.section.section-banner .top-banner .swiper-button-next {
right: 0;
}
.section.section-banner .top-banner .swiper-button-prev {
left: 0;
}
.section.section-banner .top-banner .swiper-button-next,
.section.section-banner .top-banner .swiper-button-prev {
z-index: 3;
width: 40px;
height: 40px;
border: 1px solid rgba(255, 255, 255, 0.8);
background: rgba(0, 0, 0, 0.2);
display: flex;
padding: 0;
}
.section.section-banner .top-banner .swiper-button-next:before,
.section.section-banner .top-banner .swiper-button-prev:before {
background: url(//jebgroup.cn/wp-content/themes/jeb/assets/images/arrow-button-green.svg) center no-repeat;
background-size: 9px;
width: 100%;
height: 100%;
}
.section.section-banner .top-banner .swiper-button-next:hover,
.section.section-banner .top-banner .swiper-button-prev:hover,
.section.section-banner .top-banner .swiper-button-next:focus,
.section.section-banner .top-banner .swiper-button-prev:focus {
background: rgba(255, 255, 255, 1);
border-color: #878B9A;
}
.section.section-banner .top-banner .swiper-button-next:hover:before,
.section.section-banner .top-banner .swiper-button-prev:hover:before,
.section.section-banner .top-banner .swiper-button-next:focus:before,
.section.section-banner .top-banner .swiper-button-prev:focus:before {
background-image: url(//jebgroup.cn/wp-content/themes/jeb/assets/images/arrow-button-grey.svg);
}
.section.section-banner .content-banner {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
text-align: left;
left: 50%;
width: 100%;
z-index: 2;
display: block !important;
background-color: transparent !important;
}
.section.section-banner .logo-banner {
position: absolute;
bottom: 45px;
transform: translatex(-50%);
text-align: right;
left: 50%;
width: 100%;
z-index: 2;
display: flex;
flex-direction: row;
justify-content: flex-end;
max-height: 59px;
}
.section.section-banner .logo-banner .logo-image {
margin-left: 10px;
}
.section.section-banner .breadcrumbs {
margin-bottom: 40px;
margin-top: 84px;
}
.section.section-banner .container h1 {
color: #fff;
max-width: 950px;
margin-bottom: 29px;
text-transform: none;
line-height: 111%;
} .section.section-banner .container-content {
position: relative;
}
.section.section-banner .container .content {
max-width: 625px;
}
.section.section-banner .container .content p {
color: #fff;
line-height: 23px;
font-size: 17px;
}
.section.section-banner .container .link-btn {
margin-top: 30px;
display: inline-flex;
gap: 16px;
}
.section.section-banner .breadcrumbs span,
.section.section-banner .breadcrumbs-item a {
font-family: var(--font-body-text);
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 17px;
letter-spacing: 0.01em;
color: #E3E3E3;
text-transform: capitalize;
}
.section.section-banner .breadcrumbs-item a:hover {
text-decoration: underline;
}
.top-banner:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
z-index: 1;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
transform: matrix(1, 0, 0, 1, 0, 0);
}
.section-banner-slide .slide-background:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
z-index: 1;
}
.section-banner-slide .link-btn .button {
height: 36px;
line-height: 24px;
display: inline-flex;
align-items: center;
padding: 5px 39px;
}
.section-banner-slide .button {
background: var(--green-color);
border-color: var(--green-color);
color: #fff;
}
.section-banner-slide .button:hover {
background: #fff;
border-color: #fff;
color: var(--green-color);
}
.section-banner-slide .button.btn-white {
background: #fff;
border-color: #fff;
color: var(--green-color);
}
.section-banner-slide .button.btn-white:hover {
background: var(--green-color);
border-color: var(--green-color);
color: #fff;
}
.section-banner-slide .top-banner .image .banner-slider-layer {
position: absolute;
height: auto;
width: 51%;
right: -11%;
top: 9%;
transform: translate(5%, -5%);
transition: transform 0.8s ease-in-out;
will-change: transform;
z-index: 2;
opacity: 0;
}
.section-banner-slide .top-banner .swiper-slide-active .image .banner-slider-layer {
opacity: 0.3;
transform: translate(0, 0);
}
.section-banner-slide .sub-title:before {
content: '';
background: #FFFFFF;
width: 50px;
height: 3px;
display: block;
margin-bottom: 15px;
}
.section-banner-slide .sub-title {
font-weight: 600;
font-size: 24px;
line-height: 32px;
letter-spacing: 0%;
color: #ffffff;
margin-top: 20px;
}
.section-banner-slide .top-banner .image img {
object-fit: cover;
}
@media (min-width: 768px) {
.section.section-banner .top-banner--desktop {
display: block;
}
.section.section-banner .top-banner--mobile {
display: none;
}
.top-banner .small .wrapper img {
height: 500px;
}
.top-banner .normal .wrapper img {
height: 550px;
}
.section-banner-slide .top-banner .image img,
.top-banner .big .wrapper img {
height: 780px;
width: 100%;
}
}
@media (max-width:992px) {
.top-banner .wrapper img {
height: 580px;
} .section.section-banner .top-banner .swiper-button-next,
.section.section-banner .top-banner .swiper-button-prev {
width: 46px;
height: 46px;
}
}
@media (max-width: 767px) {
.section.section-banner .top-banner--desktop {
display: none;
}
.section.section-banner .top-banner--mobile {
display: block;
}
.section.section-banner .logo-banner {
max-height: 50px;
}
.top-banner .mb_small .wrapper img {
height: 312px;
}
.top-banner .mb_normal .wrapper img {
height: 500px;
}
.top-banner .mb_big .wrapper img {
height: 550px;
}
.section-banner-slide .top-banner .image img {
height: 700px;
}
.section-banner-slide .top-banner .image .banner-slider-layer {
display: none;
}
.section.section-banner .content-banner {
top: calc(50% - -17px);
}
.section.section-banner .breadcrumbs {
display: none;
}
.section.section-banner .container h1 {
margin-bottom: 0;
}
.section.section-banner .container .link-btn {
margin-top: 15px;
}
.section.section-banner .logo-banner .logo-image img {
height: 100%;
max-height: 50px;
object-fit: cover;
}
.section.section-banner .container .content {
max-width: 100%;
display: none;
}
.section.section-banner .top-banner .swiper-button-next,
.section.section-banner .top-banner .swiper-button-prev {
width: 40px;
height: 40px;
}
.section.section-banner .top-banner .swiper-button-prev {
right: 46px;
}
.section.section-banner.section-banner-slide .container .content,
.section.section-banner.section-banner-slide .breadcrumbs {
display: block;
}
.section.section-banner.section-banner-slide .breadcrumbs {
margin-top: -65px;
margin-bottom: 15px;
}
.section.section-banner.section-banner-slide .container h1 {
line-height: 120%;
margin-bottom: 16px;
}
.section.section-banner.section-banner-slide .container .content {
font-size: 15px;
}
.section.section-banner.section-banner-slide .container .content p,
.section.section-banner.section-banner-slide .container .content {
font-size: 15px;
line-height: 22px;
}
.section.section-banner.section-banner-slide .container .link-btn {
flex-direction: column;
justify-content: flex-start;
margin-top: 17px;
letter-spacing: 2%;
}
.section-banner-slide .link-btn .button {
width: 100%;
text-align: center;
justify-content: center;
padding: 5px 29.5px;
font-size: 16px;
line-height: 24px;
}
.section.section-banner.section-banner-slide .top-banner .swiper-button-next,
.section.section-banner.section-banner-slide .top-banner .swiper-button-prev {
position: absolute;
bottom: 9.6%;
left: 24px;
top: auto;
}
.section.section-banner.section-banner-slide .top-banner .swiper-button-next {
left: 90px;
}
.section-banner-slide .sub-title {
font-size: 17px;
line-height: 23px;
}
}