﻿.banner-container{width: 100%;position: relative;}
.banner{width: 100%;}
.banner-picwords{width: 100%;}
.banner-pic{width: 100%;}
.banner-pic img{width: 100%;object-fit: cover;}
.banner-pic .banner-pc{display: block;min-height: 520px;}
.banner-pic .banner-mb{display: none;min-height: 320px;}
.banner-words{position: absolute;z-index: 6;top: 50%;left:10%;transform: translate(0,-50%);}
.banner-words h4{font-size: 64px;color: #fff;font-family:"微软雅黑";}
.banner-words h4 span{color: #e3144e;font-weight: bold;}
.banner-words p{font-size:22px;color: #fff;font-family:"微软雅黑"; letter-spacing:5px; margin:4% auto 6%; line-height:36px;}
.banner-words a{display: block;font-size: 16px;color: #fff;width:137px;height:46px;text-align: center;line-height: 46px;border: 1px solid #fff;border-radius:10px;transition: all .4s ease-in-out;}

.banner-words a:hover{background: #11b5f0;border-color: #11b5f0;}
.swiper-slide-active .banner-words h4{animation: banWords 1s ease-in-out both 100ms;}
.swiper-slide-active .banner-words p{animation: banWords 1s ease-in-out both 600ms;}
.swiper-slide-active .banner-words a{animation: banWords 1s ease-in-out both 1000ms;}
@keyframes banWords {0% {transform: translateX(120px);opacity: 0;}100% {transform: translateX(0);opacity: 1;}}
.banner-prev,.banner-next{position: absolute;z-index: 4;top: 50%;width: 58px;height: 58px;margin-top: -29px;cursor: pointer;user-select: none;transition: all .3s ease-in-out;}
.banner-prev{left: 0;background: rgba(255, 255, 255, .03) url('../images/banl.png') no-repeat center center;}
.banner-next{right: 0;background: rgba(255, 255, 255, .03) url('../images/banr.png') no-repeat center center;}
.banner-prev:hover,.banner-next:hover{background-color:#11b5f0;}
.banner .swiper-pagination{bottom: 32px;}
.banner .swiper-pagination-bullet {width: 36px;height: 6px;border-radius: initial;background: rgba(255, 255, 255, .1);opacity: 1;position: relative;}
.banner .swiper-pagination-bullet:before{content: "";position: absolute;top: 0;left: 0;background: rgba(255, 255, 255, .52);width: 0;height: 6px;z-index: 1;transition: 0s;}
.banner .slideOntrue.swiper-pagination-bullet:before{width: 100%;transition: all 3.6s ease;}

/* =====banner动画===== */
.banner-dhoneimg{position: absolute;width: 993px;top: 10%;z-index: 1;right: 6%;}
.banner-dhone1{width: 100%;}
.banner-dhone1 img{width: 100%;}
.banner-dhone2{position: absolute;left: 310px;bottom: 320px;z-index: 2;width: 288px;}
.banner-dhone2 img{width: 100%;}
.banner-dhone3{position: absolute;left: 384px;bottom: 380px;z-index: 1;opacity: 0;width: 136px;}
.banner-dhone3 img{width: 100%;}
.swiper-slide-active .banner-dhone2{animation: dhoneR1 1.2s ease both 300ms;}
.swiper-slide-active .banner-dhone3{animation: dhoneR2 1.8s ease infinite 1.6s;}
@keyframes dhoneR1 {0% {opacity: 1;transform: scale(0)}50% {opacity: .4;}100% {opacity: 1;transform: scale(1)}}
@keyframes dhoneR2 {0% {transform: translateY(0);opacity: 1;}50% {transform: translateY(-40px);opacity: 1;}100% {transform: translateY(0);opacity: 1;}}

.banner-dhtwoimg{position: absolute;width: 612px;top: 20%;z-index: 1;right: 14.4%;}
.banner-dhtwo1{width: 100%;position: relative;z-index: 2;}
.banner-dhtwo1 img{width: 100%;}
.banner-dhtwo2{position: absolute;top: 2px;left: 134px;z-index: 3;transition: all .4s ease 600ms;width: 420px;}
.banner-dhtwo2 img{width: 100%;}


.banner-dhtwo3{position: absolute;z-index: 4;opacity: 0;}
.banner-dhtwo3 img{width: 100%;}


.swiper-slide-active .banner-dhtwo2{opacity: 0;}
.swiper-slide-active .banner-dhtwo3{animation: dhtwoR3 1.4s ease both 1s;}

.slide1 .banner-dhtwoimg{ width:223px;}
.slide1 .banner-dhtwo3{ width:100%; top:90px; left:-78px}

.slide2 .banner-dhtwoimg{ width:461px;}
.slide2 .banner-dhtwo3{ width:100%; top:110px; left:145px}

.slide3 .banner-dhtwoimg{ width:681px;}
.slide3 .banner-dhtwo3{ width:100%; top:55px; left:160px}







@keyframes dhtwoR3 {0% {opacity: 0;transform: translateY(40px);}100% {transform: translateY(0);opacity: 1;}}


/* ==================== */


.product-container,.apply-container,.news-container{width: 100%;padding:0 0 3%;}
.product,.apply,.news,.content{width: 1680px;margin: 0 auto;}
.product-picwords{width: 100%;margin-top: 46px;}
.product-picwords ul{margin-left: -1.5%;}
.product-picwords ul li{width: 23.5%;float: left;margin-left: 1.5%;padding: 92px 0 88px 0;border: 1px solid #ececec;text-align: center;transition: all .4s ease-in-out;margin-top: 16px;}
.product-pic{width: 100%;height: 96px;}
.product-pic img{max-width: 100%;}
.product-words{width: 100%;overflow: hidden;font-size: 0;margin-top: 36px;}
.product-words h6{font-size: 30px;color: #000;transition: all .3s ease-in-out;}
.product-words h6:hover{color: #e3144e;}
.product-words p{width: 100%;margin-top: 4px;min-height: 25px;}
.product-words p a,.product-words p span{display: inline-block;vertical-align: middle;font-size: 18px;color: #777;}
.product-words p a{transition: all .3s ease-in-out;}
.product-words p a:hover{color: #e3144e;}
.product-words p span{margin: 0 20px;}
.product-picwords ul li:hover{box-shadow: 0 6px 20px 2px #ececec;transform: translateY(-6px)}


.apply-container{background:#1e2037 url(../images/y_bg.jpg) no-repeat center;overflow: hidden;position: relative;}
#applylz{position: absolute;z-index: 1;top: 0;left: 0;width: 100%;height: 100%;}
.apply-top,.apply-bottom{width: 100%;position: relative;z-index: 3;}
.apply-top{margin-top:45px;}
.apply-top ul{margin-left: -2%;}
.apply-top ul li{width: 48%;float: left;margin-left: 2%;height: 514px;overflow: hidden;position: relative;}
.apply-top ul li a{display: block;width: 100%;height: 100%;}
.apply-top ul li img{width: 100%;height: 100%;object-fit: cover;transition: all .4s ease-in-out;}
.apply-words{position: absolute;z-index: 4;width: 88%;top:5%;left:4%;}
.apply-words h6{font-size:24px;color: #000;font-weight:600;transition: all .3s ease-in-out;}
.apply-words p{font-size: 16px;color: #333;margin-top:15px;}
.apply-top ul li a:hover img{transform: scale(1.1);}
.apply-top ul li a:hover h6{color: #11b5f0;}
.apply-topsize{width: 100%;height: 240px;overflow: hidden;position: relative;}
.apply-topsize .apply-words{top:10.5%;}
.apply-topminl,.apply-topminr{width: 48%;position: relative;height: 240px;overflow: hidden;}
.apply-topminl{float: left;}
.apply-topminr{float: right;}
.apply-topminl .apply-words,.apply-topminr .apply-words{left: 12%;width: 76%;}
.apply-top ul li:nth-child(1)>div:nth-child(2){margin-top: 34px;}
.apply-bottom{width: 100%;margin-top: 34px;}
.apply-bottom ul{margin-left: -2%;}
.apply-bottom ul li{width: 23%;float: left;margin-left: 2%;height: 240px;overflow: hidden;position: relative;}
.apply-bottom ul li a{display: block;width: 100%;height: 100%;}
.apply-bottom ul li img{width: 100%;height: 100%;object-fit: cover;transition: all .4s ease-in-out;}
.apply-bottom ul li a:hover img{transform: scale(1.1);}
.apply-bottom ul li a:hover h6{color: #11b5f0;}
.apply-bottom .apply-words{top:10.5%; left:8%}


.news-container{background: #f3f7ff;}
.news-click{width: 100%;overflow: hidden;font-size: 0;margin-top: 28px;text-align: center;}
.news-click ul li{display: inline-block;cursor: pointer;width: 148px;height: 48px;line-height: 48px;font-size: 18px;color: #687286;background: #fff;border: 1px solid #e5eaf4;margin: 0 6px;user-select: none;}
.news-click ul li.ontrue{background: #e3143b;color: #fff;border-color: #e3144e;}
.news-wordsbox{width: 100%;margin-top: 66px;box-shadow: 0 6px 16px 4px #e3e7ee;}
.news-tablist{width: 100%;}
.news-tablist ul li{float: left;height: 398px;overflow: hidden;position: relative;}
.news-tablist ul li a{display: block;width: 100%;height: 100%;}
.news-tablist ul li:first-child{width: 28%;}
.news-tablist ul li:nth-child(2),.news-tablist ul li:nth-child(3),.news-tablist ul li:last-child{width: 24%;}
.news-tablist ul li img{width: 100%;height: 100%;object-fit: cover;transition: all .4s ease-in-out;}
.news-tablist ul li a:hover img{transform: scale(1.1);}
.news-tablist ul li:nth-child(2){background: #e3143b;}
.news-tablist ul li:nth-child(4){background: #fff;}
.news-words{position: absolute;z-index: 2;width: 90%;left: 5%;bottom: 32px;color: #fff;}
.news-words h4{font-size: 26px;font-family: 'SYREGULUM';height: 78px;overflow: hidden;display: -webkit-box;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.news-words p{font-size: 16px;line-height: 24px;margin-top: 24px;height: 72px;overflow: hidden;display: -webkit-box;text-overflow: ellipsis;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
.news-words h6{width: 100%;color: rgba(255, 255, 255, .3);font-size: 14px;padding-right: 20px;margin-top: 38px;background: url('../images/arrrw.png') no-repeat right center;}
.news-words.black h4{color: #222;}
.news-words.black p{color: #666}
.news-words.black h6{color: #777;background: url('../images/arrrb.png') no-repeat right center;}
.news-wordslist{width: 100%;}
.news-wordslist ul li{float: left;height: 398px;overflow: hidden;position: relative;}
.news-wordslist ul li a{display: block;width: 100%;height: 100%;}
.news-wordslist ul li:first-child{width: 28%;background: #62667a;}
.news-wordslist ul li:nth-child(2){width: 48%;background: #fff;}
.news-wordslist ul li:last-child{width: 24%;background: #e3143b;}





/* -------------------------PC端--------------------------- */

@media all and (max-width:1700px) {
	
	
    .banner-words h4{font-size: 58px;}
    .product,.apply,.news,.content{width: 94%;}
    .product-picwords ul li{padding: 72px 0 80px 0;}
    .apply-top ul li{height: 460px;}
    .apply-topsize{height: 216px;}
    .apply-top ul li:nth-child(2)>div:nth-child(2) {margin-top: 28px;}
    .apply-bottom ul li,.apply-topminl, .apply-topminr{height: 216px;}
    .apply-words h6{font-size: 26px;}
    .product-words h6{font-size: 26px;}
    .apply-bottom {margin-top: 30px;}
    .news-tablist ul li,.news-wordslist ul li{height: 366px;}
    .news-words h4{font-size: 22px;height: 64px;}

    .banner-dhoneimg{width: 780px;}
    .banner-dhone2 {left: 242px;bottom: 250px;width: 228px;}
    .banner-dhone3 {left: 310px;bottom: 288px;width: 90px;}
    .banner-dhtwoimg{width: 508px;}
    .banner-dhtwo3 {top: -90px;left: 118px;width: 360px;}
    .banner-dhtwo2 {top: 2px;left: 112px;width: 342px;}
}

@media all and (max-width:1460px) {
    .banner-words h4 {font-size: 46px;}
    .apply-top ul li{height: 400px;}
    .apply-topsize{height: 188px;}
    .apply-top ul li:nth-child(2)>div:nth-child(2) {margin-top: 24px;}
    .apply-top{margin-top: 46px;}
    .apply-bottom ul li,.apply-topminl, .apply-topminr{height: 188px;}
    .apply-words h6 {font-size: 24px;}
    .news-wordsbox {margin-top: 48px;}
    .news-tablist ul li, .news-wordslist ul li {height: 320px;}
    .news-words h4 {font-size: 20px;height: 58px;}
    .news-words p{margin-top: 18px;}
    .news-words h6{margin-top: 28px;}

    .banner-dhoneimg{width: 680px;}
    .banner-dhone2 {left: 218px;bottom: 222px;width: 188px;}
    .banner-dhone3 {left: 272px;bottom: 248px;width: 72px;}
    .banner-dhtwoimg{width: 458px;}
    .banner-dhtwo3 {top: -82px;left: 106px;width: 326px;}
    .banner-dhtwo2 {top: 2px;left: 100px;width: 308px;}
}

@media all and (max-width:1380px) {
    .banner-words h4 {font-size: 42px;}
    .product-words h6 {font-size: 22px;}
    .product-words p a, .product-words p span {font-size: 16px;}
    .product-words p span {margin: 0 16px;}
    .product-words {margin-top: 30px;}
    .product-picwords ul li {padding: 54px 0 60px 0;}
    .product-picwords {margin-top: 30px;}
    .apply-top ul li{height: 340px;}
    .apply-topsize{height: 160px;}
    .apply-top ul li:nth-child(2)>div:nth-child(2) {margin-top: 20px;}
    .apply-top{margin-top: 46px;}
    .apply-bottom ul li,.apply-topminl, .apply-topminr{height: 160px;}
    .apply-words h6 {font-size: 20px;}
    .apply-words p {font-size: 16px;}
    .news-tablist ul li, .news-wordslist ul li {height: 300px;}
    .apply-bottom {margin-top: 26px;}
    .news-wordsbox {margin-top: 40px;}
    .news-words h4 {font-size: 18px;height: 54px;}
    .news-words p {font-size: 14px;line-height: 22px;margin-top: 14px;height: 66px;}
    .news-words h6 {margin-top: 20px;}
	
	.banner-words h4{ width:80%}
	.banner-words h4 img{ width:100%}
	.banner-words p{ font-size:18px}
	.banner-words a{ width:120px; height:38px; line-height:38px; font-size:14px}
	.slide1 .banner-dhtwoimg{ width:180px}
	.slide1 .banner-dhtwo3{ left:-40px; top:45px;}
	.about_content h3{ font-size:20px;}
	
	
}

@media all and (max-width:1280px) {
    .banner-words h4 {font-size: 38px;}
}

@media all and (max-width:1200px) {
    .banner-words h4 {font-size: 34px;}
    .banner-words a{margin-top: 28px;}
    .product-words p a, .product-words p span {font-size: 14px;}
    .product-words p span {margin: 0 12px;}
    .apply-top ul li{height: 300px;}
    .apply-topsize{height: 140px;}
    .apply-top ul li:nth-child(2)>div:nth-child(2) {margin-top: 20px;}
    .apply-top{margin-top: 46px;}
    .apply-bottom ul li,.apply-topminl, .apply-topminr{height: 140px;}
    .apply-bottom {margin-top: 22px;}
    .apply-words p {font-size: 14px;}
    .news-words h4 {font-size: 16px;height: 46px;}
    .news-tablist ul li, .news-wordslist ul li {height: 260px;}
    .news-words p {font-size: 14px;line-height: 20px;margin-top: 10px;height: 60px;}
    .news-words h6 {margin-top: 14px;}
	
	.banner-words h4{ width:66%}
	.slide1 .banner-dhtwo3{ left:55px; top:35px;}
	
}


/* ------------------------手机端-------------------------- */

@media all and (max-width:1000px) {
    .banner-pic .banner-pc{display: none;}
    .banner-pic .banner-mb{display: block;}
    .banner-prev, .banner-next{display: none;}
    .banner-words {left: 3%;width: 94%;}
    .banner-words h4 {font-size: 26px;}
    .banner-words p {font-size: 14px;}
    .banner-words a {width:110px;height:35px;line-height: 35px;}
    .banner .swiper-pagination {bottom: 14px;}
    
	.apply-container{ margin:3% auto; background-size:100%}
	
	
    .product-picwords {margin-top: 20px;}
    .product-picwords ul li{width: 48.5%;padding: 32px 0 40px 0;}
    .product-words h6 {font-size: 20px;}
    .product-words {margin-top: 16px;}
    .product-words p a, .product-words p span {font-size: 12px;}
    .product-words p span {margin: 0 8px;}
    .apply-top ul{margin-left: 0;}
    .apply-top ul li{width: 100%;margin-left: 0;height: auto;}
    .apply-top ul li:last-child{margin-top: 16px;}
    .apply-topsize{height: 140px;}
    .apply-top ul li:nth-child(2)>div:nth-child(2) {margin-top: 16px;}
	
	.apply-top ul li:nth-child(1)>div:nth-child(2){ margin-top:16px}
	
    .apply-words h6 {font-size: 16px;}
    .apply-words p {font-size: 14px; margin-top:8px;}
    .apply-bottom ul li{width: 48%;margin-top: 16px;}
    .apply-bottom {margin-top: 12px;}
    .news-click ul li {width: 92px;height: 40px;line-height: 40px;font-size: 16px;margin: 0 4px;}
    .news-tablist ul li{width: 50% !important;height: 200px;}
    .news-words h4 {font-size: 14px;height: 40px;}
    .news-words p {font-size: 12px;line-height: 18px;margin-top: 8px;height: 54px;}
    .news-words h6 {margin-top: 10px;font-size: 12px;}
    .news-words {bottom: 16px;}
    .news-wordslist ul li{width: 100% !important;height: 180px;}
    .news-wordsbox {margin-top: 28px;}
    .apply-top {margin-top: 32px;}
    .apply-topminl, .apply-topminr{width: 49%;}


    .banner-dhoneimg,.banner-dhtwoimg{display: none;}
}

@media all and (max-width:768px) {
	
	.banner-words h4{ width:80%}
	.banner-words p{ font-size:14px}
	.banner-words a{ font-size:14px; width:100px;}
	.PUBtitle{ margin:5% auto}
	.product_container li h3{ font-size:16px; margin:8% auto; font-family:"微软雅黑"}




}



















