/* 2020/04/24 build */
/* 2020/05/19 update */
/* 2020/06/17 update */
.box-title h3 {
	margin-left: 5.8%;
}
.sec1 {
	padding: 8.3% 0 16.6%;
	background: #f1f1f1;
}
.sec1 .content-item {
	vertical-align: top;
	display: inline-block;
}
.sec1 .item-info {
	width: 35%;
	margin-left: 1.1%;
	padding-top: 0.6%;
}
.sec1 .item-info .box-tag {
	margin-top: 6%;
}
.sec1 .item-info .box-tag img {
	width: 13.4%;
	margin-right: 1.8%;
}
.sec1 .item-info .box-download {
	width: 59.674%;
	margin: 5.2% 0 0 -1%;
}
.sec1 .item-prod {
	width: 31.667%;
	margin-left: 0.8%;
}
.sec1 .item-prod .level1 {
	width: 19.93%;
	margin: -1% 3.8% 1.8% 0;
}
.sec1 .item-prod .box-option {
	margin: 3.4% 3.6% 0 0;
}
.sec1 .item-prod .option-item {
	display: inline-block;
}
.sec1 .item-prod .box-colors {
	margin-top: 1.6%;
	vertical-align: top;
}
.sec1 .item-prod .box-colors .color-item {
	margin: 0 0.5rem;
	padding: 0.4rem;
	border: 0.01rem solid transparent;
	display: inline-block;
}
.sec1 .item-prod .box-colors .color-item.active {
	border: 0.01rem solid #848484;
}
.sec1 .color-item div {
	width: 2.3rem;
	height: 2.3rem;
}
.sec1 .color-item1 div {
	FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=#898b8e, endColorStr=#6d6f72); /*IE 6 7 8*/
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#898b8e), to(#6d6f72));  /* Safari 4-5, Chrome 1-9*/
	background: -webkit-linear-gradient(#898b8e, #6d6f72); /*Safari5.1 Chrome 10+*/
	background:-moz-linear-gradient(#898b8e, #6d6f72); /*鐏嫄*/
	background: -ms-linear-gradient(#898b8e, #6d6f72); /* IE 10 */
	background: -o-linear-gradient(#898b8e, #6d6f72); /*Opera 11.10+*/
    background: linear-gradient(#898b8e, #6d6f72);
}
.sec1 .item-prod .box-3d {
	width: 35%;
	margin-left: 10.4%;
}
.sec1 .item-prod .box-3d img {
	width: 27.3%;
}
.sec1 .item-prod .box-3d .btn-180 {
	margin-left: 7.4%;
}
.sec2 {
	margin-top: -14%;
}
.sec2 .box-title2 {
	width: 88.4%;
	top: 8.8%;
	left: 11.6%;
}
.sec2 .prod2 {
	width: 65.99%;
}
.sec2 .box-text {
	width: 55.209%;
	top: 62%;
}
.sec2 .text2-2 {
	margin-top: 3%;
}
.sec2 .text2-3 {
	margin-top: 2.5%;
}
.sec3 {
	margin-top: -14.2%;
}
.sec3 .box-title3 {
	width: 88.4%;
	top: 11.5%;
	left: 11.6%;
	color: #2f3e56;
}
.sec3 .content-item {
	opacity: 0;
}
.sec3 .content-item.active {
	opacity: 1;
}
.sec3 .box-wind3-1 {
	width: 66.667%;
	height: 0%;
	top: 34%;
	overflow: hidden;
}
.windAn3-1 {  
	height: 57%!important;
    -webkit-transition: all 3s ease-in-out; /* Safari鍜孋hrome */ 
    -moz-transition: all 3s ease-in-out; /*Firefox 4 */  
    -o-transition: all 3s ease-in-out; /* Opera */ 
    transition: all 3s ease-in-out;  
}
.sec3 .box-wind3-2 {
	width: 70.834%;
	height: 0%;
	top: 34%;
	right: 9.2%;
	overflow: hidden;
}
.windAn3-2 {  
	height: 48%!important;
    -webkit-transition: all 3s ease-in-out; /* Safari鍜孋hrome */ 
    -moz-transition: all 3s ease-in-out; /*Firefox 4 */  
    -o-transition: all 3s ease-in-out; /* Opera */ 
    transition: all 3s ease-in-out;  
}
.sec3 .box-text3-1, .sec3 .box-text3-2 {
	width: 36.771%;
	top: 28.3%;
	left: 11.9%;
}
.sec3 .text3-1-2 {
	margin-top: 6%;
}
.sec3 .text3-2-2 {
	margin-top: -5.5%;
}
.sec3 .box-option {
	width: 36.771%;
	top: 52.8%;
	left: 11.6%;
}
.sec3 .option-item {
	width: 32.012%;
	display: inline-block;
}
.sec3 .option-item:first-child {
	margin-right: 11%;
}
.sec3 .option-item img {
	opacity: 0.4;
}
.sec3 .option-item.active img {
	opacity: 1;
}
.sec3 .option-item .line {
	height: 0.4rem;
	background: #fff;
	opacity: 0;
}
.sec3 .option-item1 .line {
	width: 80%;
}
.sec3 .option-item2 .line {
	width: 50%;
}
.sec3 .option-item.active .line {
	opacity: 1;
}
.sec4 {
	margin-top: -14.2%;
}
.sec4 .box-title4 {
	width: 88.4%;
	top: 8.8%;
	left: 11.6%;
}
.sec4 .box-text {
	top: 41.7%;
}
.sec4 .text4-2 {
	margin-top: 4.9%;
}
.sec4 .box-swiper {
	top: 58.5%;
}
.sec4 .swiper4 {
	padding-bottom: 4.2%;
}
.sec4 .swiper-slide img {
	width: 125.418%;
	margin-left: -12.709%;
}
.sec4 .swiper-button-prev, .sec4 .swiper-button-next {
	width: 3%;
	height: 13.2%;
	top: 40.4%;
}
.sec4 .swiper-button-prev {
	left: 19.8%;
	background: url('/img/pc/seriesbg/arrows.png') no-repeat;
	background-position: 0 0;
	background-size: auto 100%;
}
.sec4 .swiper-button-next {
	right: 19.8%;
	background: url('/img/pc/seriesbg/arrows.png') no-repeat;
	background-position: 100% 0;
	background-size: auto 100%;
}
.sec4 .swiper4 .swiper-pagination {
	width: 61.6%;
	height: 0.3rem;
	top: 98%;
	left: 19.2%;
	background: rgba(181, 181, 181, 0.3);
}
.sec4 .swiper4 .swiper-pagination-progressbar {
	background: #77a3a3;
}
.component-select {
	margin-top: 6.4%;
}
.sec2 .box-title2, 
.sec2 .prod2,
.sec2 .text2-1,
.sec2 .text2-2,
.sec2 .text2-3,
.sec3 .box-title3,
.sec3 .text3-1-1,
.sec3 .text3-1-2,
.sec3 .box-option,
.sec4 .box-title4,
.sec4 .text4-1,
.sec4 .text4-2,
.sec4 .box-swiper {
	opacity: 0;
}