main { overflow: hidden; zoom: 1 }

/*slide*/
.slide { position: relative; width: 100%; height: calc(100vh - 120px) }
.slide .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover }
.slide .slide-title { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; position: absolute; inset: 0; z-index: 2; height: 100%; color: #fff }
.slide .slide-title>span { display: block; margin-top: 18%; line-height: 72px; font-weight: 600; font-size: 66px; opacity: 0; visibility: hidden; transform: translateY(60%) }
.slide .slide-title h2 { margin-top: 10px; line-height: 1.2; font-weight: 600; font-size: 92px; opacity: 0; visibility: hidden; transform: translateY(100%) }
.slide .slide-title .slide-info { margin-top: 100px; opacity: 0; visibility: hidden; transform: translateY(100%) }
.slide .slide-title .slide-info p { line-height: 40px; font-size: 26px }
.slide .swiper-slide.swiper-slide-active .slide-title>span, .slide .swiper-slide.swiper-slide-active .slide-title h2, .slide .swiper-slide.swiper-slide-active .slide-title .slide-info { opacity: 1; visibility: visible; transform: translateY(0); transition: 1s 0.6s cubic-bezier(0.15, 1, 0.35, 1) }
.slide .swiper-slide.swiper-slide-active .slide-title h2, .slide .swiper-slide.swiper-slide-active .slide-title .slide-info { transition: all 2s cubic-bezier(0.15, 1, 0.35, 1) 0.75s }
.slide-page { display: flex; justify-content: center; align-items: center; position: absolute; bottom: 32px; left: 0; z-index: 1; width: 100%; height: 24px }
.slide-page .page-bullet { display: block; width: 24px; height: 24px; border-radius: 100%; background: rgba(255, 255, 255, 1); margin-left: 22px; cursor: pointer }
.slide-page .page-bullet:first-child { margin-left: 0 }
.slide-page .page-bullet.page-active { background: linear-gradient(90deg, #e60013, #e60013) }

/*title*/
.title { position: relative; text-align: center }
.title h2 { display: inline-block; line-height: 1.6; font-weight: 600; font-size: 50px; color: #000 }
.title h2::after { content: ''; display: block; width: 100%; height: 5px; background: #0032ad }
.title span { display: block; margin-top: 16px; font-size: 21px; color: #000 }

.more a { position: relative; display: block; width: initial; height: 64px; padding: 0 57px; line-height: 64px; font-size: 18px; color: #1795ae; border-radius: 33px; border: 1px solid #1795ae; overflow: hidden; transition: all .3s ease }
.more a span { position: relative; z-index: 1 }
.more a:hover { color: #fff }
.more a::after { content: ''; position: absolute; top: 0; left: 0; height: 100%; background: linear-gradient(90deg, #1c87c8, #12a392); width: 0 }
.more a:hover::after { width: 100%; transition: width 1s ease 0s, opacity 1s ease 0s, transform 1s ease 0.9s }

.guild { justify-content: center }

/*appbox*/
.appbox { padding-top: 100px }
.app { margin-top: 70px }
.app ul>li { padding-left: 5px; padding-right: 5px }
.app ul>li>a { position: relative; display: block; overflow: hidden; color: #fff; background: #fff }
.app ul>li>a figure { position: relative; margin: 0; overflow: hidden }
.app ul>li>a figure::before { content: ""; display: block; background-size: cover; background-position: 50%; padding-bottom: 147.4% }
.app ul>li>a figure::after { content: ""; display: block; position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; background: rgba(0, 0, 0, .45) }
.app ul>li>a figure img { display: inline-block; width: 100%; height: 100%; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: all .4s ease; -moz-transition: all .4s ease; transition: all .4s ease; position: absolute; top: 0; object-fit: cover }
.app ul>li>a:hover figure img { transform: scale3d(1.1, 1.1, 1) }
.app ul>li>a h3 { position: absolute; left: 0; bottom: 0; right: 0; z-index: 2; width: 100%; height: 84px; padding-left: 15px; padding-right: 15px; text-align: center; line-height: 84px; font-weight: 600; font-size: 30px; background: rgba(0, 50, 173, .5) }

/*product*/
.productbox { padding-top: 100px }
.productbg { width: 100%; margin-top: 70px; padding-top: 156px; padding-bottom: 174px; background: #ededed }
.product { margin-left: 58px; margin-right: 58px }
.product .product-item { max-width: 25% }
.product .product-item a { position: relative; display: block; overflow: hidden; color: #fff; background: #fff }
.product .product-item a figure { position: relative; margin: 0; overflow: hidden }
.product .product-item a figure::before { content: ""; display: block; background-size: cover; background-position: 50%; padding-bottom: 85.5% }
.product .product-item a figure::after { content: ""; display: block; position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; background: rgba(0, 0, 0, .45) }
.product .product-item a figure img { display: inline-block; width: 100%; height: 100%; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: all .4s ease; -moz-transition: all .4s ease; transition: all .4s ease; position: absolute; top: 0; object-fit: cover }
.product .product-item a:hover figure img { transform: scale3d(1.1, 1.1, 1) }
.product .product-item a h3 { position: absolute; left: 0; bottom: 0; right: 0; z-index: 2; width: 100%; height: 60px; padding-left: 15px; padding-right: 15px; text-align: center; line-height: 60px; font-size: 28px; background: rgba(0, 50, 173, .5); box-sizing: border-box }
.product-prev, .product-next { position: absolute; top: 50%; z-index: 1; width: 80px; height: 80px; transform: translateY(-50%); cursor: pointer; transition: 0.3s; background: transparent }
.product-prev::after, .product-next::after { content: ''; position: absolute; left: 50%; top: 50%; width: 62.5%; height: 62.5%; border-top: 4px solid rgba(0, 50, 173, 1) }
.product-prev { left: 0 }
.product-prev::after { border-left: 4px solid rgba(0, 50, 173, 1); transform: translate(-30%, -50%) rotate(-45deg) }
.product-next { right: 0 }
.product-next::after { border-right: 4px solid rgba(0, 50, 173, 1); transform: translate(-70%, -50%) rotate(45deg) }
.product-prev:hover { border-color: transparent }
.product-next:hover { border-color: transparent }
.product-prev:hover::after, .product-next:hover::after { border-color: #000 }

/*news*/
.newsbox { padding-top: 100px }
.news { margin-top: 70px }
.news-img { max-height: 670px; margin: 0 }
.news-img img { display: inline-block; width: 100%; height: 100%; object-fit: cover }
.news-list li + li { margin-top: 25px }
.news-list li>a { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 20px 40px; font-size: 16px; color: #7b7b7b; border: 1px solid #bababa; overflow: hidden; transition: all .3s ease }
.news-list li>a .news-date { margin-right: 40px; padding-right: 40px; border-right: 2px solid #c7c7c7; color: #8d8d8d; text-align: center; white-space: nowrap }
.news-list li>a .news-date .big { display: block; line-height: 1; font-weight: 600; font-size: 75px }
.news-list li>a .news-date .small { display: block; margin-top: 6px; font-size: 25px; color: #8d8d8d }
.news-list li>a .news-info { flex: 0 0 calc(100% - 180px); max-width: calc(100% - 180px); color: #000; transition: all .3s ease }
.news-list li>a .news-info h3.tit { display: block; width: 100%; max-height: 68px; line-height: 34px; font-size: 28px }
.news-list li>a .news-info p.txt { margin-top: 25px; line-height: 30px; font-size: 18px }
.news-list li>a:hover .news-info { transform: translateX(0.3em) }
.news-list li>a:hover .news-info h3.tit { color: var(--hover-color) }

/*partners*/
.partnersbox { padding: 100px 0 60px }
.partners { margin-top: 70px }
.partners li:nth-child(n+6) { margin-top: 50px }
.partners li>a { display: block; transition: all .1s ease; overflow: hidden }
.partners li>a figure { display: flex; justify-content: center; align-items: center; width: 100%; height: 130px; margin: 0; background-color: #fff; overflow: hidden }
.partners li>a figure img { display: block; max-width: 100%; max-height: 100%; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: all .4s ease; transition: all .4s ease }
.partners li>a:hover figure img { transform: scale3d(1.1, 1.1, 1.1) }

/*grid*/
@media (max-width:1440px) {
	/*slide*/
	.slide { height: calc(100vh - 100px) }
	.slide .slide-title>span { line-height: 66px; font-size: 52px }
	.slide .slide-title h2 { line-height: 1.2; font-size: 82px }
	.slide .slide-title .slide-info { margin-top: 60px }
	.slide .slide-title .slide-info p { font-size: 24px }

	/*title*/
	.title h2 { font-size: 42px }
	.title span { font-size: 20px }

	.more a { height: 60px; padding: 0 50px; line-height: 60px; border-radius: 30px }

	/*appbox*/
	.app ul>li>a h3 { height: 80px; line-height: 80px; font-size: 24px }

	/*product*/
	.product .product-item a h3 { height: 56px; line-height: 56px; font-size: 20px }
	.product-prev, .product-next { width: 60px; height: 60px }
	.product-prev { left: 5px }
	.product-next { right: 5px }

	/*news*/
	.news-list li>a .news-date .big { font-size: 56px }
	.news-list li>a .news-date .small { font-size: 24px }
	.news-list li>a .news-info h3.tit { max-height: 60px; line-height: 30px; font-size: 26px }
	.news-list li>a .news-info p.txt { margin-top: 20px; font-size: 16px }

	/*partners*/
	.partners li a figure { height: 120px }
}
@media (max-width:1280px) {  }
@media (max-width:1024px) {
	/*slide*/
	.slide { height: 60vh }
	.slide .slide-title>span { margin-top: 10%; line-height: 60px; font-size: 46px }
	.slide .slide-title h2 { line-height: 1.2; font-size: 72px }
	.slide .slide-title .slide-info { margin-top: 50px }
	.slide .slide-title .slide-info p { font-size: 20px }

	/*title*/
	.title h2 { font-size: 36px }
	.title span { font-size: 18px }

	.more a { height: 52px; padding: 0 40px; line-height: 52px; border-radius: 26px }

	/*appbox*/
	.appbox { padding-top: 60px }
	.app { margin-top: 50px }
	.app ul>li>a h3 { height: 60px; line-height: 60px; font-size: 20px }

	/*product*/
	.productbox { padding-top: 60px }
	.productbg { margin-top: 50px; padding-top: 106px; padding-bottom: 124px }
	.product .product-item a h3 { height: 50px; line-height: 50px; font-size: 18px }
	.product-prev, .product-next { width: 50px; height: 50px }
	.product-prev { left: 10px }
	.product-next { right: 10px }

	/*news*/
	.newsbox { padding-top: 60px }
	.news { margin-top: 50px }
	.news-list li + li { margin-top: 20px }
	.news-list li>a { padding: 15px 30px }
	.news-list li>a .news-date { margin-right: 30px; padding-right: 30px }
	.news-list li>a .news-date .big { font-size: 50px }
	.news-list li>a .news-date .small { font-size: 20px }
	.news-list li>a .news-info { flex: 0 0 calc(100% - 140px); max-width: calc(100% - 140px) }
	.news-list li>a .news-info h3.tit { max-height: 60px; line-height: 30px; font-size: 24px }
	.news-list li>a .news-info p.txt { margin-top: 20px; font-size: 16px }

	/*partners*/
	.partnersbox { padding: 60px 0 40px }
	.partners { margin-top: 50px }
	.partners li a figure { height: 100px }
}
@media screen and (min-width:767px) and (max-width:992px) {
  	 .product .product-item { max-width: 33.333% }
}
@media (max-width:768px) {
	/*slide*/
	.slide .slide-title>span { line-height: 56px; font-size: 42px }
	.slide .slide-title h2 { font-size: 66px }
	.slide .slide-title .slide-info { margin-top: 40px }
	.slide .slide-title .slide-info p { font-size: 18px }

	/*title*/
	.title h2 { font-size: 32px }
	.title span { font-size: 16px }

	/*appbox*/
	.appbox { padding-top: 50px }
	.app { margin-top: 40px }
	.app ul>li>a h3 { height: 50px; line-height: 50px; font-size: 18px }

	/*product*/
	.productbox { padding-top: 50px }
	.productbg { margin-top: 40px; padding-top: 66px; padding-bottom: 84px }
	.product .product-item { max-width: 33.333% }
	.product .product-item a h3 { height: 42px; line-height: 42px; font-size: 16px }

	/*news*/
	.newsbox { padding-top: 50px }
	.news { margin-top: 40px }
	.news-list li + li { margin-top: 15px }
	.news-list li>a { padding: 10px 20px }
	.news-list li>a .news-date { margin-right: 20px; padding-right: 20px }
	.news-list li>a .news-date .big { font-size: 36px }
	.news-list li>a .news-date .small { font-size: 16px }
	.news-list li>a .news-info { flex: 0 0 calc(100% - 104px); max-width: calc(100% - 104px) }
	.news-list li>a .news-info h3.tit { max-height: 60px; line-height: 24px; font-size: 20px }
	.news-list li>a .news-info p.txt { margin-top: 10px; font-size: 16px }

	/*partners*/
	.partnersbox { padding: 50px 0 30px }
	.partners { margin-top: 40px }
}
@media (max-width:576px) {
	/*slide*/
	.slide { height: 600px }
	.slide .slide-title>span { line-height: 56px; font-size: 28px }
	.slide .slide-title h2 { font-size: 42px }
	.slide .slide-title .slide-info { margin-top: 36px }
	.slide .slide-title .slide-info p { font-size: 16px }
	.slide-page { bottom: 22px; height: 12px }
	.slide-page .page-bullet { width: 12px; height: 12px; margin-left: 12px }

	/*title*/
	.title h2 { font-size: 24px }
	.title h2::after { height: 3px }
	.title span { font-size: 14px }

	/*appbox*/
	.app ul>li.col-3 { flex: 0 0 50%; max-width: 50% }
	.app ul>li.col-3:nth-child(n+3) { margin-top: 10px }
	.app ul>li>a h3 { height: 42px; line-height: 42px; font-size: 16px }

	/*product*/
	.productbox { padding-top: 50px }
	.productbg { margin-top: 40px; padding-top: 36px; padding-bottom: 36px }
	.product .product-item { max-width: 100% }

	/*news*/
	.news-list { margin-top: 15px }

	/*partners*/
	.partners li.col-2 { flex: 0 0 50%; max-width: 50% }
	.partners li.col-2:nth-child(n+3) { margin-top: 20px }
	.partners li a figure { height: 80px }
}