﻿@media (min-width: 767px) {
    .product{
        width:1200px;
        margin:0 auto;
        margin-top:125px;
        display:flex;
        justify-content:space-between;
    }

    .prolist {
        width: 30%;
        display: flex;
        flex-direction: column;
        margin-top:45px;
    }

        .prolist li {
            border-bottom: 1px solid #CCCCCC;
        }

    .proitem {
        display: flex;
        align-items: center;
        justify-content:space-between;
        color: #333333;
        padding: 30px 20px;
    }

    .current .proitem,.proitem:hover {
        background: #1862FE;
        color: white;
    }

        .proitem label {
            font-family: PingFang SC, PingFang SC;
            font-size: 22px;
            line-height: 22px;
        }

        .proitem p {
            font-family: PingFang SC, PingFang SC;
            font-size: 22px;
            line-height: 22px;
        }

    .probox{
        width:66%;
    }

    .pro-pos{
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding-bottom:20px;
        border-bottom:2px solid #ccc;
    }

    .pro-pos-title {
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 24px;
        color: #333333;
        line-height: 20px;
    }

    .position {
        display: flex;
        align-items: center;
        font-family: PingFang SC, PingFang SC;
        font-size: 14px;
        line-height: 20px;
        color: #999999;
    }
        .position a{
            color:#999;
        }
            .position a:hover {
                color: #1767DD;
                cursor: pointer;
                font-weight: bold;
            }

        .position label {
            color: #333;
            font-weight: bold;
        }

    .pro-content{
        margin-top:50px;
    }

    .proinfobox{
        display:flex;
        justify-content:center;
        flex-wrap:wrap;
    }

    .spcitem {
        width: calc(45% - 4px);
        margin-right: 5%;
        background: linear-gradient( 180deg, #FCFEFF 0%, #E0F0FF 100%);
        box-shadow: 0px 4px 10px 0px rgba(206,230,255,0.46);
        border-radius: 6px;
        transition: all 1s;
        border: 2px solid white;
    }
        .spcitem:hover {
            background: #fff;
            border: 2px solid #3F81E2;
        }

        .spcitem img {
            display: block;
            margin:auto;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            border: 1px solid rgba(55,140,231,0.46);
            margin-top:40px;
        }

    .pro-title {
        font-weight: bold;
        font-size: 26px;
        color: #333333;
        line-height: 20px;
        margin-top: 47px;
        margin-bottom:18px;
        text-align: center;
    }

    .pricebox{
        display:flex;
        align-items:baseline;
        justify-content:center;
    }

        .pricebox label {
            font-family: DINPro, DINPro;
            font-size: 30px;
            color: #1767DD;
            line-height: 40px;
            font-weight:bold;
        }

            .pricebox label:before {
                content: "￥";
                font-family: DINPro, DINPro;
                color: #1767DD;
                font-size: 20px;
                font-weight:400;
            }

        .pricebox p {
            font-size: 20px;
            color: #333333;
            line-height: 40px;
            margin-left: 5px;
        }

    .func{
        margin-top:50px;
    }

        .func li{
            width:88%;
            margin:auto;
            display:flex;
            margin-bottom:30px;
        }

    .custom-checkbox {
        display: inline-block;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 26px; /* 使对号居中 */
        color: #1767DD;
        margin-right: 22px;
        font-size: 20px;
    }

    .func li label {
        font-size: 20px;
        color: #333333;
        line-height: 26px;
    }

    .spcitem button {
        display:block;
        width:80%;
        margin:0 auto;
        background: linear-gradient( 90deg, #2071E0 0%, #7AD3FD 100%);
        border-radius: 47px;
        font-size: 20px;
        color: #FFFFFF;
        line-height: 22px;
        margin-bottom:50px;
        text-align:center;
        padding:18px 0;
        border:none;
        cursor:pointer;
    }

    .pro-info{
        margin-top:76px;
    }

        .pro-info label {
            display:flex;
            align-items:center;
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 20px;
            color: #333333;
            line-height: 20px;
        }

            .pro-info label i {
                width: 10px;
                height: 10px;
                background: #1862FE;
                margin-right:15px;
            }

            .procontent {
                margin: 50px 0;
            }

    .lite-dialog {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition: all 1s;
        background: rgba(0,0,0,0.7);
        z-index: 12;
        display: none;
    }

    .dialog{
        width:35%;
        top:10%;
        left:30%;
        position:absolute;
        padding:60px 40px;
        background:white;
        border-radius:20px;
    }

    #close-dialog {
        width: 20px;
        height: 20px;
        font-size: 30px;
        color: #999;
        position: absolute;
        top: 30px;
        right: 30px;
        transition: all 1s;
        cursor: pointer;
        background:none;
        border:none;
        text-align:center;
        line-height:20px;
        font-weight:500;
    }

        #close-dialog:hover {
            color: red;
        }

        .dialog label {
            display:block;
            text-align:center;
            font-weight: bold;
            font-size: 30px;
            color: #333333;
            line-height: 22px;
        }

    .dialog-img {
        width: 50%;
        margin:auto;
        margin-top:40px;
        border: 1px solid #1767DD;
    }

    #dialog-img {
        width:100%;
    }

    .dialog p {
        display:block;
        text-align:center;
        margin-top:50px;
        font-size: 14px;
        color: #666666;
        line-height: 22px;
    }

    .suredialog {
        width: 50%;
        margin: auto;
        display: block;
        text-align: center;
        margin-top: 60px;
        font-weight: bold;
        font-size: 20px;
        color: #FFFFFF;
        line-height: 45px;
        height: 45px;
        background: linear-gradient( 90deg, #2071E0 0%, #7AD3FD 100%);
        border-radius: 47px;
        border: none;
        cursor: pointer;
    }

        .suredialog:hover {
            line-height: 48px;
        }

    .foot{
        margin-top:40px;
    }
}



