@charset "utf-8";
/*通用css*/
html{font-size: 62.5%;}
*{margin:0;padding:0;list-style:none;font-size:13px; line-height:27px;font-family: "微软雅黑";}
body {font-family: "微软雅黑";font-size: 13px;margin:0;padding:0; overflow-x:hidden; background:#ffffff;}
div{ border:0px;margin:0;padding:0;}
img{border:0; border:none; margin:0; padding:0; display:inline;}
.fl{float:left; display:inline;}
.fr{float:right; display:inline;}
.l{ text-align:left;}
.r{ text-align:right;}
.c{text-align:center;}
.clear{clear:both; height:0px;}
a:link { text-decoration:none; color:#666666;}
a:visited { text-decoration:none; color:#666666;}
a:hover { text-decoration: none; color:#222222;}
.wt{ text-decoration:none; color:#ffffff;}
.wt:link { text-decoration:none; color:#ffffff;}
.wt:visited { text-decoration:none; color:#ffffff;}
.wt:hover { text-decoration: none; color:#ffffff;}
.Validform_right{color: #09b59f;}
.Validform_wrong{color: #ff5f05;}
input,button,select,textarea{outline:none}
textarea{resize:none}


body::-webkit-scrollbar { width: 0 !important; display: none; }
body { -ms-overflow-style: none; }
body { overflow: -moz-scrollbars-none; }



.swiper-container {
	width: 100vw;
	height: 514px;
	letter-spacing:2px;
} 
.swiper-container .swiper-button-prev,.swiper-container .swiper-button-next{
	width: 40px;
	height: 80px;
	background: rgba(0,0,0,0.3);
	border: 1px solid rgba(0,0,0,0.15);
	color: #d32f2f;
	transform: translateY(-50%);
}
.swiper-container .swiper-button-next:after,.swiper-container .swiper-button-prev:after {
	font-family: swiper-icons;
	font-size: 44px;
	font-size: var(--swiper-navigation-size);
	text-transform: none!important;
	letter-spacing: 0;
	text-transform: none;
	-webkit-font-feature-settings: normal,;
	font-feature-settings: normal,;
	font-variant: normal;
	line-height: 1;
	font-size: 16px;
}
.swiper-container .swiper-pagination-bullets{
	bottom: 0;
	background: #000000;
	height: 31px;
	
}

.swiper-container .my-bullet{
	width: 100px;
	height: 6px;
	border-radius: 0;
	display: inline-block;
	background: #999999;
	margin: 0 2px;
	cursor:pointer
}
.swiper-container .my-bullet-active{
	width: 100px;
	height: 10px;
	border-radius: 0;
	margin-bottom: -2px;
	background: #6a1717;
	
}


.swiper-container .my-bullet-active>span{
	display: block;
	background: #d32f2f;
	height: 10px;
	animation-name: example;
	animation-duration: 5s;
	animation-timing-function: linear;
}
@keyframes example {
  0%   {width: 0px;}
  100% {width: 100px;}
}

.swiper-container .swiper-slide{
	width: 100vw!important;
	background-size: auto 514px; 
	background-position: center;
	background-repeat: no-repeat;
	background-color: #000000;
}


.swiper-container .swiper-slide-active{
	animation-name: example2;
	animation-duration: 3s;
	animation-fill-mode:forwards;
	position: relative;
}
@keyframes example2 {
  0%   {background-position: calc(50% + 130px) 0px;}
  100% {background-position: calc(50% + 100px) 0px;}
  
}

.swiper-container .swiper-slide-active>div:nth-child(1){
	width: 250px;
	height: 150px;
	position: absolute;
	opacity: 0;
	top:40px;
	left:50%;
	margin-left: -550px;
	animation-name: example3;
	animation-duration: 3s;
	animation-fill-mode:forwards;
	animation-delay: .5s;
	background-position-x: 0;
}

.swiper-container .swiper-slide-active>div:nth-child(2){
	font-size: 50px;
	line-height: 60px;
	color: #ffffff;
	position: absolute;
	opacity: 0;
	top:220px;
	left:50%;
	margin-left: -550px;
	animation-name: example3;
	animation-duration: 3s;
	animation-fill-mode:forwards;
	animation-delay: 1s;
}
.swiper-container .swiper-slide-active>div:nth-child(3){
	width: 176px;
	height: 46px;
	line-height: 46px;
	text-align: center;
	background-color: #d32f2f;
	border: 1px solid #d32f2f;
	font-size: 18px;
	color: #fff;
	box-shadow: rgba(211, 47, 47, .5) 3px 4px 12px 0;
	position: absolute;
	opacity: 0;
	top:380px;
	left:50%;
	margin-left: -550px;
	animation-name: example3;
	animation-duration: 3s;
	animation-fill-mode:forwards;
	animation-delay: 1.5s;
}

@keyframes example3 {
  0%   {margin-left: -550px;opacity: 0;}
  100% {margin-left: -650px;opacity: 1;}
  
}
.header{
	width: 100vw;
	height: 60px;
	background: #1a1a1a;
	position: relative;
}
.header>div:nth-child(1){
	width: 210px;
	height: 30px;
	background: url(/image/JOYFORT-logo_cn@3x.png) no-repeat;
	background-position: center;
	background-size: cover;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 30px;
}
.header>ul:nth-child(2){
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.header>ul>li{
	display: inline-block;
	
}
.header>ul>li>a{

	margin: 0 1vw;
	font-size: 18px;
	cursor:pointer;
	color:#ffffff;
}
.header>ul>.dangqian>a{
	color: #f2993a;
	font-weight: bold;
}

.header>div:nth-child(3),.header>div:nth-child(4){
	position: absolute;
	top: 50%;
	right: 30px;
	transform: translateY(-50%);
	color: #ffffff;
	font-size: 18px;
	cursor: pointer;
}
.header>div:nth-child(3){
	display: none;
}
.index2{
	padding-top: 70px;
	padding-bottom: 30px;
	width: 1430px;
	margin: 0 auto;
}
.index3{
	padding-top: 30px;
	padding-bottom: 30px;
	width: 1430px;
	margin: 0 auto;
}
.index2:after,.index3:after{
    content:".";        
    display:block;        
    height:0;        
    clear:both;        
    visibility:hidden;
}
.index2>div:nth-child(1),.index3>div:nth-child(1){
	float: left;
	font-size: 30px;
	margin-right: 15px;
}
.index2>div:nth-child(2),.index3>div:nth-child(2){
	float: left;
	color: #f2993a;
	font-size: 18px;
	padding-right: 18px;
	background: url(/image/jiao.png) no-repeat right;
	background-size: 15px;
}
.swiper-container2 {
	width: 1428px;
	height: 540px;
	margin: 0 auto;
	overflow: hidden;
} 
.swiper-container2 .swiper-slide{
	width: 357px;
	height: 500px;
	position: relative;
	cursor:pointer;
}
.swiper-container2 .swiper-slide>div:nth-child(1){
	width: 341px;
	height: 454px;
	background-size: cover;
	background-repeat: no-repeat;
	position: absolute;
	left: 8px;
	z-index: 10;
}


.swiper-container2 .swiper-slide>div:nth-child(2){
	width: 341px;
	height: 150px;
	background-size: cover;
	background-repeat: no-repeat;
	position: absolute;
	bottom: 46px;
	left: 8px;
	z-index: 11;
	background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1));
	padding-top: 50px;
}

.swiper-container2 .swiper-slide>div:nth-child(2)>p:nth-child(1){
	color: #ffffff;
	text-align: center;
	font-size: 23px;
}
.swiper-container2 .swiper-slide>div:nth-child(2)>p:nth-child(2){
	color: #ffffff;
	text-align: center;
	font-size: 16px;
	margin-top: 10px;
	padding: 0 15px;
}

.swiper-container2 .swiper-slide>div:nth-child(3){
	width: 100px;
	height: 100px;
	background-size: cover;
	background-repeat: no-repeat;
	position: absolute;
	left: 128px;
	bottom: 0;
	z-index: 12;
	box-shadow: rgb(0 0 0 / 20%) 0px 4px 12px 0px;
	border-radius: 21px;
}

.swiper-container2{
	position: relative;
}
.swiper-container2 .swiper-button-prev2{
	width: 40px;
	height: 80px;
	background: #ffffff;
	box-shadow: rgb(0 0 0 / 20%) 0px 0px 8px 0px;
	border-radius: 10px;
	/* border: 1px solid rgba(0,0,0,0.15); */
	color: #d32f2f;
	transform: translateY(-100%);
	position: absolute;
	top: 50%;
	z-index: 999;
	left: 8px;
	font-family: "宋体";
	text-align: center;
	line-height: 80px;
	font-size: 20px;
	font-weight: bold;
	cursor:pointer;
	
}
.swiper-container2 .swiper-button-next2{
	width: 40px;
	height: 80px;
	background: #ffffff;
	box-shadow: rgb(0 0 0 / 20%) 0px 0px 8px 0px;
	border-radius: 10px;
	/* border: 1px solid rgba(0,0,0,0.15); */
	color: #d32f2f;
	transform: translateY(-100%);
	position: absolute;
	top: 50%;
	z-index: 999;
	right: 8px;
	font-family: "宋体";
	text-align: center;
	line-height: 80px;
	font-size: 20px;
	font-weight: bold;
	cursor:pointer;
}




.swiper-container3 {
	width: 1428px;
	height: 400px;
	margin: 0 auto;
} 
.swiper-container3 .swiper-slide{
	height: 400px;
	position: relative;
	cursor:pointer;
	
}
.swiper-container3 .swiper-slide>div{
	width: calc(100% - 20px);
	margin: 0 auto;
	box-shadow: rgb(0 0 0 / 20%) 0px 4px 12px 0px;
}
.swiper-container3 .swiper-slide>div>div:nth-child(1){
	
	height: 250px;
	background-size: 480px auto;
	background-position: 0 0;
	background-repeat: no-repeat;
	transition: all 1s;
}

.swiper-container3 .swiper-slide:hover>div>div:nth-child(1){
	background-size: 540px;
	background-position: -35px -15px;
	
}





.swiper-container3 .swiper-slide>div>div:nth-child(2){
	width: calc(100% - 60px);
	height: 110px;
	padding: 20px 30px;
	position: relative;
}

.swiper-container3 .swiper-slide>div>div:nth-child(2){
	width: calc(100% - 60px);
	height: 110px;
	padding: 20px 30px;
	position: relative;
}
.swiper-container3 .swiper-slide>div>div:nth-child(2)>div:nth-child(1){
	font-size: 18px;
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}
.swiper-container3 .swiper-slide>div>div:nth-child(2)>div:nth-child(2){
	height: 20px;
	position: absolute;
	bottom: 40px;
	left: 30px;
	color: #666666;
}
.swiper-container3 .swiper-slide>div>div:nth-child(2)>div:nth-child(3){
	height: 20px;
	position: absolute;
	bottom: 20px;
	left: 30px;
	font-size: 14px;
}


.index5{
	width: 100%;
	height: 410px;
	background: #000000 url(/image/about.png) no-repeat top;
	background-size: 1560px 410px;
	margin-top: 85px;
	position: relative;
}

.index5>div:nth-child(1){
	font-size: 30px;
	color: #ffffff;
	position: absolute;
	left: 50%;
	top: 150px;
	margin-left: -700px;
	height: 45px;
	line-height: 45px;
	/* padding-left: 113px; */

}
.index5>div:nth-child(1)>span:nth-child(1){
	/* position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%); */
	font-size: 30px;
	color: #ffffff;
	margin-right: 10px;
	
}.index5>div:nth-child(1)>span:nth-child(2){
	font-size: 45px;
	color: #ffffff;
	height: 45px;
	display: inline-block;
	line-height: 45px;
}
.index5>div:nth-child(2){
	width: 176px;
	height: 46px;
	line-height: 46px;
	text-align: center;
	background-color: #d32f2f;
	border: 1px solid #d32f2f;
	font-size: 18px;
	color: #fff;
	box-shadow: rgba(211, 47, 47, .5) 3px 4px 12px 0;
	position: absolute;
	left: 50%;
	bottom: 150px;
	margin-left: -700px;
	cursor:pointer
}
.footerDesc___w-6gF div:hover,.footerDesc___w-6gF span:hover,.footerDesc___w-6gF a:link{
	color: #666666;
}

.footerDesc___w-6gF{
	background: #211d1d;
	text-align: center;
	color: #666666;
	padding: 60px 0;
}


.copyRight___39af_2 img{
	height: 35px;
	margin: 0 10px;
}


.bannertext>p:nth-child(2){
	width: 400px;
}