#bd.about .card-bd, #bd.about .card-ft {padding: 20px}
#bd.about .introduce .txt {width: calc(100% - 500px); padding-right: 40px; height: 300px;position:relative;}
#bd.about .introduce .video {width: 500px; height: 300px; padding: 20px; position: relative;}
#bd.about .introduce .video:after {position: absolute; content: ""; width: 150px; height: 150px; z-index: 1; background-color: #d62c42; opacity: .8; top: 0; right: 0;}
#bd.about .introduce .video:before {position: absolute; content: ""; width: 150px; height: 150px; z-index: 1; background-color: #d62c42; opacity: .8; bottom: 0; left: 0;}
#bd.about .introduce .video .wd-u-img {position: relative; z-index: 2;}
#bd.about .introduce .video video, #bd.about .introduce .video .xgplayer {z-index: 10; position: relative;}
#bd.about .introduce .card-ft {border-top: 0 none;}
#bd.about .introduce .card-ft ul li {height: 40px; line-height: 40px; padding: 0 2em; border-radius: 2px; background: #f6f6f6; box-shadow: 0px 4px 8px 0px rgba(32, 32, 32, .6); border-right: 10px solid #bb0119; float: left; margin-right: 20px; margin-top:20px;}
#bd.about .introduce .card-ft ul li:hover {background-color: #d62c42;}
#bd.about .introduce .card-ft ul li:hover a {color: #fff;}
#bd.about .article-list li {width: 100%; padding: 1em; border-radius: 16px 0px 0px 16px;}
#bd.about .article-list li:first-child {margin-top: 0;}
#bd.about .article-list li .date{ width: 100px;}
#bd.about .article-list li .item-content{width: calc(100% - 100px); padding-right: 4em;}
.main-content .article-list li .item-content .item-hd a {color: #202020; font-size: 18px; line-height: 1.5;}
.main-content .article-list li .item-content .item-hd a:hover {color: #d62c42}
.main-content .article-list li .item-content .item-bd {line-height: 20px; height: 20px; overflow: hidden; margin-top: 10px;}
#bd.about .contact .location {width: 100%; height: 400px; background: no-repeat center; background-size: cover; position: relative;}
#bd.about .contact .location .qrcode {position: absolute; right: 50px; top: 120px; width: 150px;}
#bd.about .contact .location .qrcode .img {width: 150px; height: 150px;}
#bd.about .contact .location .qrcode .img:hover {transform: none;}
#bd.about .contact .txt .txt-content {line-height: 2; border-left: 6px solid #d62c42; padding-left: 1em;}
#bd.about .culture .img {width: 40%;}
#bd.about .culture .img:hover {transform: none;}
#bd.about .culture .img img {z-index: 10; top: 20px; left: 20px; bottom: 20px; right: 20px; height: calc(100% - 40px); width: calc(100% - 40px);}
#bd.about .culture .img:after {position: absolute; content: ""; width: 40%; height: 60%; bottom: 0; background-color: #202020; z-index: 5;}
#bd.about .culture .txt {position: absolute; height: 100%; width: 60%; }
#bd.about .culture .txt .title {color: #202020; font-size: 32px;line-height: 1;text-align: center;}
#bd.about .culture .txt .title span {color: #d62c42; font-size: 32px; margin-left: -.25em;}
#bd.about .culture .txt .content {color: #202020;font-size: 16px;line-height: 1.5;text-align: center; margin-top: 20px;}
#bd.about .culture .txt .slogan {padding-top: 20px; height: 40%;}
#bd.about .culture .txt .slide {background-color: #d62c42; height: 60%; position: relative; overflow: hidden;}
#bd.about .culture .txt .slide .hd {background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .7) 100%); position: absolute; height: 400px; width: 400px; border-radius: 50%; margin-left: -200px; top: 20px;}
#bd.about .culture .txt .slide .hd ul {position: absolute;right: 0;top: 0;left: 50%; bottom: 50%;}
#bd.about .culture .txt .slide .hd ul li {height: 50px; line-height: 50px; font-size: 18px; /*color: rgba(255, 255, 255, .5); */ color: #fff; position: relative; margin-left: 7em; margin-top: -4px; width: 100%; cursor: pointer;}
#bd.about .culture .txt .slide .hd ul li:nth-child(2) {margin-left: 10em;}
#bd.about .culture .txt .slide .hd ul li:nth-child(3) {margin-left: 12em;}
#bd.about .culture .txt .slide .hd ul li.active {color: #fff;}
#bd.about .culture .txt .slide .hd ul li:before {position: absolute; content: ""; width: 50px; height: 50px; margin-left: -60px; background: url("/fileDir/boimc/resource/cms/2025/04/img_pc_site/icon-about-culture-01.png"); no-repeat center; background-size: 100%;}
#bd.about .culture .txt .slide .hd ul li.active:before { background-image: url("/fileDir/boimc/resource/cms/2025/04/img_pc_site/icon-about-culture-11.png"); transform: scale(1.05); -ms-translate: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); }
#bd.about .culture .txt .slide .hd ul li:nth-child(2)::before {background-image: url("/fileDir/boimc/resource/cms/2025/04/img_pc_site/icon-about-culture-02.png");}
#bd.about .culture .txt .slide .hd ul li.active:nth-child(2)::before {background-image: url("/fileDir/boimc/resource/cms/2025/04/img_pc_site/icon-about-culture-12.png");}
#bd.about .culture .txt .slide .hd ul li:nth-child(3)::before {background-image: url("/fileDir/boimc/resource/cms/2025/04/img_pc_site/icon-about-culture-03.png");}
#bd.about .culture .txt .slide .hd ul li.active:nth-child(3)::before {background-image: url("/fileDir/boimc/resource/cms/2025/04/img_pc_site/icon-about-culture-13.png");}
#bd.about .culture .txt .slide .bd {position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin-left: 380px;}
#bd.about .culture .txt .slide .bd .pane {height: 100%;}
#bd.about .culture .txt .slide .bd .pane ul {display: flex; flex-direction: column; justify-content: space-evenly; height: 100%; padding: 30px 0;}
#bd.about .culture .txt .slide .bd .pane ul li {color: #fff; font-size: 16px; padding-left: 30px; height: 30px; line-height: 30px; position: relative;}
#bd.about .culture .txt .slide .bd .pane ul li:before {position: absolute; content: "◆"; font-size: 30px; color: #fff; margin-left: -1em; height: 30px; line-height: 30px;}
.layui-tab-item .wd-m-card + .wd-m-card {display: none;}
@media all and (max-width: 1200px){
  #bd.about .culture .txt .slide .hd {width: 200px; height: 200px; margin-left: -100px; top: 50px;}
  #bd.about .culture .txt .slide .hd ul {left: 25%; top: -20px;}
  #bd.about .culture .txt .slide .hd ul li {height: 30px; line-height: 30px;}
  #bd.about .culture .txt .slide .bd {margin-left: 240px;}
  #bd.about .culture .txt .slide .hd ul li:nth-child(2) {margin-left: 8em;}
  #bd.about .culture .txt .slide .hd ul li:nth-child(3) {margin-left: 9em;}
  #bd.about .culture .txt .title, #bd.about .culture .txt .title span {font-size: 24px;}
  #bd.about .culture .txt .content {margin-top: 10px;}
}
@media all and (max-width: 767px){
  #bd.about .introduce .card-bd {text-align: center;}
  #bd.about .introduce .txt {width: 100%;padding-right: 0;}
  #bd.about .introduce .video {margin-top: 20px; display: inline-block; float: none; max-width: 100%; aspect-ratio: 5 / 3; height: auto;}
  #bd.about .introduce .card-ft ul li {margin: .5em 20px .5em 0;}
  #bd.about .culture .img {width: 100%;}
  #bd.about .culture .img::after {height: 0;}
  #bd.about .culture .txt {width: 100%; height: 300px;  position: relative;}
  #bd.about .culture .txt .slide .hd {width: 300px; height: 300px; margin-left: -150px; top: 50px;}
  #bd.about .culture .txt .slide .hd ul {left: 45%; top: 0;}
  #bd.about .culture .txt .slide .bd {margin-left: 300px;}
  #bd.about .article-list li .item-content {width: 100%; padding-right: 0;}
  #bd.about .article-list li .date {margin-top: 1em;}
}
@media all and (max-width: 640px){
  #bd.about .culture .txt .slide .hd {width: 200px; height: 200px; margin-left: -100px; top: 80px;}
  #bd.about .culture .txt .slide .hd ul {left: 25%; top: -20px;}
  #bd.about .culture .txt .slide .bd {margin-left: 240px;}
}
@media all and (max-width: 410px){
  #bd.about .culture .txt .slide .hd ul {left: 20%;}
  #bd.about .culture .txt .slide .bd {margin-left: 220px;}
  #bd.about .culture .txt .slide .bd .pane ul li {padding-left: 0;}
  #bd.about .culture .txt .slide .bd .pane ul li::before {display: none;}
}