.brandbg {width: 100%;height: auto;background-image: url(../images/brandBg.png);background-repeat: no-repeat;margin-top: 120px;padding: 0 12%;overflow: hidden;background-size: cover;background-position: center;}
.brandbg .top {height: 180px;display: flex;justify-content: space-between;align-items: center;}
.brandbg .top h1 {font-size: 56px;color: #333333;}
.brandbg .top .nav {overflow-x: auto;white-space: nowrap;display: flex;align-items: center;justify-content: space-between;}
.brandbg .top .nav::-webkit-scrollbar {height: 0;}
.brandbg .top .nav a {margin-left: 68px;font-size: 20px;color: #333333;display: flex;flex-direction: column;align-items: center;line-height: 36px;}
.brandbg .top .nav a:hover {color: #E62129;}
.brandbg .top .nav a::after {content: '';height: 2px;width: 100%;background-color:transparent;margin-top: 20px;}
.brandbg .top .nav a.active::after {background-color: #E62129;}
.brandbg .top .nav a.active {color: #E62129;}
.brandbg .adv {height: 400px;width: 100%;}
.brandbg .adv img {height: 100%;width: 100%;object-fit: cover;}
.brandbg .introMain {display: flex;justify-content: space-between;padding: 80px 0;}
.brandbg .introMain h3 {font-size: 36px;line-height: 39px;color: #333333;font-weight: bold;}
.brandbg .introMain .right {flex: 1;margin-left: 12%;}
.brandbg .introMain .right .ui-content {min-height: auto;}
/* .brandbg .introMain p {font-size: 18px;line-height   : 33px;color: #333333;flex: 1;margin-left: 12%;} */

.brandMain {padding: 65px 12%;}
.brandMain  .brandGrid {display: grid;grid-template-columns: repeat(3, 1fr); /* 定义三列 */gap: 30px; /* 行间距和列间距均为30px */margin-bottom: 30px;}
.brandMain  .brandGrid a {height: 300px; overflow: hidden;position: relative;}
.brandMain  .brandGrid a img {width: 100%;height: 100%;object-fit: cover;transition: all 1.0s;}
.brandMain  .brandGrid a:hover img {transform: scale(1.2);}
.brandMain  .brandGrid a h4 {position: absolute;height: 60px;bottom: 0;line-height: 60px;left: 0;background-color: rgba(0, 0, 0, 0.5);width: 100%;text-align: center;font-size: 18px;color: #fff;padding: 0 15px;}

/* 对于小屏幕设备（手机等） */
@media only screen and (max-width: 600px) {

    .brandbg {margin-top: 64px;padding: 0 4%;}
    .brandbg .top {height: 120px;flex-direction: column;justify-content: space-around;}
    .brandbg .top h1 {font-size: 24px;color: #333333;}
    .brandbg .top .nav {width: 100%;}
    .brandbg .top .nav a {margin-left: 15px;font-size: 15px;}
    .brandbg .top .nav a:first-child {margin-left: 0px;}
    .brandbg .top .nav a::after {margin-top: 10px;}
    .brandbg .adv {height: 200px;}
    .brandbg .introMain {padding: 20px 0;flex-direction: column;}
    .brandbg .introMain .right {margin-left: 0;font-size: 14px;}
    .brandbg .introMain h3 {margin-bottom: 15px;font-size: 18px;line-height: 20px;}

    .brandMain {padding: 30px 4%;}
    .brandMain .brandGrid {display: grid;grid-template-columns: repeat(2, 1fr);gap: 15px;margin-bottom: 15px;}
    .brandMain .brandGrid a {height: 150px;}
    .brandMain .brandGrid a h4 {height: 30px;line-height: 30px;font-size: 14px;}

    

}
@media only screen and (min-width: 601px) and (max-width: 1199px) {

    .brandbg {margin-top: 98px;padding: 0 4%;}
    .brandbg .top {height: 120px;}
    .brandbg .top h1 {font-size: 28px;color: #333333;}
    .brandbg .top .nav a {margin-left: 20px;font-size: 15px;}
    .brandbg .top .nav a:first-child {margin-left: 0px;}
    .brandbg .top .nav a::after {margin-top: 10px;}
    .brandbg .adv {height: 300px;}
    .brandbg .introMain {padding: 40px 0;flex-direction: column;}
    .brandbg .introMain .right {margin-left: 0;font-size: 16px;}
    .brandbg .introMain h3 {margin-bottom: 15px;font-size: 20px;line-height: 20px;}

    .brandMain {padding: 30px 4%;}



}

@media only screen and (min-width: 1200px) and (max-width: 1440px) {

    .brandbg {margin-top: 98px;}
    .brandbg .introMain {padding: 60px 0;}
    .brandbg .introMain h3 {font-size: 30px;line-height: 40px;}
    .brandbg .introMain p {font-size: 16px;}


}