:root {
--bobo-sidebanner-title-size: 36px;
}
.bobo-sidebanner {
height: 280px;
background-size: cover;
background-repeat: no-repeat;
}
.bobo-sidebanner .container {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.bobo-sidebanner .container h1,
.bobo-sidebanner .container h2 {
font-size: var(--bobo-sidebanner-title-size);
}
.bobo-sidebanner .container .left {
width: 100%;
text-align: left;
color: #fff;
}
.bobo-sidebanner .container .path p {
color: #fff;
}
.bobo-sidebanner .container .path p a {
color: #fff;
text-decoration: none;
}
.bobo-sidebanner .container .path p a:hover {
color: #fff;
opacity: 0.8;
}
@media screen and (max-width: 1500px) {
:root {
--bobo-sidebanner-title-size: 32px;
}
}
@media screen and (max-width: 1280px) {
:root {
--bobo-sidebanner-title-size: 28px;
}
}
@media screen and (max-width: 1200px) {
:root {
--bobo-sidebanner-title-size: 26px;
}
}
@media screen and (max-width: 992px) {
:root {
--bobo-sidebanner-title-size: 32px;
}
}
@media screen and (max-width: 768px) {
:root {
--bobo-sidebanner-title-size: 28px;
}
.bobo-sidebanner {
height: auto;
padding: 30px 0
}
}
@media screen and (max-width: 576px) {
:root {
--bobo-sidebanner-title-size: 24px;
}
}