﻿.banner_con{ position: relative; overflow: hidden; }
.banner_con .img{ width: 100%; }
.banner_con .scroll{ position: absolute; bottom: 40px; left: 50%; margin-left: -23px; }
.banner_con .scroll img{ position: relative; z-index: 2; }
.banner_con .scroll::after{ content: ''; border-radius: 50px; left: 0; top: 0; position: absolute; z-index: 1; width: 46px; height: 46px; background: #fff; opacity: 0.2; animation: move linear 1s infinite; }
.mainTitle h2{ font-size: 40px; color: #171619; font-weight: lighter; margin-bottom: 35px; font-family: 'Microsoft YaHei'; }
.mainTitle p{ line-height: 30px; font-size: 16px; margin-bottom: 25px; }
.mainFoot{ border-top: 1px solid #c9c9d2; }

.aboutCont .iconCont{ padding: 80px 0; }
.aboutCont .iconCont .flex{ display: flex; justify-content: space-between; }
.aboutCont .iconCont .mainTitle{ padding-top: 30px; }
.aboutCont .iconCont .iconbox{ display: flex; justify-content: space-between; text-align: center; width: 70%; }
.aboutCont .iconCont .iconbox .imgbox{ border-radius: 100%; background: #ddd8e5; transition: all 0.3s ease; margin-bottom: 30px; }
.aboutCont .iconCont .iconbox .li:hover .imgbox{ background: #e7141a; }

.aboutCont .textCont{ padding: 60px 0; background: #f7f5fa; }
.aboutCont .textCont img{ width: 100%; margin-bottom: 40px }

.aboutCont .mapCont{ padding: 80px 0 50px; }
.aboutCont .mapCont img{ max-width: 90%; margin: 0 auto 80px; display: block; }
.aboutCont .mapCont .flex{ display: flex; justify-content: space-between; flex-wrap: wrap; }
.aboutCont .mapCont .flex .li{ padding-left: 42px; background: url(../images/about/bg.png) no-repeat left top; line-height: 35px; font-size: 18px; font-weight: bold; margin-bottom: 40px; width: 40%; box-sizing: border-box; }

.aboutCont .contactCont{ padding: 80px 0; }
.aboutCont .contactCont .flex{ display: flex; justify-content: space-between; }
.aboutCont .contactCont .imgbox{ width: 47%; text-align: center; }
.aboutCont .contactCont .imgbox span{ padding-bottom: 30px; background: url(../images/about/bg2.png) no-repeat center bottom; font-size: 16px; }
.aboutCont .contactCont .imgbox .img{ overflow: hidden; border-radius: 10px; margin-bottom: 30px; }
.aboutCont .contactCont .imgbox img{ display: block; width: 100%; transition: all 1.5s ease; }
.aboutCont .contactCont .imgbox .img:hover img{ transform: scale(1.1); }
.aboutCont .contactCont .text{ width: 40%; display: flex; align-content: center; flex-wrap: wrap; }
.aboutCont .contactCont .text h2{ font-size: 40px; color: #171619; font-weight: lighter; margin-bottom: 35px; }
.aboutCont .contactCont .text .li{ color: #848485; font-size: 20px; font-weight: bold; padding-left: 50px; font-family: 'Microsoft YaHei'; margin-bottom: 30px; line-height: 38px; width: 100% }
.aboutCont .contactCont .text .li a{ color: #848485; }
.aboutCont .contactCont .text .li a:hover{ color: #e7141a; }
.aboutCont .contactCont .text .li1{ background: url(../images/about/icons1.png) no-repeat left center; }
.aboutCont .contactCont .text .li2{ background: url(../images/about/icons2.png) no-repeat left center; }

.productCont{ padding: 80px 0; }
.productCont .mainTitle h2{ margin-bottom: 20px; }
.productCont .mainText{ font-size: 18px; margin-bottom: 40px; }
.productCont .productTips{ margin-bottom: 50px; }
.productCont .productTips .title{ font-size: 32px; margin-bottom: 40px; }
.productCont .productTips .more{ line-height: 56px; padding: 0 25px; background: #f3f1f7; position: relative; margin-bottom: 20px; cursor: pointer; }
.productCont .productTips .more .txt{ padding-left: 38px; color: #757377; }
.productCont .productTips .m1 .txt{ background: url(../images/product/icon1.png) no-repeat left center; }
.productCont .productTips .m2 .txt{ background: url(../images/product/icon2.png) no-repeat left center; }
.productCont .productTips .m3 .txt{ background: url(../images/product/icon3.png) no-repeat left center; }
.productCont .productTips .m4 .txt{ background: url(../images/product/icon4.png) no-repeat left center; }
.productCont .productTips .m5 .txt{ background: url(../images/product/icon5.png) no-repeat left center; }
.productCont .productTips .m6 .txt{ background: url(../images/product/icon6.png) no-repeat left center; }
.productCont .productTips .more .icon{ position: absolute; width: 19px; height: 19px; background: url(../images/product/more1.png) no-repeat; right: 25px; top: 18px; }
.productCont .productTips .more.active .icon{ background: url(../images/product/more2.png) no-repeat; }
.productCont .productTips .tablebox{ display: none; }
.productCont .productTips table{ width: 100%; }
.productCont .productTips table th{ background: #4d4a55; color: #fff; font-weight: normal; text-align: center; height: 44px; white-space: nowrap; }
.productCont .productTips table{ border-collapse: collapse; width: 100%; }
.productCont .productTips table td{ height: 100px; border-bottom: 1px solid #dedae7; padding: 0 20px; box-sizing: border-box; }
.productCont .productTips table td.nw{ white-space: nowrap; }
.productCont .productList{ display: flex; flex-wrap: wrap; }
.productCont .productList .list{ width:32%; margin-right: 2%; margin-bottom: 40px; padding-bottom: 20px; transition: all 0.3s ease; }
.productCont .productList .list:hover{ box-shadow: 0px 10px 20px rgba(220,220,220,0.8); }
.productCont .productList .list:nth-child(3n){ margin-right: 0; }
.productCont .productList .imgbox{ overflow: hidden; position: relative; margin-bottom: 20px; }
.productCont .productList .imgbox img{ width: 100%; }
.productCont .productList .imgbox .fix{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; transition: all 2s ease; }
.productCont .productList .list:hover .fix{ transform: scale(1.1); }
.productCont .productList .list p{ color: #fff; width: 100%; font-size: 16px; line-height: 40px; text-align: center; background: rgba(92,87,89,.7); position: absolute; bottom: 0; left: 0; }
.productCont .productList .list .text{ line-height: 30px; font-size: 14px; color: #747474; text-align: center; }
.productCont .productList .list .text i{ color: #131313; margin-left: 5px; }
.productCont .productList .list:hover .text,.productCont .productList .list:hover .text i{ color: #e7141a; }

.contactCont{ padding: 80px 0; }
.contactCont .flex{ display: flex; justify-content: space-between; }
.contactCont .textCont{ width: 50%; padding: 30px 0; }
.contactCont .textCont h2{ font-size: 40px; color: #171619; font-weight: lighter; margin-bottom: 50px; font-family: 'Microsoft YaHei'; }
.contactCont .textCont .li{ line-height: 38px; position: relative; padding-left: 50px; color: #504f59; margin-bottom: 10px; }
.contactCont .textCont .li a{ color: #504f59; transition: all 0.3s ease; }
.contactCont .textCont .li a:hover{ color: #e7141a; }
.contactCont .textCont .li b{ color: #1b1a1c; margin-right: 10px; }
.contactCont .textCont .li::after{ content: ''; position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50px; background-color: #ddd8e5; background-repeat: no-repeat; background-position: center; transition: all 0.3s ease; }
.contactCont .textCont .li:hover::after{ background-color: #e7141a; }
.contactCont .textCont .li1::after{ background-image: url(../images/contact/icon1.png); }
.contactCont .textCont .li2::after{ background-image: url(../images/contact/icon2.png); }
.contactCont .textCont .li3::after{ background-image: url(../images/contact/icon3.png); }
.contactCont .textCont .li4::after{ background-image: url(../images/contact/icon4.png); }
.contactCont .mapCont{ width: 50%; }
.contactCont .mapCont #map{ height: 100%; }

.newsCont{ padding: 80px 0; }
.newsCont .list{ border: 1px solid #a4a1b0; position: relative; margin-bottom: 30px; }
.newsCont .list .time{ position: absolute; left: 12px; top: -11px; height: 78px; width: 96px; color: #fff; background: #a4a1b0; text-align: center; font-weight: bold; font-size: 18px; transition: all 0.3s ease; }
.newsCont .list:hover .time{ background: #e7141a; }
.newsCont .list .time span{ display: inline-block; width: 98%; border-bottom: 1px solid #b6b4c0; line-height: 40px; font-size: 24px; margin-bottom: 8px; }
.newsCont .list .time::after{ content: ''; position: absolute; left: -12px; top: 0; width: 12px; height: 10px; background: url(../images/news/arrow.png) no-repeat center; }
.newsCont .list .text{ line-height: 78px; color: #3c3c3c; font-weight: bold; font-size: 16px; padding: 0 50px 0 130px; transition: all 0.3s ease; }
.newsCont .list:hover .text{ color: #e7141a; }
.newsCont .list .text::after{ position: absolute; content: ''; width: 12px; height: 21px; right: 26px; top: 28px; background: url(../images/news/more1.png) no-repeat center; transition: all 0.3s ease; }
.newsCont .list:hover .text::after{ background: url(../images/news/more2.png) no-repeat center; }

.detailCont{ padding: 60px 0 80px; }
.detailCont .back{ border-bottom: 1px solid #c9c9d2; margin-bottom: 45px; }
.detailCont .back a{ padding-left: 20px; color: #1b1a1c; font-size: 16px; background: url(../images/news/back.png) no-repeat left center; line-height: 40px; display: inline-block; transition: all 0.3s ease; }
.detailCont .back a:hover{ color: #e7141a; }
.detailCont .title{ font-size: 28px; color: #3c3c3c; font-weight: bold; text-align: center; margin-bottom: 20px; line-height: 32px; }
.detailCont .time{ text-align: center; color: #3c3c3c; margin-bottom: 40px; }
.detailCont .html{ line-height: 24px; max-width: 1000px; margin: 0 auto; }

.joinCont{ padding: 80px 0; }
.joinCont .mainTitle h2{ margin-bottom: 20px; }
.joinCont .mainText{ font-size: 18px; margin-bottom: 40px; }
.joinCont .joinTips{ margin-bottom: 5px; }
.joinCont .joinTips .title{ font-size: 32px; margin-bottom: 10px; }
.joinCont .joinTips .more{ line-height: 56px; padding: 0 25px; background: #f3f1f7; position: relative; cursor: pointer; }
.joinCont .joinTips .more .txt{ color: #757377; }
.joinCont .joinTips .more .icon{ position: absolute; width: 19px; height: 19px; background: url(../images/product/more1.png) no-repeat; right: 25px; top: 18px; }
.joinCont .joinTips .more.active .icon{ background: url(../images/product/more2.png) no-repeat; }
.joinCont .joinTips .htmlbox{ display: none; padding: 10px 20px 0; line-height: 30px; color: #747474; }
.joinCont .joinTips .htmlbox .txt{ margin-bottom: 30px; }
.joinCont .joinTips .htmlbox h3{ font-size: 22px; color: #131313; margin-bottom: 25px; }
.joinCont .joinTips .htmlbox .tips{ padding: 20px 0; border-top: 1px solid #c9c9d2; }
.joinCont .joinTips .htmlbox .tips .tit{ font-size: 16px; font-weight: bold; margin-bottom: 20px; }


@media only screen and (max-width: 1050px) {
    
}
@media only screen and (max-width: 820px) {
    .mainTitle h2,.aboutCont .contactCont .text h2,.contactCont .textCont h2{ font-size: 30px; }
    .productCont .productTips .title{ font-size: 26px; }
    .aboutCont .mapCont .flex .li{ width: 45%; }
    .contactCont .textCont{ width: 48%; }
}
@media only screen and (max-width: 510px) {
    .productCont .productTips .tablebox{ overflow-x: auto; }
    .productCont .productTips .tablebox table{ width: 200%; }
    .productCont .productTips table .pd,.productCont .productTips table td,.productCont .productTips table th{ padding: 0 20px !important; }
    .productCont .productTips table th{ white-space: nowrap; }
    .mainTitle h2,.aboutCont .contactCont .text h2,.contactCont .textCont h2{ font-size: 24px; margin-bottom: 20px; }
    .productCont .productTips .title{ font-size: 18px; }
    .productCont .mainText{ font-size: 16px; line-height: 22px; }
    .productCont .productTips{ margin-bottom: 30px; }
    .banner_con .img{ width: 200%; margin-left: -50%; }
    .aboutCont .mapCont .flex .li{ width: 100%; }
    .aboutCont .mapCont img{ max-width: none; width: 180%; margin-left: -80%; margin-bottom: 40px; }
    .aboutCont .contactCont .imgbox{ width: 100%; order: 2; margin-bottom: 20px }
    .aboutCont .contactCont .text{ width: 100%; margin-bottom: 20px; order: 1; }
    .aboutCont .contactCont .flex{ flex-wrap: wrap; }
    .aboutCont .contactCont .text .li{ margin-bottom: 20px; }
    .aboutCont .iconCont .flex{ flex-wrap: wrap; }
    .aboutCont .iconCont .mainTitle{ width: 100%; text-align: center; padding: 0 }
    .aboutCont .iconCont .iconbox{ width: 100%; flex-wrap: wrap }
    .aboutCont .iconCont .iconbox .li{ width: 50%; margin-bottom: 20px; }
    .aboutCont .iconCont .iconbox .imgbox{ width: 60%; margin: 0 auto 20px; }
    .aboutCont .iconCont .iconbox img{ width: 100%; }
    .aboutCont .iconCont,.aboutCont .mapCont,.aboutCont .contactCont,.productCont,.contactCont{ padding: 60px 0; }
    .contactCont .flex{ flex-wrap: wrap; }
    .contactCont .textCont{ width: 100%; }
    .contactCont .mapCont{ width: 100%; height: 300px; }
    .contactCont .textCont{ padding: 0; margin-bottom: 20px; }
    .newsCont .list .text{ line-height: 24px; padding: 15px 20px 15px 105px; }
    .newsCont .list .text::after{ display: none; }
    .newsCont .list .time{ font-size: 16px; width: 75px; }
    .newsCont .list .time span{ font-size: 20px; }
    .aboutCont .textCont img{ width: 100%; margin-bottom: 20px }
    .productCont .productList .list{ width: 100%; margin-right: 0; margin-bottom: 20px; }
    .productCont .productTips .title{ font-size: 24px; text-align: center; }
    .productCont .productTips table td{ padding: 5px 20px !important; }
    .detailCont .title{ font-size: 24px; }
}
@keyframes move{
   0%{ transform: scale(1); }
   50%{ transform: scale(1.1); }
   100%{ transform: scale(1); }
}