.progress-wrap {position: fixed;z-index: 3;right: 5.8%;bottom: 15%;display: none;transition: all 0.4s ease-in 0s;-webkit-transition: all 0.4s ease-in 0s;-moz-transition: all 0.4s ease-in 0s;-ms-transition: all 0.4s ease-in 0s;-o-transition: all 0.4s ease-in 0s;opacity: 0;visibility: hidden;}
.progress-wrap.active {opacity: 1;visibility: visible;}
.progress-wrap a {outline: none;border: none;text-decoration: none;width: 3.25em;height: 3.25em;position: relative;display: block;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;-ms-border-radius: 50%;-o-border-radius: 50%;background-color: #fff;-webkit-filter: drop-shadow(0px 0px 12px rgba(44, 75, 114, 0.1));filter: drop-shadow(0px 0px 12px rgba(44, 75, 114, 0.1));}
.progress-wrap a svg path {fill: none;}
.progress-wrap a svg.progress-circle path {-webkit-box-sizing: border-box;box-sizing: border-box;stroke-width: 4;stroke: #009999;transition: all 0.4s linear 0s;-webkit-transition: all 0.4s linear 0s;-moz-transition: all 0.4s linear 0s;-ms-transition: all 0.4s linear 0s;-o-transition: all 0.4s linear 0s;}
.progress-wrap a span {position: absolute;top: 0;left: 0;width: 100%;}
.progress-wrap {display: inline-block;}

.inner{ width:1460px;   margin: 0 auto;  }
.pl-inner{ padding-left: calc((100vw - 1460px)/2);}
.pr-inner{ padding-right: calc((100vw - 1460px)/2);}
.ml-inner{ margin-left: calc((100vw - 1460px)/2);}
.mr-inner{ margin-right: calc((100vw - 1460px)/2);}


.idxClass{ background: url(../images/idxClassBg.png) no-repeat center top 5% #fff; background-size: 100% auto;}
.idxClassUl{display: grid; grid-gap: 1.3vw; grid-template-columns: repeat(3,1fr);}
.idxClassUl li:first-child{grid-area: 1 / 1 / 3 / 2;}
.idxClassUl li{ min-height: 390px;}
.idxClassUl li .text{ background: rgba(0, 0, 0, .6);}
.idxClassUl li .text .line{ width: 4em;  height: 5px;}
.idxClassUl li .text .more::after{ display: block; content: ''; position: absolute; left: 0; top: 0; width: 0; height: 100%; background: var(--blue); transition: all .36s;   }
.idxClassUl li .text .more:hover::after{ width: 100%;}
.idxClassUl li:hover .bigImg{ transform: scale(1.1);}

.idxProTop li:last-child{ margin-right: 0;}
.idxProTop li.on{ background: var(--blue); color: #fff;}

.idxProUl li{ width: calc((100% - 30px)/4); margin-right:10px ;}
.idxProUl li:nth-child(4n){ margin-right: 0;}
.idxProUl li .img{ width: 100%; height: 0; padding-bottom: 100%;}
.idxMore::after{ display: block; content: ''; position: absolute; left: 0; top: 0; width: 0; height: 100%; background: var(--blue); transition: all .36s;   }
.idxMore:hover::after{ width: 100%;}
.idxMore:hover{ color: #fff;}
.idxMore:hover img{filter: grayscale(100%) brightness(500%); }
.idxMore img{ height: 52px; }
.idxAbout::after{ display: block; content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(14, 14, 14, .8);    }
.idxAbout{ background: url(../images/idxAboutBg.jpg) no-repeat center center; background-size: cover; background-attachment: fixed;}
.idxAbout .more::after{ display: block; content: ''; position: absolute; left: 0; top: 0; width: 0; height: 100%; background: #fff; transition: all .36s;   }
.idxAbout .more:hover::after{ width: 100%;}
.idxAbout .more:hover{ color: var(--blue);}
 



.idxAppLine{ width: 3em; height: 4px;}
.idxAppUl li{ width: calc((100% - 45px)/4); margin-right: 15px;}
.idxAppUl li:nth-child(4n){ margin-right: 0;}
.idxAppUl li .line{  width: 4em; height: 3px;}
.idxAppUl li:hover .line{ width: 50%;}
.idxAppUl li:hover  .img img{ transform: scale(1.1);}

.idxAppSwiper .swiper-slide .line{  width: 4em; height: 3px;}
.idxAppSwiper .swiper-slide:hover .line{ width: 50%;}
.idxAppSwiper .swiper-slide:hover  .img img{ transform: scale(1.1);}
 
.idxWhy{ background: url(../images/idxWhyBg.jpg) no-repeat center center; background-size: cover; background-attachment: fixed;}
.idxWhy::after{ display: block; content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(14, 14, 14, .8);    }

.idxWhyUl li{ width: calc((100% - 6vw)/3); margin-right: 3vw;}
.idxWhyUl li:nth-child(3n){ margin-right: 0;}
.duiIcon{ height: 1.5em;}

.idxBanSwiper .text{ position: absolute; top: 0;   background: transparent; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); }
.idxBanmore{ height: 3em; border: 1px solid #fff; }
.idxBanmore::after{ display: block; content: ''; position: absolute; left: 0; top: 0; width: 0; height: 100%; background: var(--blue); transition: all .36s;   }
.idxBanmore:hover::after{ width: 100%;}
.idxBanmore:hover{ color: #fff; border-color: var(--blue);}
.banImg{ max-height: 100vh; object-fit: cover; width: 100%;}

 
@keyframes ripple-wave1{
    to {
        box-shadow: 0 0 0 15px rgba(242, 53, 53, 0.1),0 0 0 30px rgba(242, 53, 53, 0.1),0 0 0 45px rgba(242, 53, 53, 0.02);
    }
}
      .idxAboutImg .paly{
	z-index: 20;
	width: 80px;
	cursor: pointer;
	background: #f23535;
	border-radius: 50%;
	height: 80px;
	position: absolute;
	left: 50%;
	margin-left: -40px; margin-top: -40px;
	top: 50%;
	box-shadow: 0 0 rgba(242, 53, 53, 0.1),0 0 0 15px rgba(242, 53, 53, 0.1),0 0 0 30px rgba(242, 53, 53, 0.1);
	animation: ripple-wave1 1s linear infinite;
	animation-play-state: running;
	opacity: 1;
	visibility: visible;
	transform: scale(1);
	transform: scale(0.8);
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
}


@keyframes slideInUps {
    0% {
      -webkit-transform: translateY(100%);
      transform: translateY(100%);
      visibility: visible;
      opacity: 0;
    }
  
    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  .slideInUps {
    -webkit-animation-name: slideInUps;
    animation-name: slideInUps
  }
  

  .boxSizing{ box-sizing: border-box;  }

  .goods__picture .gallery-top .swiper-slide{ width: 26vw; height: 26vw;}
  .proInfoLeft{ width: 26vw;}
  .proInfoRight{ width: calc(100% - 26vw);}
  .gallery-thumbs  .swiper-slide .img{  width: 100%; height: 0; padding-bottom: 100%;}
  .gallery-thumbs  .swiper-slide.swiper-slide-thumb-active{ border-color: var(--blue);}
  
@media screen and (max-width:1660px) {

	.inner{ width:1360px;   margin: 0 auto;  }
	.pl-inner{ padding-left: calc((100vw - 1360px)/2);}
	.pr-inner{ padding-right: calc((100vw - 1360px)/2);}
	.ml-inner{ margin-left: calc((100vw - 1360px)/2);}
	.mr-inner{ margin-right: calc((100vw - 1360px)/2);}
}

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

	body{ font-size: 14px }
	.inner{ width:1240px;   margin: 0 auto;  }
	.pl-inner{ padding-left: calc((100vw - 1240px)/2);}
	.pr-inner{ padding-right: calc((100vw - 1240px)/2);}
	.ml-inner{ margin-left: calc((100vw - 1240px)/2);}
	.mr-inner{ margin-right: calc((100vw - 1240px)/2);}

    .idxClassUl li {min-height: 350px;}
    .idxAboutImg .paly{ width: 60px; height: 60px; margin-left: -30px; margin-top: -30px;}
 
     
}

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

	 div.video-wrap{ width: 90vw;height: auto;}
	 
	 .inner{ width:88%;   margin: 0 auto;  }
	.pl-inner{ padding-left: 6vw;}
	.pr-inner{ padding-right:6vw;}
	.ml-inner{ margin-left:6vw;}
	.mr-inner{ margin-right:6vw;}
    .idxClassUl li {min-height: 320px;}
}

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

	.iPad-show{ display: block;}
	.iPad-none{ display: none;}
	.inner{ width:96%;   margin: 0 auto;  }
	.pl-inner{ padding-left: 2vw;}
	.pr-inner{ padding-right:2vw;}
	.ml-inner{ margin-left:2vw;}
	.mr-inner{ margin-right:2vw;}

    .idxClassUl li {min-height: 280px;}
    .idxAboutImg .paly{ width: 48px; height: 48px; margin-left: -24px; margin-top: -24px;}
    
}
@media screen and (max-width:900px) {

	body{ font-size: 12px }
	.iconfont{ font-size: 16px;}
	.inner{ width:calc(100% - 40px);   margin: 0 auto;  }
	.pl-inner{ padding-left: 20px;}
	.pr-inner{ padding-right:20px;}
	.ml-inner{ margin-left:20px;}
	.mr-inner{ margin-right:20px;}

    .idxBanmore{ height: 2em; font-size: 12px;}
    .swiper-container-banner .swiper-slide img{ min-height: 360px !important;}

    .idxClassUl{    grid-gap: 18px;grid-template-columns: repeat(2, 1fr);}
    .idxClassUl li:first-child{grid-area: 1 / 1 / 2 / 3;}
   
    .idxClassUl li .text .line{ height: 2px !important;}
    .idxClassUl li{ min-height: 200px;}
    .idxClassUl li img.proIco{ height: 100px;}
    /* .idxClassUl li:first-child img{  height: auto;} */

    
    .idxProTop{ padding-bottom: 20px; width: 100%;  overflow-x: scroll;align-items: center; justify-content: flex-start; }
    .idxProTop::-webkit-scrollbar { height: 2px;}
    .idxProTop::-webkit-scrollbar-thumb {  background: #c1c1c1; height: 2px; }
    .idxProTop::-webkit-scrollbar-track {   background: #f1f1f1;height: 2px; }

    .idxProUl{}
    .idxProUl li{ width: calc((100% - 15px)/2); margin-right:15px ;}
    .idxProUl li:nth-child(2n){ margin-right: 0;}

    .idxMore img{ height: 30px;}
    .idxAbout .left{ margin-top: 15px;}
    .idxAboutImg .paly{ width: 40px; height: 40px; margin-left: -20px; margin-top: -20px;}
    .idxAbout .more{ height: 32px;}

    .numUl{ flex-wrap: wrap;}
    .numUl li{ width: 33.3%; margin-bottom: 10px;}
    .idxWhyUl li{ width: 100%; margin-right: 0;}
    .duiIcon{ height: 1em;}


    .goods__picture .gallery-top .swiper-slide{ width: 90vw; height: 90vw;}
    .proInfoLeft{ width: 90vw;}
    .proInfoRight{ width: 100%; padding-left: 0; margin-top: 25px;}

	 
}
.page-header{ z-index: 100;}
.mypagination .swiper-pagination-bullet{ margin: 0 3px;}

@media screen and (max-width:560px) { 
}

@media screen and (min-width:750px) { }

.amplifyBtn{ position: absolute; right: 0; bottom: 0; z-index: 50; width: 35px;}

div.zoomDiv{z-index:999;position:absolute;top:0px;left:0px;width:200px;height:200px;background:#ffffff;border:1px solid #CCCCCC;display:none;text-align:center;overflow:hidden;}
div.zoomMask{position:absolute;background:url("../images/mask.png") repeat scroll 0 0 transparent;cursor:move;z-index:1;}