.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 12% 7.86%;
}

.sec02 .l1 {
    font-size: 45px;
    margin-bottom: 30px;
}
.q8pro.eyPage .sec02 .l1{ font-size: 43px;}
.q8pro.eyPage .sec04 li .num{ font-size: 35px;}
.sec02 .l2 {
    font-size: 27px;
    color: #595959;
}

.sec02 .pic {
    position: absolute;
    right: -14%;
    top: 0;
    margin-top: -10%;
    width: 83.79%;
}

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

.sec03 {
    padding: 84px 0;
}

.sec03 ul {
    display: flex;
    justify-content: center;
}

.sec03 li {
    margin: 0 5.71%;
    text-align: center;
    font-size: 22px;
    color: #575757;
    white-space: nowrap;
}

.sec03 li .circle {
    width: 110px;
    height: 110px;
    line-height: 110px;
    color: #ef428d;
    border: 2px solid #ef428d;
    border-radius: 50%;
    font-size: 18px;
    margin: 0 auto 30px;
}

.sec03 li .circle span {
    font-size: 38px;
    margin-right: 7px;
}

.sec03 li .circle svg {
    display: inline-block;
    vertical-align: middle;
    width: 66px;
    height: 66px;
    fill: #de2f80;
}

.sec03 li:nth-child(2) .circle svg {
    width: 48px;
}

.sec03 li .l2 {
    display: block;
    font-size: 16px;
    color: #8c8c8c;
    margin-top: 21px;
}

.sec04 {
    padding: 320px 0 530px;
    background: url(../img/q8pro_sec04.jpg) no-repeat center;
    background-size: cover;
}

.sec04 .text {
    padding-right: 97px;
    text-align: center;
}

.sec04 .l1 {
    font-size: 45px;
    margin-bottom: 32px;
}

.sec04 .l2 {
    font-size: 16px;
    line-height: 1.875;
    color: #595959;
    margin-bottom: 85px;
}

.sec04 ul {
    display: flex;
    justify-content: center;
}

.sec04 li {
    font-size: 16px;
    color: #595959;
}

.sec04 li:first-child {
    margin-right: 100px;
}

.sec04 li .num {
    display: block;
    font-size: 40px;
    color: #fc3d90;
    margin-bottom: 14px;
}

.sec04 li .num span {
    font-size: 18px;
    margin-left: 10px;
}

.sec05 {
    padding: 40px 0 90px;
    background: url(../img/q8pro_sec05.jpg) no-repeat center;
    background-size: cover;
}

.sec05 ul {
    display: flex;
    justify-content: center;
}

.sec05 li {
    font-size: 22px;
    color: #fff;
    text-align: center;
}

.sec05 li:first-child {
    margin-right: 18.21%;
}

.sec05 li img {
    display: block;
    height: 330px;
}

.sec06 {
    padding: 367px 0 487px;
    background: url(../img/q8pro_sec06.jpg) no-repeat center;
    background-size: cover;
}

.sec06 .text {
    float: right;
    text-align: center;
    padding-right: 115px;
}

.sec06 .l1 {
    font-size: 45px;
    margin-bottom: 32px;
}

.sec06 .l2 {
    font-size: 16px;
    line-height: 1.875;
    color: #595959;
    margin-bottom: 85px;
}

.sec06 ul {
   display: flex;
   justify-content: center;
}

.sec06 li {
    font-size: 16px;
    color: #595959;
}

.sec06 li:nth-child(2) {
    margin: 0 62px;
}

.sec06 li .circle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 2px solid #e8458b;
    margin: 0 0 20px;
}

.sec06 li img,
.sec06 li svg {
    display: block;
    width: 40px;
    height: 40px;
    fill: #ef428d;
}

.sec07 {
    position: relative;
    text-align: center;
    padding-top: 132px;
    background: url(../img/q8pro_sec07.jpg) no-repeat center bottom;
    background-size: 1920px auto;
    margin-bottom: 120px;
}

.sec07 .l1 {
    font-size: 47px;
    margin-bottom: 25px;
}

.sec07 .l2 {
    font-size: 17px;
    color: #595959;
    margin-bottom: 12.5%;
}

.sec07 ul {
    position: relative;
}

.sec07 ul:after {
    content: '';
    display: block;
    padding-bottom: 48.93%;
}

.sec07 li {
    position: absolute;
    bottom: 0;
    width: 5.36%;
    transform: translateX(-50%);
}

.sec07 li img {
    display: block;
    width: 100%;
}

.sec07 .item1 {
    left: 84.29%;
    opacity: .08;
    margin-bottom: 40.71%;
}

.sec07 .item2 {
    left: 23%;
    opacity: .14;
    margin-bottom: 29.64%;
}

.sec07 .item3 {
    left: 94.14%;
    margin-bottom: 15.36%;
}

.sec07 .item4 {
    left: 12.29%;
    width: 7.71%;
    margin-bottom: 13.43%;
}

.sec07 .item5 {
    left: 80.71%;
    width: 7.14%;
    margin-bottom: 8.21%;
}

@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;
    }

    .sec03 {
        padding: 64px 0;
    }

    .sec03 li {
        font-size: 18px;
    }

    .sec03 li .circle {
        width: 84px;
        height: 84px;
        line-height: 84px;
        font-size: 16px;
        margin: 0 auto23px;
    }

    .sec03 li .circle span {
        font-size: 29px;
    }

    .sec03 li .circle svg {
        width: 50px;
        height: 50px;
    }

    .sec03 li:nth-child(2) .circle svg {
        width: 36px;
    }

    .sec03 li .l2 {
        font-size: 14px;
        margin-top: 16px;
    }

    .sec04 {
        padding: 243px 0 403px;
    }

    .sec04 .text {
        padding-right: 74px;
    }

    .sec04 .l1 {
        font-size: 34px;
        margin-bottom: 24px;
    }

    .sec04 .l2 {
        font-size: 14px;
        margin-bottom: 64px;
    }

    .sec04 ul {
        display: flex;
        justify-content: center;
    }

    .sec04 li {
        font-size: 14px;
    }

    .sec04 li:first-child {
        margin-right: 76px;
    }

    .sec04 li .num {
        display: block;
        font-size: 30px;
        margin-bottom: 11px;
    }

    .sec04 li .num span {
        font-size: 16px;
        margin-left: 8px;
    }

    .sec05 {
        padding: 30px 0 68px;
    }

    .sec05 li {
        font-size: 18px;
    }

    .sec05 li img {
        height: 251px;
    }

    .sec06 {
        padding: 279px 0 370px;
    }

    .sec06 .text {
        padding-right: 87px;
    }

    .sec06 .l1 {
        font-size: 34px;
        margin-bottom: 24px;
    }

    .sec06 .l2 {
        font-size: 14px;
        margin-bottom: 64px;
    }

    .sec06 li {
        font-size: 14px;
    }

    .sec06 li:nth-child(2) {
        margin: 0 47px;
    }

    .sec06 li .circle {
        width: 55px;
        height: 55px;
        margin: 0 0 15px;
    }

    .sec06 li img,
    .sec06 li svg {
        width: 30px;
        height: 30px;
    }

    .sec07 {
        padding-top: 100px;
        margin-bottom: 91px;
        background-size: 1460px auto;
    }

    .sec07 .l1 {
        font-size: 35px;
        margin-bottom: 19px;
    }

    .sec07 .l2 {
        font-size: 15px;
    }
}

@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: 13.07vw 0 16.53vw;
        text-align: center;
    }

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

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

    .sec02 .l2 {
        font-size: 3.6vw;
        margin-bottom: 15vw;
    }

    .sec02 .pic {
        position: static;
        width: auto;
        margin-top: 0;
    }

    .sec03 {
        padding: 16vw 0;
    }

    .sec03 ul {
        flex-wrap: wrap;
    }

    .sec03 li {
        width: 50%;
        margin: 0 0 5.71%;
        font-size: 4vw;
    }

    .sec03 li:nth-child(3),
    .sec03 li:nth-child(4) {
        margin-bottom: 0;
    }

    .sec03 li .circle {
        width: 24.53vw;
        height: 24.53vw;
        line-height: 24.53vw;
        font-size: 3.47vw;
        border-width: 1px;
        margin-bottom: 4.67vw;
    }

    .sec03 li .circle span {
        font-size: 8.4vw;
        margin-right: 1.6vw;
    }

    .sec03 li .circle svg {
        width: 14.67vw;
        height: 14.67vw;
    }

    .sec03 li:nth-child(2) .circle svg {
        width: 10.67vw;
    }

    .sec03 li .l2 {
        font-size: 3.2vw;
        margin-top: 2.93vw;
    }

    .sec04 {
        background-image: url(../img/q8pro_sec04_sp.jpg);
        background-position: center;
        background-size: cover;
        padding: 18.93vw 0 113.33vw;
    }

    .sec04 .text {
        float: none;
        padding-right: 0;
    }

    .sec04 .l1 {
        font-size: 6.67vw;
        margin-bottom: 6vw;
    }

    .sec04 .l2 {
        font-size:3.2vw;
        margin-bottom: 17.6vw;
    }

    .sec04 li {
        font-size: 3.47vw;
    }

    .sec04 li:first-child {
        margin-right: 12.8vw;
    }

    .sec04 li .num {
        font-size: 6.67vw;
        margin-bottom: 3.2vw;
    }

    .sec04 li .num span {
        font-size: 3.2vw;
        margin-left: 1.33vw;
    }

    .sec05 {
        padding: 10vw 0 14.2vw;
        background-color: #fc3d90;
        background-image: url(../img/q8pro_sec05_sp.jpg);
        background-size: 100% auto;
        background-position: center bottom;
    }

    .sec05 ul {
        display: block;
    }

    .sec05 li {
        font-size: 3.47vw;
    }

    .sec05 li:first-child {
        margin-right: 0;
    }

    .sec05 li img {
        height: 55vw;
        margin: 0 auto;
    }

    .sec06 {
        padding: 18.93vw 0 121.33vw;
        background-image: url(../img/q8pro_sec06_sp.jpg);
    }

    .sec06 .text {
        float: none;
        padding-right: 0;
    }

    .sec06 .l1 {
        font-size: 6.67vw;
        margin-bottom: 6vw;
    }

    .sec06 .l2 {
        font-size:3.2vw;
        margin-bottom: 12vw;
    }

    .sec06 li {
        font-size: 3.33vw;
    }

    .sec06 li:nth-child(2) {
        margin: 0 13.33vw;
    }

    .sec06 li .circle {
        width: 16vw;
        height: 16vw;
        border-radius: 50%;
        margin: 0 0 4.53vw;
    }

    .sec06 li img,
    .sec06 li svg {
        width: 9.06vw;
        height: 9.06vw;
    }

    .sec07 {
        padding: 17.6vw 0 0;
        background-image: url(../img/q8pro_sec07_sp.jpg);
        background-size: 100% auto;
        margin-bottom: 25.33vw;
    }

    .sec07 .l1 {
        font-size: 7.47vw;
        margin-bottom: 2.93vw;
    }

    .sec07 .l2 {
        font-size: 3.2vw;
        margin-bottom: 22vw;
    }

    .sec07 ul:after {
        padding-bottom: 48.93%;
    }

    .sec07 li {
        position: absolute;
        bottom: 0;
        width: 5.36%;
        transform: translateX(-50%);
    }

    .sec07 .item1 {
        left: 84.29%;
        margin-bottom: 40.71%;
    }

    .sec07 .item2 {
        left: 23%;
        margin-bottom: 29.64%;
    }

    .sec07 .item3 {
        left: 94.14%;
        margin-bottom: 15.36%;
    }

    .sec07 .item4 {
        left: 12.29%;
        width: 7.71%;
        margin-bottom: 13.43%;
    }

    .sec07 .item5 {
        left: 80.71%;
        width: 7.14%;
        margin-bottom: 8.21%;
    }

    .sec07 .item1 img {
        opacity: .08;
    }

    .sec07 .item2 img {
        opacity: .14;
    }
}