﻿.g-footer { margin-top: -8rem; padding-top: 8rem; }

/*#region ====倒角背景====*/

.chamfer { position: relative; z-index: 1; margin-top: 3.75rem; padding-top: 5.3125rem; color: #fff; overflow: hidden; }
.chamfer .bg { position: absolute; left: 50%; top: 0; margin-left: -60rem; width: 120rem; height: 100%; z-index: -1; background-repeat: no-repeat; background-position: center top; background-size: cover; /*-webkit-clip-path: polygon(50% 4.0625rem, 100% 0, 100% calc(100% - 4.0625rem), 50% 100%, 0 calc(100% - 4.0625rem), 0 0); clip-path: polygon(50% 4.0625rem, 100% 0, 100% calc(100% - 4.0625rem), 50% 100%, 0 calc(100% - 4.0625rem), 0 0);*/ }
.chamfer .cent { }
.chamfer .bg::before { content:""; position: absolute; top: 0; left: 0; width: 100%; height: 0; border: solid 4.0625rem #fff; border-left: solid 60rem transparent; border-right: solid 60rem transparent; border-bottom: none; }
.chamfer .bg::after { content:""; position: absolute; bottom: 0; left: 0; width: 100%; height: 0; border: solid 4.0625rem transparent; border-left: solid 60rem #fff; border-right: solid 60rem #fff; border-bottom: none; }
@media (max-width: 576px) {
    .chamfer { margin-top: 0; padding-top: 8.2rem; }
    .chamfer .bg::before, .chamfer .bg::after { border-top-width: 6.85rem; }
    /*.chamfer .bg { -webkit-clip-path: polygon(50% 15%, 100% 0, 100% 85%, 50% 100%, 0 85%, 0 0); clip-path: polygon(50% 6.85rem, 100% 0, 100% calc(100% - 6.85rem), 50% 100%, 0 calc(100% - 6.85rem), 0 0); }*/
}

/*#endregion*/

/*#region ====Banner====*/

.banner .carousel-item { max-height: 53.25rem; overflow: hidden; }
.banner .carousel-item > a { display: block; overflow: hidden; }
.banner .carousel-item .img { width: 100%; }
.banner .carousel-indicators { margin-bottom: 2rem; }
.banner .carousel-indicators li { width: 2.5rem; height: .4rem; margin-left: .2rem; margin-right: .2rem; }

@media (max-width: 992px) {
    .banner .carousel-item .img { width: 120vw; margin-left: -10vw; }
    .banner .carousel-indicators { margin-bottom: .5rem; }
    .banner .carousel-indicators li { width: 2rem; height: .2rem; }
}

/*#endregion*/

/*#region ====产品中心====*/

.prod { margin-top: 3rem; }
.prod-content { margin-top: 3rem; }
.prod-list { display: flex; }
.prod-list-item { position: relative; cursor: pointer; }
.prod-more { display: block; margin: 3rem auto 0; padding: 0; height: 3.125rem; line-height: 3.125rem; width: 20rem; background-color: #000; border-radius: 0; border: none; }
.prod-more:hover { background-color: #d0111b; }

@media (max-width: 1200px) {
    .prod-list { margin-top: -1rem; justify-content: space-between; }
    .prod-list-item { margin-top: 1rem; width: calc(25% - .66666rem); }
    .prod-list-item .bg-img { display: block; width: 100%; height: auto; border-radius: .5rem; }
    .prod-list-item .fg-name { display: block; position: absolute; left: 0; top: 50%; margin-top: -1.625rem; width: 100%; height: 3.25rem; line-height: 3.25rem; font-size: 1rem; font-weight: 400; text-align: center; background-color: rgba(0, 0, 0, .6); color: #fff; overflow: hidden; text-decoration: none; }
    .prod-list-item .fg { display: none; }
    .prod-list-item .fg-name:hover { background-color: #d0111b; color: #fff; }
}

@media (max-width: 576px) {
    .prod-list { flex-wrap: wrap; }
    .prod-list-item { width: calc(50% - 0.5rem); }
}

@media (min-width: 1200px) {
    .prod-list-item { height: 25.9375rem; overflow: hidden; flex: 1; width: 25%; transition: width .5s ease-out; }
    .prod-list-item .bg-img { display: block; margin: 0 auto; height: 100%; }
    .prod-list-item .fg-name { display: block; position: absolute; left: 0; top: 50%; margin-top: -1.875rem; width: 100%; height: 3.75rem; line-height: 3.75rem; font-size: 1.125rem; font-weight: 400; text-align: center; background-color: rgba(0, 0, 0, .6); color: #fff; overflow: hidden; text-decoration: none; }
    .prod-list-item .fg { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 2.25rem 2rem; background-color: rgba(0, 0, 0, .8); color: #fff; }
    .prod-list-item .fg h4 { font-size: 1.125rem; padding-bottom: .375rem; }
    .prod-list-item .fg .desc { font-size: .875rem; color: rgba(255, 255, 255, .9); }
    .prod-list-item .fg .btn { margin-top: 2rem; display: block; line-height: 2.5rem; width: 7.5rem; text-align: center; padding: 0; border-radius: 0; font-size: .875rem; border: none; background-color: #d0111b; color: #fff; }
    .prod-list-item .fg .btn:hover { border-color: #db2932; background-color: #db2932; }
    .prod-list-item.on { width: 32%; flex: none; }
    .prod-list-item.on .fg-name { display: none; }
    .prod-list-item.on .fg { display: block; }
}

/*#endregion*/

/*#region ====公司优势====*/

.oa { height: 45.625rem; }
.oa .bg { background-image: url(/Static/app/img/ys1.jpg); }
.oa-content { margin-top: 7.25rem; }
.oa-item { position: relative; text-align: center; cursor: pointer; }
.oa-item > a { display: block; color: #fff; text-decoration: none; }
.oa-item img { display: block; width: 16.125rem; height: 16.125rem; margin: 0 auto; }
.oa-item p { margin-top: 1.625rem; padding-bottom: .625rem; }
.oa-item::after { content:""; position: absolute; bottom: 0; left: 50%; margin-left: -1.25rem; width: 2.5rem; height: .1875rem; background-color: #fff; }

@-webkit-keyframes shakeYY {
    0%,to { -webkit-transform: translateZ(0); transform: translateZ(0) }
    10%,50%,90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0) }
    30%,70% { -webkit-transform: translate3d(0,4px,0); transform: translate3d(0,4px,0) }
}

@keyframes shakeYY {
    0%,to { -webkit-transform: translateZ(0); transform: translateZ(0) }
    10%,50%,90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0) }
    30%,70% { -webkit-transform: translate3d(0,4px,0); transform: translate3d(0,4px,0) }
}

.oa-item:hover { -webkit-animation-name: shakeYY; animation: shakeYY; animation-duration: .7s; animation-timing-function: ease-in-out; }

@media (max-width: 992px) {
    .oa-content { margin-top: 2.25rem; }
    .oa-item img { width: 10.5rem; height: 10.5rem; }
    .oa-item p { margin-top: 1rem; }
    .oa-item::after { display: none; }
}

/*#endregion*/

/*#region ====产品展示====*/

.pi { margin-top: 3rem; }
.pi-content { margin-top: 3rem; padding: .78125rem .5rem; }
.pi-content .row { margin: -1.5625rem -1rem; }
.pi-item { position: relative; padding: .78125rem .5rem; text-align: center; cursor: pointer; object-fit: cover; }
.pi-item > a { display: block; text-decoration: none; }
.pi-item .pic { overflow: hidden; background-color: #000; }
.pi-item .pic img { display: block; width: 100%; height: auto; margin: 0 auto; transition: transform 0.5s; }
.pi-item p { padding: 0; margin: 0; height: 4.375rem; line-height: 4.375rem; font-size: 1.125rem; color: #fff; background-color: #000; }
.pi-item > a:hover p { background-color: #d0111b; }
.pi-item > a:hover .pic img { transform: scale(1.1); }
.pi-more { display: block; margin: 3rem auto 0; padding: 0; height: 3.125rem; line-height: 3.125rem; width: 20rem; background-color: #000; border-radius: 0; border: none; }
.pi-more:hover { background-color: #d0111b; }

@media (max-width: 1200px) {
    .pi-item p { height: 3.125rem; line-height: 3.125rem; font-size: 1rem; }
}

/*#endregion*/

/*#region ====应用领域====*/

.af { height: 54.375rem; }
.af .bg { background-image: url(/Static/app/img/ys2.jpg); }
.af-content { margin-top: 4.5rem; padding: 1rem 4.375rem; }
.af-content .row { margin: -2rem -2.75rem; }
.af-item { position: relative; padding: 1rem 1.375rem; text-align: center; cursor: pointer; }
.af-item > a { display: block; text-decoration: none; }
.af-item img { display: block; width: 100%; height: auto; margin: 0 auto; }
.af-item p { position: absolute; left: 50%; top: 50%; margin-top: -1.5625rem; margin-left: -28%; width: 56%; padding: 0; height: 3.125rem; line-height: 3.125rem; font-size: 1.125rem; color: #fff; background-color: rgba(0, 0, 0, .8); }
.af-item > a:hover p { background-color: #d0111b; }

@media (max-width: 992px) {
    .af { height: 48rem; }
    .af-content { margin-top: 4rem; padding: .75rem 1.25rem; }
    .af-content .row { margin: -1.5rem -1.5rem; }
    .af-item { padding: .75rem .75rem; }
    .af-item img { border-radius: .5rem; }
    .af-item p { font-size: 1rem; }
}

/*#endregion*/

/*#region ====关于我们====*/

.about { margin-top: 3.75rem; padding: .5rem 0; }
.about .cent { display: flex; }
.about .left { flex: 1; }
.about .right { width: 52%; padding-left: 1.75rem; }
.about .right img { width: 100%; }
.about h2 { font-size: 2.25rem; color: #d0111b; }
.about .name { font-size: 1.25rem; padding-top: .3rem; }
.about .slogan { font-size: 1.75rem; margin-top: .2rem; font-weight: bold; color: #040048; }
.about .intro { margin-top: .5rem; text-align: justify; line-height: 1.7;  }
.about-more { display: block; margin: 1.5rem 0 0; padding: 0; width: 10.5rem; height: 2.875rem; line-height: 2.875rem; background-color: #d0111b; border-radius: 0; border: none; }
.about-more:hover { background-color: #db2932; }

@media (max-width: 576px) {
    .about .intro { font-size: 1.15rem; }
    .about-more { display: block; margin: 2rem auto 0; width: 12rem; height: 3.125rem; line-height: 3.125rem; }
    .about h2, .about .name, .about .slogan { text-align: center; }
}

/*#endregion*/

/*#region ====新闻中心====*/

.news { height: 54.375rem; }
.news .bg { background-image: url(/Static/app/img/ys3.jpg); }
.news .bg::after { border-left-color: #222; border-right-color: #222; }
.news-content { margin-top: 4.5rem; display: flex; justify-content: space-between; color: #212529; }
.news-top { position: relative; width: 33.625rem; margin-right: 3.75rem; height: 32em; background: rgba(255,255,255,.5) url(/Static/app/img/top-news.jpg) no-repeat left top; }
.news-top .article { position: absolute; top: 16.25rem; left: 50%; margin-left: -40%; width: 80%; height: 13.75rem; background-color: rgba(255,255,255,.85); border-top: solid .1875rem #d0111b; }
.news-top .article .title { padding: 0 1.25rem; height: 3.54rem; line-height: 3.54rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background-color: #d0111b; color: #fff; }
.news-top .article .title a { color: #fff; }
.news-top .article .desc { padding: 0 1.25rem; margin: .75rem 0 .5rem; height: 5.5rem; text-align: justify; overflow: hidden; font-size: .875rem; line-height: 2; }
.news-top .article .foot { padding: 0 1.25rem; display: flex; align-items: center; justify-content: space-between; font-size: .875rem; }
.news-top .article .foot .date { }
.news-top .article .foot a.more { display: block; margin: 0; padding: 0; width: 5.75rem; height: 2.1rem; line-height: 2.1rem; font-size: .875rem; background-color: #d0111b; border: none; border-radius: 0; }
.news-top .article .foot a.more:hover { background-color: #db2932; }
.news-list { flex: 1; margin: 0 auto; }
.news-item { display: flex; height: 10rem; padding: .875rem 4%; background-color: rgba(255,255,255,.5); }
.news-item .pic { flex: none; width: 35%; padding: .75rem; background-color: rgba(255,255,255,.85); }
.news-item .pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.news-item .text { flex: none; width: 65%; padding: 0 1.5rem 0 1%; background-color: rgba(255,255,255,.85); }
.news-item .title { margin-top: .5rem; height: 3.25rem; line-height: 3.25rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.news-item .desc { margin-top: -.25rem; height: 3.25rem; font-size: .75rem; color: #999; text-align: justify; overflow: hidden; line-height: 2; }
.news-item .date { display: none; }
.news-item + .news-item { margin-top: 1rem; }

@media (max-width: 1200px) {
    .news-list { max-width: 43.75rem; }
}

@media (max-width: 576px) {
    .news-content { margin-top: 4rem; }
    .news-item .pic { width: 40%; }
    .news-item .text { width: 60%; padding-right: 1rem; }
    .news-item .title { margin-top: 1rem; height: 3.5rem; font-size: 1.1rem; overflow: hidden; white-space: pre-line; word-break: break-all; line-height: 1.5; }
    .news-item .desc { display: none; }
    .news-item .date { margin-top: 1rem; display: block; font-size: .875rem; color: #666; }
}

/*#endregion*/