@charset "utf-8";

/* CSS Document */

/* Global styles */

*{margin:0px; padding:0px;}

ul,li{list-style:none; border:0;}

img{border:0; vertical-align:bottom;}

html{width:100%}

@font-face {

	font-family: SourceHanSansSC-regular;

	src: url("SourceHanSansSC-Regular-2.otf");

}

body{font-family:SourceHanSansSC-regular,"Microsoft YaHei Light",Arial, Helvetica, sans-serif;

	color:#333; background:#fff; background-size:100%; text-align:justify; text-justify:inter-ideograph; height:100%;;min-width: 100%}

a,a:hover{cursor:pointer; text-decoration:none;}

input,textarea{font-family:MingLiu, Arial, Helvetica, sans-serif; font-weight: lighter;}

input:focus,textarea:focus{outline:none;}

.ff:after{content:"."; display:block; height:0; clear:both; visibility:hidden;}

.DisplayNone{display:none;}

.LineNone{line-height:0; font-size:0;}

.FloatDiv{height:auto !important; height:1px; min-height:1px;}

	.FloatLeft{float:left;}

	.FloatRight{float:right;}

.Main{width: 80%; margin: 0 auto; font-size: 1.1vw;}



.max1000{width: 1200px;margin: 0 auto}



/* Navigation */

.navbg{background: #fff;}

.navbox{

	display: flex;

	justify-content: center;

	align-items: center;

}

.navbg .logo{

	display: flex;

	align-items: center;

	justify-content: space-between;width: 16%}

.navbox .logo img{width: 70%;height: auto}

.navbox ul.nav{display: flex;

	flex-direction: row;

	align-items: center;

	justify-content: space-between;line-height: 60px;width: 63%}

.nav a{width:20%;color: #333333;font-size: 16px;border-bottom:2px solid #fff;display: inline-block;height: 100%;text-align: center;float: left;border-color: transparent;}

.nav a.cur,.nav a:hover{border-bottom:2px solid #118ced;color: #0096DF;font-weight: bold}

.navbox .language{margin-left: 60px;color: #0096DF}

.navbox .topphone{color: #666666; line-height: 20px;background: url("../img/icon_phone.png") left center no-repeat;padding-left: 40px;font-size: 12px;

	width: 10%;margin-left: 2%;

}

.navbox .topphone a{color: #666666;}

.navbox .topphone img{vertical-align: middle}



.banner,.mySwiper{height:auto;width: 100%;overflow: hidden;position: relative}

.banner img{width: 100%}



.advantage {

	width: 100%;

	background-color: #fff;

}

.advantage_top {

	/*border-bottom:1px solid #f6f6f6;*/

	color: #a2a3a3;

	display: flex;

	justify-content: center;

	position: relative;

}

.font_margin{margin-top: 40px;

	font-size: 24px;

	line-height: 50px;

	font-weight:bold;

}

.font_blue {

	color: #0096DF;

}

.line_blue {

	position: absolute;

	bottom: -2px;margin-left:-25px;

	left: 50%;

	width: 50px;

	height: 4px;

	background-color: #D6D4D4;

}

.advantage_bottom{line-height: 60px;font-size: 16px;text-align: center;letter-spacing:0px;padding-bottom: 40px;color: #949292}

.advantage_content {

	width: 100%;

	height: auto;

	background: url(../img/index_bg.png);

	background-repeat: no-repeat;

	background-size: 100% 100%;

	display: flex;

	justify-content: center;

	align-items: center;

	padding-bottom: 60px;

}

.advantage_center {

	display: flex;

	justify-content: center;

	align-items: center;

}

.eabox{padding: 0 50px;margin:0 auto;display: flex;

	flex-direction: row;

	justify-content: space-between;

	flex-wrap: wrap; text-align: center;margin-bottom: 40px}

.eaone{width: 25%}

.eabox .eaone .img img{width: 110px;height: 110px}

.eabox .eaone .title{color: #333333;font-size: 24px;font-weight: bold;line-height: 60px}

.eabox .eaone .content{color: #6C6C6C;font-size: 16px;line-height: 40px}

.tabox{margin:0 auto;display: flex;

	flex-direction: row;

	justify-content: space-between;

	flex-wrap: wrap; margin-bottom: 40px}

.tabox .one1{width: 50%}

.tabox .one2{width: 42%}

.tabox .one1 .title{color: #333333;font-size: 18px;font-weight: bold;}

.tabox .one1 .titleen{color: #333333;font-size: 14px;padding: 10px 0 30px 0;}

.tabox .one1 .content{color: #333333;font-size: 16px;line-height: 30px}

.tabox .one2 img{max-width: 100%}

.brandbox{margin:0 auto;display: flex;

	flex-direction: row;

	justify-content: space-between;

	flex-wrap: wrap; margin-bottom: 40px;padding: 0 8%}

.brandboxbg{background-image: url("../img/brand_ys.png");background-repeat: no-repeat;background-position: center;

	background-size: auto 300px;}

.brandbox .brandone{

border-radius: 25px;width: 24%;text-align: center;padding: 10px;

	border:5px solid #0096DF;line-height: 30px;font-size: 20px;

}

.brandbox .brandone h3{color: #0096DF;font-size: 28px;line-height: 60px}

.brandbox .brandone .content{text-align: left}

.mfbox h2{font-size: 18px;color: #333333}

.mfbox h3{font-size: 12px;color: #9A9A9A;margin-bottom: 30px}

.mfcbox{margin:0 auto;display: flex;

	flex-direction: row;

	justify-content: space-between;

	flex-wrap: wrap; margin-bottom: 40px}

.mfcbox .one{border-radius: 20px;width: 22%;text-align: center;

padding: 3px;

	background: linear-gradient(155deg,#118ced,#00f0ff,#118ced);

	background-repeat: no-repeat;

	/*background-size: 120% 3px;*/

	background-position: 0 100%;

}



.mfcbox .one .border{width: 100%;height:100%;

	background: #fff;

	border-radius: 17px;}

.mfcbox .one .title{

	color: #118ced;font-size: 22px;font-weight: bold;line-height: 100px;

}

.mfcbox .one .content{

	color: #333333;font-size: 16px;line-height: 30px;padding-bottom: 30px;

}



.distributionbox{

	margin:0 auto;display: flex;

	flex-direction: row;

	justify-content: space-evenly;

	flex-wrap: wrap; padding: 0 8%;

	background-color: #0096DF;

	border-radius: 20px;

	padding: 50px 0;

}

.distributionbox .one{width: 13.5%;text-align: center;color: #fff}

.distributionbox .one img{width: 50px;}

.distributionbox .one .title{font-size: 30px;margin: 10px 0 30px}

.distributionbox .one .content{text-align: left}





.distribution1box{

	margin:0 auto;display: flex;

	flex-direction: row;

	justify-content: space-around;

	flex-wrap: wrap; padding: 0 8%;

	border-radius: 20px;

	padding: 0;

}

.distribution1box .one{width: 14%;text-align: left;}

.distribution1box .one img{width: 100%}



.gcbox{

	margin:0 auto;display: flex;

	flex-direction: row;

	justify-content: space-between;

	flex-wrap: wrap; padding: 0 8%;

	border-radius: 20px;

	padding: 0;

}

.gcbox .one{width: 32%;margin-bottom: 1.5%;position: relative}

.gcbox .one img{width: 100%}

.gcbox .one .title{position: absolute;bottom: 0;color: #fff;font-size: 18px;text-align: center;line-height: 1.8;width: 100%}



.futurebox{

	background: url("../img/futurebg.png") right top no-repeat;

	background-size: cover;

	padding: 12% 7%;

}

.futurebox .content{

	width: 42%;

}

.futurebox .title{

	color: #0096DF;

	font-size: 18px;

	padding-left: 5px;

	border-left: 3px solid #0096DF;

	margin-bottom: 5%;

}

.futurebox p{color: #333333;line-height: 1.5;padding-bottom: 4%;font-size: 14px}





.ycsbox{margin:0 auto;display: flex;

	flex-direction: row;

	justify-content: space-between;

	flex-wrap: wrap; margin-bottom: 40px}

.ycsbox .one{width: 32%;text-align: center;}

.ycsbox .one img{max-width: 100%;border-radius: 20px}







.appbox img{max-width: 100%}



.waybox{background: #e6f4ff;margin-top: 30px;padding-bottom: 30px}

.waybox .advantage{background:none}

.waycbox{margin:0 auto;display: flex;

	flex-direction: row;

	justify-content: space-between;

	flex-wrap: wrap; padding: 0 150px}

.waycbox .one{border-radius: 20px;width: 18%;text-align: center;}

.waycbox .one .img img{width: 80px;height: 80px}

.waycbox .one .title{color: #1a1a1a;font-size:18px;font-weight: bold;line-height: 30px;margin:15px 0}

.waycbox .one .content{color: #666666;font-size: 14px;line-height: 24px;text-align: left}



.items_arr{width: 75%;    display: flex;

	justify-content: space-between;

	flex-wrap: wrap;

	align-content: space-between;}

.itemsone{width: 42%;display: inline-block;border-radius: 15px;

	background-color: #fff3;

	display: flex;

	justify-content: center;

	align-items: center;margin:50px 0 0;padding: 15px}

.itemsone .advantage_content_item{font-size: 18px;font-weight:400;text-align: center;padding:10%;background: #fff;width: 100%;border-radius: 15px;}

.itemsone .advimg{padding: 30px 0 10px;text-align: left;width: 70%;margin: 0 auto}

.itemsone .advimg .advantage_content_left{width: 60px}

.itemsone .advimg .advantage_content_right{width: 60px;float: right;margin-top: 5px}

.itemsone .advantage_content_img{width: 100%}

.chooseUs {

	width: 96%;margin: 0 auto;

	display: flex;

	flex-direction: row;

	justify-content: space-between;

	flex-wrap: wrap;

}

.choose_center{

	margin: 30px 0;

	width: 45%;

	box-sizing: border-box;

	display: flex;

	flex-direction: row;

	color: #565454;

}

.choose_center img{width: 60px;height: 60px}

.choose_center .choose_text{padding-left: 10px}

.choose_center .choose_text p{font-size: 14px;font-weight: bold;margin-bottom: 10px}

.product_content {

	margin: 0 auto;

	display: flex;

	flex-direction: row;

	justify-content: space-between;

	flex-wrap: wrap;padding: 0 160px;

}

.product_center{

	margin: 10px 0;

	width: 49%;

	box-sizing: border-box;

	display: flex;

	flex-direction: row;

	position: relative;

	border-radius: 20px;

}

.product_center .product_name{width: 100%;height: 100%;position: absolute;left: 0;top: 0;background: #000;opacity: 0.5;color: #fff;text-align: right;display: none}

.product_center .product_name span{position: absolute;right: 10px;bottom: 10px;color: #fff;text-align: right;font-size: 18px;display: inline-block}

.product_center img{width: 100%;border-radius: 20px}

.product_center:hover .product_name{display: block;border-radius: 20px}

.cbox{

	width: 100%;

	display: flex;

	flex-direction: row;

	justify-content: space-between;

	flex-wrap: wrap;

}

.cbox .one{

	width: 20%;

	background:#ECF7FF;

	margin: 20px 0;

	text-align: center;

	padding: 10px;

}

.cbox .one img{

	height: 90px;

}

.cbox .one h3{

	color: #4F4F4F;

	margin: 10px;

}

.cbox .one h5{

	color: #9A9A9A;

}

.cbox1{

	justify-content: space-evenly;

}



.footer{margin-top: 2vw;background: #0096DF;padding: 2vw 0;color: #fff}

.foot_nav{width: 100%;

	display: flex;

	flex-direction: row;

	justify-content: space-between;

	flex-wrap: wrap}

.foot_nav .fnav{width: 20%;text-align: center;padding-top: 20px}

.foot_nav .fnav .one{display: inline-block;text-align: left}

.foot_nav a{color: #fff;line-height: 30px;font-size: 14px}

.foot_nav div.fnav5{padding: 0;}

.foot_nav div.fnav5 img.logo_bottom{margin-bottom: 10px}

.foot_nav div.fnav5 img{width: 90%}

.foot_nav div.fnav5 img.erweima{width:110px;border-radius: 15px;margin-bottom: 10px}



.iconbox{margin:0 auto;display: flex;

	flex-direction: row;

	justify-content: space-between;

	flex-wrap: wrap;

	padding: 20px 0;}

.iconbox a{color: #fff}

.iconbox .one{width: 25%;text-align: center;color: #fff}

.iconbox .one img{height: 40px;vertical-align: middle;margin-right: 5px}



.foot_nav div .title{font-size: 16px;font-weight: 700;position: relative;color: #fff;line-height: 40px;margin-bottom: 20px;text-align: center}

.foot_nav div .title .line{width:25px;height: 2px;background: #fff;position: absolute;bottom: 0;left: 0}

.foot_bottom{text-align: center;padding: 1vw 0;line-height: 35px}

.foot_bottom img{vertical-align: middle}

.foot_bottom a{color: #fff}

.sidebox{position: fixed;right: 0;top: 40%;z-index: 10}

.sidebox .sidenav{border:1px solid #118ced;margin-bottom: 15px;width: 60px;text-align: center;height: 60px;cursor: pointer;position: relative}

.sidebox .sidenav .img{width: 100%;height: 100%;background: #00000080}

.sidebox .sidenav .img img{width: 66%;height: 66%; margin-top: 17%}

.sidebox .sidenav .sidecontent{position: absolute;left: 0;top: -1px;height: 62px;background: #a0d1f9;line-height: 30px;width: 100px;margin-left: -39px;display: none}

.sidebox .sidenav .sidecontent1{width: 140px;margin-left: -79px}

.sidebox .sidenav .sidecontent a{color: #fff;font-size: 16px;font-weight: bold}

.sidebox .sidenav .sidecontent2{height: 100px}

.sidebox .sidenav .sidecontent2 img{height: 100px}

.sidebox .sidenav:hover .sidecontent{display: block}

.main{margin: 2vw auto;display: flex;

	flex-direction: row;

	flex-wrap: wrap;

	justify-content: space-between;}

.main .leftnav{width: 20%;}

.main .leftnav .navtitle{border:1px solid #118ced;background: #e6f4ff;text-align: left;padding-left:1vw;line-height: 60px;font-size: 18px;color: #333;border-radius: 20px 20px 0 0}

.main .leftnav .navtitle img{height: 26px;float: right;vertical-align: middle;margin-right: 20px;margin-top: 18px}

.main .leftnav a{display: block;line-height: 50px;color: #333;font-size: 16px;padding-left: 1vw;border:1px solid #118ced;border-top: none}

.main .leftnav a.cur{background:#118ced;color: #fff }

.main .rightcontent{width: 75%;}

.main .rightcontent .contenttitle{display: flex;

	flex-direction: row;

	justify-content: space-between;line-height: 60px;border-bottom: 1px solid #929091 }

.main .rightcontent .location{font-size: 14px}

.main .rightcontent .contenttitle .catetitle{color: #118ced;font-size: 18px;border-bottom: 1px solid #118ced;padding: 0 20px;margin-bottom: -1px}

.main .rightcontent .list .listone{display: flex;

	flex-direction: row;

	justify-content: space-between;border-bottom: 1px solid #929091;padding: 2vw 0}

.main .rightcontent .list .listone .img{width: 18%}

.main .rightcontent .list .listone .img img{max-height: 120px;max-width: 160px}

.main .rightcontent .list .listone .onecontent{width: 60%;margin-left: 2%}

.main .rightcontent .list .listone .onecontent .title{line-height: 40px;font-size: 16px;}

.main .rightcontent .list .listone .onecontent .description{line-height: 24px;font-size: 12px;overflow: hidden;}

.main .rightcontent .list .listone .rinfo .detail{margin-top: 80px}

.main .rightcontent .list .listone .rinfo .detail a{color:#118ced; }



.page{padding: 1vw 0;text-align: center;line-height: 40px}

.page a{display: inline-block;padding:0 8px;background: #ccc;margin: 0 6px;color: #000;line-height: 25px;border-radius: 3px}

.page a.PageNumOn{background: #118ced;color: #fff}



.main .rightcontent .title{font-size: 22px;color: #118ced;text-align: center;}

.main .rightcontent .ctitle{font-size: 22px;color: #118ced;text-align: center;padding: 1.5vw 0 0}

.main .rightcontent .pubdate{font-size: 14px;color: #000;text-align: center;padding:10px 0}

.main .rightcontent .content{font-size: 14px;color: #000;text-align: left;line-height: 24px;border-top: 1px dashed #7c7a7b;overflow: hidden}

.main .rightcontent .content img{max-width: 100%;height: auto}

.main .rightcontent .prevnext{display: flex;

	flex-direction: row;

	justify-content: space-between;border-top: 1px dashed #7c7a7b;margin: 1vw auto;padding: 1vw 0}





.productlist{

	display: flex;

	justify-content: space-between;

	flex-wrap: wrap;

	align-content: space-between;}

.productlist .listone{width: 96%;margin:2%;padding-bottom: 2%;display: flex;

	justify-content: space-between;

	flex-wrap: wrap;

	align-content: space-between;}

/*.main .productlist .listone:hover{border: 1px solid #118ced;}*/

.main .productlist .listone .img2{width: 40%;margin-right:3%;padding: 2%}

.main .productlist .listone .img2 img{width: 100%}

.main .productlist .listone .right{width: 53%;}

.main .productlist .listone .title {

	display: inline-block;

	background: linear-gradient(70.62deg, rgba(41,154,206,1) 26.36%,rgba(227,227,95,1) 108%);

	background-repeat: no-repeat;

	background-size: 120% 3px;

	background-position: 0 100%;

	font-size: 20px;

	font-weight: bold;

	text-align: left;

	color: #118CED;

	line-height: 40px;

	padding-bottom: 10px;

	margin-bottom: 20px;

	width: 98%;

	margin-top: 1%;

	margin-bottom: 10px;

}





.main .productlist .listone .imgbox .img{width: 98%;text-align: left}

.main .productlist .listone .imgbox .img img{width: 100%}





.companylist{}

.companylist .listone{width: 96%;margin:2%;padding-bottom: 2%;display: flex;

	justify-content: space-between;

	flex-wrap: wrap;

	align-content: space-between;



}

.main .companylist .listone .img2{width: 30%;margin-right:3%;padding: 2%;text-align: center;

	box-shadow: 0px 2px 15px 0px rgba(162, 223, 252, 1);}

.main .companylist .listone .title{display: inline-block;background: linear-gradient(to right,#118ced,#e8e646);

	background-repeat: no-repeat;

	background-size: 120% 3px;

	background-position: 0 100%;

	font-size: 18px;text-align: left;

	color: #118ced;

	line-height: 40px;padding-bottom: 10px;margin-bottom: 20px;width: 98%;margin-top: 1%;margin-bottom: 10px;

}

.main .companylist .listone .img2 img{width: 100%}

.main .companylist .listone .right{width: 60%;color: #101010}

.main .companylist .listone .right .title1{font-size: 18px;margin-bottom: 15px}

.main .companylist .listone .right .other{font-size: 14px; line-height: 40px}

.main .companylist .listone .right .other img{vertical-align: middle}





.main .about .content{line-height: 1.9}



.footer,.topbg,.navbg,.banner{min-width: 100%}



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

	.max1000{width: 100%;min-width: 100%}

	.navbox ul.nav{width: 100%}

	.productlist .listone{width: 100%}

	.eaone,.waycbox .one{width: 50%}

	.eaone,.tabox .one1,.tabox .one2,.ycsbox .one{width: 80%;margin-left: 10%;margin-bottom: 20px}

	.mfcbox .one{width: 80%;margin-left: 10%;margin-bottom: 20px}

	.foot_nav div.fnav5{display: none}

	.main .leftnav,.main .rightcontent{width: 95%;margin: 0 auto}



}

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

	.topphone{display: none}

	.mfbox h2,.mfbox h3{margin-left: 10%}

	.waycbox{padding: 0}

	.product_content{padding: 0 20px}

}

@media (min-width: 100%) and (max-width: 1200px) {

	.max1000{width: 100%;min-width: 100%}

}

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

	.max1000{width: 100%;min-width: 100%}

	.navbg .logo{display:none}
	.topbg .logo{display: inline-block;float: left}

	.topbg .logo img{height: 28px}

	.nav a{font-size: 14px}

	.navbox ul.nav{width: 100%}

	.itemsone,.choose_center{width: 90%}

	.items_arr{width: 85%}

	.productlist .listone{width: 100%}

	.main .productlist .listone .title{width: 98%}

	.main .rightcontent .list .listone .img{width: 30%}

	.main .rightcontent .list .listone .img img{width: 100%}

	.main .rightcontent .list .listone .onecontent{width: 50%}

	.main .rightcontent .contenttitle .catetitle{display: none}

	.product_center{width: 90%;margin-left: 5%}

	.main .leftnav{width: 95%;margin: 0 auto}

	.foot_nav div p{font-size: 12px}

	.main .rightcontent{width: 95%;margin: 0 auto}

	.foot_nav div.fnav{width: 48%;padding-left: 2%}



	.sidebox .sidenav{margin-bottom: 20px;width: 60px;height: 60px;}

	.sidebox .sidenav .sidecontent{top: -1px;height: 80px;background: #a0d1f9;line-height: 40px;width: 160px;margin-left: -99px;display: none}

	.sidebox .sidenav .sidecontent1{width: 180px;margin-left: -119px}

	.sidebox .sidenav .sidecontent a{color: #fff;font-size: 16px;font-weight: bold}

	.sidebox .sidenav .sidecontent2{width:80px;height: 80px;margin-left: -19px;}

	.sidebox .sidenav .sidecontent2 img{height: 80px}

	.waycbox .one{width: 80%;margin-left: 10%}

	.iconbox .one{width: 80%;margin-left: 10%;text-align: left}

	/* Mobile tweaks for injected commerce blocks */
	.main .productlist .listone .img2{width: 100%;margin-right: 0;padding: 0}

	.main .productlist .listone .right{width: 100%;margin-top: 4%}

	.main .productlist .listone .price-badge{display: flex;flex-wrap: wrap;align-items: baseline;gap: 4px 8px;margin: 6px 0}

	.main .productlist .listone .price-badge .save-tag{display: none}

	.productlist .btnrow{flex-wrap: wrap;gap: 8px !important}

	.productlist .btnrow a{flex: 1 1 45%;text-align: center;padding: 8px 12px !important}

	.productlist .spec-line{font-size: 12px !important}

	/* Internal pages (about/companys/join) stack vertically on mobile */
	.main{flex-direction: column !important;max-width: 100% !important}
	.main .leftnav{width: 100% !important;margin: 0 0 16px 0 !important}
	.main .rightcontent{width: 100% !important;margin: 0 !important}

}