/* PC端特有样式 */
@media screen and (min-width: 1024px){
    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    ::-webkit-scrollbar-track {
        background: rgb(239, 239, 239);
        border-radius: 0;
    }

    ::-webkit-scrollbar-thumb {
        background: #bfbfbf;
        border-radius: 5px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: var(--priamry);
    }

    ::-webkit-scrollbar-corner {
        background: #bfbfbf;
    }
}

/* 页面样式 */
@media screen and (max-width: 1366px){
    .inner{
        max-width: 1024px;
        padding-left: 30px;
        padding-right: 30px;
    }

    .header-nav__item + .header-nav__item{
        margin-left: 50px;
    }

    .footer-main__logo img{
        height: 55px;
    }

    .footer-main__contact a{
        font-size: 18px;
        font-weight: bold;
    }

    .footer-copyright{
        margin-top: 45px;
    }

    .footer-copyright__text{
        font-size: 14px;
    }

    .banner-wrapper{
        padding: 75px 0;
    }

    .banner-text{
        margin-right: 35px;
    }

    .banner-text__title{
        font-size: 38px;
        line-height: 52px;
    }

    .banner-text__sub{
        font-size: 22px;
        line-height: 30px;
    }

    .banner-text__button{
        font-size: 22px;
        line-height: 32px;
        margin-top: 30px;
    }

    .guide{
        padding-top: 125px;
        padding-bottom: 105px;
    }

    .guide-text__title{
        font-size: 38px;
        line-height: 52px;
    }

    .guide-text__sub{
        margin-top: 30px;
        font-size: 22px;
        line-height: 30px
    }

    .guide-text__group{

    }

    .guide-text__item{
        font-size: 14px;
    }

    .guide-text__item + .guide-text__item{
        margin-top: 18px;
    }

    .service{
        padding-top: 60px;
        padding-bottom: 125px;
    }

    .service-title{
        font-size: 38px;
        line-height: 52px
    }

    .service-content{
        margin-top: 50px;
    }

    .service-group{
        margin-left: -18px;
    }

    .service-item{
        margin-left: 18px;
        width: calc(33.33% - 18px);
        padding: 50px 25px;
    }

    .service-text__title{
        font-size: 20px;
    }

    .service-text p{
        font-size: 14px;
        line-height: 22px;
        margin-top: 18px;
    }

    .preview{
        padding: 120px 0;
    }

    .preview-text__title{
        font-size: 38px;
        line-height: 52px;
    }

    .preview-text__sub{
        margin-top: 30px;
        font-size: 22px;
        line-height: 30px
    }

    .preview-text__item{
        font-size: 14px;
    }

    .preview-text__item + .preview-text__item{
        margin-top: 18px;
    }

    .qa{
        padding-top: 95px;
        padding-bottom: 70px;
    }

    .qa-text__item{
        font-size: 24px;
        line-height: 40px;
    }

    .qa-text__item + .qa-text__item{
        margin-top: 18px;
    }

    .analysis{
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .analysis-text__title{
        font-size: 38px;
        line-height: 52px;
    }

    .analysis-text__sub{
        margin-top: 30px;
        font-size: 22px;
        line-height: 30px;
    }

    .analysis-text__item{
        font-size: 14px;
    }

    .analysis-text__item + .analysis-text__item{
        margin-top: 18px;
    }

    .strategy{
        padding-top: 85px;
        padding-bottom: 75px;
    }

    .strategy-title{
        font-size: 38px;
        line-height: 52px;
    }

    .strategy-item{
        font-size: 20px;
        line-height: 30px;
    }

    .cooperation{
        padding-top: 80px;
        padding-bottom: 50px;
    }

    .cooperation-title{
        font-size: 38px;
        line-height: 52px;
    }

    .cooperation-sub{
        font-size: 28px;
        line-height: 40px;
    }

    .cooperation-content{
        margin-top: 70px;
    }

    .cooperation-item__header{
        font-size: 24px;
    }

    .cooperation-item__body{
        margin-top: 15px;
        font-weight: 400;
        font-size: 24px;
        line-height: 40px;
        color: #666;
        padding: 25px 45px;
    }

    .cooperation-item__footer{
        font-size: 24px;
        line-height: 35px;
        padding: 25px 24px;
    }

    .cooperation-prev{
        left: -30px;
    }

    .cooperation-next{
        right: -30px;
    }

    .cooperation-pagination{
        margin-top: 70px;
    }

    .merchant{
        padding-top: 85px;
        padding-bottom: 55px;
    }

    .merchant-title{
        font-size: 38px;
        line-height: 52px;
    }

    .merchant-sub{
        font-size: 28px;
        line-height: 40px;
    }

    .merchant-content{
        margin-top: 90px;
    }

    .merchant-item__text{
        margin-left: 50px;
    }

    .merchant-item__title{
        font-size: 26px;
        line-height: 40px;
    }

    .merchant-item__content{
        margin-top: 20px;
        font-size: 15px;
    }

    .merchant-pagination{
        margin-top: 80px;
    }

    .creative{
        padding-top: 85px;
        padding-bottom: 80px;
    }

    .creative-title{
        font-size: 38px;
        line-height: 52px;
    }

    .creative-content{
        margin-top: 60px;
    }

    .form{
        padding-top: 105px;
        padding-bottom: 60px;
    }

    .form-title{
        font-size: 26px;
        line-height: 35px;
    }

    .form-info__item-content{
        font-size: 20px;
        line-height: 30px;
        margin-top: 14px;
    }

    .form-table{
        padding-left: 9%;
    }

    .form-table__item input{
        height: 48px;
    }

    .form-table__item button{
        padding: 15px 62px;
        font-size: 15px;
    }

    .platform{
        padding-top: 80px;
        padding-bottom: 120px
    }

    .platform-title{
        font-size: 38px;
        line-height: 52px;
    }

    .platform-content{
        margin-top: 60px;
    }
}

@media screen and (max-width: 1024px){
    * {
        -webkit-tap-highlight-color: transparent;
    }

    .header-nav{
        display: none;
    }

    .header-nav__item + .header-nav__item{
        margin-left: 30px;
    }

    .footer-copyright{
        margin-top: 20px;
    }

    .footer-affix{
        right: 25px;
        width: 48px;
        height: 48px;
        bottom: 90px;
        visibility: visible;
        opacity: 1;
    }

    .footer-top{
        bottom: 145px;
        width: 48px;
        height: 48px;
        right: 25px;
    }

    .footer-whatsapp{
        width: 48px;
        height: 48px;
        right: 25px;
    }

    .banner-text__title {
        font-size: 28px;
        line-height: 40px;
    }

    .banner-text__sub {
        font-size: 18px;
        line-height: 26px;
    }

    .guide {
        padding-top: 90px;
        padding-bottom: 75px;
    }

    .guide-image{
        width: 65%;
    }

    .guide-text__title{
        font-size: 28px;
        line-height: 40px;
    }

    .guide-text__sub{
        font-size: 18px;
        line-height: 26px
    }

    .service {
        padding-top: 30px;
        padding-bottom: 75px;
    }

    .service-title{
        font-size: 28px;
        line-height: 40px;
    }

    .service-item {
        padding: 30px 15px;
    }

    .preview {
        padding: 80px 0;
    }

    .preview-text__title{
        font-size: 28px;
        line-height: 40px;
    }

    .preview-text__sub{
        font-size: 18px;
        line-height: 26px;
    }

    .qa{
        padding-top: 80px;
        padding-bottom: 60px;
    }

    .qa-text__item{
        font-size: 20px;
        line-height: 30px;
    }

    .analysis{
        padding-top: 85px;
        padding-bottom: 85px;
    }

    .analysis-text__title{
        font-size: 28px;
        line-height: 40px;
    }

    .analysis-text__sub{
        font-size: 18px;
        line-height: 26px;
    }

    .strategy{
        padding-top: 75px;
        padding-bottom: 65px;
    }

    .strategy-title{
        font-size: 28px;
        line-height: 40px;
    }

    .strategy-item{
        font-size: 18px;
    }

    .strategy-image{
        max-width: 800px;
    }

    .cooperation{
        padding-top: 65px;
        padding-bottom: 40px;
    }

    .cooperation-title{
        font-size: 28px;
        line-height: 40px;
    }

    .cooperation-sub{
        font-size: 18px;
        line-height: 26px;
    }

    .cooperation-content{
        margin-top: 35px;
    }

    .cooperation-item__header{
        font-size: 19px;
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 10px;
    }

    .cooperation-item__header icon-font{
        margin-right: 10px;
    }

    .cooperation-item__body{
        font-size: 18px;
        padding: 15px 25px;
    }

    .cooperation-item__footer{
        font-size: 18px;
        padding: 10px 15px;
    }

    .cooperation-pagination {
        margin-top: 40px;
    }

    .merchant {
        padding-top: 70px;
        padding-bottom: 40px;
    }

    .merchant-title{
        font-size: 28px;
        line-height: 40px;
    }

    .merchant-sub{
        font-size: 18px;
        line-height: 26px;
    }

    .merchant-content{
        margin-top: 55px;
    }

    .merchant-item + .merchant-item{
        margin-top: 30px;
    }

    .merchant-item__title{
        font-size: 20px;
    }

    .merchant-item__content {
        margin-top: 8px;
        font-size: 14px;
    }

    .merchant-pagination {
        margin-top: 35px;
    }

    .creative{
        padding-top: 65px;
        padding-bottom: 55px;
    }

    .creative-title{
        font-size: 28px;
        line-height: 40px;
    }

    .creative-main__text{
        font-size: 18px;
    }

    .creative-side{
        font-size: 18px;
    }

    .form {
        padding-top: 60px;
        padding-bottom: 45px;
    }

    .form-title{
        font-size: 22px;
    }

    .form-info-group{
        margin-top: 30px;
    }

    .form-info__item-content{
        font-size: 17px;
    }
    .form-info__item + .form-info__item{
        margin-top: 20px;
    }

    .platform {
        padding-top: 65px;
        padding-bottom: 95px;
    }

    .platform-title{
        font-size: 28px;
        line-height: 40px;
    }

    .platform-content {
        margin-top: 35px;
    }

    .platform-group{
        margin-left: -15px;
        margin-top: -15px;
    }

    .platform-item{
        padding: 15px;
        width: calc(33.3333% - 15px);
        margin-left: 15px;
        margin-top: 15px;
    }
}

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

    .inner{
        padding-left: 15px;
        padding-right: 15px;
    }

    main > section{
        overflow-x: hidden;
    }

    .banner-wrapper{
        padding: 35px 0;
        height: 45vw;
    }

    .banner-text{
        width: 100%;
        margin-right: 10px;
    }

    .banner-text__title{
        font-size: 17px;
        line-height: 28px;
    }

    .banner-text__sub{
        font-size: 14px;
        line-height: 20px;
    }

    .banner-text__button {
        font-size: 13px;
        line-height: 1.6;
        margin-top: 8px;
        padding: 4px 12px;
    }

    .guide {
        padding-top: 45px;
        padding-bottom: 40px;
    }

    .guide .inner{
        flex-direction: column;
    }

    .guide-image{
        width: 100%;
    }

    .guide-text{
        margin-left: 0;
        margin-top: 30px;
        width: 100%;
    }

    .guide-text__title{
        font-size: 22px;
        line-height: 32px;
    }

    .guide-text__sub{
        font-size: 16px;
        line-height: 20px;
        margin-top: 10px;
        color: #666;
        font-weight: 400;
    }

    .service-title{
        font-size: 22px;
        line-height: 32px;
    }

    .service-group{
        flex-wrap: wrap;
        margin: 0;
    }

    .service-item{
        margin-left: 0;
        width: 100%;
        padding: 0;
    }

    .service-item + .service-item{
        margin-top: 12px;
    }

    .service-item__image{
        width: 100%;
        max-width: 160px;
        margin: auto;
    }

    .service-text{
        padding: 16px 8px;
        margin-top: 8px;
    }

    .service-text__title{
        font-size: 17px;
        line-height: 28px;
    }

    .preview{

    }

    .preview .inner{
        flex-direction: column;
        align-items: flex-start;
    }

    .preview-image{
        width: 100%;
    }

    .preview-text{
        margin-left: 0;
        margin-top: 30px;
    }

    .preview-text__title{
        font-size: 22px;
        line-height: 32px;
    }

    .preview-text__sub{
        font-size: 16px;
        line-height: 20px;
        margin-top: 10px;
        color: #666;
        font-weight: 400;
    }

    .qa-bg{
        background-position: 0 70vw;
    }

    .qa .inner{
        flex-direction: column;
    }

    .qa-image{
        width: 100%;
    }

    .qa-text{
        margin-left: 0;
        width: 100%;
        margin-top: 30px;
    }

    .qa-text__tips{
        width: 100%;
        height: auto;
        margin-top: 30px;
    }

    .qa-text__item{
        font-size: 16px;
        line-height: 1.6;
    }

    .qa-text__item + .qa-text__item{
        margin-top: 10px;
    }

    .qa-text__item span{
        margin-right: 10px;
    }

    .analysis .inner{
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    .analysis-image{
        width: 100%;
    }

    .analysis-text{
        margin-top: 30px;
        width: 100%;
    }

    .analysis-text__title{
        font-size: 22px;
        line-height: 32px;
        margin: 0;
    }

    .analysis-text__sub{
        font-size: 16px;
        line-height: 20px;
        margin-top: 10px;
        color: #666;
        font-weight: 400;
    }

    .strategy-title{
        font-size: 22px;
        line-height: 32px;
    }

    .strategy-group{
        flex-wrap: wrap;
    }

    .cooperation-title{
        font-size: 22px;
        line-height: 32px;
    }

    .cooperation-sub{
        font-size: 16px;
        line-height: 20px;
    }

    .cooperation-content{
        margin-left: -7px;
        margin-right: -7px;
    }

    .cooperation-prev, .cooperation-next{
        font-size: 20px;
    }

    .cooperation-prev{
        left: 10px;
    }

    .cooperation-next{
        right: 10px;
    }

    .cooperation .swiper-slide{
        padding: 7px;
    }

    .cooperation-item{
        box-shadow: 0 0 7px 1px #FAE7DA;
        border-radius: 7px;
    }

    .merchant-title{
        font-size: 22px;
        line-height: 32px;
    }

    .merchant-sub{
        font-size: 16px;
        line-height: 20px;
    }

    .merchant-item__text{
        margin-left: 15px;
    }

    .merchant-item__title{
        font-size: 17px;
        line-height: 28px;
    }

    .creative {

    }

    .creative-title{
        font-size: 22px;
        line-height: 32px;
    }

    .creative-content{
        flex-direction: column;
    }

    .creative-main{
        width: 100%;
        font-size: 15px;
    }

    .creative-side{
        width: 90%;
        margin-left: 8%;
        margin-top: -20px;
        position: relative;
        z-index: 1;
        font-size: 15px;
        padding: 15px;
        min-height: 160px;
    }

    .form .inner{
        flex-direction: column;
    }

    .form-title{
        text-align: center;
        font-weight: 700;
    }

    .form-info{
        width: 100%;
        padding: 0;
    }

    .form-table{
        padding: 0;
        width: 100%;
        border-left: none;
        margin-top: 30px;
    }

    .form-table__item input[type="text"],
    .form-table__item input[type="email"],
    .form-table__item input[type="number"]{
        height: 45px;
        border-radius: 5px;
        padding: 0 16px;
    }

    .form-table__captcha{
        height: 45px;
    }

    .form-table__item button{
        width: 100%;
        font-weight: 400;
        border-radius: 6px;
        padding: 12px;
    }

    .form-table__grid{
        flex-direction: column;
    }

    .platform-item{
        width: calc(50% - 15px);
    }

    .footer-main{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-main__contact{
        margin-top: 10px;
        font-size: 13px;
    }

    .footer-main__address{
        margin-top: 10px;
        font-size: 13px;
        text-align: left;
    }

    .footer-main__contact a{
        font-size: 15px;
    }

    footer{
        padding: 15px 0;
    }
}