/*common start*/
body,div,ul,li,a,img,p,dl,dt,dd,h1,h2,h3,h4,span,strong,input{ margin:0; padding:0;list-style:none;text-decoration:none;border:0; list-style:none; box-sizing: border-box;}
body{ font-size:12px;font-family:'Microsoft YaHei'; color:#666;}
a{color:#666;}
p{line-height:1.8em; padding:5px 0;}
.clear{ margin:0; padding:0; font-size:0; clear:both; }
.wapper{ width:100%; max-width: 1440px; margin:0 auto;}
:root {
    --primary-color: #f56c6c;
    --secondary-color: #409eff;
    --third-color: #c45656;
    --5px: .26vw;
    --10px: .52vw;
    --12px: .62vw;
    --14px: .72vw;
    --15px: .78vw;
    --16px: .84vw;
    --18px: .94vw;
    --20px: 1.04vw;
    --24px: 1.25vw;
    --25px: 1.3vw;
    --30px: 1.56vw;
    --35px: 1.82vw;
    --36px: 1.86vw;
    --40px: 2.08vw;
    --45px: 2.34vw;
    --48px: 2.5vw;
    --50px: 2.6vw;
    --52px: 2.7vw;
    --55px: 2.86vw;
    --60px: 3.12vw;
    --65px: 3.32vw;
    --70px: 3.64vw;
    --75px: 3.9vw;
    --80px: 4.16vw;
    --85px: 4.42vw;
    --90px: 4.68vw;
    --95px: 4.94vw;
    --100px: 5.2vw;
    --120px: 6.25vw;
    --140px: 7.3vw;
    --150px: 7.82vw;
    --160px: 8.4vw;
    --180px: 9.38vw;
    --200px: 10.42vw;
    --220px: 11.46vw;
    --240px: 12.5vw;
    --250px: 13.02vw;
    --260px: 13.54vw;
    --280px: 14.58vw;
    --300px: 15.62vw;
    --350px: 18.22vw;
    --400px: 20.84vw;
    --450px: 23.44vw;
    --500px: 26.04vw;
    --520px: 27.08vw;
    --550px: 28.64vw;
    --600px: 31.25vw;

}



.head{width: 100%;background-color: #Fff;position: fixed;top: 0;left: 0;z-index: 99999;} 
.head .wapper{ display: flex; justify-content: space-between; align-items: center;}
.logo{ width: 200px;}
.logo img{ width: 100%; display: block;}
.menu ul li{line-height: 75px;padding: 0 20px;}
.menu ul li a{ font-size: 18px; font-weight: bold; color: #000; display: flex; align-items: center;}
.menu ul li a img{ margin-left: 5px;}
.menu ul { display: flex; align-items: center; justify-content: center; flex-wrap: wrap;}
.link a{ display: block; width: 120px; line-height: 45px; border-radius: 10px; text-align: center; color: #fff; background-image: url(../images/bg1.png); background-repeat: no-repeat; background-size: cover; font-size: 14px;}
.h_search_btn{ display:block; width:20px; height:20px; cursor:pointer; background:url(../images/top_search_btn2.png) center no-repeat; margin-left:var(--25px); }
.h_search_btn.active{ background-image:url(../images/chahao2.png);}
.h_search_btn.active:hover{ transform: rotate(180deg);}
.h_search_box{ width:100%; padding:var(--40px) 0; background:#fff; border-top:1px solid #edf3f3; border-bottom:1px solid #eee; position:absolute; top:100%; left:0; display:none;}
.h_search_con{ width:90%; max-width:800px; margin:0 auto;}
.h_search_con form{ height:var(--60px); background:#f5f5f5; border-radius:10px;}
.h_search_con form #search_keywords2{ float:left; border:none; background:none; height:var(--60px); line-height:var(--60px); padding:0 var(--10px); width:calc(100% - var(--80px));}
.h_search_con form #search2{ float:right; border:none; background:var(--primary-color) url(../images/ico_search1.png) center no-repeat; background-size:50% auto; color:#fff; font-size:0; height:var(--60px); line-height:var(--60px); width:var(--60px); cursor:pointer; transition:all .3s ease; border-radius:10px;}
.h_search_con form #search2:hover{ background-color:var(--third-color);}
   .foot{width: 100%;padding: 48px 0;padding-bottom: 0;background-color: #F5F5F5;}
   .footlogo{ width: 270px; }
   .footlogo img{ width: 200px; display: block;margin-bottom: 40px;}
   .footlogo .nr{ font-size: 16px; color: #999999;}
   .foot .wapper{ display: flex; justify-content: space-between; flex-wrap: wrap;}
   .footitem{ width: 250px;}
   .footitem h1{font-size: 18px;color: #000;margin-bottom: 15px;}
   .footitem p{ font-size: 18px; color: #999999;}
   .footitem a{ font-size: 18px; color: #fff; display: block; padding: 20px 0;}
   .footitem span{ font-size: 18px; color: #fff;display: block;}
   .footitem ul li a{font-size: 15px;padding: 0;color: #1F1F1F;margin-bottom: 15px;}
    .footitem ul li {
        width: 125px;
        line-height: 35px;
    }
   .flow{ display: flex; align-items: center;}
   .flow a{ padding: 0; margin: 0 15px; }
   .footbtm{ width: 100%; padding: 20px 0; border-top: 1px solid #999;  margin-top: 60px;}
   .erj{ width: 100%; position: absolute; top: 100%; left: 0; background-color: #fff; z-index: 99; display: none; padding-bottom: 60px;}
   .slideTxtBox{display: flex;
    justify-content: space-between;
    flex-wrap: wrap; width: 100%;}
	
   .slideTxtBox .hd{    width: 65%;}
   .slideTxtBox .bd{ width: 32%; padding:0 20px; background-color: #F3F4F4;}
   .infoList img{ width: 100%; display: block; margin-top: 35px;}
   .slideTxtBox .hd ul{ display: block;}
	.slideTxtBox .hd ul li{ width: calc((100% - 60px)/4); margin-right: 20px; margin-bottom: 20px; float: left; line-height: normal; padding: 0; text-align: left; margin-bottom: 40px;}
	.slideTxtBox .hd ul li:nth-child(4n){ margin-right: 0;}
	.slideTxtBox .hd ul li h1{ font-size: 18px;}
	.slideTxtBox .hd ul li dl dd{ padding-top: 15px; text-align: left;}
	.slideTxtBox .hd ul li dl dd a{ font-size: 15px; font-size: 15px; color: #423F3F;}
	.infoList p{ font-size: 18px; padding-top: 30px; text-align: center;}
	.infoList a{ font-size: 18px !important; color: #008CD6 !important; text-align: center;}
	.menu ul li:hover .erj{ display: block;}
	.banner{ width: 100%; position: relative;}
	.banner video{ width: 100%; display: block;}
	.bannerwz{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; max-width: 1440px;}
	.bannerwz h1{ font-size: 70px; color: #fff; margin-bottom: 10px;}
	 .bannerwz p{ font-size: 38px; color: #fff;}
	
	
	.sub-banner .l-restrict-container {
		position: relative;
		margin-top: -50px;
		display: flex;
		justify-content: space-between
	}
	
	@media screen and (max-width: 960px) {
		.sub-banner .l-restrict-container {
			overflow-x: scroll;
			margin-right: 0
		}
	}
	
	@media screen and (max-width: 640px) {
		.sub-banner .l-restrict-container {
			margin-top: -40px
		}
	}
	
	@media screen and (max-width: 480px) {
		.sub-banner .l-restrict-container {
			margin-top: -30px
		}
	}
	
	.sub-banner .l-restrict-container .sub-banner__card {
		position: relative;
		flex: 1;
		margin-bottom: clamp(15px, 1.3020833333vw, 25px)
	}
	
	.sub-banner .l-restrict-container .sub-banner__card:not(:last-child) {
		margin-right: clamp(30px, 2.6041666667vw, 50px)
	}
	
	@media screen and (max-width: 1366px) {
		.sub-banner .l-restrict-container .sub-banner__card:not(:last-child) {
			margin-right: 30px
		}
	}
	
	@media screen and (max-width: 960px) {
		.sub-banner .l-restrict-container .sub-banner__card:not(:last-child) {
			margin-right: 20px
		}
	}
	
	@media screen and (max-width: 640px) {
		.sub-banner .l-restrict-container .sub-banner__card:not(:last-child) {
			margin-right: 15px
		}
	}
	
	@media (hover: hover) {
		.sub-banner .l-restrict-container .sub-banner__card:hover img {
			transform: scale(1.1)
		}
	
		.sub-banner .l-restrict-container .sub-banner__card:hover .sub-banner__Title {
			color: #21d4fd
		}
	
		.sub-banner .l-restrict-container .sub-banner__card:hover .sub-banner__Title .link__icon {
			margin-left: 15px
		}
	}
	
	@media (hover: hover)and (min-width: 961px) {
		.sub-banner .l-restrict-container .sub-banner__card:hover .sub-banner__subtitle {
			display: none
		}
	}
	
	@media (hover: hover)and (min-width: 961px) {
		.sub-banner .l-restrict-container .sub-banner__card:hover .sub-banner__description {
			display: block
		}
	}
	
	@media screen and (max-width: 960px) {
		.sub-banner .l-restrict-container .sub-banner__card {
			flex: 0 0 69.53125vw
		}
	
		.sub-banner .l-restrict-container .sub-banner__card:last-child {
			margin-right: 15px
		}
	}
	
	@media screen and (max-width: 640px) {
		.sub-banner .l-restrict-container .sub-banner__card {
			flex: 0 0 69.5833333333vw
		}
	}
	
	@media screen and (max-width: 480px) {
		.sub-banner .l-restrict-container .sub-banner__card {
			flex: 0 0 69.4444444444vw
		}
	}
	
	.sub-banner .l-restrict-container .sub-banner__card .sub-banner__text-container {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding: 20px 25px
	}
	
	@media screen and (max-width: 1024px) {
		.sub-banner .l-restrict-container .sub-banner__card .sub-banner__text-container {
			padding: 15px 20px
		}
	}
	
	@media screen and (max-width: 640px) {
		.sub-banner .l-restrict-container .sub-banner__card .sub-banner__text-container {
			padding: 10px 15px
		}
	}
	
	.sub-banner .l-restrict-container .sub-banner__card .img-wrapper {
		position: relative;
		padding-bottom: 64.2857142857%;
		height: 0;
		overflow: hidden;
		box-shadow: 0 5px 15px #c4a4a44d
	}
	
	.sub-banner .l-restrict-container .sub-banner__card .img-wrapper img {
		width: 100%;
		height: 100%;
		position: absolute
	}
	
	.sub-banner .l-restrict-container .sub-banner__card img {
		display: block;
		max-width: 100%;
		object-fit: cover;
		transition: all .2s ease-in-out;
	}
	
	.sub-banner .l-restrict-container .sub-banner__card .gradient-black {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 37.6569037657%;
		background: linear-gradient(180deg, #000, rgba(0, 0, 0, .15) 70%, rgba(51, 51, 51, 0))
	}
	
	.sub-banner .l-restrict-container .sub-banner__card .sub-banner__Title {
		font-weight: 500;
		line-height: 1.2;
		color: #fff;
		margin-bottom: 10px;
		font-size: 32px;
	}
	
	@media screen and (max-width: 1024px) {
		.sub-banner .l-restrict-container .sub-banner__card .sub-banner__Title {
			line-height: 1.5
		}
	}
	
	.sub-banner .l-restrict-container .sub-banner__card .sub-banner__Title .link__icon {
		width: 15px;
		height: 15px;
		margin-left: 10px
	}
	
	@media screen and (max-width: 1024px) {
		.sub-banner .l-restrict-container .sub-banner__card .sub-banner__Title .link__icon {
			width: 12px;
			height: 12px
		}
	}
	
	@media screen and (max-width: 640px) {
		.sub-banner .l-restrict-container .sub-banner__card .sub-banner__Title .link__icon {
			margin-left: 5px
		}
	}
	
	.sub-banner .l-restrict-container .sub-banner__card .sub-banner__Title .link__icon path {
		fill: #21d4fd
	}
	
	.sub-banner .l-restrict-container .sub-banner__card .sub-banner__subtitle {
		line-height: 1.5;
		color: #fff;
		font-size: 18px;
	}
	
	@media screen and (max-width: 640px) {
		.sub-banner .l-restrict-container .sub-banner__card .sub-banner__subtitle {
			display: none
		}
	}
	
	.sub-banner .l-restrict-container .sub-banner__card .sub-banner__description {
		line-height: 1.5;
		color: #fff;
		display: none
	}
	
	@media screen and (max-width: 960px) {
		.sub-banner .l-restrict-container .sub-banner__card .sub-banner__description {
			display: none
		}
	}
	.link__icon {
	    margin: 0 0 0 5px;
	    transform: rotateY(180deg);
	    transition: margin .2s ease-in-out;
	    width: 12px;
	    height: 12px;
	}
	.sub-banner{ width: 100%; margin-bottom: 0;}
   .con2{ width: 100%; position: relative; width: 100%; padding: 80px 0; padding-bottom: 180px;}
   .con2 h1{ font-size: 64px; margin-bottom: 40px; color: #000; font-weight: 400;}
   .c2item{ width: calc((100% - 50px)/2); margin-right: 50px; float: left; position: relative;}
   .c2item:nth-child(2n-1){ margin-right: 0;}
   .c2nr{ width: 100%; background-color: #F5F5F5; padding: 15px 20px;}
   .c2nr img{ width: 100%; display: block;}
   .c2nr h1{ font-size: 18px; text-align: center; margin-bottom: 0; /*opacity: 0;*/ line-height: 35px;}
   .c2nr:hover h1{ opacity: 1;}
   .c2item h2{font-size: 25px;padding-left: 10px;border-left: 1px solid #000;margin-bottom: 20px;color: #000;font-weight: 400;}
   .swiper-button-next_0::after{ font-size: 14px !important; color: #C8C6C6 !important;}
   .swiper-button-prev_0::after{ font-size: 14px !important; color: #C8C6C6 !important;}
   .swiper-pagination_0 span{ width: 25px; height: 2px; border-radius: 0;}
   .swiper-button-next_1::after{ font-size: 14px !important; color: #C8C6C6 !important;}
   .swiper-button-prev_1::after{ font-size: 14px !important; color: #C8C6C6 !important;}
   .swiper-pagination_1 span{ width: 25px; height: 2px; border-radius: 0;}
   
   .con3{ width: 100%; background-color: #1F1F1F; padding: 60px 0;}
   #hotLink-section {
   	padding: 60px 0;
   	background: #1f1f1f
   }
   
   @media screen and (max-width: 1024px) {
   	#hotLink-section {
   		padding: 40px 0
   	}
   }
   
   @media screen and (max-width: 960px) {
   	#hotLink-section {
   		padding: 40px 30px
   	}
   }
   
   @media screen and (max-width: 640px) {
   	#hotLink-section {
   		padding: 50px 30px
   	}
   }
   
   #hotLink-section .hot-link {
   	display: flex;
   	justify-content: center;
   	width: clamp(660px, 60%, 1150px);
   	margin: 0 auto;
   }
   
   @media screen and (max-width: 1024px) {
   	#hotLink-section .hot-link {
   		width: 64.453125%
   	}
   }
   
   @media screen and (max-width: 960px) {
   	#hotLink-section .hot-link {
   		width: 100%
   	}
   }
   
   @media screen and (max-width: 640px) {
   	#hotLink-section .hot-link {
   		flex-direction: column;
   		width: 100%
   	}
   }
   
   #hotLink-section .hot-link .hot-link__item {
   	flex: 0 1 30%;
   	border-radius: 10px;
   	background-color: #333;
   	box-shadow: 0 3px 6px #00000029
   }
   
   #hotLink-section .hot-link .hot-link__item:not(:last-of-type) {
   	margin: 0 clamp(30px, 2.6041666667vw, 50px) 0 0
   }
   
   @media screen and (max-width: 960px) {
   	#hotLink-section .hot-link .hot-link__item:not(:last-of-type) {
   		margin: 0 4.6875vw 0 0
   	}
   }
   
   @media screen and (max-width: 640px) {
   	#hotLink-section .hot-link .hot-link__item:not(:last-of-type) {
   		margin: 0 0 30px
   	}
   }
   
   @media (hover: hover)and (pointer: fine)and (min-width: 961px) {
   	#hotLink-section .hot-link .hot-link__item:hover {
   		background-color: #008cd6
   	}
   
   	#hotLink-section .hot-link .hot-link__item:hover img {
   		filter: brightness(0) invert(1)
   	}
   }
   
   @media screen and (max-width: 640px) {
   	#hotLink-section .hot-link .hot-link__item {
   		border-radius: 3px
   	}
   }
   
   #hotLink-section .hot-link .hot-link__item a {
   	display: flex;
   	flex-direction: column;
   	align-items: center;
   	justify-content: start;
   	height: 100%;
   	padding: clamp(30px, 2.6041666667vw, 50px) 0;
   	text-align: center;
   	color: #fff;
   	transition: all .1s ease-in-out
   }
   
   @media screen and (max-width: 960px) {
   	#hotLink-section .hot-link .hot-link__item a {
   		padding: 4.6875vw 0
   	}
   }
   
   @media screen and (max-width: 640px) {
   	#hotLink-section .hot-link .hot-link__item a {
   		flex-direction: row;
   		padding: 15px 0 15px 20px
   	}
   }
   
   #hotLink-section .hot-link .hot-link__item a img {
   	width: clamp(50px, 4.1666666667vw, 80px);
   	height: clamp(50px, 4.1666666667vw, 80px);
   	margin-bottom: 20px
   }
   
   @media screen and (max-width: 1024px) {
   	#hotLink-section .hot-link .hot-link__item a img {
   		width: 50px;
   		height: 50px;
   		margin-bottom: 10px
   	}
   }
   
   @media screen and (max-width: 960px) {
   	#hotLink-section .hot-link .hot-link__item a img {
   		width: 9.375vw;
   		height: 9.375vw
   	}
   }
   
   @media screen and (max-width: 640px) {
   	#hotLink-section .hot-link .hot-link__item a img {
   		width: 30px;
   		height: 30px;
   		margin: 0 20px 0 0
   	}
   }
   
   #hotLink-section .hot-link .hot-link__item a .hot-link__title {
   	font-size: clamp(15px, 1.0416666667vw, 20px);
   	font-weight: 500;
   	line-height: 1.5
   }
   
   @media screen and (max-width: 1024px) {
   	#hotLink-section .hot-link .hot-link__item a .hot-link__title {
   		font-size: 15px
   	}
   }
   
   @media screen and (max-width: 960px) {
   	#hotLink-section .hot-link .hot-link__item a .hot-link__title {
   		font-size: 2.34375vw
   	}
   }
   
   @media screen and (max-width: 640px) {
   	#hotLink-section .hot-link .hot-link__item a .hot-link__title {
   		font-size: 15px
   	}
   }
   
   @media screen and (max-width: 960px) {
   	#hotLink-section[css-main-site="105062000"] {
   		padding: 40px 15px
   	}
   }
   
   #hotLink-section[css-main-site="105062000"] .hot-link {
   	width: clamp(1230px, 80%, 1536px)
   }
   
   @media screen and (max-width: 1366px) {
   	#hotLink-section[css-main-site="105062000"] .hot-link {
   		width: clamp(922px, 90%, 1536px)
   	}
   }
   
   @media screen and (max-width: 1366px) {
   	#hotLink-section[css-main-site="105062000"] .hot-link .hot-link__item:not(:last-of-type) {
   		margin: 0 clamp(30px, 2.196193265vw, 30px) 0 0
   	}
   }
   
   @media screen and (max-width: 960px) {
   	#hotLink-section[css-main-site="105062000"] .hot-link .hot-link__item:not(:last-of-type) {
   		margin: 0 15px 0 0
   	}
   }
   
   @media screen and (max-width: 640px) {
   	#hotLink-section[css-main-site="105062000"] .hot-link .hot-link__item:not(:last-of-type) {
   		margin: 0 0 20px
   	}
   }
   
   @media screen and (max-width: 1366px) {
   	#hotLink-section[css-main-site="105062000"] .hot-link .hot-link__item a {
   		padding: clamp(30px, 3.6603221083vw, 50px) 0
   	}
   }
   
   @media screen and (max-width: 1024px) {
   	#hotLink-section[css-main-site="105062000"] .hot-link .hot-link__item a {
   		padding: 30px 0
   	}
   }
   
   @media screen and (max-width: 960px) {
   	#hotLink-section[css-main-site="105062000"] .hot-link .hot-link__item a {
   		padding: 4.6875vw 0
   	}
   }
   
   @media screen and (max-width: 640px) {
   	#hotLink-section[css-main-site="105062000"] .hot-link .hot-link__item a {
   		padding: 15px 0 15px 20px
   	}
   }
   
   @media screen and (max-width: 1366px) {
   	#hotLink-section[css-main-site="105062000"] .hot-link .hot-link__item a img {
   		width: clamp(50px, 5.8565153734vw, 80px);
   		height: clamp(50px, 5.8565153734vw, 80px)
   	}
   }
   
   @media screen and (max-width: 1024px) {
   	#hotLink-section[css-main-site="105062000"] .hot-link .hot-link__item a img {
   		width: 50px;
   		height: 50px
   	}
   }
   
   @media screen and (max-width: 960px) {
   	#hotLink-section[css-main-site="105062000"] .hot-link .hot-link__item a img {
   		width: 7.8125vw;
   		height: 7.8125vw
   	}
   }
   
   @media screen and (max-width: 640px) {
   	#hotLink-section[css-main-site="105062000"] .hot-link .hot-link__item a img {
   		width: 30px;
   		height: 30px
   	}
   }
   
   @media screen and (max-width: 1366px) {
   	#hotLink-section[css-main-site="105062000"] .hot-link .hot-link__item a .hot-link__title {
   		font-size: clamp(15px, 1.317715959vw, 18px)
   	}
   }
   
   @media screen and (max-width: 960px) {
   	#hotLink-section[css-main-site="105062000"] .hot-link .hot-link__item a .hot-link__title {
   		font-size: 15px
   	}
   }
   
   /*nav bar*/
.nav {
    box-shadow: 0px 8px 5px -5px #8f8f8f;
}

.nav ul {
    list-style-type: none;
    margin: 0;
    margin: auto;
    padding: 15px 0px;
}

.nav li {
    display: inline;
    padding: 0px 25px;
    border-right: solid 1px #cccccc;
}

.nav li:last-child {
    border-right: solid 0px #cccccc;
}

.nav li a.active,
.nav li a {
    color: #000;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
}

.nav li a:hover:not(.active) {
    color: #0088dd;
    text-decoration: none;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
}

.MobileNav {
    display: none;
}

   .sp_header{height:50px;overflow:hidden;background:#fff;position:fixed;z-index:10;width:100%; display: none;}
   .sp_logo{padding:10px;float:left;height:50px}
   .sp_logo img{margin:auto;max-height:30px;}
   .sp_nav{width:50px;float:right;position:relative;cursor:pointer;height:30px;margin-top:15px}
   .sp_nav span{display:block;background:#c9141e;width:30px;height:2px;position:absolute;left:10px;transition:all ease 0.35s}
   .sp_nav span:nth-of-type(1){top:0px}
   .sp_nav span:nth-of-type(2){top:10px}
   .sp_nav span:nth-of-type(3){top:20px}
   .sp_nav_se span:nth-of-type(1){top:10px;transform:rotate(45deg)}
   .sp_nav_se span:nth-of-type(2){width:0}
   .sp_nav_se span:nth-of-type(3){top:10px;transform:rotate(-45deg)}
   .sjj_nav{position:fixed;z-index:9;background:#eee;width:100%;height:calc(100% - 104px);font-size:14px;line-height:40px;top:-100%;left:0;overflow:auto;overflow-x:hidden;transition:top ease 0.35s;}
   .nav_show{top:50px}
   .sjj_nav>ul>li:first-child{overflow:hidden;border-top:0}
   .sjj_nav>ul>li:first-child>a{float:left;width:calc(100% - 70px)}
   .sjj_nav>ul>li:first-child .language{float:right;width:70px;overflow:hidden;line-height:30px;margin-top:5px}
   .sjj_nav>ul>li:first-child .language a{width:35px;float:left;border-left:1px #ddd solid;text-align:center;color:#999;}
   .sjj_nav ul li i{position:absolute;top:5px;right:0px;border-left:1px #ddd solid;height:30px;padding:0px 7px 0 7px;}
   .sjj_nav ul li i svg{transform:rotate(-90deg);transition:all ease 0.35s}
   .sjj_nav ul li .sjj_nav_i_se svg{transform:rotate(0deg)}
   .sjj_nav ul li{border-top:1px #ddd solid;margin-left:20px;position:relative;line-height:40px;font-size:14px}
   .sjj_nav>ul >li:last-child{border-bottom:1px #ddd solid;}
   .sjj_nav ul li ul{display:none}
   .sjj_nav ul li a{color:#666;width:80%}
   .sjj_nav ul li ul li a{color:#999;display:block;text-align:left;}
   .sjj_nav ul li i svg{width:20px;height:20px;fill:#555;}
   .sjj_nav ul li .sjj_nav_i_se svg{fill:#c9141e}
   .sjj_nav ul li ul li>ul{margin-left:10px}
   .con{ width: 100%; padding: 100px 0;}
   .footbtm p{ width: 100%; font-size: 15px; text-align: center;}
   
   /*nav bar*/
   .nav {
       box-shadow: 0px 8px 5px -5px #8f8f8f;
   }
   
   .nav ul {
       list-style-type: none;
       margin: 0;
       margin: auto;
       padding: 15px 0px;
   }
   
   .nav li {
       display: inline;
       padding: 0px 25px;
       border-right: solid 1px #cccccc;
   }
   
   .nav li:last-child {
       border-right: solid 0px #cccccc;
   }
   
   .nav li a.active,
   .nav li a {
       color: #000;
       -webkit-transition: all .4s ease;
       transition: all .4s ease;
       font-size: 15px;
   }
   
   .nav li a:hover:not(.active) {
       color: #0088dd;
       text-decoration: none;
       -webkit-transition: all .4s ease;
       transition: all .4s ease;
   }
   
   .MobileNav {
       display: none;
   }

   
   .introInfo {
       margin: auto;
       width: 70vw;
       min-width: 700px;
       text-align: center;
       margin-bottom: 100px;
   }
   
   .introInfo p {
       text-align: left;
       font-size: 20px;
       padding-bottom: 20px;
   }
   
   .introInfo .goal {
       margin-top: 70px;
       width: 80%;
       max-width: 350px;
       padding: 0 0 40px 0;
   }
   
   .text-left {
       background-color: #F1F1F1;
       height: 800px;
       text-align: center;
       border-right: solid 2px #fff;
   }
   
   .text-right {
       background-color: #F1F1F1;
       height: 800px;
       text-align: center;
       border-left: solid 2px #fff;
   }
   
   .imgBlock-right {
       border-left: solid 2px #fff;
   }
   
   .imgBlock-left {
       border-right: solid 2px #fff;
   }
   
   .imgBlock-right img{
       max-width: 958px;
       height: 100%;
       overflow: hidden;
       display: block;
       margin-right:auto;
   }
   .imgBlock-left img {
       max-width: 958px;
       height: 100%;
       overflow: hidden;
       display: block;
       margin-left:auto;
   }
   
   .textBlock01,
   .textBlock02,
   .textBlock03,
   .textBlock04 {
       width: 70%;
       margin: auto;
       text-align: left;
       margin-top: 150px;
   }
   .mobile {
       display: none;
   }
   .Block-50w {
       position: relative;
       width: 50%;
       overflow: hidden;
       float: left;
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
       box-sizing: border-box;
   }
   .text-left h3{ font-size: 28px; margin: 20px 0 10px; padding: 0 0 30px;}
   .text-left p{ font-size: 20px;} 
   
   .text-right h3{ font-size: 28px; margin: 20px 0 10px; padding: 0 0 30px;}
   .text-right p{ font-size: 20px;}
   
   #about {
       padding: 150px 0 150px 0;
       background-color: #fff;
       text-align: center;
   }
   
   #about .Title {
       font-weight: bold;
       font-size: 30px;
       line-height: 2;
       margin-bottom: 0.5rem;
   }
   
   #about .subTitle {
       font-size: 20px;
       line-height: 1.5;
       font-weight: normal;
   }
   
   @media screen and (min-width: 1280px) {
       #about row {
           max-width: 1280px;
           margin: auto;
           margin-top: 100px;
           margin-bottom: 50px;
           display: block;
           text-align: center;
       }
   }
   
   .Block-30w {
       position: relative;
       width: 30%;
       padding: 0 30px;
       margin: 0 1.5%;
       float: left;
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
       box-sizing: border-box;
   }
   
   .Block-40w {
       position: relative;
       width: 45%;
       padding: 0 15px;
       margin: 0 2.5%;
       overflow: hidden;
       float: left;
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
       box-sizing: border-box;
   }
   
   .Block-45w {
       position: relative;
       width: 45%;
       margin: 0 2.5%;
       overflow: hidden;
       float: left;
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
       box-sizing: border-box;
   }
   
   .Block-35w {
       position: relative;
       width: 30%;
       margin: 0 1.5%;
       overflow: hidden;
       float: left;
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
       box-sizing: border-box;
   }
   
   #about .Block-30w img {
       width: 160px;
   }
   
   #about .Block-30w .aboutPop-icon img {
       width: 220px;
       margin-left: -50px;
       margin-top: -50px;
   }
   
   .content {
       min-height: 190px;
       padding-bottom: 10px;
   }
   
   .contentTitle {
       font-size: 22px;
       color: #000;
       font-weight: 700;
       line-height: 1.5;
   }
   
   .contentText {
       font-size: 18px;
       line-height: 1.75;
       padding-top: 20px;
       padding-bottom: 30px;
   }
   
   .contentPlus {
       width: 32px;
       margin: auto;
       border: 0px;
       background-color: rgba(255, 255, 255, 0);
       opacity: 0.8;
   }
   
   .Block-30w .popBtn_multi{
       padding: 0px 18px 20px 18px;
   }
   .Block-30w .popBtn_multi:hover{
       box-shadow: 10px 10px 40px rgba(0,0,0,0.25);
       -webkit-transition: all .5s ease;
       transition: all .5s ease;
   }
   .Block-30w .popBtn_multi:hover .contentPlus {
       opacity: 1;
       transform:rotate(90deg);
       -moz-transform:rotate(90deg);
       -webkit-transform:rotate(90deg);
       -o-transform:rotate(90deg);
       -ms-transform:rotate(90deg);
       -webkit-transition: all .4s ease;
       transition: all .4s ease;
   }
   
   #about .Block-30w .contentPlus img {
       width: 100%;
       -webkit-transition: all .4s ease;
       transition: all .4s ease;
   }
   
   .contentHighlight01 {
       font-size: 16px;
       font-weight: bold;
       color: #555555;
       line-height: 1.75;
       text-align: left;
   }
   
   .Iso {
       font-size: 15px;
       font-weight: bold;
       color: #555555;
       border: solid 1px #707070;
       padding: 10px;
   }
   
   .Iso-tight {
       font-size: 13px;
       line-height: 1.55;
   }
   
   #about .row {
       display: block;
       padding-bottom: 15px;
   }
   
   .award-item {
       padding-bottom: 10px;
       padding-right: 20px;
       padding-left: 20px;
       display: block;
   }
   
   .award-img {
       float: left;
       padding-right: 10px;
   }
   
   .award-img img {
       max-width: 20px;
   }
   
   .award-highlight {
       font-weight: bold;
   }
   
   .award-content {
       float: left;
       font-weight: normal;
       text-align: left;
       font-size: 17px;
       color: #555;
       width: 85%;
   }
   
   .about-modal {
       display: none;
       /* Hidden by default */
       position: fixed;
       /* Stay in place */
       z-index: 1;
       /* Sit on top */
       padding-top: 150px;
       /* Location of the box */
       left: 0;
       top: 0;
       width: 100%;
       /* Full width */
       height: 100%;
       /* Full height */
       overflow: auto;
       /* Enable scroll if needed */
       background-color: rgb(0, 0, 0);
       /* Fallback color */
       background-color: rgba(0, 0, 0, 0.6);
       /* Black w/ opacity */
       -webkit-transition: all .4s ease;
       transition: all .4s ease;
   }
   
   .about-modal-content {
       background-color: #ffffff;
       margin: auto;
       padding: 20px;
       border: 1px solid #888;
       width: 35%;
       min-width: 500px;
       text-align: center;
       box-shadow: 0 0px 10px 5px rgba(0, 0, 0, 0.2);
   }
   
   .close {
       color: #aaaaaa !important;
       float: right;
       font-size: 50px !important;
       font-weight: normal;
       margin-top: -15px;
       -webkit-transition: all .4s ease;
       transition: all .4s ease;
   }
   
   .close:hover,
   .close:focus {
       color: #0088dd !important;
       text-decoration: none;
       cursor: pointer;
       -webkit-transition: all .4s ease;
       transition: all .4s ease;
   }
   
   .aboutPop-icon {
       width: 120px;
       margin: auto;
       padding-top: 40px;
   }
   
   .aboutPop-icon img {
       width: 100%;
   }
   
   .aboutPop-content {
       padding: 20px 0 80px 0;
   }
   
   .aboutPop-Subtitle {
       font-size: 19px;
       font-weight: bold;
       color: #555;
       line-height: 2;
   }
   
   .aboutPop-text {
       font-size: 16px;
       line-height: 1.5;
   }



#milestone {
    padding: 150px 0 150px 0;
    background-color: #EEEEEE;
    text-align: center;
}

#milestone .Title {
    font-weight: bold;
    color: #0088dd;
    font-size: 40px;
    line-height: 2;
    margin-bottom: 0.5rem;
}

#milestone .subTitle {
    font-size: 30px;
    color: #0088dd;
    line-height: 1.5;
    font-weight: normal;
}

@media screen and (min-width: 1280px) {
    #milestone row {
        max-width: 1280px;
        margin: auto;
        margin-top: 100px;
        margin-bottom: 50px;
        display: block;
        text-align: center;
    }
}

/* The actual timeline (the vertical ruler) */
.timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    margin-top: 100px;
    margin-bottom: 50px;

}

/* The actual timeline (the vertical ruler) */
.timeline::after {
    content: '';
    position: absolute;
    width: 1px;
    background-color: #0088dd;
    top: 15px;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
}

/* Container around content */
.box {
    padding: 0px 40px 10px 40px;
    position: relative;
    width: 50%;
}

/* The circles on the timeline */
.box::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    right: -4px;
    background-color: #0088dd;
    border: 2px solid #0088dd;
    top: 15px;
    border-radius: 50%;
    z-index: 1;
}

/* Place the container to the left */
.left {
    left: 0;
}

/* Place the container to the right */
.right {
    left: 50%;
}

/* Add arrows to the left container (pointing right) */
.left::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    right: 30px;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent white;
}

/* Add arrows to the right container (pointing left) */
.right::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    left: 30px;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
}

/* Fix the circle for containers on the right side */
.right::after {
    left: -9px;
}

/* The actual content */
.timeline-content-L {
    padding: 0px 0px 50px 20px;
    margin-top: -15px;
    position: relative;
    border-radius: 6px;
    text-align: right;
}

.timeline-content-R {
    padding: 0px 20px 50px 0px;
    position: relative;
    border-radius: 6px;
    text-align: left;
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {

    /* Place the timelime to the left */
    .timeline::after {
        left: 31px;
    }

    /* Full-width containers */
    .box {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }

    /* Make sure that all arrows are pointing leftwards */
    .box::before {
        left: 60px;
        border: medium solid transparent;
        border-width: 10px 10px 10px 0;
        border-color: transparent transparent transparent transparent;
    }

    /* Make sure all circles are at the same spot */
    .left::after,
    .right::after {
        left: 22px;
    }

    /* Make all right containers behave like the left ones */
    .right {
        left: 0%;
    }

    .timeline-content-L {
        text-align: left;
        padding: 0px 20px 50px 0px;
    }
}

.time-year {
    font-size: 30px;
    color: #0088dd;
    font-weight: bold;
}

.time-info {
    font-size: 17px;
    line-height: 1.5;
    padding: 12px 0 6px 0;
}


.time-btn {
    color: #A8A8A8;
    border: solid 1px #A8A8A8;
    padding: 10px 40px;
    border-radius: 5px !important;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
}

.time-btn:hover {
    background-color: #555;
    border: solid 1px #555;
    color: #F1F1F1;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
}

#more {
    display: none;
}


#csr {
    padding: 150px 0 150px 0;
    background-color: #fff;
    text-align: center;
}

#csr .Title {
    font-weight: bold;
    color: #000;
    font-size: 40px;
    line-height: 2;
    margin-bottom: 0.5rem;
}

#csr .subTitle {
    font-size: 30px;
    color: #000;
    line-height: 1.5;
    font-weight: normal;
}

.csr-card,
.csr-numbers {
    max-width: 1000px;
    margin: auto;
    margin-top: 50px;
}

.csr-numbers .row {
    margin-top: 100px;
    margin-bottom: 100px;
}

.csr-item {
    box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
}
.csr-item:hover{
    box-shadow: 5px 5px 40px rgba(0,0,0,0.5);
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
}
.csrZone-img-1 {
    height: 300px;
    width: 100%;
    background-image: url(../img/csr_01.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.csrZone-img-2 {
    height: 300px;
    width: 100%;
    background-image: url(../img/csr_02.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.csrZone-text {
    padding: 10px 30px;
}

.csrZone-text h1 {
    font-size: 25px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    padding-bottom: 0px;
}

.csrZone-text p {
    font-size: 20px;
    font-weight: normal;
    line-height: 1.5;
}

a .csrZone-img-1,
a .csrZone-img-2 {
    opacity: 1;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
}


a .csrZone-text,
a:visited .csrZone-text {
    color: #394756;
    padding: 30px;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
}

a:hover .csrZone-text,
a:hover .csr-item {
    /* background-color: #eaeaea; */
    color: #008cd6;
    background: -webkit-linear-gradient(#008cd6, #394756);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    text-decoration: none !important;
    box-shadow: 15px 15px 45px rgba(0,0,0,0.5);
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
}

.InnerGIGABYTEContent a:hover {
    text-decoration: none !important;
}

.csrInfo {
    text-align: left;
}

.csrIcon {
    width: 100%;
    text-align: center;
}

.csrIcon img {
    width: 70%;
    padding-top: 10px;
    padding-right: 5px;
}

.csr-row {
    padding: 50px 0;
    border-bottom: 1px solid #aaaaaa;
}

.csr-row:last-child {
    border-bottom: 0px;
}

.csrContent {
    width: 75%;
    margin: auto;
    padding: 0px 20px 20px 20px;
}

.csrDetail {
    font-size: 18px;
    color: rgb(39, 39, 39);
    font-weight: 400;
    line-height: 1.5;
    padding-bottom: 20px;
    text-align: left;
}

.csrAchieve {
    color: #394756;
    /* background: -webkit-linear-gradient(#9ca3aa, #494d50);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
    font-size: 14.5px;
    font-weight: bold;
    text-align: right;
}

.csrAchieve_number {
    font-size: 35px;
    font-weight: 600;
}

.csrAchieve_symbol {
    font-size: 18px;
    font-weight: bold;
}

#ing {
    padding: 150px 0 150px 0;
    background-color: rgba(0, 136, 221, 0.3);
    text-align: center;
}

#ing .Title {
    font-weight: bold;
    color: #000;
    font-size: 40px;
    line-height: 2;
    margin-bottom: 0.5rem;
}

#ing .subTitle {
    font-size: 30px;
    color: #000;
    line-height: 1.5;
    font-weight: normal;
}

.current-row {
    max-width: 1200px;
    margin: auto;
    margin-top: 100px;
}

.current-row .Block-30w {
    padding: 0;
}

.current-item {
    box-shadow: 0px 3px 5px #888888;
}

.current-img img {
    width: 100%;
}

a .current-text,
.current-text {
    position: absolute;
    margin-top: -150px;
    width: 100%;
    height: 150px;
    padding: 100px 0px 0px 0px;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 5px;
    color: #fff;
    background-image: linear-gradient(to bottom, #00446900,#00446980 ,#004469);
    text-transform: uppercase;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
}

a .current-img {
    opacity: 0.9;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
}

a:hover .current-img {
    opacity: 1;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
}

a:hover .current-text,
a:hover .current-line-animate {
    color: #fff;
    font-weight: 500;
    background-image: linear-gradient(to bottom, #008cd600, #00a6ff80,#00a6ff);
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
}
.current-line-animate{
    position: absolute;
    border-bottom: 10px solid #fff;
    width: 100%;
}
a:hover .current-line-animate{
    animation: underlineCurrent;
    animation-duration: .4s;
    animation-fill-mode:forwards;
}
@keyframes underlineCurrent{
    0%{border-bottom: #00457e solid 10px;width:0%;}
    100%{border-bottom: #00457e solid 10px;width:100%;}
}
   
   
   .hide {
       display: none;
   }
   .nv{ height: 65px;}
   
   .product1{ width: 100%; background-image: url(../images/summary-bg.jpg); padding: 80px 0;}
   .pro1pic{ width: 100%; max-width: 900px; margin: 0 auto;}
   .pro1pic img{ width: 100%; display: block;}
   .pro1nr h1{ font-size: 24px; color: #fff; margin-bottom: 15px;}
   .pro1nr ul li{ font-size: 13px; color: #fff; margin-bottom: 10px; }
   
   .pro1detil{ width: 100%; padding: 80px 0;     position: relative;
    background: linear-gradient(0deg, #1b1b1b 0%, #000 100%) center bottom no-repeat;}
   .pro1detilbt{ width: 100%; text-align: center;}
   .pro1detilbt h1{ font-size: 36px; color: #fff; text-align: center;}
   .slideTxtBox1 .hd ul li{ width: 100%; margin-top: 30px; text-align: center; background-color: ;}
   .slideTxtBox1 .hd ul li a{ display: inline-block; padding: 7px; border-bottom: 3px solid  transparent; font-size: 16px; color: #888;} 
   .slideTxtBox1 .hd ul li.on a{ border-color: #fff; color: #fff;}
   .slideTxtBox1 .hd ul{ border-bottom: 1px solid #888; padding-bottom: 10px;}
   .slideTxtBox1 .bd ul{ width: 100%; padding: 20px 0;}
   .slideTxtBox1 .bd ul img{ width: 100%; display: block;}
   
   .wapper1{ width: 95%; max-width: 900px; margin: 0 auto;}
   .pro1nav{ width: 100%; padding: 80px 0;     position: relative;
    background: linear-gradient(0deg, #1b1b1b 0%, #000 100%) center bottom no-repeat;}
   .pro1nav ul li { width: 100%; position: relative; border-radius: 10px; overflow: hidden; margin-bottom:30px;}
   .pro1nav ul li img{ width: 100%; display: block;}
   .prolnavwz{ padding: 20px; width: 100%; height: 100%; display: flex; align-items: center; position: absolute; top: 0; left: 0;}
   .prolnavwz h1{ font-size: 24px; color: #fff;}
   .prolnavwz p{ font-size: 18px; color: #fff;}
    .btn-anchor {
       width: 48px;
       height: 48px;
	   color: #fff;
	       cursor: pointer;
	       display: inline-block;
	       vertical-align: middle;
	       bottom: 20px;
		   right: 20px;
	       position: absolute;
	       background: url(../images/btn-more-down.svg) 0 0/cover no-repeat;
   }
   .pro1video{ width: 100%;  padding-bottom: 80px;
    background: linear-gradient(0deg, #1b1b1b 0%, #000 100%) center bottom no-repeat;}
	.pro1video video{ display: block;}
   .pro1videonrbt h5 { margin: 0;}
   .pro1videonrbt{ width: 100%;margin: 0 auto; margin-bottom: 80px; text-align: center; max-width: 900px; }
   .pro1videonrbt h5 span{ font-size: 14px;     background-image: linear-gradient(140deg, #00D0FF 0%, #FF00BF 100%); color: transparent;    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: none;}
	.pro1videonrbt h1{ font-size: 36px; color: #fff;}
	.pro1videonrbt p{ font-size: 14px; color: #fff;}
	.pro1videonr ul li{ width: calc((100% - 120px)/5); margin-right: 30px; float: left; display: flex; align-items: center; font-size: 15px; color: #fff;}
	.pro1videonr ul li:nth-child(5n){ margin-right: 0;}
	.pro1videonr ul li img{ margin-right: 10px;}
	
	.pro1ai{ width: 100%; padding: 80px 0;
    background: linear-gradient(0deg, #1b1b1b 0%, #000 100%) center bottom no-repeat;}
	.pro1videolist{ width: 100%;}
	.pro1videolist ul li{ width: calc((100% - 40px)/2); margin: 10px; float: left;}
	.pro1videolist ul li img{ width: 100%; display: block; margin-bottom: 10px;}
	.pro1videolist{ width: 100%; padding-top:80px;}
	.pro1videolist ul li h5{ margin: 0;}
	.pro1videolist ul li h5 span{ font-size: 14px;     background-image: linear-gradient(140deg, #00D0FF 0%, #FF00BF 100%); color: transparent;    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: none;}
	.pro1videolist ul li h1{ font-size: 24px; color: #fff;}
	.pro1videolist ul li p{ font-size: 14px; color: #fff; margin-bottom: 20px;}
	.pro1videolist ul li a{ font-size: 14px; color: #fff; text-decoration: underline;}
   
   .pro1detil1{ width: 100%;  padding: 80px 0;
    background: linear-gradient(0deg, #1b1b1b 0%, #000 100%) center bottom no-repeat;}
	
	.btn-deepdive {
	    color: #fff;
	    cursor: pointer;
	    display: inline-block;
	    vertical-align: middle;
	    width: 40px;
	    height: 40px;
	    background-image: url(../images/btn-deepdive.svg);
	    background-position-x: 0;
	    background-position-y: 0;
	    background-size: cover;
	    background-repeat: no-repeat;
	    transition: background 0.25s;
	}
   .pro1detil1 ul li{ width: 100%; text-align: center;}
   .pro1detil1 ul li img{ width: 100%;}
   .pro1detil1 ul li a{ font-size: 14px; color: #B5B5B5; text-decoration: underline;}
	.pro1detil1 ul li p{ font-size: 12px; color: #b5b5b5;} 
	.pro1detil1 .pro1videonrbt{ margin-bottom: 20px;}
	.deep-dive-button-container-close {
	    position: fixed;
	    width: 40px;
	    height: 40px;
	    bottom: 7.5vh;
	    left: 50%;
	    margin-left: -20px;
	    background-image: url(../images/deep-dive-close-button.svg);
	    transition: background 0.25s;
	    cursor: pointer;
	    z-index: 101;
	}
	.wzshow{  position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: #000; z-index: 99999; padding: 120px 190px 240px; display: none;}
	
	.pro1detil2{ width: 100%;  padding: 80px 0;
    background: linear-gradient(0deg, #1b1b1b 0%, #000 100%) center bottom no-repeat;}
	.pro1detil2pic{ margin-bottom: 80px; width: 100%;}
	.pro1detil2pic img{ width: 100%; display: block;}
	.pro1detil2list{ width: 100%; display: flex;  justify-content: space-between; flex-wrap: wrap;}
	.pro1detil2item{ width: calc((100% - 0px)/2);}
	.pro1detil2bts{ width: 100%; position: relative; padding-left: 15px; margin-bottom: 20px;}
	.pro1detil2bts h1{ font-size: 24px; color: #fff;}
	.pro1detil2bts::before {
	    content: "";
	    position: absolute;
	    top: 5%;
	    left: 0;
	    height: 90%;
	    width: 2px;
	    background-image: linear-gradient(0deg, #00D0FF 0%, #FF00BF 100%);
	}
	.pro1detil2item ul li{
		width: calc((100% - 40px)/2); margin: 10px; position: relative;
		color: #fff;
		    height: 100%;
		        min-height: 380px;
				padding: 15px;
		    padding-bottom: calc(36px + 15px);
		    background: linear-gradient(0deg, #111 0%, #111 1000%), linear-gradient(135deg, #333 0%, #030303 50%, #333 100%);
		    background-clip: padding-box, border-box;
		    background-origin: border-box;
		    border: 1px solid transparent; float: left;
	}
	.pro1detil2item ul li img{ width: 100%; display: block; margin-bottom: 15px;}
	.pro1detil2item ul li h1{ font-size: 16px; color: #fff;}
	.pro1detil2item ul li p{ font-size: 14px; color: #fff;}
	.pos-corner{
		position: absolute; bottom: 10px; right: 10px;
	}
	.pro1detil3{ width: 100%;  padding: 80px 0;
    background: linear-gradient(0deg, #1b1b1b 0%, #000 100%) center bottom no-repeat;}
	.pro1detil3lf{ width: 50%;}
	.pro1detil3lf img{ width: 100%; display: block;}
	.pro1detil3rt{ width: 50%; padding: 40px;}
	.pro1detil3nr{ width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-end;}
	.pro1detil3rt ul li{ width: calc((100% - 40px)/2); margin-right: 40px; float: left;}
	.pro1detil3rt ul li:nth-child(2n){ margin-right: 0;}
	.pro1detil3rt ul li h1{ font-size: 42px; color: #00FFFF; font-weight: 400; margin-bottom: 10px;}
	.pro1detil3rt ul li h2{ font-size: 16px; color: #fff;}
	.pro1detil3rt ul li h2 strong{ padding: 1px 5px; display: inline-block; border: 1px solid #fff; border-radius: 10px; margin-left: 10px;}
	.pro1detil3rt ul li p{ font-size: 14px; margin: 20px 0; color: #fff;}
	.pro1detil3 ul li{ width: calc((100% - 90px)/3); margin: 15px; float: left; padding: 15px; min-height: 450px;} 
	.pro1detil3 ul li h2{ font-size: 24px; color: #fff; margin-bottom: 30px;}
	.pro1detil3list{ width: 100%; position: relative;}
	.pro1detil3list dl dd{ width: 100%; margin-bottom: 10px;}
	.pro1detil3list dl dd h1{ font-size: 42px; color: #00FFFF; font-weight: 400;}
	.pro1detil3list dl dd p{ font-size: 16px; color: #fff; padding: 0;}
	.pro1detil3list dl dd span{ font-size: 12px; color: #b5b5b5b;}
	
	.pro1detil4{ width: 100%; padding: 80px 0;background: linear-gradient(0deg, #111 0%, #111 1000%), linear-gradient(135deg, #333 0%, #030303 50%, #333 100%); overflow: hidden;}
	.mySwiperpro1_4{ width: 100%; max-width: 700px; margin: 0 auto; overflow: visible !important;}
	.pro1detil4nr h1{ font-size: 16px; text-align: center; color: #Fff;}
	.pro1detil4nr p{ font-size: 14px; color: #b5b5b5; text-align: center;}
	.swiper-paginationpro1_4{ bottom: -10% !important; }
	.swiper-paginationpro1_4 span{ background-color: #fff;}
	.mySwiperpro1_4 .swiper-slide{ opacity: 0.5;}
	.mySwiperpro1_4 .swiper-slide.swiper-slide-active{ opacity: 1;}
	
	.pro1detil5{ width: 100%; padding: 80px 0; background-image: url(../images/ud.jpg); background-size: cover; overflow: hidden;}
	.mySwiperpro1_5{ width: 100%; position: relative;}
	.pro1_5item{ width: 100%; background-color: #161616; padding: 64px;}
	.pro1_5item img{ width: 100%; display: block;}
	.pro1_5itembt h1{ font-size: 24px; color: #fff; text-align: center;}
	.pro1_5itembt p{ font-size: 14px; color: #b5b5b5; text-align: center;}
	.pro1_5item dl{ width: 100%;}
	.pro1_5item dl dd{ margin: 20px 0;}
	.pro1_5item dl dd h2{ font-size: 27px; color: #00FFFF; text-align: center; font-weight: 400;}
	.pro1_5item dl dd p{ font-size: 13px; color: #b5b5b5; text-align: center;}
	.pro1detil5 .pro1videonrbt{ margin-bottom: 20px;}
	
	.pro1detil6{ width: 100%; padding: 80px 0; background-image: url(../images/aorus-world-5.jpg); background-size: cover; overflow: hidden;}
	.pro1detil6 ul {
		    display: grid;
		    grid-template-columns: repeat(2, minmax(auto, 1fr));
		    grid-template-rows: repeat(2, auto);
		    gap: 1vw;
	}
	.pro1detil6 ul li:first-child{
		    grid-row: span 2 / span 2;
	}
	.pro1detil6 ul li{ width: 100%; float: left; margin-right: 0; background-color: #161616; font-size: 14px; padding: 30px; margin-bottom: 0;}
	.pro1detil6 ul li:nth-child(2n){ margin-right: 0;}
	.pro1detil6 ul li img{ width: 100%; display: block;}
	.text-sub-headline{ width: 100%; display: flex; align-items: center; font-size:24px; font-weight: bold; color: #fff;}
	.text-sub-headline img{ width: 40px !important; margin-right: 15px; }
	.pro1detil6 ul li .nr{ font-size: 14px; color: #b5b5b5;}
	.kp-info-string{ font-size: 27px; color: #00ffff;}
	.pro16_item{ padding: 20px 0; width: 100%;}
	.pro16_pic{ width: 100%; margin-top: 0;}
	.pro16_pic img{ width: 100%; display: block;}
	
	.pro1detil7{ width: 100%; padding: 80px 0;background: linear-gradient(0deg, #111 0%, #111 1000%), linear-gradient(135deg, #333 0%, #030303 50%, #333 100%); overflow: hidden;}
	.pro1detil7logo{ width: 200px; margin-bottom: 20px;}
	.pro1detil7logo img{ width: 100%; display: block;}
	.pro1detil7list ul li{ font-size: 16px; line-height: 30px; color: #fff;}
	.pro16_item{ position: relative;}
	.model-content{ margin-top: 20px;}
	.specText{ font-size: 18px;}
	.black{ background-color: transparent;}
	.supportcon{ width: 100%; padding: 30px 0;}
	.slideTxtBox2{ width: 100%;}
	.slideTxtBox2 .hd{ width: 100%; padding-bottom: 20px;     border-bottom: 1px solid #333; margin: 30px 0;}
	.slideTxtBox2 .hd ul li{ margin: 0 10px; float: left; font-size: 18px; color: #999;}
	.slideTxtBox2 .hd ul li.on{ color: #fff;}
	.supportselect label{ font-size: 18px; color: #fff;}
	.supportselect select{ height: 30px; background-color: transparent; color: #fff;}
	.supportselect select option{ background-color: #1E1E1E;}
	.div-table {
	    display: table;
	    width: 100%;
	}
	.txt2{ display: none;}
	.supportselect{ margin-bottom: 30px;}
	.detail-div{ margin-top: 10px; margin-bottom: 20px;}
	.txt1 .h2 span{ font-size: 14px;}
	div.div-table-cell {
	    display: table-cell;
	    padding: 25px 10px;
	    font-size: 16px;
	    text-align: center;
	    vertical-align: middle;
	    border-left: 1px solid #666;
	    border-bottom: 1px solid #666;
	}
	div.div-table-cell:first-child{
	   
	    border-left: 0;
	    
	}
	.job2 ul li{ width: 100%; margin-bottom: 20px;}
	.info-footer{ width: 100%; margin-top: 80px;}
	.faqitem{ width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #333;}
	.faq-quest a{ font-size: 18px; color: #fff;}
	.faq-spec{ font-size: 16px; color: #666;}
	#js-gallery-panzoom{ width: 100%;}
	#js-gallery-panzoom img{ width: 100%;}
	
	
	.careernr{ width: 100%; position: relative;}
	.carewz{ width: 90%; max-width: 1400px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
	.carewz h1{ font-size: 50px; margin: 20px 0 10px; color: #fff;}
        .carewz .nr {
            max-width: 60%;
            font-size: 16px;
            color: #fff;
            margin: 30px 0 0;
        }
	
	.contact-us-header .page-title{ font-size: 29px; margin-bottom: 20px;}
	.description{ font-size: 18px;}
	
	
   @media screen and (max-width:768px){
	   .DownloadImageList {
	       z-index: 1;
	       max-height: 100vh;
	       width: 100%;
	       padding: 4.9479166667vw 1.3020833333vw;
	       display: block;
	       grid-template-columns: 1fr 1fr;
	       grid-template-rows: 12fr 1fr;
	       grid-column-gap: 5.46875vw;
	       grid-template-areas:
	           "defaultImage ImageList"
	           "defaultImage downloadButton";
	       position: relative;
	   }
	   .DownloadImageList .Grid-DefaultImage {
	       grid-area: defaultImage;
	       align-items: center;
	       justify-content: center;
	       display: flex;
	       height: auto;
	       width: 100%;
	   }
	   #js-gallery-panzoom {
	       width: 100%;
	       position: relative;
	       display: block;
	   }
	   .DownloadImageList .Grid-listDownloadImage .downloadImageItem {
	       display: inline-flex;
	       position: relative;
	       margin-right: 1.8229166667vw;
	       cursor: pointer;
	       width: 25%;
	       height: auto;
	       vertical-align: top;
	       align-items: center;
	       justify-content: center;
	       overflow: hidden;
	       z-index: 2;
	   }
	   .css-Item-ImagePicture{
		    width: 100%;
			
	   }
	   .l-restrict-container-commonBase {
	       margin-left: auto;
	       margin-right: auto;
	       max-width: 90%;
	   }
	   .main-content .model-header>.header-title>.model-name {
	       width: 70%;
	      
	   }
	   .product1 {
	       width: 100%;
	       background-image: url(../images/summary-bg.jpg);
	       padding: 20px 0;
	   }
	   .pro1videonr ul li {
	       width: 100%;
	       margin-right: 0;
	       float: left;
	       display: flex;
	       align-items: center;
	       font-size: 15px;
	       color: #fff;
	       justify-content: center;
	       margin: 10px 0;
	   }
	   .pro1videonrbt {
	       width: 100%;
	       margin: 0 auto;
	       margin-bottom: 20px;
	       text-align: center;
	       max-width: 900px;
	   }
	   .pro1videonrbt h1 {
	       font-size: 20px;
	       color: #fff;
	   }
	   .pro1videonrbt p {
	       font-size: 12px;
	       color: #fff;
	   }
	   .pro1ai {
	       width: 100%;
	       padding: 30px 0;
	       background: linear-gradient(0deg, #1b1b1b 0%, #000 100%) center bottom no-repeat;
	   }
	   .Content_Area-Bottom{ margin-top: 20px;}
	   .mobile {
	       display: block;
	   }
	   .pro1videonr ul li {
	       width: 100%;
	       margin-right: 0;
	       float: left;
	       display: flex;
	       align-items: center;
	       font-size: 15px;
	       color: #fff;
	       justify-content: center;
	       margin: 10px 0;
	   }
	   .pro1videonr ul li img {
	       margin-right: 10px;
	       width: 30px;
	   }
	   .pro1videolist {
	       width: 100%;
	       padding-top: 30px;
	   }
	   .pro1videolist ul li {
	       width: 100%;
	       margin: 10px 0;
	       float: left;
	   }
	   .pro1detil1 {
	       width: 100%;
	       padding: 30px 0;
	       background: linear-gradient(0deg, #1b1b1b 0%, #000 100%) center bottom no-repeat;
	   }
	   .pro1detil2 {
	       width: 100%;
	       padding: 30px 0;
	       background: linear-gradient(0deg, #1b1b1b 0%, #000 100%) center bottom no-repeat;
	   }
	   .pro1detil2pic {
	       margin-bottom: 30px;
	       width: 100%;
	   }
	   .pro1detil2item {
	       width: 100%;
	   }
	   .pro1detil2item ul li {
	       width: 100%;
	       margin: 10px 0;
	       position: relative;
	       color: #fff;
	       height: 100%;
	       min-height: AUTO;
	       padding: 15px;
	       padding-bottom: calc(36px + 15px);
	       background: linear-gradient(0deg, #111 0%, #111 1000%), linear-gradient(135deg, #333 0%, #030303 50%, #333 100%);
	       background-clip: padding-box, border-box;
	       background-origin: border-box;
	       border: 1px solid transparent;
	       float: left;
	   }
	   .pro1detil3 {
	       width: 100%;
	       padding: 30px 0;
	       background: linear-gradient(0deg, #1b1b1b 0%, #000 100%) center bottom no-repeat;
	   }
	   .pro1detil3lf {
	       width: 100%;
	   }
	   .pro1detil3rt {
	       width: 100%;
	       padding: 10px;
	   }
	   .pro1detil3 ul li {
	       width: 100%;
	       margin: 15px 0;
	       float: left;
	       padding: 10px;
	       min-height: AUTO;
	   }
	   .pro1detil3 ul li h2 {
	       font-size: 16px;
	       color: #fff;
	       margin-bottom: 10px;
		   text-align: center;
	   }
	   .pro1detil3list dl dd h1 {
	       font-size: 20px;
	       color: #00FFFF;
	       font-weight: 400;
		   margin-bottom: 10px;
	   
	   }
	   .pro1detil3list dl dd {
	       width: 100%;
	       margin-bottom: 10px;
	       text-align: center;
	   }
	   .pro1detil3list dl dd p {
	       font-size: 12px;
	       color: #fff;
	       padding: 0;
	   }
	   .wzshow {
	       position: fixed;
	       top: 0;
	       left: 0;
	       width: 100%;
	       height: 100vh;
	       background-color: #000;
	       z-index: 99999;
	       padding: 20px;
	       display: none;
	   }
	   .pro1detil4 {
	       width: 100%;
	       padding: 30px 0;
	       background: linear-gradient(0deg, #111 0%, #111 1000%), linear-gradient(135deg, #333 0%, #030303 50%, #333 100%);
	       overflow: hidden;
	   }
	   .pro1detil5 {
	       width: 100%;
	       padding: 30px 0;
	       background-image: url(../images/ud.jpg);
	       background-size: cover;
	       overflow: hidden;
	   }
	   .pro1_5item {
	       width: 100%;
	       background-color: #161616;
	       padding: 20px;
	   }
	   .pro1_5item dl dd h2 {
	       font-size: 20px;
	       color: #00FFFF;
	       text-align: center;
	       font-weight: 400;
	   }
	   .pro1_5item dl dd p {
	       font-size: 12px;
	       color: #b5b5b5;
	       text-align: center;
	   }
	   .pro1detil6 {
	       width: 100%;
	       padding: 30px 0;
	       background-image: url(../images/aorus-world-5.jpg);
	       background-size: cover;
	       overflow: hidden;
	   }
	   .pro1detil6 ul {
	       display: flex;
	       grid-template-columns: repeat(2, minmax(auto, 1fr));
	       grid-template-rows: repeat(2, auto);
	       gap: 1vw;
	       flex-wrap: wrap;
	   }
	   .pro1detil6 ul li:first-child {
	       grid-row: none;
	   }
	   .pro1detil6 ul li {
	       width: 100%;
	       float: left;
	       margin-right: 0;
	       background-color: #161616;
	       font-size: 14px;
	       padding: 10px;
	       margin-bottom: 0;
	   }
	   .pro1detil7 {
	       width: 100%;
	       padding: 30px 0;
	       background: linear-gradient(0deg, #111 0%, #111 1000%), linear-gradient(135deg, #333 0%, #030303 50%, #333 100%);
	       overflow: hidden;
	   }
	   .pro1detil7list ul li {
	       font-size: 12px;
	       line-height: 30px;
	       color: #fff;
	   }
	   
	   .con{ padding: 20px 0;}
	.head{ display: none;}
  .sp_header{ display: block; overflow: visible;}
  .h_search_con form {
      height: 40px;
      background: #f5f5f5;
      border-radius: 10px;
  }
  .h_search_con form #search_keywords2 {
      float: left;
      border: none;
      background: none;
      height: 40px;
      line-height: 40px;
      padding: 0 10px;
      width: calc(100% - 40px);
  }
  .h_search_con form #search2 {
      float: right;
      border: none;
      background: var(--primary-color) url(../images/ico_search1.png) center no-repeat;
      background-size: 50% auto;
      color: #fff;
      font-size: 0;
      height: 40px;
      line-height: 40px;
      width: 40px;
      cursor: pointer;
      transition: all .3s ease;
      border-radius: 10px;
  }
  .bannerwz h1 {
      font-size: 16px;
      color: #fff;
      margin-bottom: 10px;
  }
  .bannerwz {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      width: 90%;
      max-width: 1440px;
  }
  .banner video{ min-height: 400px; object-fit: cover;}
  .bannerwz p {
      font-size: 12px;
      color: #fff;
  }
  .nv{ height: 50px;}
  .sub-banner .l-restrict-container .sub-banner__card .sub-banner__Title {
      font-weight: 500;
      line-height: 1.2;
      color: #fff;
      margin-bottom: 10px;
      font-size: 20px;
  }
  .sub-banner {
      width: 100%;
      margin-bottom: 100px;
  }
  .con2 {
      width: 100%;
      position: relative;
      width: 100%;
      padding: 20px 0;
      padding-bottom: 30px;
  }
  .con2 h1 {
      font-size: 26px;
      margin-bottom: 15px;
      color: #000;
      font-weight: 400;
  }
  .wapper{ width: 95%;}
  .c2item h2 {
      font-size: 15px;
      padding-left: 10px;
      border-left: 1px solid #000;
      margin-bottom: 15px;
      color: #000;
      font-weight: 400;
  }
  .c2item {
      width: 100%;
      margin-right: 0;
      float: left;
      position: relative;
      margin-bottom: 20px;
  }
  .con2 h1 {
      font-size: 14px;
      margin-bottom: 15px;
      color: #000;
      font-weight: 400;
	  line-height: normal;
	  opacity: 1;
  }
  .c2nr {
      width: 100%;
      background-color: #F5F5F5;
      padding: 5px;
  }
  .foot{ padding: 0;}
  .footitem {
      width: 100%;
      text-align: center;
      
      
  }
  .footitem h1 {
      font-size: 18px;
      color: #000;
      margin-bottom: 0;
      line-height: 50px;
	  position: relative;
	  border-bottom: 1px solid #ddd;
  }
  .footitem h1::after{
	  width: 10px; height: 10px; content: ""; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background-image: url(../images/down.png); background-size: contain;
   }
  .footitem ul{
	   display: none;
	   
	   
  }
  .foot .wapper{ width: 100%;}
  .footitem ul li{
	  line-height: 50px;
	  background-color: #EEEEEE;
	  border-bottom: 1px solid #ddd;
  }
  .MobileNav {
      position: relative;
      display: inline-block;
  }
  .pcNav {
      display: none;
  }
   }