.body {
	width: 100%;
	overflow: hidden;
}

body {
	background: #000000;
	padding-top: 70px;
}

.pic img {
	width: 100%;
	display: block!important;
	margin: 0 auto;
	transition: all ease .3s;
}

header {
	padding: 0 2.813vw 0 4.948vw;
	width: 100%;
	height: 5.729vw;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	background: #000000;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 50;
	transition: all ease .3s;
}

.scroll header {
	height: 3.125vw;
}

header .logo {
	width: 9.375vw;
	transition: all ease .3s;
}

header .logo img {
	width: 100%;
}

.scroll header .logo {
	width: 7.292vw;
}

header .nav {
	height: 100%;
}

header .nav .link {
	display: flex;
	align-items: center;
	height: 100%;
	font-size: 0.785vw;
	margin: 0 1.76vw;
	transition: all ease .3s;
	position: relative;
	cursor: pointer;
}

header .nav .link>a {
	color: #fff;
}

header .nav .link:hover>a,
header .nav .link.on>a {
	color: #0382D3;
}

header .nav .link .down {
	display: flex;
	flex-direction: column;
	position: absolute;
	left: 50%;
	top: 100%;
	padding: 0.938vw 2.083vw;
	min-width: 100%;
	width: max-content;
	transform: translateX(-50%);
	box-shadow: 0 0 0.26vw #f3f3f3 inset;
	background: #000;
	transition: all ease .3s;
	opacity: 0;
	pointer-events: none;
	z-index: 5;
	text-align: center;
}

header .nav .link:hover .down {
	opacity: 1;
	pointer-events: visible;
}

header .nav .link .down a {
	margin: 0.521vw 0;
	color: #fff;
	font-size: 0.781vw;
	transition: all ease .3s;
}

header .nav .link .down a:hover {
	color: #0382D3;
}

header .nav .link .down a.on {
	color: #0382D3;
}

header .en {
	width: 3.125vw;
	height: 3.125vw;
	font-size: 1.25vw;
	font-weight: bold;
	color: #000000;
	background: #FFFFFF;
	border-radius: 50%;
	transition: all ease .3s;
}

.scroll header .en {
	width: 2.083vw;
	height: 2.083vw;
	font-size: 0.833vw;
}

footer {
	padding: 7.813vw 10.833vw 0 6.563vw;
	background: #131313;
}

.foot-logo {
	width: 9.792vw;
	margin: 0 9.896vw 2.771vw 0;
}

.foot-logo img {
	width: 100%;
}

.foot-link dl {
	margin-right: 7.292vw;
	text-align: center;
}

.foot-link dl:last-child {
	margin-right: 0;
}

.foot-link dt {
	font-size: 1.25vw;
	margin-bottom: 1em;
	color: #fff;
	font-weight: 600;
	letter-spacing: 0.052vw;
}

.foot-link dd,
.foot-logo-bottom li {
	font-size: 1.042vw;
	margin-bottom: 1.3em;
	color: #878787;
	transition: all ease .3s;
}

.foot-link dd:hover,
.foot-logo-bottom li:hover {
	color: #fff;
}

.foot-link dd img {
	width: 13.802vw;
}

footer .line {
	padding: 2.344vw 0;
}

footer .line::after {
	content: '';
	display: block;
	height: 0.104vw;
	border-radius: 0.10417vw;
	width: 100%;
	background: #2B2B2B;
	transform: translateX(3.125vw);
}








.C-more {
	width: 9.375vw;
	height: 3.281vw;
	background: #0382D3;
	box-shadow: 0vw 0.625vw 0.365vw 0vw rgba(0, 0, 0, 0.35);
	font-size: 1.25vw;
	color: #FFFFFF;
	transition: all ease .3s;
}

.C-more:hover {
	background: #fff;
	color: #0382D3;
}

.C-banner {
	padding: 6.563vw 0 0;
}

.C-banner .main {
	width: 62.5vw;
	margin: 0 auto;
	position: relative;
}

.C-banner .main .pic {
	width: 35.042vw;
	font-size: 2.41667vw;
	margin: 0 auto;
	margin-top: -5.813vw;
}

.C-banner .main .intr {
	position: absolute;
	left: 0;
	top: 52%;
	width: 100%;
}

.C-banner .main .intr p {
	font-size: 2.64583vw;
	text-align: center;
	letter-spacing: 1em;
	transform: translateX(1em);
	color: #FFFFFF;
	text-shadow: 0vw 0vw 80vw #fff;
}

.C-banner.product {
	padding: 0 0 0;
}

.C-banner.product .main .intr {
	top: 58%;
}

.C-banner.letter .main .intr p {
	letter-spacing: 0.26vw;
	transform: translateX(0.26vw);
	font-weight: 600;
}


.C-title {
	color: #FFFFFF;
	text-align: center;
}

.C-title h2 {
	font-size: 4vw;
}

.C-title h3 {
	font-size: 2.5vw;
	margin-bottom: 1.042vw;
	font-family: 'OPPOSans-L';
}

.C-title p {
	font-size: 1.15vw;
	line-height: 1.8;
}

.body.product-bg {
	background-repeat: repeat-y;
	background-size: 100% auto;
	background-position: top;
}

.add .pic {
	width: 4.688vw;
	margin: 0.521vw 0;
	position: absolute;
	animation: ani-zoom 2s linear infinite alternate;
}

@keyframes ani-zoom {
	0% {
		transform: scale(0.5);
	}

	100% {
		transform: scale(1);
	}
}

.add .pic:nth-of-type(1) {
	left: 0;
	top: 0;
}

.add .pic:nth-of-type(2) {
	right: 0;
	top: 0;
}

.add .pic:nth-of-type(3) {
	left: 0;
	bottom: 0;
}

.add .pic:nth-of-type(4) {
	right: 0;
	bottom: 0;
}

.add .pic:nth-of-type(5) {
	left: 0;
	top: 50%;
}

.add .pic:nth-of-type(6) {
	right: 0;
	top: 50%;
}


.points {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	text-align: center;
	padding: 0 0 1.042vw;
}

.points span {
	display: inline-block;
	margin: 0 6.771vw;
	width: 0.729vw;
	height: 0.729vw;
	border-radius: 100%;
	background: #fff;
	animation: ani-shadow 1s ease infinite alternate;
}

@keyframes ani-shadow {
	0% {
		box-shadow: 0 0 0.521vw 0vw #fff;
	}

	100% {
		box-shadow: 0 0 0.521vw 0.156vw #fff;
	}
}

/* 
*======================================================media===============================================================
*/
@media screen and (max-width:1919px) {}

@media screen and (max-width:1519px) {
	.foot-link dl {
		margin-right: 5.292vw;
	}
}

@media screen and (max-width:1366px) {
	.scroll header {
		height: 4vw;
	}
}

@media screen and (max-width:1250px) {
	.foot-link dl {
		margin-right: 5.292vw;
	}
}

@media screen and (max-width:991px) {


	.navbar-toggle {
		display: flex;
		flex-direction: column;
	}

	body {
		padding-top: 80px;
	}

	header {
		padding: 0 5% 0 8%;
		height: 80px;
	}

	.scroll header {
		height: 60px;
	}

	header .logo {
		width: 120px;
	}

	.scroll header .logo {
		width: 100px;
	}

	header .nav {
		position: fixed;
		right: 100vw;
		top: 0;
		width: 100%;
		height: 100%;
		background: #000;
		flex-direction: column;
		padding: 0 5%;
		align-items: center;
		justify-content: center;
		background: url('/img/about-bg.jpg') repeat;
	}

	header .nav.open {
		right: 0;
	}

	header .nav .link {
		height: auto;
		font-size: 17px;
		margin: 10px 0;
	}

	header .nav .link .down {
		padding: 18px 40px;
		box-shadow: 0 0 5px #f3f3f3 inset;
	}

	header .nav .link .down a {
		margin: 10px 0;
		font-size: 15px;
	}

	header .en {
		width: 60px;
		height: 60px;
		font-size: 24px;
	}

	.scroll header .en {
		width: 40px;
		height: 40px;
		font-size: 16px;
	}

	footer {
		padding: 75px 104px 70px 63px;
	}

	.foot-logo {
		width: 104px;
		margin: 0 40px 50px 0;
	}

	.foot-link dl {
		width: 50%;
		text-align: left;
		margin: 0 0 50px;
	}

	.foot-logo-bottom {
		width: 100%;
		margin: 0 0 50px;
	}

	.foot-link {
		width: 100%;
	}

	.foot-link dt {
		font-size: 14px;
		margin-bottom: 1em;
		letter-spacing: 1px;
	}

	.foot-link dd,
	.foot-logo-bottom li {
		font-size: 12px;
		margin-bottom: 1.3em;
		color: #878787;
	}

	.foot-link dd img {
		width: 125px;
	}

	footer .line {
		display: none;
		padding: 25px 0;
	}

	footer .line::after {
		height: 2px;
		border-radius: 2px;
		transform: translateX(0px);
	}








	.C-more {
		box-shadow: 0px 12px 7px 0px rgba(0, 0, 0, 0.35);
		width: 140px;
		height: 46px;
		font-size: 14px;
	}

	.C-banner {
		padding: 111px 0 0;
	}

	.C-banner .main {
		width: 600px;
	}

	.C-banner .main .pic {
		width: 490px;
	}

	.C-banner .main .intr {
		top: 52%;
	}

	.C-banner .main .intr p {
		font-size: 28px;
		text-shadow: 0px 0px 40px #fff;
	}

	.C-banner.product .main .intr {
		top: 58%;
	}

	.C-banner.letter .main .intr p {
		letter-spacing: 5px;
		transform: translateX(5px);
	}

	.C-title h2 {
		font-size: 52px;
	}

	.C-title h3 {
		font-size: 44px;
		margin-bottom: 20px;
	}

	.C-title p {
		font-size: 16px;
	}

	.add .pic {
		width: 45px;
		margin: 5px 0;
	}

	.points {
		padding: 0 0 10px;
	}

	.points span {
		margin: 0 65px;
		width: 7px;
		height: 7px;
	}

	@keyframes ani-shadow {
		0% {
			box-shadow: 0 0 5px 0px #fff;
		}

		100% {
			box-shadow: 0 0 5px 2px #fff;
		}
	}
}

@media screen and (max-width:768px) {


	footer {
		padding: 45px 5% 0px;
	}

	.foot-link dt {
		font-size: 12px;
	}

	.foot-link {
		width: 100%;
	}

	.foot-link dl {
		width: 50%;
		text-align: left;
		margin: 0 0 50px;
	}

	.C-title h2 {
		font-size: 40px;
	}

	.C-title h3 {
		font-size: 32px;
		margin-bottom: 10px;
	}

	.C-title p {
		font-size: 12px;
	}

	.C-banner {
		padding: 73px 0 0;
	}

	.C-banner .main {
		width: 396px;
	}

	.C-banner .main .pic {
		width: 323px;
	}

	.C-banner .main .intr p {
		font-size: 18px;
		text-shadow: 0px 0px 26px #fff;
	}


	.add .pic {
		width: 45px;
		margin: 5px 0;
	}

	.points {
		padding: 0 0 10px;
	}

	.points span {
		margin: 0 25px;
		width: 7px;
		height: 7px;
	}

	@keyframes ani-shadow {
		0% {
			box-shadow: 0 0 5px 0px #fff;
		}

		100% {
			box-shadow: 0 0 5px 2px #fff;
		}
	}
}

@media screen and (max-width:480px) {

	.points span {
		margin: 0 15px;
		width: 3px;
		height: 3px;
	}

	.C-banner {
		padding: 48px 0 0;
	}

	.C-banner .main {
		width: 90%;
	}

	.C-banner .main .pic {
		width: 213px;
	}

	.C-banner .main .intr p {
		letter-spacing: 0.7em;
		transform: translateX(0.7em);
		font-size: 18px;
		text-shadow: 0px 0px 26px #fff;
	}
}