body,html{position: relative; background: #fff;}
section img{display: block;}
section h2.col{background-image: -webkit-linear-gradient(top,#4AF9DF 10%,#38B7A4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;}
.aclear{clear: both;}
.jetfan-header{
	width: 100%;
	margin: 0 auto;
	position: relative;
}
.jetfan-header img.main{
	width: 100%;margin:0 auto;
}
.jetfan-header .logo{width:560px; height: 220px;
	position: absolute; top: 28%; left: 10%;}
.jetfan-header .logo h2,.jetfan-header .logo h3{font-size: 40px; color: #3AC3AF;line-height: 50px;letter-spacing: 4px;font-weight: bold;margin-top: 10px;}
.jetfan-header .logo img{max-width: 80%;}
.jetfan-header .logo h3{color: #333;}
.jetfan-header .logo p{font-size: 22px;line-height: 32px;margin-top: 15px;color: #fff;}
.jetfan-header .logo .desc{margin-top: 30px;}
.jetfan-header .logo .desc img{max-width: 80%;display: block;margin: 0 auto;}
.jetfan-header .logo .button a{
    display: block;
    width: 110px;
    height: 34px;
    font-size: 14px;
    border-radius: 20px;
    border: 1px solid #fff;
    text-indent: 6px;
    margin: 10px auto 0;
    display: flex;
    justify-content:center;
    align-items:center;
}
.jetfan-header .logo .button a em{
    width: 70px;
    height: 34px;
    line-height: 34px;
    display: inline-block;
    font-style: normal;
    float: left;
    color: #fff;
    text-align: left;
}
.jetfan-header .logo .button a span{
    display: inline-block;
    width: 26px;
    height: 26px;
    background: url(../images/play-icon.png) no-repeat center center;
    background-size: cover;
    float: left;
}
.field{
    position: relative;
}
.field img.main{
    width: 100%;
    display: block;
}
.field .desc{
    width: 420px;
    height: 220px;
    position: absolute;
    top: 15%;
    left: 10%;
}
.field .desc h2{
    font-size: 40px;
    line-height: 60px;
    color: #fff;
}
.field .desc .p-list{
    margin-top: 20px;
}
.field .desc p{
    font-size: 22px;
    line-height: 36px;
    color: #333;
    margin: 10px 0;
}

.knead{margin-top: 80px;}
.knead .main{width: 80%;margin: 0 auto;}
.knead .main h2{
    font-size: 40px;
    text-align: center;
    color: #37B6A3;
}
.knead .main ul{
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
}
.knead .main ul li{
    width: 32%;
    position: relative;
}
.knead .main ul li img{
    display: block;border-radius: 10px;
    width: 100%;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
}
.knead .main ul li p{
    width: 100%;
    color: #fff;
    background: rgba(55,182,163,.5);
    text-align: center;
    border-radius: 18px;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 36px;
    line-height: 36px;

}

.technology{margin-top: 50px;}
.technology .main{
    width: 1200px;
    margin: 0 auto;
}
.technology .main h2{
    font-size: 40px;
    text-align: center;
    color: #37B6A3;
}
.technology .main .item1,.technology .main .item2{
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
}
.technology .main .item1 .img-box{
    width: calc(50% - 10px);
    position: relative;
}
.technology .main .item1 .img-box img,.technology .main .item2 .img-box img{
    width: 100%;
    display: block;
    border-radius: 10px;
}
.technology .main .item1 .img-box .text{
    position: absolute;
    top: 20%;
    left: 40px;
}
.technology .main .item1 .img-box .text h3,.technology .main .item2 .img-box .text h3{
    font-size: 30px;
    color: #37B6A3;
    margin: 5px 0;
}
.technology .main .item1 .img-box .text p{
    font-size: 22px;
    color: #333;
}
.technology .main .item2{
    margin-top: 20px;
}
.technology .main .item2 .img-box{
    width: calc(33.33% - 10px);
    position: relative;
}
.technology .main .item2 .img-box .text{
    position: absolute;
    top: 20px;
    left: 40px;
}
.technology .main .item2 .text p{font-size: 22px;color: #333}
.technology .main .item3{margin-top: 20px;}
.technology .main .item1 .img-box .text.right{
    right: 40px;
    left: unset;
}


.compare{margin-top: 60px;}
.compare .main{
    width: 1200px;
    margin: 0 auto;
}
.compare .main h2{
    font-size: 40px;
    text-align: center;
    color: #37B6A3;
}
.compare .main .title-item{
    display: flex;
    margin-top: 30px;
}
.compare .main .title-item .item{
    width: calc(50% - 15px);
}
.compare .main .title-item .item span{
    height: 50px;
    line-height: 50px;
    border-radius: 25px;
    display: inline-block;
    padding: 0 20px;
    background: #6D6D6D;
    color: #fff;
    font-size: 24px;
}
.compare .main .title-item .item span.active{
    background: #37B6A3;
}
.compare .main .content-item{
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
}
.compare .main .content-item .img-box{
    width: calc(50% - 15px);
    position: relative;
}
.compare .main .content-item .img-box img{
    display: block;
    width: 100%;
    border-radius: 10px;
}
.compare .main .content-item .img-box img.gray{
    filter: grayscale(100%);
}
.compare .main .content-item .img-box p{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-radius: 10px;
    padding: 5px 0;
    text-align: center;
    color: #fff;
    font-size: 18px;
    background: #37B6A3;
}
.compare .main .content-item .img-box p.gray{
    background: linear-gradient(to right,#D8D8D8,#646464);
    background:-moz-linear-gradient(to right,#D8D8D8,#646464);
    background:-webkit-linear-gradient(to right,#D8D8D8,#646464);
    background:-o-linear-gradient(to right,#D8D8D8,#646464);
    color: #333;
}

.handle,electical{
    margin-top: 40px;
}
.handle .desc{
    top: 25%;
}
.handle .desc h2,.electrical .desc h2,.change-speed .desc h2{
    color: #37B6A3;
}

.angle{margin-top: 40px;}
.angle .main{
    width: 1200px;
    margin: 0 auto;
}
.angle .main .title{
    display: flex;
    justify-content: space-between;
}
.angle .main .title .text,.angle .main .title .img{
    width: calc(50% - 20px);
}
.angle .main .title .img{text-align: center;}
.angle .main .title .img img{max-width: 60%;}
.angle .main .title .text{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.angle .main .title .text h2{
    font-size: 40px;
    color: #37B6A3;
    margin: 40px 0;
}
.angle .main .title .text p{
    font-size: 22px;
}
.angle .main .content-item{
    display: flex;
    
    justify-content: space-between;
    flex-wrap: wrap;
}
.angle .main .content-item .img-box{
    width: calc(33.33% - 10px);
    margin-bottom: 10px;
    position: relative;
}
.angle .main .content-item .img-box img{
    display: block;
    width: 100%;
    border-radius: 10px;
}
.angle .main .content-item .img-box p{
    position: absolute;
    left: 0;
    bottom: 0;
    border-radius: 10px;
    height: 50px;
    display: flex;
    align-items: center;
    background: #37B6A3;
    color: #fff;
    padding: 0 10px;
    font-size: 16px;
    width: calc(100% - 20px);
    justify-content: center;
    line-height: 20px;
}

.electrical .desc{
    width: 560px;
}
.electrical .desc h3{
    margin-top: 40px;
    color: #37B6A3;
    font-size: 30px;
}
.change-speed .desc{
    right: 10%;
    left: unset;
}

.head{margin-top: 50px;}
.head .main{
    width: 80%;
    margin: 0 auto;
}
.head .main .title h2{
    font-size: 40px;
    color: #37B6A3;
    text-align: center;
}
.head .main .title p{
    font-size: 22px;
    margin-top: 30px;
    text-align: center;
}
.head .main .content-item{
    margin-top: 40px;
}
.head .main .content-item .primary{
    display: flex;justify-content: space-between;
}
.head .main .content-item .primary .img-box{
    width: calc(33.33% - 15px);
    position: relative;
}
.head .main .content-item .primary .img-box img{
    border-radius: 10px;
    width: 100%;
}
.head .main .content-item .primary .img-box .text{
    position: absolute;
    top: 40px;
    left: 40px;
}
.head .main .content-item .primary .img-box .text h3{
    font-size: 30px;
    color: #37B6A3;
    margin: 10px 0;
}
.head .main .content-item .primary .img-box .text p{
    font-size: 16px;
}
.head .main .content-item .secondary{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}
.head .main .content-item .secondary .img-box{
    width: calc(50% - 90px);
    padding: 40px;
    background: linear-gradient(to bottom left,
    #FDFDFD 0%,           /* 从 0% 开始是 #FDFDFD */
    #F9F9F9 20%,          /* 在 20% 处过渡到接近 #FDFDFD 的颜色 #F9F9F9 */
    #E9E6ED 55%,          /* 在 55% 处过渡到接近 #E4E1E8 的颜色 #E9E6ED */
    #E4E1E8 90%,          /* 在 90% 处是 #E4E1E8 */
    #ECEAEF 95%,          /* 在 95% 处过渡到接近 #F4F3F8 的颜色 #ECEAEF */
    #F4F3F8 100%          /* 在 100% 处是 #F4F3F8 */
    );
    border-radius: 10px;
}
.head .main .content-item .secondary .img-box.gray{
    background: linear-gradient(to bottom left,
    #F3F3F5 0%,           /* 从 0% 开始是 #FDFDFD */
    #F9F9F9 20%,          /* 在 20% 处过渡到接近 #FDFDFD 的颜色 #F9F9F9 */
    #E9E6ED 55%,          /* 在 55% 处过渡到接近 #E4E1E8 的颜色 #E9E6ED */
    #E4E1E8 90%,          /* 在 90% 处是 #E4E1E8 */
    #ECEAEF 95%,          /* 在 95% 处过渡到接近 #F4F3F8 的颜色 #ECEAEF */
    #F4F3F8 100%          /* 在 100% 处是 #F4F3F8 */
    );
}
.head .main .content-item .secondary .img-box .top{
    display: flex;
    justify-content: space-between;
}
.head .main .content-item .secondary .img-box .top .text{
    width: calc(50% - 15px);
}
.head .main .content-item .secondary .img-box .top .text h3{
    font-size: 30px;
    color: #37B6A3;
    margin: 15px 0;
}
.head .main .content-item .secondary .img-box .top img{
    max-width: 100%;
    border-radius: 10px;
}
.head .main .content-item .secondary .img-box .top .img{
    width: calc(50% - 15px);
}
.head .main .content-item .secondary .img-box .single-img{
    margin: 20px 0;
}
.head .main .content-item .secondary .img-box .single-img img{
    width: 100%;
    border-radius: 10px;
}

.db{margin-top: 40px;position: relative;}
.db img.main{width: 100%;}
.db .desc{
    width: 1200px;
    text-align: center;
    position: absolute;
    left: calc(50% - 600px);
    top: 60px;
}
.db .desc h2{
    color: #37B6A3;
    font-size: 40px;
}
.db .desc p{
    margin-top: 15px;
    font-size: 18px;
}
.db .soundlist{
    width: 1200px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: absolute;
    left: calc(50% - 600px);
    padding: 30px 0;
    bottom: 0px;
}
.db .sound-level {
    width: calc(50% - 20px);
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.db .sound-level img{width: 40px;height: 40px;}
.db .description {
    margin-left: 20px;
    width: 100%;
}

.db .progress-bar {
    width: 100%;
    height: 10px;
    background-color: #fff;
    border-radius: 5px;
    overflow: hidden;
}

.db .progress-bar div {
    height: 100%;
    background-color: #37B6A3;
    border-radius: 10px;
}

.db .sound-level:nth-child(1) .progress-bar div {
    width: 20%;
}

.db .sound-level:nth-child(2) .progress-bar div {
    width: 50%;
}

.db .sound-level:nth-child(3) .progress-bar div {
    width: 40%;
}

.db .sound-level:nth-child(4) .progress-bar div {
    width: 70%;
}

.scene{margin-top: 40px;}
.scene .main{
    width: 1200px;
    margin: 0 auto;
}
.scene .main h2{
    color: #37B6A3;
    font-size: 40px;
    text-align: center;
}
.scene .container {
    width: 900px;
    margin: 50px auto 0;
}

.scene .feature-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 50px;
    position: relative;
}

.scene .image-container {
    flex: 60%;
    max-width: 540px;
    width: 540px;
}

.scene .image-container img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.scene .text-box {
    flex: 50%;
    max-width: 450px;
    width: 450px;
    position: absolute;
    right: 0;
    background-color: #37B6A3;
    color: white;
    padding: 60px 20px;
    border-radius: 10px;
    text-align: left;
}

.scene .text-content {
    display: flex;
    align-items: center;
}

.scene .number {
    font-size: 6em;
    font-weight: bolder;
    margin-right: 20px;
    color: #87D5C8;
}

.scene .description p {
    margin: 0;
    line-height: 1.5;
    font-size: 22px;
}

.scene .reverse .image-container {
    order: 2;
    margin-left: auto;
}

.scene .reverse .text-box {
    left: 0;
    right: auto;
}

.design .desc{
    top: 25%;
}

.params{
    padding: 80px 0;
    background: #EAE9EE;
}
.params .main{
    width: 1000px;
    margin: 0 auto;
}
.params .main h2{
    color: #37B6A3;
    font-size: 40px;
    text-align: center;
}
.specifications {
    width: 100%;
    margin: 50px auto;
    font-family: Arial, sans-serif;
}

.spec-row {
    display: flex;
    align-items: center;
    padding: 15px;
}

.spec-row:nth-child(even) {
    background-color: #fff;
}

.spec-label {
    flex: 1;
    padding-right: 20px;
}

.spec-value {
    flex: 2;
}
/*==========================================*/
.popup-item{width: 100%;height: 100%;display: none;position: relative;}
.popup-item .shadow{
    width: 100%;
    height: 100%;
    background: #333;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100000;
    overflow: hidden;
}
.popup-item .window{
    z-index: 100002;
    width: 1200px;
    height: 676px;position: fixed;
    margin-left: -600px;
    left: 50%;
    top: 50%;
    margin-top: -337px;
}
.popup-item .window video{
    max-width: 100%;
    margin:0 auto;
}
.popup-item .center{
    align-items: center;
    display: -webkit-flex;
    justify-content: center;
}
.popup-item span{
    width: 40px;
    height: 40px;
    display: block;
    position: fixed;
    top: 20px;
    right: 20px;
    font-size: 30px;
    color: #999;
    cursor: pointer;
    z-index: 100002;
}

@media (max-width:1660px){
}
@media (min-width:1440px) and (max-width:1660px){

}
@media (max-width:1440px){
    .jetfan-header .logo{width: 400px;}
    .jetfan-header .logo h3{font-size: 36px;line-height: 50px;letter-spacing: 0;}
    section h2{font-size: 36px !important;line-height: 50px !important;}
    .field .desc p,.technology .main .item1 .img-box .text p,.technology .main .item2 .text p,.angle .main .title .text p,
    .head .main .title p{font-size: 18px;line-height: 30px;}


}
@media (max-width:1280px){

}