body {
	font-family: "arial, helvetica, sans-serif";
	width: 100vw;
}

* {
	margin: 0;
	padding: 0;
	border: 0;
}
ul, li {
	list-style: none;
}
/* video */
section#vr-hero {
	height: auto; /* 100vh */
	width: 100vw;
	background: #2b2b2b;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;	
}

section#vr-hero video {
	margin-left: 2.5%;
	margin-right: 2.5%;
	width: 100%;
	/* height: 100%; */
	object-fit: cover;/* 调整图片或video来适应容器，保持长宽比溢出的进项裁剪 */
	object-position: center top;/* 根据容器大小重置图片大小 */
	position: relative;
	display: inline-block;/* 行内块元素 */
	vertical-align: baseline;/* 一个元素的垂直对齐方式:放置在父元素的基线上 */
}


section#vr-hero .vr-hero-video-content {
	display: flex;
	flex-direction: column;/* 浮动项目将垂直显示，正如一个列一样 */
	align-items: center;
	text-align: center;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	justify-content: flex-end;
}

img {
	height: auto;
	max-width: 100%;
}

section#vr-hero .vr-hero-video-content-skull {
	width: 12vw;
	height: auto;
	margin-top: 30%;	
	max-width: 10%; /* 10.9375rem */
	padding-bottom: 1.5em;
	opacity: 0;/* 不透明度:完全透明 */
}

section#vr-hero .vr-hero-video-content-logo {
	padding: 1%;
	max-width: 50%; /* 43.75rem */
	opacity: 0;
}

section#vr-hero .vr-hero-video-content-copy {
	max-width: 50vw;
	opacity: 0;
	color: #FFFFFF;
	font-size: 35px;
	margin: 1%;
	line-height: 1.6;
}

/* end video */

/* product-intro产品介绍 */
.pin-spacer{ 

}
section#product-intro {
    background-image: url("images/section-1-background.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
  }
section#product-intro .product-intro-container {/* 第3层 */
    display: grid;
    grid-template-columns: 1fr 1fr; /* 网格布局中的列数（和宽度） */
    max-width: 100%;/* 1500px */
    margin: 0 auto;
    margin-left: auto;
    margin-right: auto;
  }

  /* 左边区域 */
section#product-intro .product-intro-container .product-intro-content {/* 第4层 */
    height: calc(100vh);
    display: flex;
    justify-content: center;
    flex-direction: column;
    /* padding-left: 5%; */
    /* padding-right: 1%; */
  }
 
section#product-intro .product-intro-container .product-intro-content-header{/* 第5层 */
		/* font-size: 4.5em; */
		/* margin-bottom: 3%; */
		/* text-align: center; */
	
} 

section#product-intro .product-intro-container .product-intro-content .vr-font-gray{/* 第6层 */
		display: block;
	  	color: #888888;
	  	font-size: 120%;  /* 3em */
	  	line-height: 1.5em; /* 2.5em */
	  }
  }


  section#product-intro .product-intro-container .product-intro-content .vr-font-bordered{/* 第6层 */
	  display: block;
	  color: transparent;
	  font-size: 3em; /* 5em */
	  line-height: 1.2em;
	  -webkit-text-stroke: 3px #888888;
	  -webkit-text-fill-color: none;
  }

  /* 右边区域 */
section#product-intro .product-intro-container .product-intro-product {/* 第4层 */
    position: relative;
    height: calc(100vh);
    display: flex;
    align-items: center;
    margin-right: 5%;
  }

section#product-intro .product-intro-container .product-intro-product .product-intro-product-sensor {/* 第6层 */
    position: absolute;
    z-index: 100;
  }
  section#product-intro .product-intro-container .product-intro-product .product-intro-product-sensor-cutout {/* 第6层sensor图片 */
    position: absolute;
    z-index: 9;
  }
  section#product-intro .product-intro-container .product-intro-product .product-intro-product-image{
	  position: absolute;
	  z-index: 8;
	  left: 0px;
  }
.product-intro-headers{
	  width: 100%;
	  overflow: hidden;
	  padding: 2%;
	  position: relative;
	  box-sizing: border-box;
  }
.product-intro-headers .product-intro-headers-top{
	text-align: center;
	color: #e6e6e6;
	font-size: 2.5em;
	width: 100%;
}
.product-intro-headers .product-intro-headers-top h2{
	width: 60%;
	position: absolute;
	z-index: 10;
	text-align: center;
	padding: 5% 20%;
}
/* 选项卡开始 */
@font-face {
	font-family:'ITC_180';
	src: url(./font/ITC_MACHINE_med_180.woff2);
}
@font-face {
	font-family:'ITC_240';
	src: url(./font/ITC_MACHINE_med_240.woff2);
}
.vr-wrapper{
	width: 100%;
	height: 100%;
	position: relative;
}
.vr-wrapper .vr-nav{
	text-align: center;/* 文本居中对齐 */
	width: 50%;
	margin-left: 25%;
	margin-right: 25%;
	position: absolute;
	top: 30%;
	justify-content: center;
	z-index: 9999;
	
}
.vr-wrapper .vr-nav button{
	background-color: unset;/*去掉背景颜色*/
	border: none;/*去掉边框样式*/
	margin: 0.8%;
	font-size: 2em;
	color: #FFFFFF;
	font-family: 'ITC_180';
	opacity: 0.8;
}
.vr-wrapper .vr-nav button:hover{
	border-bottom: 5px solid #990000;
	font-weight: bold;/* 字体加粗 */
	opacity: 1;
}
.vr-wrapper .vr-conternt{
	width: 100%;
	height: auto;
	position: relative;
	display: none;/* 生成的框的类型:不会被显示 */
	
}
.vr-wrapper .vr-conternt img{
	width: 100%;
	height: 100%;
}
.vr-wrapper .vr-conternt h2{
	display: block;
	font-family: 'ITC_240';
	-webkit-text-stroke: 3px #FFFFFF;
	-webkit-text-fill-color: none;
	color: transparent;
	font-size: 4rem;
	line-height: 1em;
	position: absolute;
	top: 0;
	width: 50%;
	text-align: center;/* 文本居中对齐 */
	margin-left: 25%;
	margin-right: 25%;
	padding-top: 3%;
}
.vr-wrapper .vr-conternt h3{
	font-family: 'ITC_180';
	font-size: 3rem;
	width: 50%;
	position: absolute;
	top: 15%;
	margin-left: 25%;
	text-align: center;
	color: #FFFFFF;
	line-height: 1.2em;
}
.vr-wrapper .vr-conternt p{
	color: #FFFFFF;
	font-size: 1.5rem;
	text-transform: uppercase;
	position: absolute;
	margin-top: 5%;
	top: 16%;
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
	text-align: center;
}
/* end 选项卡 */

/* -- frame rates section帧速率部分 -- */
section#section-frame-rates-accordion{
	width: 100%;
	height: 100vh;
}

section#section-frame-rates-accordion .section-frame-rates-slides{
	display: flex;
	height: 100%;
}

section#section-frame-rates-accordion .section-frame-rates-slides .section-frame-rates-slide{
	
	position: relative;
	flex-basis: 25%;/* 设置或检索弹性盒伸缩基准值:25% */
	justify-content: center;
	align-items: center;
	height: 100%;
	overflow: hidden;
	display: flex;
	transition: flex-basis 0.6s cubic-bezier(0.4,0,0.2,1) 0.2s;/* cubic-bezier值x1,y1,x2,y2 */
}
section#section-frame-rates-accordion .section-frame-rates-slides .section-frame-rates-slide:nth-of-type(1) {
	background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(../images/8k-frame-rates-video-thumb.jpg);
	background-position: center;
	background-size: cover;	
}
section#section-frame-rates-accordion .section-frame-rates-slides .section-frame-rates-slide:nth-of-type(2) {
	background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(../images/6k-frame-rates-video-thumb-v2.jpg);
	background-position: center;
	background-size: cover;
	transition: 0.5s ease-in-out;
}
section#section-frame-rates-accordion .section-frame-rates-slides .section-frame-rates-slide:nth-of-type(3) {
	background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(../images/4k-frame-rates-video-thumb.jpg);
	background-position: center;
	background-size: cover;
	transition: 0.5s ease-in-out;
}
section#section-frame-rates-accordion .section-frame-rates-slides .section-frame-rates-slide:nth-of-type(4) {
	background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(../images/2k-frame-rates-video-thumb.jpg);
	background-position: center;
	background-size: cover;
	transition: 0.5s ease-in-out;
}
/* 鼠标放上之后改变宽度 */
section#section-frame-rates-accordion .section-frame-rates-slides .section-frame-rates-slide:hover{
	flex-basis: 50%;
}
/* end 鼠标放上之后改变宽度 */
section#section-frame-rates-accordion .section-frame-rates-slide-content{
	text-align: center;
	padding-top: 13rem;
}
section#section-frame-rates-accordion .section-frame-rates-slide-content h2{
	display: block;
	font-family: 'ITC_240';
	font-size: 5.3125rem;
	-webkit-text-stroke: 3px #FFFFFF;
	-webkit-text-fill-color: none;
	color: transparent;
	line-height: 1.3em;
}
section#section-frame-rates-accordion .section-frame-rates-slide-content span{
	display: block;
	color: #FFFFFF;
	font-family: "ITC_180";
	font-size: 1.625rem;
	min-height: 1.875rem;
	line-height: 2em;
}
section#section-frame-rates-accordion .section-frame-rates-slide-content h3{
	margin-top: 1.5625rem;
	color: #FFFFFF;
	font-family: "ITC_180";
	font-size: 1.25rem;
	line-height: 2.5em;
}
section#section-frame-rates-accordion ul.section-frame-rates-slide-content-details{
	margin-top: 1%;
}
section#section-frame-rates-accordion ul.section-frame-rates-slide-content-details li{
	color: #FFFFFF;
	font-size: 1.6em;
	line-height: 0.5em;
	margin-bottom: 1em;
}

/*
background:background-color、background-position、background-size、background-repeat、
background-origin、background-clip、background-attachment 和 background-image
 linear-gradient（线性渐变）和 radial-gradient（径向渐变)
*/
/*--设置第一个弹性盒子--*/
section#section-frame-rates-accordion .section-frame-rates-slide:nth-of-type(1){
	background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(images/8k-frame-rates-video-thumb.jpg);
	background-position: center;
	background-size: cover;
	transition: 0.5s ease-in-out;
	-ms-transition: 0.5s ease-in-out;/*IE9*/
	-moz-transition: 0.5s ease-in-out;/*Firefox*/
	-webkit-transition: 0.5s ease-in-out;/*Safari和Chrome*/
}
/*--end 第一个弹性盒子--*/

/*--设置第二个弹性盒子--*/

section#section-frame-rates-accordion .section-frame-rates-slide:nth-of-type(2){
	background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(images/6k-frame-rates-video-thumb-v2.jpg);
	background-position: center;
	background-size: cover;
	transition: 0.5s ease-in-out;
	-ms-transition: 0.5s ease-in-out;/*IE9*/
	-moz-transition: 0.5s ease-in-out;/*Firefox*/
	-webkit-transition: 0.5s ease-in-out;/*Safari和Chrome*/
}

/*--end 第二个弹性盒子--*/

/*--设置第三个弹性盒子--*/

section#section-frame-rates-accordion .section-frame-rates-slide:nth-of-type(3){
	background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(images/4k-frame-rates-video-thumb.jpg);
	background-position: center;
	background-size: cover;
	transition: 0.5s ease-in-out;
	-ms-transition: 0.5s ease-in-out;/*IE9*/
	-moz-transition: 0.5s ease-in-out;/*Firefox*/
	-webkit-transition: 0.5s ease-in-out;/*Safari和Chrome*/
	
}

/*--end第三个弹性盒子--*/

/*--设置第四个弹性盒子--*/

section#section-frame-rates-accordion .section-frame-rates-slide:nth-of-type(4){
	background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(images/2k-frame-rates-video-thumb.jpg);
	background-position: center;
	background-size: cover;
	transition: 0.5s ease-in-out;
	-ms-transition: 0.5s ease-in-out;/*IE9*/
	-moz-transition: 0.5s ease-in-out;/*Firefox*/
	-webkit-transition: 0.5s ease-in-out;/*Safari和Chrome*/
}

/*--end第四个弹性盒子--*/
/*
设置第二个弹性盒元素的初始长度为 80 像素：
div:nth-of-type(2) {flex-basis: 80px;}
*/
/*--鼠标放上后改变宽度--*/

/*--end 鼠标放上后改变宽度--*/
/* -- end frame rates section帧速率部分 -- */

/*-- features slider section特征滑块 --*/
section#vr-features-slider {
	position: relative;
	/* width: 100%; */ /*-- 新加入-- */
}
section#vr-features-slider .poster-swiper {
	background-image: url(images/section-1-background.jpg); /*  这里图片没有出来  */
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}
section#vr-features-slider .swiper-wrapper{
	height: 80vh; /* 1/18新加入 */
}
/*  wiper-slide  */
section#vr-features-slider .swiper-slide { /* 通用效果 */
	text-align: center;
	font-size: 18px;
}

section#vr-features-slider .swiper-slide img { /* 通用效果 */
	max-width: 750px;
	transition: opacity .3s ease,transform .7s ease;
}

section#vr-features-slider .swiper-slide h2 { /* 通用效果 */
	display: block;
	color: #888888;
	font-size: 50px;
	font-family: 'ITC_180';
}

section#vr-features-slider .swiper-slide h3 { /* 通用效果 */
	display: block;
	-webkit-text-stroke: 3px #888888;
	-webkit-text-fill-color: none;
	color: transparent;
	font-size: 70px; /* 70px */
	font-family: 'ITC_180';
	line-height: 1em;
}

/* slide-1 */
section#vr-features-slider .slide-1 {
	display: flex;
	flex-direction: row; 
	/* 指定了内部元素是如何在 flex 容器中布局:row受 flex 容器的方向性的影响 */
	justify-content: flex-start; /* flex-start从行首起始位置开始排列  */
	align-items: center;
	grid-gap: 10em; /* 设置行与列的间隙 */
}

section#vr-features-slider .slide-1-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-left: 175px; /* 175px */	
}

section#vr-features-slider .slide-1 h2,
section#vr-features-slider .slide-1 h3 {
	text-align: left;
}

section#vr-features-slider .slide-1 h2 {
	line-height: 1.5em;
	font-size: 35px;
}

section#vr-features-slider .slide-1 h3 {
	line-height: 1.5em;
}

section#vr-features-slider .slide-1-image {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

/* end slide-1 */

/* slide-2 */
section#vr-features-slider .slide-2 {
	display: flex;
	/* flex-direction: row; */ /* 指定了内部元素是如何在 flex 容器中布局:row受 flex 容器的方向性的影响 */
	justify-content: flex-start;
	align-items: center;
	grid-gap: 50px; /* 0 网格布局中行与列之间间隙的尺寸 */	
}

section#vr-features-slider .slide-2-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-left: 175px;
}

section#vr-features-slider .slide-2 h2,
section#vr-features-slider .slide-2 h3 {
	text-align: left;
}

section#vr-features-slider .slide-2 h2 {
	line-height: 1.5em;
}

section#vr-features-slider .slide-2 ul {
	text-align: left;
}

section#vr-features-slider .slide-2 ul li {
	color: #888888;
	text-transform: uppercase;
	font-size: 14px;
	line-height: 1.5em;
}

section#vr-features-slider .slide-2-image {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
section#vr-features-slider .slide-2 img {
	max-width: 750px;
}

/* end slide-2 */

/* slide-3 */
section#vr-features-slider .slide-3 {
	display: flex;
	flex-direction: row; /* 指定了内部元素是如何在 flex 容器中布局:row受 flex 容器的方向性的影响 */
	justify-content:flex-start ; /* flex-start */
	align-items: center;
	grid-gap: 50px; /* 网格布局中行与列之间间隙的尺寸 */
}

section#vr-features-slider .slide-3-image {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding-left: 10%;
}

section#vr-features-slider .slide-3 img {
	max-width: 37.5rem; /* 650px */
} 

section#vr-features-slider .slide-3-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-right: 5%;
	text-align: left;
}

section#vr-features-slider .slide-3 h2,
section#vr-features-slider .slide-3 h3 {
	text-align: left;
}

section#vr-features-slider .slide-3 h2 {
	line-height: 1.5em;
}
section#vr-features-slider .slide-3 h3 {
	line-height: 1.5em;
}

section#vr-features-slider .slide-3-content p {
	color: #888888;
}

/* end slide-3 */

/* slide-4 */
section#vr-features-slider .slide-4 {
	display: flex;
	flex-direction: row; /* 指定了内部元素是如何在 flex 容器中布局:row受 flex 容器的方向性的影响 */
	justify-content: flex-start;
	align-items: center;
	grid-gap: 25%; /* 设置行与列的间隙 */
}

section#vr-features-slider .slide-4-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-left: 15%;
}

section#vr-features-slider .slide-4 h2,
section#vr-features-slider .slide-4 h3 {
	text-align: left;
}

section#vr-features-slider .slide-4 h2 {
	line-height: 1.5em;
}
section#vr-features-slider .slide-4 h3 {
	line-height: 1.5em;
}
section#vr-features-slider .slide-4 .slide-4-disclaimer {
	text-align: left;
	font-size: 0.7em;
	position: absolute;
	bottom: 12%;
	max-width: 35%; /* 45% */
	color: #888888;
}

section#vr-features-slider .slide-4-image {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
section#vr-features-slider .slide-4 img {
	max-width: 28rem;
}

/* end slide-4 */

/* 左侧导航 */
section#vr-features-slider .swiper-pagination {
	top: 35%;
}
.swiper-pagination {
	position: absolute;
	text-align: center;
	transition: 300ms opacity;
	transform: translate3d(0,0,0);
	z-index: 10;
}
section#vr-features-slider .swiper-pagination-bullet {
	background: #FFFFFF;
	display: block;
	width: 5px;
	height: 50px;
	margin: 10px;
	border-radius: 0; /* 添加圆角的边框 */
	outline: none; /* 设置 4 个边框的样式：outline-color outline-style outline-width */
}
section#vr-features-slider .swiper-pagination-bullet-active {
	background: #990000;
}
section#vr-features-slider .swiper-pagination-bullet span {
	display: inline-flex;
	align-items: center;
	width: 150px;
	height: 100%;
	text-align: left;
	margin-left: 15px;
	text-transform: uppercase;
	color: #FFFFFF;
	font-size: 14px;
}

/* end 左侧导航 */

/* 底部导航 */
section#vr-features-slider .pagination-bottom {
	bottom: 2%;
	top: initial;
	margin: 0 auto;
	left: 0;
	right: 0;
	justify-content: center;
	display: flex;
}
section#vr-features-slider .pagination-bottom .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	outline: none;
}
section#vr-features-slider .pagination-bottom .swiper-pagination-bullet span {
	display: none;
}

/* end 底部导航 */

/* <!-- vr features Tiles section 配件特征 --> */
section#vr-feature-titles {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr; 
	text-align: center;
	color: #FFFFFF;
}
section#vr-feature-titles .vr-other-content {
	position: relative;
	
}
section#vr-feature-titles .vr-other-three-columns-content {
	position: relative;
}
section#vr-feature-titles .vr-tile {
	width: 100%;
	position: relative;
	display: block;
	
}
section#vr-feature-titles .vr-page-three-columns-text {
	position: absolute;
	top: 40%;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 80%;
	-webkit-transition: all 0.5s ease 0s;
	transition: all .5s ease 0s; 
	/* 过渡:<transition-property过渡效果的 CSS 属性的名称 
	 *transition-duration过渡效果需要多少秒或毫秒
	 *transition-timing-function速度曲线
	 *transition-delay过渡效果何时开始 */
}
section#vr-feature-titles h3 {
	margin-top: 0.9375rem;
	text-transform: uppercase;
	font-size: 1.125rem;
	font-family: 'ITC_180';
	min-height: 2.625rem;
}
section#vr-feature-titles p {
	font-size: 0.875rem;
	margin-top: 1.875rem;
	margin-bottom: 3.125rem;
	color: #FFFFFF;
	text-transform: uppercase;
	-webkit-transition: opacity .75s ease;
	transition: opacity .75s ease;
	-webkit-transition-delay: .05s;
	transition-delay: .05s; /* 延迟时间 */
	opacity: 0;
}
section#vr-feature-titles .vr-other-content:hover .vr-page-three-columns-text {
	-webkit-transform: translate(-50%,-25%);
	transform: translate(-50%,-25%);
}
section#vr-feature-titles .vr-other-content:hover p {
	opacity: 1;
}
/* <!-- vr Tech Specs Section --> */
section#section-vr-tech-specs {
	background: #000000;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-bottom: 3.125rem;
}
section#section-vr-tech-specs .section-container {
	max-width: 80%;
	margin: 0 auto;
	padding: 75px 0 40px 0;
}
section#section-vr-tech-specs .section-container h2 {
	color: #FFFFFF;
	font-family: 'ITC_180' ;
	font-size: 3em;
}
section#section-vr-tech-specs .section-container-specs {
	max-width: 80%;
	border-collapse: separate; /* 设置表格的边框是否被合并为一个单一的边框:分开 */
	border-spacing: 0 20%; /* 相邻单元格的边框间的距离:<左右><上下> */
}
td, th {
	vertical-align: top;
	padding-left: 5%;
	padding-right: 5%;
}
section#section-vr-tech-specs .section-container-specs th {
	width: 35%;
	text-align: right;
	font-size: 1.4em;
	color: #FFFFFF;
}
section#section-vr-tech-specs .section-container-specs td {
	width: 65%;
	color: #FFFFFF;
	text-align: left;
	padding-left: 5%;
	font-size: 1.2em;
}
section#section-vr-tech-specs .section-container-specs-disclaimer {
	color: #ffffff;
	padding: 0 10%;
}