/* 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: 9.45vh;}
.title h1 { font-family: 'OPPOSans-Bold'; font-size: 48px; font-weight: normal; color: #222;}
.title p { font-size: 18px; color: #666; line-height: 36px; margin-top: 2.25vh;}

.label h1 { font-family: 'OPPOSans-Bold'; font-size: 48px; font-weight: normal; color: #222; line-height: 72px; margin-top: -12px;}
.label p { font-size: 18px; color: #666; line-height: 36px; margin-top: 2.15vh;}

.more a { width: 184px; height: 58px; background: url(../Images/lj-01.png) no-repeat; background-size: 184px 58px; margin-top: 7vh; padding: 0 40px 0 35px; transition: all .3s ease;}
.more a:hover { padding: 0 30px 0 25px;}
.more a div { font-size: 16px; color: #fff; line-height: 58px;}
.more a dl { width: 30px; height: 58px; background: url(../Images/lj-02.png) no-repeat center; background-size: 30px 8px;}


@media screen and (max-width: 1440px) {
    .title h1 { font-size: 40px;}
    .title p { font-size: 16px; line-height: 32px;}
    
    .label h1 { font-size: 40px; line-height: 60px; margin-top: -10px;}
    .label p { font-size: 16px; line-height: 32px;}
}

@media screen and (max-width: 1024px) {
    .title { padding-top: 5.15vh;}
    .title h1 { font-size: 30px;}
    .title p { font-size: 14px; line-height: 28px; margin-top: 2.1vh;}
    
    .label h1 { font-size: 30px; line-height: 45px; margin-top: -8px;}
    .label p { font-size: 14px; line-height: 28px;}
    
    .more a { width: 152px; height: 48px; background-size: 152px 48px; margin-top: 4vh; padding: 0 30px 0 25px;}
    .more a:hover { padding: 0 20px 0 15px;}
    .more a div { font-size: 14px; line-height: 48px;}
    .more a dl { width: 24px; height: 48px; background-size: 24px 6px;}
}

@media screen and (max-width: 640px) {
    .title { padding-top: 4.45vh;}
    .title h1 { font-size: 24px;}
    .title p { margin-top: 1.7vh;}
    
    .label h1 { font-size: 24px; line-height: 36px; margin-top: -6px;}
}





/* advantage */

.ae-bg { background: url(../Images/ae-bg.jpg) repeat-y center; padding: 9.55vh 0 11.35vh;}
.ae-bg .ae-nr { align-items: center;}

.ae-bg .ae-nr .ae-tx { width: 39%;}
.ae-bg .ae-nr .ae-tx .label dl { font-size: 30px; color: #00a0e9; line-height: 48px; padding: 1.9vh 0 1.55vh;}
.ae-bg .ae-nr .ae-tx .label p { margin-top: 0.9vh;}

.ae-bg .ae-nr .ae-ig { width: 53%; position: relative;}
.ae-bg .ae-nr .ae-ig .swiper2 { width: 94%; margin-right: 6%;}
.ae-bg .ae-nr .ae-ig .swiper2 img { width: 100%;}
.ae-bg .ae-nr .ae-ig .swiper-button-next2 { right: 0; width: 100px; height: 100px; font-family: 'Gotham Book'; font-size: 18px; color: #fff; background: #00a0e9; border-radius: 50%; box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.2); transition: all .3s ease;}
.ae-bg .ae-nr .ae-ig .swiper-button-next2:hover { font-size: 24px; box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.4);}
.ae-bg .ae-nr .ae-ig .swiper-button-next:after, .ae-bg .ae-nr .ae-ig .swiper-container-rtl .swiper-button-prev:after { content: '';}


@media screen and (max-width: 1440px) {
    .ae-bg .ae-nr .ae-tx .label dl { font-size: 24px; line-height: 38px;}
    
    .ae-bg .ae-nr .ae-ig .swiper-button-next2 { width: 80px; height: 80px; font-size: 16px;}
    .ae-bg .ae-nr .ae-ig .swiper-button-next2:hover { font-size: 20px;}
}

@media screen and (max-width: 1024px) {
    .ae-bg { padding: 5.25vh 0 6.1vh;}
    
    .ae-bg .ae-nr .ae-tx .label dl { font-size: 18px; line-height: 30px; padding: 1.6vh 0 .85vh;}
    .ae-bg .ae-nr .ae-tx .label p { margin-top: 0.5vh;}
    
    .ae-bg .ae-nr .ae-ig .swiper-button-next2 { width: 60px; height: 60px; font-size: 14px;}
    .ae-bg .ae-nr .ae-ig .swiper-button-next2:hover { font-size: 18px;}
}

@media screen and (max-width: 640px) {
    .ae-bg { background: #fff; padding: 4.05vh 0 5.2vh;}
    .ae-bg .ae-nr { flex-wrap: wrap;}
    
    .ae-bg .ae-nr .ae-tx { width: 100%;}
    .ae-bg .ae-nr .ae-tx .label dl { padding: 1.35vh 0 .85vh;}
    
    .ae-bg .ae-nr .ae-ig { width: 100%; margin-top: 5.25vh;}
}





/* material */

.ml-bg { background: url(../Images/ml-bg.jpg) no-repeat center; background-size: cover; padding-bottom: 11.35vh;}
.ml-bg ul { align-items: flex-end; margin-top: 9.75vh;}
.ml-bg ul li { width: 25%; color: #fff; background-color: #00a0e9; padding: 2.36vw 2.16vw 2.36vw 1.76vw;}
.ml-bg ul li:nth-child(2n) { background-color: #444;}
.ml-bg ul li:nth-child(2) { padding: 2.72vw 2.16vw 2.72vw 1.76vw;}
.ml-bg ul li:nth-child(3) { padding: 3.12vw 2.16vw 3.12vw 1.76vw;}
.ml-bg ul li h3 { font-family: 'OPPOSans-Bold'; font-size: 24px; font-weight: normal; margin-bottom: 1.25vh;}
.ml-bg ul li dl { font-size: 14px; line-height: 24px; opacity: .5; padding: 2px 0 1.45vh;}
.ml-bg ul li:nth-child(3) dl { opacity: .75;}
.ml-bg ul li p { font-size: 18px; line-height: 30px;}


@media screen and (max-width: 1440px) {
    .ml-bg ul li h3 { font-size: 22px;}
    .ml-bg ul li p { font-size: 16px; line-height: 27px;}
}

@media screen and (max-width: 1024px) {
    .ml-bg { padding-bottom: 6.45vh;}
    .ml-bg ul { margin-top: 5.15vh;}
    .ml-bg ul li h3 { font-size: 20px;}
    .ml-bg ul li dl { font-size: 13px; line-height: 20px;}
    .ml-bg ul li p { font-size: 14px; line-height: 24px;}
}

@media screen and (max-width: 640px) {
    .ml-bg { padding-bottom: 4.85vh;}
    .ml-bg ul { flex-wrap: wrap; margin-top: 3.55vh;}
    .ml-bg ul li { width: 100%; padding: 20px;}
    .ml-bg ul li:nth-child(2) { padding: 20px;}
    .ml-bg ul li:nth-child(3) { padding: 20px;}
    .ml-bg ul li dl { display: none;}
}





/* application */

.an-bg { background-color: #fff;}
.an-bg .an-qh { margin-top: 5.8vh; border-top: 1px solid #e5e5e5;}
.an-bg .gallery-thumbs { overflow: inherit;}
.an-bg .gallery-thumbs .swiper-slide { line-height: 84px; font-size: 18px; color: #333; text-align: center; cursor: pointer; position: relative;}
.an-bg .gallery-thumbs .swiper-slide:hover, .an-bg .gallery-thumbs .swiper-slide-thumb-active { color: #00a0e9;}
.an-bg .gallery-thumbs .swiper-slide:hover::before, .an-bg .gallery-thumbs .swiper-slide-thumb-active::before { position: absolute; left: 50%; top: -9px; margin-left: -9px; content: ""; width: 17px; height: 17px; border: 3px solid #00a0e9; background-color: #fff; border-radius: 50%;}

.an-bg .gallery-top .swiper-slide { background-repeat: no-repeat; background-position: center; background-size: cover; background-attachment: fixed; padding: 11vh 0 11.75vh;}
.an-bg .gallery-top .swiper-slide img { display: none;}
.an-bg .gallery-top .swiper-slide .main { justify-content: flex-end;}
.an-bg .gallery-top .swiper-slide .an-tx { width: 43%; min-width: 720px; background-color: #fff; padding: 4.55vh;}
.an-bg .gallery-top .swiper-slide .an-tx h2 { font-family: 'OPPOSans-Bold'; font-size: 36px; font-weight: normal; color: #222;}
.an-bg .gallery-top .swiper-slide .an-tx p { font-size: 18px; color: #666; line-height: 36px; margin-top: 1.5vh;}
.an-bg .gallery-top .swiper-slide .an-tx ul { flex-wrap: wrap; margin-top: 1.5vh;}
.an-bg .gallery-top .swiper-slide .an-tx ul li { width: 47%; height: 64px; border-bottom: 1px solid #e9e9e9; font-size: 18px; color: #333; line-height: 64px;}
.an-bg .gallery-top .swiper-slide .an-tx ul li.an { border-bottom: none;}
.an-bg .gallery-top .swiper-slide .an-tx .more a { margin-top: 4.5vh;}


@media screen and (max-width: 1440px) {
    .an-bg .gallery-thumbs .swiper-slide { line-height: 74px; font-size: 16px;}
	
	.an-bg .gallery-top .swiper-slide .an-tx { min-width: 600px; padding: 3.55vh;}
	.an-bg .gallery-top .swiper-slide .an-tx h2 { font-size: 30px;}
    .an-bg .gallery-top .swiper-slide .an-tx p { font-size: 16px; line-height: 30px;}
	.an-bg .gallery-top .swiper-slide .an-tx ul li { height: 56px; font-size: 16px; line-height: 56px;}
}

@media screen and (max-width: 1024px) {
    .an-bg .an-qh { margin-top: 3.85vh;}
    .an-bg .gallery-thumbs .swiper-slide { line-height: 64px;}
	.an-bg .gallery-thumbs .swiper-slide:hover::before, .an-bg .gallery-thumbs .swiper-slide-thumb-active::before { top: -7px; margin-left: -7px; width: 13px; height: 13px; border: 2px solid #00a0e9;}
	
	.an-bg .gallery-top .swiper-slide { padding: 7vh 0 7.35vh;}
	.an-bg .gallery-top .swiper-slide .an-tx { min-width: 480px; padding: 2.55vh;}
	.an-bg .gallery-top .swiper-slide .an-tx h2 { font-size: 24px;}
    .an-bg .gallery-top .swiper-slide .an-tx p { font-size: 14px; line-height: 28px;}
	.an-bg .gallery-top .swiper-slide .an-tx ul li { height: 50px; font-size: 14px; line-height: 50px;}
}

@media screen and (max-width: 640px) {
    .an-bg .an-qh { margin-top: 3.1vh;}
    .an-bg .gallery-thumbs .swiper-slide { line-height: 54px;}
	
	.an-bg .gallery-top .swiper-slide { padding: 0;}
    .an-bg .gallery-top .swiper-slide img { display: block; width: 100%;}
    .an-bg .gallery-top .swiper-slide .main { margin: 0;}
	.an-bg .gallery-top .swiper-slide .an-tx { width: 100%; min-width: inherit; background-color: #fafafa; padding: 25px 15px 35px;}
	.an-bg .gallery-top .swiper-slide .an-tx h2 { font-size: 20px;}
    .an-bg .gallery-top .swiper-slide .an-tx p { margin-top: 12px;}
	.an-bg .gallery-top .swiper-slide .an-tx ul { margin-top: 4px;}
    .an-bg .gallery-top .swiper-slide .an-tx .more a { margin-top: 35px;}
}






/* about */

.at-bg { background-color: #fff; padding: 9.55vh 0 11.35vh;}
.at-bg .at-ls { align-items: center;}

.at-bg .at-ls .at-tx { width: 34%;}
.at-bg .at-ls .at-tx ul { margin-top: 3.6vh; padding-bottom: .35vh;}
.at-bg .at-ls .at-tx ul li { font-size: 15px; color: #999;}
.at-bg .at-ls .at-tx ul li h1 { font-size: 48px; font-weight: normal; color: #00a0e9;}

.at-bg .at-ls .at-ig { width: 59%; position: relative;}
.at-bg .at-ls .at-ig img { width: 100%;}
.at-bg .at-ls .at-ig dl { position: absolute; top: 87.5%; right: 12.5%; font-size: 24px; color: #333; line-height: 36px;}
.at-bg .at-ls .at-ig dl h2 { font-family: 'OPPOSans-Bold'; font-size: 30px; font-weight: normal; color: #00a0e9; margin-bottom: 5px;}


@media screen and (max-width: 1440px) {
    .at-bg .at-ls .at-tx ul li { font-size: 14px;}
    .at-bg .at-ls .at-tx ul li h1 { font-size: 36px;}
    
    .at-bg .at-ls .at-ig dl { font-size: 20px; line-height: 30px;}
    .at-bg .at-ls .at-ig dl h2 { font-size: 24px;}
}

@media screen and (max-width: 1024px) {
    .at-bg { padding: 5.35vh 0 6.1vh;}
    
    .at-bg .at-ls .at-tx ul { margin-top: 2.5vh;}
    .at-bg .at-ls .at-tx ul li h1 { font-size: 30px;}
    
    .at-bg .at-ls .at-ig dl { font-size: 16px; line-height: 24px;}
    .at-bg .at-ls .at-ig dl h2 { font-size: 20px;}
}

@media screen and (max-width: 640px) {
    .at-bg { padding: 4.15vh 0 8.8vh;}
    .at-bg .at-ls { flex-wrap: wrap;}
    
    .at-bg .at-ls .at-tx { width: 100%;}
    
    .at-bg .at-ls .at-ig { width: 100%; margin-top: 6.05vh;}
}

@media screen and (max-width: 480px) {
    .at-bg .at-ls .at-ig dl { right: 5%; font-size: 14px;}
    .at-bg .at-ls .at-ig dl h2 { font-size: 18px;}
}

@media screen and (max-width: 430px) {
    .at-bg { padding: 4.15vh 0 11.4vh;}
    .at-bg .at-ls .at-ig dl { right: 0;}
}





/* service */

.se-bg { background: url(../Images/se-bg.jpg) no-repeat 50%; background-size: cover; background-position: center; background-attachment: fixed; padding: 9.5vh 0 9.9vh;}
.se-bg .se-ls { align-items: center;}
.se-bg .se-ls .se-tx { width: 60%;}
.se-bg .se-ls .se-tx .label h1 { color: #fff;}
.se-bg .se-ls .se-tx .label p { color: rgba(255, 255, 255, .6);}

.se-bg .se-ls .se-in { width: 25%;}
.se-bg .se-ls .se-in ul { flex-wrap: wrap;}
.se-bg .se-ls .se-in ul li { width: 48.214286%; background-color: #fff; padding: 6.05vw 20px 18px; position: relative; cursor: pointer; transition: all .3s ease;}
.se-bg .se-ls .se-in ul li:nth-child(n+3) { margin-top: 3.571428%;}
.se-bg .se-ls .se-in ul li h3 { font-size: 20px; font-weight: normal; color: #333; transition: all .3s ease;}
.se-bg .se-ls .se-in ul li dl { position: absolute; right: 20px; top: 20px; width: 40px; overflow: hidden;}
.se-bg .se-ls .se-in ul li dl img { width: 100%;}
.se-bg .se-ls .se-in ul li dl img:nth-child(2) { display: none;}

.se-bg .se-ls .se-in ul li:hover { background-color: #00a0e9;}
.se-bg .se-ls .se-in ul li:hover h3 { color: #fff;}
.se-bg .se-ls .se-in ul li:hover dl img:nth-child(1) { display: none;}
.se-bg .se-ls .se-in ul li:hover dl img:nth-child(2) { display: block;}


@media screen and (max-width: 1440px) {
    .se-bg .se-ls .se-in ul li { padding: 8.4vw 15px 13px;}
    .se-bg .se-ls .se-in ul li h3 { font-size: 18px;}
    .se-bg .se-ls .se-in ul li dl { right: 15px; top: 15px; width: 36px;}
}

@media screen and (max-width: 1024px) {
    .se-bg { padding: 6.05vh 0 6.45vh;}
    
    .se-bg .se-ls .se-in { width: 30%;}
    .se-bg .se-ls .se-in ul li { padding: 10.1vw 15px 13px;}
    .se-bg .se-ls .se-in ul li dl { width: 30px;}
}

@media screen and (max-width: 640px) {
    .se-bg { padding: 4.1vh 0 4.9vh;}
    .se-bg .se-ls { flex-wrap: wrap;}
    .se-bg .se-ls .se-tx { width: 100%;}
    
    .se-bg .se-ls .se-in { width: 100%; margin-top: 5.3vh;}
    .se-bg .se-ls .se-in ul li { padding: 12.5vw 15px 13px;}
    .se-bg .se-ls .se-in ul li dl { right: 10px; top: 10px;}
}





/* news */

.ns-bg { background-color: #fafafa; padding-bottom: 13.3vh;}
.ns-bg .title { padding-right: 28.5%;}

.ns-bg .ns-ls { margin-top: 9.5vh;}
.ns-bg .ns-ls a { width: 31.4%; height: 350px; background-color: #fff; position: relative; transition: all .3s ease;}
.ns-bg .ns-ls a div { position: absolute; left: 0; bottom: 0; padding: 30px;}
.ns-bg .ns-ls a div h4 { font-size: 18px; font-weight: normal; color: #999; transition: all .3s ease;}
.ns-bg .ns-ls a div h3 { font-size: 24px; font-weight: normal; color: #333; line-height: 38px; margin-top: 1.7vh; transition: all .3s ease;}
.ns-bg .ns-ls a dl { position: absolute; right: 30px; top: 30px; width: 24px; height: 24px; background: url(../images/jt-01.png); background-size: 24px 24px; transition: all .3s ease;}

.ns-bg .ns-ls a:hover { background-color: #00a0e9;}
.ns-bg .ns-ls a:hover div h4 { color: #fff;}
.ns-bg .ns-ls a:hover div h3 { color: #fff;}
.ns-bg .ns-ls a:hover dl { background-image: url(../Images/jt-02.png);}


@media screen and (max-width: 1440px) {
    .ns-bg .ns-ls a { height: 300px;}
    .ns-bg .ns-ls a div h4 { font-size: 16px;}
    .ns-bg .ns-ls a div h3 { font-size: 22px; line-height: 34px;}
}

@media screen and (max-width: 1024px) {
    .ns-bg { padding-bottom: 6.9vh;}
    .ns-bg .title { padding-right: 0;}
    
    .ns-bg .ns-ls { margin-top: 5.25vh;}
    .ns-bg .ns-ls a { height: 250px;}
    .ns-bg .ns-ls a div { padding: 20px;}
    .ns-bg .ns-ls a div h4 { font-size: 14px;}
    .ns-bg .ns-ls a div h3 { font-size: 18px; line-height: 30px; margin-top: 1.2vh;}
    .ns-bg .ns-ls a dl { right: 20px; top: 20px; width: 20px; height: 20px; background-size: 20px 20px;}
}

@media screen and (max-width: 640px) {
    .ns-bg { padding-bottom: 5.2vh;}
    .ns-bg .title { padding-top: 4vh;}
    .ns-bg .title h1 { line-height: 36px;}
    
    .ns-bg .ns-ls { flex-wrap: wrap;}
    .ns-bg .ns-ls a { width: 100%; height: auto; padding-top: 40px;}
    .ns-bg .ns-ls a:nth-child(n+2) { margin-top: 25px;}
    .ns-bg .ns-ls a div { position: relative; left: inherit; bottom: inherit;}
    .ns-bg .ns-ls a dl { width: 16px; height: 16px; background-size: 16px 16px;}
}