#main { overflow: hidden;  }
.section .inner { position: relative;}
.sec01 {background: #ef428d; }

.sec01 .text {
    padding: 10.86% 0 5.29% 7.86%;
}

.sec01 .l1 {
    font-size: 21px;
    margin-bottom: 34px;
}

.sec01 .l2 {
    font-size: 72px;
    margin-bottom: 20px;
    color: #fff;
}

.sec01 .l3 {
    font-size: 28px;
    color: #fff;
}

.sec01 .pic {
    position: absolute;
    left: 30.86%;
    top: 0;
    margin-top: 4.57%;
    width: 12.57%;
}

.sec01 svg {
    width: 100%;
    fill: #be256a;
}

.sec02 {
    background: #f7f7f7;
}

.sec02 .text {
    position: relative;
    z-index: 1;
    padding: 9.86% 0 11.78% 7.86%;
}

.sec02 .l1 {
    font-size: 45px;
    margin-bottom: 30px;
}

.sec02 .l2 {
    font-size: 27px;
    color: #595959;
}

.sec02 .l3 {
    font-size: 16px;
    line-height: 1.7;
    color: #595959;
}

.sec02 .pic {
    position: absolute;
    right: -12.62%;
    top: 0;
    margin-top: -12.71%;
    width: 77.14%;
}

.sec02 .pic img {
    width: 100%;
}

.sec03 {
    /*padding-bottom: 22.5%;*/
    position: relative;
    background:#030303 url('../img/product/q20_11.gif') no-repeat;
    background-position: bottom;
    background-size: 100% auto;
}
.sec03 .text{padding: 10.71% 0 11.93%;}
.sec03 .ulmain{display: flex; width: 100%; justify-content: space-between; color: #fff;}
.sec03 .ulmain .ihd{font-size: 18px;text-align: center; margin-bottom: 23px;}
.sec03 .ulmain .ihd span{font-size: 72px; font-weight: bold}
.sec03 .ulmain li:nth-child(1){margin-left: 120px;}
.sec03 .ulmain li:nth-child(4){margin-right: 138px;}

.sec04 {position: relative;}
.sec04 .bg{ background:#fff url('../img/product/q20_3.jpg') no-repeat;background-position: center;background-size: 100% auto;  }
.sec04 .bgline{height:147px;width:100%; display:none; }
.sec04 .bg img{width:100%}
.sec04 .inner{position: relative;display: flex; justify-content: flex-end;}
.sec04 .text{right:0; /*width:730px;*/ width: 52.14%; padding-top: 22.57%; padding-bottom: 67.71%; margin-right: 0%;}
.sec04 .text .l1{font-size: 45px; color: #000202; text-align: center; margin-bottom: 65px;}
.sec04 .text ul{display: flex; justify-content: space-between;}
.sec04 .text li{text-align: center;line-height: 1.6;}
.sec04 .text li .circle{margin-bottom: 33px;}
.sec04 .text li .circle img{width:71px;}
.sec04 .yqbg{
    position: absolute;
    width: 61.28%;
    margin-left: -17%;
    margin-top: 12.5%;
    left: 0;
    height: 60%;
    background:url('../img/product/q20_9.png') no-repeat;background-size: 100% auto;
}
.sec04 .yqbg .dian{position: absolute; bottom: 0; cursor: pointer }
.sec04 .yqbg .dian span{display: block;background: #ee428c; border-radius: 50%; }
.sec04 .yqbg .dian .big{width:32px;height:32px; opacity: 0.5; }
.sec04 .yqbg .dian .small{width:14px;height:14px; position: absolute; opacity: 0.8;left:9px; bottom: 9px; }
.sec04 .yqbg .dian1{left: 40%;  bottom: 23%;}
.sec04 .yqbg .dian2{left: 30%;bottom: 32%;}
.sec04 .yqbg .dian3{left: 72.7%; bottom: 25%;}
.sec04 .yqbg .dian .big.hovered{animation: twinkling 1s infinite ease-in-out; }
@keyframes twinkling {
    0% {
        opacity: 0.2;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.12);
    }
    100% {
        opacity: 0.2;
        transform: scale(1);
    }
}

.sec05 {
   position: relative;
    background:#030303 url('../img/product/q20_10.gif') no-repeat;
    background-position: bottom;
    background-size: 100% auto;
    max-height: 884px;
}
.sec05 .twoinner{padding-bottom: 880px;}
.sec05 .bgpinkcont{top:-60.44%;width: 106%;   position: absolute;z-index: 99;left: 50%; transform: translateX(-50%); }
.sec05 #bgpink{height: 50px;width: 100%;}
.sec05 .bgpink{background: #ef428d; width:100%; color: #fff; overflow: hidden}
.sec05 .bgpink .title{font-size: 45px; text-align: center; margin-top: 82px; }
.sec05 .bgpink .yqimg_main{display: flex; justify-content: space-between; text-align: center;margin: 84px 8.24% 0;padding-bottom: 6%;}
.sec05 .bgpink .lis img{width:388px; transition: transform 1s ease;}
.sec05 .bgpink .lis .p1{font-size: 24px; margin: 12px 0 20px;}
.sec05 .bgpink .lis.hovered img{ transform:scale(1.1) }
.sec05 .pic img {
    width: 100%;
}
.sec05 .text {
    text-align: center;
    position: absolute;
    padding-top: 15.57%;
    color: #fff;
    width: 100%;
}
.sec05 .l1 {font-size: 45px;  }
.sec05 ul{ display: flex; justify-content: space-around; margin: 89px 174px 0 200px;}
.sec05 ul li .cot{position: relative; width:128px; margin: 0 auto; margin-bottom: 32px;}
.sec05 ul li:nth-child(2){margin-left: 40px;}
.sec05 ul li:nth-child(3){margin-left: 22px;}
.sec05 ul .circle{  width:108px; height: 108px; line-height: 108px; border-radius: 50%; background: #221018;  position: absolute; top: 10px; left: 10px;}
.sec05 ul .circle img{  width:79px;vertical-align: middle; }
.sec05 ul .circle_line{  width:100%;}
.sec05 .text li .svgline1{stroke-width:1;stroke-dashoffset:376.38;stroke-dasharray:376.38;}
.sec05 .text li.visible .svgline1{
    animation: dashb 2s linear alternate forwards ;
}
@keyframes dashb {
    to {stroke-dashoffset: 0;}
}


.sec06 {
    position: relative;
    background: #fafafa;
}
.sec06 .inner{overflow: hidden;}
.sec06 .title{font-size:45px; color: #000202; margin-bottom: 44px;}
.sec06 .sontext{color:#595959; margin-bottom: 14px;}
.sec06 .text{margin-top: 124px; margin-left: 164px; }
.sec06 .text .txt{margin-left: 180px;}
.sec06 .text .txt p{color: #595959; margin-bottom: 16px;}
.sec06 .midimg{margin-top: 60px;}
.sec06 .iconimg{ display: flex; justify-content: space-between; margin:113px 120px 0 120px; padding-bottom: 110px; text-align: center }
.sec06 .iconimg li{border-right: 1px solid #c9c8c8; width:269px;}
.sec06 .iconimg li:last-child{border-right: none}
.sec06 .iconimg li img{width:72px;}
.sec06 .iconimg li .p1{font-size: 26px; color: #000; margin: 33px 0 15px;}
.sec06 .iconimg li .p2{color: #595959;}



@media all and (max-width: 1480px) {
    .sec01 .l1 {
        font-size: 16px;
        margin-bottom: 26px;
    }

    .sec01 .l2 {
        font-size: 55px;
        margin-bottom: 15px;
    }

    .sec01 .l3 {
        font-size: 21px;
    }

    .sec02 .l1 {
        font-size: 34px;
        margin-bottom: 23px;
    }

    .sec02 .l2 {
        font-size: 21px;
        margin-bottom: 30px;
    }

    .sec02 .l3 {
        font-size: 12px;
    }
    .sec03 .ulmain .ihd span{font-size: 34px;}
    .sec03 .ulmain .ihd{font-size: 16px;}
    .sec04 .text .l1{font-size: 34px;}
    .sec04 .text{padding-bottom: 63%;padding-top: 14.71%;}
    .sec04 .yqbg{width: 55.28%;margin-left: -10%;margin-top: 11.5%;}
    .sec04 .bgline { height: 63px;}
    .sec05 .l1 {
        font-size: 34px;
        margin-bottom: 24px;
    }
	.sec05 .bgpinkcont{top:-53.44%}
    .sec05 .bgpink{top: -46.44%;width: 100%;}
    .sec05 .bgpink .title{font-size: 34px;margin-top: 42px;}
    .sec05 .bgpink .lis img{width:308px}
    .sec05 .bgpink .yqimg_main{margin: 50px 8.24% 0;padding-bottom: 4%;}
    .sec05 .bgpink .lis .p1{font-size: 20px;margin: 12px 0 16px;}
    .sec05 .twoinner {padding-bottom: 720px; background-size: 100% auto;}
    .sec05 ul{margin: 76px 135px 0 166px;}
    .sec05 ul li .cot{width: 118px;}
    .sec05 ul .circle{width: 98px;height: 98px;line-height: 98px;}
    .sec05 ul .circle img{width: 70px;}
    .sec06 .title{font-size: 34px;}
    .sec06 .text { margin-top: 80px;}
    .sec06 .midimg{width:100%;}
    .sec06 .iconimg{padding-bottom: 62px;}
    .sec06 .iconimg li img {width: 70px;}
    .sec06 .iconimg li .p1{font-size: 22px;margin: 26px 0 13px;}
}

@media all and (max-width: 1290px) {
	.sec04 .text{padding-bottom: 59%;}
	.sec04 .yqbg{margin-top: 7.5%;}
}


@media all and (max-width: 767px) {
    .sec01 .text {
        padding: 8% 0 6.27% 12.93%;
    }

    .sec01 .l1 {
        font-size: 3.47vw;
        margin-bottom: 5.01vw;
    }

    .sec01 .l2 {
        font-size: 9.73vw;
        margin-bottom: 2.27vw;
    }

    .sec01 .l3 {
        font-size: 4vw;
    }

    .sec01 .pic {
        left: auto;
        right: 12.8vw;
        top: auto;
        bottom: 6.27vw;
        margin-top: 0;
        width: 22vw;
    }

    .sec02 {
        padding: 12.67% 0 10.67%;
        text-align: center;
    }

    .sec02 .text {
        padding: 0;
        margin-bottom: 14.2vw;
    }

    .sec02 .l1 {
        font-size: 6vw;
        margin-bottom: 3.73vw;
    }

    .sec02 .l2 {
        font-size: 4.27vw;
        margin-bottom: 4.53vw;
    }

    .sec02 .l3 {
        font-size: 3.2vw;
        line-height: 1.5;
        text-align: center;
    }

    .sec02 .pic {
        position: static;
        margin: 0 auto;
        width: 100%;
    }
    .sec02 .pic img {
        width: 139%;
        margin-left: -29%;
    }
    .sec03{background-size:auto;background-position: center bottom;}
    .sec03 .text {
        padding: 14.03% 0;
    }
    .sec03 .ulmain { justify-content: space-around;flex-wrap: wrap; }
    .sec03 .ulmain li{width:50%; text-align: center;}
    .sec03 .ulmain li:nth-child(1){margin-left: 0; margin-bottom: 10.26vw;}
    .sec03 .ulmain li:nth-child(2){margin-left: 0; margin-bottom: 10.26vw;}
    .sec03 .ulmain li:nth-child(4){margin-right: 0;}
    .sec03 .ulmain .ihd{font-size: 3.2vw; margin-bottom: 3.06vw;}
    .sec03 .ulmain .ihd span{font-size: 11.86vw}
    .sec03 .ulmain .ibd {font-size: 2.93vw}
    .sec04 .inner {justify-content: center; }
    .sec04 .text{width: 100%; margin-right:0;}
    .sec04 .text ul{justify-content: space-around; flex-wrap: wrap;}
    .sec04 .text .l1{font-size: 5.33vw; margin-bottom: 11.4vw;}
    .sec04 .text li{width:50%; font-size: 3.2vw; color: #666666 }
    .sec04 .text li:nth-child(1),.sec04 .text li:nth-child(2){margin-bottom: 9.93vw;}
    .sec04 .text li .circle{margin-bottom: 3.06vw;}
    .sec04 .text li .circle img{width:14.66vw;}
    .sec04 .bg {
        background: #fff url(../img/product/q20sp_1.jpg) no-repeat;
        background-position: center;
        background-size: 100% auto;
    }
    .sec04 .yqbg,.sec04 .bgline,.sec05 #bgpink{display: none;}
    .sec04 .text { padding-bottom: 101.5%;padding-top: 15.46%; }
    .sec05{max-height: none; background-position: center bottom;  background-size: auto;}
    .sec05 .bgpinkcont{top:0; width:100%; left: 0; transform: translateX(0); position: relative; z-index: 1;}
    .sec05 .bgpink .title{font-size: 6vw; margin-top: 42px; margin-top:14.93vw; margin-bottom: 11.33%;}
    .sec05 .bgpink .yqimg_main{display: block;width: 91.73%;margin: 0 auto;padding-bottom: 13.73%;}
    .sec05 .bgpink .yqimg_main .lis{display: flex; width:100% }
    .sec05 .bgpink .lis .lfimg{width:49.13%; margin-right: 5.8%;}
    .sec05 .bgpink .lis img{width:100%}
    .sec05 .bgpink .lis .sp_right {text-align: left; width:43.86%;}
    .sec05 .bgpink .lis:nth-child(1) .sp_right{margin-top: 3.5%;}
    .sec05 .bgpink .lis:nth-child(2) .sp_right{margin-top: 8%;}
    .sec05 .bgpink .lis:nth-child(3) .sp_right{margin-top: 14%;}
    .sec05 .bgpink .lis:nth-child(2){margin: 3vw 0;}
    .sec05 .bgpink .lis .p1 {font-size: 3.73vw; margin: 0 0 4.06vw}
    .sec05 .bgpink .lis .p2{font-size: 3.2vw; line-height: 1.6;}
    .sec05 .text{position: relative;padding-top: 16.66%;}
    .sec05 .l1{font-size: 6vw; margin-bottom: 11.73vw;}
    .sec05 ul{margin: 0;flex-wrap: wrap;}
    .sec05 ul li{width:50%;  margin-left: 0 !important; font-size: 3.33vw; margin-bottom: 12.46vw;}
    .sec05 ul li .cot{width:22.66vw; margin-bottom: 4vw;}
    .sec05 ul .circle { width: 19.73vw; height: 19.73vw; line-height: 19.73vw;top: 1.465vw;  left:  1.465vw; }
    .sec05 ul .circle img{width:13.6vw;}
    .sec05 ul .circle_line{width:99%}
    .sec05 .jtjiao {
        display: block;
        width: 0;
        border-left: 4vw solid transparent;
        border-right: 4vw solid transparent;
        border-bottom: 4vw solid #ef428d;
        position: absolute;
        top: -3.8vw;
        left: 50%;
        margin-left: -3vw;
    }


    .sec05 .twoinner{padding-bottom: 42.26%;}
    .sec06 .title{margin-left: 0; font-size: 6vw; text-align: center;}
    .sec06 .text{margin-top: 14.93%;margin-bottom: 17.6%; margin-left: 0; text-align: center;}
    .sec06 .midimg{margin-top: 0;width: 104%; margin-left: -2%; padding-bottom: 14.66%; }
    .sec06 .iconimg{margin:0; justify-content: space-around; flex-wrap: wrap; width:100%; padding-bottom: 0;}
    .sec06 .iconimg li{width:calc(50% - 1px); margin-bottom: 16.73vw;}
    .sec06 .iconimg li:nth-child(2){border-right: none;}
    .sec06 .iconimg li .p1{font-size: 4.8vw; margin: 4vw 0 2vw;}
    .sec06 .iconimg li .p2{font-size: 3.2vw; color: #666666;}
    .sec06 .iconimg li:nth-child(3) .p1,.sec06 .iconimg li:nth-child(4) .p1{margin-top: 5.3vw}






}