.section-header-p{ border-bottom: 1px solid #E6E6E6; } .section-header { overflow: hidden; } .section-header .left{ float: left; } .section-header .left { line-height: 70px;position: relative; } .section-header .left h2{ font-size: 36px;font-weight: bold;line-height: 21px;color: #262626;opacity: 1;display: inline-block;margin-right: 10px; } .section-header .left span { font-size: 16px;color: #FE6500; } .section-header .left .indicator{ width: 50px;height: 3px;background: #004DA5;position: relative;left: 0;bottom: 0; } .section-header .right { float: right;padding-top: 16px; } .section-header .right.prompt { margin-top: 30px;font-size: 16px;font-family: Source Han Sans CN;font-weight: 400;line-height: 21px;color: #262626;opacity: 1; } .section-header .right ul{ list-style: none;overflow: hidden; } .section-header .right ul li{ line-height: 36px;float: left;border: 1px solid #999999;margin-left: 10px;padding: 0 16px;cursor: pointer; } .section-header .right ul li:hover{ color: white !important; background-color: #004DA5; } .section-header .right ul li a { font-size: 14px;font-weight: 400;line-height: 24px;opacity: 1;text-decoration:none; color: inherit; } .hot-products{ margin-top: 45px; margin-bottom: 45px; } .p-list { text-align: justify;padding-top: 20px; } .p-list .p-item{ display: inline-block;margin-top: 20px;cursor: pointer; } .p-list .p-item:hover{ box-shadow: 0 0 10px 1px #cdcdcd; } .p-list .p-item .cover { display: inline-block;width: 300px;height: 250px;background-color: rgba(0,0,0,0.6);position:absolute;left: 0;top:0;z-index: 444; } .p-list .p-fill{ display: inline-block;width: 300px;height: 0; } .p-list .p-item .i-img { display: inline-block;width: 300px;height: 250px;line-height: 250px;text-align: center;font-size: 0;position: relative; } .p-list .p-item:hover .i-img img { transition: 300ms; -webkit-transition: 300ms; transform: scale(1.06); -webkit-transform: scale(1.06); } .p-list .p-item:hover .i-img .cover{ display: block!important; } .p-list .p-item .i-img img{ max-width: 300px;max-height: 250px; } .p-list .p-item .info { width: 300px;height: 70px;line-height: 70px;background: #004DA5;color: #FFF;margin-top: -5px;text-align: center; } .p-list .p-item:hover .info{ background-color: #FE6500 !important;color: white !important; } .p-list .p-item .info .title { color: #fff; } .p-list .p-item:hover .info .title{ color: white !important; } .p-list .p-item:hover .info .contact{ background-color: white !important;color: #004DA5 !important; } .p-list .p-item .info .title{ display: inline-block;font-size: 14px;font-weight: 500;line-height: 31px;opacity: 1; } .p-list .p-item .info .contact{ float: right;display: inline-block;margin-right: 20px;height: 36px;line-height: 36px;color: white;background: #004DA5;margin-top: 16px;padding-left: 14px;padding-right: 14px; position: relative; } .p-list .p-item .info .contact img{ position: absolute; transition-duration: .3s; width: 85px; height: 0px; top: 100%; left: 0; z-index: 2; } .p-list .p-item .info .contact:hover img{ height: 85px; } .about-me{ background-image: url(../picture/abg.jpg);background-repeat: no-repeat; } .content { padding: 80px 0;overflow: hidden; } .content .left{ float: left;width: 50%; } .content .left ul{ overflow: hidden;list-style: none;text-align: center;background-color: #004DA5; } .content .left ul li{ float: left;display: inline-block;width: 25%;color: white;text-align: center;padding: 22px 0 10px 0;font-size: 14px;font-weight: 400;line-height: 24px;opacity: 1; } .content .left ul li p{ margin-top: 20px; } .content .right{ float: left;width: 50%;background-color: white;height: 460px; } .content .right .right-w { padding: 30px 40px; } .content .right .right-w .a-text{ text-indent : 30px;margin-top: 28px;font-size: 14px;color: #404040;font-weight: 400;line-height: 26px;opacity: 1;text-align: justify; } .a-section-header-p{ border-bottom: none; } .content .right .right-w .more { display:inline-block;width: 200px;height: 40px;line-height: 40px;text-align: center;background-color: #004DA5;color: white;font-size: 16px;cursor: pointer;margin-top: 34px; } .content .right .right-w .more img{ display: inline-block;margin-left: 10px;width: 30px;height: 18px; } .goodness{ background-image: url(../images/goodness-bg.png); } .g-header { padding-top: 40px; } .goodness .g-content { overflow: hidden; position: relative; height: 360px; width: 1370px; margin-top: 40px; margin-bottom: 71px; } .goodness .g-content .g-item { cursor: pointer; } .goodness .g-content .g-item:hover .title,.goodness .g-content .g-item:hover .desc { color: white; } .goodness .g-content .g-item.g-1{ background-image: url(../images/g-1.png); height: 170px;width: 585px; position: absolute; top: 0; left: 24px; } .goodness .g-content .g-item.g-1 i{ display:inline-block;background-image: url(../images/g-1-1.png);width: 33px;height: 30px;margin-top: 25px; } .goodness .g-content .g-item.g-1:hover{ background-image: url(../images/g-1-0.png); left: 4px;width: 630px;height: 215px; top: -18px; } .goodness .g-content .g-1:hover .g-left-content{ right: 164px;width: 68%; } .goodness .g-content .g-1:hover i{ background-image: url(../images/g-1-2.png);margin-top: 45px; } .goodness .g-content .g-item.g-2 { height: 170px;width: 585px; background-image: url(../images/g-2.png); position: absolute; top: 0; right: 24px; } .goodness .g-content .g-item.g-2 i{ display:inline-block;background-image: url(../images/g-2-1.png);width: 30px;height: 30px;margin-top: 25px; } .goodness .g-content .g-item.g-2:hover { background-image: url(../images/g-2-0.png);width: 630px;height: 215px; top: -18px;right: 0; } .goodness .g-content .g-item.g-2:hover .g-right-content { left: 160px;width: 66.4%; } .goodness .g-content .g-item.g-2:hover i{ background-image: url(../images/g-2-2.png); margin-top: 42px; } .goodness .g-content .g-item.g-3{ background-image: url(../images/g-3.png); height: 170px;width: 585px; position: absolute; bottom: 0; left: 24px; } .goodness .g-content .g-item.g-3 i{ display:inline-block;background-image: url(../images/g-3-1.png);width: 25px;height: 30px;margin-top: 25px; } .goodness .g-content .g-item.g-3:hover{ background-image: url(../images/g-3-0.png); left: 4px;width: 630px;height: 215px; bottom: -26px; } .goodness .g-content .g-3:hover .g-left-content{ right: 164px;width: 66%; } .goodness .g-content .g-3:hover i{ background-image: url(../images/g-3-2.png);margin-top: 45px; } .goodness .g-content .g-item.g-4{ background-image: url(../images/g-4.png); height: 170px;width: 585px; position: absolute; bottom: 0; right: 24px; } .goodness .g-content .g-item.g-4 i{ display:inline-block;background-image: url(../images/g-4-1.png);width: 34px;height: 30px;margin-top: 25px; } .goodness .g-content .g-item.g-4:hover { background-image: url(../images/g-4-0.png);width: 630px;height: 215px; bottom: -26px;right: 0; } .goodness .g-content .g-item.g-4:hover .g-right-content { left: 160px;width: 66.4%; } .goodness .g-content .g-item.g-4:hover i{ background-image: url(../images/g-4-2.png); margin-top: 42px; } .goodness .g-content .g-5{ background-image: url(../images/g-5-1.png); height: 220px;width: 220px; position: absolute; left: 50%; margin-left: -110px; bottom: 50%; margin-bottom: -110px; } .goodness .g-content .g-6{ background-image: url(../images/g-6.png); height: 300px;width: 300px; position: absolute; left: 50%; margin-left: -150px; bottom: 50%; margin-bottom: -150px; animation: myfirst 60s linear infinite; -moz-animation: myfirst 60s linear infinite; -webkit-animation: myfirst 60s linear infinite; -o-animation: myfirst 60s linear infinite; transform: none; } .goodness .g-content .g-7{ background-image: url(../images/g-7.png); height: 270px;width: 270px; position: absolute; left: 50%; margin-left: -135px; bottom: 50%; margin-bottom: -135px; animation: mylast 60s linear infinite; -moz-animation: mylast 60s linear infinite; -webkit-animation: mylast 60s linear infinite; -o-animation: mylast 60s linear infinite; transform: none; } .goodness .g-content .g-left-content { position: absolute; width: 70%; right: 140px; top: 0; text-align: right; } .goodness .g-content .g-left-content img { display: inline-block; margin-top: 25px; } .goodness .g-content .g-left-content .title { font-size: 20px; font-weight: bold; line-height: 21px; color: #262626; opacity: 1; margin-top: 15px; margin-bottom: 14px; } .goodness .g-content .g-left-content .desc { font-size: 14px; font-family: Source Han Sans CN; font-weight: 400; line-height: 26px; color: #262626; opacity: 1; } .goodness .g-content .g-right-content { position: absolute; width: 70%; left: 140px; top: 0; text-align: left; color: #262626; } .goodness .g-content .g-right-content img { display: inline-block; margin-top: 25px; } .goodness .g-content .g-right-content .title { font-size: 20px; font-weight: bold; line-height: 21px; opacity: 1; margin-top: 15px; margin-bottom: 14px; } .goodness .g-content .g-right-content .desc { font-size: 14px; font-weight: 400; line-height: 26px; opacity: 1; } .s-content { margin-top: 40px !important; margin-bottom: 40px !important; } #success-example-swiper-container .swiper-slide { display: inline-block;width: 315px !important; } #success-example-swiper-container a { display: inline-block; width: 315px; } #success-example-swiper-container a img { display: inline-block; max-width: 315px; } #success-example-swiper-container a p { background-color: #F7F7F7; font-size: 14px; font-weight: 400; line-height: 50px; color: #262626; opacity: 1; text-align: center; } .s-content .swiper-pagination-se{ text-align:center; width:100%; margin-top:10px;} .s-content .swiper-pagination-se .swiper-pagination-bullet { width: 12px; height: 12px; margin:0 5px; background:#02328d; } .s-content a .img-wrapper{ overflow: hidden; width: 315px; height: 280px; line-height: 250px; text-align: center; } .s-content a:hover{ text-decoration: none; } .s-content a:hover img{ transition: 300ms; -webkit-transition: 300ms; transform: scale(1.06); -webkit-transform: scale(1.06); } .s-content a:hover> p{ background-color: #004DA5; color: white; } .news-content { height: 714px;background-image: url(../images/news-bg.jpg); } .news-list { overflow: hidden; text-align: justify; margin-top: 40px !important; } .news-fill { display: inline-block;width: 510px;height: 0; } .recommend{ display: inline-block;width: 380px; } .recommend .info{ background-color: white; } .recommend .img-p { width: 380px;height: 245px;text-align: center;line-height: 245px;overflow: hidden; } .recommend .img-p img{ display: inline-block;max-width: 380px;height: auto; } .recommend .title{ width: 92%; margin: 0 auto; font-size: 24px; font-weight: 500; line-height: 41px; color: #282828; opacity: 1; padding: 22px 0 0 0 !important; margin-bottom: 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .recommend .desc{ font-size: 14px; font-weight: 400; line-height: 28px; color: #999999; opacity: 1; text-align: justify; width: 92%; margin: 0 auto; height: 60px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .recommend .line { height: 1px; background-color: #CCCCCC; width: 92%; margin: 15px auto; } .recommend .addional { width: 92%; margin: 0 auto; overflow: hidden; text-align: left !important; padding-bottom: 10px; color: #999999; } .recommend .addional .more { float: right; } .recommend:hover img{ transition: 300ms; -webkit-transition: 300ms; transform: scale(1.06); -webkit-transform: scale(1.06); } .recommend:hover .info { background-color: #004DA5; } .recommend:hover .title,.recommend:hover .desc,.recommend:hover .line,.recommend:hover span { color: white; } .news-columns { display:inline-block;width: 510px;height: 426px;overflow: hidden; } .news-columns .wrapper{ margin-bottom: -20px; } .news-columns .item{ background-color: white;overflow: hidden;margin-bottom: 15px;padding: 18px 0;cursor: pointer; } .news-columns .item:hover { background-color: #004DA5; } .news-columns .item .left { float: left; width: 18%; display: inline-block; border-right: 1px solid #999999; } .news-columns .item:hover .left .day,.news-columns .item:hover .left .year-month,.news-columns .item:hover .right .title,.news-columns .item:hover .right .desc{ color: white; } .news-columns .item .left .day{ font-size: 36px; font-weight: bold; line-height: 30px; color: #333333; opacity: 1; text-align: center; } .news-columns .item .left .year-month{ font-size: 14px; font-weight: 400; line-height: 30px; color: #999999; opacity: 1; text-align: center; } .news-columns .item .right { float: left; padding-left: 20px; } .news-columns .item p{ padding: 0; margin: 0; } .news-columns .item .right .title{ text-align: left; font-size: 16px; font-weight: 500; line-height: 30px; color: #333333; opacity: 1; } .news-columns .item .right .desc{ text-align: left; font-size: 14px; font-weight: 400; line-height: 30px; color: #999999; width: 390px; opacity: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .friend-link { background-color: #F7F7F7; padding-top: 50px; padding-bottom: 50px; } .friend-link .f-header .item { text-align: center; background-color: #E6E6E6; display: inline-block; width: 100px; height: 30px; line-height: 30px; font-size: 14px; font-weight: 400; color: #262626; opacity: 1; margin-right: 10px; cursor: pointer; } .friend-link .f-header .item:hover,.friend-link .f-header .active{ color: white;background-color: #004DA5; } .friend-link .links{ list-style: none; margin-top: 10px; overflow: hidden; } .friend-link .links li{ float: left; display: inline-block; padding: 2px 6px; } .friend-link .links li a{ font-size: 14px; font-weight: 400; line-height: 34px; color: #262626; opacity: 1; } @keyframes myfirst { from { transform: rotate(0); -ms-transform: rotate(0); -webkit-transform: rotate(0); -o-transform: rotate(0); -moz-transform: rotate(0) } to { transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg) } } @-moz-keyframes myfirst { from { transform: rotate(0); -ms-transform: rotate(0); -webkit-transform: rotate(0); -o-transform: rotate(0); -moz-transform: rotate(0) } to { transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg) } } @-webkit-keyframes myfirst { from { transform: rotate(0); -ms-transform: rotate(0); -webkit-transform: rotate(0); -o-transform: rotate(0); -moz-transform: rotate(0) } to { transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg) } } @-o-keyframes myfirst { from { transform: rotate(0); -ms-transform: rotate(0); -webkit-transform: rotate(0); -o-transform: rotate(0); -moz-transform: rotate(0) } to { transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg) } } @keyframes mylast { from { transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg) } to { transform: rotate(0); -ms-transform: rotate(0); -webkit-transform: rotate(0); -o-transform: rotate(0); -moz-transform: rotate(0) } } @-moz-keyframes mylast { from { transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg) } to { transform: rotate(0); -ms-transform: rotate(0); -webkit-transform: rotate(0); -o-transform: rotate(0); -moz-transform: rotate(0) } } @-webkit-keyframes mylast { from { transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg) } to { transform: rotate(0); -ms-transform: rotate(0); -webkit-transform: rotate(0); -o-transform: rotate(0); -moz-transform: rotate(0) } } @-o-keyframes mylast { from { transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg) } to { transform: rotate(0); -ms-transform: rotate(0); -webkit-transform: rotate(0); -o-transform: rotate(0); -moz-transform: rotate(0) } } @media screen and (max-width:1400px){ .common-width { width: 1100px; margin: 0 auto; overflow: hidden; } .nav-g .menus { margin-left: 72px; } .call-me-p{ display: none !important; } .content .right .right-w { padding: 15px 40px; } .content .right .right-w .a-text { margin-top: 15px; } .recommend { display: inline-block; width: 280px; } .recommend .img-p { width: 100%; height: 245px; text-align: center; line-height: 245px; overflow: hidden; } .p-list .p-item { width: 350px; } .p-list .p-item .i-img { width: 100%; overflow: hidden; } .p-list .p-item .info { width: 100%; } .goodness .g-content { width: 1100px; } .goodness .g-content .g-item.g-1 { background-image: url(../images/g-1.png); height: 170px; width: 465px; position: absolute; top: 0; left: 24px; background-position: right; } .goodness .g-content .g-item.g-2 { height: 170px; width: 465px; background-image: url(../images/g-2.png); position: absolute; top: 0; right: 24px; background-position: left; } .goodness .g-content .g-item.g-3 { background-image: url(../images/g-3.png); height: 170px; width: 465px; position: absolute; bottom: 0; left: 24px; background-position: right; } .goodness .g-content .g-item.g-4 { background-image: url(../images/g-4.png); height: 170px; width: 465px; position: absolute; bottom: 0; right: 24px; } .goodness .g-content .g-item.g-1:hover { background-image: url(../images/g-1-0.png); left: 4px; width: 510px; height: 215px; top: -18px; } .goodness .g-content .g-item.g-2:hover { background-image: url(../images/g-2-0.png); width: 510px; height: 215px; top: -18px; right: 0; } .goodness .g-content .g-item.g-3:hover { background-image: url(../images/g-3-0.png); left: 4px; width: 510px; height: 215px; bottom: -26px; } .goodness .g-content .g-item.g-4:hover { background-image: url(../images/g-4-0.png); width: 510px; height: 215px; bottom: -26px; right: 0; } }