/* bannner */

.swiper1 { --swiper-pagination-color: #fff; --swiper-theme-color: #fff;}
.swiper1 .swiper-slide a { display: block; width: 100%; height: 100%;}
.swiper1 .swiper-slide a img { width: 100%;}
.swiper1 .swiper-slide a img:nth-child(2) { display: none;}
.swiper-pagination1 { margin-bottom: 22px;}


@media screen and (max-width: 1024px) {
    .swiper1 .swiper-slide a img:nth-child(1) { display: none;}
    .swiper1 .swiper-slide a img:nth-child(2) { display: block;}
    .swiper-pagination1 { margin-bottom: 12px;}
}

@media screen and (max-width: 640px) {
    .swiper-pagination1 { margin-bottom: 7px;}
}





/* public */

.title { padding-top: 109px;}
.title h1 { font-size: 48px; color: #222; line-height: 70px;}
.title p { font-size: 18px; color: #666; margin-top: 19px;}

.more a { display: block; width: 164px; height: 54px; font-size: 18px; color: #999; line-height: 52px; text-align: center; border: 1px solid #e0e0e0; border-radius: 30px; transition: all .3s ease;}
.more a:hover { color: #fff; background-color: #008fd7; border-color: #008fd7;}


@media screen and (max-width: 1920px) {
    .title { padding-top: 5.75vw;}
}

@media screen and (max-width: 1440px) {
    .title h1 { font-size: 40px; line-height: 58px;}
    .title p { font-size: 16px; margin-top: 17px;}
    
    .more a { width: 150px; height: 50px; font-size: 16px; line-height: 48px;}
}

@media screen and (max-width: 1024px) {
    .title h1 { font-size: 30px; line-height: 44px;}
    .title p { font-size: 14px; margin-top: 14px;}
    
    .more a { width: 120px; height: 40px; font-size: 15px; line-height: 38px;}
}

@media screen and (max-width: 640px) {
    .title h1 { font-size: 24px; line-height: 38px;}
}





/* products */

.ps-bg { background-color: #fafafa; padding: 85px 0 35px; position: relative;}
.ps-bg .gallery-top .ps-nr { align-items: flex-end;}
.ps-bg .gallery-top .ps-nr .ps-tx { width: 33%; padding-bottom: 140px;}
.ps-bg .gallery-top .ps-nr .ps-tx h3 { font-size: 36px; color: #333;}
.ps-bg .gallery-top .ps-nr .ps-tx p { font-size: 16px; color: #666; line-height: 30px; margin: 14px 0 70px;}
.ps-bg .gallery-top .ps-nr .ps-ig { width: 50%;}
.ps-bg .gallery-top .ps-nr .ps-ig img { width: 100%;}

.ps-bg .gallery-thumbs { position: absolute; right: 75px; top: 75px; width: 150px; background-color: #008fd7; border-radius: 10px; overflow: hidden;}
.ps-bg .gallery-thumbs .swiper-slide { font-size: 18px; color: #fff; line-height: 20px; padding: 20px 25px; cursor: pointer; transition: all .3s ease;}
.ps-bg .gallery-thumbs .swiper-slide:hover, .ps-bg .gallery-thumbs .swiper-slide-thumb-active { background-color: #72bb38;}

.ps-bg .ps-nm { position: absolute; right: 0; top: 0; width: 100%;}
.ps-bg .ps-nm .title { width: 40%;}


@media screen and (max-width: 1920px) {
	.ps-bg .gallery-top .ps-nr { justify-content: flex-start;}
    .ps-bg .gallery-top .ps-nr .ps-tx { width: 29%; padding-bottom: 7.28vw; margin-right: 5%;}
	.ps-bg .gallery-top .ps-nr .ps-tx p { margin: 14px 0 3.64vw;}
}

@media screen and (max-width: 1440px) {
	.ps-bg .gallery-top .ps-nr .ps-tx h3 { font-size: 30px;}
    .ps-bg .gallery-top .ps-nr .ps-tx p { font-size: 15px; line-height: 28px;}
	
	.ps-bg .gallery-thumbs { right: 50px; top: 50px; width: 120px;}
    .ps-bg .gallery-thumbs .swiper-slide { font-size: 16px; padding: 15px 20px;}
}

@media screen and (max-width: 1024px) {
	.ps-bg { padding: 0;}
	.ps-bg .gallery-top .ps-nr { align-items: center; justify-content: space-between;}
	.ps-bg .gallery-top .ps-nr .ps-tx { width: 45%; padding-bottom: 0; margin-right: 0;}
	.ps-bg .gallery-top .ps-nr .ps-tx h3 { font-size: 24px;}
    .ps-bg .gallery-top .ps-nr .ps-tx p { font-size: 14px; margin-top: 11px;}
	
	.ps-bg .gallery-thumbs { position: relative; right: inherit; top: inherit; width: calc(100% - 30px); margin: 6.5vw auto;}
	.ps-bg .gallery-thumbs .swiper-slide { font-size: 15px; padding: 15px; text-align: center;}
	
	.ps-bg .ps-nm { position: relative; right: inherit; top: inherit;}
	.ps-bg .ps-nm .title { width: 50%;}
}

@media screen and (max-width: 640px) {
	.ps-bg .gallery-top .ps-nr .ps-tx h3 { font-size: 20px;}
    .ps-bg .gallery-top .ps-nr .ps-tx p { margin-top: 8px;}
}

@media screen and (max-width: 480px) {
	.ps-bg .gallery-top .ps-nr { flex-wrap: wrap;}
	.ps-bg .gallery-top .ps-nr .ps-tx { width: 100%; margin: 6.5vw 0;}
	.ps-bg .gallery-top .ps-nr .ps-ig { width: 100%;}
	
	.ps-bg .ps-nm .title { width: 100%;}
}




/* application */
.an-bg { height: 960px; position: relative;}
.an-bg .picture-top { height: 100%;}
.an-bg .picture-top .swiper-slide { background-repeat: no-repeat; background-position: center; background-size: cover; height: 100%;}
.an-bg .picture-top .swiper-slide dl { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.15);}
.an-bg .picture-top .swiper-slide img { display: none; width: 100%;}

.an-bg .picture-thumbs { position: absolute; right: 0; top: 0; z-index: 99; width: 50%; height: 100%;}
.an-bg .picture-thumbs .swiper-slide { width: 50%; height: 320px; border-top: 1px solid rgba(255, 255, 255, 0.15); border-left: 1px solid rgba(255, 255, 255, 0.15); cursor: pointer;}
.an-bg .picture-thumbs .swiper-slide:nth-child(1), .an-bg .picture-thumbs .swiper-slide:nth-child(4) { border-top: none;}
.an-bg .picture-thumbs .swiper-slide dl { height: 100%; padding: 55px 17.5% 0 65px; position: relative; transition: all .5s ease;}
.an-bg .picture-thumbs .swiper-slide:hover dl { background-color: rgba(0, 143, 215, 0.85); padding: 25px calc(17.5% + 30px) 0 35px;}
.an-bg .picture-thumbs .swiper-slide-thumb-active dl { padding: 25px calc(17.5% + 30px) 0 35px;}
.an-bg .picture-thumbs .swiper-slide dl h3 { font-size: 30px; color: #fff;}
.an-bg .picture-thumbs .swiper-slide dl p { font-size: 16px; color: #fff; line-height: 28px; margin-top: 7px;}
.an-bg .picture-thumbs .swiper-slide dl a { position: absolute; right: 50px; bottom: 30px; display: block; width: 30px; height: 30px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; background: url(../images/arrow.png) no-repeat center; background-size: 6px 10px; opacity: 0; transition: all .5s ease;}
.an-bg .picture-thumbs .swiper-slide:hover dl a { right: 30px; opacity: 1;}
.an-bg .picture-thumbs .swiper-slide-thumb-active dl a { right: 30px; opacity: 1; border-color: #008fd7; background-color: #008fd7;}
.an-bg .picture-thumbs .swiper-slide-thumb-active:hover dl a { border-color: rgba(255, 255, 255, 0.25); background-color: transparent;}
.an-bg .picture-thumbs .swiper-slide dl a:hover, .an-bg .picture-thumbs .swiper-slide-thumb-active:hover dl a:hover { border-color: #72bb38; background-color: #72bb38;}

.an-bg .an-nm { position: absolute; right: 0; top: 0; z-index: 9; width: 100%;}
.an-bg .an-nm .title { width: 40%;}
.an-bg .an-nm h1 { color: #fff;}
.an-bg .an-nm p { color: #fff;}
.an-bg .an-nm .more { margin-top: 71px;}
.an-bg .an-nm .more a { color: #fff; border-color: rgba(255, 255, 255, 0.5);}
.an-bg .an-nm .more a:hover { border-color: #008fd7;}


@media screen and (max-width: 1920px) {
    .an-bg .an-nm .more { margin-top: 3.7vw;}
}

@media screen and (max-width: 1440px) {
    .an-bg .picture-thumbs .swiper-slide dl { padding: 32px 17.5% 0 40px;}
    .an-bg .picture-thumbs .swiper-slide:hover dl { padding: 12px calc(17.5% + 20px) 0 20px;}
    .an-bg .picture-thumbs .swiper-slide-thumb-active dl { padding: 12px calc(17.5% + 20px) 0 20px;}
    .an-bg .picture-thumbs .swiper-slide dl h3 { font-size: 24px;}
    .an-bg .picture-thumbs .swiper-slide dl p { font-size: 15px; line-height: 24px;}
    .an-bg .picture-thumbs .swiper-slide dl a { right: 40px; bottom: 20px;}
    .an-bg .picture-thumbs .swiper-slide:hover dl a { right: 20px;}
    .an-bg .picture-thumbs .swiper-slide-thumb-active dl a { right: 20px;}
}

@media screen and (max-width: 1024px) {
    .an-bg { height: auto;}
    .an-bg .picture-top .swiper-slide img { display: block;}
    
    .an-bg .picture-thumbs { position: relative; right: inherit; top: inherit; width: 100%; height: 540px;}
    .an-bg .picture-thumbs .swiper-slide { height: 180px; background-color: #008fd7; border-color: rgba(255, 255, 255, 0.1);}
    .an-bg .picture-thumbs .swiper-slide:nth-child(1), .an-bg .picture-thumbs .swiper-slide:nth-child(2), .an-bg .picture-thumbs .swiper-slide:nth-child(3) { border-left: none;}
    .an-bg .picture-thumbs .swiper-slide dl { padding: 14px 20px 0;}
    .an-bg .picture-thumbs .swiper-slide:hover dl { background-color: #72bb38; padding: 14px 20px 0;}
    .an-bg .picture-thumbs .swiper-slide-thumb-active dl { padding: 14px 20px 0;}
    .an-bg .picture-thumbs .swiper-slide dl h3 { font-size: 20px;}
    .an-bg .picture-thumbs .swiper-slide dl p { font-size: 14px;}
    .an-bg .picture-thumbs .swiper-slide dl a { width: 20px; height: 20px; background-size: 4px 7px; right: 25px; bottom: 15px;}
    .an-bg .picture-thumbs .swiper-slide:hover dl a { right: 15px;}
    .an-bg .picture-thumbs .swiper-slide-thumb-active dl a { right: 15px; border-color: #72bb38; background-color: #72bb38;}
	
	.an-bg .an-nm .title { width: 100%;}
}

@media screen and (max-width: 640px) {
    .an-bg .picture-thumbs { height: 600px;}
    .an-bg .picture-thumbs .swiper-slide { height: 200px;}
}

@media screen and (max-width: 480px) {
    .an-bg .picture-thumbs { height: 660px;}
    .an-bg .picture-thumbs .swiper-slide { height: 220px;}
}





/* about */

.at-bg { background-color: #fff; padding: 205px 3.90625% 125px; position: relative;}
.at-bg .at-ms { width: 63%; margin-left: 37%; position: relative;}
.at-bg .at-ms img { width: 100%;}
.at-bg .at-ms .at-lx { position: absolute; right: 8.9%; bottom: 22.5%; width: 350px; height: 180px; background-color: #008fd7; border-radius: 10px; color: #fff; padding: 27px 30px;}
.at-bg .at-ms .at-lx h3 { font-size: 24px;}
.at-bg .at-ms .at-lx ul { margin-top: 19px;}
.at-bg .at-ms .at-lx ul li { line-height: 30px; background-repeat: no-repeat; background-position: left 8px; font-size: 14px; padding-left: 24px;}
.at-bg .at-ms .at-lx ul li:nth-child(1) { background-image: url(../images/at-01.png);}
.at-bg .at-ms .at-lx ul li:nth-child(2) { background-image: url(../images/at-02.png);}

.at-bg .at-zb { position: absolute; left: 0; top: 0; width: 100%;}
.at-bg .at-zb .at-tx { width: 25.75%;}
.at-bg .at-zb .at-tx .at-js { font-size: 16px; color: #666; line-height: 30px; margin-top: 58px;}

.at-bg .at-zb .at-tx ul { margin: 78px 0 122px;}
.at-bg .at-zb .at-tx ul li { font-size: 16px; color: #666;}
.at-bg .at-zb .at-tx ul li h1 { font-family: 'Gotham Bold'; font-size: 60px; color: #008fd7; margin-bottom: 2px;}


@media screen and (max-width: 2048px) {
    .at-bg .at-ms .at-lx { right: 6.05%; bottom: 15.5%;}
}

@media screen and (max-width: 1920px) {
    .at-bg { padding: 14.82vw 3.90625% 6.5vw;}
    .at-bg .at-ms .at-lx { right: 5.05%; bottom: 13.5%;}
    
    .at-bg .at-zb .at-tx { width: 29.75%;}
    .at-bg .at-zb .at-tx .at-js { margin-top: 3.016vw;}
    
    .at-bg .at-zb .at-tx ul { margin: 4.056vw 0 6.344vw;}
}

@media screen and (max-width: 1680px) {
    .at-bg { padding: 14.82vw 3.90625% 10.5vw;}
    .at-bg .at-ms .at-lx { right: 3.05%; bottom: 8.5%;}
}

@media screen and (max-width: 1440px) {
    .at-bg { padding: 14.82vw 3.90625% calc(8.5vw + 80px);}
    .at-bg .at-ms .at-lx { right: 0; bottom: -80px;}
    
    .at-bg .at-zb .at-tx { width: 32.75%;}
    .at-bg .at-zb .at-tx .at-js { font-size: 15px; line-height: 28px;}
    
    .at-bg .at-zb .at-tx ul li { font-size: 15px;}
    .at-bg .at-zb .at-tx ul li h1 { font-size: 48px; margin-bottom: 0;}
}

@media screen and (max-width: 1200px) {
    .at-bg { padding: 8.35vw 3.5%;}
    .at-bg .at-ms { width: 100%; margin-left: 0;}
    .at-bg .at-ms .at-lx { bottom: 0;}
    
    .at-bg .at-zb { position: relative; left: inherit; top: inherit;}
    .at-bg .at-zb .main { margin: 0;}
    .at-bg .at-zb .at-tx { width: 100%;}
}

@media screen and (max-width: 1024px) {
    .at-bg { padding: 8.35vw 15px;}
    .at-bg .at-ms .at-lx { width: 280px; height: 142px; padding: 18px 20px;}
    .at-bg .at-ms .at-lx h3 { font-size: 20px;}
    .at-bg .at-ms .at-lx ul { margin-top: 12px;}
    .at-bg .at-ms .at-lx ul li { background-position: left 9px; background-size: 12px 14px; font-size: 13px; padding-left: 22px;}
    
    .at-bg .at-zb .at-tx .at-js { font-size: 14px;}
    
    .at-bg .at-zb .at-tx ul li { font-size: 14px;}
    .at-bg .at-zb .at-tx ul li h1 { font-size: 36px;}
}

@media screen and (max-width: 640px) {
    .at-bg .at-ms .at-lx { position: relative; right: inherit; bottom: inherit; margin-left: calc(100% - 280px);}
}

@media screen and (max-width: 480px) {
    .at-bg .at-ms .at-lx { margin-left: 0; width: 100%;}
}





/* advantage */

.ae-bg { background: url(../Images/ae-bg.jpg) repeat-y center; background-size: cover; background-attachment: fixed;}
.ae-bg .ae-nr { background-color: rgba(0, 0, 0, 0.15); padding-bottom: 125px;}
.ae-bg .ae-nr .title { padding-top: 84px; text-align: center;}
.ae-bg .ae-nr .title h1 { color: #fff;}
.ae-bg .ae-nr .title p { color: #fff;}

.ae-bg .ae-nr ul { margin: 265px 20px 0;}
.ae-bg .ae-nr ul li { width: 25%; padding: 0 10px; cursor: pointer;}
.ae-bg .ae-nr ul li .ae-tx { height: 300px; background-color: rgba(0, 143, 215, 0.15); padding: 30px; border-radius: 20px; position: relative; transition: all .5s ease;}
.ae-bg .ae-nr ul li:hover .ae-tx { background-color: rgba(0, 143, 215, 0.75);}
.ae-bg .ae-nr ul li .ae-tx img { display: block; width: 50px;}
.ae-bg .ae-nr ul li .ae-tx dl { position: absolute; left: 0; bottom: 0; color: #fff; padding: 30px;}
.ae-bg .ae-nr ul li .ae-tx dl h3 { font-size: 24px;}
.ae-bg .ae-nr ul li .ae-tx dl p { font-size: 16px; line-height: 28px; margin-top: 8px;}


@media screen and (max-width: 1920px) {
    .ae-bg .ae-nr { padding-bottom: 6.5vw;}
    .ae-bg .ae-nr .title { padding-top: 4.368vw;}
    .ae-bg .ae-nr ul { margin: 13.78vw 20px 0;}
}

@media screen and (max-width: 1440px) {
    .ae-bg .ae-nr ul li .ae-tx { padding: 20px;}
    .ae-bg .ae-nr ul li .ae-tx img { width: 42px;}
    .ae-bg .ae-nr ul li .ae-tx dl { padding: 20px;}
    .ae-bg .ae-nr ul li .ae-tx dl h3 { font-size: 22px;}
    .ae-bg .ae-nr ul li .ae-tx dl p { font-size: 15px; line-height: 26px; margin-top: 9px;}
}

@media screen and (max-width: 1024px) {
    .ae-bg .ae-nr ul { margin: 13.78vw 5px 0;}
    .ae-bg .ae-nr ul li .ae-tx { padding: 15px;}
    .ae-bg .ae-nr ul li .ae-tx img { width: 36px;}
    .ae-bg .ae-nr ul li .ae-tx dl { padding: 15px;}
    .ae-bg .ae-nr ul li .ae-tx dl h3 { font-size: 20px;}
    .ae-bg .ae-nr ul li .ae-tx dl p { font-size: 14px; line-height: 24px;}
}

@media screen and (max-width: 768px) {
    .ae-bg .ae-nr ul { flex-wrap: wrap;}
    .ae-bg .ae-nr ul li { width: 50%;}
    .ae-bg .ae-nr ul li:nth-child(n+3) { margin-top: 20px;}
    .ae-bg .ae-nr ul li .ae-tx { height: 250px;}
}





/* news */

.ns-bg { background-color: #fff; padding-bottom: 150px;}
.ns-bg .ns-ls { margin-top: 96px;}
.ns-bg .ns-ls .ns-zb { width: 48.125%;}
.ns-bg .ns-ls .ns-zb a { display: block; border-radius: 10px; overflow: hidden; position: relative;}
.ns-bg .ns-ls .ns-zb a dl { height: 540px; background-repeat: no-repeat; background-position: center; background-size: cover; transition: all .5s ease;}
.ns-bg .ns-ls .ns-zb a:hover dl { transform: scale(1.2,1.2); -webkit-transform: scale(1.2,1.2);}
.ns-bg .ns-ls .ns-zb a dl img { width: 100%; display: none;}
.ns-bg .ns-ls .ns-zb a p { position: absolute; left: 0; bottom: 0; width: 100%; font-size: 24px; color: #fff; padding: 25px 35px; background:linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); background:-webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); transition: all .5s ease;}
.ns-bg .ns-ls .ns-zb a:hover p { background:linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)); background:-webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));}

.ns-bg .ns-ls .ns-yb { width: 48.125%;}
.ns-bg .ns-ls .ns-yb a:nth-child(2) { margin-top: 60px;}
.ns-bg .ns-ls .ns-yb a div { width: 43.55%; position: relative;}
.ns-bg .ns-ls .ns-yb a div dt { width: 68px; font-size: 14px; color: #fff; line-height: 22px; text-align: center; background-color: #008fd7; border-radius: 3px; margin: 20px 0 18px;}
.ns-bg .ns-ls .ns-yb a div p { font-size: 24px; color: #333; line-height: 34px;}
.ns-bg .ns-ls .ns-yb a div span { position: absolute; left: 0; bottom: 18px; display: block; font-family: 'Gotham Book'; font-size: 14px; color: #999;}
.ns-bg .ns-ls .ns-yb a dl { width: 46.75%; border-radius: 10px; overflow: hidden;}
.ns-bg .ns-ls .ns-yb a dl p { height: 240px; background-repeat: no-repeat; background-position: center; background-size: cover; transition: all .5s ease;}
.ns-bg .ns-ls .ns-yb a:hover dl p { transform: scale(1.2,1.2); -webkit-transform: scale(1.2,1.2);}
.ns-bg .ns-ls .ns-yb a dl p img { width: 100%; display: none;}


@media screen and (max-width: 1920px) {
    .ns-bg { padding-bottom: 7.8vw;}
    .ns-bg .ns-ls { margin-top: 5vw;}
}

@media screen and (max-width: 1440px) {
    .ns-bg .ns-ls .ns-zb a dl { height: 452px;}
    .ns-bg .ns-ls .ns-zb a p { font-size: 20px; padding: 20px 25px;}
    
    .ns-bg .ns-ls .ns-yb a:nth-child(2) { margin-top: 52px;}
    .ns-bg .ns-ls .ns-yb a div dt { margin: 10px 0 13px;}
    .ns-bg .ns-ls .ns-yb a div p { font-size: 20px; line-height: 30px;}
    .ns-bg .ns-ls .ns-yb a div span { bottom: 8px;}
    .ns-bg .ns-ls .ns-yb a dl p { height: 200px;}
}

@media screen and (max-width: 1024px) {
    .ns-bg .ns-ls .ns-zb a dl { height: 335px;}
    .ns-bg .ns-ls .ns-zb a p { font-size: 18px; padding: 10px 15px;}
    
    .ns-bg .ns-ls .ns-yb a:nth-child(2) { margin-top: 35px;}
    .ns-bg .ns-ls .ns-yb a div { width: 47.55%;}
    .ns-bg .ns-ls .ns-yb a div dt { margin: 0 0 11px;}
    .ns-bg .ns-ls .ns-yb a div p { font-size: 18px; line-height: 24px;}
    .ns-bg .ns-ls .ns-yb a div span { bottom: -2px;}
    .ns-bg .ns-ls .ns-yb a dl p { height: 150px;}
}

@media screen and (max-width: 768px) {
    .ns-bg .ns-ls { flex-wrap: wrap;}
    .ns-bg .ns-ls .ns-zb { width: 100%;}
    .ns-bg .ns-ls .ns-zb a dl { height: auto;}
    .ns-bg .ns-ls .ns-zb a dl img { display: block;}
    
    .ns-bg .ns-ls .ns-yb { width: 100%; margin-top: 35px;}
    .ns-bg .ns-ls .ns-yb a dl p { height: auto;}
    .ns-bg .ns-ls .ns-yb a dl p img { display: block;}
}

@media screen and (max-width: 640px) {
    .ns-bg .ns-ls .ns-zb a p { font-size: 16px;}
    
    .ns-bg .ns-ls .ns-yb a div { width: 49.55%;}
    .ns-bg .ns-ls .ns-yb a div dt { margin: 0 0 10px;}
    .ns-bg .ns-ls .ns-yb a div p { font-size: 16px;}
}

@media screen and (max-width: 480px) {
    .ns-bg .ns-ls .ns-yb a { align-items: center;}
    .ns-bg .ns-ls .ns-yb a div span { position: relative; left: inherit; bottom: inherit; margin-top: 13px;}
}